@postnord/pn-marketweb-components 4.1.0 → 4.1.2

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

@@ -2,126 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { a as alert_exclamation_circle } from './alert_exclamation_circle.js';
-import { d as defineCustomElement$2 } from './pn-icon2.js';
-
-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="M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0m8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m-1.015 7.207c.14-.422.536-.707.981-.707h.18a.87.87 0 0 1 .854.871c0 .313-.179.6-.447.735A2.81 2.81 0 0 0 11 12.618V13a1 1 0 1 0 2 0v-.382a.81.81 0 0 1 .447-.724A2.83 2.83 0 0 0 15 9.371C15 7.807 13.734 6.5 12.146 6.5h-.18a3.03 3.03 0 0 0-2.878 2.075l-.037.109a1 1 0 1 0 1.898.632zM12 17.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" clip-rule="evenodd"/></svg>';
-const alert_question_circle = icon;
-
-const pnTooltipCss = "pn-tooltip{display:inline-block;font-size:1em}pn-tooltip .pn-tooltip{background:none;background-color:transparent;border:none;position:relative;padding:0;border-radius:50%;transition-property:outline-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tooltip .pn-tooltip{transition-duration:0s;transition-delay:0s}}pn-tooltip .pn-tooltip{cursor:pointer;font-size:inherit;outline:0.2rem solid transparent;outline-offset:0.2rem}pn-tooltip .pn-tooltip:focus-visible{outline-color:#005d92;background-color:#e0f8ff}pn-tooltip .pn-tooltip:hover{background-color:#e0f8ff}pn-tooltip .pn-tooltip[data-light] pn-icon .pn-icon-svg path{fill:#ffffff}pn-tooltip .pn-tooltip[data-light]:focus,pn-tooltip .pn-tooltip[data-light]:hover{background-color:rgba(255, 255, 255, 0.2)}pn-tooltip .pn-tooltip[data-warning] pn-icon .pn-icon-svg path{fill:#a70707}pn-tooltip .pn-tooltip[data-warning]{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-tooltip .pn-tooltip[data-warning]:focus-visible{outline-color:#a70707;background-color:#fdefee}pn-tooltip .pn-tooltip[data-warning]:hover{background-color:#fdefee}pn-tooltip .pn-tooltip-content{position:absolute;text-align:left;bottom:calc(100% + 0.75em);left:50%;background:#ffffff;padding:1em;border-radius:0.8rem;box-shadow:0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);z-index:1;max-width:min(95vw, 40em);transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tooltip .pn-tooltip-content{transition-duration:0s;transition-delay:0s}}pn-tooltip .pn-tooltip-content{transition-delay:0.15s;transform:scale(0) translateX(-50%);transform-origin:bottom left;width:max-content;color:#2d2013}pn-tooltip .pn-tooltip-content[data-simple]{background:#0d234b;color:#ffffff;border-radius:10em;padding:0.5em 0.85em;bottom:100%;font-size:0.875em;font-weight:300;margin-bottom:0.1em;margin-top:0.1em}pn-tooltip .pn-tooltip>pn-icon{position:relative;pointer-events:none}pn-tooltip .pn-tooltip>pn-icon:before{content:\"\";pointer-events:none;width:0;height:0;border-left:0.75em solid transparent;border-right:0.75em solid transparent;border-top:0.75em solid #ffffff;filter:drop-shadow(0 0.3rem 0.1rem rgba(0, 0, 0, 0.075));bottom:102%;left:50%;position:absolute;z-index:2;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tooltip .pn-tooltip>pn-icon:before{transition-duration:0s;transition-delay:0s}}pn-tooltip .pn-tooltip>pn-icon:before{transition-delay:0;transform:scale(0) translateX(-50%);transform-origin:top left}pn-tooltip .pn-tooltip>pn-icon[data-simple]:before{content:none}pn-tooltip .pn-tooltip[data-open] .pn-tooltip-content{transition-delay:0}pn-tooltip .pn-tooltip[data-open] pn-icon:before{transform:scale(1) translateX(-50%);transition-delay:0.15s;pointer-events:auto}pn-tooltip .pn-tooltip[data-downwards] .pn-tooltip-content{bottom:unset;top:calc(100% + 0.75em);transform-origin:top left}pn-tooltip .pn-tooltip[data-downwards] pn-icon:before{top:102%;transform-origin:bottom left;filter:drop-shadow(0 -0.3rem 0.1rem rgba(0, 0, 0, 0.02));border-top:none;border-bottom:0.75em solid #ffffff}";
-
-const PnTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PnTooltip extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    content;
-    button;
-    openEvents = ['mouseover', 'focus'];
-    closeEvents = ['mouseleave', 'blur', 'touchcancel', 'touchleave'];
-    eventListeners = [...this.openEvents, ...this.closeEvents];
-    timeout;
-    get hostElement() { return this; }
-    downwards = false;
-    open = false;
-    deltaX = '0';
-    /** Apply the warning color and change the icon to `!`. */
-    warning = false;
-    /** Apply the light color if you use a dark background. */
-    light = false;
-    /** Overrides the slotted content to create a small tooltip instead. @since v7.3.0 */
-    tooltip;
-    openHandler() {
-        if (this.open)
-            this.checkPosition();
-        else
-            this.setTransform();
-    }
-    componentDidLoad() {
-        this.initTooltip();
-    }
-    setTransform() {
-        this.content.style.transform = `scale(${Number(this.open)}) translateX(-50%) translateX(${this.deltaX}px)`;
-    }
-    getSymbol() {
-        return this.warning ? alert_exclamation_circle : alert_question_circle;
-    }
-    checkPosition() {
-        this.content.style.transition = 'none';
-        this.content.style.transform = 'scale(1) translateX(-50%)';
-        this.downwards = false;
-        requestAnimationFrame(() => {
-            const { x, y, right } = this.content.getBoundingClientRect();
-            const extraMargin = 8;
-            this.deltaX = '0';
-            this.downwards = y < 0;
-            this.content.style.transform = '';
-            if (x < 0)
-                this.deltaX = `${x * -1 + extraMargin}`; // left edge
-            if (right > window.innerWidth)
-                this.deltaX = `${window.innerWidth - right - extraMargin}`; // right edge
-            requestAnimationFrame(() => {
-                this.content.style.transition = '';
-                this.setTransform();
-            });
-        });
-    }
-    initTooltip() {
-        this.eventListeners.forEach(name => this.button.addEventListener(name, (event) => this.toggleTooltip(event)));
-    }
-    toggleTooltip(event) {
-        const status = this.openEvents.includes(event.type);
-        let time = 500;
-        if (status)
-            time = 0;
-        clearTimeout(this.timeout);
-        this.timeout = setTimeout(() => {
-            this.open = status;
-        }, time);
-    }
-    render() {
-        return (h("button", { key: '1898e87fa0848bb546807416112feb7ee9f8c5a5', class: "pn-tooltip", "data-light": this.light, "data-warning": this.warning, "data-downwards": this.downwards, "data-open": this.open, ref: el => (this.button = el) }, h("pn-icon", { key: 'd4a28061a6c69ffa41cb69c4fd39961b4927949c', icon: this.getSymbol(), "data-simple": !!this.tooltip }), h("div", { key: 'cc7ae46d8c228136a29356083734104bfbb2a30d', class: "pn-tooltip-content", "data-simple": !!this.tooltip, ref: el => (this.content = el) }, this.tooltip, h("div", { key: '9ccae396edf92999920b99bf97d0818541a44bf1', hidden: !!this.tooltip }, h("slot", { key: '61b67be4486d95208e09630d58a3dc3b344c5354' })))));
-    }
-    static get watchers() { return {
-        "open": ["openHandler"]
-    }; }
-    static get style() { return pnTooltipCss; }
-}, [772, "pn-tooltip", {
-        "warning": [4],
-        "light": [4],
-        "tooltip": [1],
-        "downwards": [32],
-        "open": [32],
-        "deltaX": [32]
-    }, undefined, {
-        "open": ["openHandler"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-tooltip", "pn-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-tooltip":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnTooltip$1);
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PnTooltip = PnTooltip$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnTooltip, defineCustomElement };
-//# sourceMappingURL=pn-tooltip.js.map
-
-//# sourceMappingURL=pn-tooltip.js.map
+import{transformTag as t,proxyCustomElement as o,HTMLElement as n,h as i}from"@stencil/core/internal/client";import{a as e}from"./alert_exclamation_circle.js";import{d as r}from"./pn-icon2.js";const a=o(class extends n{constructor(t){super(),!1!==t&&this.__registerHost()}content;button;openEvents=["mouseover","focus"];closeEvents=["mouseleave","blur","touchcancel","touchleave"];eventListeners=[...this.openEvents,...this.closeEvents];timeout;get hostElement(){return this}downwards=!1;open=!1;deltaX="0";warning=!1;light=!1;tooltip;openHandler(){this.open?this.checkPosition():this.setTransform()}componentDidLoad(){this.initTooltip()}setTransform(){this.content.style.transform=`scale(${Number(this.open)}) translateX(-50%) translateX(${this.deltaX}px)`}getSymbol(){return this.warning?e:'<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="M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0m8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m-1.015 7.207c.14-.422.536-.707.981-.707h.18a.87.87 0 0 1 .854.871c0 .313-.179.6-.447.735A2.81 2.81 0 0 0 11 12.618V13a1 1 0 1 0 2 0v-.382a.81.81 0 0 1 .447-.724A2.83 2.83 0 0 0 15 9.371C15 7.807 13.734 6.5 12.146 6.5h-.18a3.03 3.03 0 0 0-2.878 2.075l-.037.109a1 1 0 1 0 1.898.632zM12 17.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" clip-rule="evenodd"/></svg>'}checkPosition(){this.content.style.transition="none",this.content.style.transform="scale(1) translateX(-50%)",this.downwards=!1,requestAnimationFrame((()=>{const{x:t,y:o,right:n}=this.content.getBoundingClientRect();this.deltaX="0",this.downwards=o<0,this.content.style.transform="",t<0&&(this.deltaX=""+(-1*t+8)),n>window.innerWidth&&(this.deltaX=""+(window.innerWidth-n-8)),requestAnimationFrame((()=>{this.content.style.transition="",this.setTransform()}))}))}initTooltip(){this.eventListeners.forEach((t=>this.button.addEventListener(t,(t=>this.toggleTooltip(t)))))}toggleTooltip(t){const o=this.openEvents.includes(t.type);let n=500;o&&(n=0),clearTimeout(this.timeout),this.timeout=setTimeout((()=>{this.open=o}),n)}render(){return i("button",{key:"1898e87fa0848bb546807416112feb7ee9f8c5a5",class:"pn-tooltip","data-light":this.light,"data-warning":this.warning,"data-downwards":this.downwards,"data-open":this.open,ref:t=>this.button=t},i("pn-icon",{key:"d4a28061a6c69ffa41cb69c4fd39961b4927949c",icon:this.getSymbol(),"data-simple":!!this.tooltip}),i("div",{key:"cc7ae46d8c228136a29356083734104bfbb2a30d",class:"pn-tooltip-content","data-simple":!!this.tooltip,ref:t=>this.content=t},this.tooltip,i("div",{key:"9ccae396edf92999920b99bf97d0818541a44bf1",hidden:!!this.tooltip},i("slot",{key:"61b67be4486d95208e09630d58a3dc3b344c5354"}))))}static get watchers(){return{open:[{openHandler:0}]}}static get style(){return`${t("pn-tooltip")}{display:inline-block;font-size:1em}${t("pn-tooltip")} .pn-tooltip{background:none;background-color:transparent;border:none;position:relative;padding:0;border-radius:50%;transition-property:outline-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tooltip")} .pn-tooltip{transition-duration:0s;transition-delay:0s}}${t("pn-tooltip")} .pn-tooltip{cursor:pointer;font-size:inherit;outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-tooltip")} .pn-tooltip:focus-visible{outline-color:#005d92;background-color:#e0f8ff}${t("pn-tooltip")} .pn-tooltip:hover{background-color:#e0f8ff}${t("pn-tooltip")} .pn-tooltip[data-light] ${t("pn-icon")} .pn-icon-svg path{fill:#ffffff}${t("pn-tooltip")} .pn-tooltip[data-light]:focus,${t("pn-tooltip")} .pn-tooltip[data-light]:hover{background-color:rgba(255, 255, 255, 0.2)}${t("pn-tooltip")} .pn-tooltip[data-warning] ${t("pn-icon")} .pn-icon-svg path{fill:#a70707}${t("pn-tooltip")} .pn-tooltip[data-warning]{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-tooltip")} .pn-tooltip[data-warning]:focus-visible{outline-color:#a70707;background-color:#fdefee}${t("pn-tooltip")} .pn-tooltip[data-warning]:hover{background-color:#fdefee}${t("pn-tooltip")} .pn-tooltip-content{position:absolute;text-align:left;bottom:calc(100% + 0.75em);left:50%;background:#ffffff;padding:1em;border-radius:0.8rem;box-shadow:0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);z-index:1;max-width:min(95vw, 40em);transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tooltip")} .pn-tooltip-content{transition-duration:0s;transition-delay:0s}}${t("pn-tooltip")} .pn-tooltip-content{transition-delay:0.15s;transform:scale(0) translateX(-50%);transform-origin:bottom left;width:max-content;color:#2d2013}${t("pn-tooltip")} .pn-tooltip-content[data-simple]{background:#0d234b;color:#ffffff;border-radius:10em;padding:0.5em 0.85em;bottom:100%;font-size:0.875em;font-weight:300;margin-bottom:0.1em;margin-top:0.1em}${t("pn-tooltip")} .pn-tooltip>${t("pn-icon")}{position:relative;pointer-events:none}${t("pn-tooltip")} .pn-tooltip>${t("pn-icon")}:before{content:"";pointer-events:none;width:0;height:0;border-left:0.75em solid transparent;border-right:0.75em solid transparent;border-top:0.75em solid #ffffff;filter:drop-shadow(0 0.3rem 0.1rem rgba(0, 0, 0, 0.075));bottom:102%;left:50%;position:absolute;z-index:2;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tooltip")} .pn-tooltip>${t("pn-icon")}:before{transition-duration:0s;transition-delay:0s}}${t("pn-tooltip")} .pn-tooltip>${t("pn-icon")}:before{transition-delay:0;transform:scale(0) translateX(-50%);transform-origin:top left}${t("pn-tooltip")} .pn-tooltip>${t("pn-icon")}[data-simple]:before{content:none}${t("pn-tooltip")} .pn-tooltip[data-open] .pn-tooltip-content{transition-delay:0}${t("pn-tooltip")} .pn-tooltip[data-open] ${t("pn-icon")}:before{transform:scale(1) translateX(-50%);transition-delay:0.15s;pointer-events:auto}${t("pn-tooltip")} .pn-tooltip[data-downwards] .pn-tooltip-content{bottom:unset;top:calc(100% + 0.75em);transform-origin:top left}${t("pn-tooltip")} .pn-tooltip[data-downwards] ${t("pn-icon")}:before{top:102%;transform-origin:bottom left;filter:drop-shadow(0 -0.3rem 0.1rem rgba(0, 0, 0, 0.02));border-top:none;border-bottom:0.75em solid #ffffff}`}},[772,"pn-tooltip",{warning:[4],light:[4],tooltip:[1],downwards:[32],open:[32],deltaX:[32]},void 0,{open:[{openHandler:0}]}]),p=a,s=function(){"undefined"!=typeof customElements&&["pn-tooltip","pn-icon"].forEach((o=>{switch(o){case"pn-tooltip":customElements.get(t(t(o)))||customElements.define(t(t(o)),a);break;case"pn-icon":customElements.get(t(t(o)))||r()}}))};export{p as PnTooltip,s as defineCustomElement}

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

@@ -2,440 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { u as uuidv4, r as reduceMotion, k as awaitTopbar, e as en, i as isSmallScreen } from './helpers.js';
-import { a as arrow_right } from './arrow_right.js';
-import { c as close } from './close.js';
-import { d as defineCustomElement$5 } from './pn-button2.js';
-import { d as defineCustomElement$4 } from './pn-icon2.js';
-import { d as defineCustomElement$3 } from './pn-progress-stepper2.js';
-import { d as defineCustomElement$2 } from './pn-spinner2.js';
-
-const translations = {
-    NEXT: {
-        sv: 'Nästa',
-        en: 'Next',
-        da: 'Næste',
-        fi: 'Seuraava',
-        no: 'Neste',
-    },
-    PREV: {
-        sv: 'Föregående',
-        en: 'Previous',
-        da: 'Forrige',
-        fi: 'Edellinen',
-        no: 'Forrige',
-    },
-    FINISH: {
-        sv: 'Slutför',
-        en: 'Finish',
-        da: 'Afslut',
-        fi: 'Valmis',
-        no: 'Fullfør',
-    },
-    CANCEL: {
-        sv: 'Avbryt',
-        en: 'Cancel',
-        da: 'Annuller',
-        fi: 'Peruuta',
-        no: 'Avbryt',
-    },
-};
-
-const pnWizardCss = "/* Global utility variables */\n/* Input styles */\n/* Transition variables */\npn-wizard .pn-wizard {\n  z-index: 10000;\n  position: absolute;\n  top: 0;\n  border: none;\n  margin: 0;\n  padding: 0;\n  background-color: transparent;\n  outline: none;\n  overflow: unset;\n  height: 100%;\n  width: 100%;\n  max-width: unset;\n  max-height: unset;\n  display: none;\n  opacity: 0;\n  transition-property: display, opacity;\n  transition-duration: 0.4s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-wizard .pn-wizard {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-wizard .pn-wizard {\n  transition-behavior: allow-discrete;\n}\npn-wizard .pn-wizard[open] {\n  display: block;\n  opacity: 1;\n}\n@starting-style {\n  pn-wizard .pn-wizard[open] {\n    display: block;\n    opacity: 0;\n  }\n}\npn-wizard .pn-wizard::backdrop {\n  background-color: transparent;\n}\npn-wizard .pn-wizard-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-wizard .pn-wizard-overlay {\n  z-index: 0;\n}\npn-wizard .pn-wizard-highlight {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: var(--pn-spotlight-width, 0%);\n  height: var(--pn-spotlight-height, 0%);\n  border-radius: var(--pn-spotlight-radius, 0.25em);\n  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);\n  z-index: 0;\n  transform: translate(var(--pn-spotlight-x, 0%), var(--pn-spotlight-y, 0%));\n  transition-property: transform, width, height, border-radius;\n  transition-duration: 0.4s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-wizard .pn-wizard-highlight {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-wizard .pn-wizard-content {\n  position: absolute;\n  z-index: 1;\n  background: #ffffff;\n  border-radius: 2em;\n  max-width: 20em;\n  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.3);\n  left: 0;\n  top: 0;\n  transform: translate(var(--pn-wizard-content-x), var(--pn-wizard-content-y));\n  transition-property: transform;\n  transition-duration: 0.4s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-wizard .pn-wizard-content {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\n@media (max-width: 55em) {\n  pn-wizard .pn-wizard-content {\n    position: fixed;\n    top: unset;\n    bottom: 0;\n    left: 0.5em;\n    border-radius: 2em 2em 0 0;\n    width: calc(100vw - 1em);\n    max-width: unset;\n    transform: none;\n  }\n}\npn-wizard .pn-wizard-cancel {\n  position: absolute;\n  top: 1em;\n  right: 1em;\n  z-index: 10;\n}\npn-wizard .pn-wizard-text {\n  padding: 3em 1em 1em;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  gap: clamp(0.5em, 5vw, 1em);\n}\npn-wizard .pn-wizard-label {\n  margin: 0;\n  font-size: clamp(1.25em, 5vw, 1.5em);\n  font-weight: 700;\n  color: #2d2013;\n}\npn-wizard .pn-wizard-helpertext {\n  margin: 0;\n  font-size: clamp(0.875em, 5vw, 1em);\n  font-weight: 400;\n  color: #5e554a;\n}\npn-wizard .pn-wizard-controls {\n  border-top: 0.0625em solid #d3cecb;\n  padding: 1em;\n  display: flex;\n  justify-content: end;\n  gap: 0.5em;\n  flex-wrap: wrap;\n}\npn-wizard .pn-wizard-indicator {\n  margin-right: auto;\n  align-self: center;\n  font-size: 1em;\n  color: #5e554a;\n  padding: 0 0.625em;\n}\npn-wizard .pn-wizard-arrow {\n  position: absolute;\n  width: 0;\n  height: 0;\n  border: 0.5em solid transparent;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transition-property: top, right, bottom, left, border-color;\n  transition-duration: 0.4s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-wizard .pn-wizard-arrow {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-wizard .pn-wizard-arrow[data-arrow=bottom] {\n  top: 100%;\n  bottom: -1em;\n  left: var(--pn-arrow-offset);\n  border-top-color: #ffffff;\n}\npn-wizard .pn-wizard-arrow[data-arrow=top] {\n  top: -1em;\n  left: var(--pn-arrow-offset);\n  border-bottom-color: #ffffff;\n}\npn-wizard .pn-wizard-arrow[data-arrow=right] {\n  right: -1em;\n  left: 100%;\n  top: var(--pn-arrow-offset);\n  border-left-color: #ffffff;\n}\npn-wizard .pn-wizard-arrow[data-arrow=left] {\n  left: -1em;\n  top: var(--pn-arrow-offset);\n  border-right-color: #ffffff;\n}\npn-wizard .pn-wizard-arrow[data-arrow=none] {\n  display: none;\n}";
-
-const PnWizard$1 = /*@__PURE__*/ proxyCustomElement(class PnWizard extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.wizardStep = createEvent(this, "wizardStep", 7);
-        this.wizardHighlightClick = createEvent(this, "wizardHighlightClick", 7);
-        this.wizardClose = createEvent(this, "wizardClose", 7);
-    }
-    id = `pn-wizard-${uuidv4()}`;
-    wizardIdLabel;
-    wizardIdHelpertext;
-    wizardElement;
-    wizardContent;
-    wizardArrow;
-    timeoutRerender;
-    get hostElement() { return this; }
-    /** Set a title for the wizard. */
-    label = '';
-    /** Set a helpertext for the wizard. */
-    helpertext = '';
-    /** Manually set the language. */
-    language = null;
-    /** Set a custom HTML id. */
-    pnId = this.id;
-    /**
-     * Assign the current step.
-     * Any value above -1 is valid and will start the wizard.
-     * @category Wizard steps
-     **/
-    step = -1;
-    /**
-     * The list of querySelectors that the wizards will highlight.
-     * Recommended maximum of 7 steps.
-     * @category Wizard steps
-     **/
-    steps = [];
-    /**
-     * Choose to display one of 2 built in progress steppers.
-     * - `dots`: The pn-progress-stepper with the `dots` prop.
-     * - `text`: simple text indicator "current/total"
-     * @category Features
-     */
-    progress = '';
-    /** Choose where the scrolling will focus on the highlighted elements. @category Features */
-    scrollBlock = 'center';
-    /**
-     * By default, the component will hide the overflow on the body element when active.
-     * You may wish to disable this if your HTML/CSS structure is not compatible with this behavior.
-     * @category Features
-     */
-    displayOverflow = false;
-    /** Hide the back button. @category Buttons */
-    hideBack = false;
-    /** Hide the next button. @category Buttons */
-    hideNext = false;
-    /** Hide the finish button. @category Buttons */
-    hideFinish = false;
-    /** Set a custom label for the back button. @category Buttons */
-    labelBack = '';
-    /** Set a custom label for the next button. @category Buttons */
-    labelNext = '';
-    /** Set a custom label for the finish button. @category Buttons */
-    labelFinish = '';
-    /** Emitted when the wizard step changes. */
-    wizardStep;
-    /** Emitted when the highlighted area is clicked. */
-    wizardHighlightClick;
-    /** Emitted when the wizard is canceled or finished. */
-    wizardClose;
-    handleStepChange(step, prevStep) {
-        if (prevStep === -1) {
-            this.highlightElement();
-            this.positionModal();
-        }
-        if (step === -1) {
-            this.wizardClose.emit({ step: prevStep, finished: this.isLastStep(prevStep) });
-        }
-        if (!this.isActive()) {
-            this.wizardElement?.close();
-            setTimeout(() => this.handleDisplayOverflow(), reduceMotion() ? 0 : 400);
-            return;
-        }
-        if (!this.wizardElement.open) {
-            this.handleDisplayOverflow();
-            this.wizardElement?.showModal();
-        }
-        this.wizardStep.emit({
-            step,
-            next: step > (prevStep ?? -1),
-            prev: step < (prevStep ?? -1),
-        });
-    }
-    handleIdChange() {
-        this.wizardIdLabel = `${this.pnId || this.id}-label`;
-        this.wizardIdHelpertext = `${this.pnId || this.id}-helpertext`;
-    }
-    handleOverflow() {
-        if (!this.isActive())
-            return;
-        clearTimeout(this.timeoutRerender);
-        this.timeoutRerender = setTimeout(() => {
-            this.highlightElement();
-            this.positionModal();
-        }, 250);
-    }
-    async componentWillLoad() {
-        this.handleIdChange();
-        if (this.language === null)
-            await awaitTopbar(this.hostElement);
-    }
-    componentDidRender() {
-        this.runStepLogic();
-    }
-    getRect(element) {
-        return element.getBoundingClientRect();
-    }
-    translate(prop) {
-        return translations?.[prop]?.[this.language || en] || prop;
-    }
-    handleDisplayOverflow() {
-        if (this.displayOverflow)
-            return;
-        const body = document.body;
-        const scrollbarWidth = innerWidth - document.documentElement.clientWidth;
-        if (this.isActive()) {
-            body.style.setProperty('overflow', 'hidden');
-            body.style.marginRight = `${scrollbarWidth}px`;
-        }
-        else {
-            body.style.removeProperty('overflow');
-            body.style.removeProperty('margin-right');
-        }
-    }
-    /** Is the step within the valid range of available {@link steps}. */
-    isActive(step = this.step) {
-        return step >= 0 && step < this.steps.length;
-    }
-    isOpen() {
-        return this.isActive() && this.wizardElement?.open;
-    }
-    isClosed(step = this.step) {
-        return step === -1;
-    }
-    isFirstStep() {
-        return this.step === 0;
-    }
-    isLastStep(step = this.step) {
-        if (this.steps.length === 1)
-            return true;
-        return step === this.steps.length - 1;
-    }
-    isProgressDots() {
-        return this.progress === 'dots';
-    }
-    isProgressText() {
-        return this.progress === 'text';
-    }
-    /**
-     * By default, the `pn-progress-stepper` will always render,
-     * but is hidden from view unless `dots` is assinged to {@link progress}.
-     *
-     * The only exception is when there are more than 7 steps. Something that the stepper does not allow.
-     */
-    renderProgress() {
-        return 7 >= this.steps.length && (this.isProgressDots() || this.isProgressText());
-    }
-    showBackButton() {
-        if (this.hideBack || this.isClosed() || this.isFirstStep())
-            return false;
-        return true;
-    }
-    showNextButton() {
-        if (this.hideNext)
-            return false;
-        return !this.isLastStep() || this.showFinishButton();
-    }
-    showFinishButton() {
-        return !this.hideFinish && this.isLastStep();
-    }
-    runStepLogic() {
-        if (this.isOpen()) {
-            requestAnimationFrame(() => {
-                this.highlightElement();
-                this.positionModal();
-                this.scrollToElement();
-            });
-        }
-    }
-    nextStep() {
-        const next = this.step + 1;
-        this.step = next;
-    }
-    prevStep() {
-        const prev = this.step - 1;
-        this.step = prev;
-    }
-    endWizard() {
-        this.step = -1;
-    }
-    getNextLabel() {
-        const finish = this.labelFinish || 'FINISH';
-        const next = this.labelNext || 'NEXT';
-        const prop = this.isLastStep() ? finish : next;
-        return this.translate(prop);
-    }
-    getHighlightTarget() {
-        const selector = this.steps[this.step];
-        const target = document.querySelector(selector);
-        return target;
-    }
-    getHighlightRect() {
-        const target = this.getHighlightTarget();
-        if (!target)
-            return;
-        const rect = this.getRect(target);
-        const margin = parseFloat(getComputedStyle(target).margin) || 0;
-        const top = rect.top + window.scrollY - margin;
-        const left = rect.left + window.scrollX - margin;
-        const width = rect.width + margin * 2;
-        const height = rect.height + margin * 2;
-        const radius = parseFloat(getComputedStyle(target).borderRadius) || 4;
-        return { top, left, width, height, radius };
-    }
-    scrollToElement() {
-        const target = this.getHighlightTarget();
-        if (!target)
-            return;
-        target.scrollIntoView({ behavior: 'smooth', block: this.scrollBlock });
-    }
-    highlightElement() {
-        const target = this.getHighlightTarget();
-        if (!target)
-            return;
-        this.setHighlightVars(this.getHighlightRect());
-    }
-    positionModal() {
-        const target = this.getHighlightTarget();
-        if (!target)
-            return;
-        const gap = 16;
-        // Target = Highlighted element
-        const { top: targetTop, left: targetLeft, width: targetWidth, height: targetHeight } = this.getHighlightRect();
-        // Modal = Wizard content
-        const { width: modalWidth, height: modalHeight } = this.getRect(this.wizardContent);
-        const targetCenter = targetLeft + targetWidth / 2;
-        let contentX = 0;
-        let contentY = 0;
-        // Get viewport dimensions and scroll position
-        const { scrollY, scrollX, innerWidth, innerHeight } = window;
-        const scrollbarWidth = innerWidth - document.documentElement.clientWidth;
-        // If highlight is very tall, position wizardContent left or right
-        // const highlightIsTall = modalHeight > targetTop && modalHeight > innerHeight - (targetTop + targetHeight);
-        // Where does the modal fit?
-        const modalFitsDown = targetTop + targetHeight + gap + modalHeight < scrollY + innerHeight;
-        const modalFitsUp = targetTop - gap - modalHeight > scrollY;
-        const modalFitsLeft = targetLeft - gap - modalWidth > scrollX;
-        const modalFitsRight = targetLeft + targetWidth + gap + modalWidth < scrollX + innerWidth;
-        const modalFitsNone = !modalFitsDown && !modalFitsUp && !modalFitsLeft && !modalFitsRight;
-        const fitsY = modalFitsDown || modalFitsUp;
-        const fitsX = modalFitsLeft || modalFitsRight;
-        let maxY = 8;
-        let maxX = 8;
-        maxY = modalFitsDown ? targetTop + targetHeight + gap : targetTop - modalHeight - gap;
-        maxX = scrollX + innerWidth - modalWidth - scrollbarWidth - 8;
-        // Arrow stuff
-        let arrowOffset = 0;
-        let arrowDirection = 'top';
-        if (fitsY) {
-            contentX = targetCenter - modalWidth / 2;
-            contentY = modalFitsDown ? targetTop + targetHeight + gap : targetTop - modalHeight - gap;
-            arrowDirection = modalFitsDown ? 'top' : 'bottom';
-            arrowOffset = targetCenter - contentX;
-        }
-        else if (fitsX) {
-            contentX = modalFitsRight ? targetLeft + targetWidth + gap : targetLeft - modalWidth - gap;
-            contentY = targetTop + targetHeight / 2 - modalHeight / 2;
-            maxY = targetTop + targetHeight / 2;
-            arrowDirection = modalFitsRight ? 'left' : 'right';
-            arrowOffset = modalHeight / 2;
-        }
-        else if (modalFitsNone) {
-            contentX = targetCenter - modalWidth / 2;
-            contentY = targetTop + targetHeight - modalHeight / 2;
-            maxY = innerHeight - modalHeight - 8;
-            arrowDirection = 'top';
-            arrowOffset = targetCenter - contentX;
-        }
-        // Clamp horizontally within viewport
-        const minX = scrollX + scrollbarWidth || 8;
-        contentX = Math.max(minX, Math.min(contentX, maxX));
-        // Clamp vertically within viewport
-        const minY = 8;
-        contentY = Math.max(minY, Math.min(contentY, maxY));
-        this.setModalVars({ top: contentY, left: contentX });
-        if (isSmallScreen()) {
-            arrowDirection = 'top';
-        }
-        // Adjust arrow offset based on final position
-        if (arrowDirection === 'top' || arrowDirection === 'bottom') {
-            arrowOffset = targetCenter - contentX;
-        }
-        else {
-            arrowOffset = targetTop + targetHeight / 2 - contentY;
-        }
-        arrowOffset = Math.max(32, // Minimum offset from edge
-        Math.min(arrowOffset - 8, (fitsX ? modalHeight : modalWidth) - 32));
-        this.setArrowVars(arrowDirection, arrowOffset);
-    }
-    setHighlightVars({ top, left, width, height, radius, }) {
-        // Center and scale the highlight using transform
-        this.hostElement.style.setProperty('--pn-spotlight-x', `${Math.round(left)}px`);
-        this.hostElement.style.setProperty('--pn-spotlight-y', `${Math.round(top)}px`);
-        this.hostElement.style.setProperty('--pn-spotlight-width', `${Math.round(width)}px`);
-        this.hostElement.style.setProperty('--pn-spotlight-height', `${Math.round(height)}px`);
-        this.hostElement.style.setProperty('--pn-spotlight-radius', `${Math.round(radius)}px`);
-    }
-    setModalVars({ top, left }) {
-        this.hostElement.style.setProperty('--pn-wizard-content-x', `${Math.round(left)}px`);
-        this.hostElement.style.setProperty('--pn-wizard-content-y', `${Math.round(top)}px`);
-    }
-    setArrowVars(direction, offset) {
-        this.wizardArrow.setAttribute('data-arrow', direction);
-        this.hostElement.style.setProperty('--pn-arrow-offset', `${Math.round(offset)}px`);
-    }
-    render() {
-        return (h(Host, { key: 'ea15f07a619f558d0938ab32e23a40166ce4ae33' }, h("dialog", { key: 'e24473990d0b5da11a0e138d6fe0be24ba42c4c0', id: this.pnId, "aria-labelledby": this.label ? this.wizardIdLabel : null, "aria-describedby": this.helpertext ? this.wizardIdHelpertext : null, class: "pn-wizard", ref: el => (this.wizardElement = el), onCancel: () => this.endWizard(), onClose: () => this.endWizard() }, h("div", { key: '6b67155a72ef42ef6a27a944b848f439c2df1658', class: "pn-wizard-overlay" }, h("div", { key: '6feab1674d34937a04abd4ad91d025d7875b28cc', class: "pn-wizard-highlight", onClick: e => this.wizardHighlightClick.emit(e) })), h("div", { key: 'a14d9081eaed44b2203cad4298e956b2d9c94801', class: "pn-wizard-content", ref: el => (this.wizardContent = el) }, h("pn-button", { key: 'f6a8a7e2ff676d8d729e2bad2f09df1dc3377d5f', class: "pn-wizard-cancel", arialabel: this.translate('CANCEL'), icon: close, iconOnly: true, small: true, appearance: "light", variant: "borderless", onPnClick: () => this.endWizard() }), h("div", { key: '060769047912671be179b5d5de33ae0ee9dd1717', class: "pn-wizard-text" }, this.label && (h("h2", { key: '660cc7a08b5e6eb493e5c3b421dbd935ff0a93aa', class: "pn-wizard-label", id: this.wizardIdLabel }, this.label)), this.helpertext && (h("p", { key: '1446de253cf9e120479300b55a4fb95d03e1b3d9', class: "pn-wizard-helpertext", id: this.wizardIdHelpertext }, this.helpertext)), h("slot", { key: '8d60e8c119d141844efed818ea4262f314ec6772' }), this.renderProgress() && (h("pn-progress-stepper", { key: '31fab92dfc7aaa1704eefff5a8074413868cce41', class: !this.isProgressDots() && 'pn-wizard-sr-only', totalSteps: this.steps.length, currentStep: this.step > 0 ? this.step + 1 : 1, dots: true }))), h("div", { key: '81cc8a35fdef0fbf702ff2a99440ba8428d082dd', class: "pn-wizard-arrow", ref: el => (this.wizardArrow = el) }), h("div", { key: 'c2b594fe86fbb1144da94e143c0547c0be913993', class: "pn-wizard-controls" }, this.isProgressText() && (h("span", { key: '34cb72149394af26f7ef9997ed10d840c73e9ca5', class: "pn-wizard-indicator", "aria-hidden": "true" }, this.step + 1, "/", this.steps.length)), h("slot", { key: '89a6839ac6a01b2ece4bca587dfc8a4e9663ad6d', name: "buttons" }), this.showBackButton() && (h("pn-button", { key: 'bc1a4f66555279900739d3fca64cf43cdf82df4c', label: this.labelBack || this.translate('PREV'), small: true, appearance: "light", variant: "outlined", onPnClick: () => this.prevStep() })), this.showNextButton() && (h("pn-button", { key: 'ebcccdb26560c895cfa37aa8a2c5d0b576c4fcf2', label: this.getNextLabel(), small: true, icon: arrow_right, onPnClick: () => this.nextStep() })))))));
-    }
-    static get watchers() { return {
-        "step": ["handleStepChange"],
-        "pnId": ["handleIdChange"]
-    }; }
-    static get style() { return pnWizardCss; }
-}, [772, "pn-wizard", {
-        "label": [1],
-        "helpertext": [1],
-        "language": [1025],
-        "pnId": [1025, "pn-id"],
-        "step": [1538],
-        "steps": [16],
-        "progress": [1],
-        "scrollBlock": [1, "scroll-block"],
-        "displayOverflow": [4, "display-overflow"],
-        "hideBack": [4, "hide-back"],
-        "hideNext": [4, "hide-next"],
-        "hideFinish": [4, "hide-finish"],
-        "labelBack": [1, "label-back"],
-        "labelNext": [1, "label-next"],
-        "labelFinish": [1, "label-finish"]
-    }, [[9, "resize", "handleOverflow"]], {
-        "step": ["handleStepChange"],
-        "pnId": ["handleIdChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-wizard", "pn-button", "pn-icon", "pn-progress-stepper", "pn-spinner"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-wizard":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnWizard$1);
-            }
-            break;
-        case "pn-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "pn-progress-stepper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "pn-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PnWizard = PnWizard$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnWizard, defineCustomElement };
-//# sourceMappingURL=pn-wizard.js.map
-
-//# sourceMappingURL=pn-wizard.js.map
+import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as r,h as a,Host as n}from"@stencil/core/internal/client";import{u as s,r as o,k as d,e as h,i as p}from"./helpers.js";import{a as l}from"./arrow_right.js";import{c}from"./close.js";import{d as f}from"./pn-button2.js";import{d as w}from"./pn-icon2.js";import{d as m}from"./pn-progress-stepper2.js";import{d as u}from"./pn-spinner2.js";const b={NEXT:{sv:"Nästa",en:"Next",da:"Næste",fi:"Seuraava",no:"Neste"},PREV:{sv:"Föregående",en:"Previous",da:"Forrige",fi:"Edellinen",no:"Forrige"},FINISH:{sv:"Slutför",en:"Finish",da:"Afslut",fi:"Valmis",no:"Fullfør"},CANCEL:{sv:"Avbryt",en:"Cancel",da:"Annuller",fi:"Peruuta",no:"Avbryt"}},g=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.wizardStep=r(this,"wizardStep",7),this.wizardHighlightClick=r(this,"wizardHighlightClick",7),this.wizardClose=r(this,"wizardClose",7)}id="pn-wizard-"+s();wizardIdLabel;wizardIdHelpertext;wizardElement;wizardContent;wizardArrow;timeoutRerender;get hostElement(){return this}label="";helpertext="";language=null;pnId=this.id;step=-1;steps=[];progress="";scrollBlock="center";displayOverflow=!1;hideBack=!1;hideNext=!1;hideFinish=!1;labelBack="";labelNext="";labelFinish="";wizardStep;wizardHighlightClick;wizardClose;handleStepChange(t,i){if(-1===i&&(this.highlightElement(),this.positionModal()),-1===t){const t=i===this.steps.length;this.wizardClose.emit({step:t?i-1:i,finished:t})}if(!this.isActive())return this.wizardElement?.close(),void setTimeout((()=>this.handleDisplayOverflow()),o()?0:400);this.wizardElement.open||(this.handleDisplayOverflow(),this.wizardElement?.showModal()),this.wizardStep.emit({step:t,next:t>(i??-1),prev:t<(i??-1)})}handleIdChange(){this.wizardIdLabel=(this.pnId||this.id)+"-label",this.wizardIdHelpertext=(this.pnId||this.id)+"-helpertext"}handleOverflow(){this.isActive()&&(clearTimeout(this.timeoutRerender),this.timeoutRerender=setTimeout((()=>{this.highlightElement(),this.positionModal()}),250))}async componentWillLoad(){this.handleIdChange(),null===this.language&&await d(this.hostElement)}componentDidRender(){this.runStepLogic()}getRect(t){return t.getBoundingClientRect()}translate(t){return b?.[t]?.[this.language||h]||t}handleDisplayOverflow(){if(this.displayOverflow)return;const t=document.body,i=innerWidth-document.documentElement.clientWidth;this.isActive()?(t.style.setProperty("overflow","hidden"),t.style.marginRight=i+"px"):(t.style.removeProperty("overflow"),t.style.removeProperty("margin-right"))}isActive(t=this.step){return t>=0&&t<this.steps.length}isOpen(){return this.isActive()&&this.wizardElement?.open}isClosed(t=this.step){return-1===t}isFirstStep(){return 0===this.step}isLastStep(t=this.step){return 1===this.steps.length||t===this.steps.length-1}isProgressDots(){return"dots"===this.progress}isProgressText(){return"text"===this.progress}renderProgress(){return 7>=this.steps.length&&(this.isProgressDots()||this.isProgressText())}showBackButton(){return!(this.hideBack||this.isClosed()||this.isFirstStep())}showNextButton(){return!this.hideNext&&(!this.isLastStep()||this.showFinishButton())}showFinishButton(){return!this.hideFinish&&this.isLastStep()}runStepLogic(){this.isOpen()&&requestAnimationFrame((()=>{this.highlightElement(),this.positionModal(),this.scrollToElement()}))}nextStep(){this.step=this.step+1}prevStep(){this.step=this.step-1}endWizard(){this.step=-1}getNextLabel(){const t=this.labelFinish||"FINISH",i=this.labelNext||"NEXT",e=this.isLastStep()?t:i;return this.translate(e)}getHighlightTarget(){return document.querySelector(this.steps[this.step])}getHighlightRect(){const t=this.getHighlightTarget();if(!t)return;const i=this.getRect(t),e=parseFloat(getComputedStyle(t).margin)||0;return{top:i.top+window.scrollY-e,left:i.left+window.scrollX-e,width:i.width+2*e,height:i.height+2*e,radius:parseFloat(getComputedStyle(t).borderRadius)||4}}scrollToElement(){const t=this.getHighlightTarget();t&&t.scrollIntoView({behavior:"smooth",block:this.scrollBlock})}highlightElement(){this.getHighlightTarget()&&this.setHighlightVars(this.getHighlightRect())}positionModal(){if(!this.getHighlightTarget())return;const t=16,{top:i,left:e,width:r,height:a}=this.getHighlightRect(),{width:n,height:s}=this.getRect(this.wizardContent),o=e+r/2;let d=0,h=0;const{scrollY:l,scrollX:c,innerWidth:f,innerHeight:w}=window,m=f-document.documentElement.clientWidth,u=i+a+t+s<l+w,b=i-t-s>l,g=e-t-n>c,z=e+r+t+n<c+f,x=g||z;let y=8,v=8;y=u?i+a+t:i-s-t,v=c+f-n-m-8;let k=0,$="top";u||b?(d=o-n/2,h=u?i+a+t:i-s-t,$=u?"top":"bottom",k=o-d):x?(d=z?e+r+t:e-n-t,h=i+a/2-s/2,y=i+a/2,$=z?"left":"right",k=s/2):!(u||b||g||z)&&(d=o-n/2,h=i+a-s/2,y=w-s-8,$="top",k=o-d),d=Math.max(c+m||8,Math.min(d,v)),h=Math.max(8,Math.min(h,y)),this.setModalVars({top:h,left:d}),p()&&($="top"),k="top"===$||"bottom"===$?o-d:i+a/2-h,k=Math.max(32,Math.min(k-8,(x?s:n)-32)),this.setArrowVars($,k)}setHighlightVars({top:t,left:i,width:e,height:r,radius:a}){this.hostElement.style.setProperty("--pn-spotlight-x",Math.round(i)+"px"),this.hostElement.style.setProperty("--pn-spotlight-y",Math.round(t)+"px"),this.hostElement.style.setProperty("--pn-spotlight-width",Math.round(e)+"px"),this.hostElement.style.setProperty("--pn-spotlight-height",Math.round(r)+"px"),this.hostElement.style.setProperty("--pn-spotlight-radius",Math.round(a)+"px")}setModalVars({top:t,left:i}){this.hostElement.style.setProperty("--pn-wizard-content-x",Math.round(i)+"px"),this.hostElement.style.setProperty("--pn-wizard-content-y",Math.round(t)+"px")}setArrowVars(t,i){this.wizardArrow.setAttribute("data-arrow",t),this.hostElement.style.setProperty("--pn-arrow-offset",Math.round(i)+"px")}render(){return a(n,{key:"08f0d484f684188c7283535da328d6bd681b74d5"},a("dialog",{key:"56810278e58795390973a9ebbe0bd797b731b1f8",id:this.pnId,"aria-labelledby":this.label?this.wizardIdLabel:null,"aria-describedby":this.helpertext?this.wizardIdHelpertext:null,class:"pn-wizard",ref:t=>this.wizardElement=t,onCancel:()=>this.endWizard(),onClose:()=>this.endWizard()},a("div",{key:"824bbd673177648865e9328ee5aa51e157aa7347",class:"pn-wizard-overlay"},a("div",{key:"a2236247ba49e18de2a4aa2666fa1e07e6aaa1c4",class:"pn-wizard-highlight",onClick:t=>this.wizardHighlightClick.emit(t)})),a("div",{key:"77d5f6e74c49b2a92a8c9c8f9207594bec0545c7",class:"pn-wizard-content",ref:t=>this.wizardContent=t},a("pn-button",{key:"28fdec2fa470ff03b916325d0085a7bd4cd8f504",class:"pn-wizard-cancel",arialabel:this.translate("CANCEL"),icon:c,iconOnly:!0,small:!0,appearance:"light",variant:"borderless",onPnClick:()=>this.endWizard()}),a("div",{key:"ff7e6051e041c008c639e392896e885e4dcb0364",class:"pn-wizard-text"},this.label&&a("h2",{key:"9b8098099707558b66f1b422dc6ada70084d9829",class:"pn-wizard-label",id:this.wizardIdLabel},this.label),this.helpertext&&a("p",{key:"4db3b8ab391daf06f5731be43c9c116acd934b1f",class:"pn-wizard-helpertext",id:this.wizardIdHelpertext},this.helpertext),a("slot",{key:"5f72315df3102a605d2d4a220cfebfa216101f8c"}),this.renderProgress()&&a("pn-progress-stepper",{key:"becee14c8d2ad3fe3a9d902dd080f4df760e227e",class:!this.isProgressDots()&&"pn-wizard-sr-only",totalSteps:this.steps.length,currentStep:this.step>0?this.step+1:1,dots:!0})),a("div",{key:"264270d944373b1570a09a330bef6c6e8ad07e4d",class:"pn-wizard-arrow",ref:t=>this.wizardArrow=t}),a("div",{key:"1420663b8cc3996eb67f640d3a7f981f1fafff82",class:"pn-wizard-controls"},this.isProgressText()&&a("span",{key:"99cd61e352d16b15129239c8c1932a1e8ff3d675",class:"pn-wizard-indicator","aria-hidden":"true"},this.step+1,"/",this.steps.length),a("slot",{key:"f48e48097089a24ed48726046e5bb9b8a36ca1ec",name:"buttons"}),this.showBackButton()&&a("pn-button",{key:"9504536c3602f6280d30aa6f95043d2a66c2ac98",label:this.labelBack||this.translate("PREV"),small:!0,appearance:"light",variant:"outlined",onPnClick:()=>this.prevStep()}),this.showNextButton()&&a("pn-button",{key:"c5997f60733d2f220138fbf3caf24f44271d63f3",label:this.getNextLabel(),small:!0,icon:l,onPnClick:()=>this.nextStep()})))))}static get watchers(){return{step:[{handleStepChange:0}],pnId:[{handleIdChange:0}]}}static get style(){return`${t("pn-wizard")} .pn-wizard{z-index:10000;position:absolute;top:0;border:none;margin:0;padding:0;background-color:transparent;outline:none;overflow:unset;height:100%;width:100%;max-width:unset;max-height:unset;display:none;opacity:0;transition-property:display, opacity;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-wizard")} .pn-wizard{transition-duration:0s;transition-delay:0s}}${t("pn-wizard")} .pn-wizard{transition-behavior:allow-discrete}${t("pn-wizard")} .pn-wizard[open]{display:block;opacity:1}@starting-style{${t("pn-wizard")} .pn-wizard[open]{display:block;opacity:0}}${t("pn-wizard")} .pn-wizard::backdrop{background-color:transparent}${t("pn-wizard")} .pn-wizard-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${t("pn-wizard")} .pn-wizard-overlay{z-index:0}${t("pn-wizard")} .pn-wizard-highlight{position:absolute;left:0;top:0;width:var(--pn-spotlight-width, 0%);height:var(--pn-spotlight-height, 0%);border-radius:var(--pn-spotlight-radius, 0.25em);box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.55);z-index:0;transform:translate(var(--pn-spotlight-x, 0%), var(--pn-spotlight-y, 0%));transition-property:transform, width, height, border-radius;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-wizard")} .pn-wizard-highlight{transition-duration:0s;transition-delay:0s}}${t("pn-wizard")} .pn-wizard-content{position:absolute;z-index:1;background:#ffffff;border-radius:2em;max-width:20em;box-shadow:0 0 0.5em rgba(0, 0, 0, 0.3);left:0;top:0;transform:translate(var(--pn-wizard-content-x), var(--pn-wizard-content-y));transition-property:transform;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-wizard")} .pn-wizard-content{transition-duration:0s;transition-delay:0s}}@media (max-width: 55em){${t("pn-wizard")} .pn-wizard-content{position:fixed;top:unset;bottom:0;left:0.5em;border-radius:2em 2em 0 0;width:calc(100vw - 1em);max-width:unset;transform:none}}${t("pn-wizard")} .pn-wizard-cancel{position:absolute;top:1em;right:1em;z-index:10}${t("pn-wizard")} .pn-wizard-text{padding:3em 1em 1em;text-align:center;display:flex;flex-direction:column;flex-wrap:nowrap;gap:clamp(0.5em, 5vw, 1em)}${t("pn-wizard")} .pn-wizard-label{margin:0;font-size:clamp(1.25em, 5vw, 1.5em);font-weight:700;color:#2d2013}${t("pn-wizard")} .pn-wizard-helpertext{margin:0;font-size:clamp(0.875em, 5vw, 1em);font-weight:400;color:#5e554a}${t("pn-wizard")} .pn-wizard-controls{border-top:0.0625em solid #d3cecb;padding:1em;display:flex;justify-content:end;gap:0.5em;flex-wrap:wrap}${t("pn-wizard")} .pn-wizard-indicator{margin-right:auto;align-self:center;font-size:1em;color:#5e554a;padding:0 0.625em}${t("pn-wizard")} .pn-wizard-arrow{position:absolute;width:0;height:0;border:0.5em solid transparent;top:0;right:0;bottom:0;left:0;transition-property:top, right, bottom, left, border-color;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-wizard")} .pn-wizard-arrow{transition-duration:0s;transition-delay:0s}}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=bottom]{top:100%;bottom:-1em;left:var(--pn-arrow-offset);border-top-color:#ffffff}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=top]{top:-1em;left:var(--pn-arrow-offset);border-bottom-color:#ffffff}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=right]{right:-1em;left:100%;top:var(--pn-arrow-offset);border-left-color:#ffffff}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=left]{left:-1em;top:var(--pn-arrow-offset);border-right-color:#ffffff}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=none]{display:none}`}},[772,"pn-wizard",{label:[1],helpertext:[1],language:[1025],pnId:[1025,"pn-id"],step:[1538],steps:[16],progress:[1],scrollBlock:[1,"scroll-block"],displayOverflow:[4,"display-overflow"],hideBack:[4,"hide-back"],hideNext:[4,"hide-next"],hideFinish:[4,"hide-finish"],labelBack:[1,"label-back"],labelNext:[1,"label-next"],labelFinish:[1,"label-finish"]},[[9,"resize","handleOverflow"]],{step:[{handleStepChange:0}],pnId:[{handleIdChange:0}]}]),z=g,x=function(){"undefined"!=typeof customElements&&["pn-wizard","pn-button","pn-icon","pn-progress-stepper","pn-spinner"].forEach((i=>{switch(i){case"pn-wizard":customElements.get(t(t(i)))||customElements.define(t(t(i)),g);break;case"pn-button":customElements.get(t(t(i)))||f();break;case"pn-icon":customElements.get(t(t(i)))||w();break;case"pn-progress-stepper":customElements.get(t(t(i)))||m();break;case"pn-spinner":customElements.get(t(t(i)))||u()}}))};export{z as PnWizard,x as defineCustomElement}