@postnord/pn-marketweb-components 4.3.6 → 4.3.7

package/umd/modules/@postnord/web-components/collection/components/input/pn-file-upload/pn-file-upload.js

@@ -18,12 +18,12 @@ import { translations } from "./translation";
  * */
 export class PnFileUpload {
     id = `pn-file-upload-${uuidv4()}`;
-    idFileUpload = `${this.id}-label`;
     idHelpertext = `${this.id}-helpertext`;
     idAccepttext = `${this.id}-accept`;
     fileInputElement;
     invalid = false;
     maxSizeInBytes = 0;
+    rippleClass = '.pn-file-upload-dropzone';
     hostElement;
     files = [];
     isHovering = false;
@@ -35,38 +35,48 @@ export class PnFileUpload {
      * @since v7.1.0
      **/
     helpertext;
-    /** Manually set the language. @category Features */
-    language = null;
-    /** Always hide the progress bar, even when upload has begun. @category Features  */
-    hideProgress = false;
+    /** Manually set the language. @since v7.1.0 */
+    language = undefined;
     /**
      * Set a HTML name.
      * @since v7.1.0
-     * @category HTML attributes
+     * @category Native attributes
      */
     name;
-    /** Set which file types the input accepts. Ex: .docs,.xml @category HTML attributes */
+    /** Set which file types the input accepts. Ex: .docs,.xml @category Native attributes */
     accept;
-    /** Set the maximum upload size. @category HTML attributes */
-    maxSize = '';
     /**
      * Use the capture mode.
      * @since v7.1.0
-     * @category HTML attributes
+     * @category Native attributes
      */
     capture;
+    /** Allow multiple files to be selected. Will be overwritten to true, if `limit` is above 1. @category Native attributes */
+    multiple;
+    /** Set the input as required. @category Native attributes */
+    required = false;
+    /** Disable the input. @category Native attributes */
+    disabled = false;
     /**
      * Set maximum amount of files to be selected.
      * Any value above 1 will force the `multiple` to be `true`.
-     * @category HTML attributes
+     * @category Features
      **/
     limit = 1;
-    /** Allow multiple files to be selected. Will be overwritten to true, if `limit` is above 1. @category HTML attributes */
-    multiple;
-    /** Set the input as required. @category HTML attributes */
-    required = false;
-    /** Disable the input. @category HTML attributes */
-    disabled = false;
+    /** Set the maximum upload size. @category Features */
+    maxSize = '';
+    /**
+     * Always hide the progress bar, even when upload has begun.
+     * @since v7.1.0
+     * @category Features
+     */
+    hideProgress = false;
+    /** Set a custom ID for the file upload. @since v7.25.0 @category HTML attributes */
+    pnId = this.id;
+    handleId() {
+        this.idHelpertext = `${this.getId()}-helpertext`;
+        this.idAccepttext = `${this.getId()}-accept`;
+    }
     handleLimit() {
         this.multiple = this.limit > 1;
     }
@@ -88,11 +98,12 @@ export class PnFileUpload {
     /** Emitted once the upload is finished. */
     uploadCompleted;
     async componentWillLoad() {
-        this.handleLimit();
-        this.handleMaxBytes();
-        if (this.language === null)
+        if (this.language === undefined)
             await awaitTopbar(this.hostElement);
     }
+    getId() {
+        return this.pnId || this.id;
+    }
     /** Start the upload of all selected files (excludes invalid files). */
     async startUpload() {
         if (!this.files.length)
@@ -231,7 +242,7 @@ export class PnFileUpload {
         event.preventDefault();
         event.stopPropagation();
         this.isHovering = false;
-        ripple(event, this.hostElement, '.pn-dropzone-inner');
+        ripple(event, this.hostElement, this.rippleClass);
         this._addFilesFromFileList(event.dataTransfer.files);
     }
     _validateFileType(file) {
@@ -363,13 +374,6 @@ export class PnFileUpload {
     isLoading(file) {
         return file.status === 'start';
     }
-    getFileItemClass = (file) => {
-        let itemClass = 'files-list-item';
-        if (file.error) {
-            itemClass += ' files-list-item-error';
-        }
-        return itemClass;
-    };
     getFileIcon(file) {
         if (file.error)
             return alert_exclamation_circle;
@@ -385,13 +389,30 @@ export class PnFileUpload {
         return 'gray900';
     }
     describedBy() {
-        const list = [this.accept && this.idAccepttext, this.helpertext && this.idHelpertext].filter(Boolean);
+        const list = [this.showAcceptText() && this.idAccepttext, this.helpertext && this.idHelpertext].filter(Boolean);
         if (!list.length)
             return null;
-        return list.join(',');
+        return list.join(' ');
+    }
+    showAcceptText() {
+        return !!this.accept || !!this.maxSize || this.limit > 1;
+    }
+    getAcceptText() {
+        const list = [];
+        if (this.accept)
+            list.push(`${this.translate('ACCEPTEDFORMATS')}: ${this.accept}`);
+        if (this.maxSize) {
+            const maxSizeText = this.translate('MAXFILESIZE');
+            list.push(`${list.length ? maxSizeText.toLowerCase() : maxSizeText}: ${this.maxSize}`);
+        }
+        if (this.limit > 1) {
+            const limitText = this.translate('LIMIT');
+            list.push(`${list.length ? limitText.toLowerCase() : limitText}: ${this.limit}`);
+        }
+        return list.join(', ');
     }
     render() {
-        return (h(Host, { key: 'bce5d5c3684f31a2841ecf631155ab384f318879' }, h("div", { key: '07abc549d0ad86fb818f446e4fa223e3b4ea6c84', class: "pn-file-upload-container" }, h("div", { key: '1a9d09dd8cf39db11dc741732a7c04276e10a6a9', class: "pn-dropzone-container" }, h("input", { key: '387071f47d9aa658929448b041285c01d5187da4', id: this.idFileUpload, class: "pn-file-upload-input", type: "file", name: this.name, multiple: this.multiple, accept: this.accept, capture: this.capture, disabled: this.disabled, required: this.required, "aria-describedby": this.describedBy(), "aria-invalid": this.invalid?.toString(), onClick: e => ripple(e, this.hostElement, '.pn-dropzone-inner'), onChange: () => this._onAddFile(), onDragOver: e => this._onDragOverFile(e), onDragLeave: e => this._onDragLeaveFile(e), onDrop: e => this._onDropFile(e), ref: el => (this.fileInputElement = el) }), h("div", { key: '71c627aa6044908835b0f6e2227d7744da76680e', class: "pn-dropzone-inner", "data-hover": this.isHovering, "data-invalid": this.invalid }, h("pn-icon", { key: 'a621fd0abb16c8c7b2efcb67932a0e50e12942dd', class: "pn-file-upload-icon-element", icon: upload, color: "blue700" }), h("label", { key: 'cc90d1af83fe3814b8ea9991bcdf85c40f48f874', htmlFor: this.idFileUpload, class: "pn-file-upload-title" }, this.label || this.translate('CLICKORDRAG')), this.helpertext && (h("p", { key: '8d4032bcd909516779d07f042be878105f3479a1', id: this.idHelpertext, class: "pn-file-upload-subtitle" }, this.helpertext)), this.accept && (h("p", { key: '715cc9ed4c8878068182a30affa8649c904f041d', id: this.idAccepttext, class: "pn-file-upload-subtitle" }, this.translate('ACCEPTEDFORMATS'), ": ", this.accept, this.maxSize && (h("span", { key: 'a217dcfd8528d86deb9aee37b7750eb574936a56' }, ' ', "(", this.translate('MAXFILESIZE'), ": ", this.maxSize, ")")))))), !!this.files.length && (h("ul", { key: 'c1a1cd0c816992c6f524eaf82296ad4fd3300a6b', class: "files-list" }, this.files.map((file) => (h("li", { class: "files-list-item-container", key: file.uuid }, h("div", { class: this.getFileItemClass(file) }, h("div", { class: "file-list-item-title" }, h("pn-icon", { icon: this.getFileIcon(file), color: this.getFileColor(file) }), this.hideProgress || file.progress === 0 ? (h("div", { class: "filename" }, file.filename)) : (h("pn-progress-bar", { label: file.filename, progress: file.progress, error: file.error && file.errorMessage }))), h("pn-button", { small: true, variant: "borderless", arialabel: `${this.translate('REMOVE_FILE')} ${file.filename}`, appearance: file.error ? 'warning' : 'light', icon: trash_can, iconOnly: true, tooltip: this.translate('REMOVE_FILE'), loading: this.isLoading(file), onClick: () => this.removeFile(file) })), file.error ? (h("div", { class: "files-list-item-text-error" }, file.errorMessage || file.error.message)) : null))))), h("slot", { key: '2690ccdc2c5e97a41c99a3b385e68739bb69cecb' }))));
+        return (h(Host, { key: 'bda8680e48b7537469f7a348134552cc40201ff3' }, h("div", { key: '6e661705703b2b2d50a794619f1ed4ad123a05e0', class: "pn-file-upload" }, h("div", { key: 'd2d17b3cd8cd15564a63a82d544af8c06b9e6fb5', class: "pn-file-upload-container" }, h("input", { key: '0e8801c1478852c946e8f31d1dd6dde1ee5b4441', id: this.getId(), class: "pn-file-upload-input", type: "file", name: this.name, multiple: this.multiple, accept: this.accept, capture: this.capture, disabled: this.disabled, required: this.required, "aria-describedby": this.describedBy(), "aria-invalid": this.invalid?.toString(), onClick: e => ripple(e, this.hostElement, this.rippleClass), onChange: () => this._onAddFile(), onDragOver: e => this._onDragOverFile(e), onDragLeave: e => this._onDragLeaveFile(e), onDrop: e => this._onDropFile(e), ref: el => (this.fileInputElement = el) }), h("div", { key: '802d986996b9cdc9f577906631dfa1d3eed8f8e4', class: "pn-file-upload-dropzone", "data-hover": this.isHovering, "data-invalid": this.invalid }, h("pn-icon", { key: '1c4e0120ebdf2f06401f130549fb9e8c9e97c920', class: "pn-file-upload-icon-element", icon: upload, color: "blue700" }), h("label", { key: '8f5275d7e7591aee9167cf3fc858b8ec22070d4f', class: "pn-file-upload-title", htmlFor: this.getId() }, this.label || this.translate('CLICKORDRAG')), this.helpertext && (h("p", { key: 'f0a1bc0aaece7c470a756c46aefee84f7059b548', class: "pn-file-upload-subtitle", id: this.idHelpertext }, this.helpertext)), this.showAcceptText() && (h("p", { key: '4d8d595fe7e10bdf5cb01c4b7b448b3b11458c15', class: "pn-file-upload-subtitle", id: this.idAccepttext }, this.getAcceptText())))), !!this.files.length && (h("ul", { key: '55bb12c9e21aceae0bffd49b400f1902f7edb564', class: "pn-file-upload-files" }, this.files.map((file) => (h("li", { class: "pn-file-upload-files-item", key: file.uuid }, h("div", { class: "pn-file-upload-file", "data-error": !!file.error }, h("div", { class: "pn-file-upload-file-title" }, h("pn-icon", { icon: this.getFileIcon(file), color: this.getFileColor(file) }), this.hideProgress || file.progress === 0 ? (h("div", { class: "pn-file-upload-file-name" }, file.filename)) : (h("pn-progress-bar", { label: file.filename, progress: file.progress, error: file.error && file.errorMessage }))), h("pn-button", { small: true, variant: "borderless", arialabel: `${this.translate('REMOVE_FILE')} ${file.filename}`, appearance: file.error ? 'warning' : 'light', icon: trash_can, iconOnly: true, tooltip: this.translate('REMOVE_FILE'), loading: this.isLoading(file), onClick: () => this.removeFile(file) })), file.error ? (h("div", { class: "pn-file-upload-file-error" }, file.errorMessage || file.error.message)) : null))))), h("slot", { key: 'd5e2793ee8d72550129b38825dde9d25768d8528' }))));
     }
     static get is() { return "pn-file-upload"; }
     static get originalStyleUrls() {
@@ -469,8 +490,8 @@ export class PnFileUpload {
                 "optional": true,
                 "docs": {
                     "tags": [{
-                            "name": "category",
-                            "text": "Features"
+                            "name": "since",
+                            "text": "v7.1.0"
                         }],
                     "text": "Manually set the language."
                 },
@@ -478,32 +499,34 @@ export class PnFileUpload {
                 "setter": false,
                 "reflect": false,
                 "attribute": "language",
-                "defaultValue": "null"
+                "defaultValue": "undefined"
             },
-            "hideProgress": {
-                "type": "boolean",
+            "name": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "since",
+                            "text": "v7.1.0"
+                        }, {
                             "name": "category",
-                            "text": "Features"
+                            "text": "Native attributes"
                         }],
-                    "text": "Always hide the progress bar, even when upload has begun."
+                    "text": "Set a HTML name."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "hide-progress",
-                "defaultValue": "false"
+                "attribute": "name"
             },
-            "name": {
+            "accept": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -513,27 +536,49 @@ export class PnFileUpload {
                 },
                 "required": false,
                 "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Set which file types the input accepts. Ex: .docs,.xml"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept"
+            },
+            "capture": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'' | 'user' | 'environment'",
+                    "resolved": "\"\" | \"environment\" | \"user\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "since",
                             "text": "v7.1.0"
                         }, {
                             "name": "category",
-                            "text": "HTML attributes"
+                            "text": "Native attributes"
                         }],
-                    "text": "Set a HTML name."
+                    "text": "Use the capture mode."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "name"
+                "attribute": "capture"
             },
-            "accept": {
-                "type": "string",
-                "mutable": false,
+            "multiple": {
+                "type": "boolean",
+                "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -541,62 +586,60 @@ export class PnFileUpload {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML attributes"
+                            "text": "Native attributes"
                         }],
-                    "text": "Set which file types the input accepts. Ex: .docs,.xml"
+                    "text": "Allow multiple files to be selected. Will be overwritten to true, if `limit` is above 1."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "accept"
+                "attribute": "multiple"
             },
-            "maxSize": {
-                "type": "string",
+            "required": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML attributes"
+                            "text": "Native attributes"
                         }],
-                    "text": "Set the maximum upload size."
+                    "text": "Set the input as required."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "max-size",
-                "defaultValue": "''"
+                "attribute": "required",
+                "defaultValue": "false"
             },
-            "capture": {
-                "type": "string",
+            "disabled": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "'' | 'user' | 'environment'",
-                    "resolved": "\"\" | \"environment\" | \"user\"",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [{
-                            "name": "since",
-                            "text": "v7.1.0"
-                        }, {
                             "name": "category",
-                            "text": "HTML attributes"
+                            "text": "Native attributes"
                         }],
-                    "text": "Use the capture mode."
+                    "text": "Disable the input."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "capture"
+                "attribute": "disabled",
+                "defaultValue": "false"
             },
             "limit": {
                 "type": "number",
@@ -611,7 +654,7 @@ export class PnFileUpload {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML attributes"
+                            "text": "Features"
                         }],
                     "text": "Set maximum amount of files to be selected.\nAny value above 1 will force the `multiple` to be `true`."
                 },
@@ -621,12 +664,12 @@ export class PnFileUpload {
                 "attribute": "limit",
                 "defaultValue": "1"
             },
-            "multiple": {
-                "type": "boolean",
-                "mutable": true,
+            "maxSize": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -634,16 +677,17 @@ export class PnFileUpload {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML attributes"
+                            "text": "Features"
                         }],
-                    "text": "Allow multiple files to be selected. Will be overwritten to true, if `limit` is above 1."
+                    "text": "Set the maximum upload size."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "multiple"
+                "attribute": "max-size",
+                "defaultValue": "''"
             },
-            "required": {
+            "hideProgress": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -652,42 +696,48 @@ export class PnFileUpload {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "since",
+                            "text": "v7.1.0"
+                        }, {
                             "name": "category",
-                            "text": "HTML attributes"
+                            "text": "Features"
                         }],
-                    "text": "Set the input as required."
+                    "text": "Always hide the progress bar, even when upload has begun."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "required",
+                "attribute": "hide-progress",
                 "defaultValue": "false"
             },
-            "disabled": {
-                "type": "boolean",
+            "pnId": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
                             "name": "category",
                             "text": "HTML attributes"
                         }],
-                    "text": "Disable the input."
+                    "text": "Set a custom ID for the file upload."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
+                "attribute": "pn-id",
+                "defaultValue": "this.id"
             }
         };
     }
@@ -948,11 +998,23 @@ export class PnFileUpload {
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
+                "propName": "pnId",
+                "methodName": "handleId",
+                "handlerOptions": {
+                    "immediate": true
+                }
+            }, {
                 "propName": "limit",
-                "methodName": "handleLimit"
+                "methodName": "handleLimit",
+                "handlerOptions": {
+                    "immediate": true
+                }
             }, {
                 "propName": "maxSize",
-                "methodName": "handleMaxBytes"
+                "methodName": "handleMaxBytes",
+                "handlerOptions": {
+                    "immediate": true
+                }
             }];
     }
 }

package/umd/modules/@postnord/web-components/collection/components/input/pn-file-upload/translation.js

@@ -31,4 +31,11 @@ export const translations = {
         fi: 'Poista tiedosto',
         no: 'Fjern fil',
     },
+    LIMIT: {
+        sv: 'Max antal filer',
+        en: 'Max number of files',
+        da: 'Maks antal filer',
+        fi: 'Maksimimäärä tiedostoja',
+        no: 'Maks antall filer',
+    },
 };

package/umd/modules/@postnord/web-components/collection/components/input/pn-input/pn-input.css

@@ -122,7 +122,7 @@ pn-input .pn-input-element:disabled {
 pn-input .pn-input-element:read-only {
   border-color: #ffffff;
 }
-pn-input .pn-input-element:disabled ~ .pn-input-eyecandy > pn-icon > .pn-icon-svg > path {
+pn-input .pn-input-element:disabled ~ .pn-input-eyecandy > pn-icon .pn-icon-svg > path {
   fill: #969087;
 }
 pn-input .pn-input-element::-webkit-calendar-picker-indicator {