@postnord/pn-marketweb-components 4.1.0 → 4.1.2

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

@@ -391,7 +391,7 @@ export class PnFileUpload {
         return list.join(',');
     }
     render() {
-        return (h(Host, { key: '1c7df13d284805a69618cac9130a3599dac09afa' }, h("div", { key: 'e6f37c7ac6e0283c06049562b3e20b11cf89f1c3', class: "pn-file-upload-container" }, h("div", { key: '7647d0f6afdccef876e8c86b084b7b1106715764', class: "pn-dropzone-container" }, h("input", { key: 'a5cc41ce25c13ef1d4046b0fb9c45372da932b86', 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: 'ccd799f14663e8d645fcea967e526a4be89324dd', class: "pn-dropzone-inner", "data-hover": this.isHovering, "data-invalid": this.invalid }, h("pn-icon", { key: '42c98b09e804d9fa8747c16cfe20773dfecd286c', class: "pn-file-upload-icon-element", icon: upload, color: "blue700" }), h("label", { key: 'd4c0d0d127830a82cc6c05e6b2bdb7007b87384c', htmlFor: this.idFileUpload, class: "pn-file-upload-title" }, this.label || this.translate('CLICKORDRAG')), this.helpertext && (h("p", { key: '7dc83f69dd408af25194e644075ab7d852da4564', id: this.idHelpertext, class: "pn-file-upload-subtitle" }, this.helpertext)), this.accept && (h("p", { key: '64ba6ca78c6b2c9b626e7c4d4ca45074bbd0a6c7', id: this.idAccepttext, class: "pn-file-upload-subtitle" }, this.translate('ACCEPTEDFORMATS'), ": ", this.accept, this.maxSize && (h("span", { key: '1bf59a1291145d6adc7e9c6c2516f98e4b1522b2' }, ' ', "(", this.translate('MAXFILESIZE'), ": ", this.maxSize, ")")))))), !!this.files.length && (h("ul", { key: '06a0f4c327edee2c192e8b8fb38eb9ce5ab7e51a', 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: '38c1a1703b7d2c418ecc76823f32248c5d8b1ec7' }))));
+        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' }))));
     }
     static get is() { return "pn-file-upload"; }
     static get originalStyleUrls() {
@@ -460,7 +460,8 @@ export class PnFileUpload {
                         "PnLanguages": {
                             "location": "import",
                             "path": "@/globals/types",
-                            "id": "src/globals/types.ts::PnLanguages"
+                            "id": "src/globals/types.ts::PnLanguages",
+                            "referenceLocation": "PnLanguages"
                         }
                     }
                 },
@@ -714,7 +715,8 @@ export class PnFileUpload {
                         "PnUploadFileItem": {
                             "location": "import",
                             "path": "@/globals/types",
-                            "id": "src/globals/types.ts::PnUploadFileItem"
+                            "id": "src/globals/types.ts::PnUploadFileItem",
+                            "referenceLocation": "PnUploadFileItem"
                         }
                     }
                 }
@@ -735,7 +737,8 @@ export class PnFileUpload {
                         "PnUploadFileItem": {
                             "location": "import",
                             "path": "@/globals/types",
-                            "id": "src/globals/types.ts::PnUploadFileItem"
+                            "id": "src/globals/types.ts::PnUploadFileItem",
+                            "referenceLocation": "PnUploadFileItem"
                         },
                         "HTMLElement": {
                             "location": "global",
@@ -795,7 +798,8 @@ export class PnFileUpload {
                         "PnUploadFileItem": {
                             "location": "import",
                             "path": "@/globals/types",
-                            "id": "src/globals/types.ts::PnUploadFileItem"
+                            "id": "src/globals/types.ts::PnUploadFileItem",
+                            "referenceLocation": "PnUploadFileItem"
                         }
                     }
                 }
@@ -816,7 +820,8 @@ export class PnFileUpload {
                         "PnUploadFileItem": {
                             "location": "import",
                             "path": "@/globals/types",
-                            "id": "src/globals/types.ts::PnUploadFileItem"
+                            "id": "src/globals/types.ts::PnUploadFileItem",
+                            "referenceLocation": "PnUploadFileItem"
                         }
                     }
                 }
@@ -837,7 +842,8 @@ export class PnFileUpload {
                         "PnUploadFileItem": {
                             "location": "import",
                             "path": "@/globals/types",
-                            "id": "src/globals/types.ts::PnUploadFileItem"
+                            "id": "src/globals/types.ts::PnUploadFileItem",
+                            "referenceLocation": "PnUploadFileItem"
                         }
                     }
                 }
@@ -895,7 +901,8 @@ export class PnFileUpload {
                         "PnUploadFileItem": {
                             "location": "import",
                             "path": "@/globals/types",
-                            "id": "src/globals/types.ts::PnUploadFileItem"
+                            "id": "src/globals/types.ts::PnUploadFileItem",
+                            "referenceLocation": "PnUploadFileItem"
                         }
                     },
                     "return": "Promise<void>"
@@ -925,7 +932,8 @@ export class PnFileUpload {
                         "PnUploadFileItem": {
                             "location": "import",
                             "path": "@/globals/types",
-                            "id": "src/globals/types.ts::PnUploadFileItem"
+                            "id": "src/globals/types.ts::PnUploadFileItem",
+                            "referenceLocation": "PnUploadFileItem"
                         }
                     },
                     "return": "Promise<void>"
@@ -948,4 +956,3 @@ export class PnFileUpload {
             }];
     }
 }
-//# sourceMappingURL=pn-file-upload.js.map

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

@@ -32,4 +32,3 @@ export const translations = {
         no: 'Fjern fil',
     },
 };
-//# sourceMappingURL=translation.js.map

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

@@ -6,6 +6,10 @@ pn-input {
   flex-direction: column;
 }
 
+pn-input .pn-input {
+  --pn-input-offset-left: 0em;
+  --pn-input-offset-right: 0em;
+}
 pn-input .pn-input-label {
   cursor: pointer;
   display: flex;
@@ -16,7 +20,7 @@ pn-input .pn-input-label {
   margin: 0 0 0.25em 0;
   gap: 0.5em;
   -webkit-tap-highlight-color: transparent;
-  transition-property: color;
+  transition-property: color, transform;
   transition-duration: 0.2s;
   transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
 }
@@ -26,6 +30,26 @@ pn-input .pn-input-label {
     transition-delay: 0s;
   }
 }
+pn-input .pn-input-label[data-compact] {
+  position: absolute;
+  top: 1.5625em;
+  left: calc(var(--pn-input-offset-left, 0px) + 0.75em + 0.0625em);
+  margin: 0;
+  pointer-events: none;
+  align-items: center;
+  height: 1.5em;
+  max-width: calc(100% - (var(--pn-input-offset-left, 0px) + 0.75em) - (var(--pn-input-offset-right, 0px) + 0.75em));
+  transform: translateY(-50%) scale(1) translateZ(0);
+  transform-origin: 0 0;
+  transition-delay: 0.2s;
+}
+pn-input .pn-input-label[data-compact] > span {
+  font-size: 1em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  line-height: 1.5em;
+}
 pn-input .pn-input-label > span {
   font-size: 0.875em;
 }
@@ -33,13 +57,12 @@ pn-input .pn-input-group {
   position: relative;
 }
 pn-input .pn-input-element {
-  --pn-input-offset-left: 0em;
-  --pn-input-offset-right: 0em;
+  width: 100%;
   color: #2d2013;
   background-color: #ffffff;
   border: 0.0625em solid #969087;
   border-radius: 0.5em;
-  padding: 0.75em;
+  padding: 0.75em calc(0.75em + var(--pn-input-offset-right)) 0.75em calc(0.75em + var(--pn-input-offset-left));
   font-family: inherit;
   font-size: 1em;
   font-weight: 500;
@@ -71,6 +94,19 @@ pn-input .pn-input-element {
     transition-delay: 0s;
   }
 }
+pn-input .pn-input-element[data-compact] {
+  text-align: left;
+  padding-top: 1.125em;
+  padding-bottom: 0.375em;
+  max-width: unset;
+}
+pn-input .pn-input-element[data-compact]::placeholder {
+  color: transparent;
+}
+pn-input .pn-input-element[data-compact]:focus + .pn-input-label, pn-input .pn-input-element[data-compact]:not(:placeholder-shown) + .pn-input-label {
+  transform: translateY(-85%) scale(0.75);
+  transition-delay: 0s;
+}
 pn-input .pn-input-element::placeholder {
   color: #5e554a;
   font-weight: normal;
@@ -83,11 +119,6 @@ pn-input .pn-input-element:disabled {
   background-color: #f3f2f2;
   border-color: #f3f2f2;
 }
-pn-input .pn-input-element {
-  width: 100%;
-  padding-left: calc(var(--pn-input-offset-left) + 0.75em);
-  padding-right: calc(var(--pn-input-offset-right) + 0.75em);
-}
 pn-input .pn-input-element:read-only {
   border-color: #ffffff;
 }
@@ -96,7 +127,7 @@ pn-input .pn-input-element:disabled ~ .pn-input-eyecandy > pn-icon > .pn-icon-sv
 }
 pn-input .pn-input-element::-webkit-calendar-picker-indicator {
   visibility: hidden;
-  display: none;
+  display: none !important;
 }
 pn-input .pn-input-element::-webkit-textfield-decoration-container, pn-input .pn-input-element::-webkit-search-cancel-button, pn-input .pn-input-element::-webkit-inner-spin-button, pn-input .pn-input-element::-webkit-outer-spin-button, pn-input .pn-input-element::-webkit-search-decoration {
   -webkit-appearance: none;
@@ -153,6 +184,10 @@ pn-input .pn-input[data-error] > .pn-input-group > .pn-input-element:focus-visib
   border-color: #a70707;
   outline-color: #a70707;
 }
+pn-input .pn-input[data-error] > .pn-input-group > .pn-input-element:-webkit-autofill, pn-input .pn-input[data-error] > .pn-input-group > .pn-input-element:-webkit-autofill:hover, pn-input .pn-input[data-error] > .pn-input-group > .pn-input-element:-webkit-autofill:focus, pn-input .pn-input[data-error] > .pn-input-group > .pn-input-element:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 10em #fef7f6 inset;
+  -webkit-text-fill-color: #2d2013;
+}
 pn-input .pn-input[data-error] > .pn-input-message[role=alert] {
   color: #a70707;
 }
@@ -169,4 +204,8 @@ pn-input .pn-input[data-valid] > .pn-input-group > .pn-input-element:focus-visib
   background-color: #ffffff;
   border-color: #005e41;
   outline-color: #005e41;
+}
+pn-input .pn-input[data-valid] > .pn-input-group > .pn-input-element:-webkit-autofill, pn-input .pn-input[data-valid] > .pn-input-group > .pn-input-element:-webkit-autofill:hover, pn-input .pn-input[data-valid] > .pn-input-group > .pn-input-element:-webkit-autofill:focus, pn-input .pn-input[data-valid] > .pn-input-group > .pn-input-element:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 10em #edfbf3 inset;
+  -webkit-text-fill-color: #2d2013;
 }

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

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { h, Host } from "@stencil/core";
+import { h, Host, forceUpdate } from "@stencil/core";
 import { uuidv4, en, awaitTopbar } from "../../../index";
 import { alert_exclamation_circle, check, close, preview_on, preview_off } from "pn-design-assets/pn-assets/icons.js";
 import { translations } from "./translations";
@@ -49,6 +49,8 @@ export class PnInput {
      * Not needed if you have the pntopbar on the page.
      **/
     language = null;
+    /** Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time. @since v7.21.0 */
+    compact = false;
     /**
      * Select an icon to display before the input field value.
      * `icon` takes precedence over the `text-prefix` prop.
@@ -147,17 +149,29 @@ export class PnInput {
      **/
     error;
     handleOffset() {
-        requestAnimationFrame(() => requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
             const left = this.prefix?.clientWidth ? this.prefix.clientWidth + 8 : 0;
             const right = this.suffix?.clientWidth ? this.suffix.clientWidth + 8 : 0;
             this.offsetLeft = left;
             this.offsetRight = right;
-        }));
+        });
     }
     handleMessage() {
         this.checkSlottedHelper();
         this.checkSlottedError();
     }
+    connectedCallback() {
+        this.mo = new MutationObserver(() => {
+            forceUpdate(this.hostElement);
+            this.handleOffset();
+            this.handleMessage();
+        });
+        this.mo.observe(this.hostElement, { childList: true, subtree: true });
+    }
+    disconnectedCallback() {
+        if (this.mo)
+            this.mo.disconnect();
+    }
     async componentWillLoad() {
         this.handleMessage();
         if (this.inputid !== this.id)
@@ -167,16 +181,6 @@ export class PnInput {
     }
     componentDidLoad() {
         this.handleOffset();
-        if (this.mo)
-            this.mo.disconnect();
-        this.mo = new MutationObserver(() => {
-            this.handleOffset();
-            this.handleMessage();
-        });
-        this.mo.observe(this.hostElement, {
-            subtree: true,
-            childList: true,
-        });
     }
     setVal(event) {
         const target = event.composedPath?.()[0];
@@ -261,11 +265,24 @@ export class PnInput {
             return false;
         return this.type === 'search' && !!this.value?.length;
     }
+    validLabel() {
+        return this.label?.length > 0 || this.maxlength >= 1;
+    }
+    useLabel() {
+        return this.validLabel() && !this.compact;
+    }
+    /** Compact label must be positioned after the input element in order to work. */
+    useCompactLabel() {
+        return this.validLabel() && this.compact;
+    }
+    renderLabel() {
+        return (h("label", { htmlFor: this.inputid, class: "pn-input-label", "data-compact": this.compact }, this.label && h("span", null, this.label), this.maxlength >= 0 && h("span", null, `${this.value.length}/${this.maxlength}`)));
+    }
     render() {
-        return (h(Host, { key: 'f6553d466069c8e7558eb98dfd6deba21905d888' }, h("div", { key: 'e4eb511c59f571eccf70570cff7b44145ee64a70', class: "pn-input", "data-valid": this.valid, "data-error": this.hasError() }, (this.label || this.maxlength >= 1) && (h("label", { key: 'fc2a2516335378e1b6dabdb39b5da538c4cca995', htmlFor: this.inputid, class: "pn-input-label" }, this.label && h("span", { key: '63571398139a931d8a5dd59698f7ec26e0bc6ba9' }, this.label), this.maxlength >= 0 && h("span", { key: 'eb08d059863c41a86ff77102f837565d9eafe3ce' }, `${this.value.length}/${this.maxlength}`))), h("div", { key: '56ab6a577a2712b5430749515b22e776ec9b56a8', class: "pn-input-group" }, h("input", { key: 'ace87466651b4ef525d739f9499b4fa8b10a36e1', type: this.getInputType(), id: this.inputid, class: "pn-input-element", name: this.name, placeholder: this.placeholder, autocomplete: this.autocomplete, maxlength: this.maxlength, list: this.list, pattern: this.pattern, min: this.min, max: this.max, step: this.step, value: this.value, inputmode: this.inputmode, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-label": this.arialabel, "aria-describedby": this.hasMessage() ? this.idMessage : null, "aria-controls": this.ariacontrols, "aria-invalid": this.hasError()?.toString(), style: {
+        return (h(Host, { key: '3250630450288d09811b7c78bca5091ba93ec7ab' }, h("div", { key: 'db673ba19f300966eaf5c38136fe7d6143aa661d', class: "pn-input", "data-valid": this.valid, "data-error": this.hasError(), style: {
                 '--pn-input-offset-left': `${this.offsetLeft}px`,
                 '--pn-input-offset-right': `${this.offsetRight}px`,
-            }, onInput: e => this.setVal(e) }), h("div", { key: '334cb0b553144a1271e1a2e094ef3d19776f308d', class: "pn-input-eyecandy", "data-prefix": true, ref: el => (this.prefix = el) }, !!this.icon && h("pn-icon", { key: 'ac827d5f752445b4a5d0e94ae44646513deeb84f', icon: this.icon, "aria-hidden": "true" }), this.showPrefix() && h("span", { key: 'd0d4e2ad948ca3c9155e7b405ea2f4cd4f064f71', class: "pn-input-text" }, this.textPrefix)), h("div", { key: 'e972870933dfb2d8cf294facf51dceb7c64d8bf6', class: "pn-input-eyecandy", "data-suffix": true, ref: el => (this.suffix = el) }, this.showSuffix() && h("span", { key: 'd37da7ccf870f54455731417ac6afbe573589e8a', class: "pn-input-text" }, this.textSuffix), this.displayState() && h("pn-icon", { key: '5432e13d6a53b1e8d143498d0c068b035b89da21', "aria-hidden": "true", icon: this.stateIcon(), color: this.stateColor() }), this.isPassword() && (h("pn-button", { key: '7a04e3189a7ed5d3b29e93d0ac1031c22ffb14e0', icon: this.showPassword ? preview_on : preview_off, iconOnly: true, arialabel: this.passwordText(), small: true, appearance: "light", variant: "borderless", onClick: () => this.togglePassword() })), this.showClear() && (h("pn-button", { key: 'b9941892bb3cf8d64b810be56d3525b4fe7aa394', icon: close, iconOnly: true, arialabel: this.translate('CLEAR'), small: true, appearance: "light", variant: "borderless", onClick: () => this.clearVal() })))), h("p", { key: '466cf477bb1a8fd5f69c24cf9769a53b77a84167', class: "pn-input-message", id: this.idMessage, role: this.hasErrorMessage() ? 'alert' : null, hidden: !this.hasMessage() }, this.hasHelperText() && !this.hasError() && h("span", { key: '760f744cdc4cd0f35399b3e5e5dfb563a6e326a2', class: "pn-input-helper" }, this.helpertext), h("span", { key: '853ecf5094683f8ea69acd81ffa454c2ad7da383', class: "pn-input-helper-slot", hidden: !this.showHelperSlot || this.hasError() }, h("slot", { key: '634e73d6d3b93a1d5f0429de708fd3901968ec31', name: "helpertext" })), this.hasErrorMessage() && h("span", { key: 'f150a81d23c50bf2b705f7082d31bf748aaf91e7', class: "pn-input-error" }, this.error), h("span", { key: '2cd93c90d13a0ef9f153d051f3ee99ff9e25d025', class: "pn-input-error-slot", hidden: !this.showErrorSlot }, h("slot", { key: 'c1d461b5a82d635c57af689f29bf485e82117303', name: "error" }))))));
+            } }, this.useLabel() && this.renderLabel(), h("div", { key: 'b216b7f951be237aed6e46f1ccbcfd29b2a3cad1', class: "pn-input-group" }, h("input", { key: '4ee129c35c6a74a359df9d611b236132d7afac38', type: this.getInputType(), id: this.inputid, class: "pn-input-element", name: this.name, placeholder: this.compact ? this.placeholder || ' ' : this.placeholder, autocomplete: this.autocomplete, maxlength: this.maxlength, list: this.list, pattern: this.pattern, min: this.min, max: this.max, step: this.step, value: this.value, inputmode: this.inputmode, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-label": this.arialabel, "aria-describedby": this.hasMessage() ? this.idMessage : null, "aria-controls": this.ariacontrols, "aria-invalid": this.hasError()?.toString(), "data-compact": this.compact, "data-value": this.value?.length > 0, onInput: e => this.setVal(e) }), this.useCompactLabel() && this.renderLabel(), h("div", { key: '753a9abeaf5bfa5ffb3be10042a76aa7863bce9c', class: "pn-input-eyecandy", "data-prefix": true, ref: el => (this.prefix = el) }, !!this.icon && h("pn-icon", { key: 'acf1a6e42c9d37cab6f6a0453d8ea674df1cd0c3', icon: this.icon, "aria-hidden": "true" }), this.showPrefix() && h("span", { key: '70d2eb7e94e790d665a57557595c2bce4855b827', class: "pn-input-text" }, this.textPrefix)), h("div", { key: '1dcae3fb8489d2dc6aa7325baea693591acef31c', class: "pn-input-eyecandy", "data-suffix": true, ref: el => (this.suffix = el) }, this.showSuffix() && h("span", { key: '05044f3fbea582d507de30a0ff751abaf1da3206', class: "pn-input-text" }, this.textSuffix), this.displayState() && h("pn-icon", { key: '727650c9e6c9b9da2ef43e933fab95b6adc8a6bb', "aria-hidden": "true", icon: this.stateIcon(), color: this.stateColor() }), this.isPassword() && (h("pn-button", { key: '4e28eddff11c9aea670a6764aeb0316bccba1c1c', icon: this.showPassword ? preview_on : preview_off, iconOnly: true, arialabel: this.passwordText(), small: true, appearance: "light", variant: "borderless", onClick: () => this.togglePassword() })), this.showClear() && (h("pn-button", { key: '2181adb68c152d837ef03bf9b7e0eb66eb3ea6d2', icon: close, iconOnly: true, arialabel: this.translate('CLEAR'), small: true, appearance: "light", variant: "borderless", onClick: () => this.clearVal() })))), h("p", { key: 'b8b1039a61a23efd24ebd71285b15cce7bfc5ec0', class: "pn-input-message", id: this.idMessage, role: this.hasErrorMessage() ? 'alert' : null, hidden: !this.hasMessage() }, this.hasHelperText() && !this.hasError() && h("span", { key: '4433df6b700cc40ce2ae698d2474f57163b398a1', class: "pn-input-helper" }, this.helpertext), h("span", { key: '41c8fb1cbbc17b7c349922cac2ff42244a017e0c', class: "pn-input-helper-slot", hidden: !this.showHelperSlot || this.hasError() }, h("slot", { key: '5628bbc8db75161d18ad3e75c259bf3eb5fc9052', name: "helpertext" })), this.hasErrorMessage() && h("span", { key: 'e41145d7fab9f3ae35dd428971c79673d0531301', class: "pn-input-error" }, this.error), h("span", { key: 'ae85a9420fcb449cc874eadc7a066dd772f097a9', class: "pn-input-error-slot", hidden: !this.showErrorSlot }, h("slot", { key: 'bdd31ab2f706cac6e243562d035361a381ecfa43', name: "error" }))))));
     }
     static get is() { return "pn-input"; }
     static get originalStyleUrls() {
@@ -368,7 +385,8 @@ export class PnInput {
                         "PnLanguages": {
                             "location": "import",
                             "path": "@/index",
-                            "id": "src/index.ts::PnLanguages"
+                            "id": "src/index.ts::PnLanguages",
+                            "referenceLocation": "PnLanguages"
                         }
                     }
                 },
@@ -384,6 +402,29 @@ export class PnInput {
                 "attribute": "language",
                 "defaultValue": "null"
             },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.21.0"
+                        }],
+                    "text": "Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
             "icon": {
                 "type": "string",
                 "mutable": false,
@@ -926,4 +967,3 @@ export class PnInput {
             }];
     }
 }
-//# sourceMappingURL=pn-input.js.map

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

@@ -25,4 +25,3 @@ export const translations = {
         no: 'Klar',
     },
 };
-//# sourceMappingURL=translations.js.map

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

@@ -6,12 +6,22 @@ pn-multiselect {
 }
 
 pn-multiselect .pn-multiselect {
+  position: relative;
   border: 0;
   margin: 0;
   padding: 0;
 }
+pn-multiselect .pn-multiselect[data-icon] {
+  --pn-input-offset-left: 2em;
+}
 pn-multiselect .pn-multiselect[data-icon] .pn-multiselect-element {
-  padding-left: 3em;
+  padding-left: 2.75em;
+}
+pn-multiselect .pn-multiselect[data-error] .pn-multiselect-label {
+  color: #a70707;
+}
+pn-multiselect .pn-multiselect[data-error] .pn-multiselect-label[data-compact] {
+  color: #2d2013;
 }
 pn-multiselect .pn-multiselect[data-error] .pn-multiselect-element {
   padding-right: 5.5em;
@@ -25,7 +35,12 @@ pn-multiselect .pn-multiselect[data-error] .pn-multiselect-element:focus-visible
   border-color: #a70707;
   outline-color: #a70707;
 }
+pn-multiselect .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill, pn-multiselect .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:hover, pn-multiselect .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:focus, pn-multiselect .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 10em #fef7f6 inset;
+  -webkit-text-fill-color: #2d2013;
+}
 pn-multiselect .pn-multiselect-label {
+  width: 100%;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
@@ -35,7 +50,7 @@ pn-multiselect .pn-multiselect-label {
   margin: 0 0 0.25em 0;
   gap: 0.5em;
   -webkit-tap-highlight-color: transparent;
-  transition-property: color;
+  transition-property: color, transform;
   transition-duration: 0.2s;
   transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
 }
@@ -45,11 +60,31 @@ pn-multiselect .pn-multiselect-label {
     transition-delay: 0s;
   }
 }
+pn-multiselect .pn-multiselect-label[data-compact] {
+  position: absolute;
+  top: 1.5625em;
+  left: calc(var(--pn-input-offset-left, 0px) + 0.75em + 0.0625em);
+  margin: 0;
+  pointer-events: none;
+  align-items: center;
+  height: 1.5em;
+  max-width: calc(100% - (var(--pn-input-offset-left, 0px) + 0.75em) - (var(--pn-input-offset-right, 0px) + 0.75em));
+  transform: translateY(-50%) scale(1) translateZ(0);
+  transform-origin: 0 0;
+  transition-delay: 0.2s;
+}
+pn-multiselect .pn-multiselect-label[data-compact] > span {
+  font-size: 1em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  line-height: 1.5em;
+}
 pn-multiselect .pn-multiselect-label > span {
   font-size: 0.875em;
 }
-pn-multiselect .pn-multiselect-label {
-  width: 100%;
+pn-multiselect .pn-multiselect-label[data-compact] {
+  justify-content: start;
 }
 pn-multiselect .pn-multiselect-sr-only {
   position: absolute;
@@ -139,11 +174,21 @@ pn-multiselect .pn-multiselect-button[aria-expanded=true] > pn-icon > svg > path
   transition-delay: 0s;
 }
 pn-multiselect .pn-multiselect-element {
+  cursor: text;
+  text-align: left;
+  transition-delay: 0.1s, 0.1s, 0s;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5em;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: #2d2013;
   background-color: #ffffff;
   border: 0.0625em solid #969087;
   border-radius: 0.5em;
-  padding: 0.75em;
+  padding: 0.75em 3.5em 0.75em 0.75em;
   font-family: inherit;
   font-size: 1em;
   font-weight: 500;
@@ -175,6 +220,19 @@ pn-multiselect .pn-multiselect-element {
     transition-delay: 0s;
   }
 }
+pn-multiselect .pn-multiselect-element[data-compact] {
+  text-align: left;
+  padding-top: 1.125em;
+  padding-bottom: 0.375em;
+  max-width: unset;
+}
+pn-multiselect .pn-multiselect-element[data-compact]::placeholder {
+  color: transparent;
+}
+pn-multiselect .pn-multiselect-element[data-compact]:focus + .pn-multiselect-label, pn-multiselect .pn-multiselect-element[data-compact]:not(:placeholder-shown) + .pn-multiselect-label {
+  transform: translateY(-85%) scale(0.75);
+  transition-delay: 0s;
+}
 pn-multiselect .pn-multiselect-element::placeholder {
   color: #5e554a;
   font-weight: normal;
@@ -187,19 +245,6 @@ pn-multiselect .pn-multiselect-element:disabled {
   background-color: #f3f2f2;
   border-color: #f3f2f2;
 }
-pn-multiselect .pn-multiselect-element {
-  cursor: text;
-  text-align: left;
-  transition-delay: 0.1s, 0.1s, 0s;
-  width: 100%;
-  padding-right: 3.5em;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
 pn-multiselect .pn-multiselect-element:disabled {
   color: #5e554a;
   background-color: #f3f2f2;
@@ -570,10 +615,6 @@ pn-multiselect .pn-multiselect-option-text {
   text-overflow: ellipsis;
   overflow: hidden;
 }
-pn-multiselect .pn-multiselect-option-label {
-  color: #2d2013;
-  font-weight: 400;
-}
 pn-multiselect .pn-multiselect-option-helper {
   color: #5e554a;
   margin: 0;