@postnord/pn-marketweb-components 4.1.0 → 4.1.2

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

@@ -2,148 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as arrow_right } from './arrow_right.js';
-import { o as open_in_new } from './open_in_new.js';
-import { u as uuidv4, o as ripple } from './helpers.js';
-import { d as defineCustomElement$2 } from './pn-icon2.js';
-
-const pnCardCss = "pn-card{position:relative;display:block}pn-card .pn-card{position:relative;background-color:#ffffff;color:#2d2013;border-radius:0.5em;display:flex;flex-direction:column;height:100%;overflow:hidden;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);outline:0.2rem solid transparent;outline-offset:0.2rem;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-card .pn-card{transition-duration:0s;transition-delay:0s}}pn-card .pn-card[data-link]:hover{background-color:#e0f8ff}pn-card .pn-card[data-link][data-focus]{outline-color:#005d92}pn-card .pn-card{}pn-card .pn-card[data-link] .pn-card-navigation>[slot=navigation]{display:none}pn-card .pn-card[data-horizontal]{flex-direction:row}pn-card .pn-card[data-horizontal][data-reverse]{flex-direction:row-reverse}pn-card .pn-card[data-horizontal][data-reverse] .pn-card-picture{clip-path:ellipse(100% 175% at right center)}pn-card .pn-card[data-horizontal] .pn-card-content{flex:1 1 50%}pn-card .pn-card[data-horizontal] .pn-card-image{flex:1 1 50%;flex-direction:row}pn-card .pn-card[data-horizontal] .pn-card-picture{width:100%;clip-path:ellipse(100% 175% at left center)}pn-card .pn-card[data-reverse]{flex-direction:column-reverse}pn-card .pn-card[data-reverse] .pn-card-picture{clip-path:ellipse(175% 100% at bottom center)}pn-card .pn-card-header{display:flex;flex-direction:column;gap:clamp(0.5em, 5vw, 0.75em)}pn-card .pn-card-label{font-size:clamp(1.125em, 5vw, 1.5em);font-weight:700;margin:0}pn-card .pn-card-label-overline{color:#5e554a;font-size:0.875em;font-weight:400;margin:0}pn-card .pn-card-link{display:inline-flex;align-items:center;gap:0.25em;color:#005d92;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-card .pn-card-link{transition-duration:0s;transition-delay:0s}}pn-card .pn-card-link:hover{color:#0d234b;text-decoration-color:#0d234b}pn-card .pn-card-link:hover>pn-icon>.pn-icon-svg>path{fill:#0d234b}pn-card .pn-card-link:focus{outline:0;color:#0d234b;text-decoration-color:#0d234b}pn-card .pn-card-link:focus>pn-icon>.pn-icon-svg>path{fill:#0d234b}pn-card .pn-card-link:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%}pn-card .pn-card-content{display:flex;flex-direction:column;flex-wrap:nowrap;flex:1;gap:clamp(0.5em, 5vw, 0.75em);padding:clamp(0.75em, 5vw, 1.5em) clamp(0.75em, 5vw, 1.5em)}pn-card .pn-card-section{display:flex;flex-direction:column;gap:0.5em;color:#5e554a}pn-card .pn-card-section-paragraph,pn-card .pn-card-section p{margin:0 0 0.25em}pn-card .pn-card-section-paragraph:last-child,pn-card .pn-card-section p:last-child{margin:0em}pn-card .pn-card-navigation{margin-top:auto;padding-top:clamp(0.5em, 5vw, 0.75em);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0.5em}pn-card .pn-card-navigation>pn-button{flex:1 1 12em}pn-card .pn-card-navigation:empty{display:none}pn-card .pn-card-image{position:relative;display:flex;flex-direction:column}pn-card .pn-card-picture{margin:0;padding:0;display:block;overflow:hidden;clip-path:ellipse(175% 100% at top center);aspect-ratio:var(--pn-card-aspect-ratio)}pn-card .pn-card-picture:empty{display:none}pn-card .pn-card-picture>*[slot=image]{display:block;height:100%;width:100%;object-fit:cover}pn-card .pn-card-tags{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0.5em}pn-card .pn-card-tags:empty{display:none}pn-card .pn-card>.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}}";
-
-const PnCard$1 = /*@__PURE__*/ proxyCustomElement(class PnCard extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.pnCard = createEvent(this, "pnCard", 7);
-    }
-    id = `pn-card-${uuidv4()}`;
-    idTitle = `${this.id}-title`;
-    visibleOutline = false;
-    get hostElement() { return this; }
-    /** Headline of the card. Will act as label for the link if there is no `href-label` set. */
-    label;
-    /** The label HTML tag. Default is `h3`. */
-    labelTag = 'h3';
-    /** Set a smaller text above the `label` text. */
-    overline;
-    /** Text content of the card. */
-    text;
-    /** Set a HTML id for the card. Optional and not required. */
-    cardId = null;
-    /**
-     * Uee the horizontal card layout.
-     * @category Features
-     * */
-    horizontal = false;
-    /** Reverse the order of which the image will wrap. @category Features */
-    reverse = false;
-    /**
-     * Select image aspect ratio. Example: '3/3', '16/9'.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio CSS documentation.}
-     * @category Features
-     * */
-    aspectRatio = '';
-    /** The card link. @category Href */
-    href;
-    /** The link text. @category Href */
-    hrefLabel;
-    /** The target attribute of the link. @category Href */
-    target;
-    /** The rel attribute of the link. @category Href */
-    rel = 'noopener noreferrer';
-    /** The link icon. Defaults to `arrow_right` or `open_in_new` if `target="_blank"`. @category Href */
-    icon = null;
-    watchCardId() {
-        const id = this.cardId || this.id;
-        this.idTitle = `${id}-title`;
-    }
-    /** Emitted when you click on the card link (if you use the `href` prop). */
-    pnCard;
-    componentWillLoad() {
-        this.watchCardId();
-    }
-    isExternal() {
-        return this.target === '_blank';
-    }
-    showTitle() {
-        return !!this.label;
-    }
-    showHref() {
-        return !!this.href && (this.hrefLabel || this.showTitle());
-    }
-    getTitleId() {
-        return this.hrefLabel ? null : this.idTitle;
-    }
-    getLabelledby() {
-        return this.hrefLabel ? null : this.showTitle() ? this.idTitle : null;
-    }
-    getIcon() {
-        if (!!this.icon)
-            return this.icon;
-        return this.isExternal() ? open_in_new : arrow_right;
-    }
-    getHeadingTag() {
-        const tags = ['h2', 'h3', 'h4', 'h5', 'h6', 'p'];
-        return tags.includes(this.labelTag) ? this.labelTag : 'h3';
-    }
-    handleFocus({ type, target }) {
-        this.visibleOutline = type === 'focus' && target.matches(':focus-visible');
-    }
-    handleClick(event) {
-        ripple(event, this.hostElement, '.pn-card');
-        this.pnCard.emit({ click: event });
-    }
-    render() {
-        const TitleTag = this.getHeadingTag();
-        return (h(Host, { key: '38ae433a7a9a45051844529a355969adc7609be7' }, h("article", { key: 'f84f5663aaf6b7a5f814c1879e9c43a0c1cea55a', id: this.cardId, class: "pn-card", "data-link": !!this.href, "data-horizontal": this.horizontal, "data-reverse": this.reverse, "data-focus": this.visibleOutline }, h("div", { key: '29d7f3ef72d259417c07bf699dde3eb08174a724', class: "pn-card-image" }, h("picture", { key: '34578663711bbb2f079c1cbbe93a2e1121666743', class: "pn-card-picture", style: { '--pn-card-aspect-ratio': this.aspectRatio || 'unset' } }, h("slot", { key: '0daa13f16ef2ec666d9ca9dc9b969f27a0e52b9e', name: "image" }))), h("div", { key: '5d0b8a57c6ecbf58fe98391d7fab74d5dbd626ad', class: "pn-card-content" }, h("header", { key: '1a48800f585c09b14d04c468aba5d621d57be2cd', class: "pn-card-header" }, h("div", { key: '830c5901b52b38fdb6c5ed58786392f2bb1782b7', class: "pn-card-tags" }, h("slot", { key: 'd97dbbeae1763a74d7fbd39e90fa1b31504e0f9f', name: "tags" })), !!this.overline && h("p", { key: 'f88c629311c5a9cbec5f046a0d4c7e622b9fd6f3', class: "pn-card-label-overline" }, this.overline), !!this.label && (h(TitleTag, { key: '585f02ed063d2145ca83e95e007bedd4faf291aa', id: this.getTitleId(), class: "pn-card-label" }, this.label)), h("slot", { key: 'd15c587c99db40f1b09df450d017b55323505abf', name: "header" })), h("section", { key: '2ede235cec1f5e97eba9bdebf3582147432d1ecf', class: "pn-card-section" }, !!this.text && h("p", { key: 'a3ef3f6f84c0c4205c4de04fecde5f0b55b9bbc8', class: "pn-card-section-paragraph" }, this.text), h("slot", { key: '7db060522f673aa3f0c0d8cf78d029834a94d11b' })), h("nav", { key: '5cbd93fec3dcd0958f04ba4bc0350ca27295f110', class: "pn-card-navigation" }, this.showHref() && (h("a", { key: 'e872e4d9f36840f3318f606861f8fd850c8dd931', class: "pn-card-link", href: this.href, target: this.target, rel: this.rel, "aria-labelledby": this.getLabelledby(), onClick: event => this.handleClick(event), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.hrefLabel, h("pn-icon", { key: '3a812c2a58573d772b220cce1ee5ef3b0d7aa43e', color: "blue700", icon: this.getIcon() }))), h("slot", { key: '7ef4a0a3e9789e758828bdd5f053338c784e484b', name: "navigation" }))))));
-    }
-    static get watchers() { return {
-        "cardId": ["watchCardId"]
-    }; }
-    static get style() { return pnCardCss; }
-}, [772, "pn-card", {
-        "label": [1],
-        "labelTag": [1, "label-tag"],
-        "overline": [1],
-        "text": [1],
-        "cardId": [1, "card-id"],
-        "horizontal": [4],
-        "reverse": [4],
-        "aspectRatio": [1, "aspect-ratio"],
-        "href": [1],
-        "hrefLabel": [1, "href-label"],
-        "target": [1],
-        "rel": [1],
-        "icon": [1],
-        "visibleOutline": [32]
-    }, undefined, {
-        "cardId": ["watchCardId"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-card", "pn-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-card":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnCard$1);
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PnCard = PnCard$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnCard, defineCustomElement };
-//# sourceMappingURL=pn-card.js.map
-
-//# sourceMappingURL=pn-card.js.map
+import{transformTag as e,proxyCustomElement as a,HTMLElement as r,createEvent as n,h as t,Host as i}from"@stencil/core/internal/client";import{a as c}from"./arrow_right.js";import{o as d}from"./open_in_new.js";import{u as o,o as l}from"./helpers.js";import{d as p}from"./pn-icon2.js";const s=a(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.pnCard=n(this,"pnCard",7)}id="pn-card-"+o();idTitle=this.id+"-title";visibleOutline=!1;get hostElement(){return this}label;labelTag="h3";overline;text;cardId=null;horizontal=!1;reverse=!1;aspectRatio="";href;hrefLabel;target;rel="noopener noreferrer";icon=null;watchCardId(){this.idTitle=(this.cardId||this.id)+"-title"}pnCard;componentWillLoad(){this.watchCardId()}isExternal(){return"_blank"===this.target}showTitle(){return!!this.label}showHref(){return!!this.href&&(this.hrefLabel||this.showTitle())}getTitleId(){return this.hrefLabel?null:this.idTitle}getLabelledby(){return this.hrefLabel?null:this.showTitle()?this.idTitle:null}getIcon(){return this.icon?this.icon:this.isExternal()?d:c}getHeadingTag(){return["h2","h3","h4","h5","h6","p"].includes(this.labelTag)?this.labelTag:"h3"}handleFocus({type:e,target:a}){this.visibleOutline="focus"===e&&a.matches(":focus-visible")}handleClick(e){l(e,this.hostElement,".pn-card"),this.pnCard.emit({click:e})}render(){const e=this.getHeadingTag();return t(i,{key:"66bfbab30790857e909606b687989d845eef9c42"},t("article",{key:"eb3d30790de5f65da87dc40731b81fb9120c88db",id:this.cardId,class:"pn-card","data-link":!!this.href,"data-horizontal":this.horizontal,"data-reverse":this.reverse,"data-focus":this.visibleOutline},t("div",{key:"626daade06dd8b45c47e58cd5fbcef0322e3398f",class:"pn-card-image"},t("picture",{key:"5f0539bf93afe3a8070c4e31bcabcd6e09f6cd5b",class:"pn-card-picture",style:{"--pn-card-aspect-ratio":this.aspectRatio||"unset"}},t("slot",{key:"ead1ab12ad886e48daf022a26afc0deb29998d9e",name:"image"}))),t("div",{key:"79b1e1dcf658daf770ef2038770ad36d827d61fb",class:"pn-card-content"},t("header",{key:"9b122547f47bace150f3dd17ccbe0ffe17a499b7",class:"pn-card-header"},t("div",{key:"eff03ae597d4d47ec6ef78634b9f1e3b3c65d420",class:"pn-card-tags"},t("slot",{key:"bce8ed2e135c2f7575923678477c278c82b26664",name:"tags"})),!!this.overline&&t("p",{key:"4c5012ffa0d5e4054be3dc99fea4fd3d2d2e4383",class:"pn-card-label-overline"},this.overline),!!this.label&&t(e,{key:"a1a2a9ce01834943f3909a95dd4ac9c12c62fcc5",id:this.getTitleId(),class:"pn-card-label"},this.label),t("slot",{key:"7e231155db5155d5d4a5a272f845c6822235bb54",name:"header"})),t("section",{key:"118b273cd31a00de1fd16ee297bb206a33e7f977",class:"pn-card-section"},!!this.text&&t("p",{key:"66addec056571f3b511718cc8a4a60f64c3ac62b",class:"pn-card-section-paragraph"},this.text),t("slot",{key:"f9ec7149a4e48f59143b81470677be0b24791c8e"})),t("nav",{key:"bb0ea19f4db135fd1b32496e167b67358df6ada8",class:"pn-card-navigation"},this.showHref()&&t("a",{key:"182c9afcbb00b56c16b53ad15f12449e5feaf11a",class:"pn-card-link",href:this.href,target:this.target,rel:this.rel,"aria-labelledby":this.getLabelledby(),onClick:e=>this.handleClick(e),onFocus:e=>this.handleFocus(e),onBlur:e=>this.handleFocus(e)},this.hrefLabel,t("pn-icon",{key:"50ed52dbc3fd815c9d7b37542ad566a607e43da3",color:"blue700",icon:this.getIcon()})),t("slot",{key:"6204a8a4944a85d522b4522352f67e73bc52792a",name:"navigation"})))))}static get watchers(){return{cardId:[{watchCardId:0}]}}static get style(){return`${e("pn-card")}{position:relative;display:block}${e("pn-card")} .pn-card{position:relative;background-color:#ffffff;color:#2d2013;border-radius:0.5em;display:flex;flex-direction:column;height:100%;overflow:hidden;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);outline:0.2rem solid transparent;outline-offset:0.2rem;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){${e("pn-card")} .pn-card{transition-duration:0s;transition-delay:0s}}${e("pn-card")} .pn-card[data-link]:hover{background-color:#e0f8ff}${e("pn-card")} .pn-card[data-link][data-focus]{outline-color:#005d92}${e("pn-card")} .pn-card{}${e("pn-card")} .pn-card[data-link] .pn-card-navigation>[slot=navigation]{display:none}${e("pn-card")} .pn-card[data-horizontal]{flex-direction:row}${e("pn-card")} .pn-card[data-horizontal][data-reverse]{flex-direction:row-reverse}${e("pn-card")} .pn-card[data-horizontal][data-reverse] .pn-card-picture{clip-path:ellipse(100% 175% at right center)}${e("pn-card")} .pn-card[data-horizontal] .pn-card-content{flex:1 1 50%}${e("pn-card")} .pn-card[data-horizontal] .pn-card-image{flex:1 1 50%;flex-direction:row}${e("pn-card")} .pn-card[data-horizontal] .pn-card-picture{width:100%;clip-path:ellipse(100% 175% at left center)}${e("pn-card")} .pn-card[data-reverse]{flex-direction:column-reverse}${e("pn-card")} .pn-card[data-reverse] .pn-card-picture{clip-path:ellipse(175% 100% at bottom center)}${e("pn-card")} .pn-card-header{display:flex;flex-direction:column;gap:clamp(0.5em, 5vw, 0.75em)}${e("pn-card")} .pn-card-label{font-size:clamp(1.125em, 5vw, 1.5em);font-weight:700;margin:0}${e("pn-card")} .pn-card-label-overline{color:#5e554a;font-size:0.875em;font-weight:400;margin:0}${e("pn-card")} .pn-card-link{display:inline-flex;align-items:center;gap:0.25em;color:#005d92;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){${e("pn-card")} .pn-card-link{transition-duration:0s;transition-delay:0s}}${e("pn-card")} .pn-card-link:hover{color:#0d234b;text-decoration-color:#0d234b}${e("pn-card")} .pn-card-link:hover>${e("pn-icon")}>.pn-icon-svg>path{fill:#0d234b}${e("pn-card")} .pn-card-link:focus{outline:0;color:#0d234b;text-decoration-color:#0d234b}${e("pn-card")} .pn-card-link:focus>${e("pn-icon")}>.pn-icon-svg>path{fill:#0d234b}${e("pn-card")} .pn-card-link:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%}${e("pn-card")} .pn-card-content{display:flex;flex-direction:column;flex-wrap:nowrap;flex:1;gap:clamp(0.5em, 5vw, 0.75em);padding:clamp(0.75em, 5vw, 1.5em) clamp(0.75em, 5vw, 1.5em)}${e("pn-card")} .pn-card-section{display:flex;flex-direction:column;gap:0.5em;color:#5e554a}${e("pn-card")} .pn-card-section-paragraph,${e("pn-card")} .pn-card-section p{margin:0 0 0.25em}${e("pn-card")} .pn-card-section-paragraph:last-child,${e("pn-card")} .pn-card-section p:last-child{margin:0em}${e("pn-card")} .pn-card-navigation{margin-top:auto;padding-top:clamp(0.5em, 5vw, 0.75em);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0.5em}${e("pn-card")} .pn-card-navigation>${e("pn-button")}{flex:1 1 12em}${e("pn-card")} .pn-card-navigation:empty{display:none}${e("pn-card")} .pn-card-image{position:relative;display:flex;flex-direction:column}${e("pn-card")} .pn-card-picture{margin:0;padding:0;display:block;overflow:hidden;clip-path:ellipse(175% 100% at top center);aspect-ratio:var(--pn-card-aspect-ratio)}${e("pn-card")} .pn-card-picture:empty{display:none}${e("pn-card")} .pn-card-picture>*[slot=image]{display:block;height:100%;width:100%;object-fit:cover}${e("pn-card")} .pn-card-tags{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0.5em}${e("pn-card")} .pn-card-tags:empty{display:none}${e("pn-card")} .pn-card>.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}}`}},[772,"pn-card",{label:[1],labelTag:[1,"label-tag"],overline:[1],text:[1],cardId:[1,"card-id"],horizontal:[4],reverse:[4],aspectRatio:[1,"aspect-ratio"],href:[1],hrefLabel:[1,"href-label"],target:[1],rel:[1],icon:[1],visibleOutline:[32]},void 0,{cardId:[{watchCardId:0}]}]),f=s,h=function(){"undefined"!=typeof customElements&&["pn-card","pn-icon"].forEach((a=>{switch(a){case"pn-card":customElements.get(e(e(a)))||customElements.define(e(e(a)),s);break;case"pn-icon":customElements.get(e(e(a)))||p()}}))};export{f as PnCard,h as defineCustomElement}

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

@@ -2,160 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, Mixin, h, Host } from '@stencil/core/internal/client';
-import { u as uuidv4 } from './helpers.js';
-import { a as animateHeightFactory } from './index2.js';
-import { d as defineCustomElement$2 } from './pn-icon2.js';
-
-const pnCheckboxCss = "pn-checkbox{position:relative;display:inline-block}pn-checkbox .pn-checkbox{position:relative;display:flex;flex-wrap:wrap;flex-direction:row}pn-checkbox .pn-checkbox-label{cursor:pointer;color:#2d2013;-webkit-tap-highlight-color:transparent}pn-checkbox .pn-checkbox-helpertext{color:#5e554a;margin:0 0 0.5em 0}pn-checkbox .pn-checkbox-helpertext:last-child{margin:0}pn-checkbox .pn-checkbox-content{display:flex;flex-direction:column;align-items:flex-start;font-weight:400;line-height:1.5;flex:1;margin:0 0 0 0.75em}pn-checkbox .pn-checkbox-outer{width:1.5em;height:1.5em;background-color:#ffffff;display:flex;align-items:center;justify-content:center;position:relative;border:0.0625em solid #969087;border-radius:0.25em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, border-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-checkbox .pn-checkbox-outer{transition-duration:0s;transition-delay:0s}}pn-checkbox .pn-checkbox-svg{width:1.25em;fill:none}pn-checkbox .pn-checkbox-svg-line{stroke:#ffffff;transform-origin:0 0;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition-property:stroke-dashoffset;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-checkbox .pn-checkbox-svg-line{transition-duration:0s;transition-delay:0s}}pn-checkbox .pn-checkbox-svg-line{transition-delay:0s}pn-checkbox .pn-checkbox[data-tile]{position:relative;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:1em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, background-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-checkbox .pn-checkbox[data-tile]{transition-duration:0s;transition-delay:0s}}pn-checkbox .pn-checkbox[data-tile][data-invalid]{border-color:#a70707}pn-checkbox .pn-checkbox[data-invalid] .pn-checkbox-outer{border-color:#a70707}pn-checkbox .pn-checkbox-container{flex:1 1 100%;overflow:hidden;visibility:hidden}pn-checkbox .pn-checkbox-container[data-open]{visibility:visible;overflow:unset}pn-checkbox .pn-checkbox-container[data-moving]{visibility:visible;overflow:hidden}pn-checkbox .pn-checkbox-area{padding:0.75em 0 0 2.25em;display:flex;flex-direction:column;flex-wrap:nowrap;gap:1em}pn-checkbox .pn-checkbox>pn-icon{margin-left:0.75em}pn-checkbox>input{cursor:pointer;opacity:0;position:absolute;margin:0;z-index:1;top:0;left:0;font-size:1em;width:1.5em;height:1.5em;-webkit-tap-highlight-color:transparent}pn-checkbox>input[data-tile]:not([data-expand]){width:100%;height:100%}pn-checkbox>input[data-expand]{top:1em;left:1em}pn-checkbox>input[aria-describedby]+.pn-checkbox[data-tile] .pn-checkbox-label{font-weight:500}pn-checkbox>input:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#e0f8ff;border-color:#005d92}pn-checkbox>input:hover+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}pn-checkbox>input:hover+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}pn-checkbox>input:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#fdefee;border-color:#a70707}pn-checkbox>input:focus-visible+.pn-checkbox>.pn-checkbox-outer{outline-color:#005d92}pn-checkbox>input:focus-visible+.pn-checkbox[data-tile]{outline-color:#005d92;border-color:#005d92}pn-checkbox>input:focus-visible+.pn-checkbox[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}pn-checkbox>input:focus-visible+.pn-checkbox[data-tile][data-invalid]>.pn-checkbox-outer{outline-color:transparent}pn-checkbox>input:focus-visible+.pn-checkbox[data-tile]>.pn-checkbox-outer{outline-color:transparent}pn-checkbox>input:focus-visible+.pn-checkbox[data-invalid]>.pn-checkbox-outer{outline-color:#a70707}pn-checkbox>input:checked+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}pn-checkbox>input:checked+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-indeterminate{stroke-dashoffset:23}pn-checkbox>input:checked+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-checkmark{transition-delay:0.2s;stroke-dashoffset:0}pn-checkbox>input:checked+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}pn-checkbox>input:checked+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}pn-checkbox>input:checked+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}pn-checkbox>input:checked:hover+.pn-checkbox[data-tile]{border-color:#0d234b}pn-checkbox>input:checked:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}pn-checkbox>input:checked:hover+.pn-checkbox[data-invalid]{border-color:#500715}pn-checkbox>input:checked:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}pn-checkbox>input:indeterminate+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}pn-checkbox>input:indeterminate+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-checkmark{stroke-dashoffset:23}pn-checkbox>input:indeterminate+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-indeterminate{stroke-dashoffset:0}pn-checkbox>input:indeterminate+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}pn-checkbox>input:indeterminate:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}pn-checkbox>input:indeterminate:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}pn-checkbox>input:disabled{pointer-events:none}pn-checkbox>input:disabled+.pn-checkbox .pn-checkbox-label{pointer-events:none}pn-checkbox>input:disabled+.pn-checkbox>.pn-checkbox-outer{background-color:#f3f2f2;border-color:#969087}pn-checkbox>input:disabled+.pn-checkbox[data-tile]{background-color:#f3f2f2;border-color:#f3f2f2}pn-checkbox>input:disabled+.pn-checkbox[data-tile]>pn-icon>.pn-icon-svg path{fill:#5e554a}pn-checkbox>input:disabled+.pn-checkbox[data-tile]>.pn-checkbox-content>.pn-checkbox-label{color:#5e554a}pn-checkbox>input:disabled:checked+.pn-checkbox>.pn-checkbox-outer{background-color:#969087;border-color:#969087}pn-checkbox>input:disabled:indeterminate+.pn-checkbox>.pn-checkbox-outer{background-color:#969087;border-color:#969087}";
-
-const PnCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class PnCheckbox extends Mixin(animateHeightFactory) {
-    constructor(registerHost) {
-        super(false);
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    id = `pn-checkbox-${uuidv4()}`;
-    idHelpertext = `${this.id}-helpertext`;
-    contentArea;
-    get hostElement() { return this; }
-    /** The checkbox label */
-    label;
-    /** This adds an optional helpertext under the label. */
-    helpertext;
-    /** This will be emitted on change and input events. */
-    value;
-    /** The name of the checkbox group. */
-    name;
-    /** Check the checkbox. */
-    checked = false;
-    /** A unique HTML ID for the checkbox. */
-    checkboxid = this.id;
-    /** Set the checkbox as required. @category State */
-    required = false;
-    /** Disable the checkbox. @category State */
-    disabled = false;
-    /** If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the checkbox. @category State */
-    invalid = false;
-    /** Sets the checkbox to an indeterminate state, allowing for a mixed or intermediate checkbox state. @category State */
-    indeterminate = false;
-    /**
-     * Turn the checkbox into a clickable tile. A border and padding is added.
-     *
-     * **Do not** use interactive elements (links/buttons) inside of the slots when using this prop.
-     * An exception is made when using the `tile` + `expand` props together,
-     * which allows you to use interactive elements.
-     *
-     * @category Tile
-     */
-    tile = false;
-    /**
-     * Allow the checkbox to control the slot area "content".
-     * When checked, the area is visible, when unchecked, the area is hidden.
-     *
-     * The prop `tile` must be used at the same time.
-     * @see {@link tile}
-     * @since v7.17.0
-     * @category Tile
-     */
-    expand = false;
-    /**
-     * Add an icon on the right of your checkbox tile. The `tile` prop must be `true` for the icon to work.
-     * @see {@link tile}
-     * @category Tile
-     */
-    icon = null;
-    handleId() {
-        this.idHelpertext = `${this.checkboxid}-helpertext`;
-    }
-    handleChecked() {
-        if (this.displayContent()) {
-            this.checked ? this.openDropdown(this.contentArea) : this.closeDropdown(this.contentArea);
-        }
-    }
-    componentWillLoad() {
-        this.handleId();
-    }
-    componentDidLoad() {
-        if (this.displayContent() && this.checked) {
-            requestAnimationFrame(() => this.openDropdown(this.contentArea));
-        }
-    }
-    handleChange(e) {
-        const { checked } = e.target;
-        this.indeterminate = false;
-        this.checked = checked;
-    }
-    isInvalid() {
-        return this.invalid && !this.disabled;
-    }
-    displayText() {
-        return this.displayLabel() || this.displayHelpertext();
-    }
-    displayLabel() {
-        return !!this.label;
-    }
-    displayHelpertext() {
-        return !!(this.helpertext || this.hostElement.querySelector('[slot="helpertext"]')?.textContent);
-    }
-    displayIcon() {
-        return this.tile && !!this.icon;
-    }
-    displayContent() {
-        return this.tile && this.expand;
-    }
-    render() {
-        return (h(Host, { key: '52273e4f6d71183fa2360c147c5d2ed6fbb3d31a' }, h("input", { key: 'fba94a81a38009f36d938751c6362ed7340d68d7', type: "checkbox", id: this.checkboxid, class: "pn-checkbox-input", value: this.value, name: this.name, disabled: this.disabled, checked: this.checked, required: this.required, indeterminate: this.indeterminate, "aria-invalid": this.isInvalid()?.toString(), "aria-describedby": this.helpertext && this.idHelpertext, "data-tile": this.tile, "data-expand": this.expand, onChange: e => this.handleChange(e) }), h("div", { key: '850ecfd3abddccfe8b0ada1d0272dfa3155a669f', class: "pn-checkbox", "data-tile": this.tile, "data-expand": this.expand, "data-invalid": this.isInvalid() }, h("div", { key: '728efcdb0cd59f1af39839dd9fd1accc66f2da00', class: "pn-checkbox-outer" }, h("svg", { key: '55d82cc64b735706a57d301e9c8f64edc4aeebe9', class: "pn-checkbox-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: '02a30f7a2cbf5d502be29ff14945f22e89ca19c5', class: "pn-checkbox-svg-line pn-checkbox-svg-checkmark", points: "4,12 9,17 20,6", "stroke-width": "3" }), h("polyline", { key: '9c01a39dec7dc5d3961bffd07badf694ebdbadc1', class: "pn-checkbox-svg-line pn-checkbox-svg-indeterminate", points: "4,12 20,12", "stroke-width": "3" }))), h("p", { key: '0b63e31f00d2dea465e9e36b3cceb56bf0a4ad48', class: "pn-checkbox-content", hidden: !this.displayText() }, h("label", { key: '9aeebad0076718474224594b5c17cd5e3c3590dc', htmlFor: this.checkboxid, class: "pn-checkbox-label", hidden: !this.displayLabel() }, this.label), h("span", { key: '1d99d825512267e4560b817f8853319b10b05d08', id: this.idHelpertext, class: "pn-checkbox-helpertext", hidden: !this.displayHelpertext() }, this.helpertext, h("slot", { key: '981da5a8b25f6e780a5c0a1f9e32ee7aa11fef11', name: "helpertext" })), h("slot", { key: '192f09f50bd3592c41e8836c70dc264edfc3e332' })), this.displayIcon() && h("pn-icon", { key: '4ab2aaf2819ca83f08233cac99922e5234837408', icon: this.icon, color: "gray900" }), h("div", { key: '6247821b031e2d57a216612b166db6622aaa2225', class: "pn-checkbox-container", "data-open": this.checked, hidden: !this.displayContent(), style: { height: '0px' }, ref: el => (this.contentArea = el) }, h("div", { key: 'd35445d61a6e9a7faca6ca349f56b36097a077d2', class: "pn-checkbox-area" }, h("slot", { key: '7cbcc9648ae405d6aa8729f2071c3b03a914a027', name: "content" }))))));
-    }
-    static get watchers() { return {
-        "checkboxid": ["handleId"],
-        "checked": ["handleChecked"]
-    }; }
-    static get style() { return pnCheckboxCss; }
-}, [772, "pn-checkbox", {
-        "label": [1],
-        "helpertext": [1],
-        "value": [513],
-        "name": [1],
-        "checked": [1028],
-        "checkboxid": [1],
-        "required": [4],
-        "disabled": [4],
-        "invalid": [4],
-        "indeterminate": [1028],
-        "tile": [4],
-        "expand": [4],
-        "icon": [1],
-        "isClosing": [32],
-        "isExpanding": [32]
-    }, undefined, {
-        "checkboxid": ["handleId"],
-        "checked": ["handleChecked"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-checkbox", "pn-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-checkbox":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnCheckbox$1);
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PnCheckbox = PnCheckbox$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnCheckbox, defineCustomElement };
-//# sourceMappingURL=pn-checkbox.js.map
-
-//# sourceMappingURL=pn-checkbox.js.map
+import{transformTag as e,proxyCustomElement as c,Mixin as o,h as n,Host as t}from"@stencil/core/internal/client";import{u as i}from"./helpers.js";import{a}from"./index2.js";import{d as r}from"./pn-icon2.js";const d=c(class extends(o(a)){constructor(e){super(!1),!1!==e&&this.__registerHost()}id="pn-checkbox-"+i();idHelpertext=this.id+"-helpertext";contentArea;get hostElement(){return this}label;helpertext;value;name;checked=!1;checkboxid=this.id;required=!1;disabled=!1;invalid=!1;indeterminate=!1;tile=!1;expand=!1;icon=null;handleId(){this.idHelpertext=this.checkboxid+"-helpertext"}handleChecked(){this.displayContent()&&(this.checked?this.openDropdown(this.contentArea):this.closeDropdown(this.contentArea))}componentWillLoad(){this.handleId()}componentDidLoad(){this.displayContent()&&this.checked&&requestAnimationFrame((()=>this.openDropdown(this.contentArea)))}handleChange(e){const{checked:c}=e.target;this.indeterminate=!1,this.checked=c}isInvalid(){return this.invalid&&!this.disabled}displayText(){return this.displayLabel()||this.displayHelpertext()}displayLabel(){return!!this.label}displayHelpertext(){return!(!this.helpertext&&!this.hostElement.querySelector('[slot="helpertext"]')?.textContent)}displayIcon(){return this.tile&&!!this.icon}displayContent(){return this.tile&&this.expand}render(){return n(t,{key:"52273e4f6d71183fa2360c147c5d2ed6fbb3d31a"},n("input",{key:"fba94a81a38009f36d938751c6362ed7340d68d7",type:"checkbox",id:this.checkboxid,class:"pn-checkbox-input",value:this.value,name:this.name,disabled:this.disabled,checked:this.checked,required:this.required,indeterminate:this.indeterminate,"aria-invalid":this.isInvalid()?.toString(),"aria-describedby":this.helpertext&&this.idHelpertext,"data-tile":this.tile,"data-expand":this.expand,onChange:e=>this.handleChange(e)}),n("div",{key:"850ecfd3abddccfe8b0ada1d0272dfa3155a669f",class:"pn-checkbox","data-tile":this.tile,"data-expand":this.expand,"data-invalid":this.isInvalid()},n("div",{key:"728efcdb0cd59f1af39839dd9fd1accc66f2da00",class:"pn-checkbox-outer"},n("svg",{key:"55d82cc64b735706a57d301e9c8f64edc4aeebe9",class:"pn-checkbox-svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},n("polyline",{key:"02a30f7a2cbf5d502be29ff14945f22e89ca19c5",class:"pn-checkbox-svg-line pn-checkbox-svg-checkmark",points:"4,12 9,17 20,6","stroke-width":"3"}),n("polyline",{key:"9c01a39dec7dc5d3961bffd07badf694ebdbadc1",class:"pn-checkbox-svg-line pn-checkbox-svg-indeterminate",points:"4,12 20,12","stroke-width":"3"}))),n("p",{key:"0b63e31f00d2dea465e9e36b3cceb56bf0a4ad48",class:"pn-checkbox-content",hidden:!this.displayText()},n("label",{key:"9aeebad0076718474224594b5c17cd5e3c3590dc",htmlFor:this.checkboxid,class:"pn-checkbox-label",hidden:!this.displayLabel()},this.label),n("span",{key:"1d99d825512267e4560b817f8853319b10b05d08",id:this.idHelpertext,class:"pn-checkbox-helpertext",hidden:!this.displayHelpertext()},this.helpertext,n("slot",{key:"981da5a8b25f6e780a5c0a1f9e32ee7aa11fef11",name:"helpertext"})),n("slot",{key:"192f09f50bd3592c41e8836c70dc264edfc3e332"})),this.displayIcon()&&n("pn-icon",{key:"4ab2aaf2819ca83f08233cac99922e5234837408",icon:this.icon,color:"gray900"}),n("div",{key:"6247821b031e2d57a216612b166db6622aaa2225",class:"pn-checkbox-container","data-open":this.checked,hidden:!this.displayContent(),style:{height:"0px"},ref:e=>this.contentArea=e},n("div",{key:"d35445d61a6e9a7faca6ca349f56b36097a077d2",class:"pn-checkbox-area"},n("slot",{key:"7cbcc9648ae405d6aa8729f2071c3b03a914a027",name:"content"})))))}static get watchers(){return{checkboxid:[{handleId:0}],checked:[{handleChecked:0}]}}static get style(){return`${e("pn-checkbox")}{position:relative;display:inline-block}${e("pn-checkbox")} .pn-checkbox{position:relative;display:flex;flex-wrap:wrap;flex-direction:row}${e("pn-checkbox")} .pn-checkbox-label{cursor:pointer;color:#2d2013;-webkit-tap-highlight-color:transparent}${e("pn-checkbox")} .pn-checkbox-helpertext{color:#5e554a;margin:0 0 0.5em 0}${e("pn-checkbox")} .pn-checkbox-helpertext:last-child{margin:0}${e("pn-checkbox")} .pn-checkbox-content{display:flex;flex-direction:column;align-items:flex-start;font-weight:400;line-height:1.5;flex:1;margin:0 0 0 0.75em}${e("pn-checkbox")} .pn-checkbox-outer{width:1.5em;height:1.5em;background-color:#ffffff;display:flex;align-items:center;justify-content:center;position:relative;border:0.0625em solid #969087;border-radius:0.25em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, border-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-checkbox")} .pn-checkbox-outer{transition-duration:0s;transition-delay:0s}}${e("pn-checkbox")} .pn-checkbox-svg{width:1.25em;fill:none}${e("pn-checkbox")} .pn-checkbox-svg-line{stroke:#ffffff;transform-origin:0 0;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition-property:stroke-dashoffset;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-checkbox")} .pn-checkbox-svg-line{transition-duration:0s;transition-delay:0s}}${e("pn-checkbox")} .pn-checkbox-svg-line{transition-delay:0s}${e("pn-checkbox")} .pn-checkbox[data-tile]{position:relative;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:1em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, background-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-checkbox")} .pn-checkbox[data-tile]{transition-duration:0s;transition-delay:0s}}${e("pn-checkbox")} .pn-checkbox[data-tile][data-invalid]{border-color:#a70707}${e("pn-checkbox")} .pn-checkbox[data-invalid] .pn-checkbox-outer{border-color:#a70707}${e("pn-checkbox")} .pn-checkbox-container{flex:1 1 100%;overflow:hidden;visibility:hidden}${e("pn-checkbox")} .pn-checkbox-container[data-open]{visibility:visible;overflow:unset}${e("pn-checkbox")} .pn-checkbox-container[data-moving]{visibility:visible;overflow:hidden}${e("pn-checkbox")} .pn-checkbox-area{padding:0.75em 0 0 2.25em;display:flex;flex-direction:column;flex-wrap:nowrap;gap:1em}${e("pn-checkbox")} .pn-checkbox>${e("pn-icon")}{margin-left:0.75em}${e("pn-checkbox")}>input{cursor:pointer;opacity:0;position:absolute;margin:0;z-index:1;top:0;left:0;font-size:1em;width:1.5em;height:1.5em;-webkit-tap-highlight-color:transparent}${e("pn-checkbox")}>input[data-tile]:not([data-expand]){width:100%;height:100%}${e("pn-checkbox")}>input[data-expand]{top:1em;left:1em}${e("pn-checkbox")}>input[aria-describedby]+.pn-checkbox[data-tile] .pn-checkbox-label{font-weight:500}${e("pn-checkbox")}>input:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#e0f8ff;border-color:#005d92}${e("pn-checkbox")}>input:hover+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}${e("pn-checkbox")}>input:hover+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}${e("pn-checkbox")}>input:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#fdefee;border-color:#a70707}${e("pn-checkbox")}>input:focus-visible+.pn-checkbox>.pn-checkbox-outer{outline-color:#005d92}${e("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile]{outline-color:#005d92;border-color:#005d92}${e("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}${e("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile][data-invalid]>.pn-checkbox-outer{outline-color:transparent}${e("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile]>.pn-checkbox-outer{outline-color:transparent}${e("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-invalid]>.pn-checkbox-outer{outline-color:#a70707}${e("pn-checkbox")}>input:checked+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}${e("pn-checkbox")}>input:checked+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-indeterminate{stroke-dashoffset:23}${e("pn-checkbox")}>input:checked+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-checkmark{transition-delay:0.2s;stroke-dashoffset:0}${e("pn-checkbox")}>input:checked+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}${e("pn-checkbox")}>input:checked+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}${e("pn-checkbox")}>input:checked+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}${e("pn-checkbox")}>input:checked:hover+.pn-checkbox[data-tile]{border-color:#0d234b}${e("pn-checkbox")}>input:checked:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}${e("pn-checkbox")}>input:checked:hover+.pn-checkbox[data-invalid]{border-color:#500715}${e("pn-checkbox")}>input:checked:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}${e("pn-checkbox")}>input:indeterminate+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}${e("pn-checkbox")}>input:indeterminate+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-checkmark{stroke-dashoffset:23}${e("pn-checkbox")}>input:indeterminate+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-indeterminate{stroke-dashoffset:0}${e("pn-checkbox")}>input:indeterminate+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}${e("pn-checkbox")}>input:indeterminate:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}${e("pn-checkbox")}>input:indeterminate:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}${e("pn-checkbox")}>input:disabled{pointer-events:none}${e("pn-checkbox")}>input:disabled+.pn-checkbox .pn-checkbox-label{pointer-events:none}${e("pn-checkbox")}>input:disabled+.pn-checkbox>.pn-checkbox-outer{background-color:#f3f2f2;border-color:#969087}${e("pn-checkbox")}>input:disabled+.pn-checkbox[data-tile]{background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-checkbox")}>input:disabled+.pn-checkbox[data-tile]>${e("pn-icon")}>.pn-icon-svg path{fill:#5e554a}${e("pn-checkbox")}>input:disabled+.pn-checkbox[data-tile]>.pn-checkbox-content>.pn-checkbox-label{color:#5e554a}${e("pn-checkbox")}>input:disabled:checked+.pn-checkbox>.pn-checkbox-outer{background-color:#969087;border-color:#969087}${e("pn-checkbox")}>input:disabled:indeterminate+.pn-checkbox>.pn-checkbox-outer{background-color:#969087;border-color:#969087}`}},[772,"pn-checkbox",{label:[1],helpertext:[1],value:[513],name:[1],checked:[1028],checkboxid:[1],required:[4],disabled:[4],invalid:[4],indeterminate:[1028],tile:[4],expand:[4],icon:[1],isClosing:[32],isExpanding:[32]},void 0,{checkboxid:[{handleId:0}],checked:[{handleChecked:0}]}]),h=d,b=function(){"undefined"!=typeof customElements&&["pn-checkbox","pn-icon"].forEach((c=>{switch(c){case"pn-checkbox":customElements.get(e(e(c)))||customElements.define(e(e(c)),d);break;case"pn-icon":customElements.get(e(e(c)))||r()}}))};export{h as PnCheckbox,b as defineCustomElement}

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

@@ -2,85 +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 { c as check } from './check.js';
-import { d as defineCustomElement$2 } from './pn-icon2.js';
-
-const pnChoiceChipCss = "pn-choice-chip{display:inline-block}pn-choice-chip .pn-choice-chip{position:relative;font-size:1em;font-weight:500;text-align:center}pn-choice-chip .pn-choice-chip-container{cursor:pointer;position:relative;display:flex;align-items:center;gap:0;padding:0.5em 1em;border:0.0625em solid #969087;border-radius:0.5em;background-color:#ffffff;transition-property:border-color, outline-color, background-color, padding, gap;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-choice-chip .pn-choice-chip-container{transition-duration:0s;transition-delay:0s}}pn-choice-chip .pn-choice-chip-container{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-choice-chip .pn-choice-chip-container[data-icon]{gap:0.25em;padding-left:0.75em}pn-choice-chip .pn-choice-chip-container[data-icon][data-small]{padding-left:0.5em}pn-choice-chip .pn-choice-chip-container[data-icon][data-large]{padding-left:1em}pn-choice-chip .pn-choice-chip-container[data-icon]>.pn-choice-chip-icon{width:1.5em}pn-choice-chip .pn-choice-chip-container[data-small]{padding:0.25em 0.75em}pn-choice-chip .pn-choice-chip-container[data-small] .pn-choice-chip-label{line-height:1.25em}pn-choice-chip .pn-choice-chip-container[data-small] .pn-choice-chip-label>span{font-size:0.875em}pn-choice-chip .pn-choice-chip-container[data-large]{padding:0.625em 1.25em}pn-choice-chip .pn-choice-chip-icon{position:relative;width:0;height:1.5em;transition-property:width;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-choice-chip .pn-choice-chip-icon{transition-duration:0s;transition-delay:0s}}pn-choice-chip .pn-choice-chip-icon pn-icon{opacity:0;transform:scale(0);position:absolute;top:0;left:0;transition-property:transform, opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-choice-chip .pn-choice-chip-icon pn-icon{transition-duration:0s;transition-delay:0s}}pn-choice-chip .pn-choice-chip-icon pn-icon.pn-choice-chip-icon-user{opacity:1;transform:scale(1)}pn-choice-chip .pn-choice-chip-label{color:#005d92;line-height:1.5em;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-choice-chip .pn-choice-chip-label{transition-duration:0s;transition-delay:0s}}pn-choice-chip .pn-choice-chip-label{cursor:pointer;display:flex;align-items:center;flex-grow:1;height:100%}pn-choice-chip .pn-choice-chip>input{position:absolute;z-index:1;opacity:0;top:0;left:0;width:100%;height:100%;margin:0;cursor:pointer}pn-choice-chip .pn-choice-chip>input:not(:checked)~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-user{transform:scale(1);opacity:1}pn-choice-chip .pn-choice-chip>input:hover~.pn-choice-chip-container{background-color:#effbff;border-color:#005d92}pn-choice-chip .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-icon-user .pn-icon-svg path,pn-choice-chip .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-icon-check .pn-icon-svg path{fill:#005d92}pn-choice-chip .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-label{color:#005d92}pn-choice-chip .pn-choice-chip>input:checked~.pn-choice-chip-container{gap:0.25em;background-color:#e0f8ff;border-color:#005d92}pn-choice-chip .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon{width:1.5em;stroke-dashoffset:23}pn-choice-chip .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-check{transform:scale(1);opacity:1}pn-choice-chip .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-user{transform:scale(0);opacity:0}pn-choice-chip .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-label{color:#0d234b}pn-choice-chip .pn-choice-chip>input:checked:hover~.pn-choice-chip-container{background-color:#effbff;border-color:#0d234b}pn-choice-chip .pn-choice-chip>input:checked:hover~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-check path{fill:#0d234b}pn-choice-chip .pn-choice-chip>input:checked:hover~.pn-choice-chip-container>.pn-choice-chip-label{color:#0d234b}pn-choice-chip .pn-choice-chip>input:focus-visible~.pn-choice-chip-container{outline-color:#005d92;border-color:#005d92}pn-choice-chip .pn-choice-chip>input:disabled{cursor:not-allowed}pn-choice-chip .pn-choice-chip>input:disabled:active~.pn-choice-chip-container{outline:none}pn-choice-chip .pn-choice-chip>input:disabled~.pn-choice-chip-container{background-color:#f3f2f2;border-color:#f3f2f2;cursor:not-allowed}pn-choice-chip .pn-choice-chip>input:disabled~.pn-choice-chip-container .pn-choice-chip-label{color:#5e554a;cursor:not-allowed}pn-choice-chip .pn-choice-chip>input:disabled~.pn-choice-chip-container pn-icon .pn-icon-svg path{fill:#5e554a}";
-
-const PnChoiceChip$1 = /*@__PURE__*/ proxyCustomElement(class PnChoiceChip extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    get hostElement() { return this; }
-    moving = false;
-    /** The choice chip label */
-    label;
-    /** This will be emitted on change and input */
-    value;
-    /** The name of the checkbox group */
-    name;
-    /** Precheck the choice chip */
-    checked = false;
-    /** Make the choice chip a radio */
-    radio = false;
-    /** A unique HTML id */
-    choiceid = `pn-choice-chip-${uuidv4()}`;
-    /** Include an icon */
-    icon;
-    /** Set the choice chip as required. @category State */
-    required = false;
-    /** Disable the choice chip. @category State */
-    disabled = false;
-    /** Set the size to small. @category Size */
-    small = false;
-    /** Set the size to large. @category Size */
-    large = false;
-    render() {
-        return (h(Host, { key: '8d5686163aba07794c4700e91a9d378200aa2bf9' }, h("div", { key: '233605ae9b531853d9f941f99cc0cf6fcce21bba', class: "pn-choice-chip" }, h("input", { key: 'aacdd59b76f20029234722e49ab5b2aa27198206', type: this.radio ? 'radio' : 'checkbox', id: this.choiceid, value: this.value, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled }), h("div", { key: '69a287ffabea602b28360dc5a15d979dcb3d6526', class: "pn-choice-chip-container", "data-icon": !!this.icon, "data-small": this.small, "data-large": this.large }, h("div", { key: 'c2d89b6817b623264e903aed26947d8a422a1ee2', class: "pn-choice-chip-icon" }, h("pn-icon", { key: 'd405b85cec9b30f85a5949862dec48cdacc618de', color: "blue700", class: "pn-choice-chip-icon-check", icon: check }), !!this.icon && h("pn-icon", { key: '4a23075f0cfb6c6f3e7fbf49c5de06137c1bc961', color: "blue700", class: "pn-choice-chip-icon-user", icon: this.icon })), h("label", { key: 'af080ab55ce96b7d0bc3e0c168130bd772302d52', class: "pn-choice-chip-label", htmlFor: this.choiceid }, h("span", { key: '2ed2b62f84c1e2c85ace67151bd1997bcc762027' }, this.label), h("slot", { key: '3512fdee318749598e66d096ec56a66e3daa564a' }))))));
-    }
-    static get style() { return pnChoiceChipCss; }
-}, [772, "pn-choice-chip", {
-        "label": [1],
-        "value": [513],
-        "name": [1],
-        "checked": [1028],
-        "radio": [4],
-        "choiceid": [1],
-        "icon": [1],
-        "required": [4],
-        "disabled": [4],
-        "small": [4],
-        "large": [4],
-        "moving": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-choice-chip", "pn-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-choice-chip":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnChoiceChip$1);
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PnChoiceChip = PnChoiceChip$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnChoiceChip, defineCustomElement };
-//# sourceMappingURL=pn-choice-chip.js.map
-
-//# sourceMappingURL=pn-choice-chip.js.map
+import{transformTag as c,proxyCustomElement as i,HTMLElement as e,h as n,Host as o}from"@stencil/core/internal/client";import{u as p}from"./helpers.js";import{c as h}from"./check.js";import{d as t}from"./pn-icon2.js";const a=i(class extends e{constructor(c){super(),!1!==c&&this.__registerHost()}get hostElement(){return this}moving=!1;label;value;name;checked=!1;radio=!1;choiceid="pn-choice-chip-"+p();icon;required=!1;disabled=!1;small=!1;large=!1;render(){return n(o,{key:"8d5686163aba07794c4700e91a9d378200aa2bf9"},n("div",{key:"233605ae9b531853d9f941f99cc0cf6fcce21bba",class:"pn-choice-chip"},n("input",{key:"aacdd59b76f20029234722e49ab5b2aa27198206",type:this.radio?"radio":"checkbox",id:this.choiceid,value:this.value,name:this.name,checked:this.checked,required:this.required,disabled:this.disabled}),n("div",{key:"69a287ffabea602b28360dc5a15d979dcb3d6526",class:"pn-choice-chip-container","data-icon":!!this.icon,"data-small":this.small,"data-large":this.large},n("div",{key:"c2d89b6817b623264e903aed26947d8a422a1ee2",class:"pn-choice-chip-icon"},n("pn-icon",{key:"d405b85cec9b30f85a5949862dec48cdacc618de",color:"blue700",class:"pn-choice-chip-icon-check",icon:h}),!!this.icon&&n("pn-icon",{key:"4a23075f0cfb6c6f3e7fbf49c5de06137c1bc961",color:"blue700",class:"pn-choice-chip-icon-user",icon:this.icon})),n("label",{key:"af080ab55ce96b7d0bc3e0c168130bd772302d52",class:"pn-choice-chip-label",htmlFor:this.choiceid},n("span",{key:"2ed2b62f84c1e2c85ace67151bd1997bcc762027"},this.label),n("slot",{key:"3512fdee318749598e66d096ec56a66e3daa564a"})))))}static get style(){return`${c("pn-choice-chip")}{display:inline-block}${c("pn-choice-chip")} .pn-choice-chip{position:relative;font-size:1em;font-weight:500;text-align:center}${c("pn-choice-chip")} .pn-choice-chip-container{cursor:pointer;position:relative;display:flex;align-items:center;gap:0;padding:0.5em 1em;border:0.0625em solid #969087;border-radius:0.5em;background-color:#ffffff;transition-property:border-color, outline-color, background-color, padding, gap;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${c("pn-choice-chip")} .pn-choice-chip-container{transition-duration:0s;transition-delay:0s}}${c("pn-choice-chip")} .pn-choice-chip-container{outline:0.2rem solid transparent;outline-offset:0.2rem}${c("pn-choice-chip")} .pn-choice-chip-container[data-icon]{gap:0.25em;padding-left:0.75em}${c("pn-choice-chip")} .pn-choice-chip-container[data-icon][data-small]{padding-left:0.5em}${c("pn-choice-chip")} .pn-choice-chip-container[data-icon][data-large]{padding-left:1em}${c("pn-choice-chip")} .pn-choice-chip-container[data-icon]>.pn-choice-chip-icon{width:1.5em}${c("pn-choice-chip")} .pn-choice-chip-container[data-small]{padding:0.25em 0.75em}${c("pn-choice-chip")} .pn-choice-chip-container[data-small] .pn-choice-chip-label{line-height:1.25em}${c("pn-choice-chip")} .pn-choice-chip-container[data-small] .pn-choice-chip-label>span{font-size:0.875em}${c("pn-choice-chip")} .pn-choice-chip-container[data-large]{padding:0.625em 1.25em}${c("pn-choice-chip")} .pn-choice-chip-icon{position:relative;width:0;height:1.5em;transition-property:width;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${c("pn-choice-chip")} .pn-choice-chip-icon{transition-duration:0s;transition-delay:0s}}${c("pn-choice-chip")} .pn-choice-chip-icon ${c("pn-icon")}{opacity:0;transform:scale(0);position:absolute;top:0;left:0;transition-property:transform, opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${c("pn-choice-chip")} .pn-choice-chip-icon ${c("pn-icon")}{transition-duration:0s;transition-delay:0s}}${c("pn-choice-chip")} .pn-choice-chip-icon ${c("pn-icon")}.pn-choice-chip-icon-user{opacity:1;transform:scale(1)}${c("pn-choice-chip")} .pn-choice-chip-label{color:#005d92;line-height:1.5em;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${c("pn-choice-chip")} .pn-choice-chip-label{transition-duration:0s;transition-delay:0s}}${c("pn-choice-chip")} .pn-choice-chip-label{cursor:pointer;display:flex;align-items:center;flex-grow:1;height:100%}${c("pn-choice-chip")} .pn-choice-chip>input{position:absolute;z-index:1;opacity:0;top:0;left:0;width:100%;height:100%;margin:0;cursor:pointer}${c("pn-choice-chip")} .pn-choice-chip>input:not(:checked)~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-user{transform:scale(1);opacity:1}${c("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container{background-color:#effbff;border-color:#005d92}${c("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-icon-user .pn-icon-svg path,${c("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-icon-check .pn-icon-svg path{fill:#005d92}${c("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-label{color:#005d92}${c("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container{gap:0.25em;background-color:#e0f8ff;border-color:#005d92}${c("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon{width:1.5em;stroke-dashoffset:23}${c("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-check{transform:scale(1);opacity:1}${c("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-user{transform:scale(0);opacity:0}${c("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-label{color:#0d234b}${c("pn-choice-chip")} .pn-choice-chip>input:checked:hover~.pn-choice-chip-container{background-color:#effbff;border-color:#0d234b}${c("pn-choice-chip")} .pn-choice-chip>input:checked:hover~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-check path{fill:#0d234b}${c("pn-choice-chip")} .pn-choice-chip>input:checked:hover~.pn-choice-chip-container>.pn-choice-chip-label{color:#0d234b}${c("pn-choice-chip")} .pn-choice-chip>input:focus-visible~.pn-choice-chip-container{outline-color:#005d92;border-color:#005d92}${c("pn-choice-chip")} .pn-choice-chip>input:disabled{cursor:not-allowed}${c("pn-choice-chip")} .pn-choice-chip>input:disabled:active~.pn-choice-chip-container{outline:none}${c("pn-choice-chip")} .pn-choice-chip>input:disabled~.pn-choice-chip-container{background-color:#f3f2f2;border-color:#f3f2f2;cursor:not-allowed}${c("pn-choice-chip")} .pn-choice-chip>input:disabled~.pn-choice-chip-container .pn-choice-chip-label{color:#5e554a;cursor:not-allowed}${c("pn-choice-chip")} .pn-choice-chip>input:disabled~.pn-choice-chip-container ${c("pn-icon")} .pn-icon-svg path{fill:#5e554a}`}},[772,"pn-choice-chip",{label:[1],value:[513],name:[1],checked:[1028],radio:[4],choiceid:[1],icon:[1],required:[4],disabled:[4],small:[4],large:[4],moving:[32]}]),r=a,d=function(){"undefined"!=typeof customElements&&["pn-choice-chip","pn-icon"].forEach((i=>{switch(i){case"pn-choice-chip":customElements.get(c(c(i)))||customElements.define(c(c(i)),a);break;case"pn-icon":customElements.get(c(c(i)))||t()}}))};export{r as PnChoiceChip,d as defineCustomElement}