@postnord/pn-marketweb-components 4.1.0 → 4.1.2

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

@@ -2,227 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { a as chevron_left, c as chevron_right } from './chevron_right.js';
-import { k as awaitTopbar, e as en } from './helpers.js';
-import { d as defineCustomElement$4 } from './pn-button2.js';
-import { d as defineCustomElement$3 } from './pn-icon2.js';
-import { d as defineCustomElement$2 } from './pn-spinner2.js';
-
-var translations = {
-    LEFT: {
-        sv: 'Bläddra åt vänster',
-        en: 'Scroll to the left',
-        da: 'Rul til venstre',
-        fi: 'Vieritä vasemmalle',
-        no: 'Rull til venstre',
-    },
-    RIGHT: {
-        sv: 'Bläddra åt höger',
-        en: 'Scroll to the right',
-        da: 'Rul til højre',
-        fi: 'Vieritä oikealle',
-        no: 'Rull til høyre',
-    },
-};
-
-const pnTablistCss = "pn-tablist{width:100%;min-width:0;position:relative;border-bottom:0.0625em solid #d3cecb;display:block}pn-tablist .pn-tablist,pn-tablist ol,pn-tablist ul{display:flex;width:100%;flex-direction:row;gap:1em;position:relative;list-style:none;padding:0;margin:0}pn-tablist .pn-tablist[data-stacked] .pn-tab,pn-tablist ol[data-stacked] .pn-tab,pn-tablist ul[data-stacked] .pn-tab{margin:0.5em 0.25em 0.75em;gap:0.25em;flex-direction:column}pn-tablist .pn-tablist[data-small] .pn-tab,pn-tablist ol[data-small] .pn-tab,pn-tablist ul[data-small] .pn-tab{margin:0.25em 0.25em 0.75em}pn-tablist .pn-tablist[data-small] .pn-tab>*:not(pn-icon),pn-tablist ol[data-small] .pn-tab>*:not(pn-icon),pn-tablist ul[data-small] .pn-tab>*:not(pn-icon){font-size:0.875em}pn-tablist .pn-tablist[data-large] .pn-tab>*:not(pn-icon),pn-tablist ol[data-large] .pn-tab>*:not(pn-icon),pn-tablist ul[data-large] .pn-tab>*:not(pn-icon){font-size:1.25em}pn-tablist .pn-tablist[data-scroll],pn-tablist ol[data-scroll],pn-tablist ul[data-scroll]{overflow-y:hidden;overflow-x:auto;scroll-snap-type:x mandatory}pn-tablist .pn-tablist::-webkit-scrollbar,pn-tablist ol::-webkit-scrollbar,pn-tablist ul::-webkit-scrollbar{display:none}pn-tablist .pn-tablist-line{height:0.25em;position:absolute;bottom:0}pn-tablist .pn-tablist-line-item{position:absolute;width:100%;height:inherit;border-radius:0.25em 0.25em 0 0;transform-origin:left center;opacity:0;transition-property:transform, opacity, width;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tablist .pn-tablist-line-item{transition-duration:0s;transition-delay:0s}}pn-tablist .pn-tablist-line-active{z-index:1;background-color:#005d92;width:var(--pn-active-width);transform:translateX(var(--pn-active-offset));opacity:var(--pn-active-opacity)}pn-tablist .pn-tablist-line-hovered{background-color:#00a0d6;width:var(--pn-hover-width);transform:translateX(var(--pn-hover-offset));opacity:var(--pn-hover-opacity)}pn-tablist .pn-tablist-scroll{position:absolute;top:50%;left:0;right:0;pointer-events:none;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;z-index:1;height:100%}pn-tablist .pn-tablist-arrow{pointer-events:all;transform:scaleY(0);opacity:0;visibility:hidden;transition-property:transform, opacity, visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tablist .pn-tablist-arrow{transition-duration:0s;transition-delay:0s}}pn-tablist .pn-tablist-arrow[data-show]{opacity:1;visibility:visible;transform:scaleY(1)}";
-
-const PnTablist$1 = /*@__PURE__*/ proxyCustomElement(class PnTablist extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.tabchange = createEvent(this, "tabchange", 7);
-    }
-    mo;
-    isMenu = false;
-    isTabHovered = false;
-    tabListEl;
-    lineActive;
-    lineHovered;
-    tabElement;
-    get hostElement() { return this; }
-    /** Display the scrolling arrows */
-    showScrollArrows = false;
-    /** Display the scroll arrow to the left */
-    arrowLeft = false;
-    /** Display the scroll arrow to the right */
-    arrowRight = false;
-    /** Give the tablist a name for screenreaders. */
-    label;
-    /** The value of the tab that is currently active, each `<pn-tab value="example-value">` also expects a unique value */
-    value;
-    /** Make the tablist smaller */
-    small;
-    /** Icons are stacked vertically instead of the default rows */
-    stackedicons = false;
-    /** Manually set the language. */
-    language = null;
-    /**
-     * This will emit when a tab is changed. The detail property of the event will contain the value of the selected tab.
-     * This is the event and value you listen to when you toggle the visibility among your tabpanels.
-     **/
-    tabchange;
-    setValue() {
-        const tabs = Array.from(this.hostElement.querySelectorAll('pn-tab'));
-        tabs.forEach(tab => {
-            tab.activeTab = this.value;
-        });
-    }
-    scrollHandler() {
-        if (this.showScrollArrows) {
-            this.tabListEl.addEventListener('scroll', this.scrollIndicators.bind(this));
-        }
-        else {
-            this.tabListEl.removeEventListener('scroll', this.scrollIndicators);
-        }
-    }
-    setActiveTabHandler({ detail }) {
-        this.tabElement = detail.el;
-        requestAnimationFrame(() => this.activateTab(detail.el));
-        if (this.value === detail.val)
-            return;
-        this.value = detail.val;
-        this.tabchange.emit(this.value);
-        this.tabElement.querySelector('.pn-tab').focus();
-    }
-    rerender() {
-        requestAnimationFrame(() => {
-            this.scrollIndicators();
-            this.isTabHovered = false;
-        });
-    }
-    handleEnter(e) {
-        this.isTabHovered = true;
-        this.styleLines(e.target);
-    }
-    handleLeave() {
-        this.isTabHovered = false;
-        setTimeout(() => {
-            if (!this.isTabHovered)
-                this.lineHovered.style.setProperty('--pn-hover-opacity', '0');
-        }, 500);
-    }
-    connectedCallback() {
-        this.mo = new MutationObserver(() => {
-            forceUpdate(this.hostElement);
-            this.setValue();
-            this.rerender();
-        });
-        this.mo.observe(this.hostElement, { subtree: true, childList: true });
-    }
-    disconnectedCallback() {
-        this.mo?.disconnect();
-    }
-    async componentWillLoad() {
-        this.isMenu = this.hostElement.slot === 'menu';
-        if (this.language === null)
-            await awaitTopbar(this.hostElement);
-    }
-    componentDidRender() {
-        this.setValue();
-        this.rerender();
-    }
-    getRect(element) {
-        return element.getBoundingClientRect();
-    }
-    activateTab(element) {
-        this.styleLines(element, true);
-        this.styleLines(element, false);
-    }
-    styleLines(element, active = false) {
-        const tabListCoords = this.getRect(this.tabListEl);
-        const scrollOffset = this.tabListEl.scrollLeft;
-        const line = this.getRect(element);
-        const width = line.width;
-        const offset = line.left + scrollOffset - tabListCoords.left;
-        const cssVar = active ? 'active' : 'hover';
-        const prop = active ? 'lineActive' : 'lineHovered';
-        this[prop].style.setProperty(`--pn-${cssVar}-width`, `${width}px`);
-        this[prop].style.setProperty(`--pn-${cssVar}-offset`, `${offset}px`);
-        this[prop].style.setProperty(`--pn-${cssVar}-opacity`, '1');
-    }
-    scrollIndicators() {
-        const { scrollWidth, scrollLeft } = this.tabListEl;
-        const { clientWidth } = this.hostElement;
-        this.showScrollArrows = scrollWidth > clientWidth;
-        this.arrowLeft = this.showScrollArrows && scrollLeft > 0;
-        this.arrowRight = this.showScrollArrows && clientWidth + 16 + scrollLeft < scrollWidth;
-    }
-    scroll({ right = false } = {}) {
-        const tabList = this.tabListEl;
-        const { scrollLeft, clientWidth } = tabList;
-        let left = scrollLeft;
-        // The width of the scroll arrow is 32px, so we remove that from this calculation so the scroll
-        const scrollAmount = clientWidth - 64;
-        if (right)
-            left += scrollAmount;
-        else
-            left -= scrollAmount;
-        tabList.scrollTo({
-            left,
-            behavior: 'smooth',
-        });
-    }
-    translate(prop) {
-        return translations?.[prop]?.[this.language || en];
-    }
-    render() {
-        return (h(Host, { key: '6c0a55da9a5f47da80c354655ba13d26e0756f32' }, h("nav", { key: 'ed335244410bfbd153eef5c6ef9a96351de4381e', class: "pn-tablist", role: this.isMenu ? null : 'tablist', "aria-label": this.label, "data-stacked": this.stackedicons, "data-small": !this.isMenu && this.small, "data-large": this.isMenu, "data-scroll": this.showScrollArrows, ref: el => (this.tabListEl = el) }, h("slot", { key: 'b5b3805e055b6d34210f48d8398ccf45b37401bf' }), h("div", { key: '87604cabaf29fc16e333a39ba2a2a787e0bfd155', class: "pn-tablist-line" }, h("div", { key: '7864ef28c0c48e8068b1a755c02c79809b9df6f7', ref: el => (this.lineActive = el), class: "pn-tablist-line-item pn-tablist-line-active" }), h("div", { key: '74f2c32c59b42f56e452fe2f196dbff71e81e23c', ref: el => (this.lineHovered = el), class: "pn-tablist-line-item pn-tablist-line-hovered" }))), h("div", { key: '730e0637fc2f89905c841a3d5229e861ee0cad94', class: "pn-tablist-scroll" }, h("pn-button", { key: 'dc4ce80ec1b8d78f2ebe0d023f298355702744df', class: "pn-tablist-arrow", "data-show": this.arrowLeft, onClick: () => this.scroll(), noTab: true, appearance: "light", variant: "outlined", icon: chevron_left, iconOnly: true, arialabel: this.translate('LEFT'), small: true }), h("pn-button", { key: '41df40a5e43ccca507a483a2a776dc116225d351', class: "pn-tablist-arrow", "data-show": this.arrowRight, onClick: () => this.scroll({ right: true }), noTab: true, appearance: "light", variant: "outlined", icon: chevron_right, iconOnly: true, arialabel: this.translate('RIGHT'), small: true }))));
-    }
-    static get watchers() { return {
-        "value": ["setValue"],
-        "showScrollArrows": ["scrollHandler"]
-    }; }
-    static get style() { return pnTablistCss; }
-}, [772, "pn-tablist", {
-        "label": [1],
-        "value": [1537],
-        "small": [4],
-        "stackedicons": [4],
-        "language": [1],
-        "showScrollArrows": [32],
-        "arrowLeft": [32],
-        "arrowRight": [32]
-    }, [[0, "setActiveTab", "setActiveTabHandler"], [9, "resize", "rerender"], [0, "tabEnter", "handleEnter"], [0, "tabLeave", "handleLeave"]], {
-        "value": ["setValue"],
-        "showScrollArrows": ["scrollHandler"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-tablist", "pn-button", "pn-icon", "pn-spinner"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-tablist":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnTablist$1);
-            }
-            break;
-        case "pn-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "pn-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PnTablist = PnTablist$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnTablist, defineCustomElement };
-//# sourceMappingURL=pn-tablist.js.map
-
-//# sourceMappingURL=pn-tablist.js.map
+import{transformTag as t,proxyCustomElement as i,HTMLElement as a,createEvent as e,forceUpdate as s,h as n,Host as l}from"@stencil/core/internal/client";import{a as r,c as o}from"./chevron_right.js";import{k as c,e as p}from"./helpers.js";import{d as b}from"./pn-button2.js";import{d}from"./pn-icon2.js";import{d as h}from"./pn-spinner2.js";var m={LEFT:{sv:"Bläddra åt vänster",en:"Scroll to the left",da:"Rul til venstre",fi:"Vieritä vasemmalle",no:"Rull til venstre"},RIGHT:{sv:"Bläddra åt höger",en:"Scroll to the right",da:"Rul til højre",fi:"Vieritä oikealle",no:"Rull til høyre"}};const u=i(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.tabchange=e(this,"tabchange",7)}mo;isMenu=!1;isTabHovered=!1;tabListEl;lineActive;lineHovered;tabElement;get hostElement(){return this}showScrollArrows=!1;arrowLeft=!1;arrowRight=!1;label;value;small;stackedicons=!1;language=null;tabchange;setValue(){Array.from(this.hostElement.querySelectorAll(""+t("pn-tab"))).forEach((t=>{t.activeTab=this.value}))}scrollHandler(){this.showScrollArrows?this.tabListEl.addEventListener("scroll",this.scrollIndicators.bind(this)):this.tabListEl.removeEventListener("scroll",this.scrollIndicators)}setActiveTabHandler({detail:t}){this.tabElement=t.el,requestAnimationFrame((()=>this.activateTab(t.el))),this.value!==t.val&&(this.value=t.val,this.tabchange.emit(this.value),this.tabElement.querySelector(".pn-tab").focus())}rerender(){requestAnimationFrame((()=>{this.scrollIndicators(),this.isTabHovered=!1}))}handleEnter(t){this.isTabHovered=!0,this.styleLines(t.target)}handleLeave(){this.isTabHovered=!1,setTimeout((()=>{this.isTabHovered||this.lineHovered.style.setProperty("--pn-hover-opacity","0")}),500)}connectedCallback(){this.mo=new MutationObserver((()=>{s(this.hostElement),this.setValue(),this.rerender()})),this.mo.observe(this.hostElement,{subtree:!0,childList:!0})}disconnectedCallback(){this.mo?.disconnect()}async componentWillLoad(){this.isMenu="menu"===this.hostElement.slot,null===this.language&&await c(this.hostElement)}componentDidRender(){this.setValue(),this.rerender()}getRect(t){return t.getBoundingClientRect()}activateTab(t){this.styleLines(t,!0),this.styleLines(t,!1)}styleLines(t,i=!1){const a=this.getRect(this.tabListEl),e=this.tabListEl.scrollLeft,s=this.getRect(t),n=s.left+e-a.left,l=i?"active":"hover",r=i?"lineActive":"lineHovered";this[r].style.setProperty(`--pn-${l}-width`,s.width+"px"),this[r].style.setProperty(`--pn-${l}-offset`,n+"px"),this[r].style.setProperty(`--pn-${l}-opacity`,"1")}scrollIndicators(){const{scrollWidth:t,scrollLeft:i}=this.tabListEl,{clientWidth:a}=this.hostElement;this.showScrollArrows=t>a,this.arrowLeft=this.showScrollArrows&&i>0,this.arrowRight=this.showScrollArrows&&a+16+i<t}scroll({right:t=!1}={}){const i=this.tabListEl,{scrollLeft:a,clientWidth:e}=i;let s=a;const n=e-64;t?s+=n:s-=n,i.scrollTo({left:s,behavior:"smooth"})}translate(t){return m?.[t]?.[this.language||p]}render(){return n(l,{key:"41730f7c2c9bf8dcd0094e3485daaef03d32077d"},n("nav",{key:"671968d8fc09799313c5cc84182c0f574c4c32c2",class:"pn-tablist",role:this.isMenu?null:"tablist","aria-label":this.label,"data-stacked":this.stackedicons,"data-small":!this.isMenu&&this.small,"data-large":this.isMenu,"data-scroll":this.showScrollArrows,ref:t=>this.tabListEl=t},n("slot",{key:"9a29c7b0b2be65f13f0c54782f95381b44184928"}),n("div",{key:"5c7d7811e65c236592cbc86ccb36a1f4b9c2d83f",class:"pn-tablist-line"},n("div",{key:"fa070fd0ad1bd2baaaaedcd83d3a184f9acd8775",ref:t=>this.lineActive=t,class:"pn-tablist-line-item pn-tablist-line-active"}),n("div",{key:"f1d81e3ba4363412d5f35cae105766fbb77ba31e",ref:t=>this.lineHovered=t,class:"pn-tablist-line-item pn-tablist-line-hovered"}))),n("div",{key:"14d644cb2ae344966b8056422ce52966fb06058b",class:"pn-tablist-scroll"},n("pn-button",{key:"f8c8f0f36459b6415208679196ed15fb9cd482d2",class:"pn-tablist-arrow","data-show":this.arrowLeft,onClick:()=>this.scroll(),noTab:!0,appearance:"light",variant:"outlined",icon:r,iconOnly:!0,arialabel:this.translate("LEFT"),small:!0}),n("pn-button",{key:"588b9a9619087bd05a9d359b139240d054431848",class:"pn-tablist-arrow","data-show":this.arrowRight,onClick:()=>this.scroll({right:!0}),noTab:!0,appearance:"light",variant:"outlined",icon:o,iconOnly:!0,arialabel:this.translate("RIGHT"),small:!0})))}static get watchers(){return{value:[{setValue:0}],showScrollArrows:[{scrollHandler:0}]}}static get style(){return`${t("pn-tablist")}{width:100%;min-width:0;position:relative;border-bottom:0.0625em solid #d3cecb;display:block}${t("pn-tablist")} .pn-tablist,${t("pn-tablist")} ol,${t("pn-tablist")} ul{display:flex;width:100%;flex-direction:row;gap:1em;position:relative;list-style:none;padding:0;margin:0}${t("pn-tablist")} .pn-tablist[data-stacked] .pn-tab,${t("pn-tablist")} ol[data-stacked] .pn-tab,${t("pn-tablist")} ul[data-stacked] .pn-tab{margin:0.5em 0.25em 0.75em;gap:0.25em;flex-direction:column}${t("pn-tablist")} .pn-tablist[data-small] .pn-tab,${t("pn-tablist")} ol[data-small] .pn-tab,${t("pn-tablist")} ul[data-small] .pn-tab{margin:0.25em 0.25em 0.75em}${t("pn-tablist")} .pn-tablist[data-small] .pn-tab>*:not(${t("pn-icon")}),${t("pn-tablist")} ol[data-small] .pn-tab>*:not(${t("pn-icon")}),${t("pn-tablist")} ul[data-small] .pn-tab>*:not(${t("pn-icon")}){font-size:0.875em}${t("pn-tablist")} .pn-tablist[data-large] .pn-tab>*:not(${t("pn-icon")}),${t("pn-tablist")} ol[data-large] .pn-tab>*:not(${t("pn-icon")}),${t("pn-tablist")} ul[data-large] .pn-tab>*:not(${t("pn-icon")}){font-size:1.25em}${t("pn-tablist")} .pn-tablist[data-scroll],${t("pn-tablist")} ol[data-scroll],${t("pn-tablist")} ul[data-scroll]{overflow-y:hidden;overflow-x:auto;scroll-snap-type:x mandatory}${t("pn-tablist")} .pn-tablist::-webkit-scrollbar,${t("pn-tablist")} ol::-webkit-scrollbar,${t("pn-tablist")} ul::-webkit-scrollbar{display:none}${t("pn-tablist")} .pn-tablist-line{height:0.25em;position:absolute;bottom:0}${t("pn-tablist")} .pn-tablist-line-item{position:absolute;width:100%;height:inherit;border-radius:0.25em 0.25em 0 0;transform-origin:left center;opacity:0;transition-property:transform, opacity, width;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tablist")} .pn-tablist-line-item{transition-duration:0s;transition-delay:0s}}${t("pn-tablist")} .pn-tablist-line-active{z-index:1;background-color:#005d92;width:var(--pn-active-width);transform:translateX(var(--pn-active-offset));opacity:var(--pn-active-opacity)}${t("pn-tablist")} .pn-tablist-line-hovered{background-color:#00a0d6;width:var(--pn-hover-width);transform:translateX(var(--pn-hover-offset));opacity:var(--pn-hover-opacity)}${t("pn-tablist")} .pn-tablist-scroll{position:absolute;top:50%;left:0;right:0;pointer-events:none;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;z-index:1;height:100%}${t("pn-tablist")} .pn-tablist-arrow{pointer-events:all;transform:scaleY(0);opacity:0;visibility:hidden;transition-property:transform, opacity, visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tablist")} .pn-tablist-arrow{transition-duration:0s;transition-delay:0s}}${t("pn-tablist")} .pn-tablist-arrow[data-show]{opacity:1;visibility:visible;transform:scaleY(1)}`}},[772,"pn-tablist",{label:[1],value:[1537],small:[4],stackedicons:[4],language:[1],showScrollArrows:[32],arrowLeft:[32],arrowRight:[32]},[[0,"setActiveTab","setActiveTabHandler"],[9,"resize","rerender"],[0,"tabEnter","handleEnter"],[0,"tabLeave","handleLeave"]],{value:[{setValue:0}],showScrollArrows:[{scrollHandler:0}]}]),f=u,v=function(){"undefined"!=typeof customElements&&["pn-tablist","pn-button","pn-icon","pn-spinner"].forEach((i=>{switch(i){case"pn-tablist":customElements.get(t(t(i)))||customElements.define(t(t(i)),u);break;case"pn-button":customElements.get(t(t(i)))||b();break;case"pn-icon":customElements.get(t(t(i)))||d();break;case"pn-spinner":customElements.get(t(t(i)))||h()}}))};export{f as PnTablist,v as defineCustomElement}

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

@@ -2,88 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './pn-icon2.js';
-
-const pnTagCss = "pn-tag{display:inline-block}pn-tag .pn-tag{display:inline-flex;flex-direction:row;gap:0.5em;justify-content:center;align-items:center;border-radius:0.5em;padding:0.5em 1em}pn-tag .pn-tag[data-icon]{padding-left:0.75em}pn-tag .pn-tag{background-color:rgba(142, 221, 249, 0.3);color:#0d234b}pn-tag .pn-tag[data-dark]{background-color:#8eddf9}pn-tag .pn-tag pn-icon .pn-icon-svg path{fill:#0d234b}pn-tag .pn-tag-label{line-height:1.5em;font-weight:400}pn-tag .pn-tag{}pn-tag .pn-tag[data-xsmall]{padding:0 0.5em}pn-tag .pn-tag[data-xsmall] .pn-tag-label{font-size:0.875em;line-height:1.715em}pn-tag .pn-tag{}pn-tag .pn-tag[data-small]{padding:0.125em 0.5em}pn-tag .pn-tag[data-small] .pn-tag-label{font-size:0.875em;line-height:1.715em}pn-tag .pn-tag[data-small][data-icon]{padding-left:0.5em}pn-tag .pn-tag{}pn-tag .pn-tag[data-large]{padding:0.75em 1.25em}pn-tag .pn-tag{}pn-tag .pn-tag[data-appearance=discrete]{background-color:rgba(211, 206, 203, 0.3);color:#2d2013}pn-tag .pn-tag[data-appearance=discrete][data-dark]{background-color:#d3cecb}pn-tag .pn-tag[data-appearance=discrete] pn-icon .pn-icon-svg path{fill:#2d2013}pn-tag .pn-tag[data-appearance=positive]{background-color:rgba(171, 227, 187, 0.3);color:#002f24}pn-tag .pn-tag[data-appearance=positive][data-dark]{background-color:#abe3bb}pn-tag .pn-tag[data-appearance=positive] pn-icon .pn-icon-svg path{fill:#002f24}pn-tag .pn-tag[data-appearance=warning]{background-color:rgba(255, 200, 163, 0.3);color:#99290a}pn-tag .pn-tag[data-appearance=warning][data-dark]{background-color:#ffc8a3}pn-tag .pn-tag[data-appearance=warning] pn-icon .pn-icon-svg path{fill:#99290a}pn-tag .pn-tag[data-appearance=error]{background-color:rgba(251, 194, 193, 0.3);color:#a70707}pn-tag .pn-tag[data-appearance=error][data-dark]{background-color:#fbc2c1}pn-tag .pn-tag[data-appearance=error] pn-icon .pn-icon-svg path{fill:#a70707}pn-tag .pn-tag{}";
-
-const PnTag$1 = /*@__PURE__*/ proxyCustomElement(class PnTag extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    /** The label of the tag. */
-    label;
-    /**
-     * Select icon from out `pn-design-assets` list. Works with any SVG content.
-     *
-     * **Please note**: Can not be used with the `xsmall` prop due to the small size.
-     *
-     * @see {@link https://portal.postnord.com/web-components/?path=/docs/docs-assets--docs Get started with PostNord assets.}
-     */
-    icon;
-    /** Set tag appearance: `discrete`, `positive`, `warning` & `error`. @category Visual */
-    appearance = '';
-    /**
-     * Set darker background-color on the tag.
-     *
-     * This is intended for better tag visibility on colored background.
-     *
-     * @category Visual
-     * @deprecated Will be removed in v8.0.0
-     */
-    dark = false;
-    /** Set larger tag. @category Size */
-    large = false;
-    /** Set smaller tag. @category Size */
-    small = false;
-    /** Set extra small tag. @since v7.11.0 @category Size */
-    xsmall = false;
-    componentWillRender() {
-        if (!!this.icon && this.xsmall)
-            console.warn(`pn-tag: Icon was not rendered because tag size is set to xsmall`);
-    }
-    showIcon() {
-        return !!this.icon && !this.xsmall;
-    }
-    render() {
-        return (h(Host, { key: '25baf496ed00dccf72f5eb7cb8f8623814c67452' }, h("div", { key: 'beee7ac3dc693e1c8cb5653e2fce3af01566c4e9', class: "pn-tag", "data-appearance": this.appearance, "data-icon": !!this.icon, "data-dark": this.dark, "data-small": this.small, "data-xsmall": this.xsmall, "data-large": this.large }, this.showIcon() && h("pn-icon", { key: '64f9df4e0906c8897045a08edce51f8015a1be56', icon: this.icon }), h("span", { key: 'a43a26db7b5e7b28eb49f8ac76eab9ebd8b7ee25', class: "pn-tag-label" }, this.label))));
-    }
-    static get style() { return pnTagCss; }
-}, [768, "pn-tag", {
-        "label": [1],
-        "icon": [1],
-        "appearance": [1],
-        "dark": [4],
-        "large": [4],
-        "small": [4],
-        "xsmall": [4]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-tag", "pn-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-tag":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnTag$1);
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PnTag = PnTag$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnTag, defineCustomElement };
-//# sourceMappingURL=pn-tag.js.map
-
-//# sourceMappingURL=pn-tag.js.map
+import{transformTag as a,proxyCustomElement as n,HTMLElement as t,h as e,Host as p}from"@stencil/core/internal/client";import{d as c}from"./pn-icon2.js";const g=n(class extends t{constructor(a){super(),!1!==a&&this.__registerHost()}label;icon;appearance="";dark=!1;large=!1;small=!1;xsmall=!1;componentWillRender(){this.icon&&this.xsmall&&console.warn("pn-tag: Icon was not rendered because tag size is set to xsmall")}showIcon(){return!!this.icon&&!this.xsmall}render(){return e(p,{key:"25baf496ed00dccf72f5eb7cb8f8623814c67452"},e("div",{key:"beee7ac3dc693e1c8cb5653e2fce3af01566c4e9",class:"pn-tag","data-appearance":this.appearance,"data-icon":!!this.icon,"data-dark":this.dark,"data-small":this.small,"data-xsmall":this.xsmall,"data-large":this.large},this.showIcon()&&e("pn-icon",{key:"64f9df4e0906c8897045a08edce51f8015a1be56",icon:this.icon}),e("span",{key:"a43a26db7b5e7b28eb49f8ac76eab9ebd8b7ee25",class:"pn-tag-label"},this.label)))}static get style(){return`${a("pn-tag")}{display:inline-block}${a("pn-tag")} .pn-tag{display:inline-flex;flex-direction:row;gap:0.5em;justify-content:center;align-items:center;border-radius:0.5em;padding:0.5em 1em}${a("pn-tag")} .pn-tag[data-icon]{padding-left:0.75em}${a("pn-tag")} .pn-tag{background-color:rgba(142, 221, 249, 0.3);color:#0d234b}${a("pn-tag")} .pn-tag[data-dark]{background-color:#8eddf9}${a("pn-tag")} .pn-tag ${a("pn-icon")} .pn-icon-svg path{fill:#0d234b}${a("pn-tag")} .pn-tag-label{line-height:1.5em;font-weight:400}${a("pn-tag")} .pn-tag{}${a("pn-tag")} .pn-tag[data-xsmall]{padding:0 0.5em}${a("pn-tag")} .pn-tag[data-xsmall] .pn-tag-label{font-size:0.875em;line-height:1.715em}${a("pn-tag")} .pn-tag{}${a("pn-tag")} .pn-tag[data-small]{padding:0.125em 0.5em}${a("pn-tag")} .pn-tag[data-small] .pn-tag-label{font-size:0.875em;line-height:1.715em}${a("pn-tag")} .pn-tag[data-small][data-icon]{padding-left:0.5em}${a("pn-tag")} .pn-tag{}${a("pn-tag")} .pn-tag[data-large]{padding:0.75em 1.25em}${a("pn-tag")} .pn-tag{}${a("pn-tag")} .pn-tag[data-appearance=discrete]{background-color:rgba(211, 206, 203, 0.3);color:#2d2013}${a("pn-tag")} .pn-tag[data-appearance=discrete][data-dark]{background-color:#d3cecb}${a("pn-tag")} .pn-tag[data-appearance=discrete] ${a("pn-icon")} .pn-icon-svg path{fill:#2d2013}${a("pn-tag")} .pn-tag[data-appearance=positive]{background-color:rgba(171, 227, 187, 0.3);color:#002f24}${a("pn-tag")} .pn-tag[data-appearance=positive][data-dark]{background-color:#abe3bb}${a("pn-tag")} .pn-tag[data-appearance=positive] ${a("pn-icon")} .pn-icon-svg path{fill:#002f24}${a("pn-tag")} .pn-tag[data-appearance=warning]{background-color:rgba(255, 200, 163, 0.3);color:#99290a}${a("pn-tag")} .pn-tag[data-appearance=warning][data-dark]{background-color:#ffc8a3}${a("pn-tag")} .pn-tag[data-appearance=warning] ${a("pn-icon")} .pn-icon-svg path{fill:#99290a}${a("pn-tag")} .pn-tag[data-appearance=error]{background-color:rgba(251, 194, 193, 0.3);color:#a70707}${a("pn-tag")} .pn-tag[data-appearance=error][data-dark]{background-color:#fbc2c1}${a("pn-tag")} .pn-tag[data-appearance=error] ${a("pn-icon")} .pn-icon-svg path{fill:#a70707}${a("pn-tag")} .pn-tag{}`}},[512,"pn-tag",{label:[1],icon:[1],appearance:[1],dark:[4],large:[4],small:[4],xsmall:[4]}]),r=g,o=function(){"undefined"!=typeof customElements&&["pn-tag","pn-icon"].forEach((n=>{switch(n){case"pn-tag":customElements.get(a(a(n)))||customElements.define(a(a(n)),g);break;case"pn-icon":customElements.get(a(a(n)))||c()}}))};export{r as PnTag,o as defineCustomElement}

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

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

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

@@ -2,81 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$1 } from './pn-icon2.js';
-
-const pnTextLinkCss = "pn-text-link{display:inline}pn-text-link .pn-text-link{border-radius:0.25em;color:#005d92;font-weight:500;text-decoration:underline;font-size:1em;transition-property:color, outline-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-text-link .pn-text-link{transition-duration:0s;transition-delay:0s}}pn-text-link .pn-text-link{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-text-link .pn-text-link:focus-visible{outline-color:#005d92}pn-text-link .pn-text-link:hover{color:#0d234b;text-decoration-color:#0d234b}pn-text-link .pn-text-link[data-icon]{display:inline-flex;gap:0.25em;align-items:center;text-decoration-color:transparent;padding:0.1em;border-radius:0.5em}pn-text-link .pn-text-link[data-icon] .pn-icon-svg path{fill:#005d92}pn-text-link .pn-text-link[data-icon]:hover{text-decoration-color:#0d234b}pn-text-link .pn-text-link[data-icon]:hover .pn-icon-svg path,pn-text-link .pn-text-link[data-icon]:focus-visible .pn-icon-svg path{fill:#0d234b}pn-text-link .pn-text-link[data-icon][data-icon-left]{flex-direction:row-reverse}pn-text-link .pn-text-link[data-light]{color:#ffffff}pn-text-link .pn-text-link[data-light]:focus-visible{outline-color:#ffffff}pn-text-link .pn-text-link[data-light]:hover{text-decoration-color:#ffffff}pn-text-link .pn-text-link[data-light][data-icon] pn-icon .pn-icon-svg path{fill:#ffffff}";
-
-const PnTextLink = /*@__PURE__*/ proxyCustomElement(class PnTextLink extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    get hostElement() { return this; }
-    /** The link text. @since v7.5.0 */
-    label;
-    /** The URL string. */
-    href;
-    /** Use the light version of the link. @category Visual */
-    light = false;
-    /** SVG content of the icon. @category Visual */
-    icon;
-    /** Align the icon on the left. @category Visual */
-    leftIcon = false;
-    /** Treat the link as a download link. @category Link attributes */
-    download;
-    /** Set the hreflang of the URL destination. @category Link attributes */
-    hreflang;
-    /** Link media. @category Link attributes */
-    media;
-    /** Set referrerpolicy on the link. @category Link attributes */
-    referrerpolicy;
-    /** Set the rel of the link. @category Link attributes */
-    rel = 'noopener noreferrer';
-    /** Set the target of the link. @category Link attributes */
-    target;
-    /** Set a unique html ID of the a element. @category Link attributes */
-    linkid;
-    render() {
-        return (h("a", { key: '994b0df66917c87f0895140cae16ba63f6117e3c', id: this.linkid, class: "pn-text-link", href: this.href, rel: this.rel, target: this.target, download: this.download, hreflang: this.hreflang, media: this.media, referrerPolicy: this.referrerpolicy, "data-icon": !!this.icon, "data-icon-left": this.leftIcon, "data-light": this.light }, this.label, h("slot", { key: 'ac9eddfdf2c264ea299feb9165235199e5fdfc42' }), this.icon && h("pn-icon", { key: 'fcc7a45698c4a77c2b4c280cf91b0fcd2837a5c0', icon: this.icon })));
-    }
-    static get style() { return pnTextLinkCss; }
-}, [772, "pn-text-link", {
-        "label": [1],
-        "href": [1],
-        "light": [4],
-        "icon": [1],
-        "leftIcon": [4, "left-icon"],
-        "download": [1],
-        "hreflang": [1],
-        "media": [1],
-        "referrerpolicy": [1],
-        "rel": [1],
-        "target": [1],
-        "linkid": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-text-link", "pn-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-text-link":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnTextLink);
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { PnTextLink as P, defineCustomElement as d };
-//# sourceMappingURL=pn-text-link2.js.map
-
-//# sourceMappingURL=pn-text-link2.js.map
+import{transformTag as t,proxyCustomElement as n,HTMLElement as e,h as i}from"@stencil/core/internal/client";import{d as o}from"./pn-icon2.js";const l=n(class extends e{constructor(t){super(),!1!==t&&this.__registerHost()}get hostElement(){return this}label;href;light=!1;icon;leftIcon=!1;download;hreflang;media;referrerpolicy;rel="noopener noreferrer";target;linkid;render(){return i("a",{key:"9b582d89de39e3465ec6a1675f60f46d39b3c558",id:this.linkid,class:"pn-text-link",href:this.href,rel:this.rel,target:this.target,download:this.download,hreflang:this.hreflang,media:this.media,referrerPolicy:this.referrerpolicy,"data-icon":!!this.icon,"data-icon-left":this.leftIcon,"data-light":this.light},this.label,i("slot",{key:"106155241d1f15bdaf19a74c8dc440372849a6f4"}),this.icon&&i("pn-icon",{key:"d6d197a8632a13b6a1e385504b6727cfb9c418fd",icon:this.icon}))}static get style(){return`${t("pn-text-link")}{display:inline}${t("pn-text-link")} .pn-text-link{border-radius:0.25em;color:#005d92;font-weight:500;text-decoration:underline;font-size:1em;transition-property:color, outline-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-text-link")} .pn-text-link{transition-duration:0s;transition-delay:0s}}${t("pn-text-link")} .pn-text-link{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-text-link")} .pn-text-link:focus-visible{outline-color:#005d92}${t("pn-text-link")} .pn-text-link:hover{color:#0d234b;text-decoration-color:#0d234b}${t("pn-text-link")} .pn-text-link[data-icon]{display:inline-flex;gap:0.25em;align-items:center;text-decoration-color:transparent;padding:0.1em;border-radius:0.5em}${t("pn-text-link")} .pn-text-link[data-icon] .pn-icon-svg path{fill:#005d92}${t("pn-text-link")} .pn-text-link[data-icon]:hover{text-decoration-color:#0d234b}${t("pn-text-link")} .pn-text-link[data-icon]:hover .pn-icon-svg path,${t("pn-text-link")} .pn-text-link[data-icon]:focus-visible .pn-icon-svg path{fill:#0d234b}${t("pn-text-link")} .pn-text-link[data-icon][data-icon-left]{flex-direction:row-reverse}${t("pn-text-link")} .pn-text-link[data-light]{color:#ffffff}${t("pn-text-link")} .pn-text-link[data-light]:focus-visible{outline-color:#ffffff}${t("pn-text-link")} .pn-text-link[data-light]:hover{text-decoration-color:#ffffff}${t("pn-text-link")} .pn-text-link[data-light][data-icon] ${t("pn-icon")} .pn-icon-svg path{fill:#ffffff}`}},[772,"pn-text-link",{label:[1],href:[1],light:[4],icon:[1],leftIcon:[4,"left-icon"],download:[1],hreflang:[1],media:[1],referrerpolicy:[1],rel:[1],target:[1],linkid:[1]}]);function r(){"undefined"!=typeof customElements&&["pn-text-link","pn-icon"].forEach((n=>{switch(n){case"pn-text-link":customElements.get(t(t(n)))||customElements.define(t(t(n)),l);break;case"pn-icon":customElements.get(t(t(n)))||o()}}))}export{l as P,r as d}

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

@@ -2,123 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { u as uuidv4 } from './helpers.js';
-
-const pnTextareaCss = "pn-textarea{display:inline-flex;flex-direction:column}pn-textarea .pn-textarea-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 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-textarea .pn-textarea-label{transition-duration:0s;transition-delay:0s}}pn-textarea .pn-textarea-label>span{font-size:0.875em}pn-textarea .pn-textarea-text{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}pn-textarea .pn-textarea-text>pn-icon{margin-right:0.25em}pn-textarea .pn-textarea-element{color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}pn-textarea .pn-textarea-element:-webkit-autofill,pn-textarea .pn-textarea-element:-webkit-autofill:hover,pn-textarea .pn-textarea-element:-webkit-autofill:focus,pn-textarea .pn-textarea-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}pn-textarea .pn-textarea-element{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-textarea .pn-textarea-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}pn-textarea .pn-textarea-element{transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-textarea .pn-textarea-element{transition-duration:0s;transition-delay:0s}}pn-textarea .pn-textarea-element::placeholder{color:#5e554a;font-weight:normal}pn-textarea .pn-textarea-element:hover{border-color:#005d92}pn-textarea .pn-textarea-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-textarea .pn-textarea-element::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}pn-textarea .pn-textarea-element::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}pn-textarea .pn-textarea-element::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}pn-textarea .pn-textarea-element::-webkit-scrollbar-thumb:hover{background-color:#5e554a}pn-textarea .pn-textarea-element::-webkit-scrollbar-corner,pn-textarea .pn-textarea-element::-webkit-scrollbar-button{display:none}pn-textarea .pn-textarea-element{width:100%;resize:none}pn-textarea .pn-textarea-element:read-only{border-color:#ffffff}pn-textarea .pn-textarea-element::-webkit-resizer{background-image:url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M7%2017L17%207M12%2017L17%2012%22%20stroke%3D%22%23005D92%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center}pn-textarea .pn-textarea[data-valid]>.pn-textarea-label{color:#005e41}pn-textarea .pn-textarea[data-valid]>.pn-textarea-element{border-color:#005e41}pn-textarea .pn-textarea[data-valid]>.pn-textarea-element:hover{border-color:#002f24}pn-textarea .pn-textarea[data-valid]>.pn-textarea-element:focus-visible{background-color:#ffffff;border-color:#005e41;outline-color:#005e41}pn-textarea .pn-textarea[data-error]>.pn-textarea-label{color:#a70707}pn-textarea .pn-textarea[data-error]>.pn-textarea-element{border-color:#a70707}pn-textarea .pn-textarea[data-error]>.pn-textarea-element:hover{border-color:#500715}pn-textarea .pn-textarea[data-error]>.pn-textarea-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}pn-textarea .pn-textarea[data-error]>.pn-textarea-text[role=alert]{color:#a70707}pn-textarea .pn-textarea[data-resize]>.pn-textarea-element{resize:vertical}";
-
-const PnTextarea$1 = /*@__PURE__*/ proxyCustomElement(class PnTextarea extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    id = `pn-textarea-${uuidv4()}`;
-    idHelper = `${this.id}-text`;
-    get hostElement() { return this; }
-    /** The textarea content */
-    content;
-    /** The label describing the textarea. */
-    label;
-    /** The textarea content, do not provide slotted content. */
-    value = '';
-    /** Helper text that will appear underneath the textarea. Will be overwritten if you set an `error` string */
-    helpertext;
-    /** A unique ID connecting the element to the label. @category HTML Textarea */
-    textareaid = this.id;
-    /** HTML name. @category HTML Textarea */
-    name;
-    /** Set the associated form. @category HTML Textarea*/
-    form;
-    /** Set the row count for the textarea. @category HTML Textarea */
-    rows = 2;
-    /** Set the col count for the textarea. @category HTML Textarea */
-    cols = 20;
-    /** Set the wrap control. @category HTML Textarea */
-    wrap = 'soft';
-    /** The maximum number of characters the user should be able to add, also adds a visible counter. @category HTML Textarea */
-    maxlength;
-    /** Allow the browser to autocomplete the textarea. @category HTML Textarea */
-    autocomplete = 'off';
-    /** Allow the browser to spellcheck the textarea. @category HTML Textarea */
-    spellcheck = false;
-    /** Placeholder for the textarea. @category HTML Textarea */
-    placeholder;
-    /** Allow the user to resize the textarea vertically. Handle width in your own layout. @category HTML Textarea */
-    resize = false;
-    /** Make the textarea required. @category HTML Textarea */
-    required = false;
-    /** Set the textarea as `valid`, will make the Label and focus rings green. @category State */
-    valid = false;
-    /** Set the textarea as `invalid`, will make the Label and focus rings red. @category State */
-    invalid = false;
-    /** Same as `invalid`, but will display the string as an error message under the textarea. @category State */
-    error;
-    /** Disable the textarea. @category State */
-    disabled = false;
-    /** Make the textarea readonly. @category State */
-    readonly = false;
-    componentWillLoad() {
-        if (this.textareaid !== this.id) {
-            this.idHelper = `${this.textareaid}-helper`;
-        }
-    }
-    setVal(event) {
-        const value = event.target.value;
-        this.value = value;
-    }
-    hasError() {
-        return this.invalid || !!this.error;
-    }
-    hasMessage() {
-        return !!(this.helpertext?.length || this.error?.length);
-    }
-    render() {
-        return (h(Host, { key: '69dc09d91e49cc9344ff8d152d861336a7d2153a' }, h("div", { key: '6397773faa3794f273a5c898d1e5b4e3b6c2ba39', class: "pn-textarea", "data-valid": this.valid, "data-error": this.hasError(), "data-resize": this.resize }, h("label", { key: 'dfcf4990fe2724375617189c80928bedc97fef11', class: "pn-textarea-label", htmlFor: this.textareaid }, h("span", { key: 'b9eeb630a4af4adbbdc9bd30ab6c4f0119fcee31' }, this.label), this.maxlength >= 1 && h("span", { key: '930e81ce06e851c34559a66c130213e7d50730b0' }, `${this.value?.length || 0}/${this.maxlength}`)), h("textarea", { key: '073f25c41332dc145f8776f104222e480a444f54', class: "pn-textarea-element", id: this.textareaid, name: this.name, rows: this.rows, cols: this.cols, wrap: this.wrap, autocomplete: this.autocomplete, spellcheck: this.spellcheck, placeholder: this.placeholder, maxlength: this.maxlength, required: this.required, disabled: this.disabled, readonly: this.readonly, "aria-describedby": this.hasMessage() ? this.idHelper : null, "aria-invalid": this.hasError().toString(), onInput: e => this.setVal(e), value: this.value }), this.hasMessage() && (h("p", { key: '4e132b86726785d959a141c054eca0fb756250f2', id: this.idHelper, class: "pn-textarea-text", role: this.error?.length ? 'alert' : null }, h("span", { key: '987eadf4acc627e90a70ea9375e814d1ae11e16b' }, this.error || this.helpertext))))));
-    }
-    static get style() { return pnTextareaCss; }
-}, [768, "pn-textarea", {
-        "label": [1],
-        "value": [1],
-        "helpertext": [1],
-        "textareaid": [1],
-        "name": [1],
-        "form": [1],
-        "rows": [2],
-        "cols": [2],
-        "wrap": [1],
-        "maxlength": [2],
-        "autocomplete": [1],
-        "spellcheck": [4],
-        "placeholder": [1],
-        "resize": [4],
-        "required": [4],
-        "valid": [4],
-        "invalid": [4],
-        "error": [1],
-        "disabled": [4],
-        "readonly": [4],
-        "content": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-textarea"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-textarea":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnTextarea$1);
-            }
-            break;
-    } });
-}
-
-const PnTextarea = PnTextarea$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnTextarea, defineCustomElement };
-//# sourceMappingURL=pn-textarea.js.map
-
-//# sourceMappingURL=pn-textarea.js.map
+import{transformTag as e,proxyCustomElement as t,HTMLElement as a,h as r,Host as n}from"@stencil/core/internal/client";import{u as o}from"./helpers.js";const l=t(class extends a{constructor(e){super(),!1!==e&&this.__registerHost()}id="pn-textarea-"+o();idHelper=this.id+"-text";get hostElement(){return this}label;value="";helpertext;compact=!1;textareaid=this.id;name;form;rows=2;cols=20;wrap="soft";maxlength;autocomplete="off";spellcheck=!1;placeholder;resize=!1;required=!1;valid=!1;invalid=!1;error;disabled=!1;readonly=!1;handleId(){this.textareaid!==this.id&&(this.idHelper=this.getId()+"-helper")}setVal(e){this.value=e.target.value}hasError(){return this.invalid||!!this.error}hasMessage(){return!(!this.helpertext?.length&&!this.error?.length)}getId(){return this.textareaid||this.id}renderLabel(){return r("label",{class:"pn-textarea-label",htmlFor:this.getId(),"data-compact":this.compact},r("span",null,this.label),this.maxlength>=1&&r("span",null,`${this.value?.length||0}/${this.maxlength}`))}render(){return r(n,{key:"890e6c29daa489bdf44588c91457e71172e40dae"},r("div",{key:"c35d279a237c2411faebd0823d3a03f8212c54d0",class:"pn-textarea","data-valid":this.valid,"data-error":this.hasError(),"data-resize":this.resize},!this.compact&&this.renderLabel(),r("textarea",{key:"f2358babec0d5eb02e1d3ba5c21c33998e9582b3",class:"pn-textarea-element",id:this.getId(),name:this.name,rows:this.rows,cols:this.cols,wrap:this.wrap,autocomplete:this.autocomplete,spellcheck:this.spellcheck,placeholder:this.compact?this.placeholder||" ":this.placeholder,maxlength:this.maxlength,value:this.value,required:this.required,disabled:this.disabled,readonly:this.readonly,"aria-describedby":this.hasMessage()?this.idHelper:null,"aria-invalid":""+this.hasError(),"data-compact":this.compact,onInput:e=>this.setVal(e)}),this.compact&&this.renderLabel(),this.hasMessage()&&r("p",{key:"ccdaed7f958b1ef07da159973690ddd86be791f3",id:this.idHelper,class:"pn-textarea-text",role:this.error?.length?"alert":null},r("span",{key:"62d9b78ed5370629548e67001689b3d14d40deaa"},this.error||this.helpertext))))}static get watchers(){return{textareaid:[{handleId:1}]}}static get style(){return`${e("pn-textarea")}{display:inline-flex;flex-direction:column}${e("pn-textarea")} .pn-textarea{position:relative}${e("pn-textarea")} .pn-textarea-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 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-textarea")} .pn-textarea-label{transition-duration:0s;transition-delay:0s}}${e("pn-textarea")} .pn-textarea-label[data-compact]{position:absolute;top:1.5625em;left:calc(var(--pn-input-offset-left, 0px) + 0.75em + 0.0625em);margin:0;pointer-events:none;align-items:center;height:1.5em;max-width:calc(100% - (var(--pn-input-offset-left, 0px) + 0.75em) - (var(--pn-input-offset-right, 0px) + 0.75em));transform:translateY(-50%) scale(1) translateZ(0);transform-origin:0 0;transition-delay:0.2s}${e("pn-textarea")} .pn-textarea-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${e("pn-textarea")} .pn-textarea-label>span{font-size:0.875em}${e("pn-textarea")} .pn-textarea-label[data-compact]>span{background-color:#ffffff;color:#2d2013}${e("pn-textarea")} .pn-textarea-text{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-textarea")} .pn-textarea-text>${e("pn-icon")}{margin-right:0.25em}${e("pn-textarea")} .pn-textarea-element{width:100%;resize:none;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${e("pn-textarea")} .pn-textarea-element:-webkit-autofill,${e("pn-textarea")} .pn-textarea-element:-webkit-autofill:hover,${e("pn-textarea")} .pn-textarea-element:-webkit-autofill:focus,${e("pn-textarea")} .pn-textarea-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${e("pn-textarea")} .pn-textarea-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${e("pn-textarea")} .pn-textarea-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${e("pn-textarea")} .pn-textarea-element{transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-textarea")} .pn-textarea-element{transition-duration:0s;transition-delay:0s}}${e("pn-textarea")} .pn-textarea-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${e("pn-textarea")} .pn-textarea-element[data-compact]::placeholder{color:transparent}${e("pn-textarea")} .pn-textarea-element[data-compact]:focus+.pn-textarea-label,${e("pn-textarea")} .pn-textarea-element[data-compact]:not(:placeholder-shown)+.pn-textarea-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${e("pn-textarea")} .pn-textarea-element::placeholder{color:#5e554a;font-weight:normal}${e("pn-textarea")} .pn-textarea-element:hover{border-color:#005d92}${e("pn-textarea")} .pn-textarea-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-textarea")} .pn-textarea-element::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${e("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${e("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${e("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${e("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-corner,${e("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-button{display:none}${e("pn-textarea")} .pn-textarea-element:read-only{border-color:#ffffff}${e("pn-textarea")} .pn-textarea-element:disabled+.pn-textarea-label>span{background-color:#f3f2f2}${e("pn-textarea")} .pn-textarea-element::-webkit-resizer{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M7%2017L17%207M12%2017L17%2012%22%20stroke%3D%22%23005D92%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:center}${e("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-label{color:#005e41}${e("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element{border-color:#005e41}${e("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:hover{border-color:#002f24}${e("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:focus-visible{background-color:#ffffff;border-color:#005e41;outline-color:#005e41}${e("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:-webkit-autofill,${e("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:-webkit-autofill:hover,${e("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:-webkit-autofill:focus,${e("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #edfbf3 inset;-webkit-text-fill-color:#2d2013}${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-label{color:#a70707}${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element{border-color:#a70707}${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:hover{border-color:#500715}${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:-webkit-autofill,${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:-webkit-autofill:hover,${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:-webkit-autofill:focus,${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-text[role=alert]{color:#a70707}${e("pn-textarea")} .pn-textarea[data-resize]>.pn-textarea-element{resize:vertical}`}},[512,"pn-textarea",{label:[1],value:[1025],helpertext:[1],compact:[4],textareaid:[1],name:[1],form:[1],rows:[2],cols:[2],wrap:[1],maxlength:[2],autocomplete:[1],spellcheck:[4],placeholder:[1],resize:[4],required:[4],valid:[4],invalid:[4],error:[1],disabled:[4],readonly:[4]},void 0,{textareaid:[{handleId:1}]}]),i=l,p=function(){"undefined"!=typeof customElements&&["pn-textarea"].forEach((t=>{"pn-textarea"===t&&(customElements.get(e(e(t)))||customElements.define(e(e(t)),l))}))};export{i as PnTextarea,p as defineCustomElement}