npm - @postnord/pn-marketweb-components - Versions diffs - 3.5.3 → 4.0.0 - Mend

@postnord/pn-marketweb-components 3.5.3 → 4.0.0

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 (1509) hide show

package/umd/modules/@postnord/web-components/cjs/pn-toast.cjs.entry.js CHANGED Viewed

@@ -26,7 +26,7 @@ const translations = {
     },
 };
-const pnToastCss = "pn-toast{position:relative;display:block}pn-toast .pn-toast{position:relative;color:#2d2013;padding:1em;border-radius:0.5em;outline:none;font-size:1em;font-weight:400;background-color:#e0f8ff;border-color:#005d92;display:flex;align-items:center;gap:0.75em;visibility:visible;transition-property:visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-toast .pn-toast{transition-duration:0s;transition-delay:0s}}pn-toast .pn-toast .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-toast .pn-toast[data-hide]{visibility:hidden;transition-delay:0.2s}pn-toast .pn-toast-heading{font-size:1em;font-style:normal;font-weight:500;margin:0}pn-toast .pn-toast-text{font-size:1em;font-style:normal;font-weight:400;margin:0 0 0.25em 0}pn-toast .pn-toast-text:last-child{margin-bottom:0}pn-toast .pn-toast-icon .pn-icon-svg path{fill:#2d2013}pn-toast .pn-toast-content{display:flex;flex-direction:column;align-self:center;align-items:flex-start;gap:0.25em;margin:0 auto 0 0}pn-toast .pn-toast-button{cursor:pointer;border-radius:50%;border:none;background:none;padding:0.25em;font-size:1em;display:flex;align-items:center;justify-content:center;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);outline:0.2rem solid transparent;outline-offset:0.2rem}@media (prefers-reduced-motion: reduce){pn-toast .pn-toast-button{transition-duration:0s;transition-delay:0s}}pn-toast .pn-toast-button:focus-visible{outline-color:#005d92;background-color:#8eddf9}pn-toast .pn-toast-button:hover{background-color:#8eddf9}pn-toast .pn-toast[data-appearance=success]{background-color:#dcf6e7}pn-toast .pn-toast[data-appearance=success] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=success] .pn-toast-button:focus-visible{outline-color:#005e41;background-color:#abe3bb}pn-toast .pn-toast[data-appearance=success] .pn-toast-button:hover{background-color:#abe3bb}pn-toast .pn-toast[data-appearance=success] .pn-ripple{background-color:#005e41}pn-toast .pn-toast[data-appearance=success] .pn-toast-icon .pn-icon-svg path{fill:#005e41}pn-toast .pn-toast[data-appearance=success][data-temporary]{border-color:#005e41}pn-toast .pn-toast[data-appearance=warning]{background-color:#fff1e3}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button:focus-visible{outline-color:#99290a;background-color:#ffc8a3}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button:hover{background-color:#ffc8a3}pn-toast .pn-toast[data-appearance=warning] .pn-ripple{background-color:#99290a}pn-toast .pn-toast[data-appearance=warning] .pn-toast-icon .pn-icon-svg path{fill:#99290a}pn-toast .pn-toast[data-appearance=warning][data-temporary]{border-color:#ed7123}pn-toast .pn-toast[data-appearance=error]{background-color:#fdefee}pn-toast .pn-toast[data-appearance=error] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=error] .pn-toast-button:focus-visible{outline-color:#a70707;background-color:#fbc2c1}pn-toast .pn-toast[data-appearance=error] .pn-toast-button:hover{background-color:#fbc2c1}pn-toast .pn-toast[data-appearance=error] .pn-ripple{background-color:#a70707}pn-toast .pn-toast[data-appearance=error] .pn-toast-icon .pn-icon-svg path{fill:#a70707}pn-toast .pn-toast[data-appearance=error][data-temporary]{border-color:#a70707}pn-toast .pn-toast[data-temporary]{border-style:solid;border-width:0.0625em;box-shadow:0 0.125em 0.25em rgba(0, 0, 0, 0.2)}";
+const pnToastCss = "pn-toast{position:relative;display:block;overflow:hidden}pn-toast .pn-toast{position:relative;color:#2d2013;padding:1em;border-radius:0.5em;outline:none;font-size:1em;font-weight:400;background-color:#e0f8ff;border-color:#005d92;display:flex;align-items:center;gap:0.75em;visibility:visible;transition-property:visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-toast .pn-toast{transition-duration:0s;transition-delay:0s}}pn-toast .pn-toast .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-toast .pn-toast[data-hide]{visibility:hidden;transition-delay:0.2s}pn-toast .pn-toast-heading{font-size:1em;font-style:normal;font-weight:500;margin:0}pn-toast .pn-toast-text{font-size:1em;font-style:normal;font-weight:400;margin:0 0 0.25em 0}pn-toast .pn-toast-text:last-child{margin-bottom:0}pn-toast .pn-toast-icon .pn-icon-svg path{fill:#2d2013}pn-toast .pn-toast-content{display:flex;flex-direction:column;align-self:center;align-items:flex-start;gap:0.25em;margin:0 auto 0 0}pn-toast .pn-toast-button{cursor:pointer;border-radius:50%;border:none;background:none;padding:0.25em;font-size:1em;display:flex;align-items:center;justify-content:center;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);outline:0.2rem solid transparent;outline-offset:0.2rem}@media (prefers-reduced-motion: reduce){pn-toast .pn-toast-button{transition-duration:0s;transition-delay:0s}}pn-toast .pn-toast-button:focus-visible{outline-color:#005d92;background-color:#8eddf9}pn-toast .pn-toast-button:hover{background-color:#8eddf9}pn-toast .pn-toast[data-appearance=success]{background-color:#dcf6e7}pn-toast .pn-toast[data-appearance=success] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=success] .pn-toast-button:focus-visible{outline-color:#005e41;background-color:#abe3bb}pn-toast .pn-toast[data-appearance=success] .pn-toast-button:hover{background-color:#abe3bb}pn-toast .pn-toast[data-appearance=success] .pn-ripple{background-color:#005e41}pn-toast .pn-toast[data-appearance=success] .pn-toast-icon .pn-icon-svg path{fill:#005e41}pn-toast .pn-toast[data-appearance=success][data-temporary]{border-color:#005e41}pn-toast .pn-toast[data-appearance=warning]{background-color:#fff1e3}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button:focus-visible{outline-color:#99290a;background-color:#ffc8a3}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button:hover{background-color:#ffc8a3}pn-toast .pn-toast[data-appearance=warning] .pn-ripple{background-color:#99290a}pn-toast .pn-toast[data-appearance=warning] .pn-toast-icon .pn-icon-svg path{fill:#99290a}pn-toast .pn-toast[data-appearance=warning][data-temporary]{border-color:#ed7123}pn-toast .pn-toast[data-appearance=error]{background-color:#fdefee}pn-toast .pn-toast[data-appearance=error] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=error] .pn-toast-button:focus-visible{outline-color:#a70707;background-color:#fbc2c1}pn-toast .pn-toast[data-appearance=error] .pn-toast-button:hover{background-color:#fbc2c1}pn-toast .pn-toast[data-appearance=error] .pn-ripple{background-color:#a70707}pn-toast .pn-toast[data-appearance=error] .pn-toast-icon .pn-icon-svg path{fill:#a70707}pn-toast .pn-toast[data-appearance=error][data-temporary]{border-color:#a70707}pn-toast .pn-toast[data-temporary]{border-style:solid;border-width:0.0625em;box-shadow:0 0.125em 0.25em rgba(0, 0, 0, 0.2)}";
 const PnToastStyle0 = pnToastCss;
 const PnToast = class {
@@ -59,13 +59,10 @@ const PnToast = class {
             this.animationDuration = 0;
         else
             this.animationDuration = this.duration;
-        this.hostElement.style.overflow = 'hidden';
-        requestAnimationFrame(() => {
-            if (this.hide)
-                this.closeToast();
-            else
-                this.openToast();
-        });
+        if (this.hide)
+            this.closeToast();
+        else
+            this.openToast();
     }
     /** Event fired when the close button is pressed. */
     close;
@@ -75,10 +72,8 @@ const PnToast = class {
      **/
     hidden;
     async componentWillLoad() {
-        if (this.hide) {
+        if (this.hide)
             this.hostElement.style.height = '0';
-            this.hostElement.style.overflow = 'hidden';
-        }
         if (this.language === null)
             await helpers.awaitTopbar(this.hostElement);
         // Any text content at this stage means there is slotted content present.
@@ -93,18 +88,19 @@ const PnToast = class {
     }
     openToast() {
         requestAnimationFrame(() => {
-            const { clientHeight } = this.toast;
+            const { scrollHeight } = this.hostElement;
             const { height } = this.getRect(this.hostElement);
             this.hostElement.style.height = `${height}px`;
             this.isExpanding = true;
-            this.animateToast(true, `${height}px`, `${clientHeight}px`);
+            this.animateToast(true, `${height}px`, `${scrollHeight}px`);
         });
     }
     closeToast() {
-        const { clientHeight } = this.hostElement;
+        const { scrollHeight, clientHeight } = this.hostElement;
+        const height = this.isExpanding ? clientHeight : scrollHeight;
         this.hostElement.style.height = `0px`;
         this.isClosing = true;
-        this.animateToast(false, `${clientHeight}px`, `0px`);
+        this.animateToast(false, `${height}px`, `0px`);
     }
     animateToast(open, startHeight, endHeight) {
         this.cancelAnimations();
@@ -119,12 +115,10 @@ const PnToast = class {
     }
     animationFinish() {
         this.cancelAnimations();
-        if (this.hide)
-            this.hidden.emit(this.hide);
-        else {
+        if (!this.hide)
             this.hostElement.style.height = '';
-            this.hostElement.style.overflow = '';
-        }
+        else
+            this.hidden.emit(this.hide);
         this.isClosing = false;
         this.isExpanding = false;
     }
@@ -165,14 +159,11 @@ const PnToast = class {
     translate(prop) {
         return translations?.[prop]?.[this.language || helpers.en] || prop;
     }
-    isMoving() {
-        return this.isClosing || this.isExpanding;
-    }
     hideToast() {
-        return this.hide && !this.isMoving();
+        return this.hide && !(this.isClosing || this.isExpanding);
     }
     render() {
-        return (index.h(index.Host, { key: 'b0f490bf139ccd8682e8d43f75ae99f6d5e4a054' }, index.h("div", { key: '8bdd1b6525b579d06b82d762e56c0ec34c4bb822', id: this.toastId, class: "pn-toast", role: this.getRole(), "data-appearance": this.appearance, "data-temporary": this.temporary, "data-hide": this.hideToast(), ref: el => (this.toast = el) }, this.showIcon() && index.h("pn-icon", { key: 'fc5626dbbe0f5a5939179f02be8e1e70eec22ebd', class: "pn-toast-icon", icon: this.getIcon() }), index.h("div", { key: 'f1aabfdd5d9e62d895cd4cfdaf31a7abb92e0749', class: "pn-toast-content" }, this.showTitle() && index.h("h4", { key: '6267fa5e2eb67c8a0d16506db0586f9b2fa6b18a', class: "pn-toast-heading" }, this.heading), this.text && index.h("p", { key: 'b1a2ee4468223afc9c43bb57f3aa72c38d86cb1c', class: "pn-toast-text" }, this.text), index.h("slot", { key: '2508212f2afc63d3faa5a189dd9ddba33cff3eaa' })), this.showIllustration() && index.h("pn-illustration", { key: 'bee93e5623aa57d1a1f765dd6ad13a8cdd1ea1d8', illustration: this.illustration, width: "5.5em", height: "5.5em" }), this.closable && (index.h("button", { key: '0db9441d732d60bd37446c92b0df34e44f1f61e9', class: "pn-toast-button", type: "button", "aria-label": this.translate('HIDE'), onClick: (event) => this.handleClick(event), ref: el => (this.button = el) }, index.h("pn-icon", { key: 'a1325ada64366284633932d4ba775e67b3ae6f59', icon: close.close }))))));
+        return (index.h(index.Host, { key: 'c735e200d6cf3061569c3e55caf583abed738725' }, index.h("output", { key: '7911e4ca88367ea8130a20abda58449a1f7e3098', id: this.toastId, class: "pn-toast", role: this.getRole(), "data-appearance": this.appearance, "data-temporary": this.temporary, "data-hide": this.hideToast(), ref: el => (this.toast = el) }, this.showIcon() && index.h("pn-icon", { key: 'b064b710d21583eaba8d5ce1c3b162fb1c71f4e4', class: "pn-toast-icon", icon: this.getIcon() }), index.h("div", { key: '6e24b6771be924b56e2406ac92c5639f7da4b0b6', class: "pn-toast-content" }, this.showTitle() && index.h("h4", { key: 'eb24bcbbd70b1b77e86c2598569f443bd7d1bdfb', class: "pn-toast-heading" }, this.heading), this.text && index.h("p", { key: '713b372860897ef9bc55f401282765bc5684b6f6', class: "pn-toast-text" }, this.text), index.h("slot", { key: 'e567f676f28d20370407fc481c52c92bc34a06e1' })), this.showIllustration() && index.h("pn-illustration", { key: '6b0b4f9c1f588f71eb1154b6170994f59aaaae4a', illustration: this.illustration, width: "5.5em", height: "5.5em" }), this.closable && (index.h("button", { key: '4111381fb279dc2d5abe520188869133aa948246', class: "pn-toast-button", type: "button", "aria-label": this.translate('HIDE'), onClick: (event) => this.handleClick(event), ref: el => (this.button = el) }, index.h("pn-icon", { key: '020fe8b66ce1d955dcb5420c44b0b4b5b1845ab9', icon: close.close }))))));
     }
     static get watchers() { return {
         "hide": ["handleHide"]

package/umd/modules/@postnord/web-components/cjs/pn-toast.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-toast.entry.cjs.js","mappings":"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","names":["reduceMotion","awaitTopbar","ripple","check_circle","alert_exclamation_circle","alert_info_circle","en","h","Host","close"],"sources":["node_modules/pn-design-assets/pn-assets/icons/alert_exclamation_triangle.js","src/components/feedback/pn-toast/translation.ts","src/components/feedback/pn-toast/pn-toast.scss?tag=pn-toast","src/components/feedback/pn-toast/pn-toast.tsx"],"sourcesContent":["const icon = '<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=\"M12.874 2.514a1 1 0 0 0-1.748 0l-10 18A1 1 0 0 0 2 22h20a1 1 0 0 0 .874-1.486zM12 5.06 20.3 20H3.7zm-1.375 4.936a1.38 1.38 0 1 1 2.75 0l-.292 3.509a1.087 1.087 0 0 1-2.166 0zM12 15.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3\" clip-rule=\"evenodd\"/></svg>';\nexport const alert_exclamation_triangle = icon;\nexport const alertExclamationTriangle = icon;\n","export const translations = {\n HIDE: {\n sv: 'Stäng meddelande',\n en: 'Dismiss message',\n da: 'Afvis besked',\n fi: 'Hylkää viesti',\n no: 'Avvis meldingen',\n },\n};\n","@use 'src/globals/main';\n\npn-toast {\n position: relative;\n display: block;\n}\n\npn-toast .pn-toast {\n position: relative;\n\n color: main.$gray900;\n padding: 1em;\n border-radius: 0.5em;\n\n outline: none;\n font-size: 1em;\n font-weight: 400;\n background-color: main.$blue50;\n border-color: main.$blue700;\n\n display: flex;\n align-items: center;\n gap: 0.75em;\n\n visibility: visible;\n\n @include main.pn-transition('visibility');\n\n @include main.pn-ripple(main.$blue700);\n\n &[data-hide] {\n visibility: hidden;\n transition-delay: main.$timing;\n }\n\n &-heading {\n font-size: 1em;\n font-style: normal;\n font-weight: 500;\n margin: 0;\n }\n\n &-text {\n font-size: 1em;\n font-style: normal;\n font-weight: 400;\n margin: 0 0 0.25em 0;\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n &-icon .pn-icon-svg path {\n fill: main.$gray900;\n }\n\n &-content {\n display: flex;\n flex-direction: column;\n align-self: center;\n align-items: flex-start;\n gap: 0.25em;\n margin: 0 auto 0 0;\n }\n\n &-button {\n cursor: pointer;\n border-radius: 50%;\n border: none;\n background: none;\n padding: 0.25em;\n font-size: 1em;\n display: flex;\n align-items: center;\n justify-content: center;\n @include main.pn-transition('background-color, outline-color');\n\n @include main.pn-focus(main.$blue700, main.$blue200);\n\n &:hover {\n background-color: main.$blue200;\n }\n }\n\n &[data-appearance='success'] {\n background-color: main.$green50;\n\n .pn-toast-button {\n @include main.pn-focus(main.$green700, main.$green200);\n\n &:hover {\n background-color: main.$green200;\n }\n }\n\n .pn-ripple {\n background-color: main.$green700;\n }\n\n .pn-toast-icon .pn-icon-svg path {\n fill: main.$green700;\n }\n\n &[data-temporary] {\n border-color: main.$green700;\n }\n }\n\n &[data-appearance='warning'] {\n background-color: main.$orange50;\n\n .pn-toast-button {\n @include main.pn-focus(main.$orange700, main.$orange200);\n\n &:hover {\n background-color: main.$orange200;\n }\n }\n\n .pn-ripple {\n background-color: main.$orange700;\n }\n\n .pn-toast-icon .pn-icon-svg path {\n fill: main.$orange700;\n }\n\n &[data-temporary] {\n border-color: main.$orange500;\n }\n }\n\n &[data-appearance='error'] {\n background-color: main.$coral50;\n\n .pn-toast-button {\n @include main.pn-focus(main.$warning, main.$coral200);\n\n &:hover {\n background-color: main.$coral200;\n }\n }\n\n .pn-ripple {\n background-color: main.$warning;\n }\n\n .pn-toast-icon .pn-icon-svg path {\n fill: main.$warning;\n }\n\n &[data-temporary] {\n border-color: main.$warning;\n }\n }\n\n &[data-temporary] {\n border-style: solid;\n border-width: 0.0625em;\n box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.2);\n }\n}\n","import type { PnLanguages } from '@/index';\nimport { awaitTopbar, en, ripple, reduceMotion } from '@/index';\nimport { Component, Host, Prop, h, Element, EventEmitter, Event, State, Watch } from '@stencil/core';\nimport {\n alert_info_circle,\n check_circle,\n alert_exclamation_triangle,\n alert_exclamation_circle,\n close,\n} from 'pn-design-assets/pn-assets/icons.js';\nimport { translations } from './translation';\n\n/*\n This component is able to fill many roles of a classic toast.\n * It has 4 different colors, a temporary state, hide button, icon and illustration support.\n \n The `pn-toast` will expand to its parent containers full width.\n * Either limit the parent width or set a CSS rule to your specific width if needed.\n /\n@Component({\n tag: 'pn-toast',\n styleUrl: 'pn-toast.scss',\n})\nexport class PnToast {\n toast: HTMLDivElement;\n button: HTMLButtonElement;\n\n private readonly duration: number = 400;\n private animationDuration: number = this.duration;\n private animation: Animation;\n\n @Element() hostElement: HTMLElement;\n\n @State() isClosing = false;\n @State() isExpanding = false;\n\n @State() hasSlottedContent: boolean = false;\n\n /\n Set a title for the toast. Requires the `text` prop in order to work.\n * @description Can be used together with slotted content.\n /\n @Prop() heading?: string = '';\n /\n Set a paragraph of text for the toast.\n * @description Can be used together with slotted content.\n /\n @Prop() text?: string = '';\n /* Give the toast a HTML ID. /\n @Prop() toastId?: string;\n /\n Default color is blue, you also have the option of success (green), warning (orange) and error (red).\n * @category Visual\n /\n @Prop() appearance?: '' \| 'success' \| 'warning' \| 'error';\n /\n This will apply a shadow and border to the toast.\n * @category Visual\n /\n @Prop() temporary: boolean = false;\n /\n Set an SVG icon.\n * @category Visual\n /\n @Prop() icon?: string;\n /\n Set an SVG illustration.\n * @category Visual\n /\n @Prop() illustration?: string;\n /\n Control the visibility of the toast. If the `closable` prop is active, the toast will set the `hide` prop on its own.\n * @see {@link closable}\n * @category Features\n /\n @Prop({ mutable: true, reflect: true }) hide: boolean = false;\n /\n Show close button.\n * @category Features\n /\n @Prop() closable: boolean = false;\n /\n Manually set the language, only needed if the `closable` prop is enabled.\n * @see {@link closable}\n * @category Features\n /\n @Prop({ mutable: true }) language?: PnLanguages = null;\n\n @Watch('hide')\n handleHide() {\n if (reduceMotion()) this.animationDuration = 0;\n else this.animationDuration = this.duration;\n\n this.hostElement.style.overflow = 'hidden';\n\n requestAnimationFrame(() => {\n if (this.hide) this.closeToast();\n else this.openToast();\n });\n }\n\n /* Event fired when the close button is pressed. /\n @Event() close: EventEmitter<boolean>;\n /\n This event is fired when the toast is fully hidden after the animation is finished.\n * Triggers from the close button or if the prop `hide` is set to true.\n **/\n @Event() hidden: EventEmitter<boolean>;\n\n async componentWillLoad() {\n if (this.hide) {\n this.hostElement.style.height = '0';\n this.hostElement.style.overflow = 'hidden';\n }\n\n if (this.language === null) await awaitTopbar(this.hostElement);\n // Any text content at this stage means there is slotted content present.\n this.hasSlottedContent = !!this.hostElement.textContent;\n }\n\n componentDidLoad() {\n if (!!this.heading && !this.text && !this.hasSlottedContent)\n console.warn('The %s prop is only available if you use the %s prop or slotted content.', 'heading', 'text');\n }\n\n private getRect(element: HTMLElement): DOMRect {\n return element.getBoundingClientRect();\n }\n\n private openToast() {\n requestAnimationFrame(() => {\n const { clientHeight } = this.toast;\n const { height } = this.getRect(this.hostElement);\n\n this.hostElement.style.height = `${height}px`;\n\n this.isExpanding = true;\n this.animateToast(true, `${height}px`, `${clientHeight}px`);\n });\n }\n\n private closeToast() {\n const { clientHeight } = this.hostElement;\n this.hostElement.style.height = `0px`;\n\n this.isClosing = true;\n this.animateToast(false, `${clientHeight}px`, `0px`);\n }\n\n private animateToast(open: boolean, startHeight: string, endHeight: string) {\n this.cancelAnimations();\n this.animation = this.hostElement.animate(\n {\n height: [startHeight, endHeight],\n },\n {\n duration: this.animationDuration,\n easing: 'cubic-bezier(0.6, 0, 0.2, 1)',\n },\n );\n this.animation.onfinish = () => this.animationFinish();\n this.animation.oncancel = () => (open ? (this.isExpanding = false) : (this.isClosing = false));\n }\n\n private animationFinish() {\n this.cancelAnimations();\n if (this.hide) this.hidden.emit(this.hide);\n else {\n this.hostElement.style.height = '';\n this.hostElement.style.overflow = '';\n }\n this.isClosing = false;\n this.isExpanding = false;\n }\n\n private cancelAnimations() {\n if (this.animation) this.animation.cancel();\n }\n\n private handleClick(event: PointerEvent) {\n this.hide = true;\n this.close.emit(this.hide);\n ripple(event, this.toast);\n }\n\n private getIcon(): string {\n if (this.illustration) return '';\n if (this.icon) return this.icon;\n if (this.appearance === 'success') return check_circle;\n if (this.appearance === 'warning') return alert_exclamation_triangle;\n if (this.appearance === 'error') return alert_exclamation_circle;\n return alert_info_circle;\n }\n\n private getRole(): string {\n return this.appearance === 'error' ? 'alert' : 'status';\n }\n\n private showIcon(): boolean {\n return !this.illustration;\n }\n\n private showIllustration(): boolean {\n return !this.showIcon();\n }\n\n private showTitle(): boolean {\n return (this.hasSlottedContent \|\| !!this.text) && !!this.heading;\n }\n\n private translate(prop: string): string {\n return translations?.[prop]?.[this.language \|\| en] \|\| prop;\n }\n\n private isMoving(): boolean {\n return this.isClosing \|\| this.isExpanding;\n }\n\n private hideToast(): boolean {\n return this.hide && !this.isMoving();\n }\n\n render() {\n return (\n <Host>\n <div\n id={this.toastId}\n class=\"pn-toast\"\n role={this.getRole()}\n data-appearance={this.appearance}\n data-temporary={this.temporary}\n data-hide={this.hideToast()}\n ref={el => (this.toast = el)}\n >\n {this.showIcon() && <pn-icon class=\"pn-toast-icon\" icon={this.getIcon()} />}\n\n <div class=\"pn-toast-content\">\n {this.showTitle() && <h4 class=\"pn-toast-heading\">{this.heading}</h4>}\n {this.text && <p class=\"pn-toast-text\">{this.text}</p>}\n <slot />\n </div>\n\n {this.showIllustration() && <pn-illustration illustration={this.illustration} width=\"5.5em\" height=\"5.5em\" />}\n\n {this.closable && (\n <button\n class=\"pn-toast-button\"\n type=\"button\"\n aria-label={this.translate('HIDE')}\n onClick={(event: PointerEvent) => this.handleClick(event)}\n ref={el => (this.button = el)}\n >\n <pn-icon icon={close} />\n </button>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-toast.entry.cjs.js","mappings":"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","names":["reduceMotion","awaitTopbar","ripple","check_circle","alert_exclamation_circle","alert_info_circle","en","h","Host","close"],"sources":["node_modules/pn-design-assets/pn-assets/icons/alert_exclamation_triangle.js","src/components/feedback/pn-toast/translation.ts","src/components/feedback/pn-toast/pn-toast.scss?tag=pn-toast","src/components/feedback/pn-toast/pn-toast.tsx"],"sourcesContent":["const icon = '<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=\"M12.874 2.514a1 1 0 0 0-1.748 0l-10 18A1 1 0 0 0 2 22h20a1 1 0 0 0 .874-1.486zM12 5.06 20.3 20H3.7zm-1.375 4.936a1.38 1.38 0 1 1 2.75 0l-.292 3.509a1.087 1.087 0 0 1-2.166 0zM12 15.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3\" clip-rule=\"evenodd\"/></svg>';\nexport const alert_exclamation_triangle = icon;\nexport const alertExclamationTriangle = icon;\n","export const translations = {\n HIDE: {\n sv: 'Stäng meddelande',\n en: 'Dismiss message',\n da: 'Afvis besked',\n fi: 'Hylkää viesti',\n no: 'Avvis meldingen',\n },\n};\n","@use 'src/globals/main';\n\npn-toast {\n position: relative;\n display: block;\n overflow: hidden;\n}\n\npn-toast .pn-toast {\n position: relative;\n\n color: main.$gray900;\n padding: 1em;\n border-radius: 0.5em;\n\n outline: none;\n font-size: 1em;\n font-weight: 400;\n background-color: main.$blue50;\n border-color: main.$blue700;\n\n display: flex;\n align-items: center;\n gap: 0.75em;\n\n visibility: visible;\n\n @include main.pn-transition('visibility');\n\n @include main.pn-ripple(main.$blue700);\n\n &[data-hide] {\n visibility: hidden;\n transition-delay: main.$timing;\n }\n\n &-heading {\n font-size: 1em;\n font-style: normal;\n font-weight: 500;\n margin: 0;\n }\n\n &-text {\n font-size: 1em;\n font-style: normal;\n font-weight: 400;\n margin: 0 0 0.25em 0;\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n &-icon .pn-icon-svg path {\n fill: main.$gray900;\n }\n\n &-content {\n display: flex;\n flex-direction: column;\n align-self: center;\n align-items: flex-start;\n gap: 0.25em;\n margin: 0 auto 0 0;\n }\n\n &-button {\n cursor: pointer;\n border-radius: 50%;\n border: none;\n background: none;\n padding: 0.25em;\n font-size: 1em;\n display: flex;\n align-items: center;\n justify-content: center;\n @include main.pn-transition('background-color, outline-color');\n\n @include main.pn-focus(main.$blue700, main.$blue200);\n\n &:hover {\n background-color: main.$blue200;\n }\n }\n\n &[data-appearance='success'] {\n background-color: main.$green50;\n\n .pn-toast-button {\n @include main.pn-focus(main.$green700, main.$green200);\n\n &:hover {\n background-color: main.$green200;\n }\n }\n\n .pn-ripple {\n background-color: main.$green700;\n }\n\n .pn-toast-icon .pn-icon-svg path {\n fill: main.$green700;\n }\n\n &[data-temporary] {\n border-color: main.$green700;\n }\n }\n\n &[data-appearance='warning'] {\n background-color: main.$orange50;\n\n .pn-toast-button {\n @include main.pn-focus(main.$orange700, main.$orange200);\n\n &:hover {\n background-color: main.$orange200;\n }\n }\n\n .pn-ripple {\n background-color: main.$orange700;\n }\n\n .pn-toast-icon .pn-icon-svg path {\n fill: main.$orange700;\n }\n\n &[data-temporary] {\n border-color: main.$orange500;\n }\n }\n\n &[data-appearance='error'] {\n background-color: main.$coral50;\n\n .pn-toast-button {\n @include main.pn-focus(main.$warning, main.$coral200);\n\n &:hover {\n background-color: main.$coral200;\n }\n }\n\n .pn-ripple {\n background-color: main.$warning;\n }\n\n .pn-toast-icon .pn-icon-svg path {\n fill: main.$warning;\n }\n\n &[data-temporary] {\n border-color: main.$warning;\n }\n }\n\n &[data-temporary] {\n border-style: solid;\n border-width: 0.0625em;\n box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.2);\n }\n}\n","import type { PnLanguages } from '@/index';\nimport { awaitTopbar, en, ripple, reduceMotion } from '@/index';\nimport { Component, Host, Prop, h, Element, EventEmitter, Event, State, Watch } from '@stencil/core';\nimport {\n alert_info_circle,\n check_circle,\n alert_exclamation_triangle,\n alert_exclamation_circle,\n close,\n} from 'pn-design-assets/pn-assets/icons.js';\nimport { translations } from './translation';\n\n/*\n This component is able to fill many roles of a classic toast.\n * It has 4 different colors, a temporary state, hide button, icon and illustration support.\n \n The `pn-toast` will expand to its parent containers full width.\n * Either limit the parent width or set a CSS rule to your specific width if needed.\n /\n@Component({\n tag: 'pn-toast',\n styleUrl: 'pn-toast.scss',\n})\nexport class PnToast {\n toast: HTMLOutputElement;\n button: HTMLButtonElement;\n\n private readonly duration: number = 400;\n private animationDuration: number = this.duration;\n private animation: Animation;\n\n @Element() hostElement: HTMLElement;\n\n @State() isClosing = false;\n @State() isExpanding = false;\n\n @State() hasSlottedContent: boolean = false;\n\n /\n Set a title for the toast. Requires the `text` prop in order to work.\n * @description Can be used together with slotted content.\n /\n @Prop() heading?: string = '';\n /\n Set a paragraph of text for the toast.\n * @description Can be used together with slotted content.\n /\n @Prop() text?: string = '';\n /* Give the toast a HTML ID. /\n @Prop() toastId?: string;\n /\n Default color is blue, you also have the option of success (green), warning (orange) and error (red).\n * @category Visual\n /\n @Prop() appearance?: '' \| 'success' \| 'warning' \| 'error';\n /\n This will apply a shadow and border to the toast.\n * @category Visual\n /\n @Prop() temporary: boolean = false;\n /\n Set an SVG icon.\n * @category Visual\n /\n @Prop() icon?: string;\n /\n Set an SVG illustration.\n * @category Visual\n /\n @Prop() illustration?: string;\n /\n Control the visibility of the toast. If the `closable` prop is active, the toast will set the `hide` prop on its own.\n * @see {@link closable}\n * @category Features\n /\n @Prop({ mutable: true, reflect: true }) hide: boolean = false;\n /\n Show close button.\n * @category Features\n /\n @Prop() closable: boolean = false;\n /\n Manually set the language, only needed if the `closable` prop is enabled.\n * @see {@link closable}\n * @category Features\n /\n @Prop({ mutable: true }) language?: PnLanguages = null;\n\n @Watch('hide')\n handleHide() {\n if (reduceMotion()) this.animationDuration = 0;\n else this.animationDuration = this.duration;\n\n if (this.hide) this.closeToast();\n else this.openToast();\n }\n\n /* Event fired when the close button is pressed. /\n @Event() close: EventEmitter<boolean>;\n /\n This event is fired when the toast is fully hidden after the animation is finished.\n * Triggers from the close button or if the prop `hide` is set to true.\n **/\n @Event() hidden: EventEmitter<boolean>;\n\n async componentWillLoad() {\n if (this.hide) this.hostElement.style.height = '0';\n\n if (this.language === null) await awaitTopbar(this.hostElement);\n // Any text content at this stage means there is slotted content present.\n this.hasSlottedContent = !!this.hostElement.textContent;\n }\n\n componentDidLoad() {\n if (!!this.heading && !this.text && !this.hasSlottedContent)\n console.warn('The %s prop is only available if you use the %s prop or slotted content.', 'heading', 'text');\n }\n\n private getRect(element: HTMLElement): DOMRect {\n return element.getBoundingClientRect();\n }\n\n private openToast() {\n requestAnimationFrame(() => {\n const { scrollHeight } = this.hostElement;\n const { height } = this.getRect(this.hostElement);\n\n this.hostElement.style.height = `${height}px`;\n\n this.isExpanding = true;\n this.animateToast(true, `${height}px`, `${scrollHeight}px`);\n });\n }\n\n private closeToast() {\n const { scrollHeight, clientHeight } = this.hostElement;\n const height = this.isExpanding ? clientHeight : scrollHeight;\n this.hostElement.style.height = `0px`;\n\n this.isClosing = true;\n this.animateToast(false, `${height}px`, `0px`);\n }\n\n private animateToast(open: boolean, startHeight: string, endHeight: string) {\n this.cancelAnimations();\n this.animation = this.hostElement.animate(\n {\n height: [startHeight, endHeight],\n },\n {\n duration: this.animationDuration,\n easing: 'cubic-bezier(0.6, 0, 0.2, 1)',\n },\n );\n this.animation.onfinish = () => this.animationFinish();\n this.animation.oncancel = () => (open ? (this.isExpanding = false) : (this.isClosing = false));\n }\n\n private animationFinish() {\n this.cancelAnimations();\n if (!this.hide) this.hostElement.style.height = '';\n else this.hidden.emit(this.hide);\n this.isClosing = false;\n this.isExpanding = false;\n }\n\n private cancelAnimations() {\n if (this.animation) this.animation.cancel();\n }\n\n private handleClick(event: PointerEvent) {\n this.hide = true;\n this.close.emit(this.hide);\n ripple(event, this.toast);\n }\n\n private getIcon(): string {\n if (this.illustration) return '';\n if (this.icon) return this.icon;\n if (this.appearance === 'success') return check_circle;\n if (this.appearance === 'warning') return alert_exclamation_triangle;\n if (this.appearance === 'error') return alert_exclamation_circle;\n return alert_info_circle;\n }\n\n private getRole(): string {\n return this.appearance === 'error' ? 'alert' : 'status';\n }\n\n private showIcon(): boolean {\n return !this.illustration;\n }\n\n private showIllustration(): boolean {\n return !this.showIcon();\n }\n\n private showTitle(): boolean {\n return (this.hasSlottedContent \|\| !!this.text) && !!this.heading;\n }\n\n private translate(prop: string): string {\n return translations?.[prop]?.[this.language \|\| en] \|\| prop;\n }\n\n private hideToast() {\n return this.hide && !(this.isClosing \|\| this.isExpanding);\n }\n\n render() {\n return (\n <Host>\n <output\n id={this.toastId}\n class=\"pn-toast\"\n role={this.getRole()}\n data-appearance={this.appearance}\n data-temporary={this.temporary}\n data-hide={this.hideToast()}\n ref={el => (this.toast = el)}\n >\n {this.showIcon() && <pn-icon class=\"pn-toast-icon\" icon={this.getIcon()} />}\n\n <div class=\"pn-toast-content\">\n {this.showTitle() && <h4 class=\"pn-toast-heading\">{this.heading}</h4>}\n {this.text && <p class=\"pn-toast-text\">{this.text}</p>}\n <slot />\n </div>\n\n {this.showIllustration() && <pn-illustration illustration={this.illustration} width=\"5.5em\" height=\"5.5em\" />}\n\n {this.closable && (\n <button\n class=\"pn-toast-button\"\n type=\"button\"\n aria-label={this.translate('HIDE')}\n onClick={(event: PointerEvent) => this.handleClick(event)}\n ref={el => (this.button = el)}\n >\n <pn-icon icon={close} />\n </button>\n )}\n </output>\n </Host>\n );\n }\n}\n"],"version":3}

package/umd/modules/@postnord/web-components/cjs/pn-toggle-switch.cjs.entry.js CHANGED Viewed

@@ -49,7 +49,7 @@ const PnToggleSwitch = class {
         return this.showHelpertext() ? this.idHelper : null;
     }
     render() {
-        return (index.h(index.Host, { key: 'ab6fe1d4472bf8a817d28c503dd4268af259c34d' }, index.h("div", { key: 'f16a8d97ba68161a192f1b1b3b254c21f0ff804b', class: "pn-toggle" }, this.label && (index.h("div", { key: 'c3666dc49b09637cc10b0bdc12e573d57e005268', class: "pn-toggle-content" }, index.h("label", { key: '977c13dfd61a8b10a8dd2606a750d0716fe30adb', htmlFor: this.toggleid, class: "pn-toggle-label" }, index.h("span", { key: '3c4399a7456fc446f8279dd7d46b06e5fe663e06' }, this.label)), index.h("p", { key: 'e300cfac23f9f290641f8fc345611a1cebf5b173', id: this.idHelper, class: "pn-toggle-helper", hidden: !this.showHelpertext() }, this.hasHelpertextProp() && index.h("span", { key: '15f3b3bceafb9f868d16d4623cc977b58add2a6c' }, this.helpertext), index.h("slot", { key: '6a19bcbc616bf74371d145545605bfbe6873a707', name: "helpertext" })))), index.h("div", { key: '6b4590a7e6b32a684d11661baa9ced6b482b17d3', class: "pn-toggle-button", "data-small": this.small, "data-large": this.large, "data-loading": this.loading }, index.h("input", { key: 'afa8576dfd3ae59631ae54049b95a268dc139e95', id: this.toggleid, class: "pn-toggle-element", type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-describedby": this.describedBy() }), index.h("div", { key: 'ad9ae48c3b5f2a72b5067f71b34f8410766f09c8', class: "pn-toggle-bg" }), index.h("div", { key: '644f991914000783c81dc3f3c0a84406e117c177', class: "pn-toggle-circle" }, index.h("svg", { key: '9d6c808e21fb87486ceec83deb990fcbc738a8f7', class: "pn-toggle-check", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, index.h("polyline", { key: '796e5a93439baf1bbb88cf7ac50f2960a7ca819c', points: "4,12 9,17 20,6", "stroke-width": "3" })), index.h("pn-spinner", { key: '55995adf95f2de9658a54f06dd6156fd006aed4b', size: 1.125 }))))));
+        return (index.h(index.Host, { key: '9806bc50780935f442660701539941efd05d92d5' }, index.h("div", { key: 'a2babfadbf6443da619b35f9d8cb09a7b0bd4a59', class: "pn-toggle" }, this.label && (index.h("div", { key: '525510807f8f7e505b589c8055f277b196f813cd', class: "pn-toggle-content" }, index.h("label", { key: 'cc58536e57de5a852762de90c5edf0ad2f92a05f', htmlFor: this.toggleid, class: "pn-toggle-label" }, index.h("span", { key: 'a43dba51d8becebf1f508300ccb72530400535c7' }, this.label)), index.h("p", { key: 'd86c250e53ceb45830444a13a8f2c609173542de', id: this.idHelper, class: "pn-toggle-helper", hidden: !this.showHelpertext() }, this.hasHelpertextProp() && index.h("span", { key: '02a55f8a4c9da87b33b31ecd3d30ad6a73d70714' }, this.helpertext), index.h("slot", { key: '065675c0046d2cbdd581ef0c5ec745a5b03393eb', name: "helpertext" })))), index.h("div", { key: '6cbc83780caacb03d778aa2b9f882858231206ca', class: "pn-toggle-button", "data-small": this.small, "data-large": this.large, "data-loading": this.loading }, index.h("input", { key: '1a7062923c2668cb41b4c4b14f948c4074cf416e', id: this.toggleid, class: "pn-toggle-element", type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-describedby": this.describedBy() }), index.h("div", { key: '3a85ff013cb29f5c7bef3d088ec782a53b3924ac', class: "pn-toggle-bg" }), index.h("div", { key: '955a78cfd16980bd437e03e51f3cde49185fe954', class: "pn-toggle-circle" }, index.h("svg", { key: 'fc0802cf056f5413c1228584c53abae8b21a8813', class: "pn-toggle-check", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, index.h("polyline", { key: 'e881ac5ae0b5838293ac2e5af74a0c56ddd85687', points: "4,12 9,17 20,6", "stroke-width": "3" })), index.h("pn-spinner", { key: '78e5dd0484be70fc75315475daffed5b2e63c8bb', size: 1.125 }))))));
     }
     static get watchers() { return {
         "toggleid": ["handleHelperId"]

package/umd/modules/@postnord/web-components/cjs/pn-tooltip.cjs.entry.js CHANGED Viewed

@@ -81,7 +81,7 @@ const PnTooltip = class {
         }, time);
     }
     render() {
-        return (index.h("button", { key: 'a421dbdcba2a38e9adc8f7364c5ff185372f1deb', class: "pn-tooltip", "data-light": this.light, "data-warning": this.warning, "data-downwards": this.downwards, "data-open": this.open, ref: el => (this.button = el) }, index.h("pn-icon", { key: '61409db0c58289bf1b606e0dc323266c0322b64b', icon: this.getSymbol(), "data-simple": !!this.tooltip }), index.h("div", { key: '2164d90ba6dabac1309d751772c9ae20c9c118c1', class: "pn-tooltip-content", "data-simple": !!this.tooltip, ref: el => (this.content = el) }, this.tooltip, index.h("div", { key: 'e30e4bdee6fe1666b5ad6154773a06fd5649dd92', hidden: !!this.tooltip }, index.h("slot", { key: '4456ff966d227bbca13599565c9ceb0adb6c91d6' })))));
+        return (index.h("button", { key: '7b0253721fbc44e83afc6daa41d984e9dbf16c0b', class: "pn-tooltip", "data-light": this.light, "data-warning": this.warning, "data-downwards": this.downwards, "data-open": this.open, ref: el => (this.button = el) }, index.h("pn-icon", { key: 'd6086755274289dad52757b42aa508927d0746d2', icon: this.getSymbol(), "data-simple": !!this.tooltip }), index.h("div", { key: 'e155c88aa2ee2b33c5622741efa59bb07ba548c7', class: "pn-tooltip-content", "data-simple": !!this.tooltip, ref: el => (this.content = el) }, this.tooltip, index.h("div", { key: '62a3db64ee0d4e3da5d3e2f414850f3792235f1c', hidden: !!this.tooltip }, index.h("slot", { key: 'e769400a4d5e1ceddc7fb6a953fe37eeea1b4218' })))));
     }
     static get watchers() { return {
         "open": ["openHandler"]

package/umd/modules/@postnord/web-components/cjs/pn-zipcode-search.cjs.entry.js CHANGED Viewed

@@ -123,7 +123,7 @@ const PnZipcodeSearch = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'cc6f1ccb014330d11b8b75fa09e2f39da079a7f4' }, index.h("pn-search-field", { key: '60bbf5751e937c820afbf997a3f51ba9ac85d762', label: this.translation('PLACEHOLDER_TEXT'), value: this.value, searchid: this.searchId, loading: this.loading, button: "icon", buttonLabel: this.translation('SEARCH'), placeholder: this.translation('PLACEHOLDER_TEXT'), onSearch: e => this.handleSearch(e.detail) }), this.renderSearchResult(), this.renderErrorMessage()));
+        return (index.h(index.Host, { key: 'ab60b367efe4208942f13a524f10325323d1f499' }, index.h("pn-search-field", { key: '6449ae03e55e4bb228b70245863aa0448ce87957', label: this.translation('PLACEHOLDER_TEXT'), value: this.value, searchid: this.searchId, loading: this.loading, button: "icon", buttonLabel: this.translation('SEARCH'), placeholder: this.translation('PLACEHOLDER_TEXT'), onSearch: e => this.handleSearch(e.detail) }), this.renderSearchResult(), this.renderErrorMessage()));
     }
 };
 PnZipcodeSearch.style = PnZipcodeSearchStyle0;

package/umd/modules/@postnord/web-components/cjs/postnord-web-components.cjs.js CHANGED Viewed

@@ -44,7 +44,7 @@ var patchCloneNodeFix = (HTMLElementPrototype) => {
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy(JSON.parse("[[\"pn-file-upload.cjs\",[[4,\"pn-file-upload\",{\"label\":[1],\"helpertext\":[1],\"language\":[1],\"hideProgress\":[4,\"hide-progress\"],\"name\":[1],\"accept\":[1],\"maxSize\":[1,\"max-size\"],\"capture\":[1],\"limit\":[2],\"multiple\":[1028],\"required\":[4],\"disabled\":[4],\"files\":[32],\"isHovering\":[32],\"startUpload\":[64],\"clearUpload\":[64],\"removeFile\":[64],\"updateFile\":[64]},null,{\"limit\":[\"handleLimit\"],\"maxSize\":[\"handleMaxBytes\"]}]]],[\"pn-ocr-search.cjs\",[[0,\"pn-ocr-search\",{\"language\":[1],\"loading\":[32],\"error\":[32],\"ocrNumber\":[32],\"searchSuccess\":[32],\"invalidOcrNumber\":[32]}]]],[\"pn-pagination.cjs\",[[0,\"pn-pagination\",{\"label\":[1],\"urlTemplate\":[1,\"url-template\"],\"paginationId\":[1,\"pagination-id\"],\"language\":[1],\"page\":[1538],\"pages\":[1026],\"pagesVisible\":[1026,\"pages-visible\"],\"rows\":[1026],\"rowsList\":[1,\"rows-list\"],\"rowsLabel\":[1,\"rows-label\"],\"list\":[32]},null,{\"page\":[\"handlePage\"],\"pages\":[\"handlePages\"],\"pagesVisible\":[\"handlePagesVisible\"]}]]],[\"pn-zipcode-search.cjs\",[[0,\"pn-zipcode-search\",{\"language\":[1],\"value\":[1025],\"validZipCode\":[32],\"loading\":[32],\"showResult\":[32],\"zipCodeSearchResult\":[32],\"error\":[32],\"errorMessage\":[32]}]]],[\"pn-action-menu.cjs\",[[0,\"pn-action-menu\",{\"options\":[16],\"button\":[16],\"menuId\":[1,\"menu-id\"],\"language\":[1025],\"open\":[1540],\"menuUp\":[4,\"menu-up\"],\"menuLeft\":[4,\"menu-left\"],\"smallMenu\":[32],\"upwards\":[32],\"activeSubmenu\":[32],\"isClosing\":[32],\"isExpanding\":[32]},[[9,\"resize\",\"handleResize\"]],{\"options\":[\"handleOptions\"],\"open\":[\"openHandler\"],\"menuId\":[\"handleMenuId\"]}]]],[\"pn-button-dropdown.cjs\",[[4,\"pn-button-dropdown\",{\"label\":[1],\"icon\":[1],\"appearance\":[1],\"variant\":[1],\"small\":[4],\"tooltip\":[1],\"open\":[1540],\"right\":[32],\"top\":[32]},null,{\"open\":[\"openHandler\"]}]]],[\"pn-counter.cjs\",[[0,\"pn-counter\",{\"label\":[1],\"helpertext\":[1],\"value\":[1538],\"counterid\":[1],\"language\":[1],\"labelDecrease\":[1,\"label-decrease\"],\"labelIncrease\":[1,\"label-increase\"],\"minMessage\":[1,\"min-message\"],\"maxMessage\":[1,\"max-message\"],\"name\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"list\":[1],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"clearAriaTimer\":[32],\"displaySrValue\":[32],\"showMinMaxMessage\":[32],\"lastDispatchedValue\":[32],\"interactType\":[32]},null,{\"value\":[\"watchValue\"],\"counterid\":[\"handleId\"]}]]],[\"pn-date-picker.cjs\",[[4,\"pn-date-picker\",{\"labelFrom\":[1,\"label-from\"],\"labelTo\":[1,\"label-to\"],\"helpertext\":[1],\"start\":[1025],\"end\":[1025],\"format\":[1],\"language\":[1],\"dateId\":[1,\"date-id\"],\"name\":[1],\"placeholder\":[1],\"endPlaceholder\":[1,\"end-placeholder\"],\"autocomplete\":[1],\"list\":[1],\"listEnd\":[1,\"list-end\"],\"pattern\":[1],\"range\":[4],\"rangeLimit\":[2,\"range-limit\"],\"view\":[1025],\"calendarUp\":[4,\"calendar-up\"],\"weekNumbers\":[4,\"week-numbers\"],\"disableTypeAhead\":[4,\"disable-type-ahead\"],\"disableWeekends\":[4,\"disable-weekends\"],\"disabledDates\":[1,\"disabled-dates\"],\"disableMaxLength\":[4,\"disable-max-length\"],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"error\":[1],\"invalid\":[4],\"minDate\":[1025,\"min-date\"],\"maxDate\":[1025,\"max-date\"],\"open\":[32],\"openUp\":[32],\"selectingTo\":[32],\"grid\":[32],\"viewYearStart\":[32],\"dateViewYear\":[32],\"dateViewMonth\":[32],\"dateViewDate\":[32],\"showHelperSlot\":[32],\"showErrorSlot\":[32],\"isClosing\":[32],\"isExpanding\":[32]},[[9,\"resize\",\"handleResize\"]],{\"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\"]}]]],[\"pn-input.cjs\",[[4,\"pn-input\",{\"label\":[1],\"helpertext\":[1],\"inputid\":[1],\"value\":[1025],\"language\":[1],\"icon\":[1],\"textPrefix\":[1,\"text-prefix\"],\"textSuffix\":[1,\"text-suffix\"],\"type\":[1025],\"name\":[1],\"placeholder\":[1],\"autocomplete\":[1],\"maxlength\":[2],\"inputmode\":[1],\"list\":[1],\"pattern\":[1],\"min\":[8],\"max\":[8],\"step\":[8],\"arialabel\":[1],\"ariacontrols\":[1],\"required\":[4],\"disabled\":[4],\"readonly\":[4],\"valid\":[4],\"invalid\":[4],\"error\":[1],\"offsetLeft\":[32],\"offsetRight\":[32],\"showHelperSlot\":[32],\"showErrorSlot\":[32],\"showPassword\":[32]},null,{\"textPrefix\":[\"handleOffset\"],\"textSuffix\":[\"handleOffset\"],\"helpertext\":[\"handleMessage\"],\"error\":[\"handleMessage\"]}]]],[\"pn-modal.cjs\",[[4,\"pn-modal\",{\"label\":[1],\"helpertext\":[1],\"language\":[1],\"open\":[1540],\"persistent\":[4],\"hideClose\":[4,\"hide-close\"],\"allowOverflow\":[4,\"allow-overflow\"],\"sheet\":[4],\"maxWidth\":[1,\"max-width\"],\"isClosing\":[32],\"isOpening\":[32],\"removeOverflow\":[32]},[[9,\"resize\",\"handleOverflow\"]],{\"open\":[\"handleOpen\"],\"maxWidth\":[\"handleMaxWidth\"]}]]],[\"pn-tablist.cjs\",[[4,\"pn-tablist\",{\"label\":[1],\"value\":[1537],\"small\":[4],\"stackedicons\":[4],\"language\":[1],\"showScrollArrows\":[32],\"arrowLeft\":[32],\"arrowRight\":[32]},[[0,\"setActiveTab\",\"setActiveTabHandler\"],[9,\"resize\",\"rerender\"],[0,\"tabEnter\",\"handleEnter\"],[0,\"tabLeave\",\"handleLeave\"]],{\"value\":[\"setValue\"],\"showScrollArrows\":[\"scrollHandler\"]}]]],[\"pn-footer.cjs\",[[0,\"pn-footer\",{\"market\":[1],\"language\":[1]}]]],[\"pn-header.cjs\",[[4,\"pn-header\",{\"heading\":[1],\"maxWidth\":[1,\"max-width\"],\"goBackHref\":[1,\"go-back-href\"],\"goBackText\":[1,\"go-back-text\"],\"language\":[1],\"goBackTextTranslated\":[32]},null,{\"maxWidth\":[\"setMaxWidth\"],\"language\":[\"setLanguage\"]}]]],[\"pn-tile.cjs\",[[4,\"pn-tile\",{\"label\":[1],\"text\":[1],\"url\":[1],\"target\":[1],\"rel\":[1],\"illustration\":[1],\"icon\":[1],\"horizontal\":[4],\"visibleOutline\":[32]}]]],[\"pn-toast.cjs\",[[4,\"pn-toast\",{\"heading\":[1],\"text\":[1],\"toastId\":[1,\"toast-id\"],\"appearance\":[1],\"temporary\":[4],\"icon\":[1],\"illustration\":[1],\"hide\":[1540],\"closable\":[4],\"language\":[1025],\"isClosing\":[32],\"isExpanding\":[32],\"hasSlottedContent\":[32]},null,{\"hide\":[\"handleHide\"]}]]],[\"pn-accordion-row.cjs\",[[4,\"pn-accordion-row\",{\"label\":[1025],\"state\":[1028],\"buttonid\":[1],\"contentid\":[1],\"transparent\":[4],\"isClosing\":[32],\"isExpanding\":[32]},[[0,\"rowstate\",\"handleRowState\"]]]]],[\"pn-checkbox.cjs\",[[0,\"pn-checkbox\",{\"label\":[1],\"value\":[513],\"name\":[1],\"checked\":[4],\"helpertext\":[1],\"checkboxid\":[1],\"disabled\":[4],\"required\":[4],\"invalid\":[4],\"indeterminate\":[1028],\"tile\":[4],\"icon\":[1]},[[0,\"change\",\"handlechange\"]],{\"checkboxid\":[\"handleId\"]}]]],[\"pn-read-only-button.cjs\",[[4,\"pn-read-only-button\",{\"icon\":[1],\"leftIcon\":[4,\"left-icon\"],\"iconOnly\":[4,\"icon-only\"],\"small\":[4],\"language\":[1],\"readOnlyModeText\":[32],\"tooltipOpen\":[32],\"tooltipEl\":[32],\"tooltipDx\":[32]},null,{\"language\":[\"setReadOnlyModeText\"],\"tooltipOpen\":[\"openHandler\"]}]]],[\"pn-segmented-control.cjs\",[[4,\"pn-segmented-control\",{\"name\":[1],\"value\":[1025],\"showScrollArrows\":[32],\"showLeftArrow\":[32],\"showRightArrow\":[32]},[[0,\"change\",\"changeHandler\"],[9,\"resize\",\"handleResize\"],[0,\"segmentHover\",\"handleHover\"]],{\"value\":[\"valueHandler\"]}]]],[\"pn-tooltip.cjs\",[[4,\"pn-tooltip\",{\"warning\":[4],\"light\":[4],\"tooltip\":[1],\"downwards\":[32],\"open\":[32],\"deltaX\":[32]},null,{\"open\":[\"openHandler\"]}]]],[\"pn-accordion.cjs\",[[4,\"pn-accordion\",{\"single\":[4],\"transparent\":[4]},[[0,\"togglerow\",\"handleSingleRow\"]]]]],[\"pn-icon_2.cjs\",[[0,\"pn-tag\",{\"label\":[1],\"icon\":[1],\"appearance\":[1],\"dark\":[4],\"large\":[4],\"small\":[4],\"xsmall\":[4]}],[0,\"pn-icon\",{\"icon\":[1],\"small\":[516],\"color\":[1]},null,{\"color\":[\"handleColor\"]}]]],[\"pn-card.cjs\",[[4,\"pn-card\",{\"label\":[1],\"labelTag\":[1,\"label-tag\"],\"overline\":[1],\"text\":[1],\"cardId\":[1,\"card-id\"],\"horizontal\":[4],\"reverse\":[4],\"aspectRatio\":[1,\"aspect-ratio\"],\"href\":[1],\"hrefLabel\":[1,\"href-label\"],\"target\":[1],\"rel\":[1],\"icon\":[1],\"visibleOutline\":[32]},null,{\"cardId\":[\"watchCardId\"]}]]],[\"pn-choice-chip.cjs\",[[4,\"pn-choice-chip\",{\"label\":[1],\"value\":[513],\"name\":[1],\"checked\":[1028],\"radio\":[4],\"choiceid\":[1],\"icon\":[1],\"required\":[4],\"disabled\":[4],\"small\":[4],\"large\":[4],\"moving\":[32]}]]],[\"pn-fieldset.cjs\",[[4,\"pn-fieldset\",{\"legend\":[1],\"helpertext\":[1],\"fieldsetId\":[1,\"fieldset-id\"],\"form\":[1],\"name\":[1],\"disabled\":[4],\"invalid\":[4],\"error\":[1]},null,{\"fieldsetId\":[\"handleId\"]}]]],[\"pn-multiselect.cjs\",[[4,\"pn-multiselect\",{\"label\":[1],\"helpertext\":[1],\"placeholder\":[1],\"name\":[1],\"selectId\":[1,\"select-id\"],\"selectName\":[1,\"select-name\"],\"icon\":[1],\"language\":[1],\"options\":[1040],\"selectAll\":[4,\"select-all\"],\"allValue\":[1,\"all-value\"],\"search\":[4],\"searchQuery\":[1025,\"search-query\"],\"itemCount\":[2,\"item-count\"],\"maxHeight\":[1,\"max-height\"],\"top\":[4],\"bottom\":[4],\"required\":[4],\"disabled\":[4],\"invalid\":[4],\"error\":[1],\"isSearching\":[32],\"open\":[32],\"upwards\":[32],\"srMessage\":[32],\"isClosing\":[32],\"isExpanding\":[32]},[[9,\"resize\",\"handleResize\"]],{\"open\":[\"handleOpen\"],\"search\":[\"handleSearch\"],\"searchQuery\":[\"handleSearchQuery\"],\"selectId\":[\"handleSelectId\"]}]]],[\"pn-page-nav.cjs\",[[4,\"pn-page-nav\",{\"value\":[1025],\"dropdown\":[8],\"navid\":[1],\"currentSelection\":[32],\"showScrollArrows\":[32],\"showLeftArrow\":[32],\"showRightArrow\":[32],\"dropdownOpen\":[32],\"dropdownLinks\":[32],\"dropdownActive\":[32]},[[0,\"itemselection\",\"changeHandler\"],[9,\"resize\",\"handleResize\"]],{\"value\":[\"valueHandler\"],\"dropdownOpen\":[\"dropdownHandler\"]}]]],[\"pn-page-nav-dropdown-item.cjs\",[[4,\"pn-page-nav-dropdown-item\",{\"value\":[1],\"href\":[1],\"active\":[4]}]]],[\"pn-page-nav-item.cjs\",[[4,\"pn-page-nav-item\",{\"value\":[1],\"href\":[1],\"icon\":[1]}]]],[\"pn-radio-button.cjs\",[[0,\"pn-radio-button\",{\"label\":[1],\"value\":[513],\"name\":[1],\"checked\":[4],\"helpertext\":[1],\"radioid\":[1],\"disabled\":[4],\"required\":[4],\"invalid\":[4],\"tile\":[4],\"icon\":[1]},null,{\"radioid\":[\"handleId\"]}]]],[\"pn-segment.cjs\",[[4,\"pn-segment\",{\"label\":[1],\"name\":[1],\"value\":[1],\"selected\":[4],\"segmentid\":[1],\"icon\":[1],\"disabled\":[4]}]]],[\"pn-tab.cjs\",[[4,\"pn-tab\",{\"label\":[1],\"value\":[1],\"href\":[1],\"icon\":[1],\"ariacontrols\":[1],\"tabid\":[1],\"activeTab\":[1,\"active-tab\"]}]]],[\"pn-button_2.cjs\",[[4,\"pn-button\",{\"label\":[1],\"appearance\":[1],\"variant\":[1],\"small\":[4],\"loading\":[516],\"icon\":[1],\"iconOnly\":[4,\"icon-only\"],\"leftIcon\":[4,\"left-icon\"],\"tooltip\":[1],\"tooltipUp\":[4,\"tooltip-up\"],\"type\":[1],\"form\":[1],\"href\":[1],\"rel\":[1],\"target\":[1],\"download\":[1],\"buttonId\":[1,\"button-id\"],\"arialabel\":[1],\"arialabelledby\":[1],\"ariacurrent\":[1],\"ariacontrols\":[1],\"ariapressed\":[1],\"ariahaspopup\":[1],\"ariaexpanded\":[1],\"noTab\":[4,\"no-tab\"],\"tooltipOpen\":[32],\"tooltipUpwards\":[32]},null,{\"tooltipOpen\":[\"openHandler\"],\"tooltip\":[\"iconOnlyHandler\"]}],[0,\"pn-spinner\",{\"light\":[4],\"size\":[2]}]]],[\"pn-toggle-switch.cjs\",[[4,\"pn-toggle-switch\",{\"label\":[1],\"helpertext\":[1],\"checked\":[1028],\"toggleid\":[1],\"name\":[1],\"value\":[1],\"small\":[4],\"large\":[4],\"disabled\":[4],\"loading\":[4]},null,{\"toggleid\":[\"handleHelperId\"]}]]],[\"pn-progress-indicator.cjs\",[[4,\"pn-progress-indicator\",{\"activeStep\":[1026,\"active-step\"]},[[0,\"setactivestep\",\"setActiveStepHandler\"]]]]],[\"pn-progress-indicator-step.cjs\",[[4,\"pn-progress-indicator-step\",{\"activeStep\":[2,\"active-step\"],\"index\":[2],\"name\":[1],\"checked\":[4],\"active\":[1],\"activated\":[32],\"done\":[32]}]]],[\"pn-progress-stepper.cjs\",[[0,\"pn-progress-stepper\",{\"label\":[1],\"progressStepperId\":[1,\"progress-stepper-id\"],\"language\":[1],\"totalSteps\":[1026,\"total-steps\"],\"currentStep\":[1026,\"current-step\"],\"stepName\":[1,\"step-name\"],\"dots\":[4],\"builtInLabel\":[32],\"progressValue\":[32]},null,{\"currentStep\":[\"stepWatchers\"],\"totalSteps\":[\"stepWatchers\"],\"language\":[\"watchLanguage\"]}]]],[\"pn-table.cjs\",[[4,\"pn-table\",{\"gray\":[4],\"bordered\":[4],\"striped\":[4]}]]],[\"pn-textarea.cjs\",[[0,\"pn-textarea\",{\"label\":[1],\"value\":[1],\"helpertext\":[1],\"textareaid\":[1],\"name\":[1],\"form\":[1],\"rows\":[2],\"cols\":[2],\"wrap\":[1],\"maxlength\":[2],\"autocomplete\":[1],\"spellcheck\":[4],\"placeholder\":[1],\"resize\":[4],\"required\":[4],\"valid\":[4],\"invalid\":[4],\"error\":[1],\"disabled\":[4],\"readonly\":[4],\"content\":[32]}]]],[\"pn-progress-bar.cjs\",[[0,\"pn-progress-bar\",{\"label\":[1],\"progress\":[2],\"progressText\":[1,\"progress-text\"],\"successText\":[1,\"success-text\"],\"error\":[1],\"progressId\":[1,\"progress-id\"],\"progressPercentage\":[32]},null,{\"progress\":[\"setProgress\"]}]]],[\"pn-select.cjs\",[[4,\"pn-select\",{\"label\":[1],\"helpertext\":[1],\"selectId\":[1,\"select-id\"],\"icon\":[1],\"name\":[1],\"form\":[1],\"autocomplete\":[1],\"required\":[4],\"disabled\":[4],\"invalid\":[4],\"error\":[1]}]]],[\"pn-search-field.cjs\",[[0,\"pn-search-field\",{\"label\":[1],\"value\":[1025],\"placeholder\":[1],\"searchid\":[1],\"name\":[1],\"autocomplete\":[1],\"list\":[1],\"language\":[1],\"disabled\":[4],\"required\":[4],\"loading\":[4],\"button\":[1],\"buttonLabel\":[1,\"button-label\"],\"buttonLight\":[4,\"button-light\"]},[[0,\"input\",\"inputHandler\"]]]]],[\"pn-text-link.cjs\",[[4,\"pn-text-link\",{\"label\":[1],\"href\":[1],\"light\":[4],\"icon\":[1],\"leftIcon\":[4,\"left-icon\"],\"download\":[1],\"hreflang\":[1],\"media\":[1],\"referrerpolicy\":[1],\"rel\":[1],\"target\":[1],\"linkid\":[1]}]]],[\"pn-illustration.cjs\",[[0,\"pn-illustration\",{\"illustration\":[1],\"width\":[1025],\"height\":[1025],\"fill\":[4]},null,{\"fill\":[\"handleFill\"]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"pn-file-upload.cjs\",[[4,\"pn-file-upload\",{\"label\":[1],\"helpertext\":[1],\"language\":[1],\"hideProgress\":[4,\"hide-progress\"],\"name\":[1],\"accept\":[1],\"maxSize\":[1,\"max-size\"],\"capture\":[1],\"limit\":[2],\"multiple\":[1028],\"required\":[4],\"disabled\":[4],\"files\":[32],\"isHovering\":[32],\"startUpload\":[64],\"clearUpload\":[64],\"removeFile\":[64],\"updateFile\":[64]},null,{\"limit\":[\"handleLimit\"],\"maxSize\":[\"handleMaxBytes\"]}]]],[\"pn-ocr-search.cjs\",[[0,\"pn-ocr-search\",{\"language\":[1],\"loading\":[32],\"error\":[32],\"ocrNumber\":[32],\"searchSuccess\":[32],\"invalidOcrNumber\":[32]}]]],[\"pn-pagination.cjs\",[[0,\"pn-pagination\",{\"label\":[1],\"urlTemplate\":[1,\"url-template\"],\"paginationId\":[1,\"pagination-id\"],\"language\":[1],\"page\":[1538],\"pages\":[1026],\"pagesVisible\":[1026,\"pages-visible\"],\"rows\":[1026],\"rowsList\":[1,\"rows-list\"],\"rowsLabel\":[1,\"rows-label\"],\"list\":[32]},null,{\"page\":[\"handlePage\"],\"pages\":[\"handlePages\"],\"pagesVisible\":[\"handlePagesVisible\"]}]]],[\"pn-zipcode-search.cjs\",[[0,\"pn-zipcode-search\",{\"language\":[1],\"value\":[1025],\"validZipCode\":[32],\"loading\":[32],\"showResult\":[32],\"zipCodeSearchResult\":[32],\"error\":[32],\"errorMessage\":[32]}]]],[\"pn-action-menu.cjs\",[[0,\"pn-action-menu\",{\"options\":[16],\"button\":[16],\"menuId\":[1,\"menu-id\"],\"language\":[1025],\"open\":[1540],\"menuUp\":[4,\"menu-up\"],\"menuLeft\":[4,\"menu-left\"],\"smallMenu\":[32],\"upwards\":[32],\"activeSubmenu\":[32],\"isClosing\":[32],\"isExpanding\":[32]},[[9,\"resize\",\"handleResize\"]],{\"options\":[\"handleOptions\"],\"open\":[\"openHandler\"],\"menuId\":[\"handleMenuId\"]}]]],[\"pn-button-dropdown.cjs\",[[4,\"pn-button-dropdown\",{\"label\":[1],\"icon\":[1],\"appearance\":[1],\"variant\":[1],\"small\":[4],\"tooltip\":[1],\"open\":[1540],\"right\":[32],\"top\":[32]},null,{\"open\":[\"openHandler\"]}]]],[\"pn-counter.cjs\",[[0,\"pn-counter\",{\"label\":[1],\"helpertext\":[1],\"value\":[1538],\"counterid\":[1],\"language\":[1],\"labelDecrease\":[1,\"label-decrease\"],\"labelIncrease\":[1,\"label-increase\"],\"minMessage\":[1,\"min-message\"],\"maxMessage\":[1,\"max-message\"],\"name\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"list\":[1],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"clearAriaTimer\":[32],\"displaySrValue\":[32],\"showMinMaxMessage\":[32],\"lastDispatchedValue\":[32],\"interactType\":[32]},null,{\"value\":[\"watchValue\"],\"counterid\":[\"handleId\"]}]]],[\"pn-date-picker.cjs\",[[4,\"pn-date-picker\",{\"labelFrom\":[1,\"label-from\"],\"labelTo\":[1,\"label-to\"],\"helpertext\":[1],\"start\":[1025],\"end\":[1025],\"format\":[1],\"language\":[1],\"dateId\":[1,\"date-id\"],\"name\":[1],\"placeholder\":[1],\"endPlaceholder\":[1,\"end-placeholder\"],\"autocomplete\":[1],\"list\":[1],\"listEnd\":[1,\"list-end\"],\"pattern\":[1],\"range\":[4],\"rangeLimit\":[2,\"range-limit\"],\"view\":[1025],\"calendarUp\":[4,\"calendar-up\"],\"weekNumbers\":[4,\"week-numbers\"],\"disableTypeAhead\":[4,\"disable-type-ahead\"],\"disableWeekends\":[4,\"disable-weekends\"],\"disabledDates\":[1,\"disabled-dates\"],\"disableMaxLength\":[4,\"disable-max-length\"],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"error\":[1],\"invalid\":[4],\"minDate\":[1025,\"min-date\"],\"maxDate\":[1025,\"max-date\"],\"open\":[32],\"openUp\":[32],\"selectingTo\":[32],\"grid\":[32],\"viewYearStart\":[32],\"dateViewYear\":[32],\"dateViewMonth\":[32],\"dateViewDate\":[32],\"showHelperSlot\":[32],\"showErrorSlot\":[32],\"isClosing\":[32],\"isExpanding\":[32]},[[9,\"resize\",\"handleResize\"]],{\"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\"]}]]],[\"pn-input.cjs\",[[4,\"pn-input\",{\"label\":[1],\"helpertext\":[1],\"inputid\":[1],\"value\":[1025],\"language\":[1],\"icon\":[1],\"textPrefix\":[1,\"text-prefix\"],\"textSuffix\":[1,\"text-suffix\"],\"type\":[1025],\"name\":[1],\"placeholder\":[1],\"autocomplete\":[1],\"maxlength\":[2],\"inputmode\":[1],\"list\":[1],\"pattern\":[1],\"min\":[8],\"max\":[8],\"step\":[8],\"arialabel\":[1],\"ariacontrols\":[1],\"required\":[4],\"disabled\":[4],\"readonly\":[4],\"valid\":[4],\"invalid\":[4],\"error\":[1],\"offsetLeft\":[32],\"offsetRight\":[32],\"showHelperSlot\":[32],\"showErrorSlot\":[32],\"showPassword\":[32]},null,{\"textPrefix\":[\"handleOffset\"],\"textSuffix\":[\"handleOffset\"],\"helpertext\":[\"handleMessage\"],\"error\":[\"handleMessage\"]}]]],[\"pn-modal.cjs\",[[4,\"pn-modal\",{\"label\":[1],\"helpertext\":[1],\"language\":[1],\"open\":[1540],\"persistent\":[4],\"hideClose\":[4,\"hide-close\"],\"allowOverflow\":[4,\"allow-overflow\"],\"sheet\":[4],\"maxWidth\":[1,\"max-width\"],\"isClosing\":[32],\"isOpening\":[32]},null,{\"open\":[\"handleOpen\"],\"maxWidth\":[\"handleMaxWidth\"]}]]],[\"pn-tablist.cjs\",[[4,\"pn-tablist\",{\"label\":[1],\"value\":[1537],\"small\":[4],\"stackedicons\":[4],\"language\":[1],\"showScrollArrows\":[32],\"arrowLeft\":[32],\"arrowRight\":[32]},[[0,\"setActiveTab\",\"setActiveTabHandler\"],[9,\"resize\",\"rerender\"],[0,\"tabEnter\",\"handleEnter\"],[0,\"tabLeave\",\"handleLeave\"]],{\"value\":[\"setValue\"],\"showScrollArrows\":[\"scrollHandler\"]}]]],[\"pn-footer.cjs\",[[0,\"pn-footer\",{\"market\":[1],\"language\":[1]}]]],[\"pn-header.cjs\",[[4,\"pn-header\",{\"heading\":[1],\"maxWidth\":[1,\"max-width\"],\"goBackHref\":[1,\"go-back-href\"],\"goBackText\":[1,\"go-back-text\"],\"language\":[1],\"goBackTextTranslated\":[32]},null,{\"maxWidth\":[\"setMaxWidth\"],\"language\":[\"setLanguage\"]}]]],[\"pn-tile.cjs\",[[4,\"pn-tile\",{\"label\":[1],\"text\":[1],\"url\":[1],\"target\":[1],\"rel\":[1],\"illustration\":[1],\"icon\":[1],\"horizontal\":[4],\"visibleOutline\":[32]}]]],[\"pn-toast.cjs\",[[4,\"pn-toast\",{\"heading\":[1],\"text\":[1],\"toastId\":[1,\"toast-id\"],\"appearance\":[1],\"temporary\":[4],\"icon\":[1],\"illustration\":[1],\"hide\":[1540],\"closable\":[4],\"language\":[1025],\"isClosing\":[32],\"isExpanding\":[32],\"hasSlottedContent\":[32]},null,{\"hide\":[\"handleHide\"]}]]],[\"pn-accordion-row.cjs\",[[4,\"pn-accordion-row\",{\"label\":[1025],\"state\":[1028],\"buttonid\":[1],\"contentid\":[1],\"transparent\":[4],\"isClosing\":[32],\"isExpanding\":[32]},[[0,\"rowstate\",\"handleRowState\"]]]]],[\"pn-checkbox.cjs\",[[0,\"pn-checkbox\",{\"label\":[1],\"value\":[513],\"name\":[1],\"checked\":[4],\"helpertext\":[1],\"checkboxid\":[1],\"disabled\":[4],\"required\":[4],\"invalid\":[4],\"indeterminate\":[1028],\"tile\":[4],\"icon\":[1]},[[0,\"change\",\"handlechange\"]],{\"checkboxid\":[\"handleId\"]}]]],[\"pn-read-only-button.cjs\",[[4,\"pn-read-only-button\",{\"icon\":[1],\"leftIcon\":[4,\"left-icon\"],\"iconOnly\":[4,\"icon-only\"],\"small\":[4],\"language\":[1],\"readOnlyModeText\":[32],\"tooltipOpen\":[32],\"tooltipEl\":[32],\"tooltipDx\":[32]},null,{\"language\":[\"setReadOnlyModeText\"],\"tooltipOpen\":[\"openHandler\"]}]]],[\"pn-segmented-control.cjs\",[[4,\"pn-segmented-control\",{\"name\":[1],\"value\":[1025],\"showScrollArrows\":[32],\"showLeftArrow\":[32],\"showRightArrow\":[32]},[[0,\"change\",\"changeHandler\"],[9,\"resize\",\"handleResize\"],[0,\"segmentHover\",\"handleHover\"]],{\"value\":[\"valueHandler\"]}]]],[\"pn-tooltip.cjs\",[[4,\"pn-tooltip\",{\"warning\":[4],\"light\":[4],\"tooltip\":[1],\"downwards\":[32],\"open\":[32],\"deltaX\":[32]},null,{\"open\":[\"openHandler\"]}]]],[\"pn-accordion.cjs\",[[4,\"pn-accordion\",{\"single\":[4],\"transparent\":[4]},[[0,\"togglerow\",\"handleSingleRow\"]]]]],[\"pn-icon_2.cjs\",[[0,\"pn-tag\",{\"label\":[1],\"icon\":[1],\"appearance\":[1],\"dark\":[4],\"large\":[4],\"small\":[4],\"xsmall\":[4]}],[0,\"pn-icon\",{\"icon\":[1],\"small\":[516],\"color\":[1]},null,{\"color\":[\"handleColor\"]}]]],[\"pn-card.cjs\",[[4,\"pn-card\",{\"label\":[1],\"labelTag\":[1,\"label-tag\"],\"overline\":[1],\"text\":[1],\"cardId\":[1,\"card-id\"],\"horizontal\":[4],\"reverse\":[4],\"aspectRatio\":[1,\"aspect-ratio\"],\"href\":[1],\"hrefLabel\":[1,\"href-label\"],\"target\":[1],\"rel\":[1],\"icon\":[1],\"visibleOutline\":[32]},null,{\"cardId\":[\"watchCardId\"]}]]],[\"pn-choice-chip.cjs\",[[4,\"pn-choice-chip\",{\"label\":[1],\"value\":[513],\"name\":[1],\"checked\":[1028],\"radio\":[4],\"choiceid\":[1],\"icon\":[1],\"required\":[4],\"disabled\":[4],\"small\":[4],\"large\":[4],\"moving\":[32]}]]],[\"pn-fieldset.cjs\",[[4,\"pn-fieldset\",{\"legend\":[1],\"helpertext\":[1],\"fieldsetId\":[1,\"fieldset-id\"],\"form\":[1],\"name\":[1],\"disabled\":[4],\"invalid\":[4],\"error\":[1]},null,{\"fieldsetId\":[\"handleId\"]}]]],[\"pn-multiselect.cjs\",[[4,\"pn-multiselect\",{\"label\":[1],\"helpertext\":[1],\"placeholder\":[1],\"name\":[1],\"selectId\":[1,\"select-id\"],\"selectName\":[1,\"select-name\"],\"icon\":[1],\"language\":[1],\"options\":[1040],\"selectAll\":[4,\"select-all\"],\"allValue\":[1,\"all-value\"],\"search\":[4],\"searchQuery\":[1025,\"search-query\"],\"itemCount\":[2,\"item-count\"],\"maxHeight\":[1,\"max-height\"],\"top\":[4],\"bottom\":[4],\"required\":[4],\"disabled\":[4],\"invalid\":[4],\"error\":[1],\"isSearching\":[32],\"open\":[32],\"upwards\":[32],\"srMessage\":[32],\"isClosing\":[32],\"isExpanding\":[32]},[[9,\"resize\",\"handleResize\"]],{\"open\":[\"handleOpen\"],\"search\":[\"handleSearch\"],\"searchQuery\":[\"handleSearchQuery\"],\"selectId\":[\"handleSelectId\"]}]]],[\"pn-page-nav.cjs\",[[4,\"pn-page-nav\",{\"value\":[1025],\"dropdown\":[8],\"navid\":[1],\"currentSelection\":[32],\"showScrollArrows\":[32],\"showLeftArrow\":[32],\"showRightArrow\":[32],\"dropdownOpen\":[32],\"dropdownLinks\":[32],\"dropdownActive\":[32]},[[0,\"itemselection\",\"changeHandler\"],[9,\"resize\",\"handleResize\"]],{\"value\":[\"valueHandler\"],\"dropdownOpen\":[\"dropdownHandler\"]}]]],[\"pn-page-nav-dropdown-item.cjs\",[[4,\"pn-page-nav-dropdown-item\",{\"value\":[1],\"href\":[1],\"active\":[4]}]]],[\"pn-page-nav-item.cjs\",[[4,\"pn-page-nav-item\",{\"value\":[1],\"href\":[1],\"icon\":[1]}]]],[\"pn-radio-button.cjs\",[[0,\"pn-radio-button\",{\"label\":[1],\"value\":[513],\"name\":[1],\"checked\":[4],\"helpertext\":[1],\"radioid\":[1],\"disabled\":[4],\"required\":[4],\"invalid\":[4],\"tile\":[4],\"icon\":[1]},null,{\"radioid\":[\"handleId\"]}]]],[\"pn-segment.cjs\",[[4,\"pn-segment\",{\"label\":[1],\"name\":[1],\"value\":[1],\"selected\":[4],\"segmentid\":[1],\"icon\":[1],\"disabled\":[4]}]]],[\"pn-tab.cjs\",[[4,\"pn-tab\",{\"label\":[1],\"value\":[1],\"href\":[1],\"icon\":[1],\"ariacontrols\":[1],\"tabid\":[1],\"activeTab\":[1,\"active-tab\"]}]]],[\"pn-button_2.cjs\",[[4,\"pn-button\",{\"label\":[1],\"appearance\":[1],\"variant\":[1],\"small\":[4],\"loading\":[516],\"icon\":[1],\"iconOnly\":[4,\"icon-only\"],\"leftIcon\":[4,\"left-icon\"],\"tooltip\":[1],\"tooltipUp\":[4,\"tooltip-up\"],\"type\":[1],\"form\":[1],\"href\":[1],\"rel\":[1],\"target\":[1],\"download\":[1],\"buttonId\":[1,\"button-id\"],\"arialabel\":[1],\"arialabelledby\":[1],\"ariacurrent\":[1],\"ariacontrols\":[1],\"ariapressed\":[1],\"ariahaspopup\":[1],\"ariaexpanded\":[1],\"noTab\":[4,\"no-tab\"],\"tooltipOpen\":[32],\"tooltipUpwards\":[32]},null,{\"tooltipOpen\":[\"openHandler\"],\"tooltip\":[\"iconOnlyHandler\"]}],[0,\"pn-spinner\",{\"light\":[4],\"size\":[2]}]]],[\"pn-toggle-switch.cjs\",[[4,\"pn-toggle-switch\",{\"label\":[1],\"helpertext\":[1],\"checked\":[1028],\"toggleid\":[1],\"name\":[1],\"value\":[1],\"small\":[4],\"large\":[4],\"disabled\":[4],\"loading\":[4]},null,{\"toggleid\":[\"handleHelperId\"]}]]],[\"pn-progress-indicator.cjs\",[[4,\"pn-progress-indicator\",{\"activeStep\":[1026,\"active-step\"]},[[0,\"setactivestep\",\"setActiveStepHandler\"]]]]],[\"pn-progress-indicator-step.cjs\",[[4,\"pn-progress-indicator-step\",{\"activeStep\":[2,\"active-step\"],\"index\":[2],\"name\":[1],\"checked\":[4],\"active\":[1],\"activated\":[32],\"done\":[32]}]]],[\"pn-progress-stepper.cjs\",[[0,\"pn-progress-stepper\",{\"label\":[1025],\"totalSteps\":[1026,\"total-steps\"],\"currentStep\":[1026,\"current-step\"],\"stepName\":[1,\"step-name\"],\"progressStepperId\":[1,\"progress-stepper-id\"],\"language\":[1],\"progressValue\":[32]},null,{\"currentStep\":[\"validateCurrentStep\"],\"totalSteps\":[\"validateTotalSteps\"],\"language\":[\"watchLanguage\"],\"progressStepperId\":[\"watchId\"]}]]],[\"pn-table.cjs\",[[4,\"pn-table\",{\"gray\":[4],\"bordered\":[4],\"striped\":[4]}]]],[\"pn-textarea.cjs\",[[0,\"pn-textarea\",{\"label\":[1],\"value\":[1],\"helpertext\":[1],\"textareaid\":[1],\"name\":[1],\"form\":[1],\"rows\":[2],\"cols\":[2],\"wrap\":[1],\"maxlength\":[2],\"autocomplete\":[1],\"spellcheck\":[4],\"placeholder\":[1],\"resize\":[4],\"required\":[4],\"valid\":[4],\"invalid\":[4],\"error\":[1],\"disabled\":[4],\"readonly\":[4],\"content\":[32]}]]],[\"pn-progress-bar.cjs\",[[0,\"pn-progress-bar\",{\"label\":[1],\"progress\":[2],\"progressText\":[1,\"progress-text\"],\"successText\":[1,\"success-text\"],\"error\":[1],\"progressId\":[1,\"progress-id\"],\"progressPercentage\":[32]},null,{\"progress\":[\"setProgress\"]}]]],[\"pn-select.cjs\",[[4,\"pn-select\",{\"label\":[1],\"helpertext\":[1],\"selectId\":[1,\"select-id\"],\"icon\":[1],\"name\":[1],\"form\":[1],\"autocomplete\":[1],\"required\":[4],\"disabled\":[4],\"invalid\":[4],\"error\":[1]}]]],[\"pn-search-field.cjs\",[[0,\"pn-search-field\",{\"label\":[1],\"value\":[1025],\"placeholder\":[1],\"searchid\":[1],\"name\":[1],\"autocomplete\":[1],\"list\":[1],\"language\":[1],\"disabled\":[4],\"required\":[4],\"loading\":[4],\"button\":[1],\"buttonLabel\":[1,\"button-label\"],\"buttonLight\":[4,\"button-light\"]},[[0,\"input\",\"inputHandler\"]]]]],[\"pn-text-link.cjs\",[[4,\"pn-text-link\",{\"label\":[1],\"href\":[1],\"light\":[4],\"icon\":[1],\"leftIcon\":[4,\"left-icon\"],\"download\":[1],\"hreflang\":[1],\"media\":[1],\"referrerpolicy\":[1],\"rel\":[1],\"target\":[1],\"linkid\":[1]}]]],[\"pn-illustration.cjs\",[[0,\"pn-illustration\",{\"illustration\":[1],\"width\":[1025],\"height\":[1025],\"fill\":[4]},null,{\"fill\":[\"handleFill\"]}]]]]"), options);
 });
 exports.setNonce = index.setNonce;

package/umd/modules/@postnord/web-components/collection/components/buttons/pn-action-menu/pn-action-menu.js CHANGED Viewed

@@ -5,7 +5,7 @@
 import { h, Host } from "@stencil/core";
 import { awaitTopbar, en, getMenuWidth, getTotalHeightOffset, isSmallScreen, reduceMotion, ripple, uuidv4, } from "../../../index";
 import { translations } from "./translation";
-import { chevron_down, chevron_left, chevron_right, open_in_new } from "pn-design-assets/pn-assets/icons.js";
+import { angle_down, angle_left, angle_right, open_in_new } from "pn-design-assets/pn-assets/icons.js";
 /**
  * Create a list of actions in an accessible way.
  *
@@ -106,20 +106,6 @@ export class PnActionMenu {
     translate(prop) {
         return translations[prop][this.language || en];
     }
-    globalEvents = (event) => {
-        const target = event.target;
-        const isWithinActionMenu = target?.closest(this.hostElement.localName);
-        if (!isWithinActionMenu)
-            this.closeEachSubMenu(true);
-    };
-    addGlobalEventListeners() {
-        const root = this.hostElement.getRootNode();
-        root.addEventListener('click', this.globalEvents);
-    }
-    removeGlobalEventListeners() {
-        const root = this.hostElement.getRootNode();
-        root.removeEventListener('click', this.globalEvents);
-    }
     /** Open/close the action menu. */
     toggleActionMenu(state) {
         this.open = state ?? !this.open;
@@ -189,24 +175,11 @@ export class PnActionMenu {
     }
     setOffset() {
         const data = this.getRect(this.hostElement);
-        const sideMenuWidth = getMenuWidth();
-        // Calculate potential menu position
-        const menuLeft = data.left;
-        const menuRight = data.left + this.menuWidth;
-        // Define boundaries
-        const leftBoundary = sideMenuWidth + 16; // Left menu + buffer
-        const rightBoundary = innerWidth - 16; // Right edge - buffer
-        let offset = 0;
-        // Check if menu would overlap left menu or go off left edge
-        if (menuLeft < leftBoundary) {
-            offset = leftBoundary - menuLeft;
-        }
-        // Check if menu would go off right edge
-        else if (menuRight > rightBoundary) {
-            offset = rightBoundary - menuRight;
-        }
+        const fullWidth = data.left - getMenuWidth() + this.menuWidth;
+        const isWide = fullWidth > innerWidth;
+        const offset = isWide ? fullWidth - innerWidth + 16 : 0;
         if (this.menuContainer)
-            this.menuContainer.style.setProperty('--pn-action-menu-offset', `${offset}px`);
+            this.menuContainer.style.setProperty('--pn-action-menu-offset', `-${offset}px`);
     }
     getListId(option) {
         return `pn-menu-${option.value}-list`;
@@ -217,7 +190,7 @@ export class PnActionMenu {
     getTriggerIcon() {
         if (this.button?.icon)
             return;
-        return chevron_down;
+        return angle_down;
     }
     /** Set the path of open sub menus. */
     getSubMenuPath(options, value, path = []) {
@@ -233,9 +206,8 @@ export class PnActionMenu {
         }
         return null;
     }
-    closeEachSubMenu(preventFocus = false) {
-        if (!preventFocus)
-            this.menuTrigger?.querySelector('button')?.focus({ preventScroll: true });
+    closeEachSubMenu() {
+        this.menuTrigger?.querySelector('button')?.focus({ preventScroll: true });
         const interval = setInterval(() => {
             if (this.smallMenu || this.activeSubmenu.length === 0) {
                 clearInterval(interval);
@@ -263,7 +235,6 @@ export class PnActionMenu {
             this.closeGrid();
     }
     openGrid() {
-        this.addGlobalEventListeners();
         const list = this.getRect(this.menuList);
         const { clientHeight } = this.menuContainer;
         const height = this.isClosing ? clientHeight : 0;
@@ -272,7 +243,6 @@ export class PnActionMenu {
         this.animateGrid(true, `${height}px`, `${list.height}px`);
     }
     closeGrid() {
-        this.removeGlobalEventListeners();
         const list = this.getRect(this.menuList);
         const { clientHeight } = this.menuContainer;
         const height = this.isExpanding ? clientHeight : list.height;
@@ -363,7 +333,7 @@ export class PnActionMenu {
         return Boolean(this.activeSubmenu[this.activeSubmenu.length - 1] === value);
     }
     getOptionTrailing(option) {
-        const useButtonIcon = option.options?.length && chevron_right;
+        const useButtonIcon = option.options?.length && angle_right;
         const useTrailingIcon = option.trailingIcon;
         const useLinkIcon = option.target === '_blank' && open_in_new;
         /** If the user has defined a trialing icon, use it first. */
@@ -405,7 +375,7 @@ export class PnActionMenu {
                 disabled: option.disabled,
             };
         const Tag = isLink ? 'a' : 'button';
-        return isGroup ? (h("div", { class: "pn-action-menu-group-label" }, h("p", { class: "pn-action-menu-p" }, option.label), option.helpertext && h("p", { class: "pn-action-menu-group-helpertext" }, option.helpertext))) : (h("div", { class: "pn-action-menu-item-content", "data-close": isCloseButton }, h(Tag, { id: this.getButtonId(option) + appendedId, class: "pn-action-menu-button", ...subMenuAttrs, ...attrs, tabIndex: this.open ? null : -1, onClick: event => this.optionSelect(option, event), onKeyDown: (event) => this.escButton(event, option) }, hasIcon && h("pn-icon", { icon: isCloseButton ? chevron_left : option.icon, color: "blue700" }), h("div", { class: "pn-action-menu-item-text" }, h("span", { class: "pn-action-menu-item-label" }, isCloseButton ? this.translate('BACK') : option.label), option.helpertext && !isLink && h("span", { class: "pn-action-menu-item-helpertext" }, option.helpertext)), trailingObject)));
+        return isGroup ? (h("div", { class: "pn-action-menu-group-label" }, h("p", { class: "pn-action-menu-p" }, option.label), option.helpertext && h("p", { class: "pn-action-menu-group-helpertext" }, option.helpertext))) : (h("div", { class: "pn-action-menu-item-content", "data-close": isCloseButton }, h(Tag, { id: this.getButtonId(option) + appendedId, class: "pn-action-menu-button", ...subMenuAttrs, ...attrs, tabIndex: this.open ? null : -1, onClick: event => this.optionSelect(option, event), onKeyDown: (event) => this.escButton(event, option) }, hasIcon && h("pn-icon", { icon: isCloseButton ? angle_left : option.icon, color: "blue700" }), h("div", { class: "pn-action-menu-item-text" }, h("span", { class: "pn-action-menu-item-label" }, isCloseButton ? this.translate('BACK') : option.label), option.helpertext && !isLink && h("span", { class: "pn-action-menu-item-helpertext" }, option.helpertext)), trailingObject)));
     }
     renderSub(option) {
         return (h("menu", { id: this.getListId(option), "aria-labelledby": this.getButtonId(option), class: "pn-action-menu-sub", "data-open": this.isSubmenuActive(option.value)?.toString(), "data-current": this.isCurrentSubMenu(option.value) }, this.smallMenu && (h("li", { class: "pn-action-menu-item" }, this.renderButton({
@@ -427,7 +397,7 @@ export class PnActionMenu {
         return (h("div", { id: this.menuListId, class: "pn-action-menu-container", role: "region", "aria-labelledby": this.menuButtonId, "data-open": this.open, "data-moving": this.isClosing || this.isExpanding, "data-upwards": this.upwards, "data-small": this.smallMenu, style: { height: '0px' }, ref: el => (this.menuContainer = el) }, h("menu", { class: "pn-action-menu-list", ref: el => (this.menuList = el), "data-current": this.isMenuActive() }, this.options?.map(option => this.renderMenuItem(option)))));
     }
     render() {
-        return (h(Host, { key: '474e0e58bfa5f3105b98e3bee9d2d0b39f450dac' }, h("div", { key: '262f0895ad57b5edeffa360530cda0a7144cfe33', id: this.menuId !== this.id ? this.menuId : null, class: "pn-action-menu" }, h("pn-button", { key: 'b77ec7bd057e59c795eea8a16db6cba68c5c527c', icon: this.getTriggerIcon(), ...this.button, buttonId: this.menuButtonId, tooltipUp: !this.upwards, ariahaspopup: "true", ariacontrols: this.open ? this.menuListId : null, ariaexpanded: this.open.toString(), "data-default-icon": !this.button?.icon, onPnClick: () => this.toggleActionMenu(), ref: el => (this.menuTrigger = el) }), this.renderMenu())));
+        return (h(Host, { key: '5a1638b9b0f880ebd9f3ebe2571df19c6b852baf' }, h("div", { key: '87bf62a943099ce0a556ade3ce3eb11eedb003b2', id: this.menuId !== this.id ? this.menuId : null, class: "pn-action-menu" }, h("pn-button", { key: 'a3024016a2a5962d9eefc3c4d617f946a3575c23', icon: this.getTriggerIcon(), ...this.button, buttonId: this.menuButtonId, tooltipUp: !this.upwards, ariahaspopup: "true", ariacontrols: this.open ? this.menuListId : null, ariaexpanded: this.open.toString(), "data-default-icon": !this.button?.icon, onPnClick: () => this.toggleActionMenu(), ref: el => (this.menuTrigger = el) }), this.renderMenu())));
     }
     static get is() { return "pn-action-menu"; }
     static get originalStyleUrls() {