@postnord/pn-marketweb-components 4.3.6 → 4.3.8

package/umd/modules/@postnord/web-components/esm/pn-file-upload.entry.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
 import { uuidv4, getBytesFromHumanReadableFileSize, awaitTopbar, ripple, en } from './index.js';
 import { a as alert_exclamation_circle } from './alert_exclamation_circle-B88w-Zxn.js';
 import { c as check } from './check-BpI8peGn.js';
@@ -58,28 +58,35 @@ 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',
+    },
 };
 
-const pnFileUploadCss = () => `${transformTag("pn-file-upload")}.hover .pn-file-upload-container .pn-dropzone-container{background-color:#e0f8ff}${transformTag("pn-file-upload")} .pn-file-upload-input{position:absolute;z-index:1;left:0;top:0;opacity:0;height:100%;width:100%;-webkit-tap-highlight-color:transparent}${transformTag("pn-file-upload")} .pn-file-upload-input:hover{cursor:pointer}${transformTag("pn-file-upload")} .pn-file-upload-input:hover+.pn-dropzone-inner{border-color:#005d92;background-color:#e0f8ff}${transformTag("pn-file-upload")} .pn-file-upload-input:focus-visible+.pn-dropzone-inner{border-color:#005d92;outline-color:#005d92}${transformTag("pn-file-upload")} .pn-file-upload-input:disabled{pointer-events:none}${transformTag("pn-file-upload")} .pn-file-upload-input:disabled+.pn-dropzone-inner{pointer-events:none;background-color:#f3f2f2;border-color:#2d2013}${transformTag("pn-file-upload")} .pn-file-upload-input:disabled+.pn-dropzone-inner .headline a{color:#5e554a}${transformTag("pn-file-upload")} .pn-file-upload-input:disabled+.pn-dropzone-inner .pn-icon-svg path{fill:#5e554a}${transformTag("pn-file-upload")} .pn-file-upload-container{position:relative;display:flex;flex-direction:column;gap:1em}${transformTag("pn-file-upload")} .pn-file-upload-container .pn-dropzone-container{position:relative}${transformTag("pn-file-upload")} .pn-file-upload-container .pn-dropzone-inner{position:relative;text-align:center;overflow:hidden;padding:2.5em;border:0.0625em #969087 dashed;border-radius:0.5em;display:flex;flex-direction:column;align-items:center;gap:0.5em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-file-upload")} .pn-file-upload-container .pn-dropzone-inner{transition-duration:0s;transition-delay:0s}}${transformTag("pn-file-upload")} .pn-file-upload-container .pn-dropzone-inner .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${transformTag("pn-file-upload")} .pn-file-upload-container .pn-dropzone-inner[data-hover]{background-color:#e0f8ff;border-color:#005d92}${transformTag("pn-file-upload")} .pn-file-upload-container .pn-dropzone-inner[data-invalid]{border-color:#a70707}${transformTag("pn-file-upload")} .pn-file-upload-container .pn-dropzone-inner .pn-file-upload-dropzone{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0.5em}${transformTag("pn-file-upload")} .files-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1em}${transformTag("pn-file-upload")} .files-list .filename{font-weight:400;font-size:0.75em}${transformTag("pn-file-upload")} .files-list .files-list-item{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;background:#f9f8f8;padding:1em;border-radius:0.5em}${transformTag("pn-file-upload")} .files-list .files-list-item .file-list-item-title{display:flex;align-items:center;gap:0.5em;margin-right:0.5em}${transformTag("pn-file-upload")} .files-list .files-list-item>${transformTag("pn-progress-bar")}{margin-right:25em;flex:1}${transformTag("pn-file-upload")} .files-list .files-list-item.files-list-item-error{color:#a70707;background-color:#fdefee}${transformTag("pn-file-upload")} .files-list .files-list-item-text-error{color:#a70707;font-size:0.875em;font-weight:300;margin-top:0.25em}${transformTag("pn-file-upload")} .pn-file-upload-title{color:#2d2013}${transformTag("pn-file-upload")} .pn-file-upload-subtitle{color:#5e554a;font-size:0.75em}`;
+const pnFileUploadCss = () => `${transformTag("pn-file-upload")} .pn-file-upload{position:relative;display:flex;flex-direction:column;gap:1em}${transformTag("pn-file-upload")} .pn-file-upload-container{position:relative}${transformTag("pn-file-upload")} .pn-file-upload-input{position:absolute;z-index:1;left:0;top:0;opacity:0;height:100%;width:100%;-webkit-tap-highlight-color:transparent}${transformTag("pn-file-upload")} .pn-file-upload-input:hover{cursor:pointer}${transformTag("pn-file-upload")} .pn-file-upload-input:hover+.pn-file-upload-dropzone{border-color:#005d92;background-color:#e0f8ff}${transformTag("pn-file-upload")} .pn-file-upload-input:focus-visible+.pn-file-upload-dropzone{border-color:#005d92;outline-color:#005d92}${transformTag("pn-file-upload")} .pn-file-upload-input:disabled{pointer-events:none}${transformTag("pn-file-upload")} .pn-file-upload-input:disabled+.pn-file-upload-dropzone{pointer-events:none;background-color:#f3f2f2;border-color:#2d2013}${transformTag("pn-file-upload")} .pn-file-upload-input:disabled+.pn-file-upload-dropzone .pn-icon-svg path{fill:#5e554a}${transformTag("pn-file-upload")} .pn-file-upload-dropzone{position:relative;text-align:center;overflow:hidden;padding:clamp(1em, 5vw, 2.5em);border:0.0625em #969087 dashed;border-radius:0.5em;display:flex;flex-direction:column;align-items:center;gap:0.5em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-file-upload")} .pn-file-upload-dropzone{transition-duration:0s;transition-delay:0s}}${transformTag("pn-file-upload")} .pn-file-upload-dropzone .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${transformTag("pn-file-upload")} .pn-file-upload-dropzone[data-hover]{background-color:#e0f8ff;border-color:#005d92}${transformTag("pn-file-upload")} .pn-file-upload-dropzone[data-invalid]{border-color:#a70707}${transformTag("pn-file-upload")} .pn-file-upload-title{color:#2d2013}${transformTag("pn-file-upload")} .pn-file-upload-subtitle{color:#5e554a;font-size:0.75em}${transformTag("pn-file-upload")} .pn-file-upload-files{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1em}${transformTag("pn-file-upload")} .pn-file-upload-file{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;background:#f9f8f8;padding:1em;border-radius:0.5em}${transformTag("pn-file-upload")} .pn-file-upload-file-title{display:flex;align-items:center;gap:0.5em;flex:1;margin-right:0.5em}${transformTag("pn-file-upload")} .pn-file-upload-file-name{font-weight:400;font-size:0.75em}${transformTag("pn-file-upload")} .pn-file-upload-file-error{color:#a70707;font-size:0.875em;font-weight:300;margin-top:0.25em}${transformTag("pn-file-upload")} .pn-file-upload-file[data-error]{color:#a70707;background-color:#fdefee}${transformTag("pn-file-upload")} .pn-file-upload-file ${transformTag("pn-progress-bar")}{flex:1}`;
 
 const PnFileUpload = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.filesAdded = createEvent(this, "filesAdded");
-        this.update = createEvent(this, "update");
-        this.fileuploaderror = createEvent(this, "fileuploaderror");
-        this.valid = createEvent(this, "valid");
-        this.uploadFile = createEvent(this, "uploadFile");
-        this.uploadCancelled = createEvent(this, "uploadCancelled");
-        this.uploadCompleted = createEvent(this, "uploadCompleted");
+        this.filesAdded = createEvent(this, "filesAdded", 7);
+        this.update = createEvent(this, "update", 7);
+        this.fileuploaderror = createEvent(this, "fileuploaderror", 7);
+        this.valid = createEvent(this, "valid", 7);
+        this.uploadFile = createEvent(this, "uploadFile", 7);
+        this.uploadCancelled = createEvent(this, "uploadCancelled", 7);
+        this.uploadCompleted = createEvent(this, "uploadCompleted", 7);
     }
     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';
     get hostElement() { return getElement(this); }
     files = [];
     isHovering = false;
@@ -91,38 +98,48 @@ const PnFileUpload = class {
      * @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;
     }
@@ -144,11 +161,12 @@ const PnFileUpload = class {
     /** 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)
@@ -287,7 +305,7 @@ const PnFileUpload = class {
         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) {
@@ -419,13 +437,6 @@ const PnFileUpload = class {
     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;
@@ -441,20 +452,40 @@ const PnFileUpload = class {
         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 watchers() { return {
+        "pnId": [{
+                "handleId": 1
+            }],
         "limit": [{
-                "handleLimit": 0
+                "handleLimit": 1
             }],
         "maxSize": [{
-                "handleMaxBytes": 0
+                "handleMaxBytes": 1
             }]
     }; }
 };

package/umd/modules/@postnord/web-components/esm/pn-footer.entry.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
 import { o as open_in_new } from './open_in_new-IFVOY5Gf.js';
 import { awaitTopbar, SE, en, NO } from './index.js';
 
@@ -176,7 +176,7 @@ const PnFooter = class {
         }
     }
     render() {
-        return (h(Host, { key: '5ba1e53dd0dc631bf8bbe878a622ec577224a9f3' }, h("div", { key: '530b0e803506fed3cae180d1289535538f64e1bb', class: "pn-footer-row" }, h("p", { key: '47e19b88eb7c6860f0921fdacc79686aff3d2b61' }, this.getText('questions')), this.renderLink('contact')), h("div", { key: '2986a92cb2183d53c871030db72ef34aa08e847b', class: "pn-footer-row" }, this.market !== NO && this.renderLink('terms'), this.renderLink('privacy'), this.renderLink('cookies')), h("div", { key: '550a23c5b872b6dc9c69b4e231ce7634d5f12994', class: "pn-footer-row" }, h("p", { key: '52871c90b92a2a64fc247ac83fdc62215e54a574' }, this.getText('info')), this.renderLink('domain'))));
+        return (h(Host, { key: '3084a31d6969b90b764dd8628d8d101039fdccab' }, h("div", { key: '1cee8fccb6ea8ad756c25c1b852baecfcb370b43', class: "pn-footer-row" }, h("p", { key: '52e46e93ec83d58a793a2516e2cc073723269ad0' }, this.getText('questions')), this.renderLink('contact')), h("div", { key: '3a2f09d53818ffcb8fe7a4fb2e2b8829a5ddea04', class: "pn-footer-row" }, this.market !== NO && this.renderLink('terms'), this.renderLink('privacy'), this.renderLink('cookies')), h("div", { key: 'ab1ef6ce8fd6471c5411ff68c286cb0e9061ccc1', class: "pn-footer-row" }, h("p", { key: '4ebc800c5db13c04262d94dc9db10ed43fcd9c3f' }, this.getText('info')), this.renderLink('domain'))));
     }
 };
 PnFooter.style = pnFooterCss();

package/umd/modules/@postnord/web-components/esm/pn-header.entry.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, g as getElement, f as forceUpdate, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, g as getElement, f as forceUpdate, h, a as Host } from './index-XKg-ydzH.js';
 import { awaitTopbar, en } from './index.js';
 import { a as arrow_left } from './arrow_left-CQaMdITw.js';
 
@@ -65,7 +65,7 @@ const PnHeader = class {
         return this.goBackText || translations[this.language || en];
     }
     render() {
-        return (h(Host, { key: 'f19310a092999791304499d72c1b8e566949c0d3' }, h("header", { key: 'c6b50a1d93bf18f2050b37a9bdf69d3706b8aea4', class: "pn-header" }, h("div", { key: '7bfa1bd37978daf85d266b7306a71705bdc8cac5', class: "pn-header-container" }, h("div", { key: '09ed187b0f201d435c99b3c6e0f245ca48857d47', class: "pn-header-breadcrumbs", hidden: !this.showBreadcrumb() }, this.goBackHref && (h("pn-text-link", { key: 'ba657cb77da06d42009738c64d815a23d8dae527', label: this.getButtonText(), href: this.goBackHref, icon: arrow_left, leftIcon: true })), h("slot", { key: '278bf254489dbd76f53e047cd16c247bcfd696eb', name: "breadcrumb" })), h("div", { key: 'e9b2e873fb9ed01fabbd669aa7cace973a55cbfa', class: "pn-header-content" }, this.heading && h("h1", { key: 'baec009bf6807009ea53d184be9a8c15ea0253a0' }, this.heading), h("slot", { key: '7a777967b19a19077486d88d775b4a1c4f9d3134' })), h("div", { key: '46fa0cc4120b341e4a03c60bb865e077c6231986', class: "pn-header-buttons", hidden: !this.hasButtons }, h("slot", { key: '8932d6bbb5e1647be6b666d1879b163575dfd760', name: "buttons" })), h("slot", { key: 'afc6e39f45ef72ba762772f84a66cc24fdbcf368', name: "menu" })))));
+        return (h(Host, { key: 'cffcb3a6763d13783bad5d6b75f5402cfd92798b' }, h("header", { key: '7b6d663687fe12546ed88aaea3b97efd82afac69', class: "pn-header" }, h("div", { key: 'aec8dbf448077f14036f0cd4885add8bb650d647', class: "pn-header-container" }, h("div", { key: 'bff188666b4aa2f5df35476eddf17ac4ba5ba182', class: "pn-header-breadcrumbs", hidden: !this.showBreadcrumb() }, this.goBackHref && (h("pn-text-link", { key: '0f2ad8624741de50b2ed1c13cf7cfcae9ad6c223', label: this.getButtonText(), href: this.goBackHref, icon: arrow_left, leftIcon: true })), h("slot", { key: 'ece3524aafbff34f28e0d9cc6eafc587e1daeba5', name: "breadcrumb" })), h("div", { key: '1356eb7d669666b327575a00abdf86bbf9a9e38a', class: "pn-header-content" }, this.heading && h("h1", { key: 'c3e1419dbf20e789c98ea32bb73a3e5e1021f75a' }, this.heading), h("slot", { key: '94491e7af78f2ee44bc45b3a261f2bcc8af81377' })), h("div", { key: 'e2db0dcd84f2fbeb58ab793cd4220861c2320433', class: "pn-header-buttons", hidden: !this.hasButtons }, h("slot", { key: '1745323caaf67eb3f316f4ff56451ffefb6d9b7e', name: "buttons" })), h("slot", { key: '17d56ba2c125c766c05ae84eb82839391447dd74', name: "menu" })))));
     }
     static get watchers() { return {
         "maxWidth": [{

package/umd/modules/@postnord/web-components/esm/pn-icon_2.entry.js

@@ -2,10 +2,10 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
 import { c as colors, g as gray900 } from './colors-C_nYl55V.js';
 
-const pnIconCss = () => `${transformTag("pn-icon")}{display:inline-block;vertical-align:top;--pn-icon-color:main.$gray900}${transformTag("pn-icon")}[small] svg{height:1em;width:1em}${transformTag("pn-icon")} svg{display:block;height:1.5em;width:1.5em}${transformTag("pn-icon")} .pn-icon-svg>circle,${transformTag("pn-icon")} .pn-icon-svg>path{fill:var(--pn-icon-color);transition-property:fill;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-icon")} .pn-icon-svg>circle,${transformTag("pn-icon")} .pn-icon-svg>path{transition-duration:0s;transition-delay:0s}}`;
+const pnIconCss = () => `${transformTag("pn-icon")}{display:inline-block;vertical-align:top;--pn-icon-color:main.$gray900}${transformTag("pn-icon")} .pn-icon{margin:0}${transformTag("pn-icon")} .pn-icon svg{display:block;height:1.5em;width:1.5em}${transformTag("pn-icon")} .pn-icon svg>circle,${transformTag("pn-icon")} .pn-icon svg>path{fill:var(--pn-icon-color);transition-property:fill, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-icon")} .pn-icon svg>circle,${transformTag("pn-icon")} .pn-icon svg>path{transition-duration:0s;transition-delay:0s}}${transformTag("pn-icon")} .pn-icon[data-small] svg{height:1em;width:1em}`;
 
 const PnIcon = class {
     constructor(hostRef) {
@@ -14,18 +14,16 @@ const PnIcon = class {
     get hostElement() { return getElement(this); }
     /**
      * The SVG content of the icon you want to use.
-     *
-     * Flags cannot be colored.
-     *
-     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-icon--docs|PostNord Icons (Storybook)}
-     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-flag--docs|PostNord Flags (Storybook)}
+     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-icon--docs|Icons (Storybook)}
+     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-flag--docs|Flags (Storybook)}
      **/
     icon = '';
     /** Make the icon small (16 instead of 24px). */
     small = false;
     /**
-     * Color the icon with one of the follwing colors from our library.
-     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-colors--docs|PostNord Colors (Storybook)}
+     * Color the icon with one of the following colors from our library.
+     * Has no effects if you use flags from our library.
+     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-colors--docs|Colors (Storybook)}
      **/
     color = 'gray900';
     handleColor() {
@@ -36,7 +34,7 @@ const PnIcon = class {
         this.handleColor();
     }
     render() {
-        return h(Host, { key: 'f63d0b1e54fe91f9fcf33811f6694e604e09929d', role: "presentation", class: "pn-icon", innerHTML: this.icon });
+        return (h(Host, { key: 'f4d252ce71c0e0c83d352447bdd0c195de49196f' }, h("span", { key: 'adc6e3dd5d4d45ed9a154f07bd3e3fce8dbf6981', role: "presentation", class: "pn-icon", "data-small": this.small, innerHTML: this.icon })));
     }
     static get watchers() { return {
         "color": [{

package/umd/modules/@postnord/web-components/esm/pn-illustration.entry.js

@@ -2,9 +2,9 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
 
-const pnIllustrationCss = () => `${transformTag("pn-illustration")}{display:inline-block}${transformTag("pn-illustration")}[data-fill]{display:block}${transformTag("pn-illustration")}>svg{width:var(--pn-width);height:var(--pn-height);display:block}`;
+const pnIllustrationCss = () => `${transformTag("pn-illustration")}{display:inline-block}${transformTag("pn-illustration")} .pn-illustration{display:inline-block}${transformTag("pn-illustration")} .pn-illustration[data-fill]{display:block}${transformTag("pn-illustration")} .pn-illustration>svg{width:var(--pn-width);height:var(--pn-height);display:block}`;
 
 const PnIllustration = class {
     constructor(hostRef) {
@@ -51,7 +51,7 @@ const PnIllustration = class {
         this.hostElement.style.setProperty('--pn-height', this.height);
     }
     render() {
-        return h(Host, { key: '3f2e44ec10a5a2fc9fd9a69f94963ab4e79fb877', role: "presentation", innerHTML: this.illustration, "data-fill": this.fill });
+        return (h(Host, { key: '30a6824eaa6972efee63b5f893defb80bac7821c' }, h("span", { key: 'd27b45f1789b6c93d34ab0b1c673bda9fff60c0b', role: "presentation", class: "pn-illustration", "data-fill": this.fill, innerHTML: this.illustration })));
     }
     static get watchers() { return {
         "fill": [{