@postnord/pn-marketweb-components 4.3.6 → 4.3.8

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as t,proxyCustomElement as e,HTMLElement as n,forceUpdate as i,h as a,Host as p}from"@stencil/core/internal/client";import{u as s,k as r,e as o}from"./helpers.js";import{a as l}from"./alert_exclamation_circle.js";import{c as u}from"./check.js";import{c}from"./close.js";import{d}from"./pn-button2.js";import{d as h}from"./pn-icon2.js";import{d as f}from"./pn-spinner2.js";const m={SHOW:{sv:"Visa",en:"Show",da:"At vise",fi:"Näytä",no:"Vise"},HIDE:{sv:"Dölj",en:"Hide",da:"Skjule",fi:"Piilottaa",no:"Gjemme seg"},CLEAR:{sv:"Rensa",en:"Clear",da:"Klar",fi:"Asia selvä",no:"Klar"}},b=e(class extends n{constructor(t){super(),!1!==t&&this.__registerHost()}id=`pn-input-${s()}`;idMessage=`${this.id}-message`;prefix;suffix;mo;get hostElement(){return this}offsetLeft=0;offsetRight=0;showHelperSlot=!1;showErrorSlot=!1;showPassword=!1;togglePassword(){this.showPassword=!this.showPassword}label;helpertext;inputid=this.id;value="";language=null;compact=!1;icon;textPrefix;textSuffix;type="text";name;placeholder;autocomplete;maxlength;inputmode;list;pattern;min;max;step;arialabel;ariacontrols;required=!1;disabled=!1;readonly=!1;valid=!1;invalid=!1;error;handleOffset(){requestAnimationFrame((()=>{const t=this.prefix?.clientWidth?this.prefix.clientWidth+8:0,e=this.suffix?.clientWidth?this.suffix.clientWidth+8:0;this.offsetLeft=t,this.offsetRight=e}))}handleMessage(){this.checkSlottedHelper(),this.checkSlottedError()}connectedCallback(){this.mo=new MutationObserver((()=>{i(this.hostElement),this.handleOffset(),this.handleMessage()})),this.mo.observe(this.hostElement,{childList:!0,subtree:!0})}disconnectedCallback(){this.mo&&this.mo.disconnect()}async componentWillLoad(){this.handleMessage(),this.inputid!==this.id&&(this.idMessage=`${this.inputid}-message`),null===this.language&&await r(this.hostElement)}componentDidLoad(){this.handleOffset()}setVal(t){const e=t.composedPath?.()[0];this.value=e.value}clearVal(){const t=new InputEvent("input",{bubbles:!0,data:""}),e=this.hostElement.querySelector("input");this.value="",e.focus(),e.value=this.value,e.dispatchEvent(t)}translate(t){return m?.[t]?.[this.language||o]}hasHelperText(){return this.helpertext?.length>0||this.showHelperSlot}hasErrorMessage(){return this.error?.length>0||this.showErrorSlot}hasError(){return this.hasErrorMessage()||this.invalid||this.showErrorSlot}hasMessage(){return this.hasHelperText()||this.hasErrorMessage()}checkSlottedHelper(){const t=this.hostElement.querySelector("[slot=helpertext]")?.textContent;this.showHelperSlot=!!t?.length}checkSlottedError(){const t=this.hostElement.querySelector("[slot=error]")?.textContent;this.showErrorSlot=!!t?.length}getInputType(){return["text","password","url","tel","search","number","email"].includes(this.type)&&!this.showPassword?this.type:"text"}isPassword(){return!this.disabled&&("password"===this.type||"text"===this.type&&this.showPassword)}passwordText(){return this.translate(this.showPassword?"HIDE":"SHOW")}displayState(){return this.valid||this.hasError()}stateIcon(){return this.valid?u:l}stateColor(){return this.valid?"green700":"warning"}showPrefix(){return this.textPrefix&&!this.icon}showSuffix(){return!this.showPrefix()&&!!this.textSuffix?.length&&!this.isPassword()&&"search"!==this.type}showClear(){return!this.disabled&&!this.readonly&&"search"===this.type&&!!this.value?.length}validLabel(){return this.label?.length>0||this.maxlength>=1}useLabel(){return this.validLabel()&&!this.compact}useCompactLabel(){return this.validLabel()&&this.compact}renderLabel(){return a("label",{htmlFor:this.inputid,class:"pn-input-label","data-compact":this.compact},this.label&&a("span",null,this.label),this.maxlength>=0&&a("span",null,`${this.value.length}/${this.maxlength}`))}render(){return a(p,{key:"3250630450288d09811b7c78bca5091ba93ec7ab"},a("div",{key:"db673ba19f300966eaf5c38136fe7d6143aa661d",class:"pn-input","data-valid":this.valid,"data-error":this.hasError(),style:{"--pn-input-offset-left":`${this.offsetLeft}px`,"--pn-input-offset-right":`${this.offsetRight}px`}},this.useLabel()&&this.renderLabel(),a("div",{key:"b216b7f951be237aed6e46f1ccbcfd29b2a3cad1",class:"pn-input-group"},a("input",{key:"4ee129c35c6a74a359df9d611b236132d7afac38",type:this.getInputType(),id:this.inputid,class:"pn-input-element",name:this.name,placeholder:this.compact?this.placeholder||" ":this.placeholder,autocomplete:this.autocomplete,maxlength:this.maxlength,list:this.list,pattern:this.pattern,min:this.min,max:this.max,step:this.step,value:this.value,inputmode:this.inputmode,disabled:this.disabled,required:this.required,readonly:this.readonly,"aria-label":this.arialabel,"aria-describedby":this.hasMessage()?this.idMessage:null,"aria-controls":this.ariacontrols,"aria-invalid":this.hasError()?.toString(),"data-compact":this.compact,"data-value":this.value?.length>0,onInput:t=>this.setVal(t)}),this.useCompactLabel()&&this.renderLabel(),a("div",{key:"753a9abeaf5bfa5ffb3be10042a76aa7863bce9c",class:"pn-input-eyecandy","data-prefix":!0,ref:t=>this.prefix=t},!!this.icon&&a("pn-icon",{key:"acf1a6e42c9d37cab6f6a0453d8ea674df1cd0c3",icon:this.icon,"aria-hidden":"true"}),this.showPrefix()&&a("span",{key:"70d2eb7e94e790d665a57557595c2bce4855b827",class:"pn-input-text"},this.textPrefix)),a("div",{key:"1dcae3fb8489d2dc6aa7325baea693591acef31c",class:"pn-input-eyecandy","data-suffix":!0,ref:t=>this.suffix=t},this.showSuffix()&&a("span",{key:"05044f3fbea582d507de30a0ff751abaf1da3206",class:"pn-input-text"},this.textSuffix),this.displayState()&&a("pn-icon",{key:"727650c9e6c9b9da2ef43e933fab95b6adc8a6bb","aria-hidden":"true",icon:this.stateIcon(),color:this.stateColor()}),this.isPassword()&&a("pn-button",{key:"4e28eddff11c9aea670a6764aeb0316bccba1c1c",icon:this.showPassword?'<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 7c-5.382 0-7.908 3.33-8.758 4.775a.43.43 0 0 0 0 .45C4.092 13.67 6.618 17 12 17s7.908-3.33 8.758-4.775a.43.43 0 0 0 0-.45C19.908 10.33 17.382 7 12 7M1.518 10.761C2.55 9.005 5.618 5 12 5s9.45 4.005 10.482 5.761a2.43 2.43 0 0 1 0 2.478C21.45 14.995 18.382 19 12 19s-9.45-4.005-10.482-5.761a2.43 2.43 0 0 1 0-2.478M8 12a4 4 0 1 1 8 0 4 4 0 0 1-8 0m4-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4" clip-rule="evenodd"/></svg>':'<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="M1.81 11.727a1 1 0 0 1 1.363.378c.29.513.835 1.343 1.7 2.174a9.5 9.5 0 0 0 3.457 2.128c1.03.361 2.244.593 3.67.593s2.64-.232 3.67-.593a9.5 9.5 0 0 0 3.458-2.128 9.7 9.7 0 0 0 1.698-2.174 1 1 0 0 1 1.742.984 11.5 11.5 0 0 1-1.445 2.001l1.686 2.322a1 1 0 1 1-1.618 1.175l-1.537-2.116a11.4 11.4 0 0 1-2.453 1.48l.763 2.785a1 1 0 1 1-1.928.528l-.73-2.661c-.993.251-2.093.397-3.306.397s-2.313-.146-3.306-.397l-.73 2.661a1 1 0 1 1-1.928-.528l.763-2.786a11.4 11.4 0 0 1-2.453-1.479L2.81 18.587a1 1 0 0 1-1.618-1.175l1.686-2.322a11.5 11.5 0 0 1-1.445-2 1 1 0 0 1 .379-1.363" clip-rule="evenodd"/></svg>',iconOnly:!0,arialabel:this.passwordText(),small:!0,appearance:"light",variant:"borderless",onClick:()=>this.togglePassword()}),this.showClear()&&a("pn-button",{key:"2181adb68c152d837ef03bf9b7e0eb66eb3ea6d2",icon:c,iconOnly:!0,arialabel:this.translate("CLEAR"),small:!0,appearance:"light",variant:"borderless",onClick:()=>this.clearVal()}))),a("p",{key:"b8b1039a61a23efd24ebd71285b15cce7bfc5ec0",class:"pn-input-message",id:this.idMessage,role:this.hasErrorMessage()?"alert":null,hidden:!this.hasMessage()},this.hasHelperText()&&!this.hasError()&&a("span",{key:"4433df6b700cc40ce2ae698d2474f57163b398a1",class:"pn-input-helper"},this.helpertext),a("span",{key:"41c8fb1cbbc17b7c349922cac2ff42244a017e0c",class:"pn-input-helper-slot",hidden:!this.showHelperSlot||this.hasError()},a("slot",{key:"5628bbc8db75161d18ad3e75c259bf3eb5fc9052",name:"helpertext"})),this.hasErrorMessage()&&a("span",{key:"e41145d7fab9f3ae35dd428971c79673d0531301",class:"pn-input-error"},this.error),a("span",{key:"ae85a9420fcb449cc874eadc7a066dd772f097a9",class:"pn-input-error-slot",hidden:!this.showErrorSlot},a("slot",{key:"bdd31ab2f706cac6e243562d035361a381ecfa43",name:"error"})))))}static get watchers(){return{textPrefix:[{handleOffset:0}],textSuffix:[{handleOffset:0}],helpertext:[{handleMessage:0}],error:[{handleMessage:0}]}}static get style(){return`${t("pn-input")}{display:inline-flex;flex-direction:column}${t("pn-input")} .pn-input{--pn-input-offset-left:0em;--pn-input-offset-right:0em}${t("pn-input")} .pn-input-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){${t("pn-input")} .pn-input-label{transition-duration:0s;transition-delay:0s}}${t("pn-input")} .pn-input-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}${t("pn-input")} .pn-input-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${t("pn-input")} .pn-input-label>span{font-size:0.875em}${t("pn-input")} .pn-input-group{position:relative}${t("pn-input")} .pn-input-element{width:100%;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em calc(0.75em + var(--pn-input-offset-right)) 0.75em calc(0.75em + var(--pn-input-offset-left));font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${t("pn-input")} .pn-input-element:-webkit-autofill,${t("pn-input")} .pn-input-element:-webkit-autofill:hover,${t("pn-input")} .pn-input-element:-webkit-autofill:focus,${t("pn-input")} .pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${t("pn-input")} .pn-input-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-input")} .pn-input-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${t("pn-input")} .pn-input-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){${t("pn-input")} .pn-input-element{transition-duration:0s;transition-delay:0s}}${t("pn-input")} .pn-input-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${t("pn-input")} .pn-input-element[data-compact]::placeholder{color:transparent}${t("pn-input")} .pn-input-element[data-compact]:focus+.pn-input-label,${t("pn-input")} .pn-input-element[data-compact]:not(:placeholder-shown)+.pn-input-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${t("pn-input")} .pn-input-element::placeholder{color:#5e554a;font-weight:normal}${t("pn-input")} .pn-input-element:hover{border-color:#005d92}${t("pn-input")} .pn-input-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${t("pn-input")} .pn-input-element:read-only{border-color:#ffffff}${t("pn-input")} .pn-input-element:disabled~.pn-input-eyecandy>${t("pn-icon")}>.pn-icon-svg>path{fill:#969087}${t("pn-input")} .pn-input-element::-webkit-calendar-picker-indicator{visibility:hidden;display:none !important}${t("pn-input")} .pn-input-element::-webkit-textfield-decoration-container,${t("pn-input")} .pn-input-element::-webkit-search-cancel-button,${t("pn-input")} .pn-input-element::-webkit-inner-spin-button,${t("pn-input")} .pn-input-element::-webkit-outer-spin-button,${t("pn-input")} .pn-input-element::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}${t("pn-input")} .pn-input-element[type=number]{appearance:textfield}${t("pn-input")} .pn-input-eyecandy{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:0.5em;height:1.5em}${t("pn-input")} .pn-input-eyecandy[data-prefix]{left:0.75em}${t("pn-input")} .pn-input-eyecandy[data-suffix]{right:0.75em}${t("pn-input")} .pn-input-text{color:#5e554a;font-weight:400;line-height:1.5em}${t("pn-input")} .pn-input-message{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${t("pn-input")} .pn-input-message[hidden],${t("pn-input")} .pn-input-message>span[hidden]{display:none}${t("pn-input")} .pn-input[data-error]>.pn-input-label{color:#a70707}${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element{border-color:#a70707}${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:hover{border-color:#500715}${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill,${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:hover,${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:focus,${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${t("pn-input")} .pn-input[data-error]>.pn-input-message[role=alert]{color:#a70707}${t("pn-input")} .pn-input[data-valid]>.pn-input-label{color:#005e41}${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element{border-color:#005e41}${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:hover{border-color:#002f24}${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#005e41;outline-color:#005e41}${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill,${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:hover,${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:focus,${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #edfbf3 inset;-webkit-text-fill-color:#2d2013}`}},[772,"pn-input",{label:[1],helpertext:[1],inputid:[1],value:[1025],language:[1],compact:[4],icon:[1],textPrefix:[1,"text-prefix"],textSuffix:[1,"text-suffix"],type:[1025],name:[1],placeholder:[1],autocomplete:[1],maxlength:[2],inputmode:[1],list:[1],pattern:[1],min:[8],max:[8],step:[8],arialabel:[1],ariacontrols:[1],required:[4],disabled:[4],readonly:[4],valid:[4],invalid:[4],error:[1],offsetLeft:[32],offsetRight:[32],showHelperSlot:[32],showErrorSlot:[32],showPassword:[32]},void 0,{textPrefix:[{handleOffset:0}],textSuffix:[{handleOffset:0}],helpertext:[{handleMessage:0}],error:[{handleMessage:0}]}]);function g(){"undefined"!=typeof customElements&&["pn-input","pn-button","pn-icon","pn-spinner"].forEach((e=>{switch(e){case"pn-input":customElements.get(t(t(e)))||customElements.define(t(t(e)),b);break;case"pn-button":customElements.get(t(t(e)))||d();break;case"pn-icon":customElements.get(t(t(e)))||h();break;case"pn-spinner":customElements.get(t(t(e)))||f()}}))}export{b as P,g as d}
+import{transformTag as t,proxyCustomElement as e,HTMLElement as n,forceUpdate as i,h as a,Host as p}from"@stencil/core/internal/client";import{u as r,k as s,e as l}from"./helpers.js";import{a as o}from"./alert_exclamation_circle.js";import{c as u}from"./check.js";import{c as d}from"./close.js";import{d as c}from"./pn-button2.js";import{d as h}from"./pn-icon2.js";import{d as f}from"./pn-spinner2.js";const m={SHOW:{sv:"Visa",en:"Show",da:"At vise",fi:"Näytä",no:"Vise"},HIDE:{sv:"Dölj",en:"Hide",da:"Skjule",fi:"Piilottaa",no:"Gjemme seg"},CLEAR:{sv:"Rensa",en:"Clear",da:"Klar",fi:"Asia selvä",no:"Klar"}},b=e(class extends n{constructor(t){super(),!1!==t&&this.__registerHost()}id=`pn-input-${r()}`;idHelper=`${this.id}-helper`;idError=`${this.id}-error`;prefix;suffix;mo;get hostElement(){return this}offsetLeft=0;offsetRight=0;showPassword=!1;togglePassword(){this.showPassword=!this.showPassword}label;helpertext;language=void 0;value="";type="text";name;placeholder;autocomplete;maxlength;inputmode;list;pattern;min;max;step;required=!1;readonly=!1;disabled=!1;compact=!1;icon;textPrefix;textSuffix;valid=!1;invalid=!1;error;pnId;pnAriaLabel;pnAriaLabelledby;pnAriaControls;inputid;arialabel;ariacontrols;handleOffset(){requestAnimationFrame((()=>{const t=this.prefix?.clientWidth?this.prefix.clientWidth+8:0,e=this.suffix?.clientWidth?this.suffix.clientWidth+8:0;this.offsetLeft=t,this.offsetRight=e}))}handleId(){this.idHelper=`${this.getId()}-helper`,this.idError=`${this.getId()}-error`}connectedCallback(){this.mo=new MutationObserver((()=>{i(this.hostElement),this.handleOffset()})),this.mo.observe(this.hostElement,{childList:!0,subtree:!0})}disconnectedCallback(){this.mo&&this.mo.disconnect()}async componentWillLoad(){void 0===this.language&&await s(this.hostElement)}componentDidLoad(){this.handleOffset()}getId(){return this.pnId||this.inputid||this.id}setVal(t){const e=t.composedPath?.()[0];this.value=e.value}clearVal(){const t=new InputEvent("input",{bubbles:!0,data:""}),e=this.hostElement.querySelector("input");this.value="",e.focus(),e.value=this.value,e.dispatchEvent(t)}translate(t){return m?.[t]?.[this.language||l]}hasHelperText(){return this.helpertext?.length>0||this.checkSlottedHelper()}hasErrorMessage(){return this.error?.length>0||this.checkSlottedError()}hasError(){return this.hasErrorMessage()||this.invalid}hideHelpertext(){return this.hasErrorMessage()||!this.hasHelperText()}hideError(){return!this.hasErrorMessage()}checkSlottedHelper(){return!!this.hostElement.querySelector("[slot=helpertext]")}checkSlottedError(){return!!this.hostElement.querySelector("[slot=error]")}getInputType(){return["text","password","url","tel","search","number","email"].includes(this.type)&&!this.showPassword?this.type:"text"}isPassword(){return!this.disabled&&("password"===this.type||"text"===this.type&&this.showPassword)}passwordText(){return this.translate(this.showPassword?"HIDE":"SHOW")}displayState(){return this.valid||this.hasError()}stateIcon(){return this.valid?u:o}stateColor(){return this.valid?"green700":"warning"}showPrefix(){return this.textPrefix&&!this.icon}showSuffix(){return!this.showPrefix()&&!!this.textSuffix?.length&&!this.isPassword()&&"search"!==this.type}showClear(){return!this.disabled&&!this.readonly&&"search"===this.type&&!!this.value?.length}validLabel(){return this.label?.length>0||this.maxlength>=1}useLabel(){return this.validLabel()&&!this.compact}useCompactLabel(){return this.validLabel()&&this.compact}displayLabel(){return!!this.label}getAriaLabel(){return this.displayLabel()||this.pnAriaLabelledby?null:this.pnAriaLabel}getAriaLabelledby(){return this.displayLabel()||this.pnAriaLabel||this.arialabel?null:this.pnAriaLabelledby}getAriaDescribedby(){return this.hasErrorMessage()?this.idError:this.hasHelperText()?this.idHelper:null}renderLabel(){return a("label",{htmlFor:this.getId(),class:"pn-input-label","data-compact":this.compact},this.label&&a("span",null,this.label),this.maxlength>=0&&a("span",null,`${this.value.length}/${this.maxlength}`))}render(){return a(p,{key:"800f4fb8490656e28657f7a4a041ba0c6dc46af2"},a("div",{key:"8defa078a3e541509bc17278751f8e59f59f3bd7",class:"pn-input","data-valid":this.valid,"data-error":this.hasError(),style:{"--pn-input-offset-left":`${this.offsetLeft}px`,"--pn-input-offset-right":`${this.offsetRight}px`}},this.useLabel()&&this.renderLabel(),a("div",{key:"dc01fb7fdb2a60ee89473f0152d833243be4ff8d",class:"pn-input-group"},a("input",{key:"32f63d4aa1c6edd2d10f8876ebd3371cff366eb7",type:this.getInputType(),id:this.getId(),class:"pn-input-element",name:this.name,placeholder:this.compact?this.placeholder||" ":this.placeholder,autocomplete:this.autocomplete,maxlength:this.maxlength,list:this.list,pattern:this.pattern,min:this.min,max:this.max,step:this.step,value:this.value,inputmode:this.inputmode,disabled:this.disabled,required:this.required,readonly:this.readonly,"aria-label":this.getAriaLabel(),"aria-labelledby":this.getAriaLabelledby(),"aria-describedby":this.getAriaDescribedby(),"aria-controls":this.pnAriaControls||this.ariacontrols,"aria-invalid":this.hasError()?.toString(),"data-compact":this.compact,"data-value":this.value?.length>0,onInput:t=>this.setVal(t)}),this.useCompactLabel()&&this.renderLabel(),a("div",{key:"b52d9bfa61569635f422fedc22edd09c768ab9d8",class:"pn-input-eyecandy","data-prefix":!0,ref:t=>this.prefix=t},!!this.icon&&a("pn-icon",{key:"e5035273e663855094ba88ed0b485a4e8ffed56c",icon:this.icon,"aria-hidden":"true"}),this.showPrefix()&&a("span",{key:"1d0e5355c5dbfecf3dbb693589726a233e3b7df6",class:"pn-input-text"},this.textPrefix)),a("div",{key:"e1faa82f19dcfdb6c427d5d2967bfb6694508675",class:"pn-input-eyecandy","data-suffix":!0,ref:t=>this.suffix=t},this.showSuffix()&&a("span",{key:"4c5ecf7c19bf64eea77b21b05d9ffe491bf4b91c",class:"pn-input-text"},this.textSuffix),this.displayState()&&a("pn-icon",{key:"f7014e0c31faf3c563c846e4a7061c6f4b35a64a","aria-hidden":"true",icon:this.stateIcon(),color:this.stateColor()}),this.isPassword()&&a("pn-button",{key:"21518c4f16245de370fcba302b177cfe04e91904",icon:this.showPassword?'<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 7c-5.382 0-7.908 3.33-8.758 4.775a.43.43 0 0 0 0 .45C4.092 13.67 6.618 17 12 17s7.908-3.33 8.758-4.775a.43.43 0 0 0 0-.45C19.908 10.33 17.382 7 12 7M1.518 10.761C2.55 9.005 5.618 5 12 5s9.45 4.005 10.482 5.761a2.43 2.43 0 0 1 0 2.478C21.45 14.995 18.382 19 12 19s-9.45-4.005-10.482-5.761a2.43 2.43 0 0 1 0-2.478M8 12a4 4 0 1 1 8 0 4 4 0 0 1-8 0m4-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4" clip-rule="evenodd"/></svg>':'<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="M1.81 11.727a1 1 0 0 1 1.363.378c.29.513.835 1.343 1.7 2.174a9.5 9.5 0 0 0 3.457 2.128c1.03.361 2.244.593 3.67.593s2.64-.232 3.67-.593a9.5 9.5 0 0 0 3.458-2.128 9.7 9.7 0 0 0 1.698-2.174 1 1 0 0 1 1.742.984 11.5 11.5 0 0 1-1.445 2.001l1.686 2.322a1 1 0 1 1-1.618 1.175l-1.537-2.116a11.4 11.4 0 0 1-2.453 1.48l.763 2.785a1 1 0 1 1-1.928.528l-.73-2.661c-.993.251-2.093.397-3.306.397s-2.313-.146-3.306-.397l-.73 2.661a1 1 0 1 1-1.928-.528l.763-2.786a11.4 11.4 0 0 1-2.453-1.479L2.81 18.587a1 1 0 0 1-1.618-1.175l1.686-2.322a11.5 11.5 0 0 1-1.445-2 1 1 0 0 1 .379-1.363" clip-rule="evenodd"/></svg>',iconOnly:!0,arialabel:this.passwordText(),small:!0,appearance:"light",variant:"borderless",onClick:()=>this.togglePassword()}),this.showClear()&&a("pn-button",{key:"60263a255ee8c8d3ed72ea89a26abfbe9be11d0d",icon:d,iconOnly:!0,arialabel:this.translate("CLEAR"),small:!0,appearance:"light",variant:"borderless",onClick:()=>this.clearVal()}))),a("p",{key:"d23165556ffcdbfcf7229a04f5c1ea8686432c97",id:this.idHelper,class:"pn-input-message",hidden:this.hideHelpertext()},!!this.helpertext&&a("span",{key:"b7e31855d677953bbc7a4f65cb0b26a5eac8887b"},this.helpertext),a("slot",{key:"a6bbaeceb31e2cc38d1e110b900e13b4f0957c6e",name:"helpertext"})),a("p",{key:"3668fbc1a512f92d3f5a2c6f1f7d86cf04df148b",id:this.idError,class:"pn-input-message",role:"alert",hidden:this.hideError()},!!this.error&&a("span",{key:"c14fb6ab8e17c7d17813c83c0993f95d079f8274"},this.error),a("slot",{key:"75ba01e945315e6a3bbf2f5e5ac34c73fe7ab57f",name:"error"}))))}static get watchers(){return{textPrefix:[{handleOffset:0}],textSuffix:[{handleOffset:0}],inputid:[{handleId:0}],pnId:[{handleId:1}]}}static get style(){return`${t("pn-input")}{display:inline-flex;flex-direction:column}${t("pn-input")} .pn-input{--pn-input-offset-left:0em;--pn-input-offset-right:0em}${t("pn-input")} .pn-input-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){${t("pn-input")} .pn-input-label{transition-duration:0s;transition-delay:0s}}${t("pn-input")} .pn-input-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}${t("pn-input")} .pn-input-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${t("pn-input")} .pn-input-label>span{font-size:0.875em}${t("pn-input")} .pn-input-group{position:relative}${t("pn-input")} .pn-input-element{width:100%;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em calc(0.75em + var(--pn-input-offset-right)) 0.75em calc(0.75em + var(--pn-input-offset-left));font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${t("pn-input")} .pn-input-element:-webkit-autofill,${t("pn-input")} .pn-input-element:-webkit-autofill:hover,${t("pn-input")} .pn-input-element:-webkit-autofill:focus,${t("pn-input")} .pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${t("pn-input")} .pn-input-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-input")} .pn-input-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${t("pn-input")} .pn-input-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){${t("pn-input")} .pn-input-element{transition-duration:0s;transition-delay:0s}}${t("pn-input")} .pn-input-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${t("pn-input")} .pn-input-element[data-compact]::placeholder{color:transparent}${t("pn-input")} .pn-input-element[data-compact]:focus+.pn-input-label,${t("pn-input")} .pn-input-element[data-compact]:not(:placeholder-shown)+.pn-input-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${t("pn-input")} .pn-input-element::placeholder{color:#5e554a;font-weight:normal}${t("pn-input")} .pn-input-element:hover{border-color:#005d92}${t("pn-input")} .pn-input-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${t("pn-input")} .pn-input-element:read-only{border-color:#ffffff}${t("pn-input")} .pn-input-element:disabled~.pn-input-eyecandy>${t("pn-icon")} .pn-icon-svg>path{fill:#969087}${t("pn-input")} .pn-input-element::-webkit-calendar-picker-indicator{visibility:hidden;display:none !important}${t("pn-input")} .pn-input-element::-webkit-textfield-decoration-container,${t("pn-input")} .pn-input-element::-webkit-search-cancel-button,${t("pn-input")} .pn-input-element::-webkit-inner-spin-button,${t("pn-input")} .pn-input-element::-webkit-outer-spin-button,${t("pn-input")} .pn-input-element::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}${t("pn-input")} .pn-input-element[type=number]{appearance:textfield}${t("pn-input")} .pn-input-eyecandy{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:0.5em;height:1.5em}${t("pn-input")} .pn-input-eyecandy[data-prefix]{left:0.75em}${t("pn-input")} .pn-input-eyecandy[data-suffix]{right:0.75em}${t("pn-input")} .pn-input-text{color:#5e554a;font-weight:400;line-height:1.5em}${t("pn-input")} .pn-input-message{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${t("pn-input")} .pn-input-message[hidden],${t("pn-input")} .pn-input-message>span[hidden]{display:none}${t("pn-input")} .pn-input[data-error]>.pn-input-label{color:#a70707}${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element{border-color:#a70707}${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:hover{border-color:#500715}${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill,${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:hover,${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:focus,${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${t("pn-input")} .pn-input[data-error]>.pn-input-message[role=alert]{color:#a70707}${t("pn-input")} .pn-input[data-valid]>.pn-input-label{color:#005e41}${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element{border-color:#005e41}${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:hover{border-color:#002f24}${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#005e41;outline-color:#005e41}${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill,${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:hover,${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:focus,${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #edfbf3 inset;-webkit-text-fill-color:#2d2013}`}},[772,"pn-input",{label:[1],helpertext:[1],language:[1],value:[1025],type:[1025],name:[1],placeholder:[1],autocomplete:[1],maxlength:[2],inputmode:[1],list:[1],pattern:[1],min:[8],max:[8],step:[8],required:[4],readonly:[4],disabled:[4],compact:[4],icon:[1],textPrefix:[1,"text-prefix"],textSuffix:[1,"text-suffix"],valid:[4],invalid:[4],error:[1],pnId:[1,"pn-id"],pnAriaLabel:[1,"pn-aria-label"],pnAriaLabelledby:[1,"pn-aria-labelledby"],pnAriaControls:[1,"pn-aria-controls"],inputid:[1],arialabel:[1],ariacontrols:[1],offsetLeft:[32],offsetRight:[32],showPassword:[32]},void 0,{textPrefix:[{handleOffset:0}],textSuffix:[{handleOffset:0}],inputid:[{handleId:0}],pnId:[{handleId:1}]}]);function g(){"undefined"!=typeof customElements&&["pn-input","pn-button","pn-icon","pn-spinner"].forEach((e=>{switch(e){case"pn-input":customElements.get(t(t(e)))||customElements.define(t(t(e)),b);break;case"pn-button":customElements.get(t(t(e)))||c();break;case"pn-icon":customElements.get(t(t(e)))||h();break;case"pn-spinner":customElements.get(t(t(e)))||f()}}))}export{b as P,g as d}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as a,proxyCustomElement as e,HTMLElement as o,createEvent as t,forceUpdate as n,h as i,Host as d}from"@stencil/core/internal/client";import{r as l,k as s,e as r,i as m}from"./helpers.js";import{c as p}from"./close.js";import{d as c}from"./pn-button2.js";import{d as h}from"./pn-icon2.js";import{d as f}from"./pn-spinner2.js";const b={CLOSE_MODAL:{en:"Close dialog",sv:"Stäng dialogrutan",da:"Luk dialogboks",fi:"Sulje valintaikkuna",no:"Lukk dialogboksen"}},u=e(class extends o{constructor(a){super(),!1!==a&&this.__registerHost(),this.modalToggle=t(this,"modalToggle",7),this.modalVisiblity=t(this,"modalVisiblity",7),this.close=t(this,"close",7)}mo;standardAnimationDuration=400;animationDuration=this.standardAnimationDuration;modalTimeout;modalElement;modalContainer;modalPicture;get hostElement(){return this}isClosing=!1;isOpening=!1;removeOverflow=!1;label;helpertext;language=null;open=!1;persistent=!1;hideClose=!1;allowOverflow=!1;sheet=!1;maxWidth=null;handleOpen(){this.open?this.openModal():(this.closeModal(),this.close.emit(!0)),this.handleOverflow(),clearTimeout(this.modalTimeout),this.isClosing=!this.open&&!0,this.animationDuration=l()?0:this.standardAnimationDuration,this.modalTimeout=setTimeout((()=>{this.isClosing=!1,this.modalVisiblity.emit({visible:this.open})}),this.animationDuration)}handleMaxWidth(){this.modalElement.style.setProperty("--pn-modal-max-width",this.maxWidth||"45em")}handleOverflow(){this.allowOverflow&&this.setOverflow()}modalToggle;modalVisiblity;close;connectedCallback(){this.mo=new MutationObserver((()=>n(this.hostElement))),this.mo.observe(this.hostElement,{childList:!0,subtree:!0})}disconnectedCallback(){this.mo&&this.mo.disconnect()}async componentWillLoad(){null===this.language&&await s(this.hostElement)}componentDidLoad(){this.handleMaxWidth(),this.open&&this.openModal()}translate(a){return b?.[a]?.[this.language||r]||a}showImage(){return!!this.modalPicture?.innerHTML}showHeader(){return!!(this.label||this.helpertext||this.hostElement.querySelector('[slot="header"]')?.textContent)}setOverflow(){this.removeOverflow=!this.hasOverflow()}hasOverflow(){const a=m()?.95:.85;return this.modalContainer?.scrollHeight>innerHeight*a}isSameModal(a){return this.modalElement.isSameNode(a)}handleKeyboard(a){"Escape"===a.key&&(a.preventDefault(),a.stopImmediatePropagation(),this.persistent||this.setModalClose())}clickModalBackground(a){const{clientY:e,clientX:o}=a,t=a.target.localName!==this.modalElement.localName,n=!this.isSameModal(a.target);if(t||n)return;const{top:i,left:d,height:l,width:s}=this.modalElement.getBoundingClientRect();i<=e&&e<=i+l&&d<=o&&o<=d+s||this.persistent||this.toggleOpen(!1)}setModalClose(){this.toggleOpen(!1)}closeModal(){this.modalElement.close()}openModal(){this.modalElement.showModal()}toggleOpen(a){this.open=a??!this.open}render(){return i(d,{key:"d965a05833b311fed1f1f7ba245c9401ab77b765"},i("dialog",{key:"d60d253a75dd3f82b684fce659a9a917d6181c62",class:"pn-modal","data-closing":this.isClosing,"data-sheet":this.sheet,"data-image":this.showImage(),"data-allow-overflow":this.removeOverflow,onClose:()=>this.setModalClose(),onCancel:()=>this.setModalClose(),onToggle:()=>this.modalToggle.emit({open:this.open}),onKeyDown:a=>this.handleKeyboard(a),onClick:a=>this.clickModalBackground(a),ref:a=>this.modalElement=a},!this.hideClose&&i("pn-button",{key:"4d25a2e559a8aca6286a9fc7a94f82285bd8ad4e",small:!0,class:"pn-modal-close-button",icon:p,iconOnly:!0,arialabel:this.translate("CLOSE_MODAL"),appearance:"light",variant:"borderless",type:"button",onPnClick:()=>this.setModalClose()}),i("div",{key:"3953eef2505ccda4786177c01ae9af92874d65a1",class:"pn-modal-container",ref:a=>this.modalContainer=a},i("div",{key:"de0730ef36d305f2ff2652510838df85bdbdee5e",class:"pn-modal-image",hidden:!this.showImage()},i("picture",{key:"c26ae160c243b630d7a1ba71a8d4cac523096cfd",class:"pn-modal-picture",ref:a=>this.modalPicture=a},i("slot",{key:"4d2425b17367b4ccd2215e54cfedbee6731a9daf",name:"image"}))),i("header",{key:"815bef72c5b9a2982b7dd62059314ef120221ee0",class:"pn-modal-header",hidden:!this.showHeader()},this.label&&i("h2",{key:"41ae0e9a7d8adca27764bf6be026d0bc59df9b90",class:"pn-modal-label"},this.label),this.helpertext&&i("p",{key:"4fac7c6daf49eaff4a56b7c217f49e7f0507299f",class:"pn-modal-text"},this.helpertext),i("slot",{key:"8ce017defaa66a4bfec5ef38398b3104ed0ff7f9",name:"header"})),i("section",{key:"3ad1dc180db0ad42a4fa99dc6c9a17fc153af362",class:"pn-modal-content"},i("slot",{key:"bddef9aa3cd8b78be3facd5ebd3e88d72b9eb219"})),i("nav",{key:"edc771b8ca813ed6c9b20f688847c9c22072f0a1",class:"pn-modal-buttons"},i("slot",{key:"75dcf50e07c985f95836251881b8c214bc1b58c6",name:"buttons"})))))}static get watchers(){return{open:[{handleOpen:0}],maxWidth:[{handleMaxWidth:0}]}}static get style(){return`${a("pn-modal")} .pn-modal{--pn-modal-max-width:45em;z-index:10000;position:fixed;top:0;inset-block-start:0;inset-block-end:0;margin:auto;padding:0;max-width:var(--pn-modal-max-width);overflow:hidden;border:0;border-radius:1.5em;box-shadow:0 0.25em 0.875em rgba(0, 0, 0, 0.18), 0 1.625em 3.5em rgba(0, 0, 0, 0.22);background-color:#ffffff;display:none;opacity:0;transform:translate(0%, 20%);outline:0.2rem solid transparent;outline-offset:0.2rem}${a("pn-modal")} .pn-modal:focus-visible{outline-color:#ffffff}${a("pn-modal")} .pn-modal{transition-property:opacity, overlay, display, transform, outline-color, border-radius;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${a("pn-modal")} .pn-modal{transition-duration:0s;transition-delay:0s}}${a("pn-modal")} .pn-modal{transition-behavior:allow-discrete}${a("pn-modal")} .pn-modal[data-allow-overflow]{overflow:unset}${a("pn-modal")} .pn-modal[data-allow-overflow] .pn-modal-container{overflow:unset}${a("pn-modal")} .pn-modal[data-allow-overflow] .pn-modal-picture{border-top-right-radius:1.5em}${a("pn-modal")} .pn-modal[data-image]{padding-top:0}${a("pn-modal")} .pn-modal[data-sheet]{margin:0 0 0 auto;height:100%;max-height:unset;border-radius:1.5em 0 0 1.5em;transform:translate(20%, 0%)}${a("pn-modal")} .pn-modal[data-sheet] .pn-modal-container{max-height:unset}${a("pn-modal")} .pn-modal[open]{display:flex;opacity:1;transform:translate(0%, 0%)}@starting-style{${a("pn-modal")} .pn-modal[open]{display:flex;opacity:0;transform:translate(0%, 20%)}}${a("pn-modal")} .pn-modal[open][data-sheet]{transform:translate(0%, 0%)}@starting-style{${a("pn-modal")} .pn-modal[open][data-sheet]{transform:translate(20%, 0%)}}${a("pn-modal")} .pn-modal::backdrop{background-color:rgba(0, 0, 0, 0);transition-property:opacity, background-color, overlay, display;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${a("pn-modal")} .pn-modal::backdrop{transition-duration:0s;transition-delay:0s}}${a("pn-modal")} .pn-modal::backdrop{transition-behavior:allow-discrete}${a("pn-modal")} .pn-modal[open]::backdrop{background-color:rgba(0, 0, 0, 0.55)}@starting-style{${a("pn-modal")} .pn-modal[open]::backdrop{background-color:rgba(0, 0, 0, 0)}}${a("pn-modal")} .pn-modal-container{max-height:85vh;display:flex;flex-direction:column;align-items:stretch;overflow:hidden auto}${a("pn-modal")} .pn-modal-container::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${a("pn-modal")} .pn-modal-container::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${a("pn-modal")} .pn-modal-container::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${a("pn-modal")} .pn-modal-container::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${a("pn-modal")} .pn-modal-container::-webkit-scrollbar-corner,${a("pn-modal")} .pn-modal-container::-webkit-scrollbar-button{display:none}${a("pn-modal")} .pn-modal-close-button{position:absolute;z-index:10;right:0.75em;top:0.75em}${a("pn-modal")} .pn-modal-header{display:flex;flex-direction:column;gap:0.5em;padding:clamp(1em, 5vw, 1.5em)}${a("pn-modal")} .pn-modal-header[hidden]{display:none}${a("pn-modal")} .pn-modal-header:not([hidden])+.pn-modal-content:not([hidden]){padding-top:0}${a("pn-modal")} .pn-modal-label{line-height:1.5;padding-right:1.5em;margin:0}${a("pn-modal")} .pn-modal-text{margin:0}${a("pn-modal")} .pn-modal-content{padding:clamp(1em, 5vw, 1.5em)}${a("pn-modal")} .pn-modal-image{position:relative;display:flex;flex-direction:column}${a("pn-modal")} .pn-modal-image[hidden]{display:none}${a("pn-modal")} .pn-modal-picture{margin:0;padding:0;display:block;overflow:hidden;border-radius:1.5em 0 0 0}${a("pn-modal")} .pn-modal-picture>*[slot=image]{display:block;height:100%;width:100%;object-fit:cover}${a("pn-modal")} .pn-modal-buttons{background-color:#ffffff;border-top:0.0625em solid #d3cecb;padding:clamp(1em, 5vw, 1.5em);display:flex;justify-content:flex-end;gap:0.5em;border-radius:0 0 1.5em 1.5em}${a("pn-modal")} .pn-modal-buttons>[slot=buttons]:not(${a("pn-button")}){display:flex;justify-content:flex-end;gap:0.5em}${a("pn-modal")} .pn-modal-buttons>[slot=buttons]:not(${a("pn-button")})>[data-left]{margin-right:auto}${a("pn-modal")} .pn-modal-buttons>[data-left]{margin-right:auto}${a("pn-modal")} .pn-modal-buttons:empty{display:none}@media (max-width: 55em){${a("pn-modal")} .pn-modal{max-height:95vh;margin-bottom:0;bottom:0;transform:translate(0%, 20%);border-bottom-left-radius:0;border-bottom-right-radius:0}}`}},[772,"pn-modal",{label:[1],helpertext:[1],language:[1],open:[1540],persistent:[4],hideClose:[4,"hide-close"],allowOverflow:[4,"allow-overflow"],sheet:[4],maxWidth:[1,"max-width"],isClosing:[32],isOpening:[32],removeOverflow:[32]},[[9,"resize","handleOverflow"]],{open:[{handleOpen:0}],maxWidth:[{handleMaxWidth:0}]}]),g=u,k=function(){"undefined"!=typeof customElements&&["pn-modal","pn-button","pn-icon","pn-spinner"].forEach((e=>{switch(e){case"pn-modal":customElements.get(a(a(e)))||customElements.define(a(a(e)),u);break;case"pn-button":customElements.get(a(a(e)))||c();break;case"pn-icon":customElements.get(a(a(e)))||h();break;case"pn-spinner":customElements.get(a(a(e)))||f()}}))};export{g as PnModal,k as defineCustomElement}
+import{transformTag as a,proxyCustomElement as o,HTMLElement as e,createEvent as t,forceUpdate as n,h as i,Host as d}from"@stencil/core/internal/client";import{r as l,k as s,e as r,i as m}from"./helpers.js";import{c as p}from"./close.js";import{d as c}from"./pn-button2.js";import{d as h}from"./pn-icon2.js";import{d as b}from"./pn-spinner2.js";const f={CLOSE_MODAL:{en:"Close dialog",sv:"Stäng dialogrutan",da:"Luk dialogboks",fi:"Sulje valintaikkuna",no:"Lukk dialogboksen"}},u=o(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.modalToggle=t(this,"modalToggle",7),this.modalVisibility=t(this,"modalVisibility",7),this.modalVisiblity=t(this,"modalVisiblity",7),this.close=t(this,"close",7)}mo;standardAnimationDuration=400;animationDuration=this.standardAnimationDuration;modalTimeout;modalElement;modalContainer;modalPicture;get hostElement(){return this}isClosing=!1;isOpening=!1;removeOverflow=!1;label;helpertext;language=null;pnId=null;open=!1;persistent=!1;hideClose=!1;allowOverflow=!1;sheet=!1;maxWidth=null;handleOpen(){this.open?this.openModal():(this.closeModal(),this.close.emit(!0)),this.handleOverflow(),clearTimeout(this.modalTimeout),this.isClosing=!this.open&&!0,this.animationDuration=l()?0:this.standardAnimationDuration,this.modalTimeout=setTimeout((()=>{this.isClosing=!1,this.modalVisiblity.emit({visible:this.open}),this.modalVisibility.emit({visible:this.open})}),this.animationDuration)}handleMaxWidth(){this.modalElement.style.setProperty("--pn-modal-max-width",this.maxWidth||"45em")}handleOverflow(){this.allowOverflow&&this.setOverflow()}modalToggle;modalVisibility;modalVisiblity;close;connectedCallback(){this.mo=new MutationObserver((()=>n(this.hostElement))),this.mo.observe(this.hostElement,{childList:!0,subtree:!0})}disconnectedCallback(){this.mo&&this.mo.disconnect()}async componentWillLoad(){null===this.language&&await s(this.hostElement)}componentDidLoad(){this.handleMaxWidth(),this.open&&this.openModal()}translate(a){return f?.[a]?.[this.language||r]||a}showImage(){return!!this.modalPicture?.innerHTML}showHeader(){return!!(this.label||this.helpertext||this.hostElement.querySelector('[slot="header"]')?.textContent)}setOverflow(){this.removeOverflow=!this.hasOverflow()}hasOverflow(){const a=m()?.95:.85;return this.modalContainer?.scrollHeight>innerHeight*a}isSameModal(a){return this.modalElement.isSameNode(a)}handleKeyboard(a){"Escape"===a.key&&(a.preventDefault(),a.stopImmediatePropagation(),this.persistent||this.setModalClose())}clickModalBackground(a){const{clientY:o,clientX:e}=a,t=a.target.localName!==this.modalElement.localName,n=!this.isSameModal(a.target);if(t||n)return;const{top:i,left:d,height:l,width:s}=this.modalElement.getBoundingClientRect();i<=o&&o<=i+l&&d<=e&&e<=d+s||this.persistent||this.toggleOpen(!1)}setModalClose(){this.toggleOpen(!1)}closeModal(){this.modalElement.close()}openModal(){this.modalElement.showModal()}toggleOpen(a){this.open=a??!this.open}render(){return i(d,{key:"5b50fca359ed20cebcbdead766d08c2439463b4c"},i("dialog",{key:"43eb7bb4f09c6ce9a665f7478f25b1ae4a253562",id:this.pnId,class:"pn-modal","data-closing":this.isClosing,"data-sheet":this.sheet,"data-image":this.showImage(),"data-allow-overflow":this.removeOverflow,onClose:()=>this.setModalClose(),onCancel:()=>this.setModalClose(),onToggle:()=>this.modalToggle.emit({open:this.open}),onKeyDown:a=>this.handleKeyboard(a),onClick:a=>this.clickModalBackground(a),ref:a=>this.modalElement=a},!this.hideClose&&i("pn-button",{key:"0bdc665fe32c8531edb073166fe8940d12360661",small:!0,class:"pn-modal-close-button",icon:p,iconOnly:!0,arialabel:this.translate("CLOSE_MODAL"),appearance:"light",variant:"borderless",type:"button",onPnClick:()=>this.setModalClose()}),i("div",{key:"ce9529f76b572f6681e1b75528bcab67e3246dbd",class:"pn-modal-container",ref:a=>this.modalContainer=a},i("div",{key:"a2addec74c8af3fc9084a0d6faba9053a255bf86",class:"pn-modal-image",hidden:!this.showImage()},i("picture",{key:"4341ae13d01268cc0f9df74bf417522116bed2d9",class:"pn-modal-picture",ref:a=>this.modalPicture=a},i("slot",{key:"99a643af231cdcd76ad2dafbcdbaf4fbabac5390",name:"image"}))),i("header",{key:"849eea60adcfb7c3bbba8687dc49edf752004617",class:"pn-modal-header",hidden:!this.showHeader()},this.label&&i("h2",{key:"e57185ebd04cd622ceca5acb81c6606747afa6f9",class:"pn-modal-label"},this.label),this.helpertext&&i("p",{key:"2e0290387a2b96f3eb70db67dd7ac349c5c4fe9e",class:"pn-modal-text"},this.helpertext),i("slot",{key:"e05316839bfc8883a2e8f4c5079054e9edcd3859",name:"header"})),i("section",{key:"d59b818c18159c106df1f6c3b2b3f747f1b6af29",class:"pn-modal-content"},i("slot",{key:"c740eb0b7909c9fa5878caecb66887f5bb9b2b73"})),i("nav",{key:"22971631737901988e27f4f01c311d2d76839c6a",class:"pn-modal-buttons","data-divider":this.sheet},i("slot",{key:"3c0e8e66db96d8abc8f718270d94e09b2ad90320",name:"buttons"})))))}static get watchers(){return{open:[{handleOpen:0}],maxWidth:[{handleMaxWidth:0}]}}static get style(){return`${a("pn-modal")} .pn-modal{--pn-modal-max-width:45em;z-index:10000;position:fixed;top:0;inset-block-start:0;inset-block-end:0;margin:auto;padding:0;max-width:var(--pn-modal-max-width);overflow:hidden;border:0;border-radius:1.5em;box-shadow:0 0.25em 0.875em rgba(0, 0, 0, 0.18), 0 1.625em 3.5em rgba(0, 0, 0, 0.22);background-color:#ffffff;display:none;opacity:0;transform:translate(0%, 20%);outline:0.2rem solid transparent;outline-offset:0.2rem}${a("pn-modal")} .pn-modal:focus-visible{outline-color:#ffffff}${a("pn-modal")} .pn-modal{transition-property:opacity, overlay, display, transform, outline-color, border-radius;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${a("pn-modal")} .pn-modal{transition-duration:0s;transition-delay:0s}}${a("pn-modal")} .pn-modal{transition-behavior:allow-discrete}${a("pn-modal")} .pn-modal[data-allow-overflow]{overflow:unset}${a("pn-modal")} .pn-modal[data-allow-overflow] .pn-modal-container{overflow:unset}${a("pn-modal")} .pn-modal[data-allow-overflow] .pn-modal-picture{border-top-right-radius:1.5em}${a("pn-modal")} .pn-modal[data-image]{padding-top:0}${a("pn-modal")} .pn-modal[data-sheet]{margin:0 0 0 auto;height:100%;max-height:unset;border-radius:1.5em 0 0 1.5em;transform:translate(20%, 0%)}${a("pn-modal")} .pn-modal[data-sheet] .pn-modal-container{max-height:unset}${a("pn-modal")} .pn-modal[open]{display:flex;opacity:1;transform:translate(0%, 0%)}@starting-style{${a("pn-modal")} .pn-modal[open]{display:flex;opacity:0;transform:translate(0%, 20%)}}${a("pn-modal")} .pn-modal[open][data-sheet]{transform:translate(0%, 0%)}@starting-style{${a("pn-modal")} .pn-modal[open][data-sheet]{transform:translate(20%, 0%)}}${a("pn-modal")} .pn-modal::backdrop{background-color:rgba(0, 0, 0, 0);transition-property:opacity, background-color, overlay, display;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${a("pn-modal")} .pn-modal::backdrop{transition-duration:0s;transition-delay:0s}}${a("pn-modal")} .pn-modal::backdrop{transition-behavior:allow-discrete}${a("pn-modal")} .pn-modal[open]::backdrop{background-color:rgba(0, 0, 0, 0.55)}@starting-style{${a("pn-modal")} .pn-modal[open]::backdrop{background-color:rgba(0, 0, 0, 0)}}${a("pn-modal")} .pn-modal-container{max-height:85vh;display:flex;flex-direction:column;align-items:stretch;overflow:hidden auto}${a("pn-modal")} .pn-modal-container::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${a("pn-modal")} .pn-modal-container::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${a("pn-modal")} .pn-modal-container::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${a("pn-modal")} .pn-modal-container::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${a("pn-modal")} .pn-modal-container::-webkit-scrollbar-corner,${a("pn-modal")} .pn-modal-container::-webkit-scrollbar-button{display:none}${a("pn-modal")} .pn-modal-close-button{position:absolute;z-index:10;right:0.75em;top:0.75em}${a("pn-modal")} .pn-modal-header{display:flex;flex-direction:column;gap:0.5em;padding:clamp(1em, 5vw, 1.5em)}${a("pn-modal")} .pn-modal-header[hidden]{display:none}${a("pn-modal")} .pn-modal-header:not([hidden])+.pn-modal-content:not([hidden]){padding-top:0}${a("pn-modal")} .pn-modal-label{line-height:1.5;padding-right:1.5em;margin:0}${a("pn-modal")} .pn-modal-text{margin:0}${a("pn-modal")} .pn-modal-content{padding:clamp(1em, 5vw, 1.5em)}${a("pn-modal")} .pn-modal-image{position:relative;display:flex;flex-direction:column}${a("pn-modal")} .pn-modal-image[hidden]{display:none}${a("pn-modal")} .pn-modal-picture{margin:0;padding:0;display:block;overflow:hidden;border-radius:1.5em 0 0 0}${a("pn-modal")} .pn-modal-picture>*[slot=image]{display:block;height:100%;width:100%;object-fit:cover}${a("pn-modal")} .pn-modal-buttons{background-color:#ffffff;padding:clamp(1em, 5vw, 1.5em);display:flex;justify-content:flex-end;gap:0.5em;border-radius:0 0 1.5em 1.5em}${a("pn-modal")} .pn-modal-buttons[data-divider]{border-top:0.0625em solid #d3cecb;margin-top:auto}${a("pn-modal")} .pn-modal-buttons>[slot=buttons]:not(${a("pn-button")}){display:flex;justify-content:flex-end;gap:0.5em}${a("pn-modal")} .pn-modal-buttons>[slot=buttons]:not(${a("pn-button")})>[data-left]{margin-right:auto}${a("pn-modal")} .pn-modal-buttons>[data-left]{margin-right:auto}${a("pn-modal")} .pn-modal-buttons:empty{display:none}@media (max-width: 55em){${a("pn-modal")} .pn-modal{max-height:95vh;margin-bottom:0;bottom:0;transform:translate(0%, 20%);border-bottom-left-radius:0;border-bottom-right-radius:0}}`}},[772,"pn-modal",{label:[1],helpertext:[1],language:[1],pnId:[1,"pn-id"],open:[1540],persistent:[4],hideClose:[4,"hide-close"],allowOverflow:[4,"allow-overflow"],sheet:[4],maxWidth:[1,"max-width"],isClosing:[32],isOpening:[32],removeOverflow:[32]},[[9,"resize","handleOverflow"]],{open:[{handleOpen:0}],maxWidth:[{handleMaxWidth:0}]}]),g=u,y=function(){"undefined"!=typeof customElements&&["pn-modal","pn-button","pn-icon","pn-spinner"].forEach((o=>{switch(o){case"pn-modal":customElements.get(a(a(o)))||customElements.define(a(a(o)),u);break;case"pn-button":customElements.get(a(a(o)))||c();break;case"pn-icon":customElements.get(a(a(o)))||h();break;case"pn-spinner":customElements.get(a(a(o)))||b()}}))};export{g as PnModal,y as defineCustomElement}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as e,proxyCustomElement as t,Mixin as i,createEvent as n,h as l,Host as o}from"@stencil/core/internal/client";import{a as s}from"./index2.js";import{a as c}from"./alert_exclamation_circle.js";import{c as r}from"./chevron_down.js";import{c as a}from"./close.js";import{u as p,k as u,o as m,j as d,e as h}from"./helpers.js";import{d as f}from"./pn-icon2.js";const b={SELECT_AN_OPTION:{en:"Select an option",sv:"Välj ett alternativ",da:"Vælg en mulighed",fi:"Valitse vaihtoehto",no:"Velg et alternativ"},SELECT_ALL_OPTIONS:{en:"Select all options",sv:"Välj alla alternativ",da:"Vælg alle muligheder",fi:"Valitse kaikki vaihtoehdot",no:"Velg alle alternativer"},SELECT_FOUND_OPTIONS:{en:"Select {number} options",sv:"Välj {number} alternativ",da:"Vælg {number} muligheder",fi:"Valitse {number} vaihtoehtoa",no:"Velg {number} alternativer"},SELECTED_OPTIONS:{en:"Selected options.",sv:"Valda alternativ.",da:"Valgte muligheder.",fi:"Valitut vaihtoehdot.",no:"Valgte alternativer."},BUTTON_OPEN:{en:"Open list",sv:"Öppna listan",da:"Open list",fi:"Open list",no:"Open list"},BUTTON_CLOSE:{en:"Close list",sv:"Stäng listan",da:"Close list",fi:"Close list",no:"Close list"},REMOVE:{en:"Remove",sv:"Ta bort",da:"Remove",fi:"Remove",no:"Remove"},REMOVED:{en:"Removed",sv:"Tog bort",da:"Fjernet",fi:"Poistettu",no:"Fjernet"},MORE_OPTION:{en:"more option.",sv:"alternativ till.",da:"mulighed mere.",fi:"vaihtoehto lisää.",no:"alternativ til."},MORE_OPTIONS:{en:"more options.",sv:"fler alternativ.",da:"more options.",fi:"more options.",no:"more options."},SEARCH:{en:"Search",sv:"Sök",da:"Søg",fi:"Hae",no:"Søk"},RESULTS_FOUND:{en:"options found",sv:"alternativ hittades",da:"muligheder fundet",fi:"vaihtoehtoja löytyi",no:"alternativer funnet"},NO_SEARCH_RESULTS:{en:"No options found",sv:"Inga alternativ hittades",da:"Ingen muligheder fundet",fi:"Vaihtoehtoja ei löytynyt",no:"Finner ingen alternativer"},NO_OPTIONS:{en:"No options available",sv:"Inga alternativ tillgängliga",da:"Ingen tilgængelige muligheder",fi:"Ei vaihtoehtoja",no:"Ingen tilgjengelige alternativer"}},g=t(class extends(i(s)){constructor(e){super(!1),!1!==e&&this.__registerHost(),this.toggleSelect=n(this,"toggleSelect",7),this.allOptions=n(this,"allOptions",7),this.selectedOption=n(this,"selectedOption",7),this.selectedAllOptions=n(this,"selectedAllOptions",7),this.searchInput=n(this,"searchInput",7)}id="pn-multiselect-"+p();idLegend=this.id+"-legend";idButton=this.id+"-button";idOptions=this.id+"-options";idHelper=this.id+"-text";idChips=this.id+"-chips";idSr=this.id+"-sr";elGroup;elButton;elInput;elList;elChips;srTimer;get hostElement(){return this}isSearching=!1;open=!1;upwards=!1;srMessage;label;helpertext;placeholder;name;selectId=this.id;selectName;icon;compact=!1;language=null;options;selectAll=!1;allValue="pn_multiselect_all";search=!1;searchQuery="";itemCount=5;maxHeight;top=!1;bottom=!1;required=!1;disabled=!1;invalid=!1;error;handleOpen(){this.open?(this.addGlobalEventListeners(),this.handleDirection(),this.handleMaxHeight(),this.handleWidth()):this.removeGlobalEventListeners(),this.dropdownHandler()}handleSearch(){this.search||(this.options=[...this.options.map((e=>{const t={...e,hide:!1};return t?.group?.length&&t.group.map((e=>({...e,hide:!1}))),t}))])}handleSearchQuery(){this.search&&"string"==typeof this.searchQuery&&this.handleInputSearch()}handleSelectId(){const e=this.selectId;this.idLegend=e+"-legend",this.idButton=e+"-button",this.idOptions=e+"-options",this.idHelper=e+"-text",this.idChips=e+"-chips",this.idSr=e+"-sr"}handleResize(){this.open&&(this.toggleOpen(!1),this.elList.style.removeProperty("--pn-select-options-width"),this.elList.style.removeProperty("--pn-select-max-height"))}toggleSelect;allOptions;selectedOption;selectedAllOptions;searchInput;async componentWillLoad(){this.handleSelectId(),null===this.language&&await u(this.hostElement)}componentDidLoad(){this.searchQuery?.length&&this.handleSearchQuery()}globalEvents=e=>{const t=e.target,i=t?.closest(this.hostElement.localName);i||this.toggleOpen(!1)};addGlobalEventListeners(){this.hostElement.getRootNode().addEventListener("click",this.globalEvents)}removeGlobalEventListeners(){this.hostElement.getRootNode().removeEventListener("click",this.globalEvents)}dropdownHandler(){this.open?this.openDropdown(this.elList):this.closeDropdown(this.elList)}emitEvents(e,t){if(this.allOptions.emit(this.options),e)return this.selectedOption.emit(e);const i={checked:t,searching:this.isSearching};this.search&&this.optionsTotal()!==this.optionsSearch().length&&(i.query=this.searchQuery,i.found=this.optionsSearch()),this.selectedAllOptions.emit(i)}optionsChecked(){const e=this.options?.reduce(((e,t)=>{const i=t.group?[...t.group.filter((({checked:e})=>e))]:[];return t.checked&&e.push(t),i?.length&&e.push(...i),e}),[]);return e}optionsTotal(){return this.options?.reduce(((e,t)=>e+(t?.group?.length?t.group.length+1:1)),0)}optionsIndex(e){const t=({group:t=[]})=>t?.findIndex((({value:t})=>t===e)),i=this.options.findIndex((i=>i.value===e||-1!==t(i)));return{indexGroup:i,indexNested:t(this.options?.[i])}}optionsCheckedTotal(){return this.optionsChecked()?.length}optionsCheckedPreview(){return this.optionsChecked()?.slice(0,this.itemCount)}optionsCheckedLabels(){return this.optionsChecked()?.map((({label:e})=>e))?.join(", ")?.trim()}optionsSearch(){const e=this.options?.reduce(((e,t)=>{const i=t.group?[...t.group.filter((({hide:e})=>!e))]:[];return t.hide||e.push(t),i?.length&&e.push(...i),e}),[]);return e}noResults(){return 0===this.optionsSearch()?.length}isIndeterminate(e){const t=this.options?.[e];if(t?.group?.length){const e=t.group.every((({checked:e})=>e)),i=t.group.every((({checked:e})=>!e));return!(e||i)}return!1}optionSelect({val:e,checked:t,chip:i}){if(e===this.allValue)return this.optionSelectAll(t);const n=this.options,{indexGroup:l,indexNested:o}=this.optionsIndex(e),s=n[l]?.group,c=s?.[o];if(c?.value){n[l].group[o].checked=t;const e=s?.every((({checked:e})=>e));n[l].checked=!!e}else n[l].checked=t,s?.length&&(n[l].group=s?.map((e=>({...e,checked:t}))));const r=-1===o?n[l]:n[l].group[o];this.emitEvents(r),this.options=[...n],"number"==typeof i&&(this.handleSrMesssage(`${this.translate("REMOVED")} ${r.label}`),requestAnimationFrame((()=>{const e=i===this.optionsCheckedTotal()?i-1:i,t=Array.from(this.elChips.children)?.[e];t?.querySelector("button").focus({preventScroll:!0})})))}optionSelectAll(e){this.options=[...this.options.map((t=>{const i={...t,checked:this.isSearching&&t.hide?t.checked:e};i.group&&(i.group=[...i.group.map((t=>({...t,checked:this.isSearching&&t.hide?t.checked:e})))]);const n=i?.group?.every((({checked:e})=>e));return i?.group?.length&&(i.checked=n),i}))],this.emitEvents(null,e)}optionSelected(e){return!!this.optionsChecked()?.find((({value:t,checked:i})=>t===e&&i))}translate(e){const t=b?.[e]?.[this.language||h];return t.includes("{number}")?t.replace("{number}",this.optionsSearch().length):t}getRect(e){return e?.getBoundingClientRect()}ripple({clientX:e,clientY:t,target:i}){const n=0===e&&0===t,l=i.nextElementSibling,{x:o,width:s,y:c,top:r}=this.getRect(l);m(n?{clientX:o+s-24,clientY:c-r}:{clientX:e,clientY:t},l)}handleSrMesssage(e){this.srMessage=e,clearTimeout(this.srTimer),this.srTimer=setTimeout((()=>this.srMessage=null),2e3)}handleDirection(){if(this.top)return this.upwards=!0;if(this.bottom)return this.upwards=!1;const{bottom:e,top:t}=this.getRect(this.elInput),i=window.innerHeight-e-16;this.upwards=(t-16)/2>i}handleMaxHeight(){if(this.maxHeight)return this.elGroup.style.setProperty("--pn-select-max-height",this.maxHeight);const{bottom:e,top:t}=this.getRect(this.elInput),i=this.upwards?t:e,n=d(),l=this.upwards?n+16:16,o=this.upwards?i-l:window.innerHeight-i-l;this.elGroup.style.setProperty("--pn-select-max-height",Math.ceil(o)+"px")}handleWidth(){const{width:e}=this.getRect(this.elInput);this.elGroup.style.setProperty("--pn-select-options-width",Math.ceil(e)+"px")}setFocus(){this.search?this.elInput.focus({preventScroll:!0}):this.elButton.focus({preventScroll:!0})}hasError(){return this.invalid||!!this.error}hasMessage(){return!!this.helpertext||!!this.error}toggleOpen(e){"boolean"==typeof e&&e===this.open||(this.open=e??!this.open,this.toggleSelect.emit({open:this.open}))}handleInputKeyboard(e){e.stopImmediatePropagation();const{code:t}=e;if("Escape"===t)return this.toggleOpen(!1);!this.open&&t.match(/^(Space|Enter)$|Arrow|^Key.*$/)&&this.toggleOpen()}setSearchQuery(e){this.open||this.toggleOpen(!0),this.searchQuery=e}handleInputSearch(){if(this.isEmpty())return;const e=this.searchQuery,t=({label:t,helpertext:i,value:n})=>`${t} ${i} ${n}`.trim().toLowerCase().includes(e.toLowerCase()),i=this.options.map((e=>{const i=e?.group?.map((e=>({...e,hide:!t(e)})))||[],n=t(e)||i?.some((({hide:e})=>!e));return e.hide=!n,e?.group?.length&&(e.group=[...i]),e}));this.isSearching=""!==e,this.options=[...i],this.searchInput.emit({query:e,found:this.optionsSearch()})}getListItem(e){const{value:t}=this.options[e];return this.elList.querySelector(`.pn-multiselect-option-input[value='${t}']`)}getOptionIndex(e,t,i){const n=this.optionsTotal()-1;if("End"===i)return n;if("Home"===i)return 0;const l=this.options.findIndex((({value:t})=>t===e))+t.find((e=>"number"==typeof e));return l>=n?n:l<=0?0:l}checkboxNav(e,t){const{code:i}=e,n="Tab"===i,l="Space"===i,o="Enter"===i,s="Escape"===i,c=["ArrowUp"===i&&-1,"ArrowDown"===i&&1,"PageUp"===i&&-10,"PageDown"===i&&10,"Home"===i&&0,"End"===i&&this.optionsTotal()-1,n,l,o,s];if(!c.some((e=>"number"==typeof e||e)))return;if(n||l||o)return;if(e.stopImmediatePropagation(),e.preventDefault(),s)return this.setFocus(),this.toggleOpen(!1);const r=this.getOptionIndex(t,c,i);return this.getListItem(r)?.focus()}handleBlur(e){const t=e.target,i=e.relatedTarget;"pn-multiselect-chip-button"===(i||t)?.className&&this.toggleOpen(!1)}handleLabel(){this.disabled||this.setFocus()}isEmpty(){return 0===(this.options?.length||0)}showSelectAll(){return this.selectAll&&!this.isEmpty()&&!this.noResults()}showEmptyOption(){return this.isSearching&&this.noResults()||this.isEmpty()}getPlaceholder(){return this.placeholder||this.translate(this.search?"SEARCH":"SELECT_AN_OPTION")}handleChange({target:e}){const{value:t,checked:i}=e;this.optionSelect({val:t,checked:i})}additonalOptions(){const e=this.optionsCheckedTotal()-this.itemCount;return`${e} ${this.translate("MORE_OPTION"+(1===e?"":"S"))}`}describedBy(){const e=[this.search&&this.idChips,this.srMessage&&this.idSr,!!this.helpertext&&this.idHelper].filter(Boolean);return e.length?e.join(" "):null}renderOption({label:e,value:t,checked:i,helpertext:n,icon:o,id:s=`${this.selectId}-${t||e}`,invalid:c,disabled:r,hide:a,group:p},u,m){return l("li",{class:"pn-multiselect-option",key:s,hidden:a},l("input",{type:"checkbox",id:s,class:"pn-multiselect-option-input",checked:i??this.optionSelected(t),indeterminate:void 0===m&&this.isIndeterminate(u),name:this.name,value:t,disabled:this.disabled||r,required:this.required,"aria-invalid":c?"true":null,"aria-describedby":n?s+"-helper":null,onClick:e=>this.ripple(e),onKeyDown:e=>this.checkboxNav(e,t),onBlur:e=>this.handleBlur(e)}),l("div",{class:"pn-multiselect-option-content"},!!o&&l("pn-icon",{icon:o,color:"blue900"}),l("div",{class:"pn-multiselect-option-text"},l("label",{class:"pn-multiselect-option-label",htmlFor:s},l("span",null,e)),n&&l("p",{class:"pn-multiselect-option-helper",id:s+"-helper"},n)),l("div",{class:"pn-multiselect-option-checkbox"},l("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},l("polyline",{class:"pn-multiselect-option-checkbox-checkmark-path",points:"4,12 9,17 20,6","stroke-width":"3"}),l("polyline",{class:"pn-multiselect-option-checkbox-indeterminate-path",points:"4,12 20,12","stroke-width":"3"})))),p?.length&&l("ul",{class:"pn-multiselect-optgroup"},p?.map(((e,t)=>this.renderOption(e,u,t)))))}renderOptions(){return l("ul",{id:this.idOptions,class:"pn-multiselect-options","data-open":this.open,"data-upwards":this.upwards,onChange:e=>this.handleChange(e),style:{height:"0px"},ref:e=>this.elList=e},this.showSelectAll()&&this.renderOption({label:this.translate(`SELECT_${this.isSearching?"FOUND":"ALL"}_OPTIONS`),value:this.allValue,checked:this.optionsTotal()===this.optionsCheckedTotal()}),this.options?.map(((e,t)=>this.renderOption(e,t))),this.showEmptyOption()&&l("li",{class:"pn-multiselect-option"},l("div",{class:"pn-multiselect-option-content",role:"alert"},l("div",{class:"pn-multiselect-option-text"},l("span",{class:"pn-multiselect-option-label"},this.translate(this.isEmpty()?"NO_OPTIONS":"NO_SEARCH_RESULTS"))))))}renderChips(){return l("ul",{id:this.idChips,class:"pn-multiselect-chips","aria-label":this.translate("SELECTED_OPTIONS"),ref:e=>this.elChips=e},this.optionsCheckedPreview()?.map((({label:e,value:t},i)=>l("li",{class:"pn-multiselect-chip","aria-setsize":this.optionsCheckedTotal(),"aria-posinset":i+1,key:`${e}-${t}`},l("span",{class:"pn-multiselect-chip-label"},e),l("button",{type:"button",class:"pn-multiselect-chip-button","aria-label":`${this.translate("REMOVE")} ${e}`,onClick:()=>this.optionSelect({val:t,checked:!1,chip:i})},l("pn-icon",{icon:a,small:!0,color:"blue700"}))))),this.optionsCheckedTotal()>this.itemCount&&l("li",{class:"pn-multiselect-chip","data-count":!0},l("span",{class:"pn-multiselect-chip-label"},"+ ",this.additonalOptions())))}renderLabel(e=!1){return this.label?l(e?"div":"legend",{id:e?null:this.idLegend,class:{"pn-multiselect-label":!0,"pn-multiselect-sr-only":this.compact&&!e},"data-compact":this.compact,...e?{inert:!0}:{onClick:()=>this.handleLabel()}},l("span",null,this.label),!!this.optionsChecked()?.length&&l("span",null,this.optionsCheckedTotal(),"/",this.optionsTotal())):null}render(){return l(o,{key:"55af777ec6dd7165b4d16bdad6ec784fe81b8f20"},l("fieldset",{key:"41a5e9a45b3460a96676d606c458a062efe6ab80",class:"pn-multiselect","data-icon":!!this.icon,"data-error":this.hasError(),disabled:this.disabled},this.renderLabel(),l("div",{key:"fb6874e8d17a70ec0e1e21bf3474575b01c3e669",class:"pn-multiselect-group",ref:e=>this.elGroup=e},l("div",{key:"ab6aa995337f5a80e2026d98fe69399571249c24",class:"pn-multiselect-input"},!!this.icon&&l("pn-icon",{key:"0d9495e8864e266a6ababc752781b6e9c75595c3",class:"pn-multiselect-icon","data-custom":!0,icon:this.icon}),l("input",{key:"6b5adbc27ab64b9cdb7f53a99d2f4cd9a2185e47",tabindex:this.search?null:"-1",type:this.search?"search":"input",id:this.selectId,class:"pn-multiselect-element",value:this.search?this.searchQuery:this.optionsCheckedLabels(),name:this.selectName,placeholder:this.getPlaceholder(),required:this.search?null:this.required,"aria-labelledby":this.idLegend,"aria-describedby":this.describedBy(),"aria-controls":`${this.idOptions} ${this.search?this.idChips:""}`,"aria-invalid":this.hasError()?.toString(),disabled:this.disabled,readonly:!this.search,"data-compact":this.compact,onClick:()=>this.search&&this.open?null:this.toggleOpen(),onKeyDown:e=>this.handleInputKeyboard(e),onBlur:e=>this.handleBlur(e),onInput:e=>this.search&&this.setSearchQuery(e.target.value),ref:e=>this.elInput=e}),this.compact&&this.renderLabel(!0),this.hasError()&&l("pn-icon",{key:"36e6f1e307758cdec5f9eda59413b8a0c28af78c",class:"pn-multiselect-icon","data-error":!0,icon:c,color:"warning"}),l("button",{key:"6197b7545b8646fecbd5a12e540e3011303f660c",id:this.idButton,type:"button",class:"pn-multiselect-button","aria-label":this.translate("BUTTON_"+(this.open?"CLOSE":"OPEN")),"aria-describedby":this.search?null:this.selectId,"aria-controls":this.idOptions,"aria-expanded":""+this.open,onClick:()=>this.toggleOpen(),ref:e=>this.elButton=e},l("pn-icon",{key:"f9ddba2705b7782606897f6374f5963833bde76e",class:"pn-multiselect-icon",icon:r,color:"blue700"}))),this.renderOptions()),this.hasMessage()&&l("p",{key:"d9fb544f999b9d779362f13090e9653bbd22fd4e",id:this.idHelper,class:"pn-multiselect-description",role:this.error?"alert":null},l("span",{key:"ed1426909307379ba22c06a6870ad867f5a7cdad"},this.error||this.helpertext)),this.search&&this.renderChips(),l("slot",{key:"d0bc44a9160fa4151e6f74c05fa3102189710454"}),this.search&&l("p",{key:"0d8c04c19227c1461a18ccc21a9fd7412a2f6ee1",id:this.idSr,class:"pn-multiselect-sr-only",role:"alert","aria-live":"assertive"},this.srMessage&&l("span",{key:"610fc47f9a032c6e8931745e6b6d0b418eadd5ee"},this.srMessage))))}static get watchers(){return{open:[{handleOpen:0}],search:[{handleSearch:0}],searchQuery:[{handleSearchQuery:0}],selectId:[{handleSelectId:0}]}}static get style(){return`${e("pn-multiselect")}{display:inline-block}${e("pn-multiselect")} .pn-multiselect{position:relative;border:0;margin:0;padding:0}${e("pn-multiselect")} .pn-multiselect[data-icon]{--pn-input-offset-left:2em}${e("pn-multiselect")} .pn-multiselect[data-icon] .pn-multiselect-element{padding-left:2.75em}${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-label{color:#a70707}${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-label[data-compact]{color:#2d2013}${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element{padding-right:5.5em;border-color:#a70707}${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:hover{border-color:#500715}${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill,${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:hover,${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:focus,${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${e("pn-multiselect")} .pn-multiselect-label{width:100%;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-multiselect")} .pn-multiselect-label{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-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-multiselect")} .pn-multiselect-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${e("pn-multiselect")} .pn-multiselect-label>span{font-size:0.875em}${e("pn-multiselect")} .pn-multiselect-label[data-compact]{justify-content:start}${e("pn-multiselect")} .pn-multiselect-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${e("pn-multiselect")} .pn-multiselect-group{position:relative;padding:0;margin:0}${e("pn-multiselect")} .pn-multiselect-input{position:relative}${e("pn-multiselect")} .pn-multiselect-input>${e("pn-icon")}{pointer-events:none;position:absolute;top:0.75em;right:3.5em}${e("pn-multiselect")} .pn-multiselect-input>${e("pn-icon")}[data-custom]{left:0.75em;right:unset}${e("pn-multiselect")} .pn-multiselect-button{cursor:pointer;position:absolute;right:0.75em;top:50%;transform:translateY(-50%);padding:0;margin:0;border:0;width:2em;height:2em;font-size:1em;border-radius:50%;background-color:transparent;-webkit-tap-highlight-color:transparent;transition-property:background-color, outline-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-multiselect")} .pn-multiselect-button{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${e("pn-multiselect")} .pn-multiselect-button:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${e("pn-multiselect")} .pn-multiselect-button>${e("pn-icon")}>svg>path{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-multiselect")} .pn-multiselect-button>${e("pn-icon")}>svg>path{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-button>${e("pn-icon")}>svg>path{transition-delay:0.2s;transform-origin:center;transform:rotate(0deg)}${e("pn-multiselect")} .pn-multiselect-button:hover{background-color:#effbff}${e("pn-multiselect")} .pn-multiselect-button[aria-expanded=true]{background-color:#effbff}${e("pn-multiselect")} .pn-multiselect-button[aria-expanded=true]>${e("pn-icon")}>svg>path{transform:rotate(180deg);transition-delay:0s}${e("pn-multiselect")} .pn-multiselect-element{cursor:text;text-align:left;transition-delay:0.1s, 0.1s, 0s;width:100%;display:flex;align-items:center;justify-content:space-between;gap:0.5em;overflow:hidden;text-overflow:ellipsis;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em 3.5em 0.75em 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-multiselect")} .pn-multiselect-element:-webkit-autofill,${e("pn-multiselect")} .pn-multiselect-element:-webkit-autofill:hover,${e("pn-multiselect")} .pn-multiselect-element:-webkit-autofill:focus,${e("pn-multiselect")} .pn-multiselect-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${e("pn-multiselect")} .pn-multiselect-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${e("pn-multiselect")} .pn-multiselect-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${e("pn-multiselect")} .pn-multiselect-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-multiselect")} .pn-multiselect-element{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${e("pn-multiselect")} .pn-multiselect-element[data-compact]::placeholder{color:transparent}${e("pn-multiselect")} .pn-multiselect-element[data-compact]:focus+.pn-multiselect-label,${e("pn-multiselect")} .pn-multiselect-element[data-compact]:not(:placeholder-shown)+.pn-multiselect-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${e("pn-multiselect")} .pn-multiselect-element::placeholder{color:#5e554a;font-weight:normal}${e("pn-multiselect")} .pn-multiselect-element:hover{border-color:#005d92}${e("pn-multiselect")} .pn-multiselect-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-multiselect")} .pn-multiselect-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2;pointer-events:none}${e("pn-multiselect")} .pn-multiselect-element:disabled+.pn-multiselect-button{pointer-events:none}${e("pn-multiselect")} .pn-multiselect-element:disabled+.pn-multiselect-button path{fill:#5e554a}${e("pn-multiselect")} .pn-multiselect-element:placeholder{color:#5e554a;font-weight:normal}${e("pn-multiselect")} .pn-multiselect-element[type=input]:hover{cursor:pointer;color:#2d2013;background-color:#effbff;transition-delay:0s}${e("pn-multiselect")} .pn-multiselect-element[type=input]:hover[aria-invalid=true]{background-color:#fdefee}${e("pn-multiselect")} .pn-multiselect-element:focus-visible{transition-delay:0s}${e("pn-multiselect")} .pn-multiselect-element::-webkit-search-cancel-button,${e("pn-multiselect")} .pn-multiselect-element::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}${e("pn-multiselect")} .pn-multiselect-options{scroll-behavior:smooth;position:absolute;z-index:10;top:calc(100% + 0.5em);left:0;right:0;background-color:#ffffff;box-shadow:0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1), 0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);border-radius:0.5em;list-style:none;margin:0;padding:0;width:var(--pn-select-options-width);max-height:var(--pn-select-max-height);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;visibility:hidden;transform-origin:top left}${e("pn-multiselect")} .pn-multiselect-options[data-open]{visibility:visible}${e("pn-multiselect")} .pn-multiselect-options[data-upwards]{top:unset;bottom:calc(100% + 0.5em);transform-origin:bottom left;box-shadow:0 -0.0625em 0.125em rgba(0, 0, 0, 0.2)}${e("pn-multiselect")} .pn-multiselect-options[data-moving]{overflow:hidden;visibility:visible}${e("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${e("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${e("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${e("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${e("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-corner,${e("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-button{display:none}${e("pn-multiselect")} .pn-multiselect-options>${e("pn-input")}{padding:0.5em}${e("pn-multiselect")} .pn-multiselect-optgroup{list-style:none;padding:0}${e("pn-multiselect")} .pn-multiselect-optgroup>.pn-multiselect-option>.pn-multiselect-option-content{padding-left:2em}${e("pn-multiselect")} .pn-multiselect-chips{list-style:none;display:flex;flex-wrap:wrap;gap:0.5em;padding:0;margin:0.5em 0 0 0;color:#5e554a;font-weight:400}${e("pn-multiselect")} .pn-multiselect-chips:empty{display:none}${e("pn-multiselect")} .pn-multiselect-chip{margin:0;display:inline-flex;align-items:center;gap:0.25em;background-color:#ffffff;border-radius:0.5em;padding:0.125em 0.25em 0.125em 0.5em;line-height:1.5em;border:0.0625em solid #5e554a;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-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-multiselect")} .pn-multiselect-chip{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-chip:focus-within{color:#005d92;outline-color:#005d92;background-color:#effbff;border-color:#005d92}${e("pn-multiselect")} .pn-multiselect-chip[data-count]{pointer-events:none;border:0;padding-left:0;padding-right:0;background-color:unset}${e("pn-multiselect")} .pn-multiselect-chip-label{font-size:0.875em;white-space:nowrap}${e("pn-multiselect")} .pn-multiselect-chip-button{cursor:pointer;font-size:1em;padding:0.25em;height:1.5em;width:1.5em;border:0;background-color:unset;border-radius:50%;transition-property:background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-multiselect")} .pn-multiselect-chip-button{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-chip-button{-webkit-tap-highlight-color:transparent}${e("pn-multiselect")} .pn-multiselect-chip-button:hover{background-color:#8eddf9}${e("pn-multiselect")} .pn-multiselect-chip-button:focus{outline:0}${e("pn-multiselect")} .pn-multiselect-no-results{margin:0;padding:0.75em}${e("pn-multiselect")} .pn-multiselect-description{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-multiselect")} .pn-multiselect-description[role=alert]{color:#a70707}${e("pn-multiselect")} .pn-multiselect-option{position:relative;margin:0;padding:0}${e("pn-multiselect")} .pn-multiselect-option .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}}${e("pn-multiselect")} .pn-multiselect-option-input{cursor:pointer;position:absolute;opacity:0;left:0;top:0;height:100%;width:100%;margin:0;-webkit-tap-highlight-color:transparent}${e("pn-multiselect")} .pn-multiselect-option-input:disabled{pointer-events:none}${e("pn-multiselect")} .pn-multiselect-option-input:disabled+.pn-multiselect-option-content{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2;pointer-events:none}${e("pn-multiselect")} .pn-multiselect-option-input:disabled+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#f3f2f2;border-color:#969087}${e("pn-multiselect")} .pn-multiselect-option-input:disabled+.pn-multiselect-option-content path{fill:#5e554a}${e("pn-multiselect")} .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-multiselect")} .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#969087;border-color:#969087}${e("pn-multiselect")} .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content path{fill:#5e554a}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#a70707}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]+.pn-multiselect-option-content .pn-ripple{background-color:#a70707}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked+.pn-multiselect-option-content{background-color:#fdefee}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#a70707;border-color:#a70707}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked:focus-visible+.pn-multiselect-option-content{background-color:#fdefee}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#500715;border-color:#500715}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked:hover+.pn-multiselect-option-content{background-color:#fef7f6}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#500715;border-color:#500715}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:hover+.pn-multiselect-option-content{background-color:#fef7f6}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#fdefee;border-color:#a70707}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{outline-color:#a70707;background-color:#fdefee;border-color:#a70707}${e("pn-multiselect")} .pn-multiselect-option-input:hover+.pn-multiselect-option-content{background-color:#effbff}${e("pn-multiselect")} .pn-multiselect-option-input:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#005d92;background-color:#e0f8ff}${e("pn-multiselect")} .pn-multiselect-option-input:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{outline-color:#005d92;background-color:#e0f8ff;border-color:#005d92}${e("pn-multiselect")} .pn-multiselect-option-input:checked+.pn-multiselect-option-content{background-color:#e0f8ff}${e("pn-multiselect")} .pn-multiselect-option-input:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#005d92;background-color:#005d92}${e("pn-multiselect")} .pn-multiselect-option-input:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-checkmark-path{transition-delay:0.2s;stroke-dashoffset:0}${e("pn-multiselect")} .pn-multiselect-option-input:checked:hover+.pn-multiselect-option-content{background-color:#effbff}${e("pn-multiselect")} .pn-multiselect-option-input:checked:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#0d234b;background-color:#0d234b}${e("pn-multiselect")} .pn-multiselect-option-input:checked:focus-visible+.pn-multiselect-option-content{background-color:#e0f8ff}${e("pn-multiselect")} .pn-multiselect-option-input:checked:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#0d234b;background-color:#0d234b}${e("pn-multiselect")} .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#005d92;border-color:#005d92}${e("pn-multiselect")} .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content svg .pn-multiselect-option-checkbox-checkmark-path{stroke-dashoffset:23}${e("pn-multiselect")} .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content svg .pn-multiselect-option-checkbox-indeterminate-path{stroke-dashoffset:0}${e("pn-multiselect")} .pn-multiselect-option-input:indeterminate:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#0d234b;border-color:#0d234b}${e("pn-multiselect")} .pn-multiselect-option-content{position:relative;overflow:hidden;z-index:-1;display:flex;align-items:center;padding:0.75em 1em;gap:0.5em;background-color:#ffffff;transition-property:background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-multiselect")} .pn-multiselect-option-content{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-option-text{flex:1;text-overflow:ellipsis;overflow:hidden}${e("pn-multiselect")} .pn-multiselect-option-helper{color:#5e554a;margin:0}${e("pn-multiselect")} .pn-multiselect-option-checkbox{background-color:#ffffff;flex:0 0 1.5em;width:1.5em;height:1.5em;border:0.0625em solid #969087;border-radius:0.25em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, border-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-multiselect")} .pn-multiselect-option-checkbox{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline{stroke:#ffffff;stroke-linecap:round;stroke-dasharray:23;transition-property:stroke-dashoffset;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline{transition-delay:0s}${e("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-checkmark-path{stroke-dashoffset:23}${e("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-indeterminate-path{stroke-dashoffset:23}`}},[772,"pn-multiselect",{label:[1],helpertext:[1],placeholder:[1],name:[1],selectId:[1,"select-id"],selectName:[1,"select-name"],icon:[1],compact:[4],language:[1],options:[1040],selectAll:[4,"select-all"],allValue:[1,"all-value"],search:[4],searchQuery:[1025,"search-query"],itemCount:[2,"item-count"],maxHeight:[1,"max-height"],top:[4],bottom:[4],required:[4],disabled:[4],invalid:[4],error:[1],isClosing:[32],isExpanding:[32],isSearching:[32],open:[32],upwards:[32],srMessage:[32]},[[9,"resize","handleResize"]],{open:[{handleOpen:0}],search:[{handleSearch:0}],searchQuery:[{handleSearchQuery:0}],selectId:[{handleSelectId:0}]}]),k=g,v=function(){"undefined"!=typeof customElements&&["pn-multiselect","pn-icon"].forEach((t=>{switch(t){case"pn-multiselect":customElements.get(e(e(t)))||customElements.define(e(e(t)),g);break;case"pn-icon":customElements.get(e(e(t)))||f()}}))};export{k as PnMultiselect,v as defineCustomElement}
+import{transformTag as e,proxyCustomElement as t,Mixin as i,createEvent as n,h as l,Host as o}from"@stencil/core/internal/client";import{a as s}from"./index2.js";import{a as c}from"./alert_exclamation_circle.js";import{c as r}from"./chevron_down.js";import{c as a}from"./close.js";import{u as p,k as u,o as d,j as m,h,e as b}from"./helpers.js";import{d as f}from"./pn-icon2.js";const g={SELECT_AN_OPTION:{en:"Select an option",sv:"Välj ett alternativ",da:"Vælg en mulighed",fi:"Valitse vaihtoehto",no:"Velg et alternativ"},SELECT_ALL_OPTIONS:{en:"Select all options",sv:"Välj alla alternativ",da:"Vælg alle muligheder",fi:"Valitse kaikki vaihtoehdot",no:"Velg alle alternativer"},SELECT_FOUND_OPTIONS:{en:"Select {number} options",sv:"Välj {number} alternativ",da:"Vælg {number} muligheder",fi:"Valitse {number} vaihtoehtoa",no:"Velg {number} alternativer"},SELECTED_OPTIONS:{en:"Selected options.",sv:"Valda alternativ.",da:"Valgte muligheder.",fi:"Valitut vaihtoehdot.",no:"Valgte alternativer."},BUTTON_OPEN:{en:"Open list",sv:"Öppna listan",da:"Open list",fi:"Open list",no:"Open list"},BUTTON_CLOSE:{en:"Close list",sv:"Stäng listan",da:"Close list",fi:"Close list",no:"Close list"},REMOVE:{en:"Remove",sv:"Ta bort",da:"Remove",fi:"Remove",no:"Remove"},REMOVED:{en:"Removed",sv:"Tog bort",da:"Fjernet",fi:"Poistettu",no:"Fjernet"},MORE_OPTION:{en:"more option.",sv:"alternativ till.",da:"mulighed mere.",fi:"vaihtoehto lisää.",no:"alternativ til."},MORE_OPTIONS:{en:"more options.",sv:"fler alternativ.",da:"more options.",fi:"more options.",no:"more options."},SEARCH:{en:"Search",sv:"Sök",da:"Søg",fi:"Hae",no:"Søk"},RESULTS_FOUND:{en:"options found",sv:"alternativ hittades",da:"muligheder fundet",fi:"vaihtoehtoja löytyi",no:"alternativer funnet"},NO_SEARCH_RESULTS:{en:"No options found",sv:"Inga alternativ hittades",da:"Ingen muligheder fundet",fi:"Vaihtoehtoja ei löytynyt",no:"Finner ingen alternativer"},NO_OPTIONS:{en:"No options available",sv:"Inga alternativ tillgängliga",da:"Ingen tilgængelige muligheder",fi:"Ei vaihtoehtoja",no:"Ingen tilgjengelige alternativer"}},k=t(class extends(i(s)){constructor(e){super(!1),!1!==e&&this.__registerHost(),this.toggleSelect=n(this,"toggleSelect",7),this.allOptions=n(this,"allOptions",7),this.selectedOption=n(this,"selectedOption",7),this.selectedAllOptions=n(this,"selectedAllOptions",7),this.searchInput=n(this,"searchInput",7)}id="pn-multiselect-"+p();idLegend=this.id+"-legend";idButton=this.id+"-button";idOptions=this.id+"-options";idHelper=this.id+"-text";idError=this.id+"-error";idChips=this.id+"-chips";idSr=this.id+"-sr";elGroup;elButton;elInput;elList;elChips;srTimer;get hostElement(){return this}isSearching=!1;open=!1;upwards=!1;srMessage;label;helpertext;language=void 0;name;selectName;placeholder;required=!1;disabled=!1;options;compact=!1;icon;selectAll=!1;allValue="pn_multiselect_all";search=!1;searchQuery="";itemCount=5;maxHeight;top=!1;bottom=!1;invalid=!1;error;pnId;pnAriaLabel;pnAriaLabelledby;selectId;handleOpen(){this.open?(this.addGlobalEventListeners(),this.handleDirection(),this.handleMaxHeight(),this.handleOffset()):this.removeGlobalEventListeners(),this.dropdownHandler()}handleSearch(){this.search||(this.options=[...this.options.map((e=>{const t={...e,hide:!1};return t?.group?.length&&t.group.map((e=>({...e,hide:!1}))),t}))])}handleSearchQuery(){this.search&&"string"==typeof this.searchQuery&&this.handleInputSearch()}handleSelectId(){const e=this.getId();this.idLegend=e+"-legend",this.idButton=e+"-button",this.idOptions=e+"-options",this.idHelper=e+"-text",this.idError=e+"-error",this.idChips=e+"-chips",this.idSr=e+"-sr"}handleResize(){this.open&&(this.toggleOpen(!1),this.elGroup.style.removeProperty("--pn-select-max-height"),this.elGroup.style.removeProperty("--pn-select-options-offset"))}toggleSelect;allOptions;selectedOption;selectedAllOptions;searchInput;async componentWillLoad(){void 0===this.language&&await u(this.hostElement)}componentDidLoad(){this.searchQuery?.length&&this.handleSearchQuery()}getId(){return this.pnId||this.selectId||this.id}hasHelperText(){return this.helpertext?.length>0||this.checkSlottedHelper()}hasErrorMessage(){return this.error?.length>0||this.checkSlottedError()}hasError(){return this.hasErrorMessage()||this.invalid}checkSlottedHelper(){return!!this.hostElement.querySelector("[slot=helpertext]")}checkSlottedError(){return!!this.hostElement.querySelector("[slot=error]")}hideHelpertext(){return this.hasErrorMessage()||!this.hasHelperText()}hideError(){return!this.hasErrorMessage()}globalEvents=e=>{this.hostElement.contains(e.target)&&"Escape"!==e?.key||this.toggleOpen(!1)};addGlobalEventListeners(){this.hostElement.getRootNode().addEventListener("click",this.globalEvents)}removeGlobalEventListeners(){this.hostElement.getRootNode().removeEventListener("click",this.globalEvents)}dropdownHandler(){this.open?this.openDropdown(this.elList):this.closeDropdown(this.elList)}emitEvents(e,t){if(this.allOptions.emit(this.options),e)return this.selectedOption.emit(e);const i={checked:t,searching:this.isSearching};this.search&&this.optionsTotal()!==this.optionsSearch().length&&(i.query=this.searchQuery,i.found=this.optionsSearch()),this.selectedAllOptions.emit(i)}optionsChecked(){const e=this.options?.reduce(((e,t)=>{const i=t.group?[...t.group.filter((({checked:e})=>e))]:[];return t.checked&&e.push(t),i?.length&&e.push(...i),e}),[]);return e}optionsTotal(){return this.options?.reduce(((e,t)=>e+(t?.group?.length?t.group.length+1:1)),0)}optionsIndex(e){const t=({group:t=[]})=>t?.findIndex((({value:t})=>t===e)),i=this.options.findIndex((i=>i.value===e||-1!==t(i)));return{indexGroup:i,indexNested:t(this.options?.[i])}}optionsCheckedTotal(){return this.optionsChecked()?.length}optionsCheckedPreview(){return this.optionsChecked()?.slice(0,this.itemCount)}optionsCheckedLabels(){return this.optionsChecked()?.map((({label:e})=>e))?.join(", ")?.trim()}optionsSearch(){const e=this.options?.reduce(((e,t)=>{const i=t.group?[...t.group.filter((({hide:e})=>!e))]:[];return t.hide||e.push(t),i?.length&&e.push(...i),e}),[]);return e}noResults(){return 0===this.optionsSearch()?.length}isIndeterminate(e){const t=this.options?.[e];if(t?.group?.length){const e=t.group.every((({checked:e})=>e)),i=t.group.every((({checked:e})=>!e));return!(e||i)}return!1}optionSelect({val:e,checked:t,chip:i}){if(e===this.allValue)return this.optionSelectAll(t);const n=this.options,{indexGroup:l,indexNested:o}=this.optionsIndex(e),s=n[l]?.group,c=s?.[o];if(c?.value){n[l].group[o].checked=t;const e=s?.every((({checked:e})=>e));n[l].checked=!!e}else n[l].checked=t,s?.length&&(n[l].group=s?.map((e=>({...e,checked:t}))));const r=-1===o?n[l]:n[l].group[o];this.emitEvents(r),this.options=[...n],"number"==typeof i&&(this.handleSrMesssage(`${this.translate("REMOVED")} ${r.label}`),requestAnimationFrame((()=>{const e=i===this.optionsCheckedTotal()?i-1:i,t=Array.from(this.elChips.children)?.[e];t?.querySelector("button").focus({preventScroll:!0})})))}optionSelectAll(e){this.options=[...this.options.map((t=>{const i={...t,checked:this.isSearching&&t.hide?t.checked:e};i.group&&(i.group=[...i.group.map((t=>({...t,checked:this.isSearching&&t.hide?t.checked:e})))]);const n=i?.group?.every((({checked:e})=>e));return i?.group?.length&&(i.checked=n),i}))],this.emitEvents(null,e)}optionSelected(e){return!!this.optionsChecked()?.find((({value:t,checked:i})=>t===e&&i))}translate(e){const t=g?.[e]?.[this.language||b];return t.includes("{number}")?t.replace("{number}",this.optionsSearch().length):t}getRect(e){return e?.getBoundingClientRect()}ripple({clientX:e,clientY:t,target:i}){const n=0===e&&0===t,l=i.nextElementSibling,{x:o,width:s,y:c,top:r}=this.getRect(l);d(n?{clientX:o+s-24,clientY:c-r}:{clientX:e,clientY:t},l)}handleSrMesssage(e){this.srMessage=e,clearTimeout(this.srTimer),this.srTimer=setTimeout((()=>this.srMessage=null),2e3)}handleDirection(){if(this.top)return this.upwards=!0;if(this.bottom)return this.upwards=!1;const{bottom:e,top:t}=this.getRect(this.elInput),i=window.innerHeight-e-16;this.upwards=(t-16)/2>i}handleMaxHeight(){if(this.maxHeight)return this.elGroup.style.setProperty("--pn-select-max-height",this.maxHeight);const{bottom:e,top:t}=this.getRect(this.elInput),i=this.upwards?t:e,n=m(),l=this.upwards?n+16:16,o=this.upwards?i-l:window.innerHeight-i-l;this.elGroup.style.setProperty("--pn-select-max-height",Math.ceil(o)+"px")}handleOffset(){this.elGroup.style.removeProperty("--pn-select-options-offset"),requestAnimationFrame((()=>{const{left:e,right:t}=this.getRect(this.elList),i=h()+8,n=window.innerWidth-8;let l=0;e<i?l=i-e:t>n&&(l=n-t),0!==l&&this.elGroup.style.setProperty("--pn-select-options-offset",Math.floor(l)+"px")}))}setFocus(){this.search?this.elInput.focus({preventScroll:!0}):this.elButton.focus({preventScroll:!0})}toggleOpen(e){"boolean"==typeof e&&e===this.open||(this.open=e??!this.open,this.toggleSelect.emit({open:this.open}))}handleInputKeyboard(e){e.stopImmediatePropagation();const{code:t}=e;if("Escape"===t)return this.toggleOpen(!1);!this.open&&t.match(/^(Space|Enter)$|Arrow|^Key.*$/)&&this.toggleOpen()}setSearchQuery(e){this.open||this.toggleOpen(!0),this.searchQuery=e}handleInputSearch(){if(this.isEmpty())return;const e=this.searchQuery,t=({label:t,helpertext:i,value:n})=>`${t} ${i} ${n}`.trim().toLowerCase().includes(e.toLowerCase()),i=this.options.map((e=>{const i=e?.group?.map((e=>({...e,hide:!t(e)})))||[],n=t(e)||i?.some((({hide:e})=>!e));return e.hide=!n,e?.group?.length&&(e.group=[...i]),e}));this.isSearching=""!==e,this.options=[...i],this.searchInput.emit({query:e,found:this.optionsSearch()})}getListItem(e){const{value:t}=this.options[e];return this.elList.querySelector(`.pn-multiselect-option-input[value='${t}']`)}getOptionIndex(e,t,i){const n=this.optionsTotal()-1;if("End"===i)return n;if("Home"===i)return 0;const l=this.options.findIndex((({value:t})=>t===e))+t.find((e=>"number"==typeof e));return l>=n?n:l<=0?0:l}checkboxNav(e,t){const{code:i}=e,n="Tab"===i,l="Space"===i,o="Enter"===i,s="Escape"===i,c=["ArrowUp"===i&&-1,"ArrowDown"===i&&1,"PageUp"===i&&-10,"PageDown"===i&&10,"Home"===i&&0,"End"===i&&this.optionsTotal()-1,n,l,o,s];if(!c.some((e=>"number"==typeof e||e)))return;if(n||l||o)return;if(e.stopImmediatePropagation(),e.preventDefault(),s)return this.setFocus(),this.toggleOpen(!1);const r=this.getOptionIndex(t,c,i);return this.getListItem(r)?.focus()}handleBlur(e){const t=e.target,i=e.relatedTarget;"pn-multiselect-chip-button"===(i||t)?.className&&this.toggleOpen(!1)}handleLabel(){this.disabled||this.setFocus()}isEmpty(){return 0===(this.options?.length||0)}showSelectAll(){return this.selectAll&&!this.isEmpty()&&!this.noResults()}showEmptyOption(){return this.isSearching&&this.noResults()||this.isEmpty()}getPlaceholder(){return this.placeholder||this.translate(this.search?"SEARCH":"SELECT_AN_OPTION")}handleChange({target:e}){const{value:t,checked:i}=e;this.optionSelect({val:t,checked:i})}additonalOptions(){const e=this.optionsCheckedTotal()-this.itemCount;return`${e} ${this.translate("MORE_OPTION"+(1===e?"":"S"))}`}displayLabel(){return!!this.label}getAriaLabel(){return this.displayLabel()||this.pnAriaLabelledby?null:this.pnAriaLabel}getAriaLabelledby(){return this.displayLabel()?this.idLegend:this.pnAriaLabel?null:this.pnAriaLabelledby}describedBy(){const e=[];return this.search&&e.push(this.idChips),this.srMessage&&e.push(this.idSr),this.hasHelperText()&&!this.hasErrorMessage()&&e.push(this.idHelper),this.hasErrorMessage()&&e.push(this.idError),e.length?e.join(" "):null}renderItemIcon(e,t){return(this.open||this.isMoving())&&!!e&&!t}renderOption({label:e,value:t,checked:i,helpertext:n,icon:o,id:s=`${this.getId()}-${t||e}`,invalid:c,disabled:r,hide:a,group:p},u,d){return l("li",{class:"pn-multiselect-option",key:s,hidden:a},l("input",{type:"checkbox",id:s,class:"pn-multiselect-option-input",checked:i??this.optionSelected(t),indeterminate:void 0===d&&this.isIndeterminate(u),name:this.name,value:t,disabled:this.disabled||r,required:this.required,"aria-invalid":c?"true":null,"aria-describedby":n?s+"-helper":null,onClick:e=>this.ripple(e),onKeyDown:e=>this.checkboxNav(e,t),onBlur:e=>this.handleBlur(e)}),l("div",{class:"pn-multiselect-option-content"},this.renderItemIcon(o,a)&&l("pn-icon",{icon:o,color:"blue900"}),l("div",{class:"pn-multiselect-option-text"},l("label",{class:"pn-multiselect-option-label",htmlFor:s},l("span",null,e)),n&&l("p",{class:"pn-multiselect-option-helper",id:s+"-helper"},n)),l("div",{class:"pn-multiselect-option-checkbox"},l("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},l("polyline",{class:"pn-multiselect-option-checkbox-checkmark-path",points:"4,12 9,17 20,6","stroke-width":"3"}),l("polyline",{class:"pn-multiselect-option-checkbox-indeterminate-path",points:"4,12 20,12","stroke-width":"3"})))),p?.length&&l("ul",{class:"pn-multiselect-optgroup"},p?.map(((e,t)=>this.renderOption(e,u,t)))))}renderOptions(){return l("ul",{id:this.idOptions,class:"pn-multiselect-options","data-open":this.open,"data-upwards":this.upwards,onChange:e=>this.handleChange(e),style:{height:"0px"},ref:e=>this.elList=e},this.showSelectAll()&&this.renderOption({label:this.translate(`SELECT_${this.isSearching?"FOUND":"ALL"}_OPTIONS`),value:this.allValue,checked:this.optionsTotal()===this.optionsCheckedTotal()}),this.options?.map(((e,t)=>this.renderOption(e,t))),this.showEmptyOption()&&l("li",{class:"pn-multiselect-option"},l("div",{class:"pn-multiselect-option-content",role:"alert"},l("div",{class:"pn-multiselect-option-text"},l("span",{class:"pn-multiselect-option-label"},this.translate(this.isEmpty()?"NO_OPTIONS":"NO_SEARCH_RESULTS"))))))}renderChips(){return l("ul",{id:this.idChips,class:"pn-multiselect-chips","aria-label":this.translate("SELECTED_OPTIONS"),ref:e=>this.elChips=e},this.optionsCheckedPreview()?.map((({label:e,value:t,icon:i},n)=>l("li",{class:"pn-multiselect-chip","aria-setsize":this.optionsCheckedTotal(),"aria-posinset":n+1,key:`${e}-${t}`},!!i&&l("pn-icon",{icon:i,small:!0}),l("span",{class:"pn-multiselect-chip-label"},e),l("button",{type:"button",class:"pn-multiselect-chip-button","aria-label":`${this.translate("REMOVE")} ${e}`,onClick:()=>this.optionSelect({val:t,checked:!1,chip:n})},l("pn-icon",{icon:a,small:!0,color:"blue700"}))))),this.optionsCheckedTotal()>this.itemCount&&l("li",{class:"pn-multiselect-chip","data-count":!0},l("span",{class:"pn-multiselect-chip-label"},"+ ",this.additonalOptions())))}renderLabel(e=!1){return this.label?l(e?"div":"legend",{id:e?null:this.idLegend,class:{"pn-multiselect-label":!0,"pn-multiselect-sr-only":this.compact&&!e},"data-compact":this.compact,...e?{inert:!0}:{onClick:()=>this.handleLabel()}},l("span",null,this.label),!!this.optionsChecked()?.length&&l("span",null,this.optionsCheckedTotal(),"/",this.optionsTotal())):null}render(){return l(o,{key:"326b1351c1600920a89b49a4ca04fb48af112bb7"},l("fieldset",{key:"069b0689d499ad99b65f29597cc3968a47a3fc86",class:"pn-multiselect","data-icon":!!this.icon,"data-error":this.hasError(),disabled:this.disabled},this.renderLabel(),l("div",{key:"0a96f922421c6a1adb664714ec0d593cfdf950e5",class:"pn-multiselect-group",ref:e=>this.elGroup=e},l("div",{key:"3c6cadb7ff3dbc67fb8bab786133d64ad330c5d7",class:"pn-multiselect-input"},!!this.icon&&l("pn-icon",{key:"20bb5b6b273bea94903648a3465e14cf8dad2f77",class:"pn-multiselect-icon","data-custom":!0,icon:this.icon}),l("input",{key:"905179f50885d27bc7f41df667be93731dd5e4be",tabindex:this.search?null:"-1",type:this.search?"search":"input",id:this.getId(),class:"pn-multiselect-element",value:this.search?this.searchQuery:this.optionsCheckedLabels(),name:this.selectName,placeholder:this.getPlaceholder(),required:this.search?null:this.required,"aria-label":this.getAriaLabel(),"aria-labelledby":this.getAriaLabelledby(),"aria-describedby":this.describedBy(),"aria-controls":`${this.idOptions} ${this.search?this.idChips:""}`,"aria-invalid":this.hasError()?.toString(),disabled:this.disabled,readonly:!this.search,"data-compact":this.compact,onClick:()=>this.search&&this.open?null:this.toggleOpen(),onKeyDown:e=>this.handleInputKeyboard(e),onBlur:e=>this.handleBlur(e),onInput:e=>this.search&&this.setSearchQuery(e.target.value),ref:e=>this.elInput=e}),this.compact&&this.renderLabel(!0),this.hasError()&&l("pn-icon",{key:"635d97c6b8f780e6bd6daab225a97d1057b4bf0d",class:"pn-multiselect-icon","data-error":!0,icon:c,color:"warning"}),l("button",{key:"77e9862561cd9ed80c5aa1b386ae772476a34e76",id:this.idButton,type:"button",class:"pn-multiselect-button","aria-label":this.translate("BUTTON_"+(this.open?"CLOSE":"OPEN")),"aria-describedby":this.search?null:this.getId(),"aria-controls":this.idOptions,"aria-expanded":""+this.open,onClick:()=>this.toggleOpen(),ref:e=>this.elButton=e},l("pn-icon",{key:"28092398e64c04af103142d8f459579eb2b70a1b",class:"pn-multiselect-icon",icon:r,color:"blue700"}))),this.renderOptions()),l("p",{key:"17d396f1b3175b502ce8d54c6ec059588bbe8128",id:this.idHelper,class:"pn-multiselect-text",hidden:this.hideHelpertext()},l("span",{key:"693ba0a687b9b9766249e6703d0252beeeb762e9"},this.helpertext),l("slot",{key:"a70b1dff00b4ec936461f73354ebe18ce1a0a0c1",name:"helpertext"})),l("p",{key:"94c44db96a270fd7d3180c6dfddb53a46e85c2aa",id:this.idError,class:"pn-multiselect-text",role:"alert",hidden:this.hideError()},l("span",{key:"0297ed1e18f374c0c3f0909a1ee5685b75c73a7c"},this.error),l("slot",{key:"9c545b960d440978e46858b69ac86ad0112510c7",name:"error"})),this.search&&this.renderChips(),l("slot",{key:"9551563c6a72fa6e06ce473eadbc73a0428b551e"}),this.search&&l("p",{key:"96863325f57e613f0272d652e05a70e1c5c35dde",id:this.idSr,class:"pn-multiselect-sr-only",role:"alert","aria-live":"assertive"},this.srMessage&&l("span",{key:"21b84e0522ca16702a9ccabb071d30c0317631ef"},this.srMessage))))}static get watchers(){return{open:[{handleOpen:0}],search:[{handleSearch:0}],searchQuery:[{handleSearchQuery:0}],selectId:[{handleSelectId:0}],pnId:[{handleSelectId:1}]}}static get style(){return`${e("pn-multiselect")}{display:inline-block}${e("pn-multiselect")} .pn-multiselect{position:relative;border:0;margin:0;padding:0}${e("pn-multiselect")} .pn-multiselect[data-icon]{--pn-input-offset-left:2em}${e("pn-multiselect")} .pn-multiselect[data-icon] .pn-multiselect-element{padding-left:2.75em}${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-label{color:#a70707}${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-label[data-compact]{color:#2d2013}${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element{padding-right:5.5em;border-color:#a70707}${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:hover{border-color:#500715}${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill,${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:hover,${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:focus,${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${e("pn-multiselect")} .pn-multiselect-label{width:100%;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-multiselect")} .pn-multiselect-label{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-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-multiselect")} .pn-multiselect-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${e("pn-multiselect")} .pn-multiselect-label>span{font-size:0.875em}${e("pn-multiselect")} .pn-multiselect-label[data-compact]{justify-content:start}${e("pn-multiselect")} .pn-multiselect-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${e("pn-multiselect")} .pn-multiselect-group{position:relative;padding:0;margin:0}${e("pn-multiselect")} .pn-multiselect-input{position:relative}${e("pn-multiselect")} .pn-multiselect-input>${e("pn-icon")}{pointer-events:none;position:absolute;top:0.75em;right:3.5em}${e("pn-multiselect")} .pn-multiselect-input>${e("pn-icon")}[data-custom]{left:0.75em;right:unset}${e("pn-multiselect")} .pn-multiselect-button{cursor:pointer;position:absolute;right:0.75em;top:50%;transform:translateY(-50%);padding:0;margin:0;border:0;width:2em;height:2em;font-size:1em;border-radius:50%;background-color:transparent;-webkit-tap-highlight-color:transparent;transition-property:background-color, outline-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-multiselect")} .pn-multiselect-button{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${e("pn-multiselect")} .pn-multiselect-button:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${e("pn-multiselect")} .pn-multiselect-button>${e("pn-icon")} svg>path{transition-delay:0.2s;transform-origin:center;transform:rotate(0deg)}${e("pn-multiselect")} .pn-multiselect-button:hover{background-color:#effbff}${e("pn-multiselect")} .pn-multiselect-button[aria-expanded=true]{background-color:#effbff}${e("pn-multiselect")} .pn-multiselect-button[aria-expanded=true]>${e("pn-icon")} svg>path{transform:rotate(180deg);transition-delay:0s}${e("pn-multiselect")} .pn-multiselect-element{cursor:text;text-align:left;transition-delay:0.1s, 0.1s, 0s;width:100%;display:flex;align-items:center;justify-content:space-between;gap:0.5em;overflow:hidden;text-overflow:ellipsis;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em 3.5em 0.75em 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-multiselect")} .pn-multiselect-element:-webkit-autofill,${e("pn-multiselect")} .pn-multiselect-element:-webkit-autofill:hover,${e("pn-multiselect")} .pn-multiselect-element:-webkit-autofill:focus,${e("pn-multiselect")} .pn-multiselect-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${e("pn-multiselect")} .pn-multiselect-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${e("pn-multiselect")} .pn-multiselect-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${e("pn-multiselect")} .pn-multiselect-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-multiselect")} .pn-multiselect-element{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${e("pn-multiselect")} .pn-multiselect-element[data-compact]::placeholder{color:transparent}${e("pn-multiselect")} .pn-multiselect-element[data-compact]:focus+.pn-multiselect-label,${e("pn-multiselect")} .pn-multiselect-element[data-compact]:not(:placeholder-shown)+.pn-multiselect-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${e("pn-multiselect")} .pn-multiselect-element::placeholder{color:#5e554a;font-weight:normal}${e("pn-multiselect")} .pn-multiselect-element:hover{border-color:#005d92}${e("pn-multiselect")} .pn-multiselect-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-multiselect")} .pn-multiselect-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2;pointer-events:none}${e("pn-multiselect")} .pn-multiselect-element:disabled+.pn-multiselect-button{pointer-events:none}${e("pn-multiselect")} .pn-multiselect-element:disabled+.pn-multiselect-button path{fill:#5e554a}${e("pn-multiselect")} .pn-multiselect-element:placeholder{color:#5e554a;font-weight:normal}${e("pn-multiselect")} .pn-multiselect-element[type=input]:hover{cursor:pointer;color:#2d2013;background-color:#effbff;transition-delay:0s}${e("pn-multiselect")} .pn-multiselect-element[type=input]:hover[aria-invalid=true]{background-color:#fdefee}${e("pn-multiselect")} .pn-multiselect-element:focus-visible{transition-delay:0s}${e("pn-multiselect")} .pn-multiselect-element::-webkit-search-cancel-button,${e("pn-multiselect")} .pn-multiselect-element::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}${e("pn-multiselect")} .pn-multiselect-options{scroll-behavior:smooth;position:absolute;z-index:10;top:calc(100% + 0.5em);left:0;right:0;background-color:#ffffff;box-shadow:0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1), 0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);border-radius:0.5em;list-style:none;margin:0;padding:0;width:clamp(100%, 95vw, 20em);max-height:var(--pn-select-max-height);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;visibility:hidden;transform-origin:top left;transform:translateX(var(--pn-select-options-offset, 0))}${e("pn-multiselect")} .pn-multiselect-options[data-open]{visibility:visible}${e("pn-multiselect")} .pn-multiselect-options[data-upwards]{top:unset;bottom:calc(100% + 0.5em);transform-origin:bottom left;box-shadow:0 -0.0625em 0.125em rgba(0, 0, 0, 0.2)}${e("pn-multiselect")} .pn-multiselect-options[data-moving]{overflow:hidden;visibility:visible}${e("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${e("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${e("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${e("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${e("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-corner,${e("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-button{display:none}${e("pn-multiselect")} .pn-multiselect-options>${e("pn-input")}{padding:0.5em}${e("pn-multiselect")} .pn-multiselect-optgroup{list-style:none;padding:0}${e("pn-multiselect")} .pn-multiselect-optgroup>.pn-multiselect-option>.pn-multiselect-option-content{padding-left:2em}${e("pn-multiselect")} .pn-multiselect-chips{list-style:none;display:flex;flex-wrap:wrap;gap:0.5em;padding:0;margin:0.5em 0 0 0;color:#5e554a;font-weight:400}${e("pn-multiselect")} .pn-multiselect-chips:empty{display:none}${e("pn-multiselect")} .pn-multiselect-chip{margin:0;display:inline-flex;align-items:center;gap:0.25em;background-color:#ffffff;border-radius:0.5em;padding:0.125em 0.25em 0.125em 0.5em;line-height:1.5em;border:0.0625em solid #5e554a;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-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-multiselect")} .pn-multiselect-chip{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-chip:focus-within{color:#005d92;outline-color:#005d92;background-color:#effbff;border-color:#005d92}${e("pn-multiselect")} .pn-multiselect-chip[data-count]{pointer-events:none;border:0;padding-left:0;padding-right:0;background-color:unset}${e("pn-multiselect")} .pn-multiselect-chip-label{font-size:0.875em;white-space:nowrap}${e("pn-multiselect")} .pn-multiselect-chip-button{cursor:pointer;font-size:1em;padding:0.25em;height:1.5em;width:1.5em;border:0;background-color:unset;border-radius:50%;-webkit-tap-highlight-color:transparent;transition-property:background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-multiselect")} .pn-multiselect-chip-button{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-chip-button:hover{background-color:#8eddf9}${e("pn-multiselect")} .pn-multiselect-chip-button:focus{outline:0}${e("pn-multiselect")} .pn-multiselect-no-results{margin:0;padding:0.75em}${e("pn-multiselect")} .pn-multiselect-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-multiselect")} .pn-multiselect-text[hidden]{display:none}${e("pn-multiselect")} .pn-multiselect-text[role=alert]{color:#a70707}${e("pn-multiselect")} .pn-multiselect-option{position:relative;margin:0;padding:0}${e("pn-multiselect")} .pn-multiselect-option .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}}${e("pn-multiselect")} .pn-multiselect-option-input{cursor:pointer;position:absolute;opacity:0;left:0;top:0;height:100%;width:100%;margin:0;-webkit-tap-highlight-color:transparent}${e("pn-multiselect")} .pn-multiselect-option-input:disabled{pointer-events:none}${e("pn-multiselect")} .pn-multiselect-option-input:disabled+.pn-multiselect-option-content{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2;pointer-events:none}${e("pn-multiselect")} .pn-multiselect-option-input:disabled+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#f3f2f2;border-color:#969087}${e("pn-multiselect")} .pn-multiselect-option-input:disabled+.pn-multiselect-option-content .pn-icon-svg path{fill:#5e554a}${e("pn-multiselect")} .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-multiselect")} .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#969087;border-color:#969087}${e("pn-multiselect")} .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content .pn-icon-svg path{fill:#5e554a}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#a70707}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]+.pn-multiselect-option-content .pn-ripple{background-color:#a70707}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked+.pn-multiselect-option-content{background-color:#fdefee}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#a70707;border-color:#a70707}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked:focus-visible+.pn-multiselect-option-content{background-color:#fdefee}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#500715;border-color:#500715}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked:hover+.pn-multiselect-option-content{background-color:#fef7f6}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#500715;border-color:#500715}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:hover+.pn-multiselect-option-content{background-color:#fef7f6}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#fdefee;border-color:#a70707}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{outline-color:#a70707;background-color:#fdefee;border-color:#a70707}${e("pn-multiselect")} .pn-multiselect-option-input:hover+.pn-multiselect-option-content{background-color:#effbff}${e("pn-multiselect")} .pn-multiselect-option-input:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#005d92;background-color:#e0f8ff}${e("pn-multiselect")} .pn-multiselect-option-input:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{outline-color:#005d92;background-color:#e0f8ff;border-color:#005d92}${e("pn-multiselect")} .pn-multiselect-option-input:checked+.pn-multiselect-option-content{background-color:#e0f8ff}${e("pn-multiselect")} .pn-multiselect-option-input:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#005d92;background-color:#005d92}${e("pn-multiselect")} .pn-multiselect-option-input:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-checkmark-path{transition-delay:0.2s;stroke-dashoffset:0}${e("pn-multiselect")} .pn-multiselect-option-input:checked:hover+.pn-multiselect-option-content{background-color:#effbff}${e("pn-multiselect")} .pn-multiselect-option-input:checked:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#0d234b;background-color:#0d234b}${e("pn-multiselect")} .pn-multiselect-option-input:checked:focus-visible+.pn-multiselect-option-content{background-color:#e0f8ff}${e("pn-multiselect")} .pn-multiselect-option-input:checked:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#0d234b;background-color:#0d234b}${e("pn-multiselect")} .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#005d92;border-color:#005d92}${e("pn-multiselect")} .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content svg .pn-multiselect-option-checkbox-checkmark-path{stroke-dashoffset:23}${e("pn-multiselect")} .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content svg .pn-multiselect-option-checkbox-indeterminate-path{stroke-dashoffset:0}${e("pn-multiselect")} .pn-multiselect-option-input:indeterminate:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#0d234b;border-color:#0d234b}${e("pn-multiselect")} .pn-multiselect-option-content{position:relative;overflow:hidden;z-index:-1;display:flex;align-items:center;padding:0.75em 1em;gap:0.5em;background-color:#ffffff;transition-property:background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-multiselect")} .pn-multiselect-option-content{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-option-text{flex:1;text-overflow:ellipsis;overflow:hidden}${e("pn-multiselect")} .pn-multiselect-option-helper{color:#5e554a;margin:0}${e("pn-multiselect")} .pn-multiselect-option-checkbox{background-color:#ffffff;flex:0 0 1.5em;width:1.5em;height:1.5em;border:0.0625em solid #969087;border-radius:0.25em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, border-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-multiselect")} .pn-multiselect-option-checkbox{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline{stroke:#ffffff;stroke-linecap:round;stroke-dasharray:23;transition-delay:0s;transition-property:stroke-dashoffset;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-checkmark-path{stroke-dashoffset:23}${e("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-indeterminate-path{stroke-dashoffset:23}`}},[772,"pn-multiselect",{label:[1],helpertext:[1],language:[1],name:[1],selectName:[1,"select-name"],placeholder:[1],required:[4],disabled:[4],options:[1040],compact:[4],icon:[1],selectAll:[4,"select-all"],allValue:[1,"all-value"],search:[4],searchQuery:[1025,"search-query"],itemCount:[2,"item-count"],maxHeight:[1,"max-height"],top:[4],bottom:[4],invalid:[4],error:[1],pnId:[1,"pn-id"],pnAriaLabel:[1,"pn-aria-label"],pnAriaLabelledby:[1,"pn-aria-labelledby"],selectId:[1,"select-id"],isClosing:[32],isExpanding:[32],isSearching:[32],open:[32],upwards:[32],srMessage:[32]},[[9,"resize","handleResize"]],{open:[{handleOpen:0}],search:[{handleSearch:0}],searchQuery:[{handleSearchQuery:0}],selectId:[{handleSelectId:0}],pnId:[{handleSelectId:1}]}]),v=k,$=function(){"undefined"!=typeof customElements&&["pn-multiselect","pn-icon"].forEach((t=>{switch(t){case"pn-multiselect":customElements.get(e(e(t)))||customElements.define(e(e(t)),k);break;case"pn-icon":customElements.get(e(e(t)))||f()}}))};export{v as PnMultiselect,$ as defineCustomElement}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as e,proxyCustomElement as n,HTMLElement as t,h as r,Host as s}from"@stencil/core/internal/client";import{k as i,s as a}from"./helpers.js";import{d as c}from"./pn-button2.js";import{d as o}from"./pn-icon2.js";import{d as h}from"./pn-search-field2.js";import{d as l}from"./pn-spinner2.js";const d={SEARCH_BUTTON:{da:"Search",en:"Search",fi:"Search",no:"Search",sv:"Sök"},SEARCH_SUCCESS:{da:"Your OCR number is",en:"Your OCR number is",fi:"Your OCR number is",no:"Your OCR number is",sv:"Ditt OCR-nummer är"},ERROR_INVALID_LICENSE_NUMBER:{da:"Invalid license number",en:"Invalid license number",fi:"Invalid license number",no:"Invalid license number",sv:"Ogiltligt licensnummer"},ERROR_NO_RESULTS:{da:"The search did not generate any results",en:"The search did not generate any results",fi:"The search did not generate any results",no:"The search did not generate any results",sv:"Sökningen genererade inga träffar"},ERROR_REASON_HEADER:{da:"It may be due to:",en:"It may be due to:",fi:"It may be due to:",no:"It may be due to:",sv:"Det kan bero på:"},ERROR_REASON_ONE:{da:"We could not find that license number",en:"We could not find that license number",fi:"We could not find that license number",no:"We could not find that license number",sv:"Vi hittar inget sådant licensnummer"},ERROR_REASON_TWO:{da:"Check the information and try again.",en:"Check the information and try again.",fi:"Check the information and try again.",no:"Check the information and try again.",sv:"Kontrollera uppgifterna och försök igen."},PLACEHOLDER_TEXT:{da:"License number 6 digits",en:"License number 6 digits",fi:"License number 6 digits",no:"License number 6 digits",sv:"Licensnummer 6 tecken"}},u=n(class extends t{constructor(e){super(),!1!==e&&this.__registerHost()}get hostElement(){return this}loading=!1;error=!1;ocrNumber;searchSuccess=!1;invalidOcrNumber=!1;language=null;async componentWillLoad(){null===this.language&&await i(this.hostElement)}getTranslation(e){return d[e][this.language||a]}handleSearch(e){this.invalidOcrNumber=!1,this.searchSuccess=!1,this.error=!1;const n=this.validateOcrNumber(e.detail);n.error?this.invalidOcrNumber=!0:this.ocrNumberSearch(n.value)}async ocrNumberSearch(e){this.loading=!0,await fetch("https://portal.postnord.com/public-service/api/ocr?key="+e).then((e=>e.json())).then((e=>{this.ocrNumber=e.newOcr,this.searchSuccess=!0})).catch((()=>{this.error=!0,this.searchSuccess=!1})).finally((()=>{this.loading=!1}))}validateOcrNumber(e){const n=e?e.replace(/[ -]/gi,""):"";return{error:RegExp(/\D+/).test(n)||6!==n.length,value:n}}renderSearchResult(){if(!this.loading&&!this.error&&this.searchSuccess)return r("div",{class:"search-results"},this.getTranslation("SEARCH_SUCCESS"),": ",r("b",null,this.ocrNumber))}renderErrorMessage(){return this.invalidOcrNumber&&!this.loading?r("div",{class:"invalid-text-container"},r("p",{class:"invalid-ocr"},this.getTranslation("ERROR_INVALID_LICENSE_NUMBER"))):this.error&&!this.loading?r("div",{class:"error-text-container"},r("p",{class:"bold"},this.getTranslation("ERROR_NO_RESULTS")),r("p",{class:"bold"},this.getTranslation("ERROR_REASON_HEADER")),r("p",null,this.getTranslation("ERROR_REASON_ONE")),r("p",null,this.getTranslation("ERROR_REASON_TWO"))):void 0}render(){return r(s,{key:"edf8696a2d3f115868f13d3bfa9c5e9c4128426c"},r("pn-search-field",{key:"b54f8575a5ebdd518e4082f78799f417448d53e9",loading:this.loading,label:this.getTranslation("SEARCH_BUTTON"),button:"icon",buttonLabel:this.getTranslation("SEARCH_BUTTON"),placeholder:this.getTranslation("PLACEHOLDER_TEXT"),onSearch:e=>this.handleSearch(e)}),this.renderSearchResult(),this.renderErrorMessage())}static get style(){return`${e("pn-ocr-search")} .bold{font-weight:700}${e("pn-ocr-search")} .search-results,${e("pn-ocr-search")} .error-text-container{padding:1em 0.5em}${e("pn-ocr-search")} .invalid-text-container{padding:0.5em 1em}${e("pn-ocr-search")} .invalid-text-container .invalid-ocr{color:#a70707}`}},[512,"pn-ocr-search",{language:[1],loading:[32],error:[32],ocrNumber:[32],searchSuccess:[32],invalidOcrNumber:[32]}]),m=u,R=function(){"undefined"!=typeof customElements&&["pn-ocr-search","pn-button","pn-icon","pn-search-field","pn-spinner"].forEach((n=>{switch(n){case"pn-ocr-search":customElements.get(e(e(n)))||customElements.define(e(e(n)),u);break;case"pn-button":customElements.get(e(e(n)))||c();break;case"pn-icon":customElements.get(e(e(n)))||o();break;case"pn-search-field":customElements.get(e(e(n)))||h();break;case"pn-spinner":customElements.get(e(e(n)))||l()}}))};export{m as PnOcrSearch,R as defineCustomElement}
+import{transformTag as e,proxyCustomElement as n,HTMLElement as t,h as r,Host as s}from"@stencil/core/internal/client";import{k as i,s as a}from"./helpers.js";import{d as c}from"./pn-button2.js";import{d as o}from"./pn-icon2.js";import{d as h}from"./pn-search-field2.js";import{d as l}from"./pn-spinner2.js";const d={SEARCH_BUTTON:{da:"Search",en:"Search",fi:"Search",no:"Search",sv:"Sök"},SEARCH_SUCCESS:{da:"Your OCR number is",en:"Your OCR number is",fi:"Your OCR number is",no:"Your OCR number is",sv:"Ditt OCR-nummer är"},ERROR_INVALID_LICENSE_NUMBER:{da:"Invalid license number",en:"Invalid license number",fi:"Invalid license number",no:"Invalid license number",sv:"Ogiltligt licensnummer"},ERROR_NO_RESULTS:{da:"The search did not generate any results",en:"The search did not generate any results",fi:"The search did not generate any results",no:"The search did not generate any results",sv:"Sökningen genererade inga träffar"},ERROR_REASON_HEADER:{da:"It may be due to:",en:"It may be due to:",fi:"It may be due to:",no:"It may be due to:",sv:"Det kan bero på:"},ERROR_REASON_ONE:{da:"We could not find that license number",en:"We could not find that license number",fi:"We could not find that license number",no:"We could not find that license number",sv:"Vi hittar inget sådant licensnummer"},ERROR_REASON_TWO:{da:"Check the information and try again.",en:"Check the information and try again.",fi:"Check the information and try again.",no:"Check the information and try again.",sv:"Kontrollera uppgifterna och försök igen."},PLACEHOLDER_TEXT:{da:"License number 6 digits",en:"License number 6 digits",fi:"License number 6 digits",no:"License number 6 digits",sv:"Licensnummer 6 tecken"}},u=n(class extends t{constructor(e){super(),!1!==e&&this.__registerHost()}get hostElement(){return this}loading=!1;error=!1;ocrNumber;searchSuccess=!1;invalidOcrNumber=!1;language=null;async componentWillLoad(){null===this.language&&await i(this.hostElement)}getTranslation(e){return d[e][this.language||a]}handleSearch(e){this.invalidOcrNumber=!1,this.searchSuccess=!1,this.error=!1;const n=this.validateOcrNumber(e.detail);n.error?this.invalidOcrNumber=!0:this.ocrNumberSearch(n.value)}async ocrNumberSearch(e){this.loading=!0,await fetch("https://portal.postnord.com/public-service/api/ocr?key="+e).then((e=>e.json())).then((e=>{this.ocrNumber=e.newOcr,this.searchSuccess=!0})).catch((()=>{this.error=!0,this.searchSuccess=!1})).finally((()=>{this.loading=!1}))}validateOcrNumber(e){const n=e?e.replace(/[ -]/gi,""):"";return{error:RegExp(/\D+/).test(n)||6!==n.length,value:n}}renderSearchResult(){if(!this.loading&&!this.error&&this.searchSuccess)return r("div",{class:"search-results"},this.getTranslation("SEARCH_SUCCESS"),": ",r("b",null,this.ocrNumber))}renderErrorMessage(){return this.invalidOcrNumber&&!this.loading?r("div",{class:"invalid-text-container"},r("p",{class:"invalid-ocr"},this.getTranslation("ERROR_INVALID_LICENSE_NUMBER"))):this.error&&!this.loading?r("div",{class:"error-text-container"},r("p",{class:"bold"},this.getTranslation("ERROR_NO_RESULTS")),r("p",{class:"bold"},this.getTranslation("ERROR_REASON_HEADER")),r("p",null,this.getTranslation("ERROR_REASON_ONE")),r("p",null,this.getTranslation("ERROR_REASON_TWO"))):void 0}render(){return r(s,{key:"7cf50eabd6310124086f1674537bbb5f73ac6714"},r("pn-search-field",{key:"b8a24cdd8fdbb4ad6ac051bddd064f731bac8880",loading:this.loading,label:this.getTranslation("SEARCH_BUTTON"),button:"icon",buttonLabel:this.getTranslation("SEARCH_BUTTON"),placeholder:this.getTranslation("PLACEHOLDER_TEXT"),onSearch:e=>this.handleSearch(e)}),this.renderSearchResult(),this.renderErrorMessage())}static get style(){return`${e("pn-ocr-search")} .bold{font-weight:700}${e("pn-ocr-search")} .search-results,${e("pn-ocr-search")} .error-text-container{padding:1em 0.5em}${e("pn-ocr-search")} .invalid-text-container{padding:0.5em 1em}${e("pn-ocr-search")} .invalid-text-container .invalid-ocr{color:#a70707}`}},[512,"pn-ocr-search",{language:[1],loading:[32],error:[32],ocrNumber:[32],searchSuccess:[32],invalidOcrNumber:[32]}]),m=u,R=function(){"undefined"!=typeof customElements&&["pn-ocr-search","pn-button","pn-icon","pn-search-field","pn-spinner"].forEach((n=>{switch(n){case"pn-ocr-search":customElements.get(e(e(n)))||customElements.define(e(e(n)),u);break;case"pn-button":customElements.get(e(e(n)))||c();break;case"pn-icon":customElements.get(e(e(n)))||o();break;case"pn-search-field":customElements.get(e(e(n)))||h();break;case"pn-spinner":customElements.get(e(e(n)))||l()}}))};export{m as PnOcrSearch,R as defineCustomElement}

package/umd/modules/@postnord/web-components/components/pn-page-nav-dropdown-item.js

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as e,proxyCustomElement as n,HTMLElement as t,createEvent as o,h as i}from"@stencil/core/internal/client";import{a}from"./arrow_right.js";import{d}from"./pn-icon2.js";const p=n(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.itemselection=o(this,"itemselection",7)}get hostElement(){return this}value;href;active=!1;itemselection;select(e){this.value&&!this.href&&e.preventDefault(),this.itemselection.emit(this.value)}setClassnames(){let e="pn-page-nav-dropdown-item ";return this.active&&(e+="pn-page-nav-dropdown-item-active "),e}getType(){return this.value?null:"button"}getTagName(){return this.value?"a":"button"}render(){const e=this.getTagName();return i("li",{key:"a4ca23ac5a53d78c87f2c955c3da18372a7d572d"},i(e,{key:"20639a9f58133cf65d8719943d9d11630166b8d4",href:this.href||"#",class:this.setClassnames(),type:this.getType(),onClick:e=>this.select(e),tabindex:"-1"},i("slot",{key:"5440c1e919238f6aaa55ca9df2dec18ebbce2f83"}),i("pn-icon",{key:"ff16474c7bc9fc6664c64c5b4567e88a88bd29fb",icon:a,color:"white"})),i("hr",{key:"5201ae642f54f3ad7b157762dedfddb08d865486"}))}static get style(){return`${e("pn-page-nav-dropdown-item")}:first-of-type li>a,${e("pn-page-nav-dropdown-item")}:first-of-type li>button{border-radius:0.5em 0.5em 0 0}${e("pn-page-nav-dropdown-item")}:last-of-type li>a,${e("pn-page-nav-dropdown-item")}:last-of-type li>button{border-radius:0 0 0.5em 0.5em}${e("pn-page-nav-dropdown-item")}:last-of-type li>hr{display:none}${e("pn-page-nav-dropdown-item")} li{font-size:inherit}${e("pn-page-nav-dropdown-item")} li>*{color:#ffffff;font-size:inherit;border:none;padding:1em;margin:0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background 0.15s;outline:none;width:100%;font-weight:500}${e("pn-page-nav-dropdown-item")} li>*>${e("pn-icon")}{margin-left:1em}${e("pn-page-nav-dropdown-item")} li>*.pn-page-nav-dropdown-item-active{background:#005d92}${e("pn-page-nav-dropdown-item")} li>*.pn-page-nav-dropdown-item-active:hover,${e("pn-page-nav-dropdown-item")} li>*.pn-page-nav-dropdown-item-active:focus{background:#005d92}${e("pn-page-nav-dropdown-item")} li>*:hover,${e("pn-page-nav-dropdown-item")} li>*:focus{background:#0d234b}${e("pn-page-nav-dropdown-item")} li>*:focus{box-shadow:inset 0 0 0 0.1em #005d92, inset 0 0 0 0.2em #d3cecb}${e("pn-page-nav-dropdown-item")} li>a{text-decoration:none}${e("pn-page-nav-dropdown-item")} li>button{background:none}${e("pn-page-nav-dropdown-item")} li>hr{bottom:0;padding:0;margin:0 auto;border-top:0.0625em solid #d3cecb;opacity:0.6;width:85%}`}},[772,"pn-page-nav-dropdown-item",{value:[1],href:[1],active:[4]}]),r=p,s=function(){"undefined"!=typeof customElements&&["pn-page-nav-dropdown-item","pn-icon"].forEach((n=>{switch(n){case"pn-page-nav-dropdown-item":customElements.get(e(e(n)))||customElements.define(e(e(n)),p);break;case"pn-icon":customElements.get(e(e(n)))||d()}}))};export{r as PnPageNavDropdownItem,s as defineCustomElement}
+import{transformTag as e,proxyCustomElement as n,HTMLElement as t,createEvent as o,h as i}from"@stencil/core/internal/client";import{a}from"./arrow_right.js";import{d as p}from"./pn-icon2.js";const d=n(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.itemselection=o(this,"itemselection",7)}get hostElement(){return this}value;href;active=!1;itemselection;select(e){this.value&&!this.href&&e.preventDefault(),this.itemselection.emit(this.value)}setClassnames(){let e="pn-page-nav-dropdown-item ";return this.active&&(e+="pn-page-nav-dropdown-item-active "),e}getType(){return this.value?null:"button"}getTagName(){return this.value?"a":"button"}render(){const e=this.getTagName();return i("li",{key:"93c6bd31a88c76797cee2bc915c31e6ecfa5aace"},i(e,{key:"2818d4f3a1572f863f9b9a8609d572f5994f6e75",href:this.href||"#",class:this.setClassnames(),type:this.getType(),onClick:e=>this.select(e),tabindex:"-1"},i("slot",{key:"e04f130737445747a2b93bf9d7372bf22889fcff"}),i("pn-icon",{key:"934d46f6bd482171d974efec7c4494f8b1b1faff",icon:a,color:"white"})),i("hr",{key:"c5c9c4a24affe5b10d56e8a6ca5d6bee434aa571"}))}static get style(){return`${e("pn-page-nav-dropdown-item")}:first-of-type li>a,${e("pn-page-nav-dropdown-item")}:first-of-type li>button{border-radius:0.5em 0.5em 0 0}${e("pn-page-nav-dropdown-item")}:last-of-type li>a,${e("pn-page-nav-dropdown-item")}:last-of-type li>button{border-radius:0 0 0.5em 0.5em}${e("pn-page-nav-dropdown-item")}:last-of-type li>hr{display:none}${e("pn-page-nav-dropdown-item")} li{font-size:inherit}${e("pn-page-nav-dropdown-item")} li>*{color:#ffffff;font-size:inherit;border:none;padding:1em;margin:0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background 0.15s;outline:none;width:100%;font-weight:500}${e("pn-page-nav-dropdown-item")} li>*>${e("pn-icon")}{margin-left:1em}${e("pn-page-nav-dropdown-item")} li>*.pn-page-nav-dropdown-item-active{background:#005d92}${e("pn-page-nav-dropdown-item")} li>*.pn-page-nav-dropdown-item-active:hover,${e("pn-page-nav-dropdown-item")} li>*.pn-page-nav-dropdown-item-active:focus{background:#005d92}${e("pn-page-nav-dropdown-item")} li>*:hover,${e("pn-page-nav-dropdown-item")} li>*:focus{background:#0d234b}${e("pn-page-nav-dropdown-item")} li>*:focus{box-shadow:inset 0 0 0 0.1em #005d92, inset 0 0 0 0.2em #d3cecb}${e("pn-page-nav-dropdown-item")} li>a{text-decoration:none}${e("pn-page-nav-dropdown-item")} li>button{background:none}${e("pn-page-nav-dropdown-item")} li>hr{bottom:0;padding:0;margin:0 auto;border-top:0.0625em solid #d3cecb;opacity:0.6;width:85%}`}},[772,"pn-page-nav-dropdown-item",{value:[1],href:[1],active:[4]}]),r=d,s=function(){"undefined"!=typeof customElements&&["pn-page-nav-dropdown-item","pn-icon"].forEach((n=>{switch(n){case"pn-page-nav-dropdown-item":customElements.get(e(e(n)))||customElements.define(e(e(n)),d);break;case"pn-icon":customElements.get(e(e(n)))||p()}}))};export{r as PnPageNavDropdownItem,s as defineCustomElement}

package/umd/modules/@postnord/web-components/components/pn-page-nav-item.js

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as e,proxyCustomElement as t,HTMLElement as n,createEvent as i,h as a,Host as o}from"@stencil/core/internal/client";import{d as s}from"./pn-icon2.js";const r=t(class extends n{constructor(e){super(),!1!==e&&this.__registerHost(),this.itemselection=i(this,"itemselection",7)}get hostElement(){return this}value;href;icon;itemselection;select(e){this.value&&!this.href&&e.preventDefault(),this.itemselection.emit(this.value)}render(){return a(o,{key:"43346d6ed6211b3e6c4ee7c6dfd261112028445f"},a("li",{key:"8a191825d21ae79f3c8bf69381151b8d258a7c64"},a("a",{key:"3dab24d14cb027916343ae3b1f86ded224907ab6",href:this.href||"#",class:"pn-page-nav-item",onClick:e=>this.select(e)},this.icon&&a("pn-icon",{key:"fa382f49cb1602908dd53af48044826f934679cd",icon:this.icon,color:"white"}),a("slot",{key:"576b22e87a530ac0a8a19eaf8a094937ab227b67"}))))}static get style(){return`${e("pn-page-nav-item")}{position:relative;color:#ffffff;margin-right:0.5em;z-index:2;white-space:nowrap;scroll-snap-align:center;outline:none;-webkit-tap-highlight-color:transparent;transform:translateZ(0)}${e("pn-page-nav-item")} a{text-decoration:none;color:#ffffff;height:100%;width:100%;padding:0.5em;font-weight:500;border-radius:3em;border:0.0625em solid transparent;display:inline-flex;align-items:center;cursor:pointer;outline:none;transition:box-shadow 0.15s}${e("pn-page-nav-item")} a:focus{box-shadow:0 0 0 0.1em #d3cecb}${e("pn-page-nav-item")} a>${e("pn-icon")}{margin-right:0.5em}${e("pn-page-nav-item")}:last-of-type{margin-right:0}`}},[772,"pn-page-nav-item",{value:[1],href:[1],icon:[1]}]),c=r,p=function(){"undefined"!=typeof customElements&&["pn-page-nav-item","pn-icon"].forEach((t=>{switch(t){case"pn-page-nav-item":customElements.get(e(e(t)))||customElements.define(e(e(t)),r);break;case"pn-icon":customElements.get(e(e(t)))||s()}}))};export{c as PnPageNavItem,p as defineCustomElement}
+import{transformTag as e,proxyCustomElement as t,HTMLElement as n,createEvent as i,h as a,Host as o}from"@stencil/core/internal/client";import{d as s}from"./pn-icon2.js";const c=t(class extends n{constructor(e){super(),!1!==e&&this.__registerHost(),this.itemselection=i(this,"itemselection",7)}get hostElement(){return this}value;href;icon;itemselection;select(e){this.value&&!this.href&&e.preventDefault(),this.itemselection.emit(this.value)}render(){return a(o,{key:"b4249e533daa9f96259d5379fdfcd90d87f3cc11"},a("li",{key:"86b933f5d6b4bc827826c679a6ddf04efca08ee9"},a("a",{key:"217797b771a53db8bbf53272eaafe816fc668ebc",href:this.href||"#",class:"pn-page-nav-item",onClick:e=>this.select(e)},this.icon&&a("pn-icon",{key:"8de359aa34e50caa65a66db5620590f24d409dae",icon:this.icon,color:"white"}),a("slot",{key:"5610d030d68f2e7f3f8eac68c02a01c3f9624f5e"}))))}static get style(){return`${e("pn-page-nav-item")}{position:relative;color:#ffffff;margin-right:0.5em;z-index:2;white-space:nowrap;scroll-snap-align:center;outline:none;-webkit-tap-highlight-color:transparent;transform:translateZ(0)}${e("pn-page-nav-item")} a{text-decoration:none;color:#ffffff;height:100%;width:100%;padding:0.5em;font-weight:500;border-radius:3em;border:0.0625em solid transparent;display:inline-flex;align-items:center;cursor:pointer;outline:none;transition:box-shadow 0.15s}${e("pn-page-nav-item")} a:focus{box-shadow:0 0 0 0.1em #d3cecb}${e("pn-page-nav-item")} a>${e("pn-icon")}{margin-right:0.5em}${e("pn-page-nav-item")}:last-of-type{margin-right:0}`}},[772,"pn-page-nav-item",{value:[1],href:[1],icon:[1]}]),r=c,f=function(){"undefined"!=typeof customElements&&["pn-page-nav-item","pn-icon"].forEach((t=>{switch(t){case"pn-page-nav-item":customElements.get(e(e(t)))||customElements.define(e(e(t)),c);break;case"pn-icon":customElements.get(e(e(t)))||s()}}))};export{r as PnPageNavItem,f as defineCustomElement}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as n,proxyCustomElement as e,HTMLElement as t,createEvent as a,forceUpdate as i,h as o,Host as s}from"@stencil/core/internal/client";import{u as r}from"./helpers.js";import{a as p}from"./arrow_left.js";import{a as d}from"./arrow_right.js";import{c as h}from"./chevron_down.js";import{d as c}from"./pn-icon2.js";const l=e(class extends t{constructor(n){super(),!1!==n&&this.__registerHost(),this.navchange=a(this,"navchange",7)}mo;navContainer;navWrapper;navItems=[];dropdownButton;dropdownEl;dropdownItems;dropdownEls;eventHandler=this.keyboardEvents.bind(this);globalEventHandler=this.globalEvents.bind(this);activeBg;hoverBg;scrollRegistered=!1;get hostElement(){return this}currentSelection;showScrollArrows=!1;showLeftArrow=!1;showRightArrow=!1;dropdownOpen=!1;dropdownLinks=[];dropdownActive=!1;value;dropdown=!1;navid="pn-page-nav-"+r();navchange;changeHandler({target:e}){this.currentSelection=e.closest(""+n("pn-page-nav-item")),e.value&&(this.value=e.value),this.dropdownOpen&&(this.dropdownOpen=!1)}handleResize(){this.rerender()}valueHandler(){this.value||(this.currentSelection=null),this.calcHighlight(this.currentSelection,this.activeBg),this.navchange.emit(this.value),this.dropdownActive&&this.isDropdownItemActive()}dropdownHandler(){this.dropdownOpen?requestAnimationFrame((()=>{this.addGlobalEventListeners()})):this.removeGlobalEventListeners()}componentWillLoad(){this.dropdown&&(this.dropdownEls=Array.from(this.hostElement.querySelectorAll(""+n("pn-page-nav-dropdown-item"))),this.dropdownEls.length&&(this.dropdownActive=!0,this.initiateDropdown()))}componentDidLoad(){this.mo&&this.mo.disconnect(),this.mo=new MutationObserver((()=>{i(this.hostElement),this.setActiveNavItem(),this.rerender()})),this.mo.observe(this.hostElement,{childList:!0,subtree:!0}),this.navWrapper=this.hostElement.querySelector(".pn-page-nav"),this.navContainer=this.hostElement.querySelector(".pn-page-nav-items"),this.activeBg=this.hostElement.querySelector(".pn-pn-active"),this.hoverBg=this.hostElement.querySelector(".pn-pn-hover"),this.hostElement.addEventListener("mouseover",(({target:n})=>this.calcHighlight(n,this.hoverBg))),this.setActiveNavItem(),this.rerender()}setActiveNavItem(){this.navItems=Array.from(this.hostElement.querySelectorAll(""+n("pn-page-nav-item"))),this.navItems.forEach((n=>{this.value===n.value?this.currentSelection=n:n.removeAttribute("selected"),n.querySelector("a").addEventListener("focus",(({target:n})=>this.calcHighlight(n,this.hoverBg)))})),this.dropdownActive&&(this.dropdownItems=Array.from(this.hostElement.querySelectorAll(".pn-page-nav-dropdown-item")),this.isDropdownItemActive(),this.dropdownLinks=this.dropdownItems.map(((e,t)=>(e.setAttribute("data-index",""+t),e.closest(""+n("pn-page-nav-dropdown-item")).value))))}rerender(){requestAnimationFrame((()=>{this.calcHighlight(this.currentSelection,this.activeBg),this.scrollArrowRender()}))}calcHighlight(e,t){if(!e?.closest(""+n("pn-page-nav-item")))return void t?.classList.add("hidden");t&&t.classList.remove("hidden");const a=e.closest(""+n("pn-page-nav-item")).getBoundingClientRect(),{left:i}=this.navContainer.getBoundingClientRect(),{left:o,height:s,width:r}=a;t.style.setProperty("transform",`translate(${o-i+this.navContainer.scrollLeft}px, -50%`),t.style.setProperty("width",r+"px"),t.style.setProperty("height",s+"px")}scrollArrowRender(){if(this.navWrapper){if(this.navWrapper.scrollWidth>this.navWrapper.clientWidth){this.showScrollArrows=!0,this.scrollRegistered||(this.navWrapper.addEventListener("scroll",this.scrollArrowRender.bind(this)),this.scrollRegistered=!0);const n=Math.round(this.navWrapper.scrollWidth-this.navWrapper.scrollLeft)-this.navWrapper.clientWidth;return this.showLeftArrow=this.navWrapper.scrollLeft>0,void(this.showRightArrow=n>0)}this.showLeftArrow=!1,this.showRightArrow=!1,this.showScrollArrows=!1}}scroll(n){this.navWrapper.scroll({left:this.navWrapper.scrollLeft+n,behavior:"smooth"})}scrollArrowClasses(){let n="pn-pn-arrows ";return this.showLeftArrow&&(n+="pn-pn-left-visible "),this.showRightArrow&&(n+="pn-pn-right-visible "),n}initiateDropdown(){requestAnimationFrame((()=>{this.dropdownButton=this.hostElement.querySelector(".pn-page-nav-dropdown-button"),this.dropdownEl=this.hostElement.querySelector(".pn-page-nav-dropdown"),this.addDropdownEventListeners()}))}toggleDropdown(){this.dropdownOpen=!this.dropdownOpen}isDropdownItemActive(){this.dropdownEls.forEach((n=>{n.value&&this.value===n.value?n.setAttribute("active","true"):n.removeAttribute("active")}))}addDropdownEventListeners(){this.hostElement.addEventListener("keydown",this.eventHandler),this.hostElement.addEventListener("click",this.eventHandler)}addGlobalEventListeners(){const n=this.hostElement.getRootNode();n.addEventListener("focusin",this.globalEventHandler),n.addEventListener("keydown",this.globalEventHandler),n.addEventListener("click",this.globalEventHandler)}removeGlobalEventListeners(){const n=this.hostElement.getRootNode();n.removeEventListener("focusin",this.globalEventHandler),n.removeEventListener("keydown",this.globalEventHandler),n.removeEventListener("click",this.globalEventHandler)}keyboardEvents(n){const e=n.composedPath()[0];"keydown"===n.type&&!this.dropdownOpen&&e===this.dropdownButton&&["ArrowUp","ArrowDown"].includes(n.code)&&(this.dropdownOpen=!0,requestAnimationFrame((()=>{this.focusNextDropdownItem()})))}globalEvents(n){const e=n.composedPath()[0];"keydown"===n.type&&"Escape"===n.code&&(this.dropdownOpen=!1,this.dropdownButton.focus()),"ArrowDown"===n.code&&this.focusNextDropdownItem(),"ArrowUp"===n.code&&this.focusPrevDropdownItem(),"click"!==n.type&&"focusin"!==n.type||this.dropdownEl.contains(e)||(this.dropdownOpen=!1)}focusNextDropdownItem(){const{activeElement:n}=this.hostElement.getRootNode();if(!n.classList.contains("pn-page-nav-dropdown-item"))return void this.dropdownItems[0].focus();const e=parseInt(n.getAttribute("data-index"));e<this.dropdownItems.length-1&&this.dropdownItems[e+1].focus()}focusPrevDropdownItem(){const{activeElement:n}=this.hostElement.getRootNode();n.classList.contains("dropdown-item")||this.dropdownItems[this.dropdownItems.length-1].focus();const e=parseInt(n.getAttribute("data-index"));e>0?this.dropdownItems[e-1].focus():this.dropdownButton.focus()}dropdownButtonClasses(){let n="pn-page-nav-dropdown-button ";return this.dropdownLinks.includes(this.value)&&(n+="pn-page-nav-dropdown-active "),n}dropdownClasses(){let n="pn-page-nav-dropdown ";return this.dropdownOpen&&(n+="pn-page-nav-dropdown-open "),n}render(){return o(s,{key:"f76a115ccea11e238d2aee5288b06675abc80b8a"},o("div",{key:"453102a432daf9b567be4f5dc415bab34b48bc84",class:"pn-page-nav-wrapper"},o("nav",{key:"9207ade4b4d6cea4c22622c91988eef2b3c812bc",class:"pn-page-nav"},this.dropdownActive&&o("button",{key:"3365178312cfe2b9d48fccbc794d2a8a857ed6f0",type:"button",class:this.dropdownButtonClasses(),onClick:()=>this.toggleDropdown(),"aria-controls":"page-nav-dropdown","aria-expanded":""+this.dropdownOpen},this.dropdown,o("pn-icon",{key:"460172b12b334e96920d185dcbc868acafc0cdcc",icon:h,color:"white",small:!0}),o("div",{key:"f16219e3070e00ebd1ab143b8803a94c44e242bc",class:"pn-page-nav-divider"})),o("ul",{key:"560ef88c95269f29b1f76ee65e3a2541fc2482ce",class:"pn-page-nav-items"},o("slot",{key:"7b1cfc89976421963cc19f958f21e29bfc796621"}),o("li",{key:"7df00d0a42fc3f48f82afdb0bbbf943229604293",class:"pn-pn-bg pn-pn-active",role:"presentation"}),o("li",{key:"68fd6cc6f9dfcb834c62105f81ff2e21b332be94",class:"pn-pn-bg pn-pn-hover",role:"presentation"}))),this.showScrollArrows&&o("div",{key:"ba26546a6fa3f750a5314dd80f80e1487b4962ec",class:this.scrollArrowClasses()},o("button",{key:"57b43598cb3288b068c3583c822be35418b28e91",class:"pn-pn-arrow-left",onClick:()=>this.scroll(-120),tabindex:"-1"},o("pn-icon",{key:"b812b5b471ba0982be6cb3bcacc84bb2f52fa0e3",icon:p,color:"white"})),o("button",{key:"70d5bffed71999aaf154f88590378496d79e7f55",class:"pn-pn-arrow-right",onClick:()=>this.scroll(120),tabindex:"-1"},o("pn-icon",{key:"a2d4319bab3a80b092321873ff66e4b421f14743",icon:d,color:"blue700"})))),this.dropdownActive&&o("ul",{key:"1e2a73e7b4d523f3feba0dc18ccc14871b551862",id:this.navid,class:this.dropdownClasses()},o("slot",{key:"20f647483c10a84de4bf2f40126b83b65b61b99f",name:"dropdown-item"})))}static get watchers(){return{value:[{valueHandler:0}],dropdownOpen:[{dropdownHandler:0}]}}static get style(){return`${n("pn-page-nav")}{display:block;position:relative;font-size:clamp(0.8em, 2vw, 1em);z-index:5}.pn-page-nav-wrapper{transform:translateZ(0);font-size:inherit;max-width:100%;overflow:hidden;position:relative;display:inline-flex;border-radius:3em}.pn-page-nav{display:flex;align-items:center;border-radius:3em;min-height:3em;background:#0d234b;border:0.0625em solid #d3cecb;position:relative;overflow-x:auto;scroll-snap-type:x mandatory}.pn-page-nav::-webkit-scrollbar{display:none}.pn-page-nav ul.pn-page-nav-items{display:flex;list-style-type:none;padding:0.25em;margin:0;position:relative}.pn-page-nav-items>.pn-pn-bg{position:absolute;top:50%;transform:translateY(-50%);will-change:transform;left:0;border-radius:3em;transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, box-shadow 0.15s}.pn-page-nav-items>.pn-pn-bg.pn-pn-active{box-shadow:0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);background:#005d92;z-index:1}.pn-page-nav-items>.pn-pn-bg.pn-pn-hover{background:#ffffff;opacity:0;border:0.0625em solid transparent;z-index:0}.pn-page-nav-items>.pn-pn-bg.hidden{opacity:0}@media (hover: hover){ul.pn-page-nav-items:focus-within .pn-pn-hover,ul.pn-page-nav-items:hover .pn-pn-hover{opacity:0.12}}${n("pn-page-nav")} .pn-pn-arrows{position:absolute;top:50%;transform:translateY(-50%);left:0;height:100%;width:100%;z-index:3;display:flex;justify-content:space-between;align-items:center;pointer-events:none;padding:0.125em 0.1em}${n("pn-page-nav")} .pn-pn-arrows svg{width:1.5em}${n("pn-page-nav")} .pn-pn-arrows svg.pn-icon-svg path{fill:#005d92}${n("pn-page-nav")} .pn-pn-arrows>*{transition:transform 0.2s, opacity 0.2s, background 0.1s, box-shadow 0.1s;pointer-events:all;height:100%;aspect-ratio:1;background:#ffffff;display:flex;align-items:center;justify-content:center;outline:none;cursor:pointer;opacity:0;will-change:transform;-webkit-tap-highlight-color:transparent;border-radius:50%;border:0.0625em solid #0d234b}${n("pn-page-nav")} .pn-pn-arrows>*.pn-pn-arrow-left{transform:translateX(-100%)}${n("pn-page-nav")} .pn-pn-arrows>*.pn-pn-arrow-right{transform:translateX(100%)}@media screen and (max-width: 30em){${n("pn-page-nav")} .pn-pn-arrows>*{border:none}${n("pn-page-nav")} .pn-pn-arrows>* ${n("pn-icon")} .pn-icon-svg{width:100%;height:2em;animation:arrow 0.6s ease-in-out alternate infinite}${n("pn-page-nav")} .pn-pn-arrows>* ${n("pn-icon")} .pn-icon-svg path{fill:#ffffff}${n("pn-page-nav")} .pn-pn-arrows>*.pn-pn-arrow-left{background:linear-gradient(to left, transparent, #0d234b 60%);border-radius:50% 0 0 50%}${n("pn-page-nav")} .pn-pn-arrows>*.pn-pn-arrow-right{background:linear-gradient(to right, transparent, #0d234b 40%);border-radius:0 50% 50% 0}}${n("pn-page-nav")} .pn-pn-arrows.pn-pn-left-visible .pn-pn-arrow-left,${n("pn-page-nav")} .pn-pn-arrows.pn-pn-right-visible .pn-pn-arrow-right{opacity:1;transform:translateX(0)}@keyframes arrow{to{transform:translateX(10%)}}button.pn-page-nav-dropdown-button{font-size:1em;border-radius:3em 0 0 3em;background:#0d234b;color:#ffffff;padding:0.5em 1em 0.5em 1.5em;cursor:pointer;display:flex;align-items:center;border:none;transition:background 0.15s;outline:none;height:100%;position:relative;margin:0 0.5em 0 0;font-weight:500}button.pn-page-nav-dropdown-button ${n("pn-icon")}{margin-left:0.5em}button.pn-page-nav-dropdown-button:hover,button.pn-page-nav-dropdown-button:focus{background:#263655}button.pn-page-nav-dropdown-button:focus{box-shadow:inset 0 0 0 0.1em #005d92, inset 0 0 0 0.2em #d3cecb}button.pn-page-nav-dropdown-button.pn-page-nav-dropdown-active{background:#005d92}button.pn-page-nav-dropdown-button.pn-page-nav-dropdown-active:hover,button.pn-page-nav-dropdown-button.pn-page-nav-dropdown-active:focus{background:#005d92}.pn-page-nav-divider{height:60%;background:#d3cecb;width:0.1em;position:absolute;right:0;transform:translateX(50%)}ul.pn-page-nav-dropdown{position:absolute;left:0;top:110%;background:#0d234b;border-radius:0.5em;margin:0;padding:0;list-style-type:none;box-shadow:0px 6.4000000954px 14.3999996185px 0px rgba(0, 0, 0, 0.1294117647), 0px 1.2000000477px 3.5999999046px 0px rgba(0, 0, 0, 0.1019607843);font-size:inherit;display:none}ul.pn-page-nav-dropdown.pn-page-nav-dropdown-open{display:block}`}},[772,"pn-page-nav",{value:[1025],dropdown:[8],navid:[1],currentSelection:[32],showScrollArrows:[32],showLeftArrow:[32],showRightArrow:[32],dropdownOpen:[32],dropdownLinks:[32],dropdownActive:[32]},[[0,"itemselection","changeHandler"],[9,"resize","handleResize"]],{value:[{valueHandler:0}],dropdownOpen:[{dropdownHandler:0}]}]),b=l,g=function(){"undefined"!=typeof customElements&&["pn-page-nav","pn-icon"].forEach((e=>{switch(e){case"pn-page-nav":customElements.get(n(n(e)))||customElements.define(n(n(e)),l);break;case"pn-icon":customElements.get(n(n(e)))||c()}}))};export{b as PnPageNav,g as defineCustomElement}
+import{transformTag as n,proxyCustomElement as e,HTMLElement as t,createEvent as a,forceUpdate as i,h as o,Host as s}from"@stencil/core/internal/client";import{u as r}from"./helpers.js";import{a as p}from"./arrow_left.js";import{a as d}from"./arrow_right.js";import{c as h}from"./chevron_down.js";import{d as c}from"./pn-icon2.js";const l=e(class extends t{constructor(n){super(),!1!==n&&this.__registerHost(),this.navchange=a(this,"navchange",7)}mo;navContainer;navWrapper;navItems=[];dropdownButton;dropdownEl;dropdownItems;dropdownEls;eventHandler=this.keyboardEvents.bind(this);globalEventHandler=this.globalEvents.bind(this);activeBg;hoverBg;scrollRegistered=!1;get hostElement(){return this}currentSelection;showScrollArrows=!1;showLeftArrow=!1;showRightArrow=!1;dropdownOpen=!1;dropdownLinks=[];dropdownActive=!1;value;dropdown=!1;navid="pn-page-nav-"+r();navchange;changeHandler({target:e}){this.currentSelection=e.closest(""+n("pn-page-nav-item")),e.value&&(this.value=e.value),this.dropdownOpen&&(this.dropdownOpen=!1)}handleResize(){this.rerender()}valueHandler(){this.value||(this.currentSelection=null),this.calcHighlight(this.currentSelection,this.activeBg),this.navchange.emit(this.value),this.dropdownActive&&this.isDropdownItemActive()}dropdownHandler(){this.dropdownOpen?requestAnimationFrame((()=>{this.addGlobalEventListeners()})):this.removeGlobalEventListeners()}componentWillLoad(){this.dropdown&&(this.dropdownEls=Array.from(this.hostElement.querySelectorAll(""+n("pn-page-nav-dropdown-item"))),this.dropdownEls.length&&(this.dropdownActive=!0,this.initiateDropdown()))}componentDidLoad(){this.mo&&this.mo.disconnect(),this.mo=new MutationObserver((()=>{i(this.hostElement),this.setActiveNavItem(),this.rerender()})),this.mo.observe(this.hostElement,{childList:!0,subtree:!0}),this.navWrapper=this.hostElement.querySelector(".pn-page-nav"),this.navContainer=this.hostElement.querySelector(".pn-page-nav-items"),this.activeBg=this.hostElement.querySelector(".pn-pn-active"),this.hoverBg=this.hostElement.querySelector(".pn-pn-hover"),this.hostElement.addEventListener("mouseover",(({target:n})=>this.calcHighlight(n,this.hoverBg))),this.setActiveNavItem(),this.rerender()}setActiveNavItem(){this.navItems=Array.from(this.hostElement.querySelectorAll(""+n("pn-page-nav-item"))),this.navItems.forEach((n=>{this.value===n.value?this.currentSelection=n:n.removeAttribute("selected"),n.querySelector("a").addEventListener("focus",(({target:n})=>this.calcHighlight(n,this.hoverBg)))})),this.dropdownActive&&(this.dropdownItems=Array.from(this.hostElement.querySelectorAll(".pn-page-nav-dropdown-item")),this.isDropdownItemActive(),this.dropdownLinks=this.dropdownItems.map(((e,t)=>(e.setAttribute("data-index",""+t),e.closest(""+n("pn-page-nav-dropdown-item")).value))))}rerender(){requestAnimationFrame((()=>{this.calcHighlight(this.currentSelection,this.activeBg),this.scrollArrowRender()}))}calcHighlight(e,t){if(!e?.closest(""+n("pn-page-nav-item")))return void t?.classList.add("hidden");t&&t.classList.remove("hidden");const a=e.closest(""+n("pn-page-nav-item")).getBoundingClientRect(),{left:i}=this.navContainer.getBoundingClientRect(),{left:o,height:s,width:r}=a;t.style.setProperty("transform",`translate(${o-i+this.navContainer.scrollLeft}px, -50%`),t.style.setProperty("width",r+"px"),t.style.setProperty("height",s+"px")}scrollArrowRender(){if(this.navWrapper){if(this.navWrapper.scrollWidth>this.navWrapper.clientWidth){this.showScrollArrows=!0,this.scrollRegistered||(this.navWrapper.addEventListener("scroll",this.scrollArrowRender.bind(this)),this.scrollRegistered=!0);const n=Math.round(this.navWrapper.scrollWidth-this.navWrapper.scrollLeft)-this.navWrapper.clientWidth;return this.showLeftArrow=this.navWrapper.scrollLeft>0,void(this.showRightArrow=n>0)}this.showLeftArrow=!1,this.showRightArrow=!1,this.showScrollArrows=!1}}scroll(n){this.navWrapper.scroll({left:this.navWrapper.scrollLeft+n,behavior:"smooth"})}scrollArrowClasses(){let n="pn-pn-arrows ";return this.showLeftArrow&&(n+="pn-pn-left-visible "),this.showRightArrow&&(n+="pn-pn-right-visible "),n}initiateDropdown(){requestAnimationFrame((()=>{this.dropdownButton=this.hostElement.querySelector(".pn-page-nav-dropdown-button"),this.dropdownEl=this.hostElement.querySelector(".pn-page-nav-dropdown"),this.addDropdownEventListeners()}))}toggleDropdown(){this.dropdownOpen=!this.dropdownOpen}isDropdownItemActive(){this.dropdownEls.forEach((n=>{n.value&&this.value===n.value?n.setAttribute("active","true"):n.removeAttribute("active")}))}addDropdownEventListeners(){this.hostElement.addEventListener("keydown",this.eventHandler),this.hostElement.addEventListener("click",this.eventHandler)}addGlobalEventListeners(){const n=this.hostElement.getRootNode();n.addEventListener("focusin",this.globalEventHandler),n.addEventListener("keydown",this.globalEventHandler),n.addEventListener("click",this.globalEventHandler)}removeGlobalEventListeners(){const n=this.hostElement.getRootNode();n.removeEventListener("focusin",this.globalEventHandler),n.removeEventListener("keydown",this.globalEventHandler),n.removeEventListener("click",this.globalEventHandler)}keyboardEvents(n){const e=n.composedPath()[0];"keydown"===n.type&&!this.dropdownOpen&&e===this.dropdownButton&&["ArrowUp","ArrowDown"].includes(n.code)&&(this.dropdownOpen=!0,requestAnimationFrame((()=>{this.focusNextDropdownItem()})))}globalEvents(n){const e=n.composedPath()[0];"keydown"===n.type&&"Escape"===n.code&&(this.dropdownOpen=!1,this.dropdownButton.focus()),"ArrowDown"===n.code&&this.focusNextDropdownItem(),"ArrowUp"===n.code&&this.focusPrevDropdownItem(),"click"!==n.type&&"focusin"!==n.type||this.dropdownEl.contains(e)||(this.dropdownOpen=!1)}focusNextDropdownItem(){const{activeElement:n}=this.hostElement.getRootNode();if(!n.classList.contains("pn-page-nav-dropdown-item"))return void this.dropdownItems[0].focus();const e=parseInt(n.getAttribute("data-index"));e<this.dropdownItems.length-1&&this.dropdownItems[e+1].focus()}focusPrevDropdownItem(){const{activeElement:n}=this.hostElement.getRootNode();n.classList.contains("dropdown-item")||this.dropdownItems[this.dropdownItems.length-1].focus();const e=parseInt(n.getAttribute("data-index"));e>0?this.dropdownItems[e-1].focus():this.dropdownButton.focus()}dropdownButtonClasses(){let n="pn-page-nav-dropdown-button ";return this.dropdownLinks.includes(this.value)&&(n+="pn-page-nav-dropdown-active "),n}dropdownClasses(){let n="pn-page-nav-dropdown ";return this.dropdownOpen&&(n+="pn-page-nav-dropdown-open "),n}render(){return o(s,{key:"2bca6384910b5b314ddbb6f4f646fa95ee084c09"},o("div",{key:"2322adc21546db4fcf950f0136516ef3a059b409",class:"pn-page-nav-wrapper"},o("nav",{key:"62ce2c8c14c2748b8e5f4fd91263c19b70db1559",class:"pn-page-nav"},this.dropdownActive&&o("button",{key:"a7839cdd22ca1fbb7f2a1dcb56ebf8d9d7dda05d",type:"button",class:this.dropdownButtonClasses(),onClick:()=>this.toggleDropdown(),"aria-controls":"page-nav-dropdown","aria-expanded":""+this.dropdownOpen},this.dropdown,o("pn-icon",{key:"1a91a0a67c34295456c3bdb943740b257d942a53",icon:h,color:"white",small:!0}),o("div",{key:"1197635d3c157fae6b5fd90b52a8a61af8de4b8e",class:"pn-page-nav-divider"})),o("ul",{key:"3a19fcbe877e2dc81c76d378fffe1536ac1af54f",class:"pn-page-nav-items"},o("slot",{key:"aff622272002a021fc4606cb9d43aa9d86e06ba3"}),o("li",{key:"eb6d08cc390d742576a633629ee930b979ee9fdf",class:"pn-pn-bg pn-pn-active",role:"presentation"}),o("li",{key:"86be3cba39c47f3bc7f3c87afedfef66afcd6fb2",class:"pn-pn-bg pn-pn-hover",role:"presentation"}))),this.showScrollArrows&&o("div",{key:"875412be070486024d5886f5f4099747b0d51b8a",class:this.scrollArrowClasses()},o("button",{key:"358199bf37ce3473f002ae20e6dfab31a1ae0ac5",class:"pn-pn-arrow-left",onClick:()=>this.scroll(-120),tabindex:"-1"},o("pn-icon",{key:"c40ceef73645e7bf9cec3935e892faf8c369a158",icon:p,color:"white"})),o("button",{key:"8ac847b47005a0d61f72de5122601c38ff268655",class:"pn-pn-arrow-right",onClick:()=>this.scroll(120),tabindex:"-1"},o("pn-icon",{key:"dc21c3242fe32126adca3ebc38c8a8eeed705aca",icon:d,color:"blue700"})))),this.dropdownActive&&o("ul",{key:"7666ab6c68d3b9fe0bd39ac4bd1cec2e240e6871",id:this.navid,class:this.dropdownClasses()},o("slot",{key:"64c6a3b285fb8058eb8085f2557e001c6711db4c",name:"dropdown-item"})))}static get watchers(){return{value:[{valueHandler:0}],dropdownOpen:[{dropdownHandler:0}]}}static get style(){return`${n("pn-page-nav")}{display:block;position:relative;font-size:clamp(0.8em, 2vw, 1em);z-index:5}.pn-page-nav-wrapper{transform:translateZ(0);font-size:inherit;max-width:100%;overflow:hidden;position:relative;display:inline-flex;border-radius:3em}.pn-page-nav{display:flex;align-items:center;border-radius:3em;min-height:3em;background:#0d234b;border:0.0625em solid #d3cecb;position:relative;overflow-x:auto;scroll-snap-type:x mandatory}.pn-page-nav::-webkit-scrollbar{display:none}.pn-page-nav ul.pn-page-nav-items{display:flex;list-style-type:none;padding:0.25em;margin:0;position:relative}.pn-page-nav-items>.pn-pn-bg{position:absolute;top:50%;transform:translateY(-50%);will-change:transform;left:0;border-radius:3em;transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, box-shadow 0.15s}.pn-page-nav-items>.pn-pn-bg.pn-pn-active{box-shadow:0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);background:#005d92;z-index:1}.pn-page-nav-items>.pn-pn-bg.pn-pn-hover{background:#ffffff;opacity:0;border:0.0625em solid transparent;z-index:0}.pn-page-nav-items>.pn-pn-bg.hidden{opacity:0}@media (hover: hover){ul.pn-page-nav-items:focus-within .pn-pn-hover,ul.pn-page-nav-items:hover .pn-pn-hover{opacity:0.12}}${n("pn-page-nav")} .pn-pn-arrows{position:absolute;top:50%;transform:translateY(-50%);left:0;height:100%;width:100%;z-index:3;display:flex;justify-content:space-between;align-items:center;pointer-events:none;padding:0.125em 0.1em}${n("pn-page-nav")} .pn-pn-arrows svg{width:1.5em}${n("pn-page-nav")} .pn-pn-arrows svg.pn-icon-svg path{fill:#005d92}${n("pn-page-nav")} .pn-pn-arrows>*{transition:transform 0.2s, opacity 0.2s, background 0.1s, box-shadow 0.1s;pointer-events:all;height:100%;aspect-ratio:1;background:#ffffff;display:flex;align-items:center;justify-content:center;outline:none;cursor:pointer;opacity:0;will-change:transform;-webkit-tap-highlight-color:transparent;border-radius:50%;border:0.0625em solid #0d234b}${n("pn-page-nav")} .pn-pn-arrows>*.pn-pn-arrow-left{transform:translateX(-100%)}${n("pn-page-nav")} .pn-pn-arrows>*.pn-pn-arrow-right{transform:translateX(100%)}@media screen and (max-width: 30em){${n("pn-page-nav")} .pn-pn-arrows>*{border:none}${n("pn-page-nav")} .pn-pn-arrows>* ${n("pn-icon")} .pn-icon-svg{width:100%;height:2em;animation:arrow 0.6s ease-in-out alternate infinite}${n("pn-page-nav")} .pn-pn-arrows>* ${n("pn-icon")} .pn-icon-svg path{fill:#ffffff}${n("pn-page-nav")} .pn-pn-arrows>*.pn-pn-arrow-left{background:linear-gradient(to left, transparent, #0d234b 60%);border-radius:50% 0 0 50%}${n("pn-page-nav")} .pn-pn-arrows>*.pn-pn-arrow-right{background:linear-gradient(to right, transparent, #0d234b 40%);border-radius:0 50% 50% 0}}${n("pn-page-nav")} .pn-pn-arrows.pn-pn-left-visible .pn-pn-arrow-left,${n("pn-page-nav")} .pn-pn-arrows.pn-pn-right-visible .pn-pn-arrow-right{opacity:1;transform:translateX(0)}@keyframes arrow{to{transform:translateX(10%)}}button.pn-page-nav-dropdown-button{font-size:1em;border-radius:3em 0 0 3em;background:#0d234b;color:#ffffff;padding:0.5em 1em 0.5em 1.5em;cursor:pointer;display:flex;align-items:center;border:none;transition:background 0.15s;outline:none;height:100%;position:relative;margin:0 0.5em 0 0;font-weight:500}button.pn-page-nav-dropdown-button ${n("pn-icon")}{margin-left:0.5em}button.pn-page-nav-dropdown-button:hover,button.pn-page-nav-dropdown-button:focus{background:#263655}button.pn-page-nav-dropdown-button:focus{box-shadow:inset 0 0 0 0.1em #005d92, inset 0 0 0 0.2em #d3cecb}button.pn-page-nav-dropdown-button.pn-page-nav-dropdown-active{background:#005d92}button.pn-page-nav-dropdown-button.pn-page-nav-dropdown-active:hover,button.pn-page-nav-dropdown-button.pn-page-nav-dropdown-active:focus{background:#005d92}.pn-page-nav-divider{height:60%;background:#d3cecb;width:0.1em;position:absolute;right:0;transform:translateX(50%)}ul.pn-page-nav-dropdown{position:absolute;left:0;top:110%;background:#0d234b;border-radius:0.5em;margin:0;padding:0;list-style-type:none;box-shadow:0px 6.4000000954px 14.3999996185px 0px rgba(0, 0, 0, 0.1294117647), 0px 1.2000000477px 3.5999999046px 0px rgba(0, 0, 0, 0.1019607843);font-size:inherit;display:none}ul.pn-page-nav-dropdown.pn-page-nav-dropdown-open{display:block}`}},[772,"pn-page-nav",{value:[1025],dropdown:[8],navid:[1],currentSelection:[32],showScrollArrows:[32],showLeftArrow:[32],showRightArrow:[32],dropdownOpen:[32],dropdownLinks:[32],dropdownActive:[32]},[[0,"itemselection","changeHandler"],[9,"resize","handleResize"]],{value:[{valueHandler:0}],dropdownOpen:[{dropdownHandler:0}]}]),g=l,b=function(){"undefined"!=typeof customElements&&["pn-page-nav","pn-icon"].forEach((e=>{switch(e){case"pn-page-nav":customElements.get(n(n(e)))||customElements.define(n(n(e)),l);break;case"pn-icon":customElements.get(n(n(e)))||c()}}))};export{g as PnPageNav,b as defineCustomElement}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as e,proxyCustomElement as t,HTMLElement as i,createEvent as a,h as n,Host as s}from"@stencil/core/internal/client";import{a as r}from"./arrow_left.js";import{a as p}from"./arrow_right.js";import{k as o,e as l}from"./helpers.js";import{d as g}from"./pn-button2.js";import{d as h}from"./pn-icon2.js";import{d}from"./pn-select2.js";import{d as c}from"./pn-spinner2.js";const u={PAGINATION:{sv:"Paginering",en:"Pagination",da:"Paginering",fi:"Sivunumerointi",no:"Paginering"},PAGE:{sv:"Sida",en:"Page",da:"Side",fi:"Sivu",no:"Side"},PREVIOUS_PAGE:{sv:"Föregående sida",en:"Previous page",da:"Forrige side",fi:"Edellinen sivu",no:"Forrige side"},NEXT_PAGE:{sv:"Nästa sida",en:"Next page",da:"Næste side",fi:"Seuraava sivu",no:"Neste side"},ROWS_PAGE:{sv:"Object per sida",en:"Items per page",da:"Varer pr. side",fi:"Kohteita per sivu",no:"Elementer per side"}},m=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.pageSelected=a(this,"pageSelected",7),this.rowsSelected=a(this,"rowsSelected",7)}listElement;get hostElement(){return this}list;label;urlTemplate="?page={page}";paginationId=null;language=null;page=1;pages;pagesVisible=5;rows=null;rowsList="10,25,50";rowsLabel=null;handlePage(){this.page>this.pages?this.page=this.pages:this.page<1&&(this.page=1)}handlePages(){const e=[];this.pages>1e4&&(console.error(`${this.hostElement.localName}: Invalid page count ${this.pages}. Maximum is 10000.`),this.pages=1e4);for(let t=0;this.pages>t;t++)e.push({index:t,page:t+1});this.list=e,this.handlePage()}handlePagesVisible(){5>this.pagesVisible&&(this.pagesVisible=5),this.pagesVisible%2==0&&(this.pagesVisible=Math.round(this.pagesVisible)-1)}pageSelected;rowsSelected;async componentWillLoad(){this.handlePagesVisible(),this.handlePages(),null===this.language&&await o(this.hostElement)}translate(e){return u[e][this.language||l]}isActivePage(e){return e===this.page}navigate({page:e,event:t,focus:i}){"number"==typeof e&&e>=1&&this.pages>=e&&(this.page=e),this.pageSelected.emit({page:this.page,mouse:t}),i&&requestAnimationFrame((()=>{const e=this.listElement.querySelector('a[aria-current="page"]');e?.focus({preventScroll:!0})}))}useRowList(){return!!this.rows&&!!this.rowsList}setRows(e){this.rows=Number(e.target.value),this.rowsSelected.emit({rows:this.rows,change:e})}getRowList(){return this.rowsList.split(",").map((e=>Number(e.trim())))}getPaginationIndex(){const e=this.page;let t=e-Math.ceil(this.pagesVisible/2),i=e+Math.floor(this.pagesVisible/2);for(let e=0;this.pagesVisible>e;e++)t<0?(i++,t++):i>this.pages&&(i--,t--);const a=0>t?0:t,n=a>=1,s=this.pages>i;return{low:s&&n?a+1:a,high:s&&n?i-1:i,leftIndent:n,rightIndent:s}}getPagination(){const{low:e,high:t}=this.getPaginationIndex();return this.list.slice(e,t)}getUrl(e){return this.setPageText(this.urlTemplate,e)}setPageText(e,t){return e.replace("{page}",""+t)}getPrevPage(){let e=this.page;return e>1?e-=1:1}getNextPage(){let e=this.page;return this.pages>e?e+=1:this.pages}showIntendation(e=!1){const{leftIndent:t,rightIndent:i}=this.getPaginationIndex();return e?i:t}renderDivider(e=!1){return n("span",{class:"pn-pagination-dot","data-show":this.showIntendation(e)},"...")}renderButton({page:e,dataAttr:t}){const i=this.isActivePage(e);return n("pn-button",{label:""+e,arialabel:`${this.translate("PAGE")} ${e}`,ariacurrent:i?"page":null,href:this.getUrl(e),variant:i?"outlined":"",appearance:"light",small:!0,"data-arrow":t,"data-show":t&&this.showIntendation("last"===t),onPnClick:({detail:t})=>this.navigate({page:e,event:t,focus:!0})})}renderItem({page:e}){return n("li",{class:"pn-pagination-list-item","aria-setsize":this.pages,"aria-posinset":e},this.renderButton({page:e}))}renderJumpButton(e=!1){const t=e?"next":"prev",i=e?p:r,a=e?this.getNextPage():this.getPrevPage(),s=e?this.pages===this.page:1===this.page,o=s?"":` (${a})`,l=`${this.translate(e?"NEXT_PAGE":"PREVIOUS_PAGE")}${o}`;return n("pn-button",{arialabel:l,ariacurrent:s?"page":null,href:this.getUrl(a),rel:s?null:t,appearance:"light",small:!0,icon:i,iconOnly:!0,onPnClick:({detail:e})=>this.navigate({page:a,event:e})})}render(){return n(s,{key:"4b78edcca36adfd17035e9bed30ae5af6918d6e8"},n("nav",{key:"600dd0a880e03b9b5e98de4ee2d55134a0a90b8e",id:this.paginationId,class:"pn-pagination","aria-label":this.label||this.translate("PAGINATION")},this.useRowList()&&n("pn-select",{key:"8cca49bb36c9b10fa05e7637acec36e28b25fb8e",class:"pn-pagination-rows",label:this.rowsLabel||this.translate("ROWS_PAGE"),onChange:e=>this.setRows(e)},this.getRowList().map((e=>n("option",{value:e,selected:this.rows===Number(e),innerHTML:""+e})))),n("div",{key:"d3fc1f233ab4d62c868a8a0a2076d7666d5dd53a",class:"pn-pagination-container","data-right":this.useRowList()},this.renderJumpButton(),this.renderButton({page:1,dataAttr:"first"}),this.renderDivider(),n("ol",{key:"17be56bca6cd83e7f7dc3174e2e92d91a05930dd",class:"pn-pagination-list",ref:e=>this.listElement=e},this.getPagination().map((e=>this.renderItem(e)))),this.renderDivider(!0),this.renderButton({page:this.pages,dataAttr:"last"}),this.renderJumpButton(!0))))}static get watchers(){return{page:[{handlePage:0}],pages:[{handlePages:0}],pagesVisible:[{handlePagesVisible:0}]}}static get style(){return`${e("pn-pagination")}{display:block;margin-top:1.5em}${e("pn-pagination")} .pn-pagination{display:flex;gap:1em;flex-wrap:wrap;padding-top:1em;border-top:0.0625em solid #e9e6e5}${e("pn-pagination")} .pn-pagination-container{display:flex;align-items:center;flex-wrap:wrap;gap:0.5em;margin:0 auto}${e("pn-pagination")} .pn-pagination-container[data-right]{margin-right:0}${e("pn-pagination")} .pn-pagination-container>[data-arrow]{display:none}${e("pn-pagination")} .pn-pagination-container>[data-arrow][data-show]{display:inline-block}${e("pn-pagination")} .pn-pagination-rows{flex:0 0 auto;margin-right:auto}${e("pn-pagination")} .pn-pagination-pages{flex:0 0 auto;margin-left:auto}${e("pn-pagination")} .pn-pagination-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0.5em}${e("pn-pagination")} .pn-pagination-list ${e("pn-button")}>.pn-button{padding:0.375em 0.75em}${e("pn-pagination")} .pn-pagination-dot{display:none;padding:0.375em 0.5em;height:2em;width:2.5em;text-align:center}${e("pn-pagination")} .pn-pagination-dot[data-show]{display:inline-block}`}},[512,"pn-pagination",{label:[1],urlTemplate:[1,"url-template"],paginationId:[1,"pagination-id"],language:[1],page:[1538],pages:[1026],pagesVisible:[1026,"pages-visible"],rows:[1026],rowsList:[1,"rows-list"],rowsLabel:[1,"rows-label"],list:[32]},void 0,{page:[{handlePage:0}],pages:[{handlePages:0}],pagesVisible:[{handlePagesVisible:0}]}]),b=m,f=function(){"undefined"!=typeof customElements&&["pn-pagination","pn-button","pn-icon","pn-select","pn-spinner"].forEach((t=>{switch(t){case"pn-pagination":customElements.get(e(e(t)))||customElements.define(e(e(t)),m);break;case"pn-button":customElements.get(e(e(t)))||g();break;case"pn-icon":customElements.get(e(e(t)))||h();break;case"pn-select":customElements.get(e(e(t)))||d();break;case"pn-spinner":customElements.get(e(e(t)))||c()}}))};export{b as PnPagination,f as defineCustomElement}
+import{transformTag as e,proxyCustomElement as t,HTMLElement as i,createEvent as a,h as n,Host as s}from"@stencil/core/internal/client";import{a as r}from"./arrow_left.js";import{a as p}from"./arrow_right.js";import{k as o,e as l}from"./helpers.js";import{d as g}from"./pn-button2.js";import{d as h}from"./pn-icon2.js";import{d}from"./pn-select2.js";import{d as c}from"./pn-spinner2.js";const u={PAGINATION:{sv:"Paginering",en:"Pagination",da:"Paginering",fi:"Sivunumerointi",no:"Paginering"},PAGE:{sv:"Sida",en:"Page",da:"Side",fi:"Sivu",no:"Side"},PREVIOUS_PAGE:{sv:"Föregående sida",en:"Previous page",da:"Forrige side",fi:"Edellinen sivu",no:"Forrige side"},NEXT_PAGE:{sv:"Nästa sida",en:"Next page",da:"Næste side",fi:"Seuraava sivu",no:"Neste side"},ROWS_PAGE:{sv:"Object per sida",en:"Items per page",da:"Varer pr. side",fi:"Kohteita per sivu",no:"Elementer per side"}},m=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.pageSelected=a(this,"pageSelected",7),this.rowsSelected=a(this,"rowsSelected",7)}listElement;get hostElement(){return this}list;label;urlTemplate="?page={page}";paginationId=null;language=null;page=1;pages;pagesVisible=5;rows=null;rowsList="10,25,50";rowsLabel=null;handlePage(){this.page>this.pages?this.page=this.pages:this.page<1&&(this.page=1)}handlePages(){const e=[];this.pages>1e4&&(console.error(`${this.hostElement.localName}: Invalid page count ${this.pages}. Maximum is 10000.`),this.pages=1e4);for(let t=0;this.pages>t;t++)e.push({index:t,page:t+1});this.list=e,this.handlePage()}handlePagesVisible(){5>this.pagesVisible&&(this.pagesVisible=5),this.pagesVisible%2==0&&(this.pagesVisible=Math.round(this.pagesVisible)-1)}pageSelected;rowsSelected;async componentWillLoad(){this.handlePagesVisible(),this.handlePages(),null===this.language&&await o(this.hostElement)}translate(e){return u[e][this.language||l]}isActivePage(e){return e===this.page}navigate({page:e,event:t,focus:i}){"number"==typeof e&&e>=1&&this.pages>=e&&(this.page=e),this.pageSelected.emit({page:this.page,mouse:t}),i&&requestAnimationFrame((()=>{const e=this.listElement.querySelector('a[aria-current="page"]');e?.focus({preventScroll:!0})}))}useRowList(){return!!this.rows&&!!this.rowsList}setRows(e){this.rows=Number(e.target.value),this.rowsSelected.emit({rows:this.rows,change:e})}getRowList(){return this.rowsList.split(",").map((e=>Number(e.trim())))}getPaginationIndex(){const e=this.page;let t=e-Math.ceil(this.pagesVisible/2),i=e+Math.floor(this.pagesVisible/2);for(let e=0;this.pagesVisible>e;e++)t<0?(i++,t++):i>this.pages&&(i--,t--);const a=0>t?0:t,n=a>=1,s=this.pages>i;return{low:s&&n?a+1:a,high:s&&n?i-1:i,leftIndent:n,rightIndent:s}}getPagination(){const{low:e,high:t}=this.getPaginationIndex();return this.list.slice(e,t)}getUrl(e){return this.setPageText(this.urlTemplate,e)}setPageText(e,t){return e.replace("{page}",""+t)}getPrevPage(){let e=this.page;return e>1?e-=1:1}getNextPage(){let e=this.page;return this.pages>e?e+=1:this.pages}showIntendation(e=!1){const{leftIndent:t,rightIndent:i}=this.getPaginationIndex();return e?i:t}renderDivider(e=!1){return n("span",{class:"pn-pagination-dot","data-show":this.showIntendation(e)},"...")}renderButton({page:e,dataAttr:t}){const i=this.isActivePage(e);return n("pn-button",{label:""+e,arialabel:`${this.translate("PAGE")} ${e}`,ariacurrent:i?"page":null,href:this.getUrl(e),variant:i?"outlined":"",appearance:"light",small:!0,"data-arrow":t,"data-show":t&&this.showIntendation("last"===t),onPnClick:({detail:t})=>this.navigate({page:e,event:t,focus:!0})})}renderItem({page:e}){return n("li",{class:"pn-pagination-list-item","aria-setsize":this.pages,"aria-posinset":e},this.renderButton({page:e}))}renderJumpButton(e=!1){const t=e?"next":"prev",i=e?p:r,a=e?this.getNextPage():this.getPrevPage(),s=e?this.pages===this.page:1===this.page,o=s?"":` (${a})`,l=`${this.translate(e?"NEXT_PAGE":"PREVIOUS_PAGE")}${o}`;return n("pn-button",{arialabel:l,ariacurrent:s?"page":null,href:this.getUrl(a),rel:s?null:t,appearance:"light",small:!0,icon:i,iconOnly:!0,onPnClick:({detail:e})=>this.navigate({page:a,event:e})})}render(){return n(s,{key:"a975a04388ce0495aef863236d3fd2f936380fed"},n("nav",{key:"920aeb21c535b7f09bc54924865d3b5be2a65652",id:this.paginationId,class:"pn-pagination","aria-label":this.label||this.translate("PAGINATION")},this.useRowList()&&n("pn-select",{key:"880de99ef3a2a1400ff08f420c8c81017846e1fa",class:"pn-pagination-rows",label:this.rowsLabel||this.translate("ROWS_PAGE"),onChange:e=>this.setRows(e)},this.getRowList().map((e=>n("option",{value:e,selected:this.rows===Number(e),innerHTML:""+e})))),n("div",{key:"d11a69a8d7f5efcaae031214f2abf417d8922207",class:"pn-pagination-container","data-right":this.useRowList()},this.renderJumpButton(),this.renderButton({page:1,dataAttr:"first"}),this.renderDivider(),n("ol",{key:"2a5777aecd5210105ea26ed8c8cb9d99d1f1efc8",class:"pn-pagination-list",ref:e=>this.listElement=e},this.getPagination().map((e=>this.renderItem(e)))),this.renderDivider(!0),this.renderButton({page:this.pages,dataAttr:"last"}),this.renderJumpButton(!0))))}static get watchers(){return{page:[{handlePage:0}],pages:[{handlePages:0}],pagesVisible:[{handlePagesVisible:0}]}}static get style(){return`${e("pn-pagination")}{display:block;margin-top:1.5em}${e("pn-pagination")} .pn-pagination{display:flex;gap:1em;flex-wrap:wrap;padding-top:1em;border-top:0.0625em solid #e9e6e5}${e("pn-pagination")} .pn-pagination-container{display:flex;align-items:center;flex-wrap:wrap;gap:0.5em;margin:0 auto}${e("pn-pagination")} .pn-pagination-container[data-right]{margin-right:0}${e("pn-pagination")} .pn-pagination-container>[data-arrow]{display:none}${e("pn-pagination")} .pn-pagination-container>[data-arrow][data-show]{display:inline-block}${e("pn-pagination")} .pn-pagination-rows{flex:0 0 auto;margin-right:auto}${e("pn-pagination")} .pn-pagination-pages{flex:0 0 auto;margin-left:auto}${e("pn-pagination")} .pn-pagination-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0.5em}${e("pn-pagination")} .pn-pagination-list ${e("pn-button")}>.pn-button{padding:0.375em 0.75em}${e("pn-pagination")} .pn-pagination-dot{display:none;padding:0.375em 0.5em;height:2em;width:2.5em;text-align:center}${e("pn-pagination")} .pn-pagination-dot[data-show]{display:inline-block}`}},[512,"pn-pagination",{label:[1],urlTemplate:[1,"url-template"],paginationId:[1,"pagination-id"],language:[1],page:[1538],pages:[1026],pagesVisible:[1026,"pages-visible"],rows:[1026],rowsList:[1,"rows-list"],rowsLabel:[1,"rows-label"],list:[32]},void 0,{page:[{handlePage:0}],pages:[{handlePages:0}],pagesVisible:[{handlePagesVisible:0}]}]),f=m,b=function(){"undefined"!=typeof customElements&&["pn-pagination","pn-button","pn-icon","pn-select","pn-spinner"].forEach((t=>{switch(t){case"pn-pagination":customElements.get(e(e(t)))||customElements.define(e(e(t)),m);break;case"pn-button":customElements.get(e(e(t)))||g();break;case"pn-icon":customElements.get(e(e(t)))||h();break;case"pn-select":customElements.get(e(e(t)))||d();break;case"pn-spinner":customElements.get(e(e(t)))||c()}}))};export{f as PnPagination,b as defineCustomElement}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as r,proxyCustomElement as e,HTMLElement as s,h as t,Host as a}from"@stencil/core/internal/client";import{a as o}from"./alert_exclamation_circle.js";import{c as i}from"./check_circle.js";import{u as n}from"./helpers.js";import{d}from"./pn-icon2.js";const p=e(class extends s{constructor(r){super(),!1!==r&&this.__registerHost()}uniqueId=n();idProgress=`pn-progress-bar-${this.uniqueId}`;idLabel=`${this.idProgress}-label`;idText=`${this.idProgress}-text`;get hostElement(){return this}progressPercentage;label;progress=0;progressText;successText;error;progressId=this.idProgress;setProgress(){if(!Number.isInteger(this.progress))return;const r=this.progress<100?Math.ceil(this.progress):100;this.progressPercentage=`${r.toString()}%`,this.hostElement.style.setProperty("--progress-value",this.progressPercentage)}componentWillLoad(){this.setProgress()}hasLabel(){return!!this.label?.length}hasText(){return!!this.successText?.length}hasError(){return!!this.error?.length}isValid(){return 100===this.progress}hasIcon(){return this.isValid()||this.hasError()}getSubtext(){return this.hasError()?this.error:this.isValid()&&this.hasText()?this.successText:this.progressText?this.progressText:this.progressPercentage}getIconSvg(){return this.hasError()?o:i}getIconColor(){return this.hasError()?"warning":"green500"}render(){return t(a,{key:"141fef1da768dc423cf53dfa8088f1b98429236c"},this.hasLabel()&&t("p",{key:"294199499037e6ed0e816f8a68850dfede795884",id:this.idLabel,class:"pn-progress-bar-label"},t("span",{key:"f292e951e29878d186b7f7896d7346fd41677006"},this.label),this.hasIcon()&&t("pn-icon",{key:"47b8065b97a8cd0f0d3e57ea4f68b07ad09c12a5",icon:this.getIconSvg(),color:this.getIconColor()})),t("div",{key:"0dd5189948aad2e501ee10076ed212987a52e4d8",id:this.progressId,class:"pn-progress-bar-container",role:"progressbar","aria-labelledby":this.idLabel,"aria-describedby":this.hasIcon()?this.idText:null,"aria-valuenow":this.progress,"aria-valuetext":this.progressPercentage},t("div",{key:"51ceae38d589385687dd3e25c86526b4758f2792",class:"pn-progress-bar-meter"},t("div",{key:"714d0aa19a487bf625ae10bcdd68d21d54b6f48a",class:"pn-progress-bar-value","data-error":this.hasError(),"data-valid":this.isValid()}))),t("p",{key:"b540a56c9d7fdfae49f508472d315ce1eeda5e99",id:this.idText,class:"pn-progress-bar-subtext",role:this.hasError()?"alert":null},t("span",{key:"35d515a823d117a6ab31e3cda778a2ada8093233"},this.getSubtext())))}static get watchers(){return{progress:[{setProgress:0}]}}static get style(){return`${r("pn-progress-bar")} .pn-progress-bar-label{margin-bottom:0.5em;color:#2d2013;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:0.5em}${r("pn-progress-bar")} .pn-progress-bar-subtext{margin-top:0.5em;color:#5e554a;font-weight:400}${r("pn-progress-bar")} .pn-progress-bar-container{overflow:hidden;padding:0.0625em;height:0.75em;border-radius:0.5em}${r("pn-progress-bar")} .pn-progress-bar-meter{position:relative;width:100%;background:#f3f2f2;height:0.625em;border-radius:0.5em;box-shadow:0 0 0 0.0625em #969087}${r("pn-progress-bar")} .pn-progress-bar-value{position:absolute;top:-0.0625em;left:-0.0625em;height:0.75em;background-color:#005d92;width:var(--progress-value);border-radius:0.5em 0 0 0.5em;transition-property:width, border-radius, background-color;transition-duration:0.2s, 0.2s, 0.5s;transition-timing-function:linear}@media (prefers-reduced-motion: reduce){${r("pn-progress-bar")} .pn-progress-bar-value{transition-duration:0s}}${r("pn-progress-bar")} .pn-progress-bar-value[data-valid]{width:calc(var(--progress-value) + 0.125em);background-color:#0aa85c;border-top-right-radius:0.5em;border-bottom-right-radius:0.5em}${r("pn-progress-bar")} .pn-progress-bar-value[data-error]{background-color:#a70707}`}},[512,"pn-progress-bar",{label:[1],progress:[2],progressText:[1,"progress-text"],successText:[1,"success-text"],error:[1],progressId:[1,"progress-id"],progressPercentage:[32]},void 0,{progress:[{setProgress:0}]}]);function c(){"undefined"!=typeof customElements&&["pn-progress-bar","pn-icon"].forEach((e=>{switch(e){case"pn-progress-bar":customElements.get(r(r(e)))||customElements.define(r(r(e)),p);break;case"pn-icon":customElements.get(r(r(e)))||d()}}))}export{p as P,c as d}
+import{transformTag as r,proxyCustomElement as e,HTMLElement as s,h as t,Host as a}from"@stencil/core/internal/client";import{a as o}from"./alert_exclamation_circle.js";import{c as i}from"./check_circle.js";import{u as n}from"./helpers.js";import{d as c}from"./pn-icon2.js";const p=e(class extends s{constructor(r){super(),!1!==r&&this.__registerHost()}uniqueId=n();idProgress=`pn-progress-bar-${this.uniqueId}`;idLabel=`${this.idProgress}-label`;idText=`${this.idProgress}-text`;get hostElement(){return this}progressPercentage;label;progress=0;progressText;successText;error;progressId=this.idProgress;setProgress(){if(!Number.isInteger(this.progress))return;const r=this.progress<100?Math.ceil(this.progress):100;this.progressPercentage=`${r.toString()}%`,this.hostElement.style.setProperty("--progress-value",this.progressPercentage)}componentWillLoad(){this.setProgress()}hasLabel(){return!!this.label?.length}hasText(){return!!this.successText?.length}hasError(){return!!this.error?.length}isValid(){return 100===this.progress}hasIcon(){return this.isValid()||this.hasError()}getSubtext(){return this.hasError()?this.error:this.isValid()&&this.hasText()?this.successText:this.progressText?this.progressText:this.progressPercentage}getIconSvg(){return this.hasError()?o:i}getIconColor(){return this.hasError()?"warning":"green500"}render(){return t(a,{key:"09b5b426ac2b3b5ac6da052516f02a37e86a5ae6"},this.hasLabel()&&t("p",{key:"f63e4d6fcf21e46e809866fa9f25e92975665c60",id:this.idLabel,class:"pn-progress-bar-label"},t("span",{key:"731610df6161f9d7724f85e1fc849983dd2c9e30"},this.label),this.hasIcon()&&t("pn-icon",{key:"a9a823e21c9a6192ecd476fa7f993e2dc508f292",icon:this.getIconSvg(),color:this.getIconColor()})),t("div",{key:"b38c51cbc3bf30d73cc169053a97fd62acd95972",id:this.progressId,class:"pn-progress-bar-container",role:"progressbar","aria-labelledby":this.idLabel,"aria-describedby":this.hasIcon()?this.idText:null,"aria-valuenow":this.progress,"aria-valuetext":this.progressPercentage},t("div",{key:"91f89839bf307d1b32f3735690ae6894b845fcc2",class:"pn-progress-bar-meter"},t("div",{key:"01dd3151497db0d7a4bfaa401fb132e015708ca6",class:"pn-progress-bar-value","data-error":this.hasError(),"data-valid":this.isValid()}))),t("p",{key:"fe4122adfd2d4e1ea043f161bc217b59f3164cf0",id:this.idText,class:"pn-progress-bar-subtext",role:this.hasError()?"alert":null},t("span",{key:"7094b7dd7cf15e29cec6f710927a3b62151d8709"},this.getSubtext())))}static get watchers(){return{progress:[{setProgress:0}]}}static get style(){return`${r("pn-progress-bar")} .pn-progress-bar-label{margin-bottom:0.5em;color:#2d2013;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:0.5em}${r("pn-progress-bar")} .pn-progress-bar-subtext{margin-top:0.5em;color:#5e554a;font-weight:400}${r("pn-progress-bar")} .pn-progress-bar-container{overflow:hidden;padding:0.0625em;height:0.75em;border-radius:0.5em}${r("pn-progress-bar")} .pn-progress-bar-meter{position:relative;width:100%;background:#f3f2f2;height:0.625em;border-radius:0.5em;box-shadow:0 0 0 0.0625em #969087}${r("pn-progress-bar")} .pn-progress-bar-value{position:absolute;top:-0.0625em;left:-0.0625em;height:0.75em;background-color:#005d92;width:var(--progress-value);border-radius:0.5em 0 0 0.5em;transition-property:width, border-radius, background-color;transition-duration:0.2s, 0.2s, 0.5s;transition-timing-function:linear}@media (prefers-reduced-motion: reduce){${r("pn-progress-bar")} .pn-progress-bar-value{transition-duration:0s}}${r("pn-progress-bar")} .pn-progress-bar-value[data-valid]{width:calc(var(--progress-value) + 0.125em);background-color:#0aa85c;border-top-right-radius:0.5em;border-bottom-right-radius:0.5em}${r("pn-progress-bar")} .pn-progress-bar-value[data-error]{background-color:#a70707}`}},[512,"pn-progress-bar",{label:[1],progress:[2],progressText:[1,"progress-text"],successText:[1,"success-text"],error:[1],progressId:[1,"progress-id"],progressPercentage:[32]},void 0,{progress:[{setProgress:0}]}]);function d(){"undefined"!=typeof customElements&&["pn-progress-bar","pn-icon"].forEach((e=>{switch(e){case"pn-progress-bar":customElements.get(r(r(e)))||customElements.define(r(r(e)),p);break;case"pn-icon":customElements.get(r(r(e)))||c()}}))}export{p as P,d}