@postnord/pn-marketweb-components 4.1.0 → 4.1.2

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

@@ -90,7 +90,8 @@ export class PnWizard {
             this.positionModal();
         }
         if (step === -1) {
-            this.wizardClose.emit({ step: prevStep, finished: this.isLastStep(prevStep) });
+            const finished = prevStep === this.steps.length;
+            this.wizardClose.emit({ step: finished ? prevStep - 1 : prevStep, finished });
         }
         if (!this.isActive()) {
             this.wizardElement?.close();
@@ -340,7 +341,7 @@ export class PnWizard {
         this.hostElement.style.setProperty('--pn-arrow-offset', `${Math.round(offset)}px`);
     }
     render() {
-        return (h(Host, { key: 'ea15f07a619f558d0938ab32e23a40166ce4ae33' }, h("dialog", { key: 'e24473990d0b5da11a0e138d6fe0be24ba42c4c0', id: this.pnId, "aria-labelledby": this.label ? this.wizardIdLabel : null, "aria-describedby": this.helpertext ? this.wizardIdHelpertext : null, class: "pn-wizard", ref: el => (this.wizardElement = el), onCancel: () => this.endWizard(), onClose: () => this.endWizard() }, h("div", { key: '6b67155a72ef42ef6a27a944b848f439c2df1658', class: "pn-wizard-overlay" }, h("div", { key: '6feab1674d34937a04abd4ad91d025d7875b28cc', class: "pn-wizard-highlight", onClick: e => this.wizardHighlightClick.emit(e) })), h("div", { key: 'a14d9081eaed44b2203cad4298e956b2d9c94801', class: "pn-wizard-content", ref: el => (this.wizardContent = el) }, h("pn-button", { key: 'f6a8a7e2ff676d8d729e2bad2f09df1dc3377d5f', class: "pn-wizard-cancel", arialabel: this.translate('CANCEL'), icon: close, iconOnly: true, small: true, appearance: "light", variant: "borderless", onPnClick: () => this.endWizard() }), h("div", { key: '060769047912671be179b5d5de33ae0ee9dd1717', class: "pn-wizard-text" }, this.label && (h("h2", { key: '660cc7a08b5e6eb493e5c3b421dbd935ff0a93aa', class: "pn-wizard-label", id: this.wizardIdLabel }, this.label)), this.helpertext && (h("p", { key: '1446de253cf9e120479300b55a4fb95d03e1b3d9', class: "pn-wizard-helpertext", id: this.wizardIdHelpertext }, this.helpertext)), h("slot", { key: '8d60e8c119d141844efed818ea4262f314ec6772' }), this.renderProgress() && (h("pn-progress-stepper", { key: '31fab92dfc7aaa1704eefff5a8074413868cce41', class: !this.isProgressDots() && 'pn-wizard-sr-only', totalSteps: this.steps.length, currentStep: this.step > 0 ? this.step + 1 : 1, dots: true }))), h("div", { key: '81cc8a35fdef0fbf702ff2a99440ba8428d082dd', class: "pn-wizard-arrow", ref: el => (this.wizardArrow = el) }), h("div", { key: 'c2b594fe86fbb1144da94e143c0547c0be913993', class: "pn-wizard-controls" }, this.isProgressText() && (h("span", { key: '34cb72149394af26f7ef9997ed10d840c73e9ca5', class: "pn-wizard-indicator", "aria-hidden": "true" }, this.step + 1, "/", this.steps.length)), h("slot", { key: '89a6839ac6a01b2ece4bca587dfc8a4e9663ad6d', name: "buttons" }), this.showBackButton() && (h("pn-button", { key: 'bc1a4f66555279900739d3fca64cf43cdf82df4c', label: this.labelBack || this.translate('PREV'), small: true, appearance: "light", variant: "outlined", onPnClick: () => this.prevStep() })), this.showNextButton() && (h("pn-button", { key: 'ebcccdb26560c895cfa37aa8a2c5d0b576c4fcf2', label: this.getNextLabel(), small: true, icon: arrow_right, onPnClick: () => this.nextStep() })))))));
+        return (h(Host, { key: '08f0d484f684188c7283535da328d6bd681b74d5' }, h("dialog", { key: '56810278e58795390973a9ebbe0bd797b731b1f8', id: this.pnId, "aria-labelledby": this.label ? this.wizardIdLabel : null, "aria-describedby": this.helpertext ? this.wizardIdHelpertext : null, class: "pn-wizard", ref: el => (this.wizardElement = el), onCancel: () => this.endWizard(), onClose: () => this.endWizard() }, h("div", { key: '824bbd673177648865e9328ee5aa51e157aa7347', class: "pn-wizard-overlay" }, h("div", { key: 'a2236247ba49e18de2a4aa2666fa1e07e6aaa1c4', class: "pn-wizard-highlight", onClick: e => this.wizardHighlightClick.emit(e) })), h("div", { key: '77d5f6e74c49b2a92a8c9c8f9207594bec0545c7', class: "pn-wizard-content", ref: el => (this.wizardContent = el) }, h("pn-button", { key: '28fdec2fa470ff03b916325d0085a7bd4cd8f504', class: "pn-wizard-cancel", arialabel: this.translate('CANCEL'), icon: close, iconOnly: true, small: true, appearance: "light", variant: "borderless", onPnClick: () => this.endWizard() }), h("div", { key: 'ff7e6051e041c008c639e392896e885e4dcb0364', class: "pn-wizard-text" }, this.label && (h("h2", { key: '9b8098099707558b66f1b422dc6ada70084d9829', class: "pn-wizard-label", id: this.wizardIdLabel }, this.label)), this.helpertext && (h("p", { key: '4db3b8ab391daf06f5731be43c9c116acd934b1f', class: "pn-wizard-helpertext", id: this.wizardIdHelpertext }, this.helpertext)), h("slot", { key: '5f72315df3102a605d2d4a220cfebfa216101f8c' }), this.renderProgress() && (h("pn-progress-stepper", { key: 'becee14c8d2ad3fe3a9d902dd080f4df760e227e', class: !this.isProgressDots() && 'pn-wizard-sr-only', totalSteps: this.steps.length, currentStep: this.step > 0 ? this.step + 1 : 1, dots: true }))), h("div", { key: '264270d944373b1570a09a330bef6c6e8ad07e4d', class: "pn-wizard-arrow", ref: el => (this.wizardArrow = el) }), h("div", { key: '1420663b8cc3996eb67f640d3a7f981f1fafff82', class: "pn-wizard-controls" }, this.isProgressText() && (h("span", { key: '99cd61e352d16b15129239c8c1932a1e8ff3d675', class: "pn-wizard-indicator", "aria-hidden": "true" }, this.step + 1, "/", this.steps.length)), h("slot", { key: 'f48e48097089a24ed48726046e5bb9b8a36ca1ec', name: "buttons" }), this.showBackButton() && (h("pn-button", { key: '9504536c3602f6280d30aa6f95043d2a66c2ac98', label: this.labelBack || this.translate('PREV'), small: true, appearance: "light", variant: "outlined", onPnClick: () => this.prevStep() })), this.showNextButton() && (h("pn-button", { key: 'c5997f60733d2f220138fbf3caf24f44271d63f3', label: this.getNextLabel(), small: true, icon: arrow_right, onPnClick: () => this.nextStep() })))))));
     }
     static get is() { return "pn-wizard"; }
     static get originalStyleUrls() {
@@ -405,7 +406,8 @@ export class PnWizard {
                         "PnLanguages": {
                             "location": "import",
                             "path": "@/index",
-                            "id": "src/index.ts::PnLanguages"
+                            "id": "src/index.ts::PnLanguages",
+                            "referenceLocation": "PnLanguages"
                         }
                     }
                 },
@@ -767,4 +769,3 @@ export class PnWizard {
             }];
     }
 }
-//# sourceMappingURL=pn-wizard.js.map

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-wizard/translation.js

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

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

@@ -424,4 +424,3 @@ export class PnCheckbox extends Mixin(animateHeightFactory) {
             }];
     }
 }
-//# sourceMappingURL=pn-checkbox.js.map

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

@@ -289,4 +289,3 @@ export class PnChoiceChip {
     }
     static get elementRef() { return "hostElement"; }
 }
-//# sourceMappingURL=pn-choice-chip.js.map

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

@@ -6,7 +6,7 @@ pn-counter {
 }
 
 pn-counter .pn-counter {
-  display: inline-flex;
+  display: flex;
   flex-direction: column;
 }
 pn-counter .pn-counter-label {
@@ -19,7 +19,7 @@ pn-counter .pn-counter-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);
 }
@@ -29,11 +29,37 @@ pn-counter .pn-counter-label {
     transition-delay: 0s;
   }
 }
+pn-counter .pn-counter-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-counter .pn-counter-label[data-compact] > span {
+  font-size: 1em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  line-height: 1.5em;
+}
 pn-counter .pn-counter-label > span {
   font-size: 0.875em;
 }
 pn-counter .pn-counter-input {
-  --pn-counter-ch: 0ch;
+  position: relative;
+  flex: 1 1 auto;
+}
+pn-counter .pn-counter-element {
+  text-align: center;
+  width: 100%;
+  appearance: textfield;
   color: #2d2013;
   background-color: #ffffff;
   border: 0.0625em solid #969087;
@@ -46,68 +72,83 @@ pn-counter .pn-counter-input {
   -webkit-font-smoothing: antialiased;
   -webkit-tap-highlight-color: transparent;
 }
-pn-counter .pn-counter-input:-webkit-autofill, pn-counter .pn-counter-input:-webkit-autofill:hover, pn-counter .pn-counter-input:-webkit-autofill:focus, pn-counter .pn-counter-input:-webkit-autofill:active {
+pn-counter .pn-counter-element:-webkit-autofill, pn-counter .pn-counter-element:-webkit-autofill:hover, pn-counter .pn-counter-element:-webkit-autofill:focus, pn-counter .pn-counter-element:-webkit-autofill:active {
   -webkit-box-shadow: 0 0 0 10em #e0f8ff inset;
   -webkit-text-fill-color: #2d2013;
 }
-pn-counter .pn-counter-input {
+pn-counter .pn-counter-element {
   outline: 0.2rem solid transparent;
   outline-offset: 0.2rem;
 }
-pn-counter .pn-counter-input:focus-visible {
+pn-counter .pn-counter-element:focus-visible {
   outline-color: #005d92;
   background-color: #ffffff;
   border-color: #005d92;
 }
-pn-counter .pn-counter-input {
+pn-counter .pn-counter-element {
   transition-property: outline-color, background-color, border-color, color;
   transition-duration: 0.2s;
   transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
 }
 @media (prefers-reduced-motion: reduce) {
-  pn-counter .pn-counter-input {
+  pn-counter .pn-counter-element {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
-pn-counter .pn-counter-input::placeholder {
+pn-counter .pn-counter-element[data-compact] {
+  text-align: left;
+  padding-top: 1.125em;
+  padding-bottom: 0.375em;
+  max-width: unset;
+}
+pn-counter .pn-counter-element[data-compact]::placeholder {
+  color: transparent;
+}
+pn-counter .pn-counter-element[data-compact]:focus + .pn-counter-label, pn-counter .pn-counter-element[data-compact]:not(:placeholder-shown) + .pn-counter-label {
+  transform: translateY(-85%) scale(0.75);
+  transition-delay: 0s;
+}
+pn-counter .pn-counter-element::placeholder {
   color: #5e554a;
   font-weight: normal;
 }
-pn-counter .pn-counter-input:hover {
+pn-counter .pn-counter-element:hover {
   border-color: #005d92;
 }
-pn-counter .pn-counter-input:disabled {
+pn-counter .pn-counter-element:disabled {
   color: #5e554a;
   background-color: #f3f2f2;
   border-color: #f3f2f2;
 }
-pn-counter .pn-counter-input {
-  text-align: center;
-  width: 100%;
-  max-width: calc(3.5em + var(--pn-counter-ch));
-  outline: 0.2rem solid transparent;
-  outline-offset: 0.2rem;
-}
-pn-counter .pn-counter-input:focus-visible {
-  outline-color: #005d92;
-}
-pn-counter .pn-counter-input:read-only {
+pn-counter .pn-counter-element:read-only {
   border-color: #ffffff;
 }
-pn-counter .pn-counter-input:disabled {
+pn-counter .pn-counter-element:disabled {
   color: #5e554a;
   background-color: #f3f2f2;
   border-color: #f3f2f2;
 }
-pn-counter .pn-counter-input::-webkit-inner-spin-button, pn-counter .pn-counter-input::-webkit-outer-spin-button {
+pn-counter .pn-counter-element:out-of-range {
+  border-color: #a70707;
+}
+pn-counter .pn-counter-element:out-of-range:hover {
+  border-color: #500715;
+}
+pn-counter .pn-counter-element:out-of-range:focus-visible {
+  background-color: #ffffff;
+  border-color: #a70707;
+  outline-color: #a70707;
+}
+pn-counter .pn-counter-element:out-of-range:-webkit-autofill, pn-counter .pn-counter-element:out-of-range:-webkit-autofill:hover, pn-counter .pn-counter-element:out-of-range:-webkit-autofill:focus, pn-counter .pn-counter-element:out-of-range:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 10em #fef7f6 inset;
+  -webkit-text-fill-color: #2d2013;
+}
+pn-counter .pn-counter-element::-webkit-inner-spin-button, pn-counter .pn-counter-element::-webkit-outer-spin-button {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
-pn-counter .pn-counter-input[type=number] {
-  appearance: textfield;
-}
 pn-counter .pn-counter-items {
   display: inline-flex;
   flex-direction: row;
@@ -133,6 +174,7 @@ pn-counter .pn-counter-items > pn-button {
   transform: scale(1) translateZ(0);
   transform-origin: center center;
   width: 3em;
+  will-change: width, transform;
   transition-property: transform, width;
   transition-duration: 0.2s;
   transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);

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

@@ -17,7 +17,6 @@ export class PnCounter {
     idLabel = `${this.id}-label`;
     idText = `${this.id}-text`;
     idAmount = `${this.id}-count`;
-    counterElement;
     hostElement;
     clearAriaTimer;
     displaySrValue = false;
@@ -33,6 +32,8 @@ export class PnCounter {
     value = 0;
     /** Set a unique HTML ID for the counter */
     counterid = this.id;
+    /** Use the compact label variant. @since v7.21.0 */
+    compact = false;
     /** Set the language manually for the built in translations. */
     language = null;
     /** Text for the decrease button. Default is "Decrease". @category Translation */
@@ -86,7 +87,6 @@ export class PnCounter {
                 increase: this.interactType === 'increase',
             });
         this.lastDispatchedValue = this.value;
-        this.handleInputLength();
     }
     handleId() {
         this.idLabel = `${this.counterid}-label`;
@@ -99,10 +99,6 @@ export class PnCounter {
             return;
         await awaitTopbar(this.hostElement);
     }
-    componentDidLoad() {
-        this.counterElement = this.hostElement.querySelector('.pn-counter-input');
-        this.handleInputLength();
-    }
     setVal(event) {
         const { valueAsNumber } = event.target;
         if (isNaN(valueAsNumber))
@@ -183,15 +179,17 @@ export class PnCounter {
     noButtons() {
         return this.disabled || this.readonly;
     }
-    handleInputLength() {
-        const ch = this.max ? this.max.toString() : this.value.toString();
-        if (ch.length > 3)
-            this.counterElement.style.setProperty('--pn-counter-ch', `${ch.length - 3}ch`);
-        else
-            this.counterElement.style.setProperty('--pn-counter-ch', '0ch');
+    renderLabel() {
+        return (h("label", { htmlFor: this.counterid, class: "pn-counter-label", id: this.idLabel, "data-compact": this.compact }, h("span", null, this.label)));
+    }
+    renderButton(increase = false) {
+        const label = increase
+            ? this.labelIncrease || this.translate('INCREASE')
+            : this.labelDecrease || this.translate('DECREASE');
+        return (h("pn-button", { "data-increase": increase ? true : null, "data-decrease": increase ? null : true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: increase ? plus : minus, iconOnly: true, tooltip: label, onPnClick: () => (increase ? this.increaseAmount() : this.decreaseAmount()) }));
     }
     render() {
-        return (h(Host, { key: '4ebc9597343d24473f745ae6f847a6b48a8f6af0' }, h("div", { key: 'bed20d505ebe5490787413a5d1573b4fe2bbc6ed', class: "pn-counter", role: "group", "aria-labelledby": this.idLabel, "aria-describedby": this.describedbyIds() }, h("label", { key: '12dac33ecc76369b7777dcc189c79555b5882e13', htmlFor: this.counterid, class: "pn-counter-label", id: this.idLabel }, h("span", { key: '5f1448379b2592a92f928beffa0bd8861cc32726' }, this.label)), h("div", { key: 'bf75b3d6dfb3fc2a9dd79c5255dd6cacaeba7670', class: "pn-counter-items", "data-hidebuttons": this.noButtons() }, h("pn-button", { key: 'a3559366cacdf27bf5fb7572a55c51c3f3fa14cf', "data-decrease": true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: minus, iconOnly: true, arialabel: this.labelDecrease || this.translate('DECREASE'), onClick: () => this.decreaseAmount() }), h("input", { key: 'bd0d56f4ea78128ea8259966edf6c345c45e06a0', id: this.counterid, class: "pn-counter-input", type: "number", min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, required: this.required, readonly: this.readonly, disabled: this.disabled, "aria-describedby": this.describedbyIds(), onInput: e => this.setVal(e), onKeyDown: (e) => this.keyBoardInput(e) }), h("pn-button", { key: '770b62d7b3ff6c27ce7e4c0349e49236f65be054', "data-increase": true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: plus, iconOnly: true, arialabel: this.labelIncrease || this.translate('INCREASE'), onClick: () => this.increaseAmount() })), !!this.getTextMessage() && (h("p", { key: '7a0f9cc0838545dcf7ae1b20798e0eeabbec19b9', id: this.idText, class: "pn-counter-helpertext" }, h("span", { key: '343fa6cef1e44da4ceb69f3f8e650a210b0aa76e' }, this.getTextMessage()))), h("p", { key: 'defe5fda110e1079b11c4b58bbc9cec1e326f163', id: this.idAmount, class: "pn-counter-sr-only", "aria-live": "assertive" }, this.displaySrValue ? this.getTextMessage(true) : ''))));
+        return (h(Host, { key: '8f8a1d6f9cf41e43a17146796bdbadfabb5421da' }, h("div", { key: '1de06de8544eeb0efcdd940da16fd7cb39620897', class: "pn-counter", role: "group", "aria-labelledby": this.idLabel, "aria-describedby": this.describedbyIds() }, !this.compact && this.renderLabel(), h("div", { key: '83280bb5e207a2a226e7174f5819ef0f375f06c6', class: "pn-counter-items", "data-hidebuttons": this.noButtons() }, this.renderButton(), h("div", { key: '6f3cc4e8987d526be974bd561f2e3413e83cc35f', class: "pn-counter-input" }, h("input", { key: 'f2cb0054546017a768e68503aaf7fd93b55c5885', id: this.counterid, class: "pn-counter-element", type: "number", min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.compact ? ' ' : null, required: this.required, readonly: this.readonly, disabled: this.disabled, "aria-describedby": this.describedbyIds(), "data-compact": this.compact, onInput: e => this.setVal(e), onKeyDown: (e) => this.keyBoardInput(e) }), this.compact && this.renderLabel()), this.renderButton(true)), !!this.getTextMessage() && (h("p", { key: 'cb64255f574b4d9fc7ba0098d9f7353c5c639956', id: this.idText, class: "pn-counter-helpertext" }, h("span", { key: '76a5d077b53f2a60c1d39f42b34e8312ae250d86' }, this.getTextMessage()))), h("p", { key: '37d61e40910bb4cd0cc072772c3dd5414fe31574', id: this.idAmount, class: "pn-counter-sr-only", "aria-live": "assertive" }, this.displaySrValue ? this.getTextMessage(true) : ''))));
     }
     static get is() { return "pn-counter"; }
     static get originalStyleUrls() {
@@ -284,6 +282,29 @@ export class PnCounter {
                 "attribute": "counterid",
                 "defaultValue": "this.id"
             },
+            "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
             "language": {
                 "type": "string",
                 "mutable": false,
@@ -294,7 +315,8 @@ export class PnCounter {
                         "PnLanguages": {
                             "location": "import",
                             "path": "@/globals/types",
-                            "id": "src/globals/types.ts::PnLanguages"
+                            "id": "src/globals/types.ts::PnLanguages",
+                            "referenceLocation": "PnLanguages"
                         }
                     }
                 },
@@ -618,4 +640,3 @@ export class PnCounter {
             }];
     }
 }
-//# sourceMappingURL=pn-counter.js.map

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

@@ -32,4 +32,3 @@ export const translations = {
         no: 'Laveste verdi er ',
     },
 };
-//# sourceMappingURL=translations.js.map

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

@@ -39,6 +39,10 @@ pn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn
   border-color: #a70707;
   outline-color: #a70707;
 }
+pn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input:-webkit-autofill, pn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input:-webkit-autofill:hover, pn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input:-webkit-autofill:focus, pn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 10em #fef7f6 inset;
+  -webkit-text-fill-color: #2d2013;
+}
 pn-date-picker .pn-date-picker-label {
   cursor: pointer;
   display: flex;
@@ -49,7 +53,7 @@ pn-date-picker .pn-date-picker-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);
 }
@@ -59,6 +63,26 @@ pn-date-picker .pn-date-picker-label {
     transition-delay: 0s;
   }
 }
+pn-date-picker .pn-date-picker-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-date-picker .pn-date-picker-label[data-compact] > span {
+  font-size: 1em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  line-height: 1.5em;
+}
 pn-date-picker .pn-date-picker-label > span {
   font-size: 0.875em;
 }
@@ -103,6 +127,19 @@ pn-date-picker .pn-date-picker-input {
     transition-delay: 0s;
   }
 }
+pn-date-picker .pn-date-picker-input[data-compact] {
+  text-align: left;
+  padding-top: 1.125em;
+  padding-bottom: 0.375em;
+  max-width: unset;
+}
+pn-date-picker .pn-date-picker-input[data-compact]::placeholder {
+  color: transparent;
+}
+pn-date-picker .pn-date-picker-input[data-compact]:focus + .pn-date-picker-label, pn-date-picker .pn-date-picker-input[data-compact]:not(:placeholder-shown) + .pn-date-picker-label {
+  transform: translateY(-85%) scale(0.75);
+  transition-delay: 0s;
+}
 pn-date-picker .pn-date-picker-input::placeholder {
   color: #5e554a;
   font-weight: normal;

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

@@ -76,6 +76,8 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
      * @see {@link https://day.js.org/docs/en/display/format Day.js format documentation.}
      */
     format = 'YYYY-MM-DD';
+    /** Set the date picker label as compact. If used, the `placeholder` will no longer be displayed. @since v7.21.0 */
+    compact = false;
     /** Manually set language; this will be inherited from the topbar. */
     language = null;
     /** Set a custom ID for the calendar. @since v7.6.0 @category HTML attributes */
@@ -698,10 +700,14 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
     renderYearGrid() {
         return (h("ul", { class: "pn-date-picker-list" }, this.getYearGrid()?.map(year => (h("li", { key: year, class: "pn-date-picker-item", "data-item": "year" }, h("button", { type: "button", class: "pn-date-picker-button", ...this.getDayAttributes({ year }, false) }, h("span", null, year)))))));
     }
+    renderLabel(to = false) {
+        const id = to ? this.idTo : this.idFrom;
+        const label = to ? this.labelTo : this.labelFrom;
+        return (h("label", { class: "pn-date-picker-label", htmlFor: id, "data-compact": this.compact }, h("span", null, label)));
+    }
     renderInput({ to = false } = {}) {
         const id = to ? this.idTo : this.idFrom;
         const idButton = to ? this.idToButton : this.idFromButton;
-        const label = to ? this.labelTo : this.labelFrom;
         const value = to ? this.end : this.start;
         const placeholder = to ? this.endPlaceholder : this.placeholder;
         const list = to ? this.listEnd : this.list;
@@ -714,10 +720,10 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
             textButton += `, ${dateText.replace('{date}', value)}`;
         }
         const showButton = !(this.disabled || this.readonly);
-        return (h("div", { class: "pn-date-picker-container", "data-error": this.hasError() }, h("label", { class: "pn-date-picker-label", htmlFor: id }, h("span", null, label)), h("div", { class: "pn-date-picker-field" }, h("input", { type: "text", id: id, class: "pn-date-picker-input", name: this.name, placeholder: placeholder, autocomplete: this.autocomplete, maxlength: this.disableMaxLength ? null : this.format.length, list: list, pattern: this.pattern, value: value, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-describedby": this.ariaDescribedby(), "aria-invalid": this.hasError()?.toString(), onInput: e => this.inputHandler(e, to), "data-active": editing }), showButton && (h("pn-button", { class: "pn-date-picker-toggle", buttonId: idButton, icon: calendar, iconOnly: true, appearance: "light", arialabel: textButton, ariaexpanded: this.open.toString(), ariacontrols: this.idCalendar, "data-active": this.open, "data-input": true, small: true, onPnClick: () => this.toggleGrid(null, to), onKeyDown: e => this.handleButtonBlur(e) })))));
+        return (h("div", { class: "pn-date-picker-container", "data-error": this.hasError() }, !this.compact && this.renderLabel(to), h("div", { class: "pn-date-picker-field" }, h("input", { type: "text", id: id, class: "pn-date-picker-input", name: this.name, placeholder: placeholder || this.compact ? ' ' : null, autocomplete: this.autocomplete, maxlength: this.disableMaxLength ? null : this.format.length, list: list, pattern: this.pattern, value: value, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-describedby": this.ariaDescribedby(), "aria-invalid": this.hasError()?.toString(), "data-active": editing, "data-compact": this.compact, onInput: e => this.inputHandler(e, to) }), this.compact && this.renderLabel(to), showButton && (h("pn-button", { class: "pn-date-picker-toggle", buttonId: idButton, icon: calendar, iconOnly: true, appearance: "light", arialabel: textButton, ariaexpanded: this.open.toString(), ariacontrols: this.idCalendar, "data-active": this.open, "data-input": true, small: true, onPnClick: () => this.toggleGrid(null, to), onKeyDown: e => this.handleButtonBlur(e) })))));
     }
     render() {
-        return (h(Host, { key: '4d85525aaba22979d1bfffbfc9822ec4aa81a8b5' }, h("div", { key: '84a6553fca26f0f1732a4e4f9586a4712e100f56', class: "pn-date-picker" }, this.renderInput(), this.range && (h("div", { key: '58f8f08063eba3bea6ab2ca011a5b967e0b3c8c0', class: "pn-date-picker-range-icon test" }, h("pn-icon", { key: 'a5d25d2567004851dd00a80b5f7f38844074d837', icon: arrow_right }))), this.range && this.renderInput({ to: this.range })), h("div", { key: 'bba85a8e66ab8e7291cb3c42e557ddd3df5bd083', id: this.idCalendar, class: "pn-date-picker-calendar", role: "dialog", "aria-label": this.translate('CALENDAR_NAVIGATION'), "data-open": this.open, "data-direction": this.openUp ? 'top' : 'bottom', "data-range": this.range, style: { height: '0px' }, ref: el => (this.calendarElement = el), onKeyDown: e => this.handleCalendarTabEsc(e) }, h("div", { key: 'c5a4fe5d251ba8c516d7d0e1ee1f399bb3b612bc', class: "pn-date-picker-wrapper" }, h("nav", { key: '66c4b5edec33b5f5f00e8ac11bec5c7972fb4fc7', class: "pn-date-picker-nav", "aria-labelledby": this.idCalendar }, h("pn-button", { key: '824460845e4d85d08fa15cb94fc8ad1bde3c0cc9', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`PREVIOUS_${this.viewType().toUpperCase()}`), icon: arrow_left, iconOnly: true, onPnClick: () => this.setNavView({ minus: true }) }), h("pn-button", { key: '57891f7b9b7b2f07fc82be0c675984a10bbb85ea', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(MONTHS) }, h("span", { key: '55427549f9bcdf57549f519d238bc38b7ee61a1c', class: "pn-date-picker-month", "data-full": true }, this.translateDateText({ date: 1 }, 'MMMM')), h("span", { key: '2d83a043d900d764f1db394257d7b4662c77d7af', class: "pn-date-picker-month", "data-abbr": true }, this.translateDateText({ date: 1 }, 'MMM'))), h("h2", { key: '3373b6fa956909e3b856ba79586a964e5a420d8a', hidden: this.viewingCalendar(), class: "pn-date-picker-title" }, this.translate(`SELECT_${this.viewType().toUpperCase()}`)), h("pn-button", { key: '8a4e80b9045a9793636833651dbaf4eb813a0129', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(YEARS) }, h("span", { key: '4e2888e1c0f762ca85285cabbfc3adfa1a13a5bc' }, this.dateViewYear)), h("pn-button", { key: '4b78b5b1f7722a656a6a38676337cce45dc9c8f0', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`NEXT_${this.viewType().toUpperCase()}`), icon: arrow_right, iconOnly: true, onPnClick: () => this.setNavView({ plus: true }) })), this.viewingYears() && this.renderYearGrid(), this.viewingMonth() && this.renderMonthGrid(), this.viewingCalendar() && this.renderDateGrid(), h("aside", { key: '7a3153edc880f5a9fe5a3ca6a1d26aa3c8bd8633', class: "pn-date-picker-chips" }, h("slot", { key: '5679b936f9e976c11eee8b5a907e9213ebe43cfe', name: "chips" })), h("nav", { key: '6a534aeb468dda5595cb28accc10cdcd1d0a0d5e', class: "pn-date-picker-bottom", hidden: this.viewingCalendar() }, h("pn-button", { key: '1ced26f417ce40b78a3c666f33d82c2f5f5b4021', appearance: "light", variant: "outlined", small: true, icon: pn_return, onPnClick: () => this.setView(CALENDAR) }, h("span", { key: '3f32c7c48865204d3ec238f636cfa4b606fd731c' }, this.translate('GO_CALENDAR')))))), h("p", { key: 'd25bc2c176f6a91acf29858b539889e86252e0b7', id: this.idHelper, class: "pn-date-picker-helpertext", hidden: !this.hasHelperText() || this.hasError() }, h("span", { key: '133f0e416acdc69416aa5a4caf19cfe966fe16e3' }, this.helpertext), h("slot", { key: 'f3475514df86b1098d8a452d1bc8170e200c8134', name: "helpertext" })), h("p", { key: '7538f6b51c50a8276a453f7255b38201c4ccabf4', id: this.idError, class: "pn-date-picker-error", role: "alert", hidden: !this.hasErrorMessage() }, h("span", { key: '3b0b2798b8bf329a889f33886b3ffa40ed7d0686' }, this.error), h("slot", { key: '201d08ca9eeb41656aac9aab42687d303b97276a', name: "error" }))));
+        return (h(Host, { key: 'bef41e3848b4778dae41cc157208f58b01f99e5a' }, h("div", { key: 'f2051b9d760e105bef77453f62c3f47d274818d5', class: "pn-date-picker" }, this.renderInput(), this.range && (h("div", { key: 'ea7dc69338437c578d1ac4e84cfbd7026e722886', class: "pn-date-picker-range-icon test" }, h("pn-icon", { key: 'c2ebd35385a531c8c56cbd7125304b0b7e5c4bba', icon: arrow_right }))), this.range && this.renderInput({ to: this.range })), h("div", { key: '50c34113b664c0fe72239c998ff589ae4d154f50', id: this.idCalendar, class: "pn-date-picker-calendar", role: "dialog", "aria-label": this.translate('CALENDAR_NAVIGATION'), "data-open": this.open, "data-direction": this.openUp ? 'top' : 'bottom', "data-range": this.range, style: { height: '0px' }, ref: el => (this.calendarElement = el), onKeyDown: e => this.handleCalendarTabEsc(e) }, h("div", { key: '586f894fbc316476084ffac4d742096214344aab', class: "pn-date-picker-wrapper" }, h("nav", { key: 'd509c43aa3c72eec5062b9d36598a2c9132f644a', class: "pn-date-picker-nav", "aria-labelledby": this.idCalendar }, h("pn-button", { key: '932b697181edbcb2de2f9c81d1420318fa78e1fb', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`PREVIOUS_${this.viewType().toUpperCase()}`), icon: arrow_left, iconOnly: true, onPnClick: () => this.setNavView({ minus: true }) }), h("pn-button", { key: '121aa3b619dadb8b11436a5f30f9399b11874cf8', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(MONTHS) }, h("span", { key: '70ae732a670126ea6a0a7b4334c495d57efa8337', class: "pn-date-picker-month", "data-full": true }, this.translateDateText({ date: 1 }, 'MMMM')), h("span", { key: '64aea5d4460c1292f5a711c9109171cdf5f3b3ee', class: "pn-date-picker-month", "data-abbr": true }, this.translateDateText({ date: 1 }, 'MMM'))), h("h2", { key: '7b2fefd52192f13cad8e205eff5b90bd57638677', hidden: this.viewingCalendar(), class: "pn-date-picker-title" }, this.translate(`SELECT_${this.viewType().toUpperCase()}`)), h("pn-button", { key: '53b7e9a6c43dc09561ec17dfbe6acab6067ef46b', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(YEARS) }, h("span", { key: 'db2f1937ec644bcadb0bdf17a03d2a881db0647e' }, this.dateViewYear)), h("pn-button", { key: '1df23411678099c6698a696a3296f89fdf6c614d', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`NEXT_${this.viewType().toUpperCase()}`), icon: arrow_right, iconOnly: true, onPnClick: () => this.setNavView({ plus: true }) })), this.viewingYears() && this.renderYearGrid(), this.viewingMonth() && this.renderMonthGrid(), this.viewingCalendar() && this.renderDateGrid(), h("aside", { key: 'a61e07b69102bf3c46718bbf9d5ab762b3ff3df3', class: "pn-date-picker-chips" }, h("slot", { key: '3fe1141f893787da89d3e286844bbaea6146f2fc', name: "chips" })), h("nav", { key: 'cc83051082a66a3f91aa4febdaafd3b7ecf1bc04', class: "pn-date-picker-bottom", hidden: this.viewingCalendar() }, h("pn-button", { key: '0fe2fe90abbe983f65eb8758237fa803f10d923e', appearance: "light", variant: "outlined", small: true, icon: pn_return, onPnClick: () => this.setView(CALENDAR) }, h("span", { key: 'd8a804979ce48c878f02fc17c96c531b4d740363' }, this.translate('GO_CALENDAR')))))), h("p", { key: '5b988ffe755420b13aed5829c0e487fe4024a8b1', id: this.idHelper, class: "pn-date-picker-helpertext", hidden: !this.hasHelperText() || this.hasError() }, h("span", { key: 'a80dbb6c442483a82cb5f5d89703b63830c880ff' }, this.helpertext), h("slot", { key: '773baa50b1b1867c877d8c0c4840bbae203fa3b9', name: "helpertext" })), h("p", { key: '98be0a59545986ba2acb2d252712d19af3e98ac1', id: this.idError, class: "pn-date-picker-error", role: "alert", hidden: !this.hasErrorMessage() }, h("span", { key: '92d6a0e790da33e19e46c7f38259a18bbbc6ae92' }, this.error), h("slot", { key: '6e868ce2e742e7cd2d7f5b0329cba2ba94e2b929', name: "error" }))));
     }
     static get is() { return "pn-date-picker"; }
     static get originalStyleUrls() {
@@ -867,6 +873,29 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                 "attribute": "format",
                 "defaultValue": "'YYYY-MM-DD'"
             },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.21.0"
+                        }],
+                    "text": "Set the date picker label as compact. If used, the `placeholder` will no longer be displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
             "language": {
                 "type": "string",
                 "mutable": false,
@@ -877,7 +906,8 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                         "PnLanguages": {
                             "location": "import",
                             "path": "@/index",
-                            "id": "src/index.ts::PnLanguages"
+                            "id": "src/index.ts::PnLanguages",
+                            "referenceLocation": "PnLanguages"
                         }
                     }
                 },
@@ -1157,7 +1187,8 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                         "CalendarView": {
                             "location": "import",
                             "path": "@/globals/date",
-                            "id": "src/globals/date/index.ts::CalendarView"
+                            "id": "src/globals/date/index.ts::CalendarView",
+                            "referenceLocation": "CalendarView"
                         }
                     }
                 },
@@ -1552,7 +1583,8 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                         "PnDatePickerSelectEvent": {
                             "location": "import",
                             "path": "@/globals/date",
-                            "id": "src/globals/date/index.ts::PnDatePickerSelectEvent"
+                            "id": "src/globals/date/index.ts::PnDatePickerSelectEvent",
+                            "referenceLocation": "PnDatePickerSelectEvent"
                         }
                     }
                 }
@@ -1576,7 +1608,8 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                         "PnDatePickerSelectEvent": {
                             "location": "import",
                             "path": "@/globals/date",
-                            "id": "src/globals/date/index.ts::PnDatePickerSelectEvent"
+                            "id": "src/globals/date/index.ts::PnDatePickerSelectEvent",
+                            "referenceLocation": "PnDatePickerSelectEvent"
                         }
                     }
                 }
@@ -1636,7 +1669,8 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                         "CalendarView": {
                             "location": "import",
                             "path": "@/globals/date",
-                            "id": "src/globals/date/index.ts::CalendarView"
+                            "id": "src/globals/date/index.ts::CalendarView",
+                            "referenceLocation": "CalendarView"
                         }
                     }
                 }
@@ -1695,4 +1729,3 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
             }];
     }
 }
-//# sourceMappingURL=pn-date-picker.js.map

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

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

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

@@ -67,7 +67,7 @@ export class PnFieldset {
         return alert_exclamation_circle;
     }
     render() {
-        return (h(Host, { key: 'b7ec45925ea5371173faf440a530c7ba3f03b0f4' }, h("fieldset", { key: '2caaf0877158f2aa059c1d4e6ece96650ec29bf7', id: this.fieldsetId, class: "pn-fieldset", disabled: this.disabled, "aria-describedby": this.helpertext && this.idHelpertext, "aria-invalid": this.hasError().toString() }, h("legend", { key: 'b9f6768922473c764ac40bca471d976286941b9a', class: "pn-fieldset-legend" }, this.legend), this.helpertext && (h("p", { key: '2f189ecd40ae974f4471722e7c2fc17fbc65a1ab', id: this.idHelpertext, class: "pn-fieldset-helpertext" }, this.helpertext)), h("div", { key: '760907f09aeca87ddf98941faf84f908da154e28', class: "pn-fieldset-items" }, h("slot", { key: '58e258065ab6344207c9b56526fdcdf42de9aa42' })), h("div", { key: '122ebee3ba24bb5bb66d7eaf828ac573540fdf5c', class: "pn-fieldset-message-wrapper", role: "alert", hidden: !this.error }, h("pn-icon", { key: '48e77425756edf11dbc8dfe811b18041919bf6d8', icon: this.getSymbol() }), h("p", { key: 'c5e8933004a643ef3ed87b20f54d384535ccb054', class: "pn-fieldset-message" }, this.error)))));
+        return (h(Host, { key: '4eac26b9a4c9095888cbe548f30eddcbed3efcdf' }, h("fieldset", { key: '341684c752c43382f37d0d95f9ea8c0d2d170ef1', id: this.fieldsetId, class: "pn-fieldset", disabled: this.disabled, "aria-describedby": this.helpertext && this.idHelpertext, "aria-invalid": this.hasError().toString() }, h("legend", { key: '3f98ab3a56288cebb07cce9c49b6e1bebd2096f2', class: "pn-fieldset-legend" }, this.legend), this.helpertext && (h("p", { key: '979b9b47ae0baa2f84bf19de877149773bfd63b9', id: this.idHelpertext, class: "pn-fieldset-helpertext" }, this.helpertext)), h("div", { key: 'a67905a01003d767e26061ff8fa3af86a0900c27', class: "pn-fieldset-items" }, h("slot", { key: 'a2a02e54157e39e43cf03839c8bb2a561533eb39' })), h("div", { key: '4c618709e6a3cbaa20761368acc70b6d2e964930', class: "pn-fieldset-message-wrapper", role: "alert", hidden: !this.error }, h("pn-icon", { key: 'db1b62bccada153943c62195242e66b62d9cc2c3', icon: this.getSymbol() }), h("p", { key: '9b94853b5064d9563e39c20491d7139eead83f56', class: "pn-fieldset-message" }, this.error)))));
     }
     static get is() { return "pn-fieldset"; }
     static get originalStyleUrls() {
@@ -247,4 +247,3 @@ export class PnFieldset {
             }];
     }
 }
-//# sourceMappingURL=pn-fieldset.js.map

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

@@ -14,4 +14,3 @@ export class PnFileUploadError extends Error {
         this.data = data;
     }
 }
-//# sourceMappingURL=pn-file-upload-error.js.map