@postnord/pn-marketweb-components 4.1.0 → 4.1.2

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

@@ -2,121 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { o as open_in_new } from './open_in_new.js';
-import { o as ripple } from './helpers.js';
-import { d as defineCustomElement$3 } from './pn-icon2.js';
-import { d as defineCustomElement$2 } from './pn-illustration2.js';
-
-const pnTileCss = "pn-tile{position:relative;display:block}pn-tile .pn-tile{position:relative;overflow:hidden;word-break:break-word;text-align:center;border-radius:0.5em;padding:clamp(0.75em, 3vw, 1.5em);height:100%;color:#2d2013;background-color:#ffffff;box-shadow:0em 0.0625em 0.125em 0em rgba(20, 20, 20, 0.11), 0em 0.1875em 0.4375em 0em rgba(0, 0, 0, 0.13);display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:flex-start;gap:clamp(1em, 5vw, 1.5em);outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:box-shadow, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tile .pn-tile{transition-duration:0s;transition-delay:0s}}pn-tile .pn-tile .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}pn-tile .pn-tile[data-horizontal]{text-align:left;flex-direction:row;flex-wrap:nowrap;gap:clamp(1em, 5vw, 1.5em)}pn-tile .pn-tile[data-horizontal] .pn-tile-illustration[data-circle]:before{clip-path:ellipse(0% 100% at 0% 50%)}pn-tile .pn-tile[data-horizontal] .pn-tile-text{flex-grow:2}pn-tile .pn-tile[data-href][data-focus]{outline-color:#005d92;box-shadow:0em 0em 0em 0em rgba(20, 20, 20, 0.11), 0em 0em 0em 0em rgba(0, 0, 0, 0.13)}pn-tile .pn-tile[data-href]:hover{background-color:rgba(183, 235, 252, 0.3)}pn-tile .pn-tile[data-href]:hover .pn-tile-illustration[data-circle]:before,pn-tile .pn-tile[data-href]:focus-within .pn-tile-illustration[data-circle]:before{clip-path:ellipse(100% 50% at 50% -25%)}pn-tile .pn-tile[data-href]:hover[data-horizontal] .pn-tile-illustration[data-circle]:before,pn-tile .pn-tile[data-href]:focus-within[data-horizontal] .pn-tile-illustration[data-circle]:before{clip-path:ellipse(50% 100% at -25% 50%)}pn-tile .pn-tile[data-href]:hover .pn-tile-link,pn-tile .pn-tile[data-href]:focus-within .pn-tile-link{color:#0d234b;text-decoration-color:#0d234b}pn-tile .pn-tile[data-href]:hover pn-icon .pn-icon-svg path,pn-tile .pn-tile[data-href]:focus-within pn-icon .pn-icon-svg path{fill:#0d234b}pn-tile .pn-tile-illustration{z-index:2;flex:1 1;max-width:7.5em;max-height:7.5em}pn-tile .pn-tile-illustration[data-icon]{flex:0 0}pn-tile .pn-tile-illustration[data-icon] pn-icon{padding:1em;border-radius:50%;background-color:#e0f8ff}pn-tile .pn-tile-illustration[data-icon] pn-icon>svg{font-size:2em}pn-tile .pn-tile-illustration-slot{display:block;height:100%;width:100%}pn-tile .pn-tile-illustration[data-circle]:before{content:\"\";position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%;background-color:rgba(183, 235, 252, 0.7);background-color:rgba(183, 235, 252, 0.7);clip-path:ellipse(100% 0% at 50% 0%);transition-property:clip-path;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tile .pn-tile-illustration[data-circle]:before{transition-duration:0s;transition-delay:0s}}pn-tile .pn-tile-text{z-index:3;flex:1 1;display:flex;flex-direction:column;gap:0.5em}pn-tile .pn-tile-link{cursor:pointer;color:#005d92;text-decoration:underline;text-decoration-color:transparent;-webkit-tap-highlight-color:transparent;transition-property:color, text-decoration-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tile .pn-tile-link{transition-duration:0s;transition-delay:0s}}pn-tile .pn-tile-link:focus{outline:0;text-decoration-color:#0d234b;color:#0d234b}pn-tile .pn-tile-link:after{content:\"\";position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}pn-tile .pn-tile-title{font-family:inherit;font-weight:700;font-size:clamp(1.25em, 3vw, 1.5em);margin:0em}pn-tile .pn-tile-title pn-icon{margin-left:0.25em;vertical-align:middle}pn-tile .pn-tile-slot{font-weight:400;color:#5e554a;display:flex;flex-direction:column;gap:0.25em}pn-tile .pn-tile-paragraph,pn-tile .pn-tile p{font-size:0.875em}pn-tile .pn-tile-paragraph:last-child,pn-tile .pn-tile p:last-child{margin:0em}";
-
-const PnTile$1 = /*@__PURE__*/ proxyCustomElement(class PnTile extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.pnTile = createEvent(this, "pnTile", 7);
-    }
-    mo;
-    tile;
-    illustrationSlot;
-    visibleOutline = false;
-    get hostElement() { return this; }
-    /** Label of the link. This is required for the component to be accessible. */
-    label;
-    /** Set a string of text for the tile. Same as the default slot. @since v7.12.0 */
-    text;
-    /** The link of the tile. This is required for the component to be accessible. @category href */
-    url;
-    /** The target attribute of the link. @category href */
-    target;
-    /** The rel attribute of the link. @category href */
-    rel = 'noopener noreferrer';
-    /** The SVG content of an illustration. @category Image */
-    illustration;
-    /** The SVG content of a decorative icon. @since v7.12.0 @category Image */
-    icon;
-    /** Use the horizontal tile. @category Layout */
-    horizontal = false;
-    /**
-     * Emitted when the link is clicked. Use the `click` property to `preventDefault`
-     * if you wish to perform the navigation programmatically.
-     * @since v7.12.0
-     **/
-    pnTile;
-    connectedCallback() {
-        this.mo = new MutationObserver(() => forceUpdate(this.hostElement));
-        this.mo.observe(this.hostElement, { subtree: true, childList: true });
-    }
-    disconnectedCallback() {
-        this.mo?.disconnect();
-    }
-    isExternal() {
-        return this.target === '_blank';
-    }
-    showIcon() {
-        return !!this.icon && !this.showSlotIllustration();
-    }
-    showPropIllustration() {
-        return !!this.illustration && !this.showSlotIllustration();
-    }
-    showSlotIllustration() {
-        return !!this.illustrationSlot?.querySelector('[slot="illustration"]');
-    }
-    showImage() {
-        return this.showIcon() || this.showPropIllustration() || this.showSlotIllustration();
-    }
-    handleFocus({ type, target }) {
-        this.visibleOutline = type === 'focus' && target.matches(':focus-visible');
-    }
-    clickHandler(event) {
-        ripple(event, this.tile);
-        this.pnTile.emit({ click: event });
-    }
-    render() {
-        return (h(Host, { key: 'b7facaea2144806873162b127672914f9cee6f26' }, h("div", { key: '1a5e6c028c9c16e6d81c9d08bb471b7379f2b4f0', class: "pn-tile", "data-horizontal": this.horizontal, "data-href": !!this.url, "data-focus": this.visibleOutline, ref: el => (this.tile = el) }, h("div", { key: '187628c912a1605f0ae895842b6f7ba9b1b8b542', class: "pn-tile-illustration", "data-circle": !!this.url, "data-icon": this.showIcon(), role: "presentation", hidden: !this.showImage() }, this.showPropIllustration() ? (h("pn-illustration", { illustration: this.illustration })) : (this.showIcon() && h("pn-icon", { color: "blue700", icon: this.icon })), h("div", { key: 'eafbf2855935fd9bc92302b1cfa9c0ce1355f450', class: "pn-tile-illustration-slot", hidden: !this.showSlotIllustration(), ref: el => (this.illustrationSlot = el) }, h("slot", { key: '31e834d443c0446e77a00aa82ba3d7b8595b5878', name: "illustration" }))), h("div", { key: '8649ac5e9d3d7417f5f421dbb35b52f0dbd0d1c5', class: "pn-tile-text" }, h("h3", { key: 'f2348608fb3ce55325cbc0010f145815e3c7019b', class: "pn-tile-title" }, this.url ? (h("a", { class: "pn-tile-link", href: this.url, target: this.target, rel: !this.rel && this.isExternal() ? 'noopener noreferrer' : this.rel, onClick: e => this.clickHandler(e), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.label)) : (this.label), this.isExternal() && h("pn-icon", { key: '689efd8fa63b5e5684e6a34327a39176745d46b8', icon: open_in_new, small: true, color: "blue700" })), h("div", { key: '201d4ed4a8032c1a2bce27d302066282d4155db1', class: "pn-tile-slot" }, !!this.text && h("p", { key: 'e596a7023a67a8963b84d9dc55f483a213d54bdf', class: "pn-tile-paragraph" }, this.text), h("slot", { key: '01580a9dcf37127d698e8bbaf0c5e457e8be4929' }))))));
-    }
-    static get style() { return pnTileCss; }
-}, [772, "pn-tile", {
-        "label": [1],
-        "text": [1],
-        "url": [1],
-        "target": [1],
-        "rel": [1],
-        "illustration": [1],
-        "icon": [1],
-        "horizontal": [4],
-        "visibleOutline": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-tile", "pn-icon", "pn-illustration"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-tile":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnTile$1);
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "pn-illustration":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PnTile = PnTile$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnTile, defineCustomElement };
-//# sourceMappingURL=pn-tile.js.map
-
-//# sourceMappingURL=pn-tile.js.map
+import{transformTag as t,proxyCustomElement as e,HTMLElement as i,createEvent as n,forceUpdate as l,h as o,Host as a}from"@stencil/core/internal/client";import{o as r}from"./open_in_new.js";import{o as s}from"./helpers.js";import{d as c}from"./pn-icon2.js";import{d as p}from"./pn-illustration2.js";const d=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.pnTile=n(this,"pnTile",7)}mo;tile;illustrationSlot;visibleOutline=!1;get hostElement(){return this}label;text;url;target;rel="noopener noreferrer";illustration;icon;horizontal=!1;pnTile;connectedCallback(){this.mo=new MutationObserver((()=>l(this.hostElement))),this.mo.observe(this.hostElement,{subtree:!0,childList:!0})}disconnectedCallback(){this.mo?.disconnect()}isExternal(){return"_blank"===this.target}showIcon(){return!!this.icon&&!this.showSlotIllustration()}showPropIllustration(){return!!this.illustration&&!this.showSlotIllustration()}showSlotIllustration(){return!!this.illustrationSlot?.querySelector('[slot="illustration"]')}showImage(){return this.showIcon()||this.showPropIllustration()||this.showSlotIllustration()}handleFocus({type:t,target:e}){this.visibleOutline="focus"===t&&e.matches(":focus-visible")}clickHandler(t){s(t,this.tile),this.pnTile.emit({click:t})}render(){return o(a,{key:"eb3815f93d4355e80969c381cadd22789b1a5b05"},o("div",{key:"a8dad16643d664975ee27f3fc3e0249730662efb",class:"pn-tile","data-horizontal":this.horizontal,"data-href":!!this.url,"data-focus":this.visibleOutline,ref:t=>this.tile=t},o("div",{key:"474e4c248a0ddfab550be16dcff172fc01f84e0a",class:"pn-tile-illustration","data-circle":!!this.url,"data-icon":this.showIcon(),role:"presentation",hidden:!this.showImage()},this.showPropIllustration()?o("pn-illustration",{illustration:this.illustration}):this.showIcon()&&o("pn-icon",{color:"blue700",icon:this.icon}),o("div",{key:"2d5962def32bc5d7a3432cd5062d0a164f167454",class:"pn-tile-illustration-slot",hidden:!this.showSlotIllustration(),ref:t=>this.illustrationSlot=t},o("slot",{key:"ceb86fe161d9256249fdc65c83199a0231899e9b",name:"illustration"}))),o("div",{key:"74ad199309a7ae8f6c576bc2c97c958f364dc868",class:"pn-tile-text"},o("h3",{key:"eb6e12a3496d11c3ecb79bf122cbfd604b8081ef",class:"pn-tile-title"},this.url?o("a",{class:"pn-tile-link",href:this.url,target:this.target,rel:!this.rel&&this.isExternal()?"noopener noreferrer":this.rel,onClick:t=>this.clickHandler(t),onFocus:t=>this.handleFocus(t),onBlur:t=>this.handleFocus(t)},this.label):this.label,this.isExternal()&&o("pn-icon",{key:"13c2495d9a94dc9d3f530543e47549683b985c59",icon:r,small:!0,color:"blue700"})),o("div",{key:"4ce12374c5bbdf54809d8b1d2f99cb6efbc01266",class:"pn-tile-slot"},!!this.text&&o("p",{key:"2cdbc99beff7480c18f561b2f16f72953367b43f",class:"pn-tile-paragraph"},this.text),o("slot",{key:"f786d7b65a270acb9be13ce0cfb1d2e3bfe34b8a"})))))}static get style(){return`${t("pn-tile")}{position:relative;display:block}${t("pn-tile")} .pn-tile{position:relative;overflow:hidden;word-break:break-word;text-align:center;border-radius:0.5em;padding:clamp(0.75em, 3vw, 1.5em);height:100%;color:#2d2013;background-color:#ffffff;box-shadow:0em 0.0625em 0.125em 0em rgba(20, 20, 20, 0.11), 0em 0.1875em 0.4375em 0em rgba(0, 0, 0, 0.13);display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:flex-start;gap:clamp(1em, 5vw, 1.5em);outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:box-shadow, background-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-tile")} .pn-tile{transition-duration:0s;transition-delay:0s}}${t("pn-tile")} .pn-tile .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${t("pn-tile")} .pn-tile[data-horizontal]{text-align:left;flex-direction:row;flex-wrap:nowrap;gap:clamp(1em, 5vw, 1.5em)}${t("pn-tile")} .pn-tile[data-horizontal] .pn-tile-illustration[data-circle]:before{clip-path:ellipse(0% 100% at 0% 50%)}${t("pn-tile")} .pn-tile[data-horizontal] .pn-tile-text{flex-grow:2}${t("pn-tile")} .pn-tile[data-href][data-focus]{outline-color:#005d92;box-shadow:0em 0em 0em 0em rgba(20, 20, 20, 0.11), 0em 0em 0em 0em rgba(0, 0, 0, 0.13)}${t("pn-tile")} .pn-tile[data-href]:hover{background-color:rgba(183, 235, 252, 0.3)}${t("pn-tile")} .pn-tile[data-href]:hover .pn-tile-illustration[data-circle]:before,${t("pn-tile")} .pn-tile[data-href]:focus-within .pn-tile-illustration[data-circle]:before{clip-path:ellipse(100% 50% at 50% -25%)}${t("pn-tile")} .pn-tile[data-href]:hover[data-horizontal] .pn-tile-illustration[data-circle]:before,${t("pn-tile")} .pn-tile[data-href]:focus-within[data-horizontal] .pn-tile-illustration[data-circle]:before{clip-path:ellipse(50% 100% at -25% 50%)}${t("pn-tile")} .pn-tile[data-href]:hover .pn-tile-link,${t("pn-tile")} .pn-tile[data-href]:focus-within .pn-tile-link{color:#0d234b;text-decoration-color:#0d234b}${t("pn-tile")} .pn-tile[data-href]:hover ${t("pn-icon")} .pn-icon-svg path,${t("pn-tile")} .pn-tile[data-href]:focus-within ${t("pn-icon")} .pn-icon-svg path{fill:#0d234b}${t("pn-tile")} .pn-tile-illustration{z-index:2;flex:1 1;max-width:7.5em;max-height:7.5em}${t("pn-tile")} .pn-tile-illustration[data-icon]{flex:0 0}${t("pn-tile")} .pn-tile-illustration[data-icon] ${t("pn-icon")}{padding:1em;border-radius:50%;background-color:#e0f8ff}${t("pn-tile")} .pn-tile-illustration[data-icon] ${t("pn-icon")}>svg{font-size:2em}${t("pn-tile")} .pn-tile-illustration-slot{display:block;height:100%;width:100%}${t("pn-tile")} .pn-tile-illustration[data-circle]:before{content:"";position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%;background-color:rgba(183, 235, 252, 0.7);background-color:rgba(183, 235, 252, 0.7);clip-path:ellipse(100% 0% at 50% 0%);transition-property:clip-path;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tile")} .pn-tile-illustration[data-circle]:before{transition-duration:0s;transition-delay:0s}}${t("pn-tile")} .pn-tile-text{z-index:3;flex:1 1;display:flex;flex-direction:column;gap:0.5em}${t("pn-tile")} .pn-tile-link{cursor:pointer;color:#005d92;text-decoration:underline;text-decoration-color:transparent;-webkit-tap-highlight-color:transparent;transition-property:color, text-decoration-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tile")} .pn-tile-link{transition-duration:0s;transition-delay:0s}}${t("pn-tile")} .pn-tile-link:focus{outline:0;text-decoration-color:#0d234b;color:#0d234b}${t("pn-tile")} .pn-tile-link:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}${t("pn-tile")} .pn-tile-title{font-family:inherit;font-weight:700;font-size:clamp(1.25em, 3vw, 1.5em);margin:0em}${t("pn-tile")} .pn-tile-title ${t("pn-icon")}{margin-left:0.25em;vertical-align:middle}${t("pn-tile")} .pn-tile-slot{font-weight:400;color:#5e554a;display:flex;flex-direction:column;gap:0.25em}${t("pn-tile")} .pn-tile-paragraph,${t("pn-tile")} .pn-tile p{font-size:0.875em}${t("pn-tile")} .pn-tile-paragraph:last-child,${t("pn-tile")} .pn-tile p:last-child{margin:0em}`}},[772,"pn-tile",{label:[1],text:[1],url:[1],target:[1],rel:[1],illustration:[1],icon:[1],horizontal:[4],visibleOutline:[32]}]),h=d,f=function(){"undefined"!=typeof customElements&&["pn-tile","pn-icon","pn-illustration"].forEach((e=>{switch(e){case"pn-tile":customElements.get(t(t(e)))||customElements.define(t(t(e)),d);break;case"pn-icon":customElements.get(t(t(e)))||c();break;case"pn-illustration":customElements.get(t(t(e)))||p()}}))};export{h as PnTile,f as defineCustomElement}

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

@@ -2,213 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, Mixin, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as animateHeightFactory } from './index2.js';
-import { k as awaitTopbar, o as ripple, e as en } from './helpers.js';
-import { a as alert_exclamation_circle } from './alert_exclamation_circle.js';
-import { a as alert_info_circle } from './alert_info_circle.js';
-import { c as check_circle } from './check_circle.js';
-import { c as close } from './close.js';
-import { d as defineCustomElement$3 } from './pn-icon2.js';
-import { d as defineCustomElement$2 } from './pn-illustration2.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="M12.874 2.514a1 1 0 0 0-1.748 0l-10 18A1 1 0 0 0 2 22h20a1 1 0 0 0 .874-1.486zM12 5.06 20.3 20H3.7zm-1.375 4.936a1.38 1.38 0 1 1 2.75 0l-.292 3.509a1.087 1.087 0 0 1-2.166 0zM12 15.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3" clip-rule="evenodd"/></svg>';
-const alert_exclamation_triangle = icon;
-
-const translations = {
-    HIDE: {
-        sv: 'Stäng meddelande',
-        en: 'Dismiss message',
-        da: 'Afvis besked',
-        fi: 'Hylkää viesti',
-        no: 'Avvis meldingen',
-    },
-};
-
-const pnToastCss = "pn-toast{position:relative;display:block}pn-toast .pn-toast{position:relative;color:#2d2013;padding:1em;border-radius:0.5em;outline:none;font-size:1em;font-weight:400;background-color:#e0f8ff;border-color:#005d92;display:flex;align-items:center;gap:0.75em;visibility:visible;transition-property:visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-toast .pn-toast{transition-duration:0s;transition-delay:0s}}pn-toast .pn-toast .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}pn-toast .pn-toast[data-hide]{visibility:hidden;transition-delay:0.2s}pn-toast .pn-toast-heading{font-size:1em;font-style:normal;font-weight:500;margin:0}pn-toast .pn-toast-text{font-size:1em;font-style:normal;font-weight:400;margin:0 0 0.25em 0}pn-toast .pn-toast-text:last-child{margin-bottom:0}pn-toast .pn-toast-icon .pn-icon-svg path{fill:#2d2013}pn-toast .pn-toast-content{display:flex;flex-direction:column;align-self:center;align-items:flex-start;gap:0.25em;margin:0 auto 0 0}pn-toast .pn-toast-button{cursor:pointer;border-radius:50%;border:none;background:none;padding:0.25em;font-size:1em;display:flex;align-items:center;justify-content:center;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-toast .pn-toast-button{transition-duration:0s;transition-delay:0s}}pn-toast .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast-button:focus-visible{outline-color:#005d92;background-color:#8eddf9}pn-toast .pn-toast-button:hover{background-color:#8eddf9}pn-toast .pn-toast[data-appearance=success]{background-color:#dcf6e7}pn-toast .pn-toast[data-appearance=success] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=success] .pn-toast-button:focus-visible{outline-color:#005e41;background-color:#abe3bb}pn-toast .pn-toast[data-appearance=success] .pn-toast-button:hover{background-color:#abe3bb}pn-toast .pn-toast[data-appearance=success] .pn-ripple{background-color:#005e41}pn-toast .pn-toast[data-appearance=success] .pn-toast-icon .pn-icon-svg path{fill:#005e41}pn-toast .pn-toast[data-appearance=success][data-temporary]{border-color:#005e41}pn-toast .pn-toast[data-appearance=warning]{background-color:#fff1e3}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button:focus-visible{outline-color:#99290a;background-color:#ffc8a3}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button:hover{background-color:#ffc8a3}pn-toast .pn-toast[data-appearance=warning] .pn-ripple{background-color:#99290a}pn-toast .pn-toast[data-appearance=warning] .pn-toast-icon .pn-icon-svg path{fill:#99290a}pn-toast .pn-toast[data-appearance=warning][data-temporary]{border-color:#ed7123}pn-toast .pn-toast[data-appearance=error]{background-color:#fdefee}pn-toast .pn-toast[data-appearance=error] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=error] .pn-toast-button:focus-visible{outline-color:#a70707;background-color:#fbc2c1}pn-toast .pn-toast[data-appearance=error] .pn-toast-button:hover{background-color:#fbc2c1}pn-toast .pn-toast[data-appearance=error] .pn-ripple{background-color:#a70707}pn-toast .pn-toast[data-appearance=error] .pn-toast-icon .pn-icon-svg path{fill:#a70707}pn-toast .pn-toast[data-appearance=error][data-temporary]{border-color:#a70707}pn-toast .pn-toast[data-temporary]{border-style:solid;border-width:0.0625em;box-shadow:0 0.125em 0.25em rgba(0, 0, 0, 0.2)}";
-
-const PnToast$1 = /*@__PURE__*/ proxyCustomElement(class PnToast extends Mixin(animateHeightFactory) {
-    constructor(registerHost) {
-        super(false);
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.close = createEvent(this, "close", 7);
-        this.hidden = createEvent(this, "hidden", 7);
-    }
-    toast;
-    button;
-    get hostElement() { return this; }
-    hasSlottedContent = false;
-    /**
-     * Set a title for the toast. Requires the `text` prop in order to work.
-     * @description Can be used together with slotted content.
-     */
-    heading = '';
-    /**
-     * Set a paragraph of text for the toast.
-     * @description Can be used together with slotted content.
-     */
-    text = '';
-    /** Give the toast a HTML ID. */
-    toastId;
-    /**
-     * Default color is blue, you also have the option of success (green), warning (orange) and error (red).
-     * @category Visual
-     */
-    appearance;
-    /**
-     * This will apply a shadow and border to the toast.
-     * @category Visual
-     */
-    temporary = false;
-    /**
-     * Set an SVG icon.
-     * @category Visual
-     */
-    icon;
-    /**
-     * Set an SVG illustration.
-     * @category Visual
-     */
-    illustration;
-    /**
-     * Control the visibility of the toast. If the `closable` prop is active, the toast will set the `hide` prop on its own.
-     * @see {@link closable}
-     * @category Features
-     */
-    hide = false;
-    /**
-     * Show close button.
-     * @category Features
-     */
-    closable = false;
-    /**
-     * Manually set the language, only needed if the `closable` prop is enabled.
-     * @see {@link closable}
-     * @category Features
-     */
-    language = null;
-    handleHide() {
-        this.hostElement.style.overflow = 'hidden';
-        requestAnimationFrame(() => this.toggleToastVisibility());
-    }
-    /** Event fired when the close button is pressed. */
-    close;
-    /**
-     * This event is fired when the toast is fully hidden after the animation is finished.
-     * Triggers from the close button or if the prop `hide` is set to true.
-     * @since v7.6.0
-     **/
-    hidden;
-    async componentWillLoad() {
-        if (this.hide) {
-            this.hostElement.style.height = '0';
-            this.hostElement.style.overflow = 'hidden';
-        }
-        // Any text content at this stage means there is slotted content present.
-        this.hasSlottedContent = !!this.hostElement.textContent;
-        if (this.language === null)
-            await awaitTopbar(this.hostElement);
-    }
-    componentDidLoad() {
-        if (!!this.heading && !this.text && !this.hasSlottedContent)
-            console.warn('The %s prop is only available if you use the %s prop or slotted content.', 'heading', 'text');
-    }
-    toggleToastVisibility() {
-        if (this.hide)
-            this.closeDropdown(this.hostElement, this.toast.clientHeight);
-        else
-            this.openDropdown(this.hostElement, this.toast.clientHeight);
-    }
-    handleClick(event) {
-        this.hide = true;
-        this.close.emit(this.hide);
-        ripple(event, this.toast);
-    }
-    getIcon() {
-        if (this.illustration)
-            return '';
-        if (this.icon)
-            return this.icon;
-        if (this.appearance === 'success')
-            return check_circle;
-        if (this.appearance === 'warning')
-            return alert_exclamation_triangle;
-        if (this.appearance === 'error')
-            return alert_exclamation_circle;
-        return alert_info_circle;
-    }
-    getRole() {
-        return this.appearance === 'error' ? 'alert' : 'status';
-    }
-    showIcon() {
-        return !this.illustration;
-    }
-    showIllustration() {
-        return !this.showIcon();
-    }
-    showTitle() {
-        return (this.hasSlottedContent || !!this.text) && !!this.heading;
-    }
-    translate(prop) {
-        return translations?.[prop]?.[this.language || en] || prop;
-    }
-    hideToast() {
-        return this.hide && !this.isMoving();
-    }
-    render() {
-        return (h(Host, { key: '5c3fee615535723fb1f866ad2e5bc955289abe6e' }, h("div", { key: '4de5c242cce6bd2e77c355030c53e1161495f2aa', id: this.toastId, class: "pn-toast", role: this.getRole(), "data-appearance": this.appearance, "data-temporary": this.temporary, "data-hide": this.hideToast(), ref: el => (this.toast = el) }, this.showIcon() && h("pn-icon", { key: '69348635c02e8108503dbf588e65d522405fd08f', class: "pn-toast-icon", icon: this.getIcon() }), h("div", { key: 'a4a2bbd367ff30405a305e4c56da05575e2765bd', class: "pn-toast-content" }, this.showTitle() && h("h4", { key: '0e847dd42ed4d0e1c518b69519f27f23d491e11c', class: "pn-toast-heading" }, this.heading), this.text && h("p", { key: 'c423eb0872592844f4d583839b438442f65c1ab9', class: "pn-toast-text" }, this.text), h("slot", { key: '4e743ba3362107a4b5f585e12b2ad2879ffef5bf' })), this.showIllustration() && h("pn-illustration", { key: '1330548a89218ee19a73ff83f94df180a7b2cc98', illustration: this.illustration, width: "5.5em", height: "5.5em" }), this.closable && (h("button", { key: '321c57a9103fa0b4abedd2429420f94faa9fd5fc', class: "pn-toast-button", type: "button", "aria-label": this.translate('HIDE'), onClick: (event) => this.handleClick(event), ref: el => (this.button = el) }, h("pn-icon", { key: '3d68d08f2cca035840acd466accbe0d66da65153', icon: close }))))));
-    }
-    static get watchers() { return {
-        "hide": ["handleHide"]
-    }; }
-    static get style() { return pnToastCss; }
-}, [772, "pn-toast", {
-        "heading": [1],
-        "text": [1],
-        "toastId": [1, "toast-id"],
-        "appearance": [1],
-        "temporary": [4],
-        "icon": [1],
-        "illustration": [1],
-        "hide": [1540],
-        "closable": [4],
-        "language": [1025],
-        "isClosing": [32],
-        "isExpanding": [32],
-        "hasSlottedContent": [32]
-    }, undefined, {
-        "hide": ["handleHide"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-toast", "pn-icon", "pn-illustration"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-toast":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnToast$1);
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "pn-illustration":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PnToast = PnToast$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnToast, defineCustomElement };
-//# sourceMappingURL=pn-toast.js.map
-
-//# sourceMappingURL=pn-toast.js.map
+import{transformTag as t,proxyCustomElement as a,Mixin as o,createEvent as e,h as n,Host as s}from"@stencil/core/internal/client";import{a as i}from"./index2.js";import{k as r,o as p,e as c}from"./helpers.js";import{a as l}from"./alert_exclamation_circle.js";import{a as d}from"./alert_info_circle.js";import{c as u}from"./check_circle.js";import{c as h}from"./close.js";import{d as f}from"./pn-icon2.js";import{d as b}from"./pn-illustration2.js";const m={HIDE:{sv:"Stäng meddelande",en:"Dismiss message",da:"Afvis besked",fi:"Hylkää viesti",no:"Avvis meldingen"}},g=a(class extends(o(i)){constructor(t){super(!1),!1!==t&&this.__registerHost(),this.close=e(this,"close",7),this.hidden=e(this,"hidden",7)}toast;button;get hostElement(){return this}hasSlottedContent=!1;heading="";text="";toastId;appearance;temporary=!1;icon;illustration;hide=!1;closable=!1;language=null;handleHide(){this.hostElement.style.overflow="hidden",requestAnimationFrame((()=>this.toggleToastVisibility()))}close;hidden;async componentWillLoad(){this.hide&&(this.hostElement.style.height="0",this.hostElement.style.overflow="hidden"),this.hasSlottedContent=!!this.hostElement.textContent,null===this.language&&await r(this.hostElement)}componentDidLoad(){!this.heading||this.text||this.hasSlottedContent||console.warn("The %s prop is only available if you use the %s prop or slotted content.","heading","text")}toggleToastVisibility(){this.hide?this.closeDropdown(this.hostElement,this.toast.clientHeight):this.openDropdown(this.hostElement,this.toast.clientHeight)}handleClick(t){this.hide=!0,this.close.emit(this.hide),p(t,this.toast)}getIcon(){return this.illustration?"":this.icon?this.icon:"success"===this.appearance?u:"warning"===this.appearance?'<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12.874 2.514a1 1 0 0 0-1.748 0l-10 18A1 1 0 0 0 2 22h20a1 1 0 0 0 .874-1.486zM12 5.06 20.3 20H3.7zm-1.375 4.936a1.38 1.38 0 1 1 2.75 0l-.292 3.509a1.087 1.087 0 0 1-2.166 0zM12 15.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3" clip-rule="evenodd"/></svg>':"error"===this.appearance?l:d}getRole(){return"error"===this.appearance?"alert":"status"}showIcon(){return!this.illustration}showIllustration(){return!this.showIcon()}showTitle(){return(this.hasSlottedContent||!!this.text)&&!!this.heading}translate(t){return m?.[t]?.[this.language||c]||t}hideToast(){return this.hide&&!this.isMoving()}render(){return n(s,{key:"5c3fee615535723fb1f866ad2e5bc955289abe6e"},n("div",{key:"4de5c242cce6bd2e77c355030c53e1161495f2aa",id:this.toastId,class:"pn-toast",role:this.getRole(),"data-appearance":this.appearance,"data-temporary":this.temporary,"data-hide":this.hideToast(),ref:t=>this.toast=t},this.showIcon()&&n("pn-icon",{key:"69348635c02e8108503dbf588e65d522405fd08f",class:"pn-toast-icon",icon:this.getIcon()}),n("div",{key:"a4a2bbd367ff30405a305e4c56da05575e2765bd",class:"pn-toast-content"},this.showTitle()&&n("h4",{key:"0e847dd42ed4d0e1c518b69519f27f23d491e11c",class:"pn-toast-heading"},this.heading),this.text&&n("p",{key:"c423eb0872592844f4d583839b438442f65c1ab9",class:"pn-toast-text"},this.text),n("slot",{key:"4e743ba3362107a4b5f585e12b2ad2879ffef5bf"})),this.showIllustration()&&n("pn-illustration",{key:"1330548a89218ee19a73ff83f94df180a7b2cc98",illustration:this.illustration,width:"5.5em",height:"5.5em"}),this.closable&&n("button",{key:"321c57a9103fa0b4abedd2429420f94faa9fd5fc",class:"pn-toast-button",type:"button","aria-label":this.translate("HIDE"),onClick:t=>this.handleClick(t),ref:t=>this.button=t},n("pn-icon",{key:"3d68d08f2cca035840acd466accbe0d66da65153",icon:h}))))}static get watchers(){return{hide:[{handleHide:0}]}}static get style(){return`${t("pn-toast")}{position:relative;display:block}${t("pn-toast")} .pn-toast{position:relative;color:#2d2013;padding:1em;border-radius:0.5em;outline:none;font-size:1em;font-weight:400;background-color:#e0f8ff;border-color:#005d92;display:flex;align-items:center;gap:0.75em;visibility:visible;transition-property:visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-toast")} .pn-toast{transition-duration:0s;transition-delay:0s}}${t("pn-toast")} .pn-toast .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${t("pn-toast")} .pn-toast[data-hide]{visibility:hidden;transition-delay:0.2s}${t("pn-toast")} .pn-toast-heading{font-size:1em;font-style:normal;font-weight:500;margin:0}${t("pn-toast")} .pn-toast-text{font-size:1em;font-style:normal;font-weight:400;margin:0 0 0.25em 0}${t("pn-toast")} .pn-toast-text:last-child{margin-bottom:0}${t("pn-toast")} .pn-toast-icon .pn-icon-svg path{fill:#2d2013}${t("pn-toast")} .pn-toast-content{display:flex;flex-direction:column;align-self:center;align-items:flex-start;gap:0.25em;margin:0 auto 0 0}${t("pn-toast")} .pn-toast-button{cursor:pointer;border-radius:50%;border:none;background:none;padding:0.25em;font-size:1em;display:flex;align-items:center;justify-content:center;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-toast")} .pn-toast-button{transition-duration:0s;transition-delay:0s}}${t("pn-toast")} .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-toast")} .pn-toast-button:focus-visible{outline-color:#005d92;background-color:#8eddf9}${t("pn-toast")} .pn-toast-button:hover{background-color:#8eddf9}${t("pn-toast")} .pn-toast[data-appearance=success]{background-color:#dcf6e7}${t("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-button:focus-visible{outline-color:#005e41;background-color:#abe3bb}${t("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-button:hover{background-color:#abe3bb}${t("pn-toast")} .pn-toast[data-appearance=success] .pn-ripple{background-color:#005e41}${t("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-icon .pn-icon-svg path{fill:#005e41}${t("pn-toast")} .pn-toast[data-appearance=success][data-temporary]{border-color:#005e41}${t("pn-toast")} .pn-toast[data-appearance=warning]{background-color:#fff1e3}${t("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-button:focus-visible{outline-color:#99290a;background-color:#ffc8a3}${t("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-button:hover{background-color:#ffc8a3}${t("pn-toast")} .pn-toast[data-appearance=warning] .pn-ripple{background-color:#99290a}${t("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-icon .pn-icon-svg path{fill:#99290a}${t("pn-toast")} .pn-toast[data-appearance=warning][data-temporary]{border-color:#ed7123}${t("pn-toast")} .pn-toast[data-appearance=error]{background-color:#fdefee}${t("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-button:focus-visible{outline-color:#a70707;background-color:#fbc2c1}${t("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-button:hover{background-color:#fbc2c1}${t("pn-toast")} .pn-toast[data-appearance=error] .pn-ripple{background-color:#a70707}${t("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-icon .pn-icon-svg path{fill:#a70707}${t("pn-toast")} .pn-toast[data-appearance=error][data-temporary]{border-color:#a70707}${t("pn-toast")} .pn-toast[data-temporary]{border-style:solid;border-width:0.0625em;box-shadow:0 0.125em 0.25em rgba(0, 0, 0, 0.2)}`}},[772,"pn-toast",{heading:[1],text:[1],toastId:[1,"toast-id"],appearance:[1],temporary:[4],icon:[1],illustration:[1],hide:[1540],closable:[4],language:[1025],isClosing:[32],isExpanding:[32],hasSlottedContent:[32]},void 0,{hide:[{handleHide:0}]}]),y=g,k=function(){"undefined"!=typeof customElements&&["pn-toast","pn-icon","pn-illustration"].forEach((a=>{switch(a){case"pn-toast":customElements.get(t(t(a)))||customElements.define(t(t(a)),g);break;case"pn-icon":customElements.get(t(t(a)))||f();break;case"pn-illustration":customElements.get(t(t(a)))||b()}}))};export{y as PnToast,k as defineCustomElement}

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

@@ -2,105 +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$2 } from './pn-spinner2.js';
-
-const pnToggleSwitchCss = "pn-toggle-switch{display:inline-block;position:relative}pn-toggle-switch .pn-toggle{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1em}pn-toggle-switch .pn-toggle-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:500;color:#2d2013;margin:0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-toggle-switch .pn-toggle-label{transition-duration:0s;transition-delay:0s}}pn-toggle-switch .pn-toggle-label>span{font-size:1em}pn-toggle-switch .pn-toggle-helper{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}pn-toggle-switch .pn-toggle-content{flex:1 0}pn-toggle-switch .pn-toggle-button{position:relative;font-size:1em;width:3.625em;height:2em;padding:0.1875em;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-toggle-switch .pn-toggle-button{transition-duration:0s;transition-delay:0s}}pn-toggle-switch .pn-toggle-button{-webkit-tap-highlight-color:transparent}pn-toggle-switch .pn-toggle-button[data-small]{width:2.625em;height:1.5em}pn-toggle-switch .pn-toggle-button[data-small] .pn-toggle-circle{width:1.125em;height:1.125em}pn-toggle-switch .pn-toggle-button[data-small][data-loading]>.pn-toggle-bg{width:1.5em}pn-toggle-switch .pn-toggle-button[data-large]{width:4.625em;height:2.5em}pn-toggle-switch .pn-toggle-button[data-large] .pn-toggle-circle{width:2.125em;height:2.125em}pn-toggle-switch .pn-toggle-button[data-large][data-loading]>.pn-toggle-bg{width:2.5em}pn-toggle-switch .pn-toggle-button[data-loading] .pn-toggle-bg{width:2em}pn-toggle-switch .pn-toggle-button[data-loading] .pn-toggle-circle,pn-toggle-switch .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(50%)}pn-toggle-switch .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:0}pn-toggle-switch .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke-dashoffset:23;transition-delay:0s}pn-toggle-switch .pn-toggle-button[data-loading] pn-spinner{opacity:1}pn-toggle-switch .pn-toggle-bg{position:absolute;top:0;left:50%;width:100%;height:100%;z-index:0;border-radius:2em;background-color:#969087;transform:translateX(-50%);outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:width, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-toggle-switch .pn-toggle-bg{transition-duration:0s;transition-delay:0s}}pn-toggle-switch .pn-toggle-circle{position:relative;z-index:1;width:1.625em;height:1.625em;background-color:#ffffff;box-shadow:0 0.25em 0.5em rgba(0, 0, 0, 0.1);border-radius:50%;padding:0.25em;transition-property:transform, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-toggle-switch .pn-toggle-circle{transition-duration:0s;transition-delay:0s}}pn-toggle-switch .pn-toggle-circle{transform:translateX(0%)}pn-toggle-switch .pn-toggle-element{position:absolute;z-index:3;top:0;left:0;cursor:pointer;width:100%;height:100%;opacity:0;margin:0;}pn-toggle-switch .pn-toggle-element:focus-visible+.pn-toggle-bg{outline-color:#005d92}pn-toggle-switch .pn-toggle-element:hover+.pn-toggle-bg{background-color:#5e554a}pn-toggle-switch .pn-toggle-element:hover:checked+.pn-toggle-bg{background-color:#0d234b}pn-toggle-switch .pn-toggle-element:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#0d234b}pn-toggle-switch .pn-toggle-element:checked~.pn-toggle-bg{background-color:#005d92}pn-toggle-switch .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(100%)}pn-toggle-switch .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:1}pn-toggle-switch .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check polyline{transition-delay:0.2s, 0s;stroke-dashoffset:0}pn-toggle-switch .pn-toggle-element:disabled{cursor:not-allowed}pn-toggle-switch .pn-toggle-element:disabled+.pn-toggle-bg{background-color:#d3cecb;box-shadow:none}pn-toggle-switch .pn-toggle-element:disabled~.pn-toggle-circle{background-color:#f3f2f2}pn-toggle-switch .pn-toggle-element:disabled~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}pn-toggle-switch .pn-toggle-element:disabled~.pn-toggle-circle pn-spinner .pn-spinner-circle{stroke:#969087}pn-toggle-switch .pn-toggle-element:disabled~.pn-toggle-circle pn-spinner .pn-spinner-dot{fill:#969087}pn-toggle-switch .pn-toggle-element:disabled:hover+.pn-toggle-bg,pn-toggle-switch .pn-toggle-element:disabled:hover:checked+.pn-toggle-bg{background-color:#d3cecb}pn-toggle-switch .pn-toggle-element:disabled:hover~.pn-toggle-circle .pn-toggle-check polyline,pn-toggle-switch .pn-toggle-element:disabled:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}pn-toggle-switch .pn-toggle-check{position:absolute;left:50%;top:50%;height:1.5em;width:1.5em;padding:0.25em;transform:translate(-50%, -50%);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-toggle-switch .pn-toggle-check{transition-duration:0s;transition-delay:0s}}pn-toggle-switch .pn-toggle-check polyline{stroke:#005d92;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition-property:stroke-dashoffset, stroke;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-toggle-switch .pn-toggle-check polyline{transition-duration:0s;transition-delay:0s}}pn-toggle-switch .pn-toggle pn-spinner{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-toggle-switch .pn-toggle pn-spinner{transition-duration:0s;transition-delay:0s}}pn-toggle-switch .pn-toggle pn-spinner .pn-spinner-circle{transition-property:stroke;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-toggle-switch .pn-toggle pn-spinner .pn-spinner-circle{transition-duration:0s;transition-delay:0s}}pn-toggle-switch .pn-toggle pn-spinner .pn-spinner-dot{transition-property:fill;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-toggle-switch .pn-toggle pn-spinner .pn-spinner-dot{transition-duration:0s;transition-delay:0s}}";
-
-const PnToggleSwitch$1 = /*@__PURE__*/ proxyCustomElement(class PnToggleSwitch extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    id = `pn-toggle-${uuidv4()}`;
-    idHelper = `${this.id}-helper`;
-    get hostElement() { return this; }
-    /** A label for the toggle switch. */
-    label;
-    /** Provide a helpertext for the toggle switch. */
-    helpertext;
-    /** Precheck the toggle. */
-    checked = false;
-    /** Set a unique HTML id. */
-    toggleid = this.id;
-    /** HTML toggle name. @category HTML */
-    name = null;
-    /** HTML toggle value. @category HTML */
-    value = null;
-    /** Make the toggle smaller. @category Visual */
-    small = false;
-    /** Make the toggle larger. @category Visual */
-    large = false;
-    /** Disable the toggle. @category State */
-    disabled = false;
-    /** Set the loading state. @category State */
-    loading = false;
-    handleHelperId() {
-        if (this.id !== this.toggleid)
-            this.idHelper = `${this.toggleid}-helper`;
-    }
-    componentWillLoad() {
-        this.handleHelperId();
-    }
-    hasHelpertextProp() {
-        return !!this.helpertext;
-    }
-    hasHelpertextSlot() {
-        return !!this.hostElement.querySelector('[slot="helpertext"]');
-    }
-    showHelpertext() {
-        return this.hasHelpertextProp() || this.hasHelpertextSlot();
-    }
-    describedBy() {
-        return this.showHelpertext() ? this.idHelper : null;
-    }
-    render() {
-        return (h(Host, { key: '611e10ef6b355715811aa4b7c53819f854be90d2' }, h("div", { key: 'f35a023481d4f1ddab5d7ef8c0f8e08be9e06ccd', class: "pn-toggle" }, this.label && (h("div", { key: '2a3e329c1ca012cffe769f9e3b583279d6d07d7f', class: "pn-toggle-content" }, h("label", { key: '76501fa0040c9fa42da90f62d6788fb2641c6c83', htmlFor: this.toggleid, class: "pn-toggle-label" }, h("span", { key: '1503b68b27017186e554583835db95d19f30a634' }, this.label)), h("p", { key: '115560d3daeac5e23f7f703ed30c7ef55d4b742a', id: this.idHelper, class: "pn-toggle-helper", hidden: !this.showHelpertext() }, this.hasHelpertextProp() && h("span", { key: 'd1f946240e1f7aee284b085b117f74ba95fde057' }, this.helpertext), h("slot", { key: '1d2595e558540d671b0de40ffc140e32f2111069', name: "helpertext" })))), h("div", { key: '142bad90629f2cfdbb7c30f39324dd95c3c5c200', class: "pn-toggle-button", "data-small": this.small, "data-large": this.large, "data-loading": this.loading }, h("input", { key: 'bd17c1bc34a1e0c4a26324b611dfecb613b4246c', id: this.toggleid, class: "pn-toggle-element", type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-describedby": this.describedBy() }), h("div", { key: 'ff295d221220d57ba5d20778f5a40fff9d55b840', class: "pn-toggle-bg" }), h("div", { key: 'f62fd093bb8d8f56020d9875c2d09423a1c03b00', class: "pn-toggle-circle" }, h("svg", { key: '11333cc909a02f6b0091f3a324ccacfb1c0f50ba', class: "pn-toggle-check", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: '8f5f6d65d4da3e8dd8e9c5794f7f9da1c815ad9e', points: "4,12 9,17 20,6", "stroke-width": "3" })), h("pn-spinner", { key: 'efee6adabd965a051efa16f156654895659a56d4', size: 1.125 }))))));
-    }
-    static get watchers() { return {
-        "toggleid": ["handleHelperId"]
-    }; }
-    static get style() { return pnToggleSwitchCss; }
-}, [772, "pn-toggle-switch", {
-        "label": [1],
-        "helpertext": [1],
-        "checked": [1028],
-        "toggleid": [1],
-        "name": [1],
-        "value": [1],
-        "small": [4],
-        "large": [4],
-        "disabled": [4],
-        "loading": [4]
-    }, undefined, {
-        "toggleid": ["handleHelperId"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-toggle-switch", "pn-spinner"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-toggle-switch":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnToggleSwitch$1);
-            }
-            break;
-        case "pn-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PnToggleSwitch = PnToggleSwitch$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnToggleSwitch, defineCustomElement };
-//# sourceMappingURL=pn-toggle-switch.js.map
-
-//# sourceMappingURL=pn-toggle-switch.js.map
+import{transformTag as e,proxyCustomElement as t,HTMLElement as n,h as o,Host as i}from"@stencil/core/internal/client";import{u as l}from"./helpers.js";import{d as g}from"./pn-spinner2.js";const s=t(class extends n{constructor(e){super(),!1!==e&&this.__registerHost()}id="pn-toggle-"+l();idHelper=this.id+"-helper";get hostElement(){return this}label;helpertext;checked=!1;toggleid=this.id;name=null;value=null;small=!1;large=!1;disabled=!1;loading=!1;handleHelperId(){this.id!==this.toggleid&&(this.idHelper=this.toggleid+"-helper")}componentWillLoad(){this.handleHelperId()}hasHelpertextProp(){return!!this.helpertext}hasHelpertextSlot(){return!!this.hostElement.querySelector('[slot="helpertext"]')}showHelpertext(){return this.hasHelpertextProp()||this.hasHelpertextSlot()}describedBy(){return this.showHelpertext()?this.idHelper:null}render(){return o(i,{key:"b88bbc2385be79dd584ecee5e53dc89832de49c3"},o("div",{key:"4a413f2b2acf8551dc2852ba0d3a45f4cbf17a4d",class:"pn-toggle"},this.label&&o("div",{key:"944a36f2018335a283092c909af2f37846850eb8",class:"pn-toggle-content"},o("label",{key:"2536eaf65117b1c70d1ec31f17faa41f2a6fced4",htmlFor:this.toggleid,class:"pn-toggle-label"},o("span",{key:"eae8a38d31f6bc05faa9d56c08517f9302be9a3e"},this.label)),o("p",{key:"6173ba384459c406eb98fe4318e080b6cd36031a",id:this.idHelper,class:"pn-toggle-helper",hidden:!this.showHelpertext()},this.hasHelpertextProp()&&o("span",{key:"d4a52d7786e7a63ca3f201c3ad7cb8793e377c12"},this.helpertext),o("slot",{key:"06406382d523b70b8acb094a82794652a4481528",name:"helpertext"}))),o("div",{key:"4676dd88652c903f94d3f887e97841e00bbe09e2",class:"pn-toggle-button","data-small":this.small,"data-large":this.large,"data-loading":this.loading},o("input",{key:"d2656b2f8ff8e74bd4d4c2f1c4791e984ec3e50b",id:this.toggleid,class:"pn-toggle-element",type:"checkbox",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,"aria-describedby":this.describedBy()}),o("div",{key:"93caefd228460120aae22ba48e6c93d6df676fcf",class:"pn-toggle-bg"}),o("div",{key:"03299104835602d126960ad67ab51f94d27cf3c5",class:"pn-toggle-circle"},o("svg",{key:"5f61f589797b3ca97a66cd42deab3065543679d2",class:"pn-toggle-check",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},o("polyline",{key:"d974e5cc198d19cf17e42e0b35097f87d11404a0",points:"4,12 9,17 20,6","stroke-width":"3"})),o("pn-spinner",{key:"6f5c5fb05e0c9fd95b16d45833f50167af22e358",size:1.125})))))}static get watchers(){return{toggleid:[{handleHelperId:0}]}}static get style(){return`${e("pn-toggle-switch")}{display:inline-block;position:relative}${e("pn-toggle-switch")} .pn-toggle{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1em}${e("pn-toggle-switch")} .pn-toggle-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:500;color:#2d2013;margin:0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-label{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle-label>span{font-size:1em}${e("pn-toggle-switch")} .pn-toggle-helper{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${e("pn-toggle-switch")} .pn-toggle-content{flex:1 0}${e("pn-toggle-switch")} .pn-toggle-button{position:relative;font-size:1em;width:3.625em;height:2em;padding:0.1875em;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-button{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle-button{-webkit-tap-highlight-color:transparent}${e("pn-toggle-switch")} .pn-toggle-button[data-small]{width:2.625em;height:1.5em}${e("pn-toggle-switch")} .pn-toggle-button[data-small] .pn-toggle-circle{width:1.125em;height:1.125em}${e("pn-toggle-switch")} .pn-toggle-button[data-small][data-loading]>.pn-toggle-bg{width:1.5em}${e("pn-toggle-switch")} .pn-toggle-button[data-large]{width:4.625em;height:2.5em}${e("pn-toggle-switch")} .pn-toggle-button[data-large] .pn-toggle-circle{width:2.125em;height:2.125em}${e("pn-toggle-switch")} .pn-toggle-button[data-large][data-loading]>.pn-toggle-bg{width:2.5em}${e("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-bg{width:2em}${e("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-circle,${e("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(50%)}${e("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:0}${e("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke-dashoffset:23;transition-delay:0s}${e("pn-toggle-switch")} .pn-toggle-button[data-loading] ${e("pn-spinner")}{opacity:1}${e("pn-toggle-switch")} .pn-toggle-bg{position:absolute;top:0;left:50%;width:100%;height:100%;z-index:0;border-radius:2em;background-color:#969087;transform:translateX(-50%);outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:width, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-bg{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle-circle{position:relative;z-index:1;width:1.625em;height:1.625em;background-color:#ffffff;box-shadow:0 0.25em 0.5em rgba(0, 0, 0, 0.1);border-radius:50%;padding:0.25em;transition-property:transform, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-circle{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle-circle{transform:translateX(0%)}${e("pn-toggle-switch")} .pn-toggle-element{position:absolute;z-index:3;top:0;left:0;cursor:pointer;width:100%;height:100%;opacity:0;margin:0;}${e("pn-toggle-switch")} .pn-toggle-element:focus-visible+.pn-toggle-bg{outline-color:#005d92}${e("pn-toggle-switch")} .pn-toggle-element:hover+.pn-toggle-bg{background-color:#5e554a}${e("pn-toggle-switch")} .pn-toggle-element:hover:checked+.pn-toggle-bg{background-color:#0d234b}${e("pn-toggle-switch")} .pn-toggle-element:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#0d234b}${e("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-bg{background-color:#005d92}${e("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(100%)}${e("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:1}${e("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check polyline{transition-delay:0.2s, 0s;stroke-dashoffset:0}${e("pn-toggle-switch")} .pn-toggle-element:disabled{cursor:not-allowed}${e("pn-toggle-switch")} .pn-toggle-element:disabled+.pn-toggle-bg{background-color:#d3cecb;box-shadow:none}${e("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle{background-color:#f3f2f2}${e("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}${e("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle ${e("pn-spinner")} .pn-spinner-circle{stroke:#969087}${e("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle ${e("pn-spinner")} .pn-spinner-dot{fill:#969087}${e("pn-toggle-switch")} .pn-toggle-element:disabled:hover+.pn-toggle-bg,${e("pn-toggle-switch")} .pn-toggle-element:disabled:hover:checked+.pn-toggle-bg{background-color:#d3cecb}${e("pn-toggle-switch")} .pn-toggle-element:disabled:hover~.pn-toggle-circle .pn-toggle-check polyline,${e("pn-toggle-switch")} .pn-toggle-element:disabled:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}${e("pn-toggle-switch")} .pn-toggle-check{position:absolute;left:50%;top:50%;height:1.5em;width:1.5em;padding:0.25em;transform:translate(-50%, -50%);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){${e("pn-toggle-switch")} .pn-toggle-check{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle-check polyline{stroke:#005d92;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition-property:stroke-dashoffset, stroke;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-check polyline{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")}{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){${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")}{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")} .pn-spinner-circle{transition-property:stroke;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")} .pn-spinner-circle{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")} .pn-spinner-dot{transition-property:fill;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")} .pn-spinner-dot{transition-duration:0s;transition-delay:0s}}`}},[772,"pn-toggle-switch",{label:[1],helpertext:[1],checked:[1028],toggleid:[1],name:[1],value:[1],small:[4],large:[4],disabled:[4],loading:[4]},void 0,{toggleid:[{handleHelperId:0}]}]),r=s,c=function(){"undefined"!=typeof customElements&&["pn-toggle-switch","pn-spinner"].forEach((t=>{switch(t){case"pn-toggle-switch":customElements.get(e(e(t)))||customElements.define(e(e(t)),s);break;case"pn-spinner":customElements.get(e(e(t)))||g()}}))};export{r as PnToggleSwitch,c as defineCustomElement}