npm - @postnord/pn-marketweb-components - Versions diffs - 4.1.0 → 4.1.2 - Mend

@postnord/pn-marketweb-components 4.1.0 → 4.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1268) hide show

package/umd/modules/@postnord/web-components/esm/pn-checkbox.entry.js CHANGED Viewed

@@ -2,11 +2,11 @@
  * Built with Stencil
  * By PostNord.
  */
-import { M as Mixin, r as registerInstance, g as getElement, h, a as Host } from './index-BNA0ko5y.js';
+import { t as transformTag, M as Mixin, r as registerInstance, g as getElement, h, a as Host } from './index-CAEP792y.js';
 import { uuidv4 } from './index.js';
-import { a as animateHeightFactory } from './index-CJTbRJfo.js';
+import { a as animateHeightFactory } from './index-CosyroON.js';
-const pnCheckboxCss = "pn-checkbox{position:relative;display:inline-block}pn-checkbox .pn-checkbox{position:relative;display:flex;flex-wrap:wrap;flex-direction:row}pn-checkbox .pn-checkbox-label{cursor:pointer;color:#2d2013;-webkit-tap-highlight-color:transparent}pn-checkbox .pn-checkbox-helpertext{color:#5e554a;margin:0 0 0.5em 0}pn-checkbox .pn-checkbox-helpertext:last-child{margin:0}pn-checkbox .pn-checkbox-content{display:flex;flex-direction:column;align-items:flex-start;font-weight:400;line-height:1.5;flex:1;margin:0 0 0 0.75em}pn-checkbox .pn-checkbox-outer{width:1.5em;height:1.5em;background-color:#ffffff;display:flex;align-items:center;justify-content:center;position:relative;border:0.0625em solid #969087;border-radius:0.25em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, border-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-checkbox .pn-checkbox-outer{transition-duration:0s;transition-delay:0s}}pn-checkbox .pn-checkbox-svg{width:1.25em;fill:none}pn-checkbox .pn-checkbox-svg-line{stroke:#ffffff;transform-origin:0 0;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition-property:stroke-dashoffset;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-checkbox .pn-checkbox-svg-line{transition-duration:0s;transition-delay:0s}}pn-checkbox .pn-checkbox-svg-line{transition-delay:0s}pn-checkbox .pn-checkbox[data-tile]{position:relative;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:1em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, background-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-checkbox .pn-checkbox[data-tile]{transition-duration:0s;transition-delay:0s}}pn-checkbox .pn-checkbox[data-tile][data-invalid]{border-color:#a70707}pn-checkbox .pn-checkbox[data-invalid] .pn-checkbox-outer{border-color:#a70707}pn-checkbox .pn-checkbox-container{flex:1 1 100%;overflow:hidden;visibility:hidden}pn-checkbox .pn-checkbox-container[data-open]{visibility:visible;overflow:unset}pn-checkbox .pn-checkbox-container[data-moving]{visibility:visible;overflow:hidden}pn-checkbox .pn-checkbox-area{padding:0.75em 0 0 2.25em;display:flex;flex-direction:column;flex-wrap:nowrap;gap:1em}pn-checkbox .pn-checkbox>pn-icon{margin-left:0.75em}pn-checkbox>input{cursor:pointer;opacity:0;position:absolute;margin:0;z-index:1;top:0;left:0;font-size:1em;width:1.5em;height:1.5em;-webkit-tap-highlight-color:transparent}pn-checkbox>input[data-tile]:not([data-expand]){width:100%;height:100%}pn-checkbox>input[data-expand]{top:1em;left:1em}pn-checkbox>input[aria-describedby]+.pn-checkbox[data-tile] .pn-checkbox-label{font-weight:500}pn-checkbox>input:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#e0f8ff;border-color:#005d92}pn-checkbox>input:hover+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}pn-checkbox>input:hover+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}pn-checkbox>input:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#fdefee;border-color:#a70707}pn-checkbox>input:focus-visible+.pn-checkbox>.pn-checkbox-outer{outline-color:#005d92}pn-checkbox>input:focus-visible+.pn-checkbox[data-tile]{outline-color:#005d92;border-color:#005d92}pn-checkbox>input:focus-visible+.pn-checkbox[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}pn-checkbox>input:focus-visible+.pn-checkbox[data-tile][data-invalid]>.pn-checkbox-outer{outline-color:transparent}pn-checkbox>input:focus-visible+.pn-checkbox[data-tile]>.pn-checkbox-outer{outline-color:transparent}pn-checkbox>input:focus-visible+.pn-checkbox[data-invalid]>.pn-checkbox-outer{outline-color:#a70707}pn-checkbox>input:checked+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}pn-checkbox>input:checked+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-indeterminate{stroke-dashoffset:23}pn-checkbox>input:checked+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-checkmark{transition-delay:0.2s;stroke-dashoffset:0}pn-checkbox>input:checked+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}pn-checkbox>input:checked+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}pn-checkbox>input:checked+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}pn-checkbox>input:checked:hover+.pn-checkbox[data-tile]{border-color:#0d234b}pn-checkbox>input:checked:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}pn-checkbox>input:checked:hover+.pn-checkbox[data-invalid]{border-color:#500715}pn-checkbox>input:checked:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}pn-checkbox>input:indeterminate+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}pn-checkbox>input:indeterminate+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-checkmark{stroke-dashoffset:23}pn-checkbox>input:indeterminate+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-indeterminate{stroke-dashoffset:0}pn-checkbox>input:indeterminate+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}pn-checkbox>input:indeterminate:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}pn-checkbox>input:indeterminate:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}pn-checkbox>input:disabled{pointer-events:none}pn-checkbox>input:disabled+.pn-checkbox .pn-checkbox-label{pointer-events:none}pn-checkbox>input:disabled+.pn-checkbox>.pn-checkbox-outer{background-color:#f3f2f2;border-color:#969087}pn-checkbox>input:disabled+.pn-checkbox[data-tile]{background-color:#f3f2f2;border-color:#f3f2f2}pn-checkbox>input:disabled+.pn-checkbox[data-tile]>pn-icon>.pn-icon-svg path{fill:#5e554a}pn-checkbox>input:disabled+.pn-checkbox[data-tile]>.pn-checkbox-content>.pn-checkbox-label{color:#5e554a}pn-checkbox>input:disabled:checked+.pn-checkbox>.pn-checkbox-outer{background-color:#969087;border-color:#969087}pn-checkbox>input:disabled:indeterminate+.pn-checkbox>.pn-checkbox-outer{background-color:#969087;border-color:#969087}";
+const pnCheckboxCss = () => `${transformTag("pn-checkbox")}{position:relative;display:inline-block}${transformTag("pn-checkbox")} .pn-checkbox{position:relative;display:flex;flex-wrap:wrap;flex-direction:row}${transformTag("pn-checkbox")} .pn-checkbox-label{cursor:pointer;color:#2d2013;-webkit-tap-highlight-color:transparent}${transformTag("pn-checkbox")} .pn-checkbox-helpertext{color:#5e554a;margin:0 0 0.5em 0}${transformTag("pn-checkbox")} .pn-checkbox-helpertext:last-child{margin:0}${transformTag("pn-checkbox")} .pn-checkbox-content{display:flex;flex-direction:column;align-items:flex-start;font-weight:400;line-height:1.5;flex:1;margin:0 0 0 0.75em}${transformTag("pn-checkbox")} .pn-checkbox-outer{width:1.5em;height:1.5em;background-color:#ffffff;display:flex;align-items:center;justify-content:center;position:relative;border:0.0625em solid #969087;border-radius:0.25em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, border-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-checkbox")} .pn-checkbox-outer{transition-duration:0s;transition-delay:0s}}${transformTag("pn-checkbox")} .pn-checkbox-svg{width:1.25em;fill:none}${transformTag("pn-checkbox")} .pn-checkbox-svg-line{stroke:#ffffff;transform-origin:0 0;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition-property:stroke-dashoffset;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-checkbox")} .pn-checkbox-svg-line{transition-duration:0s;transition-delay:0s}}${transformTag("pn-checkbox")} .pn-checkbox-svg-line{transition-delay:0s}${transformTag("pn-checkbox")} .pn-checkbox[data-tile]{position:relative;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:1em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, background-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-checkbox")} .pn-checkbox[data-tile]{transition-duration:0s;transition-delay:0s}}${transformTag("pn-checkbox")} .pn-checkbox[data-tile][data-invalid]{border-color:#a70707}${transformTag("pn-checkbox")} .pn-checkbox[data-invalid] .pn-checkbox-outer{border-color:#a70707}${transformTag("pn-checkbox")} .pn-checkbox-container{flex:1 1 100%;overflow:hidden;visibility:hidden}${transformTag("pn-checkbox")} .pn-checkbox-container[data-open]{visibility:visible;overflow:unset}${transformTag("pn-checkbox")} .pn-checkbox-container[data-moving]{visibility:visible;overflow:hidden}${transformTag("pn-checkbox")} .pn-checkbox-area{padding:0.75em 0 0 2.25em;display:flex;flex-direction:column;flex-wrap:nowrap;gap:1em}${transformTag("pn-checkbox")} .pn-checkbox>${transformTag("pn-icon")}{margin-left:0.75em}${transformTag("pn-checkbox")}>input{cursor:pointer;opacity:0;position:absolute;margin:0;z-index:1;top:0;left:0;font-size:1em;width:1.5em;height:1.5em;-webkit-tap-highlight-color:transparent}${transformTag("pn-checkbox")}>input[data-tile]:not([data-expand]){width:100%;height:100%}${transformTag("pn-checkbox")}>input[data-expand]{top:1em;left:1em}${transformTag("pn-checkbox")}>input[aria-describedby]+.pn-checkbox[data-tile] .pn-checkbox-label{font-weight:500}${transformTag("pn-checkbox")}>input:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#e0f8ff;border-color:#005d92}${transformTag("pn-checkbox")}>input:hover+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}${transformTag("pn-checkbox")}>input:hover+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}${transformTag("pn-checkbox")}>input:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#fdefee;border-color:#a70707}${transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox>.pn-checkbox-outer{outline-color:#005d92}${transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile]{outline-color:#005d92;border-color:#005d92}${transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}${transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile][data-invalid]>.pn-checkbox-outer{outline-color:transparent}${transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile]>.pn-checkbox-outer{outline-color:transparent}${transformTag("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-invalid]>.pn-checkbox-outer{outline-color:#a70707}${transformTag("pn-checkbox")}>input:checked+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}${transformTag("pn-checkbox")}>input:checked+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-indeterminate{stroke-dashoffset:23}${transformTag("pn-checkbox")}>input:checked+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-checkmark{transition-delay:0.2s;stroke-dashoffset:0}${transformTag("pn-checkbox")}>input:checked+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}${transformTag("pn-checkbox")}>input:checked+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}${transformTag("pn-checkbox")}>input:checked+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}${transformTag("pn-checkbox")}>input:checked:hover+.pn-checkbox[data-tile]{border-color:#0d234b}${transformTag("pn-checkbox")}>input:checked:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}${transformTag("pn-checkbox")}>input:checked:hover+.pn-checkbox[data-invalid]{border-color:#500715}${transformTag("pn-checkbox")}>input:checked:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}${transformTag("pn-checkbox")}>input:indeterminate+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}${transformTag("pn-checkbox")}>input:indeterminate+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-checkmark{stroke-dashoffset:23}${transformTag("pn-checkbox")}>input:indeterminate+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-indeterminate{stroke-dashoffset:0}${transformTag("pn-checkbox")}>input:indeterminate+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}${transformTag("pn-checkbox")}>input:indeterminate:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}${transformTag("pn-checkbox")}>input:indeterminate:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}${transformTag("pn-checkbox")}>input:disabled{pointer-events:none}${transformTag("pn-checkbox")}>input:disabled+.pn-checkbox .pn-checkbox-label{pointer-events:none}${transformTag("pn-checkbox")}>input:disabled+.pn-checkbox>.pn-checkbox-outer{background-color:#f3f2f2;border-color:#969087}${transformTag("pn-checkbox")}>input:disabled+.pn-checkbox[data-tile]{background-color:#f3f2f2;border-color:#f3f2f2}${transformTag("pn-checkbox")}>input:disabled+.pn-checkbox[data-tile]>${transformTag("pn-icon")}>.pn-icon-svg path{fill:#5e554a}${transformTag("pn-checkbox")}>input:disabled+.pn-checkbox[data-tile]>.pn-checkbox-content>.pn-checkbox-label{color:#5e554a}${transformTag("pn-checkbox")}>input:disabled:checked+.pn-checkbox>.pn-checkbox-outer{background-color:#969087;border-color:#969087}${transformTag("pn-checkbox")}>input:disabled:indeterminate+.pn-checkbox>.pn-checkbox-outer{background-color:#969087;border-color:#969087}`;
 const PnCheckbox = class extends Mixin(animateHeightFactory) {
     constructor(hostRef) {
@@ -106,11 +106,14 @@ const PnCheckbox = class extends Mixin(animateHeightFactory) {
         return (h(Host, { key: '52273e4f6d71183fa2360c147c5d2ed6fbb3d31a' }, h("input", { key: 'fba94a81a38009f36d938751c6362ed7340d68d7', type: "checkbox", id: this.checkboxid, class: "pn-checkbox-input", value: this.value, name: this.name, disabled: this.disabled, checked: this.checked, required: this.required, indeterminate: this.indeterminate, "aria-invalid": this.isInvalid()?.toString(), "aria-describedby": this.helpertext && this.idHelpertext, "data-tile": this.tile, "data-expand": this.expand, onChange: e => this.handleChange(e) }), h("div", { key: '850ecfd3abddccfe8b0ada1d0272dfa3155a669f', class: "pn-checkbox", "data-tile": this.tile, "data-expand": this.expand, "data-invalid": this.isInvalid() }, h("div", { key: '728efcdb0cd59f1af39839dd9fd1accc66f2da00', class: "pn-checkbox-outer" }, h("svg", { key: '55d82cc64b735706a57d301e9c8f64edc4aeebe9', class: "pn-checkbox-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: '02a30f7a2cbf5d502be29ff14945f22e89ca19c5', class: "pn-checkbox-svg-line pn-checkbox-svg-checkmark", points: "4,12 9,17 20,6", "stroke-width": "3" }), h("polyline", { key: '9c01a39dec7dc5d3961bffd07badf694ebdbadc1', class: "pn-checkbox-svg-line pn-checkbox-svg-indeterminate", points: "4,12 20,12", "stroke-width": "3" }))), h("p", { key: '0b63e31f00d2dea465e9e36b3cceb56bf0a4ad48', class: "pn-checkbox-content", hidden: !this.displayText() }, h("label", { key: '9aeebad0076718474224594b5c17cd5e3c3590dc', htmlFor: this.checkboxid, class: "pn-checkbox-label", hidden: !this.displayLabel() }, this.label), h("span", { key: '1d99d825512267e4560b817f8853319b10b05d08', id: this.idHelpertext, class: "pn-checkbox-helpertext", hidden: !this.displayHelpertext() }, this.helpertext, h("slot", { key: '981da5a8b25f6e780a5c0a1f9e32ee7aa11fef11', name: "helpertext" })), h("slot", { key: '192f09f50bd3592c41e8836c70dc264edfc3e332' })), this.displayIcon() && h("pn-icon", { key: '4ab2aaf2819ca83f08233cac99922e5234837408', icon: this.icon, color: "gray900" }), h("div", { key: '6247821b031e2d57a216612b166db6622aaa2225', class: "pn-checkbox-container", "data-open": this.checked, hidden: !this.displayContent(), style: { height: '0px' }, ref: el => (this.contentArea = el) }, h("div", { key: 'd35445d61a6e9a7faca6ca349f56b36097a077d2', class: "pn-checkbox-area" }, h("slot", { key: '7cbcc9648ae405d6aa8729f2071c3b03a914a027', name: "content" }))))));
     }
     static get watchers() { return {
-        "checkboxid": ["handleId"],
-        "checked": ["handleChecked"]
+        "checkboxid": [{
+                "handleId": 0
+            }],
+        "checked": [{
+                "handleChecked": 0
+            }]
     }; }
 };
-PnCheckbox.style = pnCheckboxCss;
+PnCheckbox.style = pnCheckboxCss();
 export { PnCheckbox as pn_checkbox };
-//# sourceMappingURL=pn-checkbox.entry.js.map

package/umd/modules/@postnord/web-components/esm/pn-choice-chip.entry.js CHANGED Viewed

@@ -2,11 +2,11 @@
  * Built with Stencil
  * By PostNord.
  */
-import { r as registerInstance, g as getElement, h, a as Host } from './index-BNA0ko5y.js';
+import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-CAEP792y.js';
 import { uuidv4 } from './index.js';
 import { c as check } from './check-BpI8peGn.js';
-const pnChoiceChipCss = "pn-choice-chip{display:inline-block}pn-choice-chip .pn-choice-chip{position:relative;font-size:1em;font-weight:500;text-align:center}pn-choice-chip .pn-choice-chip-container{cursor:pointer;position:relative;display:flex;align-items:center;gap:0;padding:0.5em 1em;border:0.0625em solid #969087;border-radius:0.5em;background-color:#ffffff;transition-property:border-color, outline-color, background-color, padding, gap;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-choice-chip .pn-choice-chip-container{transition-duration:0s;transition-delay:0s}}pn-choice-chip .pn-choice-chip-container{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-choice-chip .pn-choice-chip-container[data-icon]{gap:0.25em;padding-left:0.75em}pn-choice-chip .pn-choice-chip-container[data-icon][data-small]{padding-left:0.5em}pn-choice-chip .pn-choice-chip-container[data-icon][data-large]{padding-left:1em}pn-choice-chip .pn-choice-chip-container[data-icon]>.pn-choice-chip-icon{width:1.5em}pn-choice-chip .pn-choice-chip-container[data-small]{padding:0.25em 0.75em}pn-choice-chip .pn-choice-chip-container[data-small] .pn-choice-chip-label{line-height:1.25em}pn-choice-chip .pn-choice-chip-container[data-small] .pn-choice-chip-label>span{font-size:0.875em}pn-choice-chip .pn-choice-chip-container[data-large]{padding:0.625em 1.25em}pn-choice-chip .pn-choice-chip-icon{position:relative;width:0;height:1.5em;transition-property:width;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-choice-chip .pn-choice-chip-icon{transition-duration:0s;transition-delay:0s}}pn-choice-chip .pn-choice-chip-icon pn-icon{opacity:0;transform:scale(0);position:absolute;top:0;left:0;transition-property:transform, opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-choice-chip .pn-choice-chip-icon pn-icon{transition-duration:0s;transition-delay:0s}}pn-choice-chip .pn-choice-chip-icon pn-icon.pn-choice-chip-icon-user{opacity:1;transform:scale(1)}pn-choice-chip .pn-choice-chip-label{color:#005d92;line-height:1.5em;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-choice-chip .pn-choice-chip-label{transition-duration:0s;transition-delay:0s}}pn-choice-chip .pn-choice-chip-label{cursor:pointer;display:flex;align-items:center;flex-grow:1;height:100%}pn-choice-chip .pn-choice-chip>input{position:absolute;z-index:1;opacity:0;top:0;left:0;width:100%;height:100%;margin:0;cursor:pointer}pn-choice-chip .pn-choice-chip>input:not(:checked)~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-user{transform:scale(1);opacity:1}pn-choice-chip .pn-choice-chip>input:hover~.pn-choice-chip-container{background-color:#effbff;border-color:#005d92}pn-choice-chip .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-icon-user .pn-icon-svg path,pn-choice-chip .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-icon-check .pn-icon-svg path{fill:#005d92}pn-choice-chip .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-label{color:#005d92}pn-choice-chip .pn-choice-chip>input:checked~.pn-choice-chip-container{gap:0.25em;background-color:#e0f8ff;border-color:#005d92}pn-choice-chip .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon{width:1.5em;stroke-dashoffset:23}pn-choice-chip .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-check{transform:scale(1);opacity:1}pn-choice-chip .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-user{transform:scale(0);opacity:0}pn-choice-chip .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-label{color:#0d234b}pn-choice-chip .pn-choice-chip>input:checked:hover~.pn-choice-chip-container{background-color:#effbff;border-color:#0d234b}pn-choice-chip .pn-choice-chip>input:checked:hover~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-check path{fill:#0d234b}pn-choice-chip .pn-choice-chip>input:checked:hover~.pn-choice-chip-container>.pn-choice-chip-label{color:#0d234b}pn-choice-chip .pn-choice-chip>input:focus-visible~.pn-choice-chip-container{outline-color:#005d92;border-color:#005d92}pn-choice-chip .pn-choice-chip>input:disabled{cursor:not-allowed}pn-choice-chip .pn-choice-chip>input:disabled:active~.pn-choice-chip-container{outline:none}pn-choice-chip .pn-choice-chip>input:disabled~.pn-choice-chip-container{background-color:#f3f2f2;border-color:#f3f2f2;cursor:not-allowed}pn-choice-chip .pn-choice-chip>input:disabled~.pn-choice-chip-container .pn-choice-chip-label{color:#5e554a;cursor:not-allowed}pn-choice-chip .pn-choice-chip>input:disabled~.pn-choice-chip-container pn-icon .pn-icon-svg path{fill:#5e554a}";
+const pnChoiceChipCss = () => `${transformTag("pn-choice-chip")}{display:inline-block}${transformTag("pn-choice-chip")} .pn-choice-chip{position:relative;font-size:1em;font-weight:500;text-align:center}${transformTag("pn-choice-chip")} .pn-choice-chip-container{cursor:pointer;position:relative;display:flex;align-items:center;gap:0;padding:0.5em 1em;border:0.0625em solid #969087;border-radius:0.5em;background-color:#ffffff;transition-property:border-color, outline-color, background-color, padding, gap;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-choice-chip")} .pn-choice-chip-container{transition-duration:0s;transition-delay:0s}}${transformTag("pn-choice-chip")} .pn-choice-chip-container{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-icon]{gap:0.25em;padding-left:0.75em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-icon][data-small]{padding-left:0.5em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-icon][data-large]{padding-left:1em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-icon]>.pn-choice-chip-icon{width:1.5em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-small]{padding:0.25em 0.75em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-small] .pn-choice-chip-label{line-height:1.25em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-small] .pn-choice-chip-label>span{font-size:0.875em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-large]{padding:0.625em 1.25em}${transformTag("pn-choice-chip")} .pn-choice-chip-icon{position:relative;width:0;height:1.5em;transition-property:width;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-choice-chip")} .pn-choice-chip-icon{transition-duration:0s;transition-delay:0s}}${transformTag("pn-choice-chip")} .pn-choice-chip-icon ${transformTag("pn-icon")}{opacity:0;transform:scale(0);position:absolute;top:0;left:0;transition-property:transform, opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-choice-chip")} .pn-choice-chip-icon ${transformTag("pn-icon")}{transition-duration:0s;transition-delay:0s}}${transformTag("pn-choice-chip")} .pn-choice-chip-icon ${transformTag("pn-icon")}.pn-choice-chip-icon-user{opacity:1;transform:scale(1)}${transformTag("pn-choice-chip")} .pn-choice-chip-label{color:#005d92;line-height:1.5em;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-choice-chip")} .pn-choice-chip-label{transition-duration:0s;transition-delay:0s}}${transformTag("pn-choice-chip")} .pn-choice-chip-label{cursor:pointer;display:flex;align-items:center;flex-grow:1;height:100%}${transformTag("pn-choice-chip")} .pn-choice-chip>input{position:absolute;z-index:1;opacity:0;top:0;left:0;width:100%;height:100%;margin:0;cursor:pointer}${transformTag("pn-choice-chip")} .pn-choice-chip>input:not(:checked)~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-user{transform:scale(1);opacity:1}${transformTag("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container{background-color:#effbff;border-color:#005d92}${transformTag("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-icon-user .pn-icon-svg path,${transformTag("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-icon-check .pn-icon-svg path{fill:#005d92}${transformTag("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-label{color:#005d92}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container{gap:0.25em;background-color:#e0f8ff;border-color:#005d92}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon{width:1.5em;stroke-dashoffset:23}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-check{transform:scale(1);opacity:1}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-user{transform:scale(0);opacity:0}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-label{color:#0d234b}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked:hover~.pn-choice-chip-container{background-color:#effbff;border-color:#0d234b}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked:hover~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-check path{fill:#0d234b}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked:hover~.pn-choice-chip-container>.pn-choice-chip-label{color:#0d234b}${transformTag("pn-choice-chip")} .pn-choice-chip>input:focus-visible~.pn-choice-chip-container{outline-color:#005d92;border-color:#005d92}${transformTag("pn-choice-chip")} .pn-choice-chip>input:disabled{cursor:not-allowed}${transformTag("pn-choice-chip")} .pn-choice-chip>input:disabled:active~.pn-choice-chip-container{outline:none}${transformTag("pn-choice-chip")} .pn-choice-chip>input:disabled~.pn-choice-chip-container{background-color:#f3f2f2;border-color:#f3f2f2;cursor:not-allowed}${transformTag("pn-choice-chip")} .pn-choice-chip>input:disabled~.pn-choice-chip-container .pn-choice-chip-label{color:#5e554a;cursor:not-allowed}${transformTag("pn-choice-chip")} .pn-choice-chip>input:disabled~.pn-choice-chip-container ${transformTag("pn-icon")} .pn-icon-svg path{fill:#5e554a}`;
 const PnChoiceChip = class {
     constructor(hostRef) {
@@ -40,7 +40,6 @@ const PnChoiceChip = class {
         return (h(Host, { key: '8d5686163aba07794c4700e91a9d378200aa2bf9' }, h("div", { key: '233605ae9b531853d9f941f99cc0cf6fcce21bba', class: "pn-choice-chip" }, h("input", { key: 'aacdd59b76f20029234722e49ab5b2aa27198206', type: this.radio ? 'radio' : 'checkbox', id: this.choiceid, value: this.value, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled }), h("div", { key: '69a287ffabea602b28360dc5a15d979dcb3d6526', class: "pn-choice-chip-container", "data-icon": !!this.icon, "data-small": this.small, "data-large": this.large }, h("div", { key: 'c2d89b6817b623264e903aed26947d8a422a1ee2', class: "pn-choice-chip-icon" }, h("pn-icon", { key: 'd405b85cec9b30f85a5949862dec48cdacc618de', color: "blue700", class: "pn-choice-chip-icon-check", icon: check }), !!this.icon && h("pn-icon", { key: '4a23075f0cfb6c6f3e7fbf49c5de06137c1bc961', color: "blue700", class: "pn-choice-chip-icon-user", icon: this.icon })), h("label", { key: 'af080ab55ce96b7d0bc3e0c168130bd772302d52', class: "pn-choice-chip-label", htmlFor: this.choiceid }, h("span", { key: '2ed2b62f84c1e2c85ace67151bd1997bcc762027' }, this.label), h("slot", { key: '3512fdee318749598e66d096ec56a66e3daa564a' }))))));
     }
 };
-PnChoiceChip.style = pnChoiceChipCss;
+PnChoiceChip.style = pnChoiceChipCss();
 export { PnChoiceChip as pn_choice_chip };
-//# sourceMappingURL=pn-choice-chip.entry.js.map

package/umd/modules/@postnord/web-components/esm/pn-counter.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-BNA0ko5y.js';
+import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-CAEP792y.js';
 import { uuidv4, awaitTopbar, en } from './index.js';
 const icon$1 = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2 12a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1" clip-rule="evenodd"/></svg>';
@@ -42,7 +42,7 @@ const translations = {
     },
 };
-const pnCounterCss = "pn-counter{display:inline-block}pn-counter .pn-counter{display:inline-flex;flex-direction:column}pn-counter .pn-counter-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property: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-label{transition-duration:0s;transition-delay:0s}}pn-counter .pn-counter-label>span{font-size:0.875em}pn-counter .pn-counter-input{--pn-counter-ch:0ch;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-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{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}pn-counter .pn-counter-input{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-counter .pn-counter-input:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}pn-counter .pn-counter-input{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{transition-duration:0s;transition-delay:0s}}pn-counter .pn-counter-input::placeholder{color:#5e554a;font-weight:normal}pn-counter .pn-counter-input:hover{border-color:#005d92}pn-counter .pn-counter-input: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{border-color:#ffffff}pn-counter .pn-counter-input: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{-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;gap:0.5em;transition-property:gap;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-counter .pn-counter-items{transition-duration:0s;transition-delay:0s}}pn-counter .pn-counter-items[data-hidebuttons]{gap:0}pn-counter .pn-counter-items[data-hidebuttons]>pn-button{transform:scale(0) translateZ(0);width:0}pn-counter .pn-counter-items>pn-button{transform:scale(1) translateZ(0);transform-origin:center center;width:3em;transition-property:transform, width;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-counter .pn-counter-items>pn-button{transition-duration:0s;transition-delay:0s}}pn-counter .pn-counter-helpertext{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}pn-counter .pn-counter-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}";
+const pnCounterCss = () => `${transformTag("pn-counter")}{display:inline-block}${transformTag("pn-counter")} .pn-counter{display:flex;flex-direction:column}${transformTag("pn-counter")} .pn-counter-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-counter")} .pn-counter-label{transition-duration:0s;transition-delay:0s}}${transformTag("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}${transformTag("pn-counter")} .pn-counter-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${transformTag("pn-counter")} .pn-counter-label>span{font-size:0.875em}${transformTag("pn-counter")} .pn-counter-input{position:relative;flex:1 1 auto}${transformTag("pn-counter")} .pn-counter-element{text-align:center;width:100%;appearance:textfield;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${transformTag("pn-counter")} .pn-counter-element:-webkit-autofill,${transformTag("pn-counter")} .pn-counter-element:-webkit-autofill:hover,${transformTag("pn-counter")} .pn-counter-element:-webkit-autofill:focus,${transformTag("pn-counter")} .pn-counter-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${transformTag("pn-counter")} .pn-counter-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-counter")} .pn-counter-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${transformTag("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){${transformTag("pn-counter")} .pn-counter-element{transition-duration:0s;transition-delay:0s}}${transformTag("pn-counter")} .pn-counter-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${transformTag("pn-counter")} .pn-counter-element[data-compact]::placeholder{color:transparent}${transformTag("pn-counter")} .pn-counter-element[data-compact]:focus+.pn-counter-label,${transformTag("pn-counter")} .pn-counter-element[data-compact]:not(:placeholder-shown)+.pn-counter-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${transformTag("pn-counter")} .pn-counter-element::placeholder{color:#5e554a;font-weight:normal}${transformTag("pn-counter")} .pn-counter-element:hover{border-color:#005d92}${transformTag("pn-counter")} .pn-counter-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${transformTag("pn-counter")} .pn-counter-element:read-only{border-color:#ffffff}${transformTag("pn-counter")} .pn-counter-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${transformTag("pn-counter")} .pn-counter-element:out-of-range{border-color:#a70707}${transformTag("pn-counter")} .pn-counter-element:out-of-range:hover{border-color:#500715}${transformTag("pn-counter")} .pn-counter-element:out-of-range:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${transformTag("pn-counter")} .pn-counter-element:out-of-range:-webkit-autofill,${transformTag("pn-counter")} .pn-counter-element:out-of-range:-webkit-autofill:hover,${transformTag("pn-counter")} .pn-counter-element:out-of-range:-webkit-autofill:focus,${transformTag("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}${transformTag("pn-counter")} .pn-counter-element::-webkit-inner-spin-button,${transformTag("pn-counter")} .pn-counter-element::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}${transformTag("pn-counter")} .pn-counter-items{display:inline-flex;flex-direction:row;gap:0.5em;transition-property:gap;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-counter")} .pn-counter-items{transition-duration:0s;transition-delay:0s}}${transformTag("pn-counter")} .pn-counter-items[data-hidebuttons]{gap:0}${transformTag("pn-counter")} .pn-counter-items[data-hidebuttons]>${transformTag("pn-button")}{transform:scale(0) translateZ(0);width:0}${transformTag("pn-counter")} .pn-counter-items>${transformTag("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)}@media (prefers-reduced-motion: reduce){${transformTag("pn-counter")} .pn-counter-items>${transformTag("pn-button")}{transition-duration:0s;transition-delay:0s}}${transformTag("pn-counter")} .pn-counter-helpertext{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${transformTag("pn-counter")} .pn-counter-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}`;
 const PnCounter = class {
     constructor(hostRef) {
@@ -53,7 +53,6 @@ const PnCounter = class {
     idLabel = `${this.id}-label`;
     idText = `${this.id}-text`;
     idAmount = `${this.id}-count`;
-    counterElement;
     get hostElement() { return getElement(this); }
     clearAriaTimer;
     displaySrValue = false;
@@ -69,6 +68,8 @@ const PnCounter = class {
     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 */
@@ -122,7 +123,6 @@ const PnCounter = class {
                 increase: this.interactType === 'increase',
             });
         this.lastDispatchedValue = this.value;
-        this.handleInputLength();
     }
     handleId() {
         this.idLabel = `${this.counterid}-label`;
@@ -135,10 +135,6 @@ const PnCounter = class {
             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))
@@ -219,22 +215,27 @@ const PnCounter = class {
     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 watchers() { return {
-        "value": ["watchValue"],
-        "counterid": ["handleId"]
+        "value": [{
+                "watchValue": 0
+            }],
+        "counterid": [{
+                "handleId": 0
+            }]
     }; }
 };
-PnCounter.style = pnCounterCss;
+PnCounter.style = pnCounterCss();
 export { PnCounter as pn_counter };
-//# sourceMappingURL=pn-counter.entry.js.map

package/umd/modules/@postnord/web-components/esm/pn-date-picker.entry.js CHANGED Viewed

@@ -2,9 +2,9 @@
  * Built with Stencil
  * By PostNord.
  */
-import { M as Mixin, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-BNA0ko5y.js';
+import { t as transformTag, M as Mixin, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-CAEP792y.js';
 import { uuidv4, getTotalHeightOffset, getMenuWidth, awaitTopbar, en as en$2 } from './index.js';
-import { a as animateHeightFactory } from './index-CJTbRJfo.js';
+import { a as animateHeightFactory } from './index-CosyroON.js';
 import { a as arrow_left } from './arrow_left-CQaMdITw.js';
 import { a as arrow_right } from './arrow_right-D_UyW-KH.js';
@@ -514,7 +514,7 @@ function getCode(code) {
     };
 }
-const pnDatePickerCss = "/* Global utility variables */\n/* Input styles */\n/* Transition variables */\npn-date-picker {\n  position: relative;\n  display: block;\n}\n\npn-date-picker .pn-date-picker {\n  width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25em;\n  container-type: inline-size;\n}\n@container (max-width: 24em) {\n  pn-date-picker .pn-date-picker .pn-date-picker-container {\n    flex: 1 1 20em;\n  }\n  pn-date-picker .pn-date-picker .pn-date-picker-range-icon {\n    display: none;\n  }\n}\npn-date-picker .pn-date-picker-container {\n  display: block;\n  flex: 1 1 11em;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-label {\n  color: #a70707;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input {\n  border-color: #a70707;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input:hover {\n  border-color: #500715;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input:focus-visible {\n  background-color: #ffffff;\n  border-color: #a70707;\n  outline-color: #a70707;\n}\npn-date-picker .pn-date-picker-label {\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n  font-weight: 400;\n  color: #2d2013;\n  margin: 0 0 0.25em 0;\n  gap: 0.5em;\n  -webkit-tap-highlight-color: transparent;\n  transition-property: color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-label {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-label > span {\n  font-size: 0.875em;\n}\npn-date-picker .pn-date-picker-field {\n  position: relative;\n  display: flex;\n}\npn-date-picker .pn-date-picker-input {\n  color: #2d2013;\n  background-color: #ffffff;\n  border: 0.0625em solid #969087;\n  border-radius: 0.5em;\n  padding: 0.75em;\n  font-family: inherit;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.5em;\n  -webkit-font-smoothing: antialiased;\n  -webkit-tap-highlight-color: transparent;\n}\npn-date-picker .pn-date-picker-input:-webkit-autofill, pn-date-picker .pn-date-picker-input:-webkit-autofill:hover, pn-date-picker .pn-date-picker-input:-webkit-autofill:focus, pn-date-picker .pn-date-picker-input:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 10em #e0f8ff inset;\n  -webkit-text-fill-color: #2d2013;\n}\npn-date-picker .pn-date-picker-input {\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n}\npn-date-picker .pn-date-picker-input:focus-visible {\n  outline-color: #005d92;\n  background-color: #ffffff;\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-input {\n  transition-property: outline-color, background-color, border-color, color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-input {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-input::placeholder {\n  color: #5e554a;\n  font-weight: normal;\n}\npn-date-picker .pn-date-picker-input:hover {\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-input:disabled {\n  color: #5e554a;\n  background-color: #f3f2f2;\n  border-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-input {\n  padding-right: 3em;\n  flex: auto;\n  width: 100%;\n}\npn-date-picker .pn-date-picker-input::-webkit-calendar-picker-indicator {\n  visibility: hidden;\n  inline-size: 0;\n}\npn-date-picker .pn-date-picker-input::-webkit-textfield-decoration-container, pn-date-picker .pn-date-picker-input::-webkit-search-cancel-button, pn-date-picker .pn-date-picker-input::-webkit-inner-spin-button, pn-date-picker .pn-date-picker-input::-webkit-outer-spin-button, pn-date-picker .pn-date-picker-input::-webkit-search-decoration {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\npn-date-picker .pn-date-picker-input[data-active] {\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-input:read-only {\n  border-color: #ffffff;\n}\npn-date-picker .pn-date-picker-range-icon {\n  width: 1.5em;\n  margin-bottom: 0.8125em;\n  align-self: end;\n}\npn-date-picker .pn-date-picker-helpertext, pn-date-picker .pn-date-picker-error {\n  color: #5e554a;\n  font-size: 0.875em;\n  font-weight: 400;\n  margin: 0.25em 0 0 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25em;\n  text-align: left;\n}\npn-date-picker .pn-date-picker-helpertext[hidden], pn-date-picker .pn-date-picker-error[hidden] {\n  display: none;\n}\npn-date-picker .pn-date-picker-error {\n  color: #a70707;\n}\npn-date-picker .pn-date-picker-toggle {\n  position: absolute;\n  top: 0.5em;\n  right: 0.5em;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-button {\n  cursor: pointer;\n  font-size: 1em;\n  background-color: transparent;\n  border: 0.0625em solid #969087;\n  border-color: transparent;\n  padding: 0.25em;\n  margin: 0;\n  flex: auto;\n  border-radius: 3em;\n}\npn-date-picker .pn-date-picker-button:first-child, pn-date-picker .pn-date-picker-button:last-child {\n  flex: 0 0 auto;\n}\npn-date-picker .pn-date-picker-button {\n  transition-property: outline-color, background-color, border-color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-button {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-button {\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n}\npn-date-picker .pn-date-picker-button:focus {\n  background-color: #ffffff;\n  outline-color: #005d92;\n}\npn-date-picker .pn-date-picker-button:hover {\n  background-color: #e0f8ff;\n}\npn-date-picker .pn-date-picker-button[data-active], pn-date-picker .pn-date-picker-button[data-range] {\n  background-color: #e0f8ff;\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-button:disabled {\n  cursor: not-allowed;\n}\npn-date-picker .pn-date-picker-button:disabled:hover {\n  background-color: transparent;\n}\npn-date-picker .pn-date-picker-month {\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-month[data-full] {\n  display: none;\n}\n@media (min-width: 25em) {\n  pn-date-picker .pn-date-picker-month[data-full] {\n    display: inline;\n  }\n}\npn-date-picker .pn-date-picker-month[data-abbr] {\n  display: inline;\n}\n@media (min-width: 25em) {\n  pn-date-picker .pn-date-picker-month[data-abbr] {\n    display: none;\n  }\n}\npn-date-picker .pn-date-picker-sr-only {\n  position: absolute;\n  height: 1px;\n  width: 1px;\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  margin: -1px;\n  white-space: nowrap;\n}\npn-date-picker .pn-date-picker {\n  /** The calendar dropdown */\n}\npn-date-picker .pn-date-picker-calendar {\n  position: absolute;\n  z-index: 4;\n  top: calc(100% + 0.5em);\n  left: var(--pn-calendar-offset-left);\n  width: clamp(100%, 95vw, 20em);\n  max-width: 20em;\n  text-align: center;\n  border-radius: 0.5em;\n  background-color: #ffffff;\n  overflow: hidden;\n  visibility: hidden;\n  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);\n}\npn-date-picker .pn-date-picker-calendar[data-range] {\n  max-width: unset;\n}\npn-date-picker .pn-date-picker-calendar[data-open], pn-date-picker .pn-date-picker-calendar[data-moving] {\n  visibility: visible;\n}\npn-date-picker .pn-date-picker-calendar[data-direction=top] {\n  top: unset;\n  bottom: calc(100% + 0.5em);\n  transform-origin: bottom left;\n}\npn-date-picker .pn-date-picker-calendar pn-button[hidden] {\n  display: none;\n}\npn-date-picker .pn-date-picker-calendar pn-button span {\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-wrapper {\n  padding: 0.5em;\n}\npn-date-picker .pn-date-picker-title {\n  margin: 0.5em auto 0;\n  font-size: 0.875em;\n  font-weight: 500;\n  color: #2d2013;\n}\npn-date-picker .pn-date-picker-nav {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-bottom: 1em;\n}\npn-date-picker .pn-date-picker-table {\n  width: 100%;\n  table-layout: fixed;\n  border-spacing: 0;\n  border: 0;\n  margin: 0 0 0.5em;\n}\npn-date-picker .pn-date-picker-th {\n  font-size: 0.75em;\n  font-weight: 500;\n  color: #5e554a;\n  padding: 0.25em;\n  border: 0;\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-td {\n  cursor: pointer;\n  position: relative;\n  padding: 0.25em;\n  outline: 0;\n  border: 0;\n  line-height: 0;\n  width: 2em;\n  height: 2em;\n  -webkit-tap-highlight-color: transparent;\n}\npn-date-picker .pn-date-picker-td-text {\n  position: relative;\n  display: block;\n  line-height: 1.5em;\n  border-radius: 0.5em;\n  color: #2d2013;\n  padding: 0.25em;\n  transition-property: color, background-color, outline-color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-td-text {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-td-text {\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n}\npn-date-picker .pn-date-picker-td[data-blank] {\n  cursor: auto;\n}\npn-date-picker .pn-date-picker-td[data-blank] .pn-date-picker-td-text {\n  background-color: transparent;\n}\npn-date-picker .pn-date-picker-td-week {\n  font-size: 0.75em;\n  color: #5e554a;\n  display: block;\n}\npn-date-picker .pn-date-picker-td:before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0.25em;\n  height: calc(100% - 0.5em);\n  width: 100%;\n  background-color: transparent;\n  border: 0.0625em solid transparent;\n  border-radius: 0.5em;\n  transition-property: border-color, background-color, width, transform, left;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-td:before {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true] {\n  cursor: not-allowed;\n  pointer-events: none;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true] > .pn-date-picker-td-text {\n  color: #5e554a;\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true]:focus > .pn-date-picker-td-text {\n  outline-color: #a70707;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true]:hover > .pn-date-picker-td-text, pn-date-picker .pn-date-picker-td[aria-disabled=true]:focus > .pn-date-picker-td-text {\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true] .pn-date-picker-td-text {\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true]:before {\n  border-color: #005d92;\n  background-color: #effbff;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-single]:before {\n  width: 2em;\n  left: 50%;\n  transform: translateX(-50%);\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range]:before {\n  border-radius: 0;\n  border-left-width: 0;\n  border-right-width: 0;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range-from]:before {\n  border-radius: 0.5em 0 0 0.5em;\n  border-right-width: 0;\n  border-left-width: 0.0625em;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range-to]:before {\n  border-radius: 0 0.5em 0.5em 0;\n  border-right-width: 0.0625em;\n  border-left-width: 0;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true]:before {\n  border-color: #a70707;\n  background-color: #fdefee;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true] > .pn-date-picker-td-text {\n  background-color: unset;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true]:focus > .pn-date-picker-td-text {\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-selected=false]:hover > .pn-date-picker-td-text {\n  background-color: #e0f8ff;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text {\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0.25em;\n  left: calc(50% - 0.125em);\n  height: 0.25em;\n  width: 0.25em;\n  background-color: #005d92;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text:after {\n  bottom: 0.15em;\n}\npn-date-picker .pn-date-picker-td[data-active][data-today] > .pn-date-picker-td-text:after {\n  background-color: #005d92;\n}\npn-date-picker .pn-date-picker-td:focus-visible > .pn-date-picker-td-text {\n  outline-color: #005d92;\n}\npn-date-picker .pn-date-picker {\n  /* Month list */\n}\npn-date-picker .pn-date-picker-list {\n  margin: 0 0 1em;\n  padding: 0;\n  list-style: none;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-gap: 0.5em;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button {\n  display: block;\n  width: 100%;\n  border-radius: 0.5em;\n  padding: 0.5em 0.25em;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button[data-today] {\n  position: relative;\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button[data-today]::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0.25em;\n  left: calc(50% - 0.125em);\n  height: 0.25em;\n  width: 0.25em;\n  background-color: #005d92;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-chips > [slot=chips] {\n  display: flex;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  gap: 0.5em;\n  margin-bottom: 0.5em;\n}\npn-date-picker .pn-date-picker-chips > [slot=chips]:empty {\n  display: none;\n}\npn-date-picker .pn-date-picker-bottom {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5em;\n}\npn-date-picker .pn-date-picker-bottom[hidden] {\n  display: none;\n}";
+const pnDatePickerCss = () => `${transformTag("pn-date-picker")}{position:relative;display:block}${transformTag("pn-date-picker")} .pn-date-picker{width:100%;display:flex;flex-wrap:wrap;gap:0.25em;container-type:inline-size}@container (max-width: 24em){${transformTag("pn-date-picker")} .pn-date-picker .pn-date-picker-container{flex:1 1 20em}${transformTag("pn-date-picker")} .pn-date-picker .pn-date-picker-range-icon{display:none}}${transformTag("pn-date-picker")} .pn-date-picker-container{display:block;flex:1 1 11em}${transformTag("pn-date-picker")} .pn-date-picker-container[data-error]>.pn-date-picker-label{color:#a70707}${transformTag("pn-date-picker")} .pn-date-picker-container[data-error]>.pn-date-picker-field .pn-date-picker-input{border-color:#a70707}${transformTag("pn-date-picker")} .pn-date-picker-container[data-error]>.pn-date-picker-field .pn-date-picker-input:hover{border-color:#500715}${transformTag("pn-date-picker")} .pn-date-picker-container[data-error]>.pn-date-picker-field .pn-date-picker-input:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${transformTag("pn-date-picker")} .pn-date-picker-container[data-error]>.pn-date-picker-field .pn-date-picker-input:-webkit-autofill,${transformTag("pn-date-picker")} .pn-date-picker-container[data-error]>.pn-date-picker-field .pn-date-picker-input:-webkit-autofill:hover,${transformTag("pn-date-picker")} .pn-date-picker-container[data-error]>.pn-date-picker-field .pn-date-picker-input:-webkit-autofill:focus,${transformTag("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}${transformTag("pn-date-picker")} .pn-date-picker-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-date-picker")} .pn-date-picker-label{transition-duration:0s;transition-delay:0s}}${transformTag("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}${transformTag("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}${transformTag("pn-date-picker")} .pn-date-picker-label>span{font-size:0.875em}${transformTag("pn-date-picker")} .pn-date-picker-field{position:relative;display:flex}${transformTag("pn-date-picker")} .pn-date-picker-input{color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${transformTag("pn-date-picker")} .pn-date-picker-input:-webkit-autofill,${transformTag("pn-date-picker")} .pn-date-picker-input:-webkit-autofill:hover,${transformTag("pn-date-picker")} .pn-date-picker-input:-webkit-autofill:focus,${transformTag("pn-date-picker")} .pn-date-picker-input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${transformTag("pn-date-picker")} .pn-date-picker-input{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-date-picker")} .pn-date-picker-input:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${transformTag("pn-date-picker")} .pn-date-picker-input{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){${transformTag("pn-date-picker")} .pn-date-picker-input{transition-duration:0s;transition-delay:0s}}${transformTag("pn-date-picker")} .pn-date-picker-input[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${transformTag("pn-date-picker")} .pn-date-picker-input[data-compact]::placeholder{color:transparent}${transformTag("pn-date-picker")} .pn-date-picker-input[data-compact]:focus+.pn-date-picker-label,${transformTag("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}${transformTag("pn-date-picker")} .pn-date-picker-input::placeholder{color:#5e554a;font-weight:normal}${transformTag("pn-date-picker")} .pn-date-picker-input:hover{border-color:#005d92}${transformTag("pn-date-picker")} .pn-date-picker-input:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${transformTag("pn-date-picker")} .pn-date-picker-input{padding-right:3em;flex:auto;width:100%}${transformTag("pn-date-picker")} .pn-date-picker-input::-webkit-calendar-picker-indicator{visibility:hidden;inline-size:0}${transformTag("pn-date-picker")} .pn-date-picker-input::-webkit-textfield-decoration-container,${transformTag("pn-date-picker")} .pn-date-picker-input::-webkit-search-cancel-button,${transformTag("pn-date-picker")} .pn-date-picker-input::-webkit-inner-spin-button,${transformTag("pn-date-picker")} .pn-date-picker-input::-webkit-outer-spin-button,${transformTag("pn-date-picker")} .pn-date-picker-input::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}${transformTag("pn-date-picker")} .pn-date-picker-input[data-active]{border-color:#005d92}${transformTag("pn-date-picker")} .pn-date-picker-input:read-only{border-color:#ffffff}${transformTag("pn-date-picker")} .pn-date-picker-range-icon{width:1.5em;margin-bottom:0.8125em;align-self:end}${transformTag("pn-date-picker")} .pn-date-picker-helpertext,${transformTag("pn-date-picker")} .pn-date-picker-error{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em;text-align:left}${transformTag("pn-date-picker")} .pn-date-picker-helpertext[hidden],${transformTag("pn-date-picker")} .pn-date-picker-error[hidden]{display:none}${transformTag("pn-date-picker")} .pn-date-picker-error{color:#a70707}${transformTag("pn-date-picker")} .pn-date-picker-toggle{position:absolute;top:0.5em;right:0.5em;border-radius:50%}${transformTag("pn-date-picker")} .pn-date-picker-button{cursor:pointer;font-size:1em;background-color:transparent;border:0.0625em solid #969087;border-color:transparent;padding:0.25em;margin:0;flex:auto;border-radius:3em}${transformTag("pn-date-picker")} .pn-date-picker-button:first-child,${transformTag("pn-date-picker")} .pn-date-picker-button:last-child{flex:0 0 auto}${transformTag("pn-date-picker")} .pn-date-picker-button{transition-property:outline-color, background-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-date-picker")} .pn-date-picker-button{transition-duration:0s;transition-delay:0s}}${transformTag("pn-date-picker")} .pn-date-picker-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-date-picker")} .pn-date-picker-button:focus{background-color:#ffffff;outline-color:#005d92}${transformTag("pn-date-picker")} .pn-date-picker-button:hover{background-color:#e0f8ff}${transformTag("pn-date-picker")} .pn-date-picker-button[data-active],${transformTag("pn-date-picker")} .pn-date-picker-button[data-range]{background-color:#e0f8ff;border-color:#005d92}${transformTag("pn-date-picker")} .pn-date-picker-button:disabled{cursor:not-allowed}${transformTag("pn-date-picker")} .pn-date-picker-button:disabled:hover{background-color:transparent}${transformTag("pn-date-picker")} .pn-date-picker-month{text-transform:capitalize}${transformTag("pn-date-picker")} .pn-date-picker-month[data-full]{display:none}@media (min-width: 25em){${transformTag("pn-date-picker")} .pn-date-picker-month[data-full]{display:inline}}${transformTag("pn-date-picker")} .pn-date-picker-month[data-abbr]{display:inline}@media (min-width: 25em){${transformTag("pn-date-picker")} .pn-date-picker-month[data-abbr]{display:none}}${transformTag("pn-date-picker")} .pn-date-picker-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${transformTag("pn-date-picker")} .pn-date-picker{}${transformTag("pn-date-picker")} .pn-date-picker-calendar{position:absolute;z-index:4;top:calc(100% + 0.5em);left:var(--pn-calendar-offset-left);width:clamp(100%, 95vw, 20em);max-width:20em;text-align:center;border-radius:0.5em;background-color:#ffffff;overflow:hidden;visibility:hidden;box-shadow:0 0.25em 0.5em rgba(0, 0, 0, 0.1)}${transformTag("pn-date-picker")} .pn-date-picker-calendar[data-range]{max-width:unset}${transformTag("pn-date-picker")} .pn-date-picker-calendar[data-open],${transformTag("pn-date-picker")} .pn-date-picker-calendar[data-moving]{visibility:visible}${transformTag("pn-date-picker")} .pn-date-picker-calendar[data-direction=top]{top:unset;bottom:calc(100% + 0.5em);transform-origin:bottom left}${transformTag("pn-date-picker")} .pn-date-picker-calendar ${transformTag("pn-button")}[hidden]{display:none}${transformTag("pn-date-picker")} .pn-date-picker-calendar ${transformTag("pn-button")} span{text-transform:capitalize}${transformTag("pn-date-picker")} .pn-date-picker-wrapper{padding:0.5em}${transformTag("pn-date-picker")} .pn-date-picker-title{margin:0.5em auto 0;font-size:0.875em;font-weight:500;color:#2d2013}${transformTag("pn-date-picker")} .pn-date-picker-nav{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:1em}${transformTag("pn-date-picker")} .pn-date-picker-table{width:100%;table-layout:fixed;border-spacing:0;border:0;margin:0 0 0.5em}${transformTag("pn-date-picker")} .pn-date-picker-th{font-size:0.75em;font-weight:500;color:#5e554a;padding:0.25em;border:0;text-transform:capitalize}${transformTag("pn-date-picker")} .pn-date-picker-td{cursor:pointer;position:relative;padding:0.25em;outline:0;border:0;line-height:0;width:2em;height:2em;-webkit-tap-highlight-color:transparent}${transformTag("pn-date-picker")} .pn-date-picker-td-text{position:relative;display:block;line-height:1.5em;border-radius:0.5em;color:#2d2013;padding:0.25em;transition-property:color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-date-picker")} .pn-date-picker-td-text{transition-duration:0s;transition-delay:0s}}${transformTag("pn-date-picker")} .pn-date-picker-td-text{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-date-picker")} .pn-date-picker-td[data-blank]{cursor:auto}${transformTag("pn-date-picker")} .pn-date-picker-td[data-blank] .pn-date-picker-td-text{background-color:transparent}${transformTag("pn-date-picker")} .pn-date-picker-td-week{font-size:0.75em;color:#5e554a;display:block}${transformTag("pn-date-picker")} .pn-date-picker-td:before{content:"";position:absolute;left:0;top:0.25em;height:calc(100% - 0.5em);width:100%;background-color:transparent;border:0.0625em solid transparent;border-radius:0.5em;transition-property:border-color, background-color, width, transform, left;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-date-picker")} .pn-date-picker-td:before{transition-duration:0s;transition-delay:0s}}${transformTag("pn-date-picker")} .pn-date-picker-td[aria-disabled=true]{cursor:not-allowed;pointer-events:none}${transformTag("pn-date-picker")} .pn-date-picker-td[aria-disabled=true]>.pn-date-picker-td-text{color:#5e554a;background-color:#f3f2f2}${transformTag("pn-date-picker")} .pn-date-picker-td[aria-disabled=true]:focus>.pn-date-picker-td-text{outline-color:#a70707}${transformTag("pn-date-picker")} .pn-date-picker-td[aria-disabled=true]:hover>.pn-date-picker-td-text,${transformTag("pn-date-picker")} .pn-date-picker-td[aria-disabled=true]:focus>.pn-date-picker-td-text{background-color:#f3f2f2}${transformTag("pn-date-picker")} .pn-date-picker-td[aria-selected=true] .pn-date-picker-td-text{font-weight:500}${transformTag("pn-date-picker")} .pn-date-picker-td[aria-selected=true]:before{border-color:#005d92;background-color:#effbff}${transformTag("pn-date-picker")} .pn-date-picker-td[aria-selected=true][data-single]:before{width:2em;left:50%;transform:translateX(-50%)}${transformTag("pn-date-picker")} .pn-date-picker-td[aria-selected=true][data-range]:before{border-radius:0;border-left-width:0;border-right-width:0}${transformTag("pn-date-picker")} .pn-date-picker-td[aria-selected=true][data-range-from]:before{border-radius:0.5em 0 0 0.5em;border-right-width:0;border-left-width:0.0625em}${transformTag("pn-date-picker")} .pn-date-picker-td[aria-selected=true][data-range-to]:before{border-radius:0 0.5em 0.5em 0;border-right-width:0.0625em;border-left-width:0}${transformTag("pn-date-picker")} .pn-date-picker-td[aria-selected=true][aria-disabled=true]:before{border-color:#a70707;background-color:#fdefee}${transformTag("pn-date-picker")} .pn-date-picker-td[aria-selected=true][aria-disabled=true]>.pn-date-picker-td-text{background-color:unset}${transformTag("pn-date-picker")} .pn-date-picker-td[aria-selected=true][aria-disabled=true]:focus>.pn-date-picker-td-text{background-color:#f3f2f2}${transformTag("pn-date-picker")} .pn-date-picker-td[aria-selected=false]:hover>.pn-date-picker-td-text{background-color:#e0f8ff}${transformTag("pn-date-picker")} .pn-date-picker-td[data-today]>.pn-date-picker-td-text{font-weight:500}${transformTag("pn-date-picker")} .pn-date-picker-td[data-today]>.pn-date-picker-td-text::after{content:"";position:absolute;bottom:0.25em;left:calc(50% - 0.125em);height:0.25em;width:0.25em;background-color:#005d92;border-radius:50%}${transformTag("pn-date-picker")} .pn-date-picker-td[data-today]>.pn-date-picker-td-text:after{bottom:0.15em}${transformTag("pn-date-picker")} .pn-date-picker-td[data-active][data-today]>.pn-date-picker-td-text:after{background-color:#005d92}${transformTag("pn-date-picker")} .pn-date-picker-td:focus-visible>.pn-date-picker-td-text{outline-color:#005d92}${transformTag("pn-date-picker")} .pn-date-picker{}${transformTag("pn-date-picker")} .pn-date-picker-list{margin:0 0 1em;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3, 1fr);grid-gap:0.5em}${transformTag("pn-date-picker")} .pn-date-picker-item>.pn-date-picker-button{display:block;width:100%;border-radius:0.5em;padding:0.5em 0.25em}${transformTag("pn-date-picker")} .pn-date-picker-item>.pn-date-picker-button[data-today]{position:relative;font-weight:500}${transformTag("pn-date-picker")} .pn-date-picker-item>.pn-date-picker-button[data-today]::after{content:"";position:absolute;bottom:0.25em;left:calc(50% - 0.125em);height:0.25em;width:0.25em;background-color:#005d92;border-radius:50%}${transformTag("pn-date-picker")} .pn-date-picker-chips>[slot=chips]{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:0.5em;margin-bottom:0.5em}${transformTag("pn-date-picker")} .pn-date-picker-chips>[slot=chips]:empty{display:none}${transformTag("pn-date-picker")} .pn-date-picker-bottom{display:flex;justify-content:flex-end;gap:0.5em}${transformTag("pn-date-picker")} .pn-date-picker-bottom[hidden]{display:none}`;
 const PnDatePicker = class extends Mixin(animateHeightFactory) {
     constructor(hostRef) {
@@ -576,6 +576,8 @@ const PnDatePicker = class 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 */
@@ -1198,10 +1200,14 @@ const PnDatePicker = class 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;
@@ -1214,28 +1220,53 @@ const PnDatePicker = class 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 watchers() { return {
-        "minDate": ["watchMin"],
-        "maxDate": ["watchMax"],
-        "start": ["watchValue"],
-        "end": ["watchValueTo"],
-        "format": ["handleFormat"],
-        "id": ["watchId"],
-        "dateViewYear": ["watchView"],
-        "dateViewMonth": ["watchView"],
-        "dateViewDate": ["watchView"],
-        "open": ["watchOpen"],
-        "helpertext": ["handleMessage"],
-        "error": ["handleMessage"],
-        "view": ["handleView"]
+        "minDate": [{
+                "watchMin": 0
+            }],
+        "maxDate": [{
+                "watchMax": 0
+            }],
+        "start": [{
+                "watchValue": 0
+            }],
+        "end": [{
+                "watchValueTo": 0
+            }],
+        "format": [{
+                "handleFormat": 0
+            }],
+        "id": [{
+                "watchId": 0
+            }],
+        "dateViewYear": [{
+                "watchView": 0
+            }],
+        "dateViewMonth": [{
+                "watchView": 0
+            }],
+        "dateViewDate": [{
+                "watchView": 0
+            }],
+        "open": [{
+                "watchOpen": 0
+            }],
+        "helpertext": [{
+                "handleMessage": 0
+            }],
+        "error": [{
+                "handleMessage": 0
+            }],
+        "view": [{
+                "handleView": 0
+            }]
     }; }
 };
-PnDatePicker.style = pnDatePickerCss;
+PnDatePicker.style = pnDatePickerCss();
 export { PnDatePicker as pn_date_picker };
-//# sourceMappingURL=pn-date-picker.entry.js.map

package/umd/modules/@postnord/web-components/esm/pn-fieldset.entry.js CHANGED Viewed

@@ -2,12 +2,12 @@
  * Built with Stencil
  * By PostNord.
  */
-import { r as registerInstance, g as getElement, f as forceUpdate, h, a as Host } from './index-BNA0ko5y.js';
+import { t as transformTag, r as registerInstance, g as getElement, f as forceUpdate, h, a as Host } from './index-CAEP792y.js';
 import { uuidv4 } from './index.js';
 import { a as alert_exclamation_circle } from './alert_exclamation_circle-B88w-Zxn.js';
 import { a as alert_info_circle } from './alert_info_circle-BTqkgfeH.js';
-const pnFieldsetCss = "pn-fieldset{display:inline-block}pn-fieldset .pn-fieldset{border:0;padding:0;margin:0;color:#2d2013;display:flex;flex-direction:column;font-size:1em}pn-fieldset .pn-fieldset-legend{float:left;font-weight:500;line-height:1.4;padding:0}pn-fieldset .pn-fieldset-helpertext{color:#5e554a;margin:0}pn-fieldset .pn-fieldset-items{padding:0.75em 0;display:flex;flex-direction:column;gap:0.75em}pn-fieldset .pn-fieldset-message-wrapper{display:flex;gap:0.75em;color:#2d2013;line-height:1.4;font-weight:400}pn-fieldset .pn-fieldset-message-wrapper[hidden]{display:none}pn-fieldset .pn-fieldset-message{margin:0}pn-fieldset .pn-fieldset[aria-invalid=true]>.pn-fieldset-legend,pn-fieldset .pn-fieldset[aria-invalid=true]>.pn-fieldset-helpertext,pn-fieldset .pn-fieldset[aria-invalid=true]>.pn-fieldset-message-wrapper{color:#a70707}pn-fieldset .pn-fieldset[aria-invalid=true]>.pn-fieldset-legend>pn-icon .pn-icon-svg>path,pn-fieldset .pn-fieldset[aria-invalid=true]>.pn-fieldset-helpertext>pn-icon .pn-icon-svg>path,pn-fieldset .pn-fieldset[aria-invalid=true]>.pn-fieldset-message-wrapper>pn-icon .pn-icon-svg>path{fill:#a70707}pn-fieldset .pn-fieldset:disabled>.pn-fieldset-legend,pn-fieldset .pn-fieldset:disabled>.pn-fieldset-helpertext,pn-fieldset .pn-fieldset:disabled>.pn-fieldset-message,pn-fieldset .pn-fieldset:disabled>.pn-fieldset-message-wrapper{color:#2d2013}pn-fieldset .pn-fieldset:disabled>.pn-fieldset-legend>pn-icon .pn-icon-svg>path,pn-fieldset .pn-fieldset:disabled>.pn-fieldset-helpertext>pn-icon .pn-icon-svg>path,pn-fieldset .pn-fieldset:disabled>.pn-fieldset-message>pn-icon .pn-icon-svg>path,pn-fieldset .pn-fieldset:disabled>.pn-fieldset-message-wrapper>pn-icon .pn-icon-svg>path{fill:#2d2013}";
+const pnFieldsetCss = () => `${transformTag("pn-fieldset")}{display:inline-block}${transformTag("pn-fieldset")} .pn-fieldset{border:0;padding:0;margin:0;color:#2d2013;display:flex;flex-direction:column;font-size:1em}${transformTag("pn-fieldset")} .pn-fieldset-legend{float:left;font-weight:500;line-height:1.4;padding:0}${transformTag("pn-fieldset")} .pn-fieldset-helpertext{color:#5e554a;margin:0}${transformTag("pn-fieldset")} .pn-fieldset-items{padding:0.75em 0;display:flex;flex-direction:column;gap:0.75em}${transformTag("pn-fieldset")} .pn-fieldset-message-wrapper{display:flex;gap:0.75em;color:#2d2013;line-height:1.4;font-weight:400}${transformTag("pn-fieldset")} .pn-fieldset-message-wrapper[hidden]{display:none}${transformTag("pn-fieldset")} .pn-fieldset-message{margin:0}${transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-legend,${transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-helpertext,${transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-message-wrapper{color:#a70707}${transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-legend>${transformTag("pn-icon")} .pn-icon-svg>path,${transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-helpertext>${transformTag("pn-icon")} .pn-icon-svg>path,${transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-message-wrapper>${transformTag("pn-icon")} .pn-icon-svg>path{fill:#a70707}${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-legend,${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-helpertext,${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-message,${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-message-wrapper{color:#2d2013}${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-legend>${transformTag("pn-icon")} .pn-icon-svg>path,${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-helpertext>${transformTag("pn-icon")} .pn-icon-svg>path,${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-message>${transformTag("pn-icon")} .pn-icon-svg>path,${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-message-wrapper>${transformTag("pn-icon")} .pn-icon-svg>path{fill:#2d2013}`;
 const PnFieldset = class {
     constructor(hostRef) {
@@ -70,13 +70,14 @@ const PnFieldset = class {
         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 watchers() { return {
-        "fieldsetId": ["handleId"]
+        "fieldsetId": [{
+                "handleId": 0
+            }]
     }; }
 };
-PnFieldset.style = pnFieldsetCss;
+PnFieldset.style = pnFieldsetCss();
 export { PnFieldset as pn_fieldset };
-//# sourceMappingURL=pn-fieldset.entry.js.map

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

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-BNA0ko5y.js';
+import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-CAEP792y.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';
@@ -60,7 +60,7 @@ const translations = {
     },
 };
-const pnFileUploadCss = "pn-file-upload.hover .pn-file-upload-container .pn-dropzone-container{background-color:#e0f8ff}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}pn-file-upload .pn-file-upload-input:hover{cursor:pointer}pn-file-upload .pn-file-upload-input:hover+.pn-dropzone-inner{border-color:#005d92;background-color:#e0f8ff}pn-file-upload .pn-file-upload-input:focus-visible+.pn-dropzone-inner{border-color:#005d92;outline-color:#005d92}pn-file-upload .pn-file-upload-input:disabled{pointer-events:none}pn-file-upload .pn-file-upload-input:disabled+.pn-dropzone-inner{pointer-events:none;background-color:#f3f2f2;border-color:#2d2013}pn-file-upload .pn-file-upload-input:disabled+.pn-dropzone-inner .headline a{color:#5e554a}pn-file-upload .pn-file-upload-input:disabled+.pn-dropzone-inner .pn-icon-svg path{fill:#5e554a}pn-file-upload .pn-file-upload-container{position:relative;display:flex;flex-direction:column;gap:1em}pn-file-upload .pn-file-upload-container .pn-dropzone-container{position:relative}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){pn-file-upload .pn-file-upload-container .pn-dropzone-inner{transition-duration:0s;transition-delay:0s}}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}}pn-file-upload .pn-file-upload-container .pn-dropzone-inner[data-hover]{background-color:#e0f8ff;border-color:#005d92}pn-file-upload .pn-file-upload-container .pn-dropzone-inner[data-invalid]{border-color:#a70707}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}pn-file-upload .files-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1em}pn-file-upload .files-list .filename{font-weight:400;font-size:0.75em}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}pn-file-upload .files-list .files-list-item .file-list-item-title{display:flex;align-items:center;gap:0.5em;margin-right:0.5em}pn-file-upload .files-list .files-list-item>pn-progress-bar{margin-right:25em;flex:1}pn-file-upload .files-list .files-list-item.files-list-item-error{color:#a70707;background-color:#fdefee}pn-file-upload .files-list .files-list-item-text-error{color:#a70707;font-size:0.875em;font-weight:300;margin-top:0.25em}pn-file-upload .pn-file-upload-title{color:#2d2013}pn-file-upload .pn-file-upload-subtitle{color:#5e554a;font-size:0.75em}";
+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 PnFileUpload = class {
     constructor(hostRef) {
@@ -447,14 +447,17 @@ const PnFileUpload = class {
         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 watchers() { return {
-        "limit": ["handleLimit"],
-        "maxSize": ["handleMaxBytes"]
+        "limit": [{
+                "handleLimit": 0
+            }],
+        "maxSize": [{
+                "handleMaxBytes": 0
+            }]
     }; }
 };
-PnFileUpload.style = pnFileUploadCss;
+PnFileUpload.style = pnFileUploadCss();
 export { PnFileUpload as pn_file_upload };
-//# sourceMappingURL=pn-file-upload.entry.js.map