@postnord/pn-marketweb-components 4.3.5 → 4.3.7

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-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}
+import{transformTag as e,proxyCustomElement as t,HTMLElement as a,h as r,Host as n}from"@stencil/core/internal/client";import{u as l}from"./helpers.js";const i=t(class extends a{constructor(e){super(),!1!==e&&this.__registerHost()}id="pn-textarea-"+l();idHelper=this.id+"-text";idError=this.id+"-error";get hostElement(){return this}label;helpertext;value="";name;placeholder;form;rows=2;cols=20;wrap="soft";maxlength;autocomplete="off";spellcheck=!1;resize=!1;required=!1;disabled=!1;readonly=!1;compact=!1;valid=!1;invalid=!1;error;pnId;pnAriaLabel;pnAriaLabelledby;textareaid;handleId(){this.idHelper=this.getId()+"-helpertext",this.idError=this.getId()+"-error"}setVal(e){this.value=e.target.value}hasHelperText(){return this.helpertext?.length>0||this.checkSlottedHelper()}hasErrorMessage(){return this.error?.length>0||this.checkSlottedError()}hasError(){return this.hasErrorMessage()||this.invalid||this.checkSlottedError()}checkSlottedHelper(){return!!this.hostElement.querySelector("[slot=helpertext]")}checkSlottedError(){return!!this.hostElement.querySelector("[slot=error]")}hideHelpertext(){return this.hasErrorMessage()||!this.hasHelperText()}hideError(){return!this.hasErrorMessage()}getId(){return this.pnId||this.textareaid||this.id}displayLabel(){return!!this.label}getAriaLabel(){return this.displayLabel()||this.pnAriaLabelledby?null:this.pnAriaLabel}getAriaLabelledby(){return this.displayLabel()||this.pnAriaLabel?null:this.pnAriaLabelledby}getAriaDescribedby(){const e=[];return this.hasErrorMessage()?e.push(this.idError):this.hasHelperText()&&e.push(this.idHelper),e.length?e.join(" "):null}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:"30ea927b4d57c041164f7ccfd052121d3723591b"},r("div",{key:"2c927468a5159cd2544af2bd351df2b45a5abf55",class:"pn-textarea","data-valid":this.valid,"data-error":this.hasError(),"data-resize":this.resize},!this.compact&&this.renderLabel(),r("textarea",{key:"2f933bd8e3477c3f7010d676f4fde0f49e2ebc9e",class:"pn-textarea-element",id:this.getId(),value:this.value,name:this.name,placeholder:this.compact?this.placeholder||" ":this.placeholder,rows:this.rows,cols:this.cols,wrap:this.wrap,autocomplete:this.autocomplete,spellcheck:this.spellcheck,maxlength:this.maxlength,required:this.required,disabled:this.disabled,readonly:this.readonly,"aria-label":this.getAriaLabel(),"aria-labelledby":this.getAriaLabelledby(),"aria-describedby":this.getAriaDescribedby(),"aria-invalid":""+this.hasError(),"data-compact":this.compact,onInput:e=>this.setVal(e)}),this.compact&&this.renderLabel(),r("p",{key:"368de1a346ca5161b8e6da6170453cd68605e92c",id:this.idHelper,class:"pn-textarea-text",hidden:this.hideHelpertext()},r("span",{key:"055d5ea03484c61e64bb674bad2a8bc5bffb253e"},this.helpertext),r("slot",{key:"3782f2b397e46f3dd8e0d4253b1071b1d98ffb65",name:"helpertext"})),r("p",{key:"7a092d28df13950e4fba9e4df46c8e6176a70ae3",id:this.idError,class:"pn-textarea-text",role:"alert",hidden:this.hideError()},r("span",{key:"49ef6664c21f2a4281dd8f8919cfa0d66d7554fb"},this.error),r("slot",{key:"51819bfeff00a85706a4c60de35926e65e3cd22d",name:"error"}))))}static get watchers(){return{textareaid:[{handleId:0}],pnId:[{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;text-align:left}${e("pn-textarea")} .pn-textarea-text[role=alert]{color:#a70707}${e("pn-textarea")} .pn-textarea-text[hidden]{display:none}${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-resize]>.pn-textarea-element{resize:vertical}`}},[772,"pn-textarea",{label:[1],helpertext:[1],value:[1025],name:[1],placeholder:[1],form:[1],rows:[2],cols:[2],wrap:[1],maxlength:[2],autocomplete:[1],spellcheck:[4],resize:[4],required:[4],disabled:[4],readonly:[4],compact:[4],valid:[4],invalid:[4],error:[1],pnId:[1,"pn-id"],pnAriaLabel:[1,"pn-aria-label"],pnAriaLabelledby:[1,"pn-aria-labelledby"],textareaid:[1]},void 0,{textareaid:[{handleId:0}],pnId:[{handleId:1}]}]),o=i,s=function(){"undefined"!=typeof customElements&&["pn-textarea"].forEach((t=>{"pn-textarea"===t&&(customElements.get(e(e(t)))||customElements.define(e(e(t)),i))}))};export{o as PnTextarea,s as defineCustomElement}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as t,proxyCustomElement as e,HTMLElement as i,createEvent as n,forceUpdate as l,h as o,Host as a}from"@stencil/core/internal/client";import{o as r}from"./open_in_new.js";import{o as s}from"./helpers.js";import{d as c}from"./pn-icon2.js";import{d as p}from"./pn-illustration2.js";const d=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.pnTile=n(this,"pnTile",7)}mo;tile;illustrationSlot;visibleOutline=!1;get hostElement(){return this}label;text;url;target;rel="noopener noreferrer";illustration;icon;horizontal=!1;pnTile;connectedCallback(){this.mo=new MutationObserver((()=>l(this.hostElement))),this.mo.observe(this.hostElement,{subtree:!0,childList:!0})}disconnectedCallback(){this.mo?.disconnect()}isExternal(){return"_blank"===this.target}showIcon(){return!!this.icon&&!this.showSlotIllustration()}showPropIllustration(){return!!this.illustration&&!this.showSlotIllustration()}showSlotIllustration(){return!!this.illustrationSlot?.querySelector('[slot="illustration"]')}showImage(){return this.showIcon()||this.showPropIllustration()||this.showSlotIllustration()}handleFocus({type:t,target:e}){this.visibleOutline="focus"===t&&e.matches(":focus-visible")}clickHandler(t){s(t,this.tile),this.pnTile.emit({click:t})}render(){return o(a,{key:"eb3815f93d4355e80969c381cadd22789b1a5b05"},o("div",{key:"a8dad16643d664975ee27f3fc3e0249730662efb",class:"pn-tile","data-horizontal":this.horizontal,"data-href":!!this.url,"data-focus":this.visibleOutline,ref:t=>this.tile=t},o("div",{key:"474e4c248a0ddfab550be16dcff172fc01f84e0a",class:"pn-tile-illustration","data-circle":!!this.url,"data-icon":this.showIcon(),role:"presentation",hidden:!this.showImage()},this.showPropIllustration()?o("pn-illustration",{illustration:this.illustration}):this.showIcon()&&o("pn-icon",{color:"blue700",icon:this.icon}),o("div",{key:"2d5962def32bc5d7a3432cd5062d0a164f167454",class:"pn-tile-illustration-slot",hidden:!this.showSlotIllustration(),ref:t=>this.illustrationSlot=t},o("slot",{key:"ceb86fe161d9256249fdc65c83199a0231899e9b",name:"illustration"}))),o("div",{key:"74ad199309a7ae8f6c576bc2c97c958f364dc868",class:"pn-tile-text"},o("h3",{key:"eb6e12a3496d11c3ecb79bf122cbfd604b8081ef",class:"pn-tile-title"},this.url?o("a",{class:"pn-tile-link",href:this.url,target:this.target,rel:!this.rel&&this.isExternal()?"noopener noreferrer":this.rel,onClick:t=>this.clickHandler(t),onFocus:t=>this.handleFocus(t),onBlur:t=>this.handleFocus(t)},this.label):this.label,this.isExternal()&&o("pn-icon",{key:"13c2495d9a94dc9d3f530543e47549683b985c59",icon:r,small:!0,color:"blue700"})),o("div",{key:"4ce12374c5bbdf54809d8b1d2f99cb6efbc01266",class:"pn-tile-slot"},!!this.text&&o("p",{key:"2cdbc99beff7480c18f561b2f16f72953367b43f",class:"pn-tile-paragraph"},this.text),o("slot",{key:"f786d7b65a270acb9be13ce0cfb1d2e3bfe34b8a"})))))}static get style(){return`${t("pn-tile")}{position:relative;display:block}${t("pn-tile")} .pn-tile{position:relative;overflow:hidden;word-break:break-word;text-align:center;border-radius:0.5em;padding:clamp(0.75em, 3vw, 1.5em);height:100%;color:#2d2013;background-color:#ffffff;box-shadow:0em 0.0625em 0.125em 0em rgba(20, 20, 20, 0.11), 0em 0.1875em 0.4375em 0em rgba(0, 0, 0, 0.13);display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:flex-start;gap:clamp(1em, 5vw, 1.5em);outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:box-shadow, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tile")} .pn-tile{transition-duration:0s;transition-delay:0s}}${t("pn-tile")} .pn-tile .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${t("pn-tile")} .pn-tile[data-horizontal]{text-align:left;flex-direction:row;flex-wrap:nowrap;gap:clamp(1em, 5vw, 1.5em)}${t("pn-tile")} .pn-tile[data-horizontal] .pn-tile-illustration[data-circle]:before{clip-path:ellipse(0% 100% at 0% 50%)}${t("pn-tile")} .pn-tile[data-horizontal] .pn-tile-text{flex-grow:2}${t("pn-tile")} .pn-tile[data-href][data-focus]{outline-color:#005d92;box-shadow:0em 0em 0em 0em rgba(20, 20, 20, 0.11), 0em 0em 0em 0em rgba(0, 0, 0, 0.13)}${t("pn-tile")} .pn-tile[data-href]:hover{background-color:rgba(183, 235, 252, 0.3)}${t("pn-tile")} .pn-tile[data-href]:hover .pn-tile-illustration[data-circle]:before,${t("pn-tile")} .pn-tile[data-href]:focus-within .pn-tile-illustration[data-circle]:before{clip-path:ellipse(100% 50% at 50% -25%)}${t("pn-tile")} .pn-tile[data-href]:hover[data-horizontal] .pn-tile-illustration[data-circle]:before,${t("pn-tile")} .pn-tile[data-href]:focus-within[data-horizontal] .pn-tile-illustration[data-circle]:before{clip-path:ellipse(50% 100% at -25% 50%)}${t("pn-tile")} .pn-tile[data-href]:hover .pn-tile-link,${t("pn-tile")} .pn-tile[data-href]:focus-within .pn-tile-link{color:#0d234b;text-decoration-color:#0d234b}${t("pn-tile")} .pn-tile[data-href]:hover ${t("pn-icon")} .pn-icon-svg path,${t("pn-tile")} .pn-tile[data-href]:focus-within ${t("pn-icon")} .pn-icon-svg path{fill:#0d234b}${t("pn-tile")} .pn-tile-illustration{z-index:2;flex:1 1;max-width:7.5em;max-height:7.5em}${t("pn-tile")} .pn-tile-illustration[data-icon]{flex:0 0}${t("pn-tile")} .pn-tile-illustration[data-icon] ${t("pn-icon")}{padding:1em;border-radius:50%;background-color:#e0f8ff}${t("pn-tile")} .pn-tile-illustration[data-icon] ${t("pn-icon")}>svg{font-size:2em}${t("pn-tile")} .pn-tile-illustration-slot{display:block;height:100%;width:100%}${t("pn-tile")} .pn-tile-illustration[data-circle]:before{content:"";position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%;background-color:rgba(183, 235, 252, 0.7);background-color:rgba(183, 235, 252, 0.7);clip-path:ellipse(100% 0% at 50% 0%);transition-property:clip-path;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tile")} .pn-tile-illustration[data-circle]:before{transition-duration:0s;transition-delay:0s}}${t("pn-tile")} .pn-tile-text{z-index:3;flex:1 1;display:flex;flex-direction:column;gap:0.5em}${t("pn-tile")} .pn-tile-link{cursor:pointer;color:#005d92;text-decoration:underline;text-decoration-color:transparent;-webkit-tap-highlight-color:transparent;transition-property:color, text-decoration-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tile")} .pn-tile-link{transition-duration:0s;transition-delay:0s}}${t("pn-tile")} .pn-tile-link:focus{outline:0;text-decoration-color:#0d234b;color:#0d234b}${t("pn-tile")} .pn-tile-link:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}${t("pn-tile")} .pn-tile-title{font-family:inherit;font-weight:700;font-size:clamp(1.25em, 3vw, 1.5em);margin:0em}${t("pn-tile")} .pn-tile-title ${t("pn-icon")}{margin-left:0.25em;vertical-align:middle}${t("pn-tile")} .pn-tile-slot{font-weight:400;color:#5e554a;display:flex;flex-direction:column;gap:0.25em}${t("pn-tile")} .pn-tile-paragraph,${t("pn-tile")} .pn-tile p{font-size:0.875em}${t("pn-tile")} .pn-tile-paragraph:last-child,${t("pn-tile")} .pn-tile p:last-child{margin:0em}`}},[772,"pn-tile",{label:[1],text:[1],url:[1],target:[1],rel:[1],illustration:[1],icon:[1],horizontal:[4],visibleOutline:[32]}]),h=d,f=function(){"undefined"!=typeof customElements&&["pn-tile","pn-icon","pn-illustration"].forEach((e=>{switch(e){case"pn-tile":customElements.get(t(t(e)))||customElements.define(t(t(e)),d);break;case"pn-icon":customElements.get(t(t(e)))||c();break;case"pn-illustration":customElements.get(t(t(e)))||p()}}))};export{h as PnTile,f as defineCustomElement}
+import{transformTag as t,proxyCustomElement as e,HTMLElement as i,createEvent as n,forceUpdate as l,h as o,Host as a}from"@stencil/core/internal/client";import{o as r}from"./open_in_new.js";import{o as s}from"./helpers.js";import{d as c}from"./pn-icon2.js";import{d as p}from"./pn-illustration2.js";const d=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.pnTile=n(this,"pnTile",7)}mo;tile;illustrationSlot;visibleOutline=!1;get hostElement(){return this}label;text;url;target;rel="noopener noreferrer";illustration;icon;horizontal=!1;pnTile;connectedCallback(){this.mo=new MutationObserver((()=>l(this.hostElement))),this.mo.observe(this.hostElement,{subtree:!0,childList:!0})}disconnectedCallback(){this.mo?.disconnect()}isExternal(){return"_blank"===this.target}showIcon(){return!!this.icon&&!this.showSlotIllustration()}showPropIllustration(){return!!this.illustration&&!this.showSlotIllustration()}showSlotIllustration(){return!!this.illustrationSlot?.querySelector('[slot="illustration"]')}showImage(){return this.showIcon()||this.showPropIllustration()||this.showSlotIllustration()}handleFocus({type:t,target:e}){this.visibleOutline="focus"===t&&e.matches(":focus-visible")}clickHandler(t){s(t,this.tile),this.pnTile.emit({click:t})}render(){return o(a,{key:"a29b0f244288bdff245e275a9ab3d11bec87a476"},o("div",{key:"beed67096e5bd7448416b5c0422596f2e4d61be9",class:"pn-tile","data-horizontal":this.horizontal,"data-href":!!this.url,"data-focus":this.visibleOutline,ref:t=>this.tile=t},o("div",{key:"458a7df237ec2fc27c33c3f3306d880f5ba6ab11",class:"pn-tile-illustration","data-circle":!!this.url,"data-icon":this.showIcon(),role:"presentation",hidden:!this.showImage()},this.showPropIllustration()?o("pn-illustration",{illustration:this.illustration}):this.showIcon()&&o("pn-icon",{color:"blue700",icon:this.icon}),o("div",{key:"bd70e9eb9e29cd48d29170e05f279019005d564a",class:"pn-tile-illustration-slot",hidden:!this.showSlotIllustration(),ref:t=>this.illustrationSlot=t},o("slot",{key:"c22dee0ca1663e47fbbc2625af6060ebc1fec4d5",name:"illustration"}))),o("div",{key:"0dbb257acaf45f22a16f4bd4616d1a862c281ee9",class:"pn-tile-text"},o("h3",{key:"c2459327b7ac973e8f7f4c372c6457d70db4bfde",class:"pn-tile-title"},this.url?o("a",{class:"pn-tile-link",href:this.url,target:this.target,rel:!this.rel&&this.isExternal()?"noopener noreferrer":this.rel,onClick:t=>this.clickHandler(t),onFocus:t=>this.handleFocus(t),onBlur:t=>this.handleFocus(t)},this.label):this.label,this.isExternal()&&o("pn-icon",{key:"661061f5e03c7b658967e1c9e306857b730203b0",icon:r,small:!0,color:"blue700"})),o("div",{key:"8c51850bc85b2223dcd67c81d8f15a78ec9ef3cc",class:"pn-tile-slot"},!!this.text&&o("p",{key:"9759d3fd1a5a5219dc22a31ab874eab2475e14d8",class:"pn-tile-paragraph"},this.text),o("slot",{key:"b3e0e1442bfb5cc003e696be617c879919facbbc"})))))}static get style(){return`${t("pn-tile")}{position:relative;display:block}${t("pn-tile")} .pn-tile{position:relative;overflow:hidden;word-break:break-word;text-align:center;border-radius:0.5em;padding:clamp(0.75em, 3vw, 1.5em);height:100%;color:#2d2013;background-color:#ffffff;box-shadow:0em 0.0625em 0.125em 0em rgba(20, 20, 20, 0.11), 0em 0.1875em 0.4375em 0em rgba(0, 0, 0, 0.13);display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:flex-start;gap:clamp(1em, 5vw, 1.5em);outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:box-shadow, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tile")} .pn-tile{transition-duration:0s;transition-delay:0s}}${t("pn-tile")} .pn-tile .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${t("pn-tile")} .pn-tile[data-horizontal]{text-align:left;flex-direction:row;flex-wrap:nowrap;gap:clamp(1em, 5vw, 1.5em)}${t("pn-tile")} .pn-tile[data-horizontal] .pn-tile-illustration[data-circle]:before{clip-path:ellipse(0% 100% at 0% 50%)}${t("pn-tile")} .pn-tile[data-horizontal] .pn-tile-text{flex-grow:2}${t("pn-tile")} .pn-tile[data-href][data-focus]{outline-color:#005d92;box-shadow:0em 0em 0em 0em rgba(20, 20, 20, 0.11), 0em 0em 0em 0em rgba(0, 0, 0, 0.13)}${t("pn-tile")} .pn-tile[data-href]:hover{background-color:rgba(183, 235, 252, 0.3)}${t("pn-tile")} .pn-tile[data-href]:hover .pn-tile-illustration[data-circle]:before,${t("pn-tile")} .pn-tile[data-href]:focus-within .pn-tile-illustration[data-circle]:before{clip-path:ellipse(100% 50% at 50% -25%)}${t("pn-tile")} .pn-tile[data-href]:hover[data-horizontal] .pn-tile-illustration[data-circle]:before,${t("pn-tile")} .pn-tile[data-href]:focus-within[data-horizontal] .pn-tile-illustration[data-circle]:before{clip-path:ellipse(50% 100% at -25% 50%)}${t("pn-tile")} .pn-tile[data-href]:hover .pn-tile-link,${t("pn-tile")} .pn-tile[data-href]:focus-within .pn-tile-link{color:#0d234b;text-decoration-color:#0d234b}${t("pn-tile")} .pn-tile[data-href]:hover ${t("pn-icon")} .pn-icon-svg path,${t("pn-tile")} .pn-tile[data-href]:focus-within ${t("pn-icon")} .pn-icon-svg path{fill:#0d234b}${t("pn-tile")} .pn-tile-illustration{z-index:2;flex:1 1;max-width:7.5em;max-height:7.5em}${t("pn-tile")} .pn-tile-illustration[data-icon]{flex:0 0}${t("pn-tile")} .pn-tile-illustration[data-icon] ${t("pn-icon")}{padding:1em;border-radius:50%;background-color:#e0f8ff}${t("pn-tile")} .pn-tile-illustration[data-icon] ${t("pn-icon")}>svg{font-size:2em}${t("pn-tile")} .pn-tile-illustration-slot{display:block;height:100%;width:100%}${t("pn-tile")} .pn-tile-illustration[data-circle]:before{content:"";position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%;background-color:rgba(183, 235, 252, 0.7);background-color:rgba(183, 235, 252, 0.7);clip-path:ellipse(100% 0% at 50% 0%);transition-property:clip-path;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tile")} .pn-tile-illustration[data-circle]:before{transition-duration:0s;transition-delay:0s}}${t("pn-tile")} .pn-tile-text{z-index:3;flex:1 1;display:flex;flex-direction:column;gap:0.5em}${t("pn-tile")} .pn-tile-link{cursor:pointer;color:#005d92;text-decoration:underline;text-decoration-color:transparent;-webkit-tap-highlight-color:transparent;transition-property:color, text-decoration-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tile")} .pn-tile-link{transition-duration:0s;transition-delay:0s}}${t("pn-tile")} .pn-tile-link:focus{outline:0;text-decoration-color:#0d234b;color:#0d234b}${t("pn-tile")} .pn-tile-link:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}${t("pn-tile")} .pn-tile-title{font-family:inherit;font-weight:700;font-size:clamp(1.25em, 3vw, 1.5em);margin:0em}${t("pn-tile")} .pn-tile-title ${t("pn-icon")}{margin-left:0.25em;vertical-align:middle}${t("pn-tile")} .pn-tile-slot{font-weight:400;color:#5e554a;display:flex;flex-direction:column;gap:0.25em}${t("pn-tile")} .pn-tile-paragraph,${t("pn-tile")} .pn-tile p{font-size:0.875em}${t("pn-tile")} .pn-tile-paragraph:last-child,${t("pn-tile")} .pn-tile p:last-child{margin:0em}`}},[772,"pn-tile",{label:[1],text:[1],url:[1],target:[1],rel:[1],illustration:[1],icon:[1],horizontal:[4],visibleOutline:[32]}]),h=d,f=function(){"undefined"!=typeof customElements&&["pn-tile","pn-icon","pn-illustration"].forEach((e=>{switch(e){case"pn-tile":customElements.get(t(t(e)))||customElements.define(t(t(e)),d);break;case"pn-icon":customElements.get(t(t(e)))||c();break;case"pn-illustration":customElements.get(t(t(e)))||p()}}))};export{h as PnTile,f as defineCustomElement}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as t,proxyCustomElement as a,Mixin as o,createEvent as e,h as n,Host as s}from"@stencil/core/internal/client";import{a as i}from"./index2.js";import{k as r,o as p,e as c}from"./helpers.js";import{a as l}from"./alert_exclamation_circle.js";import{a as d}from"./alert_info_circle.js";import{c as u}from"./check_circle.js";import{c as h}from"./close.js";import{d as f}from"./pn-icon2.js";import{d as b}from"./pn-illustration2.js";const m={HIDE:{sv:"Stäng meddelande",en:"Dismiss message",da:"Afvis besked",fi:"Hylkää viesti",no:"Avvis meldingen"}},g=a(class extends(o(i)){constructor(t){super(!1),!1!==t&&this.__registerHost(),this.close=e(this,"close",7),this.hidden=e(this,"hidden",7)}toast;button;get hostElement(){return this}hasSlottedContent=!1;heading="";text="";toastId;appearance;temporary=!1;icon;illustration;hide=!1;closable=!1;language=null;handleHide(){this.hostElement.style.overflow="hidden",requestAnimationFrame((()=>this.toggleToastVisibility()))}close;hidden;async componentWillLoad(){this.hide&&(this.hostElement.style.height="0",this.hostElement.style.overflow="hidden"),this.hasSlottedContent=!!this.hostElement.textContent,null===this.language&&await r(this.hostElement)}componentDidLoad(){!this.heading||this.text||this.hasSlottedContent||console.warn("The %s prop is only available if you use the %s prop or slotted content.","heading","text")}toggleToastVisibility(){this.hide?this.closeDropdown(this.hostElement,this.toast.clientHeight):this.openDropdown(this.hostElement,this.toast.clientHeight)}handleClick(t){this.hide=!0,this.close.emit(this.hide),p(t,this.toast)}getIcon(){return this.illustration?"":this.icon?this.icon:"success"===this.appearance?u:"warning"===this.appearance?'<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12.874 2.514a1 1 0 0 0-1.748 0l-10 18A1 1 0 0 0 2 22h20a1 1 0 0 0 .874-1.486zM12 5.06 20.3 20H3.7zm-1.375 4.936a1.38 1.38 0 1 1 2.75 0l-.292 3.509a1.087 1.087 0 0 1-2.166 0zM12 15.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3" clip-rule="evenodd"/></svg>':"error"===this.appearance?l:d}getRole(){return"error"===this.appearance?"alert":"status"}showIcon(){return!this.illustration}showIllustration(){return!this.showIcon()}showTitle(){return(this.hasSlottedContent||!!this.text)&&!!this.heading}translate(t){return m?.[t]?.[this.language||c]||t}hideToast(){return this.hide&&!this.isMoving()}render(){return n(s,{key:"5c3fee615535723fb1f866ad2e5bc955289abe6e"},n("div",{key:"4de5c242cce6bd2e77c355030c53e1161495f2aa",id:this.toastId,class:"pn-toast",role:this.getRole(),"data-appearance":this.appearance,"data-temporary":this.temporary,"data-hide":this.hideToast(),ref:t=>this.toast=t},this.showIcon()&&n("pn-icon",{key:"69348635c02e8108503dbf588e65d522405fd08f",class:"pn-toast-icon",icon:this.getIcon()}),n("div",{key:"a4a2bbd367ff30405a305e4c56da05575e2765bd",class:"pn-toast-content"},this.showTitle()&&n("h4",{key:"0e847dd42ed4d0e1c518b69519f27f23d491e11c",class:"pn-toast-heading"},this.heading),this.text&&n("p",{key:"c423eb0872592844f4d583839b438442f65c1ab9",class:"pn-toast-text"},this.text),n("slot",{key:"4e743ba3362107a4b5f585e12b2ad2879ffef5bf"})),this.showIllustration()&&n("pn-illustration",{key:"1330548a89218ee19a73ff83f94df180a7b2cc98",illustration:this.illustration,width:"5.5em",height:"5.5em"}),this.closable&&n("button",{key:"321c57a9103fa0b4abedd2429420f94faa9fd5fc",class:"pn-toast-button",type:"button","aria-label":this.translate("HIDE"),onClick:t=>this.handleClick(t),ref:t=>this.button=t},n("pn-icon",{key:"3d68d08f2cca035840acd466accbe0d66da65153",icon:h}))))}static get watchers(){return{hide:[{handleHide:0}]}}static get style(){return`${t("pn-toast")}{position:relative;display:block}${t("pn-toast")} .pn-toast{position:relative;color:#2d2013;padding:1em;border-radius:0.5em;outline:none;font-size:1em;font-weight:400;background-color:#e0f8ff;border-color:#005d92;display:flex;align-items:center;gap:0.75em;visibility:visible;transition-property:visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-toast")} .pn-toast{transition-duration:0s;transition-delay:0s}}${t("pn-toast")} .pn-toast .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${t("pn-toast")} .pn-toast[data-hide]{visibility:hidden;transition-delay:0.2s}${t("pn-toast")} .pn-toast-heading{font-size:1em;font-style:normal;font-weight:500;margin:0}${t("pn-toast")} .pn-toast-text{font-size:1em;font-style:normal;font-weight:400;margin:0 0 0.25em 0}${t("pn-toast")} .pn-toast-text:last-child{margin-bottom:0}${t("pn-toast")} .pn-toast-icon .pn-icon-svg path{fill:#2d2013}${t("pn-toast")} .pn-toast-content{display:flex;flex-direction:column;align-self:center;align-items:flex-start;gap:0.25em;margin:0 auto 0 0}${t("pn-toast")} .pn-toast-button{cursor:pointer;border-radius:50%;border:none;background:none;padding:0.25em;font-size:1em;display:flex;align-items:center;justify-content:center;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-toast")} .pn-toast-button{transition-duration:0s;transition-delay:0s}}${t("pn-toast")} .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-toast")} .pn-toast-button:focus-visible{outline-color:#005d92;background-color:#8eddf9}${t("pn-toast")} .pn-toast-button:hover{background-color:#8eddf9}${t("pn-toast")} .pn-toast[data-appearance=success]{background-color:#dcf6e7}${t("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-button:focus-visible{outline-color:#005e41;background-color:#abe3bb}${t("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-button:hover{background-color:#abe3bb}${t("pn-toast")} .pn-toast[data-appearance=success] .pn-ripple{background-color:#005e41}${t("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-icon .pn-icon-svg path{fill:#005e41}${t("pn-toast")} .pn-toast[data-appearance=success][data-temporary]{border-color:#005e41}${t("pn-toast")} .pn-toast[data-appearance=warning]{background-color:#fff1e3}${t("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-button:focus-visible{outline-color:#99290a;background-color:#ffc8a3}${t("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-button:hover{background-color:#ffc8a3}${t("pn-toast")} .pn-toast[data-appearance=warning] .pn-ripple{background-color:#99290a}${t("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-icon .pn-icon-svg path{fill:#99290a}${t("pn-toast")} .pn-toast[data-appearance=warning][data-temporary]{border-color:#ed7123}${t("pn-toast")} .pn-toast[data-appearance=error]{background-color:#fdefee}${t("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-button:focus-visible{outline-color:#a70707;background-color:#fbc2c1}${t("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-button:hover{background-color:#fbc2c1}${t("pn-toast")} .pn-toast[data-appearance=error] .pn-ripple{background-color:#a70707}${t("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-icon .pn-icon-svg path{fill:#a70707}${t("pn-toast")} .pn-toast[data-appearance=error][data-temporary]{border-color:#a70707}${t("pn-toast")} .pn-toast[data-temporary]{border-style:solid;border-width:0.0625em;box-shadow:0 0.125em 0.25em rgba(0, 0, 0, 0.2)}`}},[772,"pn-toast",{heading:[1],text:[1],toastId:[1,"toast-id"],appearance:[1],temporary:[4],icon:[1],illustration:[1],hide:[1540],closable:[4],language:[1025],isClosing:[32],isExpanding:[32],hasSlottedContent:[32]},void 0,{hide:[{handleHide:0}]}]),y=g,k=function(){"undefined"!=typeof customElements&&["pn-toast","pn-icon","pn-illustration"].forEach((a=>{switch(a){case"pn-toast":customElements.get(t(t(a)))||customElements.define(t(t(a)),g);break;case"pn-icon":customElements.get(t(t(a)))||f();break;case"pn-illustration":customElements.get(t(t(a)))||b()}}))};export{y as PnToast,k as defineCustomElement}
+import{transformTag as t,proxyCustomElement as a,Mixin as o,createEvent as e,h as n,Host as s}from"@stencil/core/internal/client";import{a as i}from"./index2.js";import{k as r,o as p,e as c}from"./helpers.js";import{a as l}from"./alert_exclamation_circle.js";import{a as d}from"./alert_info_circle.js";import{c as u}from"./check_circle.js";import{c as h}from"./close.js";import{d as b}from"./pn-icon2.js";import{d as f}from"./pn-illustration2.js";const m={HIDE:{sv:"Stäng meddelande",en:"Dismiss message",da:"Afvis besked",fi:"Hylkää viesti",no:"Avvis meldingen"}},g=a(class extends(o(i)){constructor(t){super(!1),!1!==t&&this.__registerHost(),this.close=e(this,"close",7),this.hidden=e(this,"hidden",7)}toast;button;get hostElement(){return this}hasSlottedContent=!1;heading="";text="";toastId;appearance;temporary=!1;icon;illustration;hide=!1;closable=!1;language=null;handleHide(){this.hostElement.style.overflow="hidden",requestAnimationFrame((()=>this.toggleToastVisibility()))}close;hidden;async componentWillLoad(){this.hide&&(this.hostElement.style.height="0",this.hostElement.style.overflow="hidden"),this.hasSlottedContent=!!this.hostElement.textContent,null===this.language&&await r(this.hostElement)}componentDidLoad(){!this.heading||this.text||this.hasSlottedContent||console.warn("The %s prop is only available if you use the %s prop or slotted content.","heading","text")}toggleToastVisibility(){this.hide?this.closeDropdown(this.hostElement,this.toast.clientHeight):this.openDropdown(this.hostElement,this.toast.clientHeight)}handleClick(t){this.hide=!0,this.close.emit(this.hide),p(t,this.toast)}getIcon(){return this.illustration?"":this.icon?this.icon:"success"===this.appearance?u:"warning"===this.appearance?'<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12.874 2.514a1 1 0 0 0-1.748 0l-10 18A1 1 0 0 0 2 22h20a1 1 0 0 0 .874-1.486zM12 5.06 20.3 20H3.7zm-1.375 4.936a1.38 1.38 0 1 1 2.75 0l-.292 3.509a1.087 1.087 0 0 1-2.166 0zM12 15.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3" clip-rule="evenodd"/></svg>':"error"===this.appearance?l:d}getRole(){return"error"===this.appearance?"alert":"status"}showIcon(){return!this.illustration}showIllustration(){return!this.showIcon()}showTitle(){return(this.hasSlottedContent||!!this.text)&&!!this.heading}translate(t){return m?.[t]?.[this.language||c]||t}hideToast(){return this.hide&&!this.isMoving()}render(){return n(s,{key:"8fc8af6de122bae90d2909840a3d2c412cc3181d"},n("div",{key:"ad45d0c295ea660c6e03f1b98e91294519003886",id:this.toastId,class:"pn-toast",role:this.getRole(),"data-appearance":this.appearance,"data-temporary":this.temporary,"data-hide":this.hideToast(),ref:t=>this.toast=t},this.showIcon()&&n("pn-icon",{key:"7e856fb052f535e72b15044347eb2a20dc141297",class:"pn-toast-icon",icon:this.getIcon()}),n("div",{key:"b8549738d389bb4b3269192c9a6fa606e6500e25",class:"pn-toast-content"},this.showTitle()&&n("h4",{key:"ef243b8a4d842c8583308bd8cd75a3c640ba811a",class:"pn-toast-heading"},this.heading),this.text&&n("p",{key:"7d4a03a243567f881ddaa826959c36cebd84ad00",class:"pn-toast-text"},this.text),n("slot",{key:"1cf28e44d6f37c053b33634529ee0a2d1d7dc58d"})),this.showIllustration()&&n("pn-illustration",{key:"f219657a26c48361d1f31cccf947a13f749f6e7b",illustration:this.illustration,width:"5.5em",height:"5.5em"}),this.closable&&n("button",{key:"1bebf8881b20963d9a611cdcf8e293fb6f035cc7",class:"pn-toast-button",type:"button","aria-label":this.translate("HIDE"),onClick:t=>this.handleClick(t),ref:t=>this.button=t},n("pn-icon",{key:"14b4fee29de5810bd9d04476500e6d806fe3a2eb",icon:h}))))}static get watchers(){return{hide:[{handleHide:0}]}}static get style(){return`${t("pn-toast")}{position:relative;display:block}${t("pn-toast")} .pn-toast{position:relative;color:#2d2013;padding:1em;border-radius:0.5em;outline:none;font-size:1em;font-weight:400;background-color:#e0f8ff;border-color:#005d92;display:flex;align-items:center;gap:0.75em;visibility:visible;transition-property:visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-toast")} .pn-toast{transition-duration:0s;transition-delay:0s}}${t("pn-toast")} .pn-toast .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${t("pn-toast")} .pn-toast[data-hide]{visibility:hidden;transition-delay:0.2s}${t("pn-toast")} .pn-toast-heading{font-size:1em;font-style:normal;font-weight:500;margin:0}${t("pn-toast")} .pn-toast-text{font-size:1em;font-style:normal;font-weight:400;margin:0 0 0.25em 0}${t("pn-toast")} .pn-toast-text:last-child{margin-bottom:0}${t("pn-toast")} .pn-toast-icon .pn-icon-svg path{fill:#2d2013}${t("pn-toast")} .pn-toast-content{display:flex;flex-direction:column;align-self:center;align-items:flex-start;gap:0.25em;margin:0 auto 0 0}${t("pn-toast")} .pn-toast-button{cursor:pointer;border-radius:50%;border:none;background:none;padding:0.25em;font-size:1em;display:flex;align-items:center;justify-content:center;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-toast")} .pn-toast-button{transition-duration:0s;transition-delay:0s}}${t("pn-toast")} .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-toast")} .pn-toast-button:focus-visible{outline-color:#005d92;background-color:#8eddf9}${t("pn-toast")} .pn-toast-button:hover{background-color:#8eddf9}${t("pn-toast")} .pn-toast[data-appearance=success]{background-color:#dcf6e7}${t("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-button:focus-visible{outline-color:#005e41;background-color:#abe3bb}${t("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-button:hover{background-color:#abe3bb}${t("pn-toast")} .pn-toast[data-appearance=success] .pn-ripple{background-color:#005e41}${t("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-icon .pn-icon-svg path{fill:#005e41}${t("pn-toast")} .pn-toast[data-appearance=success][data-temporary]{border-color:#005e41}${t("pn-toast")} .pn-toast[data-appearance=warning]{background-color:#fff1e3}${t("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-button:focus-visible{outline-color:#99290a;background-color:#ffc8a3}${t("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-button:hover{background-color:#ffc8a3}${t("pn-toast")} .pn-toast[data-appearance=warning] .pn-ripple{background-color:#99290a}${t("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-icon .pn-icon-svg path{fill:#99290a}${t("pn-toast")} .pn-toast[data-appearance=warning][data-temporary]{border-color:#ed7123}${t("pn-toast")} .pn-toast[data-appearance=error]{background-color:#fdefee}${t("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-button:focus-visible{outline-color:#a70707;background-color:#fbc2c1}${t("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-button:hover{background-color:#fbc2c1}${t("pn-toast")} .pn-toast[data-appearance=error] .pn-ripple{background-color:#a70707}${t("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-icon .pn-icon-svg path{fill:#a70707}${t("pn-toast")} .pn-toast[data-appearance=error][data-temporary]{border-color:#a70707}${t("pn-toast")} .pn-toast[data-temporary]{border-style:solid;border-width:0.0625em;box-shadow:0 0.125em 0.25em rgba(0, 0, 0, 0.2)}`}},[772,"pn-toast",{heading:[1],text:[1],toastId:[1,"toast-id"],appearance:[1],temporary:[4],icon:[1],illustration:[1],hide:[1540],closable:[4],language:[1025],isClosing:[32],isExpanding:[32],hasSlottedContent:[32]},void 0,{hide:[{handleHide:0}]}]),y=g,k=function(){"undefined"!=typeof customElements&&["pn-toast","pn-icon","pn-illustration"].forEach((a=>{switch(a){case"pn-toast":customElements.get(t(t(a)))||customElements.define(t(t(a)),g);break;case"pn-icon":customElements.get(t(t(a)))||b();break;case"pn-illustration":customElements.get(t(t(a)))||f()}}))};export{y as PnToast,k as defineCustomElement}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as e,proxyCustomElement as t,HTMLElement as n,h as o,Host as i}from"@stencil/core/internal/client";import{u as l}from"./helpers.js";import{d as g}from"./pn-spinner2.js";const s=t(class extends n{constructor(e){super(),!1!==e&&this.__registerHost()}id="pn-toggle-"+l();idHelper=this.id+"-helper";get hostElement(){return this}label;helpertext;checked=!1;toggleid=this.id;name=null;value=null;small=!1;large=!1;disabled=!1;loading=!1;handleHelperId(){this.id!==this.toggleid&&(this.idHelper=this.toggleid+"-helper")}componentWillLoad(){this.handleHelperId()}hasHelpertextProp(){return!!this.helpertext}hasHelpertextSlot(){return!!this.hostElement.querySelector('[slot="helpertext"]')}showHelpertext(){return this.hasHelpertextProp()||this.hasHelpertextSlot()}describedBy(){return this.showHelpertext()?this.idHelper:null}render(){return o(i,{key:"b88bbc2385be79dd584ecee5e53dc89832de49c3"},o("div",{key:"4a413f2b2acf8551dc2852ba0d3a45f4cbf17a4d",class:"pn-toggle"},this.label&&o("div",{key:"944a36f2018335a283092c909af2f37846850eb8",class:"pn-toggle-content"},o("label",{key:"2536eaf65117b1c70d1ec31f17faa41f2a6fced4",htmlFor:this.toggleid,class:"pn-toggle-label"},o("span",{key:"eae8a38d31f6bc05faa9d56c08517f9302be9a3e"},this.label)),o("p",{key:"6173ba384459c406eb98fe4318e080b6cd36031a",id:this.idHelper,class:"pn-toggle-helper",hidden:!this.showHelpertext()},this.hasHelpertextProp()&&o("span",{key:"d4a52d7786e7a63ca3f201c3ad7cb8793e377c12"},this.helpertext),o("slot",{key:"06406382d523b70b8acb094a82794652a4481528",name:"helpertext"}))),o("div",{key:"4676dd88652c903f94d3f887e97841e00bbe09e2",class:"pn-toggle-button","data-small":this.small,"data-large":this.large,"data-loading":this.loading},o("input",{key:"d2656b2f8ff8e74bd4d4c2f1c4791e984ec3e50b",id:this.toggleid,class:"pn-toggle-element",type:"checkbox",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,"aria-describedby":this.describedBy()}),o("div",{key:"93caefd228460120aae22ba48e6c93d6df676fcf",class:"pn-toggle-bg"}),o("div",{key:"03299104835602d126960ad67ab51f94d27cf3c5",class:"pn-toggle-circle"},o("svg",{key:"5f61f589797b3ca97a66cd42deab3065543679d2",class:"pn-toggle-check",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},o("polyline",{key:"d974e5cc198d19cf17e42e0b35097f87d11404a0",points:"4,12 9,17 20,6","stroke-width":"3"})),o("pn-spinner",{key:"6f5c5fb05e0c9fd95b16d45833f50167af22e358",size:1.125})))))}static get watchers(){return{toggleid:[{handleHelperId:0}]}}static get style(){return`${e("pn-toggle-switch")}{display:inline-block;position:relative}${e("pn-toggle-switch")} .pn-toggle{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1em}${e("pn-toggle-switch")} .pn-toggle-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:500;color:#2d2013;margin:0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-label{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle-label>span{font-size:1em}${e("pn-toggle-switch")} .pn-toggle-helper{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${e("pn-toggle-switch")} .pn-toggle-content{flex:1 0}${e("pn-toggle-switch")} .pn-toggle-button{position:relative;font-size:1em;width:3.625em;height:2em;padding:0.1875em;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-button{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle-button{-webkit-tap-highlight-color:transparent}${e("pn-toggle-switch")} .pn-toggle-button[data-small]{width:2.625em;height:1.5em}${e("pn-toggle-switch")} .pn-toggle-button[data-small] .pn-toggle-circle{width:1.125em;height:1.125em}${e("pn-toggle-switch")} .pn-toggle-button[data-small][data-loading]>.pn-toggle-bg{width:1.5em}${e("pn-toggle-switch")} .pn-toggle-button[data-large]{width:4.625em;height:2.5em}${e("pn-toggle-switch")} .pn-toggle-button[data-large] .pn-toggle-circle{width:2.125em;height:2.125em}${e("pn-toggle-switch")} .pn-toggle-button[data-large][data-loading]>.pn-toggle-bg{width:2.5em}${e("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-bg{width:2em}${e("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-circle,${e("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(50%)}${e("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:0}${e("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke-dashoffset:23;transition-delay:0s}${e("pn-toggle-switch")} .pn-toggle-button[data-loading] ${e("pn-spinner")}{opacity:1}${e("pn-toggle-switch")} .pn-toggle-bg{position:absolute;top:0;left:50%;width:100%;height:100%;z-index:0;border-radius:2em;background-color:#969087;transform:translateX(-50%);outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:width, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-bg{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle-circle{position:relative;z-index:1;width:1.625em;height:1.625em;background-color:#ffffff;box-shadow:0 0.25em 0.5em rgba(0, 0, 0, 0.1);border-radius:50%;padding:0.25em;transition-property:transform, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-circle{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle-circle{transform:translateX(0%)}${e("pn-toggle-switch")} .pn-toggle-element{position:absolute;z-index:3;top:0;left:0;cursor:pointer;width:100%;height:100%;opacity:0;margin:0;}${e("pn-toggle-switch")} .pn-toggle-element:focus-visible+.pn-toggle-bg{outline-color:#005d92}${e("pn-toggle-switch")} .pn-toggle-element:hover+.pn-toggle-bg{background-color:#5e554a}${e("pn-toggle-switch")} .pn-toggle-element:hover:checked+.pn-toggle-bg{background-color:#0d234b}${e("pn-toggle-switch")} .pn-toggle-element:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#0d234b}${e("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-bg{background-color:#005d92}${e("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(100%)}${e("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:1}${e("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check polyline{transition-delay:0.2s, 0s;stroke-dashoffset:0}${e("pn-toggle-switch")} .pn-toggle-element:disabled{cursor:not-allowed}${e("pn-toggle-switch")} .pn-toggle-element:disabled+.pn-toggle-bg{background-color:#d3cecb;box-shadow:none}${e("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle{background-color:#f3f2f2}${e("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}${e("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle ${e("pn-spinner")} .pn-spinner-circle{stroke:#969087}${e("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle ${e("pn-spinner")} .pn-spinner-dot{fill:#969087}${e("pn-toggle-switch")} .pn-toggle-element:disabled:hover+.pn-toggle-bg,${e("pn-toggle-switch")} .pn-toggle-element:disabled:hover:checked+.pn-toggle-bg{background-color:#d3cecb}${e("pn-toggle-switch")} .pn-toggle-element:disabled:hover~.pn-toggle-circle .pn-toggle-check polyline,${e("pn-toggle-switch")} .pn-toggle-element:disabled:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}${e("pn-toggle-switch")} .pn-toggle-check{position:absolute;left:50%;top:50%;height:1.5em;width:1.5em;padding:0.25em;transform:translate(-50%, -50%);opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-check{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle-check polyline{stroke:#005d92;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition-property:stroke-dashoffset, stroke;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-check polyline{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")}{opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")}{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")} .pn-spinner-circle{transition-property:stroke;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")} .pn-spinner-circle{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")} .pn-spinner-dot{transition-property:fill;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")} .pn-spinner-dot{transition-duration:0s;transition-delay:0s}}`}},[772,"pn-toggle-switch",{label:[1],helpertext:[1],checked:[1028],toggleid:[1],name:[1],value:[1],small:[4],large:[4],disabled:[4],loading:[4]},void 0,{toggleid:[{handleHelperId:0}]}]),r=s,c=function(){"undefined"!=typeof customElements&&["pn-toggle-switch","pn-spinner"].forEach((t=>{switch(t){case"pn-toggle-switch":customElements.get(e(e(t)))||customElements.define(e(e(t)),s);break;case"pn-spinner":customElements.get(e(e(t)))||g()}}))};export{r as PnToggleSwitch,c as defineCustomElement}
+import{transformTag as e,proxyCustomElement as t,HTMLElement as n,h as i,Host as o}from"@stencil/core/internal/client";import{u as l}from"./helpers.js";import{d as g}from"./pn-spinner2.js";const r=t(class extends n{constructor(e){super(),!1!==e&&this.__registerHost()}id="pn-toggle-"+l();idHelper=this.id+"-helper";get hostElement(){return this}label;helpertext;value=null;name=null;checked=!1;required=!1;disabled=!1;small=!1;large=!1;loading=!1;pnId;pnAriaLabel;pnAriaLabelledby;toggleid;handleHelperId(){this.idHelper=this.getId()+"-helper"}getId(){return this.pnId||this.toggleid||this.id}getSpinnerSize(){return this.small?1:this.large?1.25:1.125}hasHelpertextProp(){return!!this.helpertext}hasHelpertextSlot(){return!!this.hostElement.querySelector('[slot="helpertext"]')}showHelpertext(){return this.hasHelpertextProp()||this.hasHelpertextSlot()}describedBy(){return this.showHelpertext()?this.idHelper:null}displayLabel(){return!!this.label}getAriaLabel(){return this.displayLabel()||this.pnAriaLabelledby?null:this.pnAriaLabel}getAriaLabelledby(){return this.displayLabel()||this.pnAriaLabel?null:this.pnAriaLabelledby}render(){return i(o,{key:"e6a6de7ded1a69b16843133338ba8a1ae1294b19"},i("div",{key:"142125dd53902df30a93a5e5257650a7841a1644",class:"pn-toggle"},i("div",{key:"d4e35ed179dc5f1423cdf59cf0481ecbcb33021f",class:"pn-toggle-content"},this.label&&i("label",{key:"f38bdb380fb05349909e386dd6e22d841c0caf56",htmlFor:this.getId(),class:"pn-toggle-label"},i("span",{key:"94a35b2682a039613dd0814a25ba30f954018dc6"},this.label)),i("p",{key:"c621112acea7f18b7943d9d07c0af52dd7455329",id:this.idHelper,class:"pn-toggle-helper",hidden:!this.showHelpertext()},this.hasHelpertextProp()&&i("span",{key:"1959f88dbe079595e3cd6bbb48098e2777ab642e"},this.helpertext),i("slot",{key:"e493dcb3022bd31c4ecfb349756d3d83bf51bf9a",name:"helpertext"}))),i("div",{key:"1f13bb2bcb798b5221d06e55640848034ad2b260",class:"pn-toggle-button","data-small":this.small,"data-large":this.large,"data-loading":this.loading},i("input",{key:"ebf1c43df4b75f8df0769d2d458c04fbf17385f6",id:this.getId(),class:"pn-toggle-element",type:"checkbox",name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,"aria-label":this.getAriaLabel(),"aria-labelledby":this.getAriaLabelledby(),"aria-describedby":this.describedBy()}),i("div",{key:"51c67cb5c61e3d3b93bd49013594109772b7d796",class:"pn-toggle-bg"}),i("div",{key:"1932ea8d92b8ab57a47fdd3ced9795be78cc1620",class:"pn-toggle-circle"},i("svg",{key:"67e5adc0818d3fe76de4dffa45bc8c1d5c9fba45",class:"pn-toggle-check",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},i("polyline",{key:"f1722e0d19629ea38eac2faa6d2ccaf007e78463",points:"4,12 9,17 20,6","stroke-width":"3"})),i("pn-spinner",{key:"60ab6b2fea45ddbc8793b06f18032df94c858a9d",size:this.getSpinnerSize()})))))}static get watchers(){return{pnId:[{handleHelperId:0}],toggleid:[{handleHelperId:1}]}}static get style(){return`${e("pn-toggle-switch")}{display:inline-block;position:relative}${e("pn-toggle-switch")} .pn-toggle{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1em}${e("pn-toggle-switch")} .pn-toggle-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:500;color:#2d2013;margin:0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-label{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle-label>span{font-size:1em}${e("pn-toggle-switch")} .pn-toggle-helper{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${e("pn-toggle-switch")} .pn-toggle-content{flex:1 0}${e("pn-toggle-switch")} .pn-toggle-button{position:relative;font-size:1em;width:3.625em;height:2em;padding:0.1875em;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-button{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle-button{-webkit-tap-highlight-color:transparent}${e("pn-toggle-switch")} .pn-toggle-button[data-small]{width:2.625em;height:1.5em}${e("pn-toggle-switch")} .pn-toggle-button[data-small] .pn-toggle-circle{width:1.125em;height:1.125em}${e("pn-toggle-switch")} .pn-toggle-button[data-small][data-loading]>.pn-toggle-bg{width:1.5em}${e("pn-toggle-switch")} .pn-toggle-button[data-large]{width:4.625em;height:2.5em}${e("pn-toggle-switch")} .pn-toggle-button[data-large] .pn-toggle-circle{width:2.125em;height:2.125em}${e("pn-toggle-switch")} .pn-toggle-button[data-large][data-loading]>.pn-toggle-bg{width:2.5em}${e("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-bg{width:2em}${e("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-circle,${e("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(50%)}${e("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:0}${e("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke-dashoffset:23;transition-delay:0s}${e("pn-toggle-switch")} .pn-toggle-button[data-loading] ${e("pn-spinner")}{opacity:1;transform:translate(-50%, -50%);position:absolute;top:50%;left:50%}${e("pn-toggle-switch")} .pn-toggle-bg{position:absolute;top:0;left:50%;width:100%;height:100%;z-index:0;border-radius:2em;background-color:#969087;transform:translateX(-50%);outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:width, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-bg{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle-circle{position:relative;z-index:1;width:1.625em;height:1.625em;background-color:#ffffff;box-shadow:0 0.25em 0.5em rgba(0, 0, 0, 0.1);border-radius:50%;padding:0.25em;transform:translateX(0%);transition-property:transform, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-circle{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle-element{position:absolute;z-index:3;top:0;left:0;cursor:pointer;width:100%;height:100%;opacity:0;margin:0;}${e("pn-toggle-switch")} .pn-toggle-element:focus-visible+.pn-toggle-bg{outline-color:#005d92}${e("pn-toggle-switch")} .pn-toggle-element:hover+.pn-toggle-bg{background-color:#5e554a}${e("pn-toggle-switch")} .pn-toggle-element:hover:checked+.pn-toggle-bg{background-color:#0d234b}${e("pn-toggle-switch")} .pn-toggle-element:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#0d234b}${e("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-bg{background-color:#005d92}${e("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(100%)}${e("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:1}${e("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check polyline{transition-delay:0.2s, 0s;stroke-dashoffset:0}${e("pn-toggle-switch")} .pn-toggle-element:disabled{cursor:not-allowed}${e("pn-toggle-switch")} .pn-toggle-element:disabled+.pn-toggle-bg{background-color:#d3cecb;box-shadow:none}${e("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle{background-color:#f3f2f2}${e("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}${e("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle ${e("pn-spinner")} .pn-spinner-circle{stroke:#969087}${e("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle ${e("pn-spinner")} .pn-spinner-dot{fill:#969087}${e("pn-toggle-switch")} .pn-toggle-element:disabled:hover+.pn-toggle-bg,${e("pn-toggle-switch")} .pn-toggle-element:disabled:hover:checked+.pn-toggle-bg{background-color:#d3cecb}${e("pn-toggle-switch")} .pn-toggle-element:disabled:hover~.pn-toggle-circle .pn-toggle-check polyline,${e("pn-toggle-switch")} .pn-toggle-element:disabled:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}${e("pn-toggle-switch")} .pn-toggle-check{position:absolute;left:50%;top:50%;height:1.5em;width:1.5em;padding:0.25em;transform:translate(-50%, -50%);opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-check{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle-check polyline{stroke:#005d92;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition-property:stroke-dashoffset, stroke;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-check polyline{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")}{opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")}{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")} .pn-spinner-circle{transition-property:stroke;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")} .pn-spinner-circle{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")} .pn-spinner-dot{transition-property:fill;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")} .pn-spinner-dot{transition-duration:0s;transition-delay:0s}}`}},[772,"pn-toggle-switch",{label:[1],helpertext:[1],value:[1],name:[1],checked:[1028],required:[4],disabled:[4],small:[4],large:[4],loading:[4],pnId:[1,"pn-id"],pnAriaLabel:[1,"pn-aria-label"],pnAriaLabelledby:[1,"pn-aria-labelledby"],toggleid:[1]},void 0,{pnId:[{handleHelperId:0}],toggleid:[{handleHelperId:1}]}]),s=r,a=function(){"undefined"!=typeof customElements&&["pn-toggle-switch","pn-spinner"].forEach((t=>{switch(t){case"pn-toggle-switch":customElements.get(e(e(t)))||customElements.define(e(e(t)),r);break;case"pn-spinner":customElements.get(e(e(t)))||g()}}))};export{s as PnToggleSwitch,a as defineCustomElement}

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

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

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as r,h as a,Host as n}from"@stencil/core/internal/client";import{u as s,r as o,k as d,e as h,i as p}from"./helpers.js";import{a as l}from"./arrow_right.js";import{c}from"./close.js";import{d as f}from"./pn-button2.js";import{d as w}from"./pn-icon2.js";import{d as m}from"./pn-progress-stepper2.js";import{d as u}from"./pn-spinner2.js";const b={NEXT:{sv:"Nästa",en:"Next",da:"Næste",fi:"Seuraava",no:"Neste"},PREV:{sv:"Föregående",en:"Previous",da:"Forrige",fi:"Edellinen",no:"Forrige"},FINISH:{sv:"Slutför",en:"Finish",da:"Afslut",fi:"Valmis",no:"Fullfør"},CANCEL:{sv:"Avbryt",en:"Cancel",da:"Annuller",fi:"Peruuta",no:"Avbryt"}},g=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.wizardStep=r(this,"wizardStep",7),this.wizardHighlightClick=r(this,"wizardHighlightClick",7),this.wizardClose=r(this,"wizardClose",7)}id="pn-wizard-"+s();wizardIdLabel;wizardIdHelpertext;wizardElement;wizardContent;wizardArrow;timeoutRerender;get hostElement(){return this}label="";helpertext="";language=null;pnId=this.id;step=-1;steps=[];progress="";scrollBlock="center";displayOverflow=!1;hideBack=!1;hideNext=!1;hideFinish=!1;labelBack="";labelNext="";labelFinish="";wizardStep;wizardHighlightClick;wizardClose;handleStepChange(t,i){if(-1===i&&(this.highlightElement(),this.positionModal()),-1===t){const t=i===this.steps.length;this.wizardClose.emit({step:t?i-1:i,finished:t})}if(!this.isActive())return this.wizardElement?.close(),void setTimeout((()=>this.handleDisplayOverflow()),o()?0:400);this.wizardElement.open||(this.handleDisplayOverflow(),this.wizardElement?.showModal()),this.wizardStep.emit({step:t,next:t>(i??-1),prev:t<(i??-1)})}handleIdChange(){this.wizardIdLabel=(this.pnId||this.id)+"-label",this.wizardIdHelpertext=(this.pnId||this.id)+"-helpertext"}handleOverflow(){this.isActive()&&(clearTimeout(this.timeoutRerender),this.timeoutRerender=setTimeout((()=>{this.highlightElement(),this.positionModal()}),250))}async componentWillLoad(){this.handleIdChange(),null===this.language&&await d(this.hostElement)}componentDidRender(){this.runStepLogic()}getRect(t){return t.getBoundingClientRect()}translate(t){return b?.[t]?.[this.language||h]||t}handleDisplayOverflow(){if(this.displayOverflow)return;const t=document.body,i=innerWidth-document.documentElement.clientWidth;this.isActive()?(t.style.setProperty("overflow","hidden"),t.style.marginRight=i+"px"):(t.style.removeProperty("overflow"),t.style.removeProperty("margin-right"))}isActive(t=this.step){return t>=0&&t<this.steps.length}isOpen(){return this.isActive()&&this.wizardElement?.open}isClosed(t=this.step){return-1===t}isFirstStep(){return 0===this.step}isLastStep(t=this.step){return 1===this.steps.length||t===this.steps.length-1}isProgressDots(){return"dots"===this.progress}isProgressText(){return"text"===this.progress}renderProgress(){return 7>=this.steps.length&&(this.isProgressDots()||this.isProgressText())}showBackButton(){return!(this.hideBack||this.isClosed()||this.isFirstStep())}showNextButton(){return!this.hideNext&&(!this.isLastStep()||this.showFinishButton())}showFinishButton(){return!this.hideFinish&&this.isLastStep()}runStepLogic(){this.isOpen()&&requestAnimationFrame((()=>{this.highlightElement(),this.positionModal(),this.scrollToElement()}))}nextStep(){this.step=this.step+1}prevStep(){this.step=this.step-1}endWizard(){this.step=-1}getNextLabel(){const t=this.labelFinish||"FINISH",i=this.labelNext||"NEXT",e=this.isLastStep()?t:i;return this.translate(e)}getHighlightTarget(){return document.querySelector(this.steps[this.step])}getHighlightRect(){const t=this.getHighlightTarget();if(!t)return;const i=this.getRect(t),e=parseFloat(getComputedStyle(t).margin)||0;return{top:i.top+window.scrollY-e,left:i.left+window.scrollX-e,width:i.width+2*e,height:i.height+2*e,radius:parseFloat(getComputedStyle(t).borderRadius)||4}}scrollToElement(){const t=this.getHighlightTarget();t&&t.scrollIntoView({behavior:"smooth",block:this.scrollBlock})}highlightElement(){this.getHighlightTarget()&&this.setHighlightVars(this.getHighlightRect())}positionModal(){if(!this.getHighlightTarget())return;const t=16,{top:i,left:e,width:r,height:a}=this.getHighlightRect(),{width:n,height:s}=this.getRect(this.wizardContent),o=e+r/2;let d=0,h=0;const{scrollY:l,scrollX:c,innerWidth:f,innerHeight:w}=window,m=f-document.documentElement.clientWidth,u=i+a+t+s<l+w,b=i-t-s>l,g=e-t-n>c,z=e+r+t+n<c+f,x=g||z;let y=8,v=8;y=u?i+a+t:i-s-t,v=c+f-n-m-8;let k=0,$="top";u||b?(d=o-n/2,h=u?i+a+t:i-s-t,$=u?"top":"bottom",k=o-d):x?(d=z?e+r+t:e-n-t,h=i+a/2-s/2,y=i+a/2,$=z?"left":"right",k=s/2):!(u||b||g||z)&&(d=o-n/2,h=i+a-s/2,y=w-s-8,$="top",k=o-d),d=Math.max(c+m||8,Math.min(d,v)),h=Math.max(8,Math.min(h,y)),this.setModalVars({top:h,left:d}),p()&&($="top"),k="top"===$||"bottom"===$?o-d:i+a/2-h,k=Math.max(32,Math.min(k-8,(x?s:n)-32)),this.setArrowVars($,k)}setHighlightVars({top:t,left:i,width:e,height:r,radius:a}){this.hostElement.style.setProperty("--pn-spotlight-x",Math.round(i)+"px"),this.hostElement.style.setProperty("--pn-spotlight-y",Math.round(t)+"px"),this.hostElement.style.setProperty("--pn-spotlight-width",Math.round(e)+"px"),this.hostElement.style.setProperty("--pn-spotlight-height",Math.round(r)+"px"),this.hostElement.style.setProperty("--pn-spotlight-radius",Math.round(a)+"px")}setModalVars({top:t,left:i}){this.hostElement.style.setProperty("--pn-wizard-content-x",Math.round(i)+"px"),this.hostElement.style.setProperty("--pn-wizard-content-y",Math.round(t)+"px")}setArrowVars(t,i){this.wizardArrow.setAttribute("data-arrow",t),this.hostElement.style.setProperty("--pn-arrow-offset",Math.round(i)+"px")}render(){return a(n,{key:"08f0d484f684188c7283535da328d6bd681b74d5"},a("dialog",{key:"56810278e58795390973a9ebbe0bd797b731b1f8",id:this.pnId,"aria-labelledby":this.label?this.wizardIdLabel:null,"aria-describedby":this.helpertext?this.wizardIdHelpertext:null,class:"pn-wizard",ref:t=>this.wizardElement=t,onCancel:()=>this.endWizard(),onClose:()=>this.endWizard()},a("div",{key:"824bbd673177648865e9328ee5aa51e157aa7347",class:"pn-wizard-overlay"},a("div",{key:"a2236247ba49e18de2a4aa2666fa1e07e6aaa1c4",class:"pn-wizard-highlight",onClick:t=>this.wizardHighlightClick.emit(t)})),a("div",{key:"77d5f6e74c49b2a92a8c9c8f9207594bec0545c7",class:"pn-wizard-content",ref:t=>this.wizardContent=t},a("pn-button",{key:"28fdec2fa470ff03b916325d0085a7bd4cd8f504",class:"pn-wizard-cancel",arialabel:this.translate("CANCEL"),icon:c,iconOnly:!0,small:!0,appearance:"light",variant:"borderless",onPnClick:()=>this.endWizard()}),a("div",{key:"ff7e6051e041c008c639e392896e885e4dcb0364",class:"pn-wizard-text"},this.label&&a("h2",{key:"9b8098099707558b66f1b422dc6ada70084d9829",class:"pn-wizard-label",id:this.wizardIdLabel},this.label),this.helpertext&&a("p",{key:"4db3b8ab391daf06f5731be43c9c116acd934b1f",class:"pn-wizard-helpertext",id:this.wizardIdHelpertext},this.helpertext),a("slot",{key:"5f72315df3102a605d2d4a220cfebfa216101f8c"}),this.renderProgress()&&a("pn-progress-stepper",{key:"becee14c8d2ad3fe3a9d902dd080f4df760e227e",class:!this.isProgressDots()&&"pn-wizard-sr-only",totalSteps:this.steps.length,currentStep:this.step>0?this.step+1:1,dots:!0})),a("div",{key:"264270d944373b1570a09a330bef6c6e8ad07e4d",class:"pn-wizard-arrow",ref:t=>this.wizardArrow=t}),a("div",{key:"1420663b8cc3996eb67f640d3a7f981f1fafff82",class:"pn-wizard-controls"},this.isProgressText()&&a("span",{key:"99cd61e352d16b15129239c8c1932a1e8ff3d675",class:"pn-wizard-indicator","aria-hidden":"true"},this.step+1,"/",this.steps.length),a("slot",{key:"f48e48097089a24ed48726046e5bb9b8a36ca1ec",name:"buttons"}),this.showBackButton()&&a("pn-button",{key:"9504536c3602f6280d30aa6f95043d2a66c2ac98",label:this.labelBack||this.translate("PREV"),small:!0,appearance:"light",variant:"outlined",onPnClick:()=>this.prevStep()}),this.showNextButton()&&a("pn-button",{key:"c5997f60733d2f220138fbf3caf24f44271d63f3",label:this.getNextLabel(),small:!0,icon:l,onPnClick:()=>this.nextStep()})))))}static get watchers(){return{step:[{handleStepChange:0}],pnId:[{handleIdChange:0}]}}static get style(){return`${t("pn-wizard")} .pn-wizard{z-index:10000;position:absolute;top:0;border:none;margin:0;padding:0;background-color:transparent;outline:none;overflow:unset;height:100%;width:100%;max-width:unset;max-height:unset;display:none;opacity:0;transition-property:display, opacity;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-wizard")} .pn-wizard{transition-duration:0s;transition-delay:0s}}${t("pn-wizard")} .pn-wizard{transition-behavior:allow-discrete}${t("pn-wizard")} .pn-wizard[open]{display:block;opacity:1}@starting-style{${t("pn-wizard")} .pn-wizard[open]{display:block;opacity:0}}${t("pn-wizard")} .pn-wizard::backdrop{background-color:transparent}${t("pn-wizard")} .pn-wizard-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${t("pn-wizard")} .pn-wizard-overlay{z-index:0}${t("pn-wizard")} .pn-wizard-highlight{position:absolute;left:0;top:0;width:var(--pn-spotlight-width, 0%);height:var(--pn-spotlight-height, 0%);border-radius:var(--pn-spotlight-radius, 0.25em);box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.55);z-index:0;transform:translate(var(--pn-spotlight-x, 0%), var(--pn-spotlight-y, 0%));transition-property:transform, width, height, border-radius;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-wizard")} .pn-wizard-highlight{transition-duration:0s;transition-delay:0s}}${t("pn-wizard")} .pn-wizard-content{position:absolute;z-index:1;background:#ffffff;border-radius:2em;max-width:20em;box-shadow:0 0 0.5em rgba(0, 0, 0, 0.3);left:0;top:0;transform:translate(var(--pn-wizard-content-x), var(--pn-wizard-content-y));transition-property:transform;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-wizard")} .pn-wizard-content{transition-duration:0s;transition-delay:0s}}@media (max-width: 55em){${t("pn-wizard")} .pn-wizard-content{position:fixed;top:unset;bottom:0;left:0.5em;border-radius:2em 2em 0 0;width:calc(100vw - 1em);max-width:unset;transform:none}}${t("pn-wizard")} .pn-wizard-cancel{position:absolute;top:1em;right:1em;z-index:10}${t("pn-wizard")} .pn-wizard-text{padding:3em 1em 1em;text-align:center;display:flex;flex-direction:column;flex-wrap:nowrap;gap:clamp(0.5em, 5vw, 1em)}${t("pn-wizard")} .pn-wizard-label{margin:0;font-size:clamp(1.25em, 5vw, 1.5em);font-weight:700;color:#2d2013}${t("pn-wizard")} .pn-wizard-helpertext{margin:0;font-size:clamp(0.875em, 5vw, 1em);font-weight:400;color:#5e554a}${t("pn-wizard")} .pn-wizard-controls{border-top:0.0625em solid #d3cecb;padding:1em;display:flex;justify-content:end;gap:0.5em;flex-wrap:wrap}${t("pn-wizard")} .pn-wizard-indicator{margin-right:auto;align-self:center;font-size:1em;color:#5e554a;padding:0 0.625em}${t("pn-wizard")} .pn-wizard-arrow{position:absolute;width:0;height:0;border:0.5em solid transparent;top:0;right:0;bottom:0;left:0;transition-property:top, right, bottom, left, border-color;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-wizard")} .pn-wizard-arrow{transition-duration:0s;transition-delay:0s}}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=bottom]{top:100%;bottom:-1em;left:var(--pn-arrow-offset);border-top-color:#ffffff}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=top]{top:-1em;left:var(--pn-arrow-offset);border-bottom-color:#ffffff}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=right]{right:-1em;left:100%;top:var(--pn-arrow-offset);border-left-color:#ffffff}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=left]{left:-1em;top:var(--pn-arrow-offset);border-right-color:#ffffff}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=none]{display:none}`}},[772,"pn-wizard",{label:[1],helpertext:[1],language:[1025],pnId:[1025,"pn-id"],step:[1538],steps:[16],progress:[1],scrollBlock:[1,"scroll-block"],displayOverflow:[4,"display-overflow"],hideBack:[4,"hide-back"],hideNext:[4,"hide-next"],hideFinish:[4,"hide-finish"],labelBack:[1,"label-back"],labelNext:[1,"label-next"],labelFinish:[1,"label-finish"]},[[9,"resize","handleOverflow"]],{step:[{handleStepChange:0}],pnId:[{handleIdChange:0}]}]),z=g,x=function(){"undefined"!=typeof customElements&&["pn-wizard","pn-button","pn-icon","pn-progress-stepper","pn-spinner"].forEach((i=>{switch(i){case"pn-wizard":customElements.get(t(t(i)))||customElements.define(t(t(i)),g);break;case"pn-button":customElements.get(t(t(i)))||f();break;case"pn-icon":customElements.get(t(t(i)))||w();break;case"pn-progress-stepper":customElements.get(t(t(i)))||m();break;case"pn-spinner":customElements.get(t(t(i)))||u()}}))};export{z as PnWizard,x as defineCustomElement}
+import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as r,h as n,Host as a}from"@stencil/core/internal/client";import{u as s,r as o,k as d,e as h,i as p}from"./helpers.js";import{a as l}from"./arrow_right.js";import{c}from"./close.js";import{d as w}from"./pn-button2.js";import{d as f}from"./pn-icon2.js";import{d as b}from"./pn-progress-stepper2.js";import{d as u}from"./pn-spinner2.js";const m={NEXT:{sv:"Nästa",en:"Next",da:"Næste",fi:"Seuraava",no:"Neste"},PREV:{sv:"Föregående",en:"Previous",da:"Forrige",fi:"Edellinen",no:"Forrige"},FINISH:{sv:"Slutför",en:"Finish",da:"Afslut",fi:"Valmis",no:"Fullfør"},CANCEL:{sv:"Avbryt",en:"Cancel",da:"Annuller",fi:"Peruuta",no:"Avbryt"}},g=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.wizardStep=r(this,"wizardStep",7),this.wizardHighlightClick=r(this,"wizardHighlightClick",7),this.wizardClose=r(this,"wizardClose",7)}id="pn-wizard-"+s();wizardIdLabel;wizardIdHelpertext;wizardElement;wizardContent;wizardArrow;timeoutRerender;get hostElement(){return this}label="";helpertext="";language=null;pnId=this.id;step=-1;steps=[];progress="";scrollBlock="center";displayOverflow=!1;hideBack=!1;hideNext=!1;hideFinish=!1;labelBack="";labelNext="";labelFinish="";wizardStep;wizardHighlightClick;wizardClose;handleStepChange(t,i){if(-1===t){const t=i===this.steps.length;this.wizardClose.emit({step:t?i-1:i,finished:t})}if(!this.isActive())return this.wizardElement?.close(),void setTimeout((()=>this.handleDisplayOverflow()),o()?0:400);this.wizardElement.open||(this.runStepLogic(),requestAnimationFrame((()=>{this.handleDisplayOverflow(),this.wizardElement?.showModal()}))),this.wizardStep.emit({step:t,next:t>(i??-1),prev:t<(i??-1)})}handleIdChange(){this.wizardIdLabel=(this.pnId||this.id)+"-label",this.wizardIdHelpertext=(this.pnId||this.id)+"-helpertext"}handleOverflow(){this.isActive()&&(clearTimeout(this.timeoutRerender),this.timeoutRerender=setTimeout((()=>this.runStepLogic()),250))}async componentWillLoad(){null===this.language&&await d(this.hostElement)}componentDidRender(){requestAnimationFrame((()=>this.isActive()&&this.runStepLogic()))}getRect(t){return t.getBoundingClientRect()}translate(t){return m?.[t]?.[this.language||h]||t}runStepLogic(){this.isOpen()&&this.scrollToElement(),this.highlightElement(),this.positionModal()}handleDisplayOverflow(){if(this.displayOverflow)return;const t=document.body,i=innerWidth-document.documentElement.clientWidth;this.isActive()?(t.style.setProperty("overflow","hidden"),t.style.setProperty("margin-right",i+"px")):(t.style.removeProperty("overflow"),t.style.removeProperty("margin-right"))}isActive(t=this.step){return t>=0&&t<this.steps.length}isOpen(){return this.isActive()&&this.wizardElement?.open}isClosed(t=this.step){return-1===t}isFirstStep(){return 0===this.step}isLastStep(t=this.step){return 1===this.steps.length||t===this.steps.length-1}isProgressDots(){return"dots"===this.progress}isProgressText(){return"text"===this.progress}renderProgress(){return 7>=this.steps.length&&(this.isProgressDots()||this.isProgressText())}showBackButton(){return!(this.hideBack||this.isClosed()||this.isFirstStep())}showNextButton(){return!this.hideNext&&(!this.isLastStep()||this.showFinishButton())}showFinishButton(){return!this.hideFinish&&this.isLastStep()}nextStep(){this.step=this.step+1}prevStep(){this.step=this.step-1}endWizard(){this.step=-1}getNextLabel(){const t=this.labelFinish||"FINISH",i=this.labelNext||"NEXT",e=this.isLastStep()?t:i;return this.translate(e)}getHighlightTarget(){const t=this.steps[this.step];return t?document.querySelector(t):null}getHighlightRect(){const t=this.getHighlightTarget();if(!t)return void this.resetToCenter();const i=this.getRect(t),e=parseFloat(getComputedStyle(t).margin)||0;return{top:i.top+window.scrollY-e,left:i.left+window.scrollX-e,width:i.width+2*e,height:i.height+2*e,radius:parseFloat(getComputedStyle(t).borderRadius)||4}}isInViewport(t){const{top:i,left:e,bottom:r,right:n}=t.getBoundingClientRect();return i>=0&&e>=0&&r<=(window.innerHeight||document.documentElement.clientHeight)&&n<=(window.innerWidth||document.documentElement.clientWidth)}scrollToElement(){const t=this.getHighlightTarget();t&&!this.isInViewport(t)&&t.scrollIntoView({behavior:"instant",block:this.scrollBlock})}highlightElement(){if(!this.getHighlightTarget())return this.resetToCenter();this.setHighlightVars(this.getHighlightRect())}resetToCenter(){const{width:t,height:i}=this.getWizardContentRect(),e=window.scrollY+window.innerHeight/2-i/2,r=window.scrollX+window.innerWidth/2-t/2;this.setHighlightVars({top:e,left:r,width:0,height:0,radius:0}),this.setModalVars({top:e,left:r}),this.setArrowVars("none",0)}getWizardContentRect(){return this.wizardContent?this.getRect(this.wizardContent):{width:0,height:0}}positionModal(){if(!this.getHighlightTarget())return;const t=16,{top:i,left:e,width:r,height:n}=this.getHighlightRect(),a=e+r/2,{width:s,height:o}=this.getWizardContentRect();let d=0,h=0;const{scrollY:l,scrollX:c,innerWidth:w,innerHeight:f}=window,b=w-document.documentElement.clientWidth,u=i+n+t+o<l+f,m=i-l>o+t,g=e-t-s>c,z=e+r+t+s<c+w;let x=8,y=8;x=u?i+n+t:i-o-t,y=c+w-s-b-8;let v=0,k="top";u||m?(d=a-s/2,h=u?i+n+t:i-o-t,k=u?"top":"bottom",v=a-d):g||z?(d=z?e+r+t:e-s-t,h=i+n/2-o/2,x=l+f-o-8,k=z?"left":"right",v=o/2):!(u||m||g||z)&&(d=a-s/2,h=i+n-o/2,x=l-o-8,k="top",v=a-d),d=Math.max(c+b||8,Math.min(d,y)),h=Math.max(8,Math.min(h,x)),this.setModalVars({top:h,left:d}),p()&&(k="top"),v="top"===k||"bottom"===k?a-d:i+n/2-h,v=Math.max(32,Math.min(v-8,("top"===k||"bottom"===k?s:o)-32)),this.setArrowVars(k,v)}setHighlightVars({top:t,left:i,width:e,height:r,radius:n}){this.hostElement.style.setProperty("--pn-spotlight-x",Math.round(i)+"px"),this.hostElement.style.setProperty("--pn-spotlight-y",Math.round(t)+"px"),this.hostElement.style.setProperty("--pn-spotlight-width",Math.round(e)+"px"),this.hostElement.style.setProperty("--pn-spotlight-height",Math.round(r)+"px"),this.hostElement.style.setProperty("--pn-spotlight-radius",Math.round(n)+"px")}setModalVars({top:t,left:i}){this.hostElement.style.setProperty("--pn-wizard-content-x",Math.round(i)+"px"),this.hostElement.style.setProperty("--pn-wizard-content-y",Math.round(t)+"px")}setArrowVars(t,i){this.wizardArrow.setAttribute("data-arrow",t),this.hostElement.style.setProperty("--pn-arrow-offset",Math.round(i)+"px")}render(){return n(a,{key:"3fbeaf58c3adc8ea380a81b93dc66fb8a6bece5c"},n("dialog",{key:"f0f94968cba2e2dc8baba4752d80a7bea862c929",id:this.pnId,"aria-labelledby":this.label?this.wizardIdLabel:null,"aria-describedby":this.helpertext?this.wizardIdHelpertext:null,class:"pn-wizard",ref:t=>this.wizardElement=t,onCancel:()=>this.endWizard(),onClose:()=>this.endWizard()},n("div",{key:"737f8207c19876c82c6a3d2418305fc7268ee251",class:"pn-wizard-overlay"},n("div",{key:"d420a48ad3b30828b4dd496f56073eea375bbe34",class:"pn-wizard-highlight",onClick:t=>this.wizardHighlightClick.emit(t)})),n("div",{key:"03d6e169d95b7fe7bdb65a31e839b5744db190d0",class:"pn-wizard-content",ref:t=>this.wizardContent=t},n("pn-button",{key:"3534ecbbd28f9171b0ba1adfa07a91a4a20a1dd1",class:"pn-wizard-cancel",arialabel:this.translate("CANCEL"),icon:c,iconOnly:!0,small:!0,appearance:"light",variant:"borderless",onPnClick:()=>this.endWizard()}),n("div",{key:"b1f3f3ddb93efe5201091d19df4ff22acde76391",class:"pn-wizard-text"},this.label&&n("h2",{key:"b689ff85832dd65814d30ca85c00b59281aef1d1",class:"pn-wizard-label",id:this.wizardIdLabel},this.label),this.helpertext&&n("p",{key:"6a978db802f3faa402435c84c233e84c3456f657",class:"pn-wizard-helpertext",id:this.wizardIdHelpertext},this.helpertext),n("slot",{key:"52d0440d5b470fd06eb3a0c21921d540c79c0ac9"}),this.renderProgress()&&n("pn-progress-stepper",{key:"63f08858ddef511b92d622a559fe3888b5a6508a",class:!this.isProgressDots()&&"pn-wizard-sr-only",totalSteps:this.steps.length,currentStep:this.step>0?this.step+1:1,dots:!0})),n("div",{key:"c5b266d5421f09bbc2ab199d6d71f5938dc8ae72",class:"pn-wizard-arrow",ref:t=>this.wizardArrow=t}),n("div",{key:"00aef3606f751ca56142fe2b0a6a08a36e4f92f3",class:"pn-wizard-controls"},this.isProgressText()&&n("span",{key:"d6c0c85554253580d65aa42742cdabf55158bfe5",class:"pn-wizard-indicator","aria-hidden":"true"},this.step+1,"/",this.steps.length),n("slot",{key:"76a1b7c69280ffbbc81f210acdfb8812b241329d",name:"buttons"}),this.showBackButton()&&n("pn-button",{key:"560aa03d06aec0b32ae94ee2264b6bd059b5f305",label:this.labelBack||this.translate("PREV"),small:!0,appearance:"light",variant:"outlined",onPnClick:()=>this.prevStep()}),this.showNextButton()&&n("pn-button",{key:"00d8a13c7ee3413aa2e3d751d101de41e228f866",label:this.getNextLabel(),small:!0,icon:l,onPnClick:()=>this.nextStep()})))))}static get watchers(){return{step:[{handleStepChange:0}],pnId:[{handleIdChange:1}]}}static get style(){return`${t("pn-wizard")} .pn-wizard{z-index:10000;position:absolute;top:0;border:none;margin:0;padding:0;background-color:transparent;outline:none;overflow:unset;height:100%;width:100%;max-width:unset;max-height:unset;display:none;opacity:0;transition-property:display, opacity;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-wizard")} .pn-wizard{transition-duration:0s;transition-delay:0s}}${t("pn-wizard")} .pn-wizard{transition-behavior:allow-discrete}${t("pn-wizard")} .pn-wizard[open]{display:block;opacity:1}@starting-style{${t("pn-wizard")} .pn-wizard[open]{display:block;opacity:0}}${t("pn-wizard")} .pn-wizard::backdrop{background-color:transparent}${t("pn-wizard")} .pn-wizard-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${t("pn-wizard")} .pn-wizard-overlay{z-index:0}${t("pn-wizard")} .pn-wizard-highlight{position:absolute;left:0;top:0;width:var(--pn-spotlight-width, 0%);height:var(--pn-spotlight-height, 0%);border-radius:var(--pn-spotlight-radius, 0.25em);box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.55);z-index:0;transform:translate(var(--pn-spotlight-x, 0%), var(--pn-spotlight-y, 0%));transition-property:transform, width, height, border-radius;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-wizard")} .pn-wizard-highlight{transition-duration:0s;transition-delay:0s}}${t("pn-wizard")} .pn-wizard-content{position:absolute;z-index:1;background:#ffffff;border-radius:2em;max-width:20em;box-shadow:0 0 0.5em rgba(0, 0, 0, 0.3);left:0;top:0;transform:translate(var(--pn-wizard-content-x), var(--pn-wizard-content-y));transition-property:transform;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-wizard")} .pn-wizard-content{transition-duration:0s;transition-delay:0s}}@media (max-width: 55em){${t("pn-wizard")} .pn-wizard-content{position:fixed;top:unset;bottom:0;left:0.5em;border-radius:2em 2em 0 0;width:calc(100vw - 1em);max-width:unset;transform:none}}${t("pn-wizard")} .pn-wizard-cancel{position:absolute;top:1em;right:1em;z-index:10}${t("pn-wizard")} .pn-wizard-text{padding:3em 1em 1em;text-align:center;display:flex;flex-direction:column;flex-wrap:nowrap;gap:clamp(0.5em, 5vw, 1em)}${t("pn-wizard")} .pn-wizard-label{margin:0;font-size:clamp(1.25em, 5vw, 1.5em);font-weight:700;color:#2d2013}${t("pn-wizard")} .pn-wizard-helpertext{margin:0;font-size:clamp(0.875em, 5vw, 1em);font-weight:400;color:#5e554a}${t("pn-wizard")} .pn-wizard-controls{border-top:0.0625em solid #d3cecb;padding:1em;display:flex;justify-content:end;gap:0.5em;flex-wrap:wrap}${t("pn-wizard")} .pn-wizard-indicator{margin-right:auto;align-self:center;font-size:1em;color:#5e554a;padding:0 0.625em}${t("pn-wizard")} .pn-wizard-arrow{position:absolute;width:0;height:0;border:0.5em solid transparent;top:0;right:0;bottom:0;left:0;transition-property:top, right, bottom, left, border-color;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-wizard")} .pn-wizard-arrow{transition-duration:0s;transition-delay:0s}}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=bottom]{top:100%;bottom:-0.9375em;left:var(--pn-arrow-offset);border-top-color:#ffffff}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=top]{top:-0.9375em;left:var(--pn-arrow-offset);border-bottom-color:#ffffff}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=right]{right:-0.9375em;left:100%;top:var(--pn-arrow-offset);border-left-color:#ffffff}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=left]{left:-0.9375em;top:var(--pn-arrow-offset);border-right-color:#ffffff}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=none]{border-color:transparent}`}},[772,"pn-wizard",{label:[1],helpertext:[1],language:[1025],pnId:[1025,"pn-id"],step:[1538],steps:[16],progress:[1],scrollBlock:[1,"scroll-block"],displayOverflow:[4,"display-overflow"],hideBack:[4,"hide-back"],hideNext:[4,"hide-next"],hideFinish:[4,"hide-finish"],labelBack:[1,"label-back"],labelNext:[1,"label-next"],labelFinish:[1,"label-finish"]},[[9,"resize","handleOverflow"]],{step:[{handleStepChange:0}],pnId:[{handleIdChange:1}]}]),z=g,x=function(){"undefined"!=typeof customElements&&["pn-wizard","pn-button","pn-icon","pn-progress-stepper","pn-spinner"].forEach((i=>{switch(i){case"pn-wizard":customElements.get(t(t(i)))||customElements.define(t(t(i)),g);break;case"pn-button":customElements.get(t(t(i)))||w();break;case"pn-icon":customElements.get(t(t(i)))||f();break;case"pn-progress-stepper":customElements.get(t(t(i)))||b();break;case"pn-spinner":customElements.get(t(t(i)))||u()}}))};export{z as PnWizard,x as defineCustomElement}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as e,proxyCustomElement as s,HTMLElement as t,createEvent as i,h as n,Host as r}from"@stencil/core/internal/client";import{u as a,k as o,s as c}from"./helpers.js";import{d as l}from"./pn-button2.js";import{d as h}from"./pn-icon2.js";import{d as p}from"./pn-search-field2.js";import{d}from"./pn-spinner2.js";const u={CLOSEST_DELIVERY_DATE:{en:"Closest delivery date:",sv:"Nästa utdelningsdag:"},NEXT_DELIVERY_DATE:{en:"Next delivery date:",sv:"Kommande utdelningsdag:"},ZIP_CODE:{en:"Zip code:",sv:"Postnummer:"},VALIDATION_ERROR_MESSAGE:{en:"Zip code not valid",sv:"Postnumret är inte giltigt"},SERVER_ERROR_MESSAGE:{en:"Could not find zip code",sv:"Kan inte hitta postnumret"},PLACEHOLDER_TEXT:{en:"Search for a zip code",sv:"Sök på ett postnummer"},SEARCH:{en:"Search",sv:"Sök"}},E=s(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.searchsuccessful=i(this,"searchsuccessful",7)}searchId="pn-zipcode-"+a();get hostElement(){return this}validZipCode;loading=!1;showResult=!1;zipCodeSearchResult={delivery:"",upcoming:"",city:"",postalCode:""};error=!1;errorMessage;language=null;value;searchsuccessful;async componentWillLoad(){null===this.language&&await o(this.hostElement),this.value&&this.handleSearch(this.value)}translation(e){return u[e][this.language||c]}handleSearch(e){this.value=e,this.validateZipCode(),this.error?this.errorMessage="VALIDATION_ERROR_MESSAGE":this.zipCodeSearch()}async zipCodeSearch(){this.loading=!0,await fetch("https://portal.postnord.com/api/sendoutarrival/closest?postalCode="+this.validZipCode).then((e=>e.json())).then((e=>{this.showResult=!0,this.zipCodeSearchResult=e,this.searchsuccessful.emit(!0)})).catch((()=>{this.error=!0,this.errorMessage="SERVER_ERROR_MESSAGE",this.searchsuccessful.emit(!1)})).finally((()=>{this.loading=!1}))}validateZipCode(){const e=this.value?this.value.replace(/[ -]/gi,""):"",s=/^\d{5}$/.test(e);this.error=!s,s&&(this.validZipCode=e)}renderSearchResult(){if(!this.loading&&!this.error&&this.showResult)return n("output",{class:"pn-search-results",htmlFor:this.searchId},n("p",{class:"text-row"},n("span",null,this.translation("CLOSEST_DELIVERY_DATE")),n("h3",{class:"delivery-date"},this.zipCodeSearchResult.delivery)),n("p",{class:"text-row"},n("span",null,this.translation("NEXT_DELIVERY_DATE")),n("h3",{class:"delivery-date"},this.zipCodeSearchResult.upcoming)),n("p",{class:"text-row"},n("span",null,this.translation("ZIP_CODE")),n("h3",null,this.zipCodeSearchResult.postalCode,", ",this.zipCodeSearchResult.city||"N/A")))}renderErrorMessage(){if(this.error&&!this.loading)return n("p",{class:"pn-error-text",role:"alert"},n("small",null,this.translation(this.errorMessage)))}render(){return n(r,{key:"b9314bbca808c725bc074d1dc9e58223bb551468"},n("pn-search-field",{key:"4c7eaf8c96aa36e17c546371345c7aac6a0c5ee7",label:this.translation("PLACEHOLDER_TEXT"),value:this.value,searchid:this.searchId,loading:this.loading,button:"icon",buttonLabel:this.translation("SEARCH"),placeholder:this.translation("PLACEHOLDER_TEXT"),onSearch:e=>this.handleSearch(e.detail)}),this.renderSearchResult(),this.renderErrorMessage())}static get style(){return`${e("pn-zipcode-search")}{display:block;color:#5e554a}${e("pn-zipcode-search")} .pn-search-results{display:flex;flex-direction:column;gap:1em;padding:0 0.75em}${e("pn-zipcode-search")} .pn-search-results span{color:#5e554a}${e("pn-zipcode-search")} .pn-search-results h3{color:#2d2013}${e("pn-zipcode-search")} .pn-error-text{color:#a70707;padding:0 0.75em}${e("pn-zipcode-search")}>${e("pn-search-field")}{width:100%;margin-bottom:1em}`}},[512,"pn-zipcode-search",{language:[1],value:[1025],validZipCode:[32],loading:[32],showResult:[32],zipCodeSearchResult:[32],error:[32],errorMessage:[32]}]),m=E,R=function(){"undefined"!=typeof customElements&&["pn-zipcode-search","pn-button","pn-icon","pn-search-field","pn-spinner"].forEach((s=>{switch(s){case"pn-zipcode-search":customElements.get(e(e(s)))||customElements.define(e(e(s)),E);break;case"pn-button":customElements.get(e(e(s)))||l();break;case"pn-icon":customElements.get(e(e(s)))||h();break;case"pn-search-field":customElements.get(e(e(s)))||p();break;case"pn-spinner":customElements.get(e(e(s)))||d()}}))};export{m as PnZipcodeSearch,R as defineCustomElement}
+import{transformTag as e,proxyCustomElement as s,HTMLElement as t,createEvent as i,h as n,Host as r}from"@stencil/core/internal/client";import{u as a,k as o,s as c}from"./helpers.js";import{d as l}from"./pn-button2.js";import{d as h}from"./pn-icon2.js";import{d as p}from"./pn-search-field2.js";import{d}from"./pn-spinner2.js";const u={CLOSEST_DELIVERY_DATE:{en:"Closest delivery date:",sv:"Nästa utdelningsdag:"},NEXT_DELIVERY_DATE:{en:"Next delivery date:",sv:"Kommande utdelningsdag:"},ZIP_CODE:{en:"Zip code:",sv:"Postnummer:"},VALIDATION_ERROR_MESSAGE:{en:"Zip code not valid",sv:"Postnumret är inte giltigt"},SERVER_ERROR_MESSAGE:{en:"Could not find zip code",sv:"Kan inte hitta postnumret"},PLACEHOLDER_TEXT:{en:"Search for a zip code",sv:"Sök på ett postnummer"},SEARCH:{en:"Search",sv:"Sök"}},E=s(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.searchsuccessful=i(this,"searchsuccessful",7)}searchId="pn-zipcode-"+a();get hostElement(){return this}validZipCode;loading=!1;showResult=!1;zipCodeSearchResult={delivery:"",upcoming:"",city:"",postalCode:""};error=!1;errorMessage;language=null;value;searchsuccessful;async componentWillLoad(){null===this.language&&await o(this.hostElement),this.value&&this.handleSearch(this.value)}translation(e){return u[e][this.language||c]}handleSearch(e){this.value=e,this.validateZipCode(),this.error?this.errorMessage="VALIDATION_ERROR_MESSAGE":this.zipCodeSearch()}async zipCodeSearch(){this.loading=!0,await fetch("https://portal.postnord.com/api/sendoutarrival/closest?postalCode="+this.validZipCode).then((e=>e.json())).then((e=>{this.showResult=!0,this.zipCodeSearchResult=e,this.searchsuccessful.emit(!0)})).catch((()=>{this.error=!0,this.errorMessage="SERVER_ERROR_MESSAGE",this.searchsuccessful.emit(!1)})).finally((()=>{this.loading=!1}))}validateZipCode(){const e=this.value?this.value.replace(/[ -]/gi,""):"",s=/^\d{5}$/.test(e);this.error=!s,s&&(this.validZipCode=e)}renderSearchResult(){if(!this.loading&&!this.error&&this.showResult)return n("output",{class:"pn-search-results",htmlFor:this.searchId},n("p",{class:"text-row"},n("span",null,this.translation("CLOSEST_DELIVERY_DATE")),n("h3",{class:"delivery-date"},this.zipCodeSearchResult.delivery)),n("p",{class:"text-row"},n("span",null,this.translation("NEXT_DELIVERY_DATE")),n("h3",{class:"delivery-date"},this.zipCodeSearchResult.upcoming)),n("p",{class:"text-row"},n("span",null,this.translation("ZIP_CODE")),n("h3",null,this.zipCodeSearchResult.postalCode,", ",this.zipCodeSearchResult.city||"N/A")))}renderErrorMessage(){if(this.error&&!this.loading)return n("p",{class:"pn-error-text",role:"alert"},n("small",null,this.translation(this.errorMessage)))}render(){return n(r,{key:"2631586788c0b4fc5e5b4914dd44e9b20c87598e"},n("pn-search-field",{key:"0d9743b99db487cb1acb27825fca4e872e25c72d",label:this.translation("PLACEHOLDER_TEXT"),value:this.value,searchid:this.searchId,loading:this.loading,button:"icon",buttonLabel:this.translation("SEARCH"),placeholder:this.translation("PLACEHOLDER_TEXT"),onSearch:e=>this.handleSearch(e.detail)}),this.renderSearchResult(),this.renderErrorMessage())}static get style(){return`${e("pn-zipcode-search")}{display:block;color:#5e554a}${e("pn-zipcode-search")} .pn-search-results{display:flex;flex-direction:column;gap:1em;padding:0 0.75em}${e("pn-zipcode-search")} .pn-search-results span{color:#5e554a}${e("pn-zipcode-search")} .pn-search-results h3{color:#2d2013}${e("pn-zipcode-search")} .pn-error-text{color:#a70707;padding:0 0.75em}${e("pn-zipcode-search")}>${e("pn-search-field")}{width:100%;margin-bottom:1em}`}},[512,"pn-zipcode-search",{language:[1],value:[1025],validZipCode:[32],loading:[32],showResult:[32],zipCodeSearchResult:[32],error:[32],errorMessage:[32]}]),m=E,R=function(){"undefined"!=typeof customElements&&["pn-zipcode-search","pn-button","pn-icon","pn-search-field","pn-spinner"].forEach((s=>{switch(s){case"pn-zipcode-search":customElements.get(e(e(s)))||customElements.define(e(e(s)),E);break;case"pn-button":customElements.get(e(e(s)))||l();break;case"pn-icon":customElements.get(e(e(s)))||h();break;case"pn-search-field":customElements.get(e(e(s)))||p();break;case"pn-spinner":customElements.get(e(e(s)))||d()}}))};export{m as PnZipcodeSearch,R as defineCustomElement}

package/umd/modules/@postnord/web-components/esm/{index-CosyroON.js → index-DyhO6xPY.js}

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { r as registerInstance } from './index-CAEP792y.js';
+import { r as registerInstance } from './index-XKg-ydzH.js';
 import { reduceMotion } from './index.js';
 
 /** Import the State and functions needed to easily animate the height of an element. */