@postnord/pn-marketweb-components 4.1.0 → 4.1.2

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

@@ -2,154 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { u as uuidv4 } from './helpers.js';
-import { d as defineCustomElement$4 } from './pn-button2.js';
-import { d as defineCustomElement$3 } from './pn-icon2.js';
-import { d as defineCustomElement$2 } from './pn-spinner2.js';
-
-const pnButtonDropdownCss = "pn-button-dropdown{display:inline-block;position:relative}pn-button-dropdown .pn-button-dropdown-container{z-index:10;position:absolute;top:130%;left:0;background-color:#ffffff;border-radius:1em;box-shadow:0 0.125em 1em rgba(0, 0, 0, 0.2);overflow-y:auto;max-width:95vw;max-width:min(95vw, 40em);max-height:80vh;transform:scale(0);transform-origin:top left;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-button-dropdown .pn-button-dropdown-container{transition-duration:0s;transition-delay:0s}}pn-button-dropdown .pn-button-dropdown-container{transition-delay:0.2s}pn-button-dropdown .pn-button-dropdown-container[data-right]{left:unset;right:0;transform-origin:top right}pn-button-dropdown .pn-button-dropdown-container[data-top]{top:unset;bottom:130%;transform-origin:bottom left}pn-button-dropdown .pn-button-dropdown-content{position:relative;padding:1em;opacity:0;width:max-content;max-width:100%;visibility:hidden;transition-property:opacity, visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-button-dropdown .pn-button-dropdown-content{transition-duration:0s;transition-delay:0s}}pn-button-dropdown .pn-button-dropdown-content{transition-delay:0s, 0.2s}pn-button-dropdown .pn-button-dropdown[data-open=true] .pn-button-dropdown-container{transition-delay:0s}pn-button-dropdown .pn-button-dropdown[data-open=true] .pn-button-dropdown-content{opacity:1;visibility:visible}";
-
-const PnButtonDropdown$1 = /*@__PURE__*/ proxyCustomElement(class PnButtonDropdown extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    id = `pn-button-${uuidv4()}`;
-    focusableElements;
-    container;
-    dropdownButtonId = `${this.id}-dropdown`;
-    dropdownContentId = `${this.id}-content`;
-    get hostElement() { return this; }
-    right = false;
-    top = false;
-    /** The required label on the button. */
-    label;
-    /** The optional SVG content of the icon you want. */
-    icon;
-    /** Select between `light` and `warning`. */
-    appearance = '';
-    /** Select between `outlined` and `borderless`. */
-    variant = '';
-    /** Smaller button. */
-    small = false;
-    /** Tooltip (required for Icon Only). */
-    tooltip;
-    /** Open/close the dropdown without user interaction. */
-    open = false;
-    openHandler() {
-        this.toggleDropdown();
-        if (this.open) {
-            document.addEventListener('click', this.globalHandler);
-            document.addEventListener('keyup', this.globalHandler);
-        }
-        else {
-            document.removeEventListener('click', this.globalHandler);
-            document.removeEventListener('keyup', this.globalHandler);
-        }
-    }
-    componentDidLoad() {
-        if (this.open)
-            this.openHandler();
-    }
-    getRect(element) {
-        return element.getBoundingClientRect();
-    }
-    globalHandler = (e) => {
-        // global events that we want to track to close the select, like "click outside" or tab out
-        if (!this.hostElement.contains(e.target) || e?.key === 'Escape') {
-            this.open = false;
-        }
-    };
-    toggleDropdown() {
-        this.right = this.hostElement.offsetLeft > window.innerWidth / 2;
-        requestAnimationFrame(() => {
-            if (this.open) {
-                this.container.style.transition = 'none';
-                this.container.style.transform = 'none';
-            }
-            const containerRect = this.getRect(this.container);
-            const hostElementRect = this.getRect(this.hostElement);
-            // Calculate if dropdown should open upwards
-            // if there is enough space above button
-            const enoughSpaceAbove = hostElementRect.top > containerRect.height + window.innerWidth * 0.025;
-            this.top =
-                enoughSpaceAbove &&
-                    hostElementRect.top + hostElementRect.height + containerRect.height >
-                        window.innerHeight - window.innerWidth * 0.025;
-            let xAxis = 0;
-            if (containerRect.right > window.innerWidth || containerRect.x < 0) {
-                // 0.025 because the max width of the element is 95vw and we want the same margin on both sides
-                xAxis = containerRect.x + containerRect.width + window.innerWidth * 0.025 - window.innerWidth;
-            }
-            this.container.style.transform = '';
-            requestAnimationFrame(() => {
-                this.container.style.transition = '';
-                this.container.style.transform = this.open ? `scale(1) translateX(-${xAxis}px)` : '';
-                requestAnimationFrame(() => {
-                    this.hostElement.querySelector('.pn-button-dropdown').dataset.open = `${this.open}`;
-                });
-            });
-        });
-    }
-    toggle = () => {
-        this.open = !this.open;
-    };
-    render() {
-        return (h(Host, { key: '0b6deb752a9f01bea9571627205b5cd3efbc1c66' }, h("div", { key: 'c7833d539d682a980bb7cc529f17d9942ffd7eb2', class: "pn-button-dropdown" }, h("pn-button", { key: '42d252b99f98b0c3f51795c894e899c6489839c2', label: this.label, buttonId: this.dropdownButtonId, class: "pn-button-dropdown-label", appearance: this.appearance, variant: this.variant, small: this.small, icon: this.icon, iconOnly: !!this.tooltip && !!this.icon && !this.label, ariacontrols: this.dropdownContentId, ariahaspopup: "true", ariaexpanded: this.open.toString(), tooltip: this.tooltip, tooltipUp: !this.top, onPnClick: this.toggle }), h("div", { key: 'dd494c992ef2b51f31ed5c48d87fb3044ed40009', ref: el => (this.container = el), id: this.dropdownContentId, class: "pn-button-dropdown-container", role: "region", "aria-labelledby": this.dropdownButtonId, "data-right": this.right, "data-top": this.top }, h("div", { key: 'e217ae843fa641335ce0714272f68f9a080afe7d', class: "pn-button-dropdown-content" }, h("slot", { key: 'f52ad763a52e9ee17d9a95a1e3a959d61fae2fe1' }))))));
-    }
-    static get watchers() { return {
-        "open": ["openHandler"]
-    }; }
-    static get style() { return pnButtonDropdownCss; }
-}, [772, "pn-button-dropdown", {
-        "label": [1],
-        "icon": [1],
-        "appearance": [1],
-        "variant": [1],
-        "small": [4],
-        "tooltip": [1],
-        "open": [1540],
-        "right": [32],
-        "top": [32]
-    }, undefined, {
-        "open": ["openHandler"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-button-dropdown", "pn-button", "pn-icon", "pn-spinner"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-button-dropdown":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnButtonDropdown$1);
-            }
-            break;
-        case "pn-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "pn-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PnButtonDropdown = PnButtonDropdown$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnButtonDropdown, defineCustomElement };
-//# sourceMappingURL=pn-button-dropdown.js.map
-
-//# sourceMappingURL=pn-button-dropdown.js.map
+import{transformTag as t,proxyCustomElement as n,HTMLElement as o,h as i,Host as e}from"@stencil/core/internal/client";import{u as r}from"./helpers.js";import{d as s}from"./pn-button2.js";import{d}from"./pn-icon2.js";import{d as a}from"./pn-spinner2.js";const p=n(class extends o{constructor(t){super(),!1!==t&&this.__registerHost()}id="pn-button-"+r();focusableElements;container;dropdownButtonId=this.id+"-dropdown";dropdownContentId=this.id+"-content";get hostElement(){return this}right=!1;top=!1;label;icon;appearance="";variant="";small=!1;tooltip;open=!1;openHandler(){this.toggleDropdown(),this.open?(document.addEventListener("click",this.globalHandler),document.addEventListener("keyup",this.globalHandler)):(document.removeEventListener("click",this.globalHandler),document.removeEventListener("keyup",this.globalHandler))}componentDidLoad(){this.open&&this.openHandler()}getRect(t){return t.getBoundingClientRect()}globalHandler=t=>{this.hostElement.contains(t.target)&&"Escape"!==t?.key||(this.open=!1)};toggleDropdown(){this.right=this.hostElement.offsetLeft>window.innerWidth/2,requestAnimationFrame((()=>{this.open&&(this.container.style.transition="none",this.container.style.transform="none");const t=this.getRect(this.container),n=this.getRect(this.hostElement),o=n.top>t.height+.025*window.innerWidth;this.top=o&&n.top+n.height+t.height>window.innerHeight-.025*window.innerWidth;let i=0;(t.right>window.innerWidth||t.x<0)&&(i=t.x+t.width+.025*window.innerWidth-window.innerWidth),this.container.style.transform="",requestAnimationFrame((()=>{this.container.style.transition="",this.container.style.transform=this.open?`scale(1) translateX(-${i}px)`:"",requestAnimationFrame((()=>{this.hostElement.querySelector(".pn-button-dropdown").dataset.open=""+this.open}))}))}))}toggle=()=>{this.open=!this.open};render(){return i(e,{key:"0b6deb752a9f01bea9571627205b5cd3efbc1c66"},i("div",{key:"c7833d539d682a980bb7cc529f17d9942ffd7eb2",class:"pn-button-dropdown"},i("pn-button",{key:"42d252b99f98b0c3f51795c894e899c6489839c2",label:this.label,buttonId:this.dropdownButtonId,class:"pn-button-dropdown-label",appearance:this.appearance,variant:this.variant,small:this.small,icon:this.icon,iconOnly:!!this.tooltip&&!!this.icon&&!this.label,ariacontrols:this.dropdownContentId,ariahaspopup:"true",ariaexpanded:""+this.open,tooltip:this.tooltip,tooltipUp:!this.top,onPnClick:this.toggle}),i("div",{key:"dd494c992ef2b51f31ed5c48d87fb3044ed40009",ref:t=>this.container=t,id:this.dropdownContentId,class:"pn-button-dropdown-container",role:"region","aria-labelledby":this.dropdownButtonId,"data-right":this.right,"data-top":this.top},i("div",{key:"e217ae843fa641335ce0714272f68f9a080afe7d",class:"pn-button-dropdown-content"},i("slot",{key:"f52ad763a52e9ee17d9a95a1e3a959d61fae2fe1"})))))}static get watchers(){return{open:[{openHandler:0}]}}static get style(){return`${t("pn-button-dropdown")}{display:inline-block;position:relative}${t("pn-button-dropdown")} .pn-button-dropdown-container{z-index:10;position:absolute;top:130%;left:0;background-color:#ffffff;border-radius:1em;box-shadow:0 0.125em 1em rgba(0, 0, 0, 0.2);overflow-y:auto;max-width:95vw;max-width:min(95vw, 40em);max-height:80vh;transform:scale(0);transform-origin:top left;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-button-dropdown")} .pn-button-dropdown-container{transition-duration:0s;transition-delay:0s}}${t("pn-button-dropdown")} .pn-button-dropdown-container{transition-delay:0.2s}${t("pn-button-dropdown")} .pn-button-dropdown-container[data-right]{left:unset;right:0;transform-origin:top right}${t("pn-button-dropdown")} .pn-button-dropdown-container[data-top]{top:unset;bottom:130%;transform-origin:bottom left}${t("pn-button-dropdown")} .pn-button-dropdown-content{position:relative;padding:1em;opacity:0;width:max-content;max-width:100%;visibility:hidden;transition-property:opacity, visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-button-dropdown")} .pn-button-dropdown-content{transition-duration:0s;transition-delay:0s}}${t("pn-button-dropdown")} .pn-button-dropdown-content{transition-delay:0s, 0.2s}${t("pn-button-dropdown")} .pn-button-dropdown[data-open=true] .pn-button-dropdown-container{transition-delay:0s}${t("pn-button-dropdown")} .pn-button-dropdown[data-open=true] .pn-button-dropdown-content{opacity:1;visibility:visible}`}},[772,"pn-button-dropdown",{label:[1],icon:[1],appearance:[1],variant:[1],small:[4],tooltip:[1],open:[1540],right:[32],top:[32]},void 0,{open:[{openHandler:0}]}]),c=p,u=function(){"undefined"!=typeof customElements&&["pn-button-dropdown","pn-button","pn-icon","pn-spinner"].forEach((n=>{switch(n){case"pn-button-dropdown":customElements.get(t(t(n)))||customElements.define(t(t(n)),p);break;case"pn-button":customElements.get(t(t(n)))||s();break;case"pn-icon":customElements.get(t(t(n)))||d();break;case"pn-spinner":customElements.get(t(t(n)))||a()}}))};export{c as PnButtonDropdown,u as defineCustomElement}

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

@@ -2,12 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { P as PnButton$1, d as defineCustomElement$1 } from './pn-button2.js';
-
-const PnButton = PnButton$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnButton, defineCustomElement };
-//# sourceMappingURL=pn-button.js.map
-
-//# sourceMappingURL=pn-button.js.map
+import{P as o,d as t}from"./pn-button2.js";const s=o,n=t;export{s as PnButton,n as defineCustomElement}

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

@@ -2,281 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { o as ripple } from './helpers.js';
-import { d as defineCustomElement$2 } from './pn-icon2.js';
-import { d as defineCustomElement$1 } from './pn-spinner2.js';
-
-const pnButtonCss = "pn-button{display:inline-block}pn-button .pn-button{position:relative;cursor:pointer;padding:0.75em 1.5em;width:round(up, 100%, 1px);min-height:3em;min-width:5.5em;border:none;border-radius:3em;font-family:inherit;font-size:1em;font-weight:500;color:#ffffff;background-color:transparent;display:flex;justify-content:center;align-items:center;text-decoration:none;line-height:1.5em;-webkit-tap-highlight-color:transparent;transition-property:color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-button .pn-button{transition-duration:0s;transition-delay:0s}}pn-button .pn-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-button .pn-button:focus-visible{outline-color:#005d92}pn-button .pn-button:disabled,pn-button .pn-button[aria-disabled]{cursor:auto;pointer-events:none}pn-button .pn-button-content{z-index:2;display:flex;justify-content:center;align-items:center;gap:0.5em;transition-property:opacity, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-button .pn-button-content{transition-duration:0s;transition-delay:0s}}pn-button .pn-button-content{transition-delay:0.2s}pn-button .pn-button-bg{position:absolute;width:100%;height:100%;top:0;left:50%;transform:translateX(-50%) translateY(0);border-radius:3em;border:none;background-color:#005d92;overflow:hidden;transition-property:width, background-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-button .pn-button-bg{transition-duration:0s;transition-delay:0s}}pn-button .pn-button-bg{transition-delay:0.2s, 0s, 0s}pn-button .pn-button-bg::after{content:\"\";position:absolute;will-change:transform;width:100%;height:100%;background-color:#0d234b;border-radius:inherit;left:0;transform:translateX(-103%);opacity:0.5;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-button .pn-button-bg::after{transition-duration:0s;transition-delay:0s}}pn-button .pn-button .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#ffffff;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-button .pn-button-tooltip{z-index:5;position:absolute;top:calc(100% + 0.35em);left:50%;pointer-events:none;color:#ffffff;background-color:#0d234b;box-shadow:0 0.075em 0.225em rgba(0, 0, 0, 0.1), 0 0.4em 0.9em rgba(0, 0, 0, 0.13);padding:0.25em 0.75em;border-radius:inherit;max-width:min(95vw, 40em);transform:translateX(-50%) translateX(var(--pn-dx));width:max-content;opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-button .pn-button-tooltip{transition-duration:0s;transition-delay:0s}}pn-button .pn-button-tooltip-text{font-size:0.875em;font-weight:300}pn-button .pn-button pn-icon{flex-shrink:0}pn-button .pn-button pn-icon .pn-icon-svg path{fill:#ffffff}pn-button .pn-button pn-spinner{position:absolute;transform:scale(0)}pn-button .pn-button:hover .pn-button-bg:after,pn-button .pn-button:focus .pn-button-bg:after{transform:translateX(0)}pn-button .pn-button[data-appearance=light]{color:#005d92}pn-button .pn-button[data-appearance=light] pn-icon .pn-icon-svg path{fill:#005d92}pn-button .pn-button[data-appearance=light] pn-spinner .pn-spinner-circle{stroke:#005d92}pn-button .pn-button[data-appearance=light] pn-spinner .pn-spinner-dot{fill:#005d92}pn-button .pn-button[data-appearance=light] .pn-button-bg{border-color:#005d92;background-color:#ffffff}pn-button .pn-button[data-appearance=light] .pn-button-bg:after{background-color:#e0f8ff;opacity:1}pn-button .pn-button[data-appearance=light] .pn-button-bg .pn-ripple{background-color:#005d92}pn-button .pn-button[data-appearance=warning]{color:#a70707}pn-button .pn-button[data-appearance=warning] pn-icon .pn-icon-svg path{fill:#a70707}pn-button .pn-button[data-appearance=warning] pn-spinner .pn-spinner-circle{stroke:#a70707}pn-button .pn-button[data-appearance=warning] pn-spinner .pn-spinner-dot{fill:#a70707}pn-button .pn-button[data-appearance=warning] .pn-button-bg{border:0.0625em solid #a70707;background-color:#fdefee}pn-button .pn-button[data-appearance=warning] .pn-button-bg:after{background-color:#a70707;opacity:1}pn-button .pn-button[data-appearance=warning]:hover,pn-button .pn-button[data-appearance=warning]:focus{color:#ffffff}pn-button .pn-button[data-appearance=warning]:hover pn-icon .pn-icon-svg path,pn-button .pn-button[data-appearance=warning]:focus pn-icon .pn-icon-svg path{fill:#ffffff}pn-button .pn-button[data-appearance=warning]:hover pn-spinner .pn-spinner-circle,pn-button .pn-button[data-appearance=warning]:focus pn-spinner .pn-spinner-circle{stroke:#ffffff}pn-button .pn-button[data-appearance=warning]:hover pn-spinner .pn-spinner-dot,pn-button .pn-button[data-appearance=warning]:focus pn-spinner .pn-spinner-dot{fill:#ffffff}pn-button .pn-button[data-appearance=warning]{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-button .pn-button[data-appearance=warning]:focus-visible{outline-color:#a70707}pn-button .pn-button[data-variant=borderless] .pn-button-bg{border:none;background-color:transparent}pn-button .pn-button[data-variant=borderless] .pn-button-bg:after{background-color:#ffffff;opacity:0.1}pn-button .pn-button[data-variant=borderless][data-appearance=light] .pn-button-bg:after{background-color:#e0f8ff;opacity:1}pn-button .pn-button[data-variant=borderless][data-appearance=warning] .pn-button-bg:after{background-color:#a70707;opacity:1}pn-button .pn-button[data-variant=outlined] .pn-button-bg{border:0.0625em solid #ffffff;background-color:transparent}pn-button .pn-button[data-variant=outlined] .pn-button-bg:after{background-color:#ffffff;opacity:0.1}pn-button .pn-button[data-variant=outlined][data-appearance=light] .pn-button-bg{border-color:#005d92;background-color:#ffffff}pn-button .pn-button[data-variant=outlined][data-appearance=light] .pn-button-bg:after{background-color:#00a0d6;opacity:0.1}pn-button .pn-button[data-variant=outlined][data-appearance=warning] .pn-button-bg{border-color:#a70707}pn-button .pn-button[data-variant=outlined][data-appearance=warning] .pn-button-bg:after{background-color:#a70707;opacity:1}pn-button .pn-button[data-left-icon] .pn-button-content{flex-direction:row-reverse}pn-button .pn-button[data-icon-only]{width:3em;min-width:0}pn-button .pn-button[data-icon-only][data-small]{width:2em;min-width:0;padding:0}pn-button .pn-button[data-small]{padding:0.375em 1em;min-height:2em;min-width:unset;line-height:1.25em}pn-button .pn-button[data-small] .pn-button-content{gap:0.25em}pn-button .pn-button[data-small] .pn-button-text{font-size:0.875em}pn-button .pn-button[data-small] pn-icon .pn-icon-svg{height:1.25em;width:1.25em}pn-button .pn-button[data-tooltip-open] .pn-button-tooltip{opacity:1}pn-button .pn-button[data-tooltip-upwards] .pn-button-tooltip{top:auto;bottom:calc(100% + 0.35em)}pn-button .pn-button[data-loading] pn-spinner{transform:scale(1);transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-button .pn-button[data-loading] pn-spinner{transition-duration:0s;transition-delay:0s}}pn-button .pn-button[data-loading] pn-spinner{transition-delay:0.2s}pn-button .pn-button[data-loading] .pn-button-content{pointer-events:none;opacity:0;transition-delay:0s;transform:translateY(100%)}pn-button .pn-button[data-loading] .pn-button-bg{width:3em}pn-button .pn-button[data-loading][data-small] .pn-button-bg{width:2em}";
-
-const PnButton = /*@__PURE__*/ proxyCustomElement(class PnButton extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.pnClick = createEvent(this, "pnClick", 7);
-    }
-    buttonEl;
-    tooltipEl;
-    tooltipDx;
-    openEvents = ['mouseover', 'focus'];
-    closeEvents = ['mouseleave', 'blur', 'touchcancel', 'touchleave'];
-    eventListeners = [...this.openEvents, ...this.closeEvents];
-    get hostElement() { return this; }
-    tooltipOpen = false;
-    tooltipUpwards = false;
-    /** The label of the button, this is the same as using the default slot. @since v7.4.0 */
-    label = '';
-    /**
-     * Select the button appearance: default (blue), `light` (white) and  `warning` (red).
-     *
-     * @category Visual
-     */
-    appearance = '';
-    /**
-     * Select the button variant: default (colored background), `outlined` (bordered, no background) and `borderless` (borderless, no background).
-     *
-     * @category Visual
-     */
-    variant = '';
-    /** Use the small button. @category Visual */
-    small = false;
-    /** Display the loading indicator. @category Visual */
-    loading = false;
-    /**
-     * The SVG content of the icon you want.
-     * @see {@link https://portal.postnord.com/web-components/?path=/docs/docs-assets--docs pn-design-assets}
-     * @category Icon
-     */
-    icon;
-    /**
-     * Turn the button into an icon only. Requires `icon` and one of the following props to work: `tooltip`, `arialabel` or `arialabelledby`.
-     * @summary __You need an `icon` selected, as well as either `tooltip`, `arialabel` or `arialabelledby` for this to work__.
-     * @see {@link icon}
-     * @since v7.4.0
-     * @category Icon
-     */
-    iconOnly = false;
-    /**
-     * Place the `icon` to the left of the button.
-     *
-     * @summary __You need an `icon` selected for this to work__.
-     * @see {@link icon}
-     * @category Icon
-     */
-    leftIcon = false;
-    /**
-     * When the user focus/hover the button, the `tooltip` text will show up.
-     *
-     * @category Tooltip
-     */
-    tooltip;
-    /**
-     * Prefer the tooltip to open upwards. Will still go downwards if there is no space.
-     * @since v7.4.0
-     * @category Tooltip
-     */
-    tooltipUp = false;
-    /** Select HTML button type. @category Button */
-    type = 'button';
-    /**
-     * Connect this button to a HTML form.
-     * @category Button
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form HTML button form}
-     */
-    form;
-    /** Pass an href to make the button into link (a-tag). @category Link */
-    href;
-    /** The rel attribute of the link. @category Link */
-    rel;
-    /** The target attribute of the link. @category Link */
-    target;
-    /** The download attribute of the link. @category Link */
-    download;
-    /** HTML ID. @category HTML attributes */
-    buttonId = null;
-    /** HTML aria-label attribute. @category HTML attributes */
-    arialabel = null;
-    /** HTML aria-labelledby attribute. @category HTML attributes */
-    arialabelledby = null;
-    /** HTML aria-current attribute. @since v7.9.0 @category HTML attributes */
-    ariacurrent = null;
-    /** HTML aria-controls attribute. @category HTML attributes */
-    ariacontrols = null;
-    /** HTML aria-pressed attribute. @category HTML attributes */
-    ariapressed = null;
-    /** HTML aria-haspopup attribute. @category HTML attributes */
-    ariahaspopup = null;
-    /** HTML aria-expanded attribute. @category HTML attributes */
-    ariaexpanded = null;
-    /** HTML tabindex. @category HTML attributes */
-    noTab = false;
-    openHandler() {
-        if (this.tooltipOpen)
-            this.checkTooltipPosition();
-    }
-    iconOnlyHandler() {
-        this.checkTooltipPosition();
-        if (this.tooltip)
-            this.initTooltip();
-        else
-            this.removeTooltip();
-    }
-    /**
-     * This event is fired when the `button`/`a` element of the `pn-button` is clicked.
-     * Setting an eventListener for `click` on the `pn-button` will trigger if you click outside of the button area
-     * or if the button is `disabled` with the `loading` prop.
-     * @since v7.4.0
-     **/
-    pnClick;
-    componentWillLoad() {
-        this.tooltipUpwards = this.tooltipUp;
-    }
-    componentDidLoad() {
-        this.iconOnlyHandler();
-    }
-    getRect(element) {
-        return element.getBoundingClientRect();
-    }
-    initTooltip() {
-        this.eventListeners.forEach(e => this.buttonEl.addEventListener(e, this.toggleTooltip));
-    }
-    removeTooltip() {
-        this.eventListeners.forEach(e => this.buttonEl.removeEventListener(e, this.toggleTooltip));
-    }
-    toggleTooltip = (event) => {
-        this.tooltipOpen = this.openEvents.includes(event.type);
-    };
-    setTooltipOffset() {
-        this.tooltipEl.style.setProperty('--pn-dx', `${this.tooltipDx}px`);
-    }
-    checkTooltipPosition() {
-        this.tooltipEl.style.transform = 'translateX(-50%)';
-        this.tooltipUpwards = this.tooltipUp;
-        requestAnimationFrame(() => {
-            const { top, x, y, right, height } = this.getRect(this.tooltipEl);
-            const extraMargin = 16;
-            this.tooltipDx = 0;
-            this.tooltipUpwards = this.tooltipUp ? top > height : y + height > window.innerHeight;
-            this.tooltipEl.style.transform = '';
-            if (x < 0)
-                this.tooltipDx = x * -1 + extraMargin;
-            if (right > window.innerWidth)
-                this.tooltipDx = window.innerWidth - right - extraMargin - 8;
-            requestAnimationFrame(() => this.setTooltipOffset());
-        });
-    }
-    getAttributes() {
-        const attrs = this.href
-            ? {
-                'href': this.href,
-                'rel': !this.rel && this.target === '_blank' ? 'noopener' : this.rel,
-                'target': this.target ?? null,
-                'download': this.download ?? null,
-                'aria-current': this.ariacurrent,
-                'aria-disabled': this.loading ? 'true' : null,
-            }
-            : {
-                'type': this.type,
-                'form': this.form,
-                'disabled': this.loading,
-                'aria-pressed': this.ariapressed,
-                'aria-controls': this.ariacontrols,
-                'aria-haspopup': this.ariahaspopup,
-                'aria-expanded': this.ariaexpanded,
-            };
-        const appearances = ['light', 'warning'];
-        const variations = ['borderless', 'outlined'];
-        return {
-            'tabindex': this.noTab || (this.href && this.loading) ? '-1' : null,
-            'data-small': this.small,
-            'data-loading': this.loading,
-            'data-tooltip-open': this.tooltipOpen,
-            'data-tooltip-upwards': this.tooltipUpwards,
-            'data-icon-only': this.showIconOnly(),
-            'data-left-icon': this.leftIcon,
-            'data-appearance': appearances.includes(this.appearance) ? this.appearance : null,
-            'data-variant': variations.includes(this.variant) ? this.variant : null,
-            ...attrs,
-        };
-    }
-    getTagName() {
-        return this.href ? 'a' : 'button';
-    }
-    showIconOnly() {
-        return !!this.icon && this.iconOnly && !!(this.tooltip || this.arialabel || this.arialabelledby);
-    }
-    handleClick(event) {
-        ripple(event, this.hostElement, '.pn-button-bg');
-        this.pnClick.emit(event);
-    }
-    render() {
-        const TagName = this.getTagName();
-        return (h(Host, { key: '9fd62df52e09b5f7915c1652c3bd23c47c40db42' }, h(TagName, { key: 'aecef05e4c20bb9c501399f18b7290a33e5d82e7', class: "pn-button", id: this.buttonId, "aria-label": this.arialabel, "aria-labelledby": this.arialabelledby, onClick: e => this.handleClick(e), ...this.getAttributes(), ref: (el) => (this.buttonEl = el) }, h("div", { key: '9cb56181926a77cd985be9447dd5277720370bf6', class: "pn-button-bg" }), h("div", { key: 'f81963c493162009d2219d72171f753c3ba5dcb8', class: "pn-button-content" }, h("div", { key: 'd6cc476c9bb3eaa59ae9cf80700b33e4bc836494', class: "pn-button-text", hidden: this.showIconOnly() }, this.label, h("slot", { key: '83b07110e17088f980e4a7f0094f5330f7dcc17b' })), !!this.icon && h("pn-icon", { key: '6d352caac885f7f5cf3819a7b555e278e7761259', icon: this.icon })), h("pn-spinner", { key: '3176c1f592b5e48c14f7baccc9366bf0fc0187dd', light: true }), h("div", { key: 'b97ecf99cdf1c4fa0c8db3b26c2eac33c5c9bba4', class: "pn-button-tooltip", hidden: !this.tooltip, ref: el => (this.tooltipEl = el) }, h("span", { key: '7825cd9635f5897db28ee4b32d2ac56a8c9a9b0d', class: "pn-button-tooltip-text" }, this.tooltip)))));
-    }
-    static get watchers() { return {
-        "tooltipOpen": ["openHandler"],
-        "tooltip": ["iconOnlyHandler"]
-    }; }
-    static get style() { return pnButtonCss; }
-}, [772, "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]
-    }, undefined, {
-        "tooltipOpen": ["openHandler"],
-        "tooltip": ["iconOnlyHandler"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-button", "pn-icon", "pn-spinner"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnButton);
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "pn-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { PnButton as P, defineCustomElement as d };
-//# sourceMappingURL=pn-button2.js.map
-
-//# sourceMappingURL=pn-button2.js.map
+import{transformTag as t,proxyCustomElement as n,HTMLElement as o,createEvent as a,h as i,Host as e}from"@stencil/core/internal/client";import{o as r}from"./helpers.js";import{d as p}from"./pn-icon2.js";import{d as s}from"./pn-spinner2.js";const b=n(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.pnClick=a(this,"pnClick",7)}buttonEl;tooltipEl;tooltipDx;openEvents=["mouseover","focus"];closeEvents=["mouseleave","blur","touchcancel","touchleave"];eventListeners=[...this.openEvents,...this.closeEvents];get hostElement(){return this}tooltipOpen=!1;tooltipUpwards=!1;label="";appearance="";variant="";small=!1;loading=!1;icon;iconOnly=!1;leftIcon=!1;tooltip;tooltipUp=!1;type="button";form;href;rel;target;download;buttonId=null;arialabel=null;arialabelledby=null;ariacurrent=null;ariacontrols=null;ariapressed=null;ariahaspopup=null;ariaexpanded=null;noTab=!1;openHandler(){this.tooltipOpen&&this.checkTooltipPosition()}iconOnlyHandler(){this.checkTooltipPosition(),this.tooltip?this.initTooltip():this.removeTooltip()}pnClick;componentWillLoad(){this.tooltipUpwards=this.tooltipUp}componentDidLoad(){this.iconOnlyHandler()}getRect(t){return t.getBoundingClientRect()}initTooltip(){this.eventListeners.forEach((t=>this.buttonEl.addEventListener(t,this.toggleTooltip)))}removeTooltip(){this.eventListeners.forEach((t=>this.buttonEl.removeEventListener(t,this.toggleTooltip)))}toggleTooltip=t=>{this.tooltipOpen=this.openEvents.includes(t.type)};setTooltipOffset(){this.tooltipEl.style.setProperty("--pn-dx",`${this.tooltipDx}px`)}checkTooltipPosition(){this.tooltipEl.style.transform="translateX(-50%)",this.tooltipUpwards=this.tooltipUp,requestAnimationFrame((()=>{const{top:t,x:n,y:o,right:a,height:i}=this.getRect(this.tooltipEl);this.tooltipDx=0,this.tooltipUpwards=this.tooltipUp?t>i:o+i>window.innerHeight,this.tooltipEl.style.transform="",n<0&&(this.tooltipDx=-1*n+16),a>window.innerWidth&&(this.tooltipDx=window.innerWidth-a-16-8),requestAnimationFrame((()=>this.setTooltipOffset()))}))}getAttributes(){const t=this.href?{href:this.href,rel:this.rel||"_blank"!==this.target?this.rel:"noopener",target:this.target??null,download:this.download??null,"aria-current":this.ariacurrent,"aria-disabled":this.loading?"true":null}:{type:this.type,form:this.form,disabled:this.loading,"aria-pressed":this.ariapressed,"aria-controls":this.ariacontrols,"aria-haspopup":this.ariahaspopup,"aria-expanded":this.ariaexpanded};return{tabindex:this.noTab||this.href&&this.loading?"-1":null,"data-small":this.small,"data-loading":this.loading,"data-tooltip-open":this.tooltipOpen,"data-tooltip-upwards":this.tooltipUpwards,"data-icon-only":this.showIconOnly(),"data-left-icon":this.leftIcon,"data-appearance":["light","warning"].includes(this.appearance)?this.appearance:null,"data-variant":["borderless","outlined"].includes(this.variant)?this.variant:null,...t}}getTagName(){return this.href?"a":"button"}showIconOnly(){return!!this.icon&&this.iconOnly&&!!(this.tooltip||this.arialabel||this.arialabelledby)}handleClick(t){r(t,this.hostElement,".pn-button-bg"),this.pnClick.emit(t)}render(){const t=this.getTagName();return i(e,{key:"9fd62df52e09b5f7915c1652c3bd23c47c40db42"},i(t,{key:"aecef05e4c20bb9c501399f18b7290a33e5d82e7",class:"pn-button",id:this.buttonId,"aria-label":this.arialabel,"aria-labelledby":this.arialabelledby,onClick:t=>this.handleClick(t),...this.getAttributes(),ref:t=>this.buttonEl=t},i("div",{key:"9cb56181926a77cd985be9447dd5277720370bf6",class:"pn-button-bg"}),i("div",{key:"f81963c493162009d2219d72171f753c3ba5dcb8",class:"pn-button-content"},i("div",{key:"d6cc476c9bb3eaa59ae9cf80700b33e4bc836494",class:"pn-button-text",hidden:this.showIconOnly()},this.label,i("slot",{key:"83b07110e17088f980e4a7f0094f5330f7dcc17b"})),!!this.icon&&i("pn-icon",{key:"6d352caac885f7f5cf3819a7b555e278e7761259",icon:this.icon})),i("pn-spinner",{key:"3176c1f592b5e48c14f7baccc9366bf0fc0187dd",light:!0}),i("div",{key:"b97ecf99cdf1c4fa0c8db3b26c2eac33c5c9bba4",class:"pn-button-tooltip",hidden:!this.tooltip,ref:t=>this.tooltipEl=t},i("span",{key:"7825cd9635f5897db28ee4b32d2ac56a8c9a9b0d",class:"pn-button-tooltip-text"},this.tooltip))))}static get watchers(){return{tooltipOpen:[{openHandler:0}],tooltip:[{iconOnlyHandler:0}]}}static get style(){return`${t("pn-button")}{display:inline-block}${t("pn-button")} .pn-button{position:relative;cursor:pointer;padding:0.75em 1.5em;width:round(up, 100%, 1px);min-height:3em;min-width:5.5em;border:none;border-radius:3em;font-family:inherit;font-size:1em;font-weight:500;color:#ffffff;background-color:transparent;display:flex;justify-content:center;align-items:center;text-decoration:none;line-height:1.5em;-webkit-tap-highlight-color:transparent;transition-property:color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-button")} .pn-button{transition-duration:0s;transition-delay:0s}}${t("pn-button")} .pn-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-button")} .pn-button:focus-visible{outline-color:#005d92}${t("pn-button")} .pn-button:disabled,${t("pn-button")} .pn-button[aria-disabled]{cursor:auto;pointer-events:none}${t("pn-button")} .pn-button-content{z-index:2;display:flex;justify-content:center;align-items:center;gap:0.5em;transition-property:opacity, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-button")} .pn-button-content{transition-duration:0s;transition-delay:0s}}${t("pn-button")} .pn-button-content{transition-delay:0.2s}${t("pn-button")} .pn-button-bg{position:absolute;width:100%;height:100%;top:0;left:50%;transform:translateX(-50%) translateY(0);border-radius:3em;border:none;background-color:#005d92;overflow:hidden;transition-property:width, background-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-button")} .pn-button-bg{transition-duration:0s;transition-delay:0s}}${t("pn-button")} .pn-button-bg{transition-delay:0.2s, 0s, 0s}${t("pn-button")} .pn-button-bg::after{content:"";position:absolute;will-change:transform;width:100%;height:100%;background-color:#0d234b;border-radius:inherit;left:0;transform:translateX(-103%);opacity:0.5;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-button")} .pn-button-bg::after{transition-duration:0s;transition-delay:0s}}${t("pn-button")} .pn-button .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#ffffff;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}}${t("pn-button")} .pn-button-tooltip{z-index:5;position:absolute;top:calc(100% + 0.35em);left:50%;pointer-events:none;color:#ffffff;background-color:#0d234b;box-shadow:0 0.075em 0.225em rgba(0, 0, 0, 0.1), 0 0.4em 0.9em rgba(0, 0, 0, 0.13);padding:0.25em 0.75em;border-radius:inherit;max-width:min(95vw, 40em);transform:translateX(-50%) translateX(var(--pn-dx));width:max-content;opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-button")} .pn-button-tooltip{transition-duration:0s;transition-delay:0s}}${t("pn-button")} .pn-button-tooltip-text{font-size:0.875em;font-weight:300}${t("pn-button")} .pn-button ${t("pn-icon")}{flex-shrink:0}${t("pn-button")} .pn-button ${t("pn-icon")} .pn-icon-svg path{fill:#ffffff}${t("pn-button")} .pn-button ${t("pn-spinner")}{position:absolute;transform:scale(0)}${t("pn-button")} .pn-button:hover .pn-button-bg:after,${t("pn-button")} .pn-button:focus .pn-button-bg:after{transform:translateX(0)}${t("pn-button")} .pn-button[data-appearance=light]{color:#005d92}${t("pn-button")} .pn-button[data-appearance=light] ${t("pn-icon")} .pn-icon-svg path{fill:#005d92}${t("pn-button")} .pn-button[data-appearance=light] ${t("pn-spinner")} .pn-spinner-circle{stroke:#005d92}${t("pn-button")} .pn-button[data-appearance=light] ${t("pn-spinner")} .pn-spinner-dot{fill:#005d92}${t("pn-button")} .pn-button[data-appearance=light] .pn-button-bg{border-color:#005d92;background-color:#ffffff}${t("pn-button")} .pn-button[data-appearance=light] .pn-button-bg:after{background-color:#e0f8ff;opacity:1}${t("pn-button")} .pn-button[data-appearance=light] .pn-button-bg .pn-ripple{background-color:#005d92}${t("pn-button")} .pn-button[data-appearance=warning]{color:#a70707}${t("pn-button")} .pn-button[data-appearance=warning] ${t("pn-icon")} .pn-icon-svg path{fill:#a70707}${t("pn-button")} .pn-button[data-appearance=warning] ${t("pn-spinner")} .pn-spinner-circle{stroke:#a70707}${t("pn-button")} .pn-button[data-appearance=warning] ${t("pn-spinner")} .pn-spinner-dot{fill:#a70707}${t("pn-button")} .pn-button[data-appearance=warning] .pn-button-bg{border:0.0625em solid #a70707;background-color:#fdefee}${t("pn-button")} .pn-button[data-appearance=warning] .pn-button-bg:after{background-color:#a70707;opacity:1}${t("pn-button")} .pn-button[data-appearance=warning]:hover,${t("pn-button")} .pn-button[data-appearance=warning]:focus{color:#ffffff}${t("pn-button")} .pn-button[data-appearance=warning]:hover ${t("pn-icon")} .pn-icon-svg path,${t("pn-button")} .pn-button[data-appearance=warning]:focus ${t("pn-icon")} .pn-icon-svg path{fill:#ffffff}${t("pn-button")} .pn-button[data-appearance=warning]:hover ${t("pn-spinner")} .pn-spinner-circle,${t("pn-button")} .pn-button[data-appearance=warning]:focus ${t("pn-spinner")} .pn-spinner-circle{stroke:#ffffff}${t("pn-button")} .pn-button[data-appearance=warning]:hover ${t("pn-spinner")} .pn-spinner-dot,${t("pn-button")} .pn-button[data-appearance=warning]:focus ${t("pn-spinner")} .pn-spinner-dot{fill:#ffffff}${t("pn-button")} .pn-button[data-appearance=warning]{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-button")} .pn-button[data-appearance=warning]:focus-visible{outline-color:#a70707}${t("pn-button")} .pn-button[data-variant=borderless] .pn-button-bg{border:none;background-color:transparent}${t("pn-button")} .pn-button[data-variant=borderless] .pn-button-bg:after{background-color:#ffffff;opacity:0.1}${t("pn-button")} .pn-button[data-variant=borderless][data-appearance=light] .pn-button-bg:after{background-color:#e0f8ff;opacity:1}${t("pn-button")} .pn-button[data-variant=borderless][data-appearance=warning] .pn-button-bg:after{background-color:#a70707;opacity:1}${t("pn-button")} .pn-button[data-variant=outlined] .pn-button-bg{border:0.0625em solid #ffffff;background-color:transparent}${t("pn-button")} .pn-button[data-variant=outlined] .pn-button-bg:after{background-color:#ffffff;opacity:0.1}${t("pn-button")} .pn-button[data-variant=outlined][data-appearance=light] .pn-button-bg{border-color:#005d92;background-color:#ffffff}${t("pn-button")} .pn-button[data-variant=outlined][data-appearance=light] .pn-button-bg:after{background-color:#00a0d6;opacity:0.1}${t("pn-button")} .pn-button[data-variant=outlined][data-appearance=warning] .pn-button-bg{border-color:#a70707}${t("pn-button")} .pn-button[data-variant=outlined][data-appearance=warning] .pn-button-bg:after{background-color:#a70707;opacity:1}${t("pn-button")} .pn-button[data-left-icon] .pn-button-content{flex-direction:row-reverse}${t("pn-button")} .pn-button[data-icon-only]{width:3em;min-width:0}${t("pn-button")} .pn-button[data-icon-only][data-small]{width:2em;min-width:0;padding:0}${t("pn-button")} .pn-button[data-small]{padding:0.375em 1em;min-height:2em;min-width:unset;line-height:1.25em}${t("pn-button")} .pn-button[data-small] .pn-button-content{gap:0.25em}${t("pn-button")} .pn-button[data-small] .pn-button-text{font-size:0.875em}${t("pn-button")} .pn-button[data-small] ${t("pn-icon")} .pn-icon-svg{height:1.25em;width:1.25em}${t("pn-button")} .pn-button[data-tooltip-open] .pn-button-tooltip{opacity:1}${t("pn-button")} .pn-button[data-tooltip-upwards] .pn-button-tooltip{top:auto;bottom:calc(100% + 0.35em)}${t("pn-button")} .pn-button[data-loading] ${t("pn-spinner")}{transform:scale(1);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-button")} .pn-button[data-loading] ${t("pn-spinner")}{transition-duration:0s;transition-delay:0s}}${t("pn-button")} .pn-button[data-loading] ${t("pn-spinner")}{transition-delay:0.2s}${t("pn-button")} .pn-button[data-loading] .pn-button-content{pointer-events:none;opacity:0;transition-delay:0s;transform:translateY(100%)}${t("pn-button")} .pn-button[data-loading] .pn-button-bg{width:3em}${t("pn-button")} .pn-button[data-loading][data-small] .pn-button-bg{width:2em}`}},[772,"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]},void 0,{tooltipOpen:[{openHandler:0}],tooltip:[{iconOnlyHandler:0}]}]);function u(){"undefined"!=typeof customElements&&["pn-button","pn-icon","pn-spinner"].forEach((n=>{switch(n){case"pn-button":customElements.get(t(t(n)))||customElements.define(t(t(n)),b);break;case"pn-icon":customElements.get(t(t(n)))||p();break;case"pn-spinner":customElements.get(t(t(n)))||s()}}))}export{b as P,u as d}