@postnord/pn-marketweb-components 4.5.0 → 4.5.1

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 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}
+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 f}from"./helpers.js";import{d as b}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||f];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:"a0ecbc763c7fe2e742a2737a13ccb25049ca5d2c"},l("fieldset",{key:"e34a6c4a098b8509985300c6101f28810a2624e5",class:"pn-multiselect","data-icon":!!this.icon,"data-error":this.hasError(),disabled:this.disabled},this.renderLabel(),l("div",{key:"4af7e657d83cd4eb9d1f7aef7c41e91c204e8b49",class:"pn-multiselect-group",ref:e=>this.elGroup=e},l("div",{key:"f5d0ab6e61dfac0c19a3ba86230c3da6e14efde5",class:"pn-multiselect-input"},!!this.icon&&l("pn-icon",{key:"2bb3a5906b9624c14b912dae42ab0f266be28708",class:"pn-multiselect-icon","data-custom":!0,icon:this.icon}),l("input",{key:"40bf05bdcdfc7d20d11c7d463863727e5d6aff2e",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:"cb667952d2f8c5d2d651781f15ff74b6b775e042",class:"pn-multiselect-icon","data-error":!0,icon:c,color:"warning"}),l("button",{key:"94b05fea39ded60eab60763fdb84a9b711ae8162",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:"eeaafee94ca176871092ceeb80d963fccc31dcec",class:"pn-multiselect-icon",icon:r,color:"blue700"}))),this.renderOptions()),l("p",{key:"2b769d32ed6692b99a19c125c5177eb375095e68",id:this.idHelper,class:"pn-multiselect-text",hidden:this.hideHelpertext()},l("span",{key:"dc43a1985211d85923e3085d44cb2b368e2582a4"},this.helpertext),l("slot",{key:"f0f4cd86c528644a133f7c9db51251a77265e15f",name:"helpertext"})),l("p",{key:"718171d4d2c510d70c562a188ef25eacf60ea039",id:this.idError,class:"pn-multiselect-text",role:"alert",hidden:this.hideError()},l("span",{key:"2b0cfd1042189fb60d96e3d43001f3ff6794cb4e"},this.error),l("slot",{key:"e381d819a3de5c550816309f097ae37c713b604e",name:"error"})),this.search&&this.renderChips(),l("slot",{key:"6f7731063585b04cc851a5790ec77fff209baa03"}),this.search&&l("p",{key:"f4df41d21ebc5219a86fbc90947285635df86d13",id:this.idSr,class:"pn-multiselect-sr-only",role:"alert","aria-live":"assertive"},this.srMessage&&l("span",{key:"6d24d915b81ef53a1eb210d3c7d0a85184ea1e88"},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)))||b()}}))};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:"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}
+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:"c6f418483d78065a3a95f94f18613f76088ae279"},r("pn-search-field",{key:"c28bff48bc802958b6c8c05f54ad9093c3b1708e",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 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}
+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:"a092dbd0ea2bead9b2d974cadf80f74190a0d14e"},i(e,{key:"d0d9542e100b59c39ced2612c9b279d7d07bd876",href:this.href||"#",class:this.setClassnames(),type:this.getType(),onClick:e=>this.select(e),tabindex:"-1"},i("slot",{key:"96f8721e300c4b32e72df20079030986d5ffee6b"}),i("pn-icon",{key:"d835de522cec9ec9f686bb9c0d30d842d4feeb80",icon:a,color:"white"})),i("hr",{key:"db691728876fa378a714eb13202922a99bd8ca46"}))}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}

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 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}
+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:"3bceeadfd2b66e184d7c287e0d720d8093e571fa"},a("li",{key:"58eb5671306d42c653113838c1a1ba9c96312c2d"},a("a",{key:"438609540a2a64ac3aabf8030b68056574e68551",href:this.href||"#",class:"pn-page-nav-item",onClick:e=>this.select(e)},this.icon&&a("pn-icon",{key:"945dd1e63943e2854290b010f088caa08f684cc4",icon:this.icon,color:"white"}),a("slot",{key:"f3a9032f5373651349135b101a23ef2dc52a52a9"}))))}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}

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:"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}
+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:"57c1d7248ca2704b6acf675cfd9648d5d2afcf60"},o("div",{key:"b02d7389cb66d185ff1d72674a3ce2d2c3a81e76",class:"pn-page-nav-wrapper"},o("nav",{key:"60d1d6974945dd5971a967d92886c4c4a3a5b4ff",class:"pn-page-nav"},this.dropdownActive&&o("button",{key:"6ce020ca42332cd760c410b6144f2317fa95f239",type:"button",class:this.dropdownButtonClasses(),onClick:()=>this.toggleDropdown(),"aria-controls":"page-nav-dropdown","aria-expanded":""+this.dropdownOpen},this.dropdown,o("pn-icon",{key:"d2b750dc24022e5b1b5425b4b2a76dcba0c26c69",icon:h,color:"white",small:!0}),o("div",{key:"1257070fcbcfcbe08142b379466f7fd7dc3d37ee",class:"pn-page-nav-divider"})),o("ul",{key:"d72c186854c5a679bb9395c7aa9f0dfe469b8f14",class:"pn-page-nav-items"},o("slot",{key:"ba7a508c841b594466bdadf1bf904cadef5b2bc9"}),o("li",{key:"c50294022952d8168886d816509a0297c262071c",class:"pn-pn-bg pn-pn-active",role:"presentation"}),o("li",{key:"a2dfc8bb63575feabb0a58caae1e8ae76e873943",class:"pn-pn-bg pn-pn-hover",role:"presentation"}))),this.showScrollArrows&&o("div",{key:"5e99c2cc1d1122091b2286e4fd9c54cb0734fb59",class:this.scrollArrowClasses()},o("button",{key:"a92f375c45a6705154b58dd5ca8df03cf6010a6f",class:"pn-pn-arrow-left",onClick:()=>this.scroll(-120),tabindex:"-1"},o("pn-icon",{key:"58413aff678f1b3a4d17a3693261fc9f3110d8cc",icon:p,color:"white"})),o("button",{key:"2a83e1480087752eacebdf5c35fcfbea3fa3cb8d",class:"pn-pn-arrow-right",onClick:()=>this.scroll(120),tabindex:"-1"},o("pn-icon",{key:"fde8949b978be59ae2d9c5ab44ce286b72c35790",icon:d,color:"blue700"})))),this.dropdownActive&&o("ul",{key:"802117bef707c98683b3ed30449897ac13d6af05",id:this.navid,class:this.dropdownClasses()},o("slot",{key:"414852b90620a09a11f9a4c3b1d7d4809b6f8487",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:"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}
+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:"5c36be3d032fa0769af32e78f76ef7681b87b5b0"},n("nav",{key:"1e63a84c6f9e0b43bffd675d24d8b11e1a2e6abb",id:this.paginationId,class:"pn-pagination","aria-label":this.label||this.translate("PAGINATION")},this.useRowList()&&n("pn-select",{key:"07e4af8aab83392cedff2587e72abab3045ccdaf",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:"6ece9af08f44edde18795c16b03b476de6682be9",class:"pn-pagination-container","data-right":this.useRowList()},this.renderJumpButton(),this.renderButton({page:1,dataAttr:"first"}),this.renderDivider(),n("ol",{key:"6c87dbecfad6aecc50c10158e17a903581902c45",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}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as i,proxyCustomElement as t,Mixin as o,createEvent as e,h as a,Host as n}from"@stencil/core/internal/client";import{u as r}from"./helpers.js";import{a as d}from"./index2.js";import{d as p}from"./pn-icon2.js";const l=t(class extends(o(d)){constructor(i){super(!1),!1!==i&&this.__registerHost(),this.pnRadioChange=e(this,"pnRadioChange",3)}id="pn-radio-"+r();idHelpertext=this.id+"-helpertext";contentArea;radioInput;get hostElement(){return this}label;helpertext;value;name;checked=!1;required=!1;disabled=!1;tile=!1;expand=!1;icon=null;invalid=!1;pnId;pnAriaLabel;pnAriaLabelledby;radioid;handleId(){this.idHelpertext=this.getId()+"-helpertext"}handleChecked(i){this.checked=i??this.radioInput.checked,this.displayContent()&&(this.checked?(this.openDropdown(this.contentArea),this.uncheckOtherRadios()):this.closeDropdown(this.contentArea))}handleChange(i){const t=i.target,{name:o}=t;o===this.name&&(this.checked=t===this.radioInput&&t.checked)}pnRadioChange;componentDidLoad(){requestAnimationFrame((()=>this.displayContent()&&this.checked&&this.openDropdown(this.contentArea)))}getId(){return this.pnId||this.radioid||this.id}uncheckOtherRadios(){if(!this.name)return;const i=document.querySelectorAll(`pn-radio-button[name="${this.name}"]`);Array.from(i).forEach((i=>i!==this.hostElement&&(i.checked=!1)))}isInvalid(){return this.invalid&&!this.disabled}displayText(){return this.displayLabel()||this.displayHelpertext()}displayLabel(){return!!this.label}displayHelpertext(){return!(!this.helpertext&&!this.hostElement.querySelector('[slot="helpertext"]')?.textContent)}displayIcon(){return this.tile&&!!this.icon}displayContent(){return this.tile&&this.expand}getAriaLabel(){return this.displayLabel()||this.pnAriaLabelledby?null:this.pnAriaLabel}getAriaLabelledby(){return this.displayLabel()||this.pnAriaLabel?null:this.pnAriaLabelledby}render(){return a(n,{key:"4cc4729921eef5f9076bb2b3ce409d105c37e7fc"},a("input",{key:"5081a5a1be4ebd3bfeca8559c3973b60e6257f6c",type:"radio",id:this.getId(),class:"pn-radio-input",value:this.value,name:this.name,disabled:this.disabled,checked:this.checked,required:this.required,"aria-label":this.getAriaLabel(),"aria-labelledby":this.getAriaLabelledby(),"aria-invalid":this.isInvalid()?.toString(),"aria-describedby":this.displayHelpertext()?this.idHelpertext:null,"data-tile":this.tile,"data-expand":this.expand,onChange:i=>this.pnRadioChange.emit(i),ref:i=>this.radioInput=i}),a("div",{key:"a933fc7fe850449df7c3c94ee387fa882b905fac",class:"pn-radio","data-tile":this.tile,"data-expand":this.expand,"data-invalid":this.isInvalid()},a("div",{key:"83f27a39013bd0674d1155aced4258da5c2cba58",class:"pn-radio-button"},a("div",{key:"fab4f7fbe57a2e9ae9c7cae444c2d603b23b6acb",class:"pn-radio-outer"},a("div",{key:"d672da19315841a7e1a46ada320739d8ced84a93",class:"pn-radio-inner"}))),a("div",{key:"e863aa9e7396ccead7fed2227bbee45ca96c2187",class:"pn-radio-content",hidden:!this.displayText()},a("label",{key:"221ea43c549af80b6b8c54fc611b0b48fe709f17",htmlFor:this.getId(),class:"pn-radio-label",hidden:!this.displayLabel()},this.label),a("p",{key:"9a1cc75ef224d5d6830c35ee20742a14ef2268ba",id:this.idHelpertext,class:"pn-radio-helpertext",hidden:!this.displayHelpertext()},this.helpertext,a("slot",{key:"fb77032b6ce781fbc45bc9a5914b7c64b6cb3fd5",name:"helpertext"})),a("slot",{key:"73d298a9ef742031d83de42b737f5a6289ec692d"})),this.displayIcon()&&a("pn-icon",{key:"8850771543bb69709196805cb46096bd706d32f7",icon:this.icon,color:"gray900"}),a("div",{key:"9ac6ed23cc447f4f7ed1bd0ab5311a211fc2f25d",class:"pn-radio-container","data-open":this.checked,hidden:!this.displayContent(),style:{height:"0px"},ref:i=>this.contentArea=i},a("div",{key:"b952ea9f31572a6d5933f3ea3342283aaf9901e4",class:"pn-radio-area"},a("slot",{key:"41e31f73b12b07ae647ccf89abcac486e5820592",name:"content"})))))}static get watchers(){return{radioid:[{handleId:0}],pnId:[{handleId:1}],checked:[{handleChecked:0}]}}static get style(){return`${i("pn-radio-button")}{position:relative;display:inline-block}${i("pn-radio-button")} .pn-radio{position:relative;display:flex;flex-wrap:wrap;flex-direction:row}${i("pn-radio-button")} .pn-radio-label{cursor:pointer;color:#2d2013;-webkit-tap-highlight-color:transparent}${i("pn-radio-button")} .pn-radio-helpertext{color:#5e554a;margin:0 0 0.5em 0;display:flex;flex-direction:column}${i("pn-radio-button")} .pn-radio-helpertext:last-child{margin:0}${i("pn-radio-button")} .pn-radio-content{display:flex;flex-direction:column;align-items:flex-start;font-weight:400;line-height:1.5;flex:1;margin:0 0 0 0.75em}${i("pn-radio-button")} .pn-radio-button{display:flex;gap:0.75em;padding:0}${i("pn-radio-button")} .pn-radio-outer{background-color:#ffffff;border:0.0625em solid #969087;border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${i("pn-radio-button")} .pn-radio-outer{transition-duration:0s;transition-delay:0s}}${i("pn-radio-button")} .pn-radio-inner{height:0.75em;width:0.75em;background-color:#005d92;border-radius:50%;transform:scale(0);transform-origin:center center;transition-property:background-color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${i("pn-radio-button")} .pn-radio-inner{transition-duration:0s;transition-delay:0s}}${i("pn-radio-button")} .pn-radio[data-tile]{padding:1em;border:0.0625em solid #969087;border-radius:0.5em;background-color:#ffffff;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${i("pn-radio-button")} .pn-radio[data-tile]{transition-duration:0s;transition-delay:0s}}${i("pn-radio-button")} .pn-radio[data-tile] .pn-radio-outer{outline:none}${i("pn-radio-button")} .pn-radio[data-invalid]{border-color:#a70707}${i("pn-radio-button")} .pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707}${i("pn-radio-button")} .pn-radio[data-invalid] .pn-radio-inner{background-color:#a70707}${i("pn-radio-button")} .pn-radio-container{flex:1 1 100%;overflow:hidden;visibility:hidden}${i("pn-radio-button")} .pn-radio-container[data-open]{visibility:visible;overflow:unset}${i("pn-radio-button")} .pn-radio-container[data-moving]{visibility:visible;overflow:hidden}${i("pn-radio-button")} .pn-radio-area{padding:0.75em 0 0 2.25em;display:flex;flex-direction:column;flex-wrap:nowrap;gap:1em}${i("pn-radio-button")} .pn-radio>${i("pn-icon")}{margin-left:0.75em}${i("pn-radio-button")}>input[type=radio]{cursor:pointer;opacity:0;position:absolute;margin:0;z-index:1;top:0;left:0;font-size:1em;width:1.5em;height:1.5em;-webkit-tap-highlight-color:transparent}${i("pn-radio-button")}>input[type=radio][data-tile]:not([data-expand]){width:100%;height:100%}${i("pn-radio-button")}>input[type=radio][data-expand]{top:1em;left:1em}${i("pn-radio-button")}>input[type=radio][aria-describedby]+.pn-radio[data-tile] .pn-radio-label{font-weight:500}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile] .pn-radio-outer{background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile][data-invalid] .pn-radio-outer{background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707;background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio .pn-radio-outer{border-color:#005d92;background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:checked:hover+.pn-radio[data-tile][data-invalid]{border-color:#500715}${i("pn-radio-button")}>input[type=radio]:checked:hover+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer{border-color:#500715}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio .pn-radio-outer{outline-color:#005d92}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-invalid] .pn-radio-outer{outline-color:#a70707}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile]{outline-color:#005d92;border-color:#005d92}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile]>.pn-radio-button>.pn-radio-outer{outline:none}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio>.pn-radio-button>.pn-radio-outer{border-color:#005d92}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{transform:scale(1);background-color:#005d92}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer{border-color:#a70707}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{background-color:#a70707}${i("pn-radio-button")}>input[type=radio]:disabled{pointer-events:none}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio .pn-radio-label{pointer-events:none}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]{background-color:#f3f2f2;border-color:#f3f2f2}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]>${i("pn-icon")} .pn-icon-svg path{fill:#5e554a}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]>.pn-radio-content>.pn-radio-label{color:#5e554a}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio>.pn-radio-button>.pn-radio-outer{background-color:#f3f2f2;border-color:#969087;outline:none}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{background-color:#969087}`}},[772,"pn-radio-button",{label:[1],helpertext:[1],value:[513],name:[1],checked:[1028],required:[4],disabled:[4],tile:[4],expand:[4],icon:[1],invalid:[4],pnId:[1,"pn-id"],pnAriaLabel:[1,"pn-aria-label"],pnAriaLabelledby:[1,"pn-aria-labelledby"],radioid:[1],isClosing:[32],isExpanding:[32]},[[8,"change","handleChange"]],{radioid:[{handleId:0}],pnId:[{handleId:1}],checked:[{handleChecked:0}]}]),c=l,s=function(){"undefined"!=typeof customElements&&["pn-radio-button","pn-icon"].forEach((t=>{switch(t){case"pn-radio-button":customElements.get(i(i(t)))||customElements.define(i(i(t)),l);break;case"pn-icon":customElements.get(i(i(t)))||p()}}))};export{c as PnRadioButton,s as defineCustomElement}
+import{transformTag as i,proxyCustomElement as t,Mixin as o,createEvent as n,h as a,Host as e}from"@stencil/core/internal/client";import{u as r}from"./helpers.js";import{a as d}from"./index2.js";import{d as p}from"./pn-icon2.js";const l=t(class extends(o(d)){constructor(i){super(!1),!1!==i&&this.__registerHost(),this.pnRadioChange=n(this,"pnRadioChange",3)}id="pn-radio-"+r();idHelpertext=this.id+"-helpertext";contentArea;radioInput;get hostElement(){return this}label;helpertext;value;name;checked=!1;required=!1;disabled=!1;tile=!1;expand=!1;icon=null;invalid=!1;pnId;pnAriaLabel;pnAriaLabelledby;radioid;handleId(){this.idHelpertext=this.getId()+"-helpertext"}handleChecked(i){this.checked=i??this.radioInput.checked,this.displayContent()&&(this.checked?(this.openDropdown(this.contentArea),this.uncheckOtherRadios()):this.closeDropdown(this.contentArea))}handleChange(i){const t=i.target,{name:o}=t;o===this.name&&(this.checked=t===this.radioInput&&t.checked)}pnRadioChange;componentDidLoad(){requestAnimationFrame((()=>this.displayContent()&&this.checked&&this.openDropdown(this.contentArea)))}getId(){return this.pnId||this.radioid||this.id}uncheckOtherRadios(){if(!this.name)return;const i=document.querySelectorAll(`pn-radio-button[name="${this.name}"]`);Array.from(i).forEach((i=>i!==this.hostElement&&(i.checked=!1)))}isInvalid(){return this.invalid&&!this.disabled}displayText(){return this.displayLabel()||this.displayHelpertext()}displayLabel(){return!!this.label}displayHelpertext(){return!(!this.helpertext&&!this.hostElement.querySelector('[slot="helpertext"]')?.textContent)}displayIcon(){return this.tile&&!!this.icon}displayContent(){return this.tile&&this.expand}getAriaLabel(){return this.displayLabel()||this.pnAriaLabelledby?null:this.pnAriaLabel}getAriaLabelledby(){return this.displayLabel()||this.pnAriaLabel?null:this.pnAriaLabelledby}render(){return a(e,{key:"52305f6cf3826500739510f0cf1fd0ab2abc7dc2"},a("input",{key:"cc4f799fb58073ca59af798601d70baf88263aca",type:"radio",id:this.getId(),class:"pn-radio-input",value:this.value,name:this.name,disabled:this.disabled,checked:this.checked,required:this.required,"aria-label":this.getAriaLabel(),"aria-labelledby":this.getAriaLabelledby(),"aria-invalid":this.isInvalid()?.toString(),"aria-describedby":this.displayHelpertext()?this.idHelpertext:null,"data-tile":this.tile,"data-expand":this.expand,onChange:i=>this.pnRadioChange.emit(i),ref:i=>this.radioInput=i}),a("div",{key:"05e2a10face9b2ca1b0ced1f6f38f1173f15d1c0",class:"pn-radio","data-tile":this.tile,"data-expand":this.expand,"data-invalid":this.isInvalid()},a("div",{key:"b5274e03c47ac3d53103af945b3e8ce211eec827",class:"pn-radio-button"},a("div",{key:"1f4a592f7d243312e00259f67ce60836a449f42d",class:"pn-radio-outer"},a("div",{key:"05cb629b8c45724c6831271a40620ba5ec6e66ef",class:"pn-radio-inner"}))),a("div",{key:"a91835bcaa01888fd2a2b1b768def02203b58038",class:"pn-radio-content",hidden:!this.displayText()},a("label",{key:"c11016410fd25dbb3288640ef5f239553991f0f8",htmlFor:this.getId(),class:"pn-radio-label",hidden:!this.displayLabel()},this.label),a("p",{key:"6d4d46978e2a4f326af1558c4c6dd04c3c29956b",id:this.idHelpertext,class:"pn-radio-helpertext",hidden:!this.displayHelpertext()},this.helpertext,a("slot",{key:"3167af1f4d47e1a9c8010bc9316b32c5499f66ee",name:"helpertext"})),a("slot",{key:"1a4b466d8a8ba4e06ae96977e33fad1c502d5ea2"})),this.displayIcon()&&a("pn-icon",{key:"67f80f5c1db91e7310cf5baefdf6f3c346c83397",icon:this.icon,color:"gray900"}),a("div",{key:"e296239a734c33c40035b489d79b1edf44f1a2b7",class:"pn-radio-container","data-open":this.checked,hidden:!this.displayContent(),style:{height:"0px"},ref:i=>this.contentArea=i},a("div",{key:"f6245b5b2c9611da4b59a3fdb3047fe8365f1678",class:"pn-radio-area"},a("slot",{key:"b985712da1ea4504025d17cc507588f14d9ebfff",name:"content"})))))}static get watchers(){return{radioid:[{handleId:0}],pnId:[{handleId:1}],checked:[{handleChecked:0}]}}static get style(){return`${i("pn-radio-button")}{position:relative;display:inline-block}${i("pn-radio-button")} .pn-radio{position:relative;display:flex;flex-wrap:wrap;flex-direction:row}${i("pn-radio-button")} .pn-radio-label{cursor:pointer;color:#2d2013;-webkit-tap-highlight-color:transparent}${i("pn-radio-button")} .pn-radio-helpertext{color:#5e554a;margin:0 0 0.5em 0;display:flex;flex-direction:column}${i("pn-radio-button")} .pn-radio-helpertext:last-child{margin:0}${i("pn-radio-button")} .pn-radio-content{display:flex;flex-direction:column;align-items:flex-start;font-weight:400;line-height:1.5;flex:1;margin:0 0 0 0.75em}${i("pn-radio-button")} .pn-radio-button{display:flex;gap:0.75em;padding:0}${i("pn-radio-button")} .pn-radio-outer{background-color:#ffffff;border:0.0625em solid #969087;border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${i("pn-radio-button")} .pn-radio-outer{transition-duration:0s;transition-delay:0s}}${i("pn-radio-button")} .pn-radio-inner{height:0.75em;width:0.75em;background-color:#005d92;border-radius:50%;transform:scale(0);transform-origin:center center;transition-property:background-color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${i("pn-radio-button")} .pn-radio-inner{transition-duration:0s;transition-delay:0s}}${i("pn-radio-button")} .pn-radio[data-tile]{padding:1em;border:0.0625em solid #969087;border-radius:0.5em;background-color:#ffffff;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${i("pn-radio-button")} .pn-radio[data-tile]{transition-duration:0s;transition-delay:0s}}${i("pn-radio-button")} .pn-radio[data-tile] .pn-radio-outer{outline:none}${i("pn-radio-button")} .pn-radio[data-invalid]{border-color:#a70707}${i("pn-radio-button")} .pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707}${i("pn-radio-button")} .pn-radio[data-invalid] .pn-radio-inner{background-color:#a70707}${i("pn-radio-button")} .pn-radio-container{flex:1 1 100%;overflow:hidden;visibility:hidden}${i("pn-radio-button")} .pn-radio-container[data-open]{visibility:visible;overflow:unset}${i("pn-radio-button")} .pn-radio-container[data-moving]{visibility:visible;overflow:hidden}${i("pn-radio-button")} .pn-radio-area{padding:0.75em 0 0 2.25em;display:flex;flex-direction:column;flex-wrap:nowrap;gap:1em}${i("pn-radio-button")} .pn-radio>${i("pn-icon")}{margin-left:0.75em}${i("pn-radio-button")}>input[type=radio]{cursor:pointer;opacity:0;position:absolute;margin:0;z-index:1;top:0;left:0;font-size:1em;width:1.5em;height:1.5em;-webkit-tap-highlight-color:transparent}${i("pn-radio-button")}>input[type=radio][data-tile]:not([data-expand]){width:100%;height:100%}${i("pn-radio-button")}>input[type=radio][data-expand]{top:1em;left:1em}${i("pn-radio-button")}>input[type=radio][aria-describedby]+.pn-radio[data-tile] .pn-radio-label{font-weight:500}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile] .pn-radio-outer{background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile][data-invalid] .pn-radio-outer{background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707;background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio .pn-radio-outer{border-color:#005d92;background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:checked:hover+.pn-radio[data-tile][data-invalid]{border-color:#500715}${i("pn-radio-button")}>input[type=radio]:checked:hover+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer{border-color:#500715}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio .pn-radio-outer{outline-color:#005d92}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-invalid] .pn-radio-outer{outline-color:#a70707}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile]{outline-color:#005d92;border-color:#005d92}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile]>.pn-radio-button>.pn-radio-outer{outline:none}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio>.pn-radio-button>.pn-radio-outer{border-color:#005d92}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{transform:scale(1);background-color:#005d92}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer{border-color:#a70707}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{background-color:#a70707}${i("pn-radio-button")}>input[type=radio]:disabled{pointer-events:none}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio .pn-radio-label{pointer-events:none}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]{background-color:#f3f2f2;border-color:#f3f2f2}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]>${i("pn-icon")} .pn-icon-svg path{fill:#5e554a}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]>.pn-radio-content>.pn-radio-label{color:#5e554a}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio>.pn-radio-button>.pn-radio-outer{background-color:#f3f2f2;border-color:#969087;outline:none}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{background-color:#969087}`}},[772,"pn-radio-button",{label:[1],helpertext:[1],value:[513],name:[1],checked:[1028],required:[4],disabled:[4],tile:[4],expand:[4],icon:[1],invalid:[4],pnId:[1,"pn-id"],pnAriaLabel:[1,"pn-aria-label"],pnAriaLabelledby:[1,"pn-aria-labelledby"],radioid:[1],isClosing:[32],isExpanding:[32]},[[8,"change","handleChange"]],{radioid:[{handleId:0}],pnId:[{handleId:1}],checked:[{handleChecked:0}]}]),s=l,c=function(){"undefined"!=typeof customElements&&["pn-radio-button","pn-icon"].forEach((t=>{switch(t){case"pn-radio-button":customElements.get(i(i(t)))||customElements.define(i(i(t)),l);break;case"pn-icon":customElements.get(i(i(t)))||p()}}))};export{s as PnRadioButton,c as defineCustomElement}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as e,proxyCustomElement as n,HTMLElement as t,createEvent as a,forceUpdate as r,h as i,Host as s,Fragment as o}from"@stencil/core/internal/client";import{u as p}from"./helpers.js";import{d as l}from"./pn-button2.js";import{d}from"./pn-icon2.js";import{d as h}from"./pn-input2.js";import{d as g}from"./pn-spinner2.js";const u=n(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.rangeSelected=a(this,"rangeSelected",7)}id="pn-range-"+p();idEnd=this.id+"-end";idInput=this.id+"-input";idInputEnd=this.idEnd+"-input";idInputHidden=this.id+"-hidden";idHelpertext=this.id+"-helpertext";idError=this.id+"-error";idDatalist=this.id+"-data";mo;rangeTimeout;tooltipDefault="{value}";get hostElement(){return this}showHelperSlot=!1;showErrorSlot=!1;isPressing=!1;pressControl=null;label;labelEnd;helpertext=null;value=0;valueEnd=0;name;nameEnd;min=0;max=100;step="";disabled=!1;markers=[];input=!1;tooltipTemplate=this.tooltipDefault;tooltipHide=!1;textPrefix=null;textSuffix=null;icon=null;iconEnd=null;multiple=!1;invalid=!1;error=null;pnId=this.id;pnIdEnd=this.idEnd;pnAriaLabel;pnAriaLabelEnd;pnAriaLabelledby;pnAriaLabelledbyEnd;handleValue(){this.multiple&&this.value>this.valueEnd&&(this.valueEnd=this.value);const e=this.calcPercentage(this.value);requestAnimationFrame((()=>this.hostElement.style.setProperty("--pn-range-progress",e+"%")))}handleValueEnd(){if(!this.multiple)return;this.value>this.valueEnd&&(this.value=this.valueEnd);const e=this.calcPercentage(this.valueEnd);requestAnimationFrame((()=>this.hostElement.style.setProperty("--pn-range-progress-end",e+"%")))}handleId(){this.idInput=this.pnId+"-input",this.idInputEnd=this.pnIdEnd+"-input",this.idHelpertext=this.pnId+"-helpertext",this.idError=this.pnId+"-error",this.idDatalist=this.pnId+"-data"}handleMessage(){this.checkSlottedHelper(),this.checkSlottedError()}handleMultiple(){this.isPressing=!0,requestAnimationFrame((()=>this.isPressing=!1))}rangeSelected;connectedCallback(){this.mo=new MutationObserver((()=>r(this.hostElement))),this.mo.observe(this.hostElement,{childList:!0,subtree:!0})}disconnectedCallback(){this.mo&&this.mo.disconnect()}getAriaLabel(e){return e?this.labelEnd||this.pnAriaLabelledbyEnd?null:this.pnAriaLabelEnd:this.label||this.pnAriaLabelledby?null:this.pnAriaLabel}getAriaLabelledby(e){return e?this.labelEnd||this.pnAriaLabelEnd?null:this.pnAriaLabelledbyEnd:this.label||this.pnAriaLabel?null:this.pnAriaLabelledby}tooltipDirection(e=!1){if(this.multiple){const n=this.hostElement.offsetWidth<384,t=this.calcPercentage(this.value),a=this.calcPercentage(this.valueEnd);if(Math.abs(a-t)<(n?30:20))return e?"left":"right";if(!e&&this.value<=this.min+(this.max-this.min)*(n?.3:.2))return"left";if(e&&this.valueEnd>this.max*(n?.75:.8))return"right"}return"center"}isActiveMarker(e){const n=this.value===e;return this.multiple?n||this.valueEnd===e:n}hasHelperText(){return this.helpertext?.length>0||this.showHelperSlot}hasErrorMessage(){return this.error?.length>0||this.showErrorSlot}hasError(){return this.hasErrorMessage()||this.invalid}checkSlottedHelper(){const e=this.hostElement.querySelector("[slot=helpertext]")?.textContent;this.showHelperSlot=!!e?.length}checkSlottedError(){const e=this.hostElement.querySelector("[slot=error]")?.textContent;this.showErrorSlot=!!e?.length}calcPercentage(e){return(e-this.min)/(this.max-this.min)*100}setValue(e,n=!1){if(!(e>=this.min&&e<=this.max))return;n?this.valueEnd=e:this.value=e;const t=Number((this.valueEnd-this.value).toPrecision(4)),a=this.calcPercentage(this.value),r=this.calcPercentage(this.valueEnd),i=Number((this.multiple?r-a:a).toPrecision(4));this.rangeSelected.emit({value:this.value,percentage:i,...this.multiple?{valueEnd:this.valueEnd,difference:t}:{}})}getTooltipLabel(e=!1){return this.tooltipTemplate?.replace(this.tooltipDefault,(e?this.valueEnd:this.value)?.toString())}getMarkerLabel({value:e,label:n}){return null===n||""===n?"":""+(n||e)}ariaDescribedby(){const e=[];return this.hasErrorMessage()?e.push(this.idError):this.hasHelperText()&&e.push(this.idHelpertext),e.length?e.join(" "):null}handleChange(e){const n=e.target,{id:t,valueAsNumber:a,type:r}=n;this.setValue(isNaN(a)?0:a,"range"===r?t===this.pnIdEnd:t===this.idInputEnd)}setListeners(e=!1){return{onInput:n=>e?this.handleOverlayInput(n):this.handleChange(n),onTouchStart:e=>this.handlePress(e),onTouchEnd:()=>this.handleRelease(),onMouseDown:e=>this.handlePress(e),onMouseUp:()=>this.handleRelease()}}handlePress(e){this.rangeTimeout=setTimeout((()=>{this.isPressing=!0}),"touchstart"===e.type?200:100)}handleRelease(){clearTimeout(this.rangeTimeout),this.isPressing=!1,this.pressControl=null}commonAttrs(){return{step:this.step,min:this.min,max:this.max,list:this.markers?.length?this.idDatalist:null,disabled:this.disabled}}renderPrefix(){return this.input?this.renderNumberInput():this.icon?i("pn-icon",{class:"pn-range-icon",icon:this.icon}):this.textPrefix&&!this.input?i("span",{class:"pn-range-text"},this.textPrefix):null}renderSuffix(){return this.input&&this.multiple?this.renderNumberInput(!0):this.iconEnd?i("pn-icon",{class:"pn-range-icon",icon:this.iconEnd}):this.textSuffix&&!this.input?i("span",{class:"pn-range-text"},this.textSuffix):null}renderNumberInput(e=!1){const n=e?this.valueEnd:this.value,t=e?this.idInputEnd:this.idInput;return i("pn-input",{class:"pn-range-field",label:e?this.labelEnd:this.label,type:"number",name:e?this.nameEnd?this.nameEnd+"-input":null:this.name?this.name+"-input":null,...this.commonAttrs(),icon:e?this.iconEnd:this.icon,textPrefix:this.textPrefix,textSuffix:this.textSuffix,value:n?.toString(),inputid:t,invalid:this.hasError(),"pn-aria-label":this.getAriaLabel(e),"pn-aria-labelledby":this.getAriaLabelledby(e),"data-single":!this.multiple,...this.setListeners()})}renderRangeInput(e=!1){const n=e?this.valueEnd:this.value,t=this.tooltipDefault!==this.tooltipTemplate;return i("input",{id:e?this.pnIdEnd:this.pnId,class:"pn-range-input",type:"range",name:e?this.nameEnd:this.name,...this.commonAttrs(),value:n,"aria-label":this.getAriaLabel(e),"aria-labelledby":this.getAriaLabelledby(e),"aria-valuetext":t?this.getTooltipLabel(e):null,"aria-describedby":this.ariaDescribedby(),"aria-invalid":""+this.hasError(),"data-start":!e||null,"data-end":!!e||null,...this.setListeners()})}renderTooltip(e=!1){return i("div",{class:"pn-range-thumb","data-start":!e||null,"data-end":!!e||null,"data-align":this.tooltipDirection(e),"aria-hidden":"true"},!this.tooltipHide&&i("div",{class:"pn-range-tooltip"},i("span",{class:"pn-range-tooltip-label"},this.getTooltipLabel(e))))}handleOverlayInput(e){const n=e.target,{valueAsNumber:t}=n,a=isNaN(t)?0:t;this.pressControl||(this.pressControl=Math.abs(a-this.value)<=Math.abs(a-this.valueEnd)?"start":"end"),this.setValue(a,"end"===this.pressControl)}render(){return i(s,{key:"9945b3c7f372134797de134a550106602a88a864"},i("div",{key:"d940ec70592f62a4a22f30fbee67ec9736b06560",class:"pn-range","data-markers":!!this.markers?.length,"data-input":this.input},i("div",{key:"9bcc2d50329ff1d77b6e60e32de8e6c7ff355271",class:"pn-range-header","data-input":this.input},this.label&&i("label",{key:"5888cd96c03e60f5311f877bf84e6aa62d47e97f",htmlFor:this.pnId,class:"pn-range-label"},i("span",{key:"2072db6913d555fac653694a9e0d07c7d76fc695"},this.label)),this.multiple&&this.labelEnd&&i("label",{key:"ae8dd61026a936c210c73ba6efe811e93760e60f",htmlFor:this.pnIdEnd,class:"pn-range-label"},i("span",{key:"28bccee780ec10bd2b13b46f7e71ee0bcd68d559"},this.labelEnd))),this.renderPrefix(),i("div",{key:"278a597274b88d050ca240367e89677b5e302b97",class:"pn-range-group","data-pressing":this.isPressing},this.renderRangeInput(),this.multiple&&i(o,{key:"840c4fc833463c6844157a3211707224777157ed"},this.renderRangeInput(!0),i("input",{key:"8eb75af8c97670d7cadb0fe91fd9f3314802953d",id:this.idInputHidden,type:"range",class:"pn-range-overlay-input",...this.commonAttrs(),"aria-invalid":""+this.hasError(),hidden:!0,tabIndex:-1,...this.setListeners(!0)})),i("div",{key:"e2132f04eb0feca32916042bf0f3cd59f721dc8f",class:"pn-range-track","data-multiple":this.multiple,"aria-hidden":"true"}),this.renderTooltip(),this.multiple&&this.renderTooltip(!0),!!this.markers?.length&&i("ul",{key:"9e49ca3fd348c9994b72129d6c10236935f14197","aria-hidden":"true",class:"pn-range-markers"},this.markers.map((({label:e,value:n})=>i("li",{class:"pn-range-markers-item","data-min":this.calcPercentage(n)===this.min,"data-max":this.calcPercentage(n)===this.max,style:{"--pn-range-marker-position":this.calcPercentage(n)+"%"}},i("span",{class:"pn-range-markers-label","data-active":this.isActiveMarker(n)},this.getMarkerLabel({value:n,label:e}))))))),this.renderSuffix(),!!this.markers?.length&&i("datalist",{key:"1de13cbec1006384d3ff3a00b1b04542f7202c41",id:this.idDatalist},this.markers.map((({label:e,value:n})=>i("option",{value:n,label:null===e?null:e})))),i("p",{key:"2a188f9aedf5a406f61b76124a1d50439fff9113",id:this.idHelpertext,class:"pn-range-message",hidden:!this.hasHelperText()||this.hasErrorMessage()},i("span",{key:"487bc4892db02156d88b683e96bb576897926b6a"},this.helpertext),i("slot",{key:"5145e5f591e33da198650034c8d4dcf0e47d30a9",name:"helpertext"})),i("p",{key:"969947b6672fcd16c7b0947a2d2dc2faf58a9334",id:this.idError,class:"pn-range-message pn-range-error",role:"alert",hidden:!this.hasErrorMessage()},i("span",{key:"5a0d01b2a9ca80f17cdf45329f3b900e1e1eabf7"},this.error),i("slot",{key:"375f36337b860afd1d8b4c2b7bc8001d8653745f",name:"error"}))))}static get watchers(){return{value:[{handleValue:1}],valueEnd:[{handleValueEnd:1}],pnId:[{handleId:0}],pnIdEnd:[{handleId:1}],helpertext:[{handleMessage:1}],error:[{handleMessage:0}],multiple:[{handleMultiple:0}]}}static get style(){return`${e("pn-range")}{display:block}${e("pn-range")} .pn-range{color:#2d2013;display:flex;flex-direction:row;flex-wrap:wrap;gap:clamp(0.25em, 5vw, 0.75em);align-items:center;container-type:inline-size}@container (max-width: 24em){${e("pn-range")} .pn-range .pn-range-header[data-input]{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${e("pn-range")} .pn-range>${e("pn-input")}{flex:1 1 100%}${e("pn-range")} .pn-range>${e("pn-input")} .pn-input-label{position:unset;height:unset;width:unset;overflow:unset;clip:unset;margin:0 0 0.25em 0;white-space:unset}}${e("pn-range")} .pn-range[data-markers]{margin-bottom:1em}${e("pn-range")} .pn-range[data-markers][data-input]{margin-bottom:0.5em}${e("pn-range")} .pn-range-header{display:flex;justify-content:space-between;flex:1 1 100%;width:100%}${e("pn-range")} .pn-range-header:empty{display:none}${e("pn-range")} .pn-range-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-label{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-label>span{font-size:0.875em}${e("pn-range")} .pn-range-message{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em;text-align:left;flex:1 1 100%;width:100%}${e("pn-range")} .pn-range-message[hidden],${e("pn-range")} .pn-range-message>span[hidden]{display:none}${e("pn-range")} .pn-range-error{color:#a70707}${e("pn-range")} .pn-range-field{flex:0 0 auto}${e("pn-range")} .pn-range-field .pn-input-label{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${e("pn-range")} .pn-range-group{position:relative;min-height:0.75em;padding:0.75em 0;flex:1 1 auto}${e("pn-range")} .pn-range-group[data-pressing] *,${e("pn-range")} .pn-range-group[data-pressing] *:before,${e("pn-range")} .pn-range-group[data-pressing] *:after{transition-duration:0s}${e("pn-range")} .pn-range-text{font-weight:400;font-size:0.875em;color:#2d2013}${e("pn-range")} .pn-range-input{z-index:1;position:absolute;top:0;left:0;height:100%;width:100%;margin:0;opacity:0;cursor:pointer;-webkit-tap-highlight-color:transparent}${e("pn-range")} .pn-range-input:focus~.pn-range-thumb:before,${e("pn-range")} .pn-range-input:hover~.pn-range-thumb:before{background-color:#0d234b}${e("pn-range")} .pn-range-input:focus~.pn-range-thumb .pn-range-tooltip,${e("pn-range")} .pn-range-input:hover~.pn-range-thumb .pn-range-tooltip{opacity:1;transform:translateX(50%) translateY(0%);transition-delay:0s}${e("pn-range")} .pn-range-input:focus-visible[data-single]~.pn-range-thumb:before{outline-color:#005d92}${e("pn-range")} .pn-range-input:focus-visible[data-start]~.pn-range-thumb[data-start]:before,${e("pn-range")} .pn-range-input:focus-visible[data-end]~.pn-range-thumb[data-end]:before{outline-color:#005d92}${e("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-thumb:before{background-color:#a70707}${e("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-thumb .pn-range-tooltip{background-color:#500715}${e("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-track:before{background-color:#a70707}${e("pn-range")} .pn-range-input[aria-invalid=true]:focus-visible[data-start]~.pn-range-thumb[data-start]:before,${e("pn-range")} .pn-range-input[aria-invalid=true]:focus-visible[data-end]~.pn-range-thumb[data-end]:before{outline-color:#a70707}${e("pn-range")} .pn-range-input[aria-invalid=true]:hover~.pn-range-thumb:before{background-color:#500715}${e("pn-range")} .pn-range-input:disabled{cursor:not-allowed}${e("pn-range")} .pn-range-input:disabled+.pn-range-track:before{background-color:#969087}${e("pn-range")} .pn-range-input:disabled~.pn-range-thumb:before{background-color:#5e554a}${e("pn-range")} .pn-range-input:disabled~.pn-range-thumb .pn-range-tooltip{background-color:#2d2013}${e("pn-range")} .pn-range-overlay-input{z-index:5;cursor:pointer;position:absolute;appearance:none;top:0;left:0;height:100%;width:100%;margin:0;padding:0;border:0;outline:0;opacity:0;display:block;-webkit-tap-highlight-color:transparent}${e("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb:before,${e("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb:before,${e("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb:before{background-color:#0d234b}${e("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb[data-align=right] .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb[data-align=right] .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb[data-align=right] .pn-range-tooltip{transform:translateX(0%) translateY(0%);border-bottom-right-radius:0em}${e("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb[data-align=left] .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb[data-align=left] .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb[data-align=left] .pn-range-tooltip{transform:translateX(100%) translateY(0%);border-bottom-left-radius:0em}${e("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb .pn-range-tooltip{opacity:1;transform:translateX(50%) translateY(0%);transition-delay:0s}${e("pn-range")} .pn-range-overlay-input[aria-invalid=true]:focus~.pn-range-thumb:before,${e("pn-range")} .pn-range-overlay-input[aria-invalid=true]:focus-visible~.pn-range-thumb:before,${e("pn-range")} .pn-range-overlay-input[aria-invalid=true]:hover~.pn-range-thumb:before{background-color:#500715}${e("pn-range")} .pn-range-track{pointer-events:none;position:relative;min-height:inherit;display:block;background-color:#d3cecb;border-radius:2em;overflow:hidden}${e("pn-range")} .pn-range-track:before,${e("pn-range")} .pn-range-track:after{content:"";z-index:0;position:absolute;right:100%;pointer-events:none;height:100%;width:100%;background-color:#005d92;transform:translateX(var(--pn-range-progress));transition-property:transform, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-track:before,${e("pn-range")} .pn-range-track:after{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-track:after{display:none}${e("pn-range")} .pn-range-track:before{background-color:#005d92;transform:translateX(var(--pn-range-progress))}${e("pn-range")} .pn-range-track[data-multiple]:before{transform:translateX(var(--pn-range-progress-end))}${e("pn-range")} .pn-range-track[data-multiple]:after{display:unset;background-color:#d3cecb;transform:translateX(var(--pn-range-progress))}${e("pn-range")} .pn-range-thumb{pointer-events:none;position:absolute;height:100%;width:calc(100% - 1em);top:0;right:calc(100% - 0.5em);transform:translateX(var(--pn-range-progress));transition-property:transform, border-radius;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-thumb{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-thumb[data-end]{transform:translateX(var(--pn-range-progress-end))}${e("pn-range")} .pn-range-thumb[data-align=right] .pn-range-tooltip{transform:translateX(0%) translateY(10%)}${e("pn-range")} .pn-range-thumb[data-align=right] .pn-range-tooltip:before{transform:translateX(50%) translateY(-50%) rotate(0deg)}${e("pn-range")} .pn-range-thumb[data-align=left] .pn-range-tooltip{transform:translateX(100%) translateY(10%)}${e("pn-range")} .pn-range-thumb[data-align=left] .pn-range-tooltip:before{transform:translateX(50%) translateY(-50%) rotate(0deg)}${e("pn-range")} .pn-range-thumb:before{content:"";position:absolute;top:0.5em;right:-0.65625em;height:1.3125em;width:1.3125em;background-color:#005d92;border-radius:5em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-thumb:before{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-tooltip{position:absolute;z-index:10;top:-85%;right:0;text-align:center;line-height:1.25em;white-space:nowrap;height:1.75em;min-width:2em;padding:0.25em 0.5em;border-radius:0.5em;background-color:#0d234b;color:#ffffff;transform:translateX(50%) translateY(10%);opacity:0;transition-property:opacity, transform, border-radius, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-tooltip{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-tooltip{transition-delay:0.4s}${e("pn-range")} .pn-range-tooltip-label{font-size:0.875em;font-weight:400}${e("pn-range")} .pn-range-tooltip:before{content:"";z-index:-1;position:absolute;left:50%;bottom:-0.25em;height:0.5em;width:0.5em;background-color:inherit;transform:translateX(-50%) translateY(0%) rotate(45deg);transition-property:left, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-tooltip:before{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-markers{position:absolute;top:100%;left:0.5em;min-height:1em;width:calc(100% - 1em);padding:0;margin:0;list-style:none;display:flex;flex-direction:row;flex-wrap:nowrap}${e("pn-range")} .pn-range-markers-item{position:relative;left:var(--pn-range-marker-position)}${e("pn-range")} .pn-range-markers-item[data-min] .pn-range-markers-label{left:-0.0625em;transform:translateX(0%)}${e("pn-range")} .pn-range-markers-item[data-max] .pn-range-markers-label{left:unset;right:0;transform:translateX(0%)}${e("pn-range")} .pn-range-markers-item:before{content:"";position:absolute;left:0;top:-100%;border-left:0.0625em solid #d3cecb;height:1em;z-index:-1}${e("pn-range")} .pn-range-markers-label{position:absolute;top:0;left:50%;transform:translateX(-50%);font-weight:400;font-size:0.875em;color:#5e554a;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-markers-label{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-markers-label[data-active]{color:#2d2013}`}},[772,"pn-range",{label:[1],labelEnd:[1,"label-end"],helpertext:[1],value:[1538],valueEnd:[1538,"value-end"],name:[1],nameEnd:[1,"name-end"],min:[2],max:[2],step:[1],disabled:[4],markers:[16],input:[4],tooltipTemplate:[1,"tooltip-template"],tooltipHide:[4,"tooltip-hide"],textPrefix:[1,"text-prefix"],textSuffix:[1,"text-suffix"],icon:[1],iconEnd:[1,"icon-end"],multiple:[4],invalid:[4],error:[1],pnId:[1,"pn-id"],pnIdEnd:[1,"pn-id-end"],pnAriaLabel:[1,"pn-aria-label"],pnAriaLabelEnd:[1,"pn-aria-label-end"],pnAriaLabelledby:[1,"pn-aria-labelledby"],pnAriaLabelledbyEnd:[1,"pn-aria-labelledby-end"],showHelperSlot:[32],showErrorSlot:[32],isPressing:[32],pressControl:[32]},void 0,{value:[{handleValue:1}],valueEnd:[{handleValueEnd:1}],pnId:[{handleId:0}],pnIdEnd:[{handleId:1}],helpertext:[{handleMessage:1}],error:[{handleMessage:0}],multiple:[{handleMultiple:0}]}]),c=u,b=function(){"undefined"!=typeof customElements&&["pn-range","pn-button","pn-icon","pn-input","pn-spinner"].forEach((n=>{switch(n){case"pn-range":customElements.get(e(e(n)))||customElements.define(e(e(n)),u);break;case"pn-button":customElements.get(e(e(n)))||l();break;case"pn-icon":customElements.get(e(e(n)))||d();break;case"pn-input":customElements.get(e(e(n)))||h();break;case"pn-spinner":customElements.get(e(e(n)))||g()}}))};export{c as PnRange,b as defineCustomElement}
+import{transformTag as e,proxyCustomElement as n,HTMLElement as t,createEvent as a,forceUpdate as r,h as i,Host as s,Fragment as o}from"@stencil/core/internal/client";import{u as p}from"./helpers.js";import{d as l}from"./pn-button2.js";import{d}from"./pn-icon2.js";import{d as h}from"./pn-input2.js";import{d as g}from"./pn-spinner2.js";const u=n(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.rangeSelected=a(this,"rangeSelected",7)}id="pn-range-"+p();idEnd=this.id+"-end";idInput=this.id+"-input";idInputEnd=this.idEnd+"-input";idInputHidden=this.id+"-hidden";idHelpertext=this.id+"-helpertext";idError=this.id+"-error";idDatalist=this.id+"-data";mo;rangeTimeout;tooltipDefault="{value}";get hostElement(){return this}showHelperSlot=!1;showErrorSlot=!1;isPressing=!1;pressControl=null;label;labelEnd;helpertext=null;value=0;valueEnd=0;name;nameEnd;min=0;max=100;step="";disabled=!1;markers=[];input=!1;tooltipTemplate=this.tooltipDefault;tooltipHide=!1;textPrefix=null;textSuffix=null;icon=null;iconEnd=null;multiple=!1;invalid=!1;error=null;pnId=this.id;pnIdEnd=this.idEnd;pnAriaLabel;pnAriaLabelEnd;pnAriaLabelledby;pnAriaLabelledbyEnd;handleValue(){this.multiple&&this.value>this.valueEnd&&(this.valueEnd=this.value);const e=this.calcPercentage(this.value);requestAnimationFrame((()=>this.hostElement.style.setProperty("--pn-range-progress",e+"%")))}handleValueEnd(){if(!this.multiple)return;this.value>this.valueEnd&&(this.value=this.valueEnd);const e=this.calcPercentage(this.valueEnd);requestAnimationFrame((()=>this.hostElement.style.setProperty("--pn-range-progress-end",e+"%")))}handleId(){this.idInput=this.pnId+"-input",this.idInputEnd=this.pnIdEnd+"-input",this.idHelpertext=this.pnId+"-helpertext",this.idError=this.pnId+"-error",this.idDatalist=this.pnId+"-data"}handleMessage(){this.checkSlottedHelper(),this.checkSlottedError()}handleMultiple(){this.isPressing=!0,requestAnimationFrame((()=>this.isPressing=!1))}rangeSelected;connectedCallback(){this.mo=new MutationObserver((()=>r(this.hostElement))),this.mo.observe(this.hostElement,{childList:!0,subtree:!0})}disconnectedCallback(){this.mo&&this.mo.disconnect()}getAriaLabel(e){return e?this.labelEnd||this.pnAriaLabelledbyEnd?null:this.pnAriaLabelEnd:this.label||this.pnAriaLabelledby?null:this.pnAriaLabel}getAriaLabelledby(e){return e?this.labelEnd||this.pnAriaLabelEnd?null:this.pnAriaLabelledbyEnd:this.label||this.pnAriaLabel?null:this.pnAriaLabelledby}tooltipDirection(e=!1){if(this.multiple){const n=this.hostElement.offsetWidth<384,t=this.calcPercentage(this.value),a=this.calcPercentage(this.valueEnd);if(Math.abs(a-t)<(n?30:20))return e?"left":"right";if(!e&&this.value<=this.min+(this.max-this.min)*(n?.3:.2))return"left";if(e&&this.valueEnd>this.max*(n?.75:.8))return"right"}return"center"}isActiveMarker(e){const n=this.value===e;return this.multiple?n||this.valueEnd===e:n}hasHelperText(){return this.helpertext?.length>0||this.showHelperSlot}hasErrorMessage(){return this.error?.length>0||this.showErrorSlot}hasError(){return this.hasErrorMessage()||this.invalid}checkSlottedHelper(){const e=this.hostElement.querySelector("[slot=helpertext]")?.textContent;this.showHelperSlot=!!e?.length}checkSlottedError(){const e=this.hostElement.querySelector("[slot=error]")?.textContent;this.showErrorSlot=!!e?.length}calcPercentage(e){return(e-this.min)/(this.max-this.min)*100}setValue(e,n=!1){if(!(e>=this.min&&e<=this.max))return;n?this.valueEnd=e:this.value=e;const t=Number((this.valueEnd-this.value).toPrecision(4)),a=this.calcPercentage(this.value),r=this.calcPercentage(this.valueEnd),i=Number((this.multiple?r-a:a).toPrecision(4));this.rangeSelected.emit({value:this.value,percentage:i,...this.multiple?{valueEnd:this.valueEnd,difference:t}:{}})}getTooltipLabel(e=!1){return this.tooltipTemplate?.replace(this.tooltipDefault,(e?this.valueEnd:this.value)?.toString())}getMarkerLabel({value:e,label:n}){return null===n||""===n?"":""+(n||e)}ariaDescribedby(){const e=[];return this.hasErrorMessage()?e.push(this.idError):this.hasHelperText()&&e.push(this.idHelpertext),e.length?e.join(" "):null}handleChange(e){const n=e.target,{id:t,valueAsNumber:a,type:r}=n;this.setValue(isNaN(a)?0:a,"range"===r?t===this.pnIdEnd:t===this.idInputEnd)}setListeners(e=!1){return{onInput:n=>e?this.handleOverlayInput(n):this.handleChange(n),onTouchStart:e=>this.handlePress(e),onTouchEnd:()=>this.handleRelease(),onMouseDown:e=>this.handlePress(e),onMouseUp:()=>this.handleRelease()}}handlePress(e){this.rangeTimeout=setTimeout((()=>{this.isPressing=!0}),"touchstart"===e.type?200:100)}handleRelease(){clearTimeout(this.rangeTimeout),this.isPressing=!1,this.pressControl=null}commonAttrs(){return{step:this.step,min:this.min,max:this.max,list:this.markers?.length?this.idDatalist:null,disabled:this.disabled}}renderPrefix(){return this.input?this.renderNumberInput():this.icon?i("pn-icon",{class:"pn-range-icon",icon:this.icon}):this.textPrefix&&!this.input?i("span",{class:"pn-range-text"},this.textPrefix):null}renderSuffix(){return this.input&&this.multiple?this.renderNumberInput(!0):this.iconEnd?i("pn-icon",{class:"pn-range-icon",icon:this.iconEnd}):this.textSuffix&&!this.input?i("span",{class:"pn-range-text"},this.textSuffix):null}renderNumberInput(e=!1){const n=e?this.valueEnd:this.value,t=e?this.idInputEnd:this.idInput;return i("pn-input",{class:"pn-range-field",label:e?this.labelEnd:this.label,type:"number",name:e?this.nameEnd?this.nameEnd+"-input":null:this.name?this.name+"-input":null,...this.commonAttrs(),icon:e?this.iconEnd:this.icon,textPrefix:this.textPrefix,textSuffix:this.textSuffix,value:n?.toString(),inputid:t,invalid:this.hasError(),"pn-aria-label":this.getAriaLabel(e),"pn-aria-labelledby":this.getAriaLabelledby(e),"data-single":!this.multiple,...this.setListeners()})}renderRangeInput(e=!1){const n=e?this.valueEnd:this.value,t=this.tooltipDefault!==this.tooltipTemplate;return i("input",{id:e?this.pnIdEnd:this.pnId,class:"pn-range-input",type:"range",name:e?this.nameEnd:this.name,...this.commonAttrs(),value:n,"aria-label":this.getAriaLabel(e),"aria-labelledby":this.getAriaLabelledby(e),"aria-valuetext":t?this.getTooltipLabel(e):null,"aria-describedby":this.ariaDescribedby(),"aria-invalid":""+this.hasError(),"data-start":!e||null,"data-end":!!e||null,...this.setListeners()})}renderTooltip(e=!1){return i("div",{class:"pn-range-thumb","data-start":!e||null,"data-end":!!e||null,"data-align":this.tooltipDirection(e),"aria-hidden":"true"},!this.tooltipHide&&i("div",{class:"pn-range-tooltip"},i("span",{class:"pn-range-tooltip-label"},this.getTooltipLabel(e))))}handleOverlayInput(e){const n=e.target,{valueAsNumber:t}=n,a=isNaN(t)?0:t;this.pressControl||(this.pressControl=Math.abs(a-this.value)<=Math.abs(a-this.valueEnd)?"start":"end"),this.setValue(a,"end"===this.pressControl)}render(){return i(s,{key:"7b15d5fd890496496ef2056fe05d84726ca469fb"},i("div",{key:"61d8b45ca3ccf77cdafed4ba1b810c171ed7fc53",class:"pn-range","data-markers":!!this.markers?.length,"data-input":this.input},i("div",{key:"e7c83db6b00415406d2906b48d0e502b241419ba",class:"pn-range-header","data-input":this.input},this.label&&i("label",{key:"11a45aa1c4559e8a067f3f795e6c471d1a208079",htmlFor:this.pnId,class:"pn-range-label"},i("span",{key:"70f0c5a768b9524c2b029d723dc8440396ab9e73"},this.label)),this.multiple&&this.labelEnd&&i("label",{key:"87c879956b9c056e94e520160d2d5ce101156bdb",htmlFor:this.pnIdEnd,class:"pn-range-label"},i("span",{key:"19cef5a35f5af8d7572bd25b8c585142090e01eb"},this.labelEnd))),this.renderPrefix(),i("div",{key:"fa7fcce195c3ec0f59f68223235991c78b0cd1e5",class:"pn-range-group","data-pressing":this.isPressing},this.renderRangeInput(),this.multiple&&i(o,{key:"b8cfb75f9e26ca87cfcea6c9ac86843b83dd7f65"},this.renderRangeInput(!0),i("input",{key:"6ae36cdd478fa192f7c131e6b1dbdbe4423beb31",id:this.idInputHidden,type:"range",class:"pn-range-overlay-input",...this.commonAttrs(),"aria-invalid":""+this.hasError(),hidden:!0,tabIndex:-1,...this.setListeners(!0)})),i("div",{key:"87fa2359de2cb4ad694a5637e86105ddeb001d83",class:"pn-range-track","data-multiple":this.multiple,"aria-hidden":"true"}),this.renderTooltip(),this.multiple&&this.renderTooltip(!0),!!this.markers?.length&&i("ul",{key:"7fba4903d152f1597916a6ca960d0ead94108705","aria-hidden":"true",class:"pn-range-markers"},this.markers.map((({label:e,value:n})=>i("li",{class:"pn-range-markers-item","data-min":this.calcPercentage(n)===this.min,"data-max":this.calcPercentage(n)===this.max,style:{"--pn-range-marker-position":this.calcPercentage(n)+"%"}},i("span",{class:"pn-range-markers-label","data-active":this.isActiveMarker(n)},this.getMarkerLabel({value:n,label:e}))))))),this.renderSuffix(),!!this.markers?.length&&i("datalist",{key:"b14372658a0fef24130fb285de78833828db1690",id:this.idDatalist},this.markers.map((({label:e,value:n})=>i("option",{value:n,label:null===e?null:e})))),i("p",{key:"b69de56bb0a97f7a60a7cf7d68e52feb21a5af1b",id:this.idHelpertext,class:"pn-range-message",hidden:!this.hasHelperText()||this.hasErrorMessage()},i("span",{key:"d0a03b481006198b487144d0552b1719bf845f67"},this.helpertext),i("slot",{key:"e4c4698135491e6af33df77a7d0108f8c0aa0840",name:"helpertext"})),i("p",{key:"9f462d515aeedfa4c28d0214afa9dba5ec10225e",id:this.idError,class:"pn-range-message pn-range-error",role:"alert",hidden:!this.hasErrorMessage()},i("span",{key:"cbf21fa15da09a99e7d6daf01e5b497dec7d437c"},this.error),i("slot",{key:"93f9afd84d778eebf53d73531084c18fa583ee84",name:"error"}))))}static get watchers(){return{value:[{handleValue:1}],valueEnd:[{handleValueEnd:1}],pnId:[{handleId:0}],pnIdEnd:[{handleId:1}],helpertext:[{handleMessage:1}],error:[{handleMessage:0}],multiple:[{handleMultiple:0}]}}static get style(){return`${e("pn-range")}{display:block}${e("pn-range")} .pn-range{color:#2d2013;display:flex;flex-direction:row;flex-wrap:wrap;gap:clamp(0.25em, 5vw, 0.75em);align-items:center;container-type:inline-size}@container (max-width: 24em){${e("pn-range")} .pn-range .pn-range-header[data-input]{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${e("pn-range")} .pn-range>${e("pn-input")}{flex:1 1 100%}${e("pn-range")} .pn-range>${e("pn-input")} .pn-input-label{position:unset;height:unset;width:unset;overflow:unset;clip:unset;margin:0 0 0.25em 0;white-space:unset}}${e("pn-range")} .pn-range[data-markers]{margin-bottom:1em}${e("pn-range")} .pn-range[data-markers][data-input]{margin-bottom:0.5em}${e("pn-range")} .pn-range-header{display:flex;justify-content:space-between;flex:1 1 100%;width:100%}${e("pn-range")} .pn-range-header:empty{display:none}${e("pn-range")} .pn-range-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-label{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-label>span{font-size:0.875em}${e("pn-range")} .pn-range-message{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em;text-align:left;flex:1 1 100%;width:100%}${e("pn-range")} .pn-range-message[hidden],${e("pn-range")} .pn-range-message>span[hidden]{display:none}${e("pn-range")} .pn-range-error{color:#a70707}${e("pn-range")} .pn-range-field{flex:0 0 auto}${e("pn-range")} .pn-range-field .pn-input-label{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${e("pn-range")} .pn-range-group{position:relative;min-height:0.75em;padding:0.75em 0;flex:1 1 auto}${e("pn-range")} .pn-range-group[data-pressing] *,${e("pn-range")} .pn-range-group[data-pressing] *:before,${e("pn-range")} .pn-range-group[data-pressing] *:after{transition-duration:0s}${e("pn-range")} .pn-range-text{font-weight:400;font-size:0.875em;color:#2d2013}${e("pn-range")} .pn-range-input{z-index:1;position:absolute;top:0;left:0;height:100%;width:100%;margin:0;opacity:0;cursor:pointer;-webkit-tap-highlight-color:transparent}${e("pn-range")} .pn-range-input:focus~.pn-range-thumb:before,${e("pn-range")} .pn-range-input:hover~.pn-range-thumb:before{background-color:#0d234b}${e("pn-range")} .pn-range-input:focus~.pn-range-thumb .pn-range-tooltip,${e("pn-range")} .pn-range-input:hover~.pn-range-thumb .pn-range-tooltip{opacity:1;transform:translateX(50%) translateY(0%);transition-delay:0s}${e("pn-range")} .pn-range-input:focus-visible[data-single]~.pn-range-thumb:before{outline-color:#005d92}${e("pn-range")} .pn-range-input:focus-visible[data-start]~.pn-range-thumb[data-start]:before,${e("pn-range")} .pn-range-input:focus-visible[data-end]~.pn-range-thumb[data-end]:before{outline-color:#005d92}${e("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-thumb:before{background-color:#a70707}${e("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-thumb .pn-range-tooltip{background-color:#500715}${e("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-track:before{background-color:#a70707}${e("pn-range")} .pn-range-input[aria-invalid=true]:focus-visible[data-start]~.pn-range-thumb[data-start]:before,${e("pn-range")} .pn-range-input[aria-invalid=true]:focus-visible[data-end]~.pn-range-thumb[data-end]:before{outline-color:#a70707}${e("pn-range")} .pn-range-input[aria-invalid=true]:hover~.pn-range-thumb:before{background-color:#500715}${e("pn-range")} .pn-range-input:disabled{cursor:not-allowed}${e("pn-range")} .pn-range-input:disabled+.pn-range-track:before{background-color:#969087}${e("pn-range")} .pn-range-input:disabled~.pn-range-thumb:before{background-color:#5e554a}${e("pn-range")} .pn-range-input:disabled~.pn-range-thumb .pn-range-tooltip{background-color:#2d2013}${e("pn-range")} .pn-range-overlay-input{z-index:5;cursor:pointer;position:absolute;appearance:none;top:0;left:0;height:100%;width:100%;margin:0;padding:0;border:0;outline:0;opacity:0;display:block;-webkit-tap-highlight-color:transparent}${e("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb:before,${e("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb:before,${e("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb:before{background-color:#0d234b}${e("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb[data-align=right] .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb[data-align=right] .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb[data-align=right] .pn-range-tooltip{transform:translateX(0%) translateY(0%);border-bottom-right-radius:0em}${e("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb[data-align=left] .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb[data-align=left] .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb[data-align=left] .pn-range-tooltip{transform:translateX(100%) translateY(0%);border-bottom-left-radius:0em}${e("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb .pn-range-tooltip{opacity:1;transform:translateX(50%) translateY(0%);transition-delay:0s}${e("pn-range")} .pn-range-overlay-input[aria-invalid=true]:focus~.pn-range-thumb:before,${e("pn-range")} .pn-range-overlay-input[aria-invalid=true]:focus-visible~.pn-range-thumb:before,${e("pn-range")} .pn-range-overlay-input[aria-invalid=true]:hover~.pn-range-thumb:before{background-color:#500715}${e("pn-range")} .pn-range-track{pointer-events:none;position:relative;min-height:inherit;display:block;background-color:#d3cecb;border-radius:2em;overflow:hidden}${e("pn-range")} .pn-range-track:before,${e("pn-range")} .pn-range-track:after{content:"";z-index:0;position:absolute;right:100%;pointer-events:none;height:100%;width:100%;background-color:#005d92;transform:translateX(var(--pn-range-progress));transition-property:transform, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-track:before,${e("pn-range")} .pn-range-track:after{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-track:after{display:none}${e("pn-range")} .pn-range-track:before{background-color:#005d92;transform:translateX(var(--pn-range-progress))}${e("pn-range")} .pn-range-track[data-multiple]:before{transform:translateX(var(--pn-range-progress-end))}${e("pn-range")} .pn-range-track[data-multiple]:after{display:unset;background-color:#d3cecb;transform:translateX(var(--pn-range-progress))}${e("pn-range")} .pn-range-thumb{pointer-events:none;position:absolute;height:100%;width:calc(100% - 1em);top:0;right:calc(100% - 0.5em);transform:translateX(var(--pn-range-progress));transition-property:transform, border-radius;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-thumb{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-thumb[data-end]{transform:translateX(var(--pn-range-progress-end))}${e("pn-range")} .pn-range-thumb[data-align=right] .pn-range-tooltip{transform:translateX(0%) translateY(10%)}${e("pn-range")} .pn-range-thumb[data-align=right] .pn-range-tooltip:before{transform:translateX(50%) translateY(-50%) rotate(0deg)}${e("pn-range")} .pn-range-thumb[data-align=left] .pn-range-tooltip{transform:translateX(100%) translateY(10%)}${e("pn-range")} .pn-range-thumb[data-align=left] .pn-range-tooltip:before{transform:translateX(50%) translateY(-50%) rotate(0deg)}${e("pn-range")} .pn-range-thumb:before{content:"";position:absolute;top:0.5em;right:-0.65625em;height:1.3125em;width:1.3125em;background-color:#005d92;border-radius:5em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-thumb:before{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-tooltip{position:absolute;z-index:10;top:-85%;right:0;text-align:center;line-height:1.25em;white-space:nowrap;height:1.75em;min-width:2em;padding:0.25em 0.5em;border-radius:0.5em;background-color:#0d234b;color:#ffffff;transform:translateX(50%) translateY(10%);opacity:0;transition-property:opacity, transform, border-radius, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-tooltip{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-tooltip{transition-delay:0.4s}${e("pn-range")} .pn-range-tooltip-label{font-size:0.875em;font-weight:400}${e("pn-range")} .pn-range-tooltip:before{content:"";z-index:-1;position:absolute;left:50%;bottom:-0.25em;height:0.5em;width:0.5em;background-color:inherit;transform:translateX(-50%) translateY(0%) rotate(45deg);transition-property:left, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-tooltip:before{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-markers{position:absolute;top:100%;left:0.5em;min-height:1em;width:calc(100% - 1em);padding:0;margin:0;list-style:none;display:flex;flex-direction:row;flex-wrap:nowrap}${e("pn-range")} .pn-range-markers-item{position:relative;left:var(--pn-range-marker-position)}${e("pn-range")} .pn-range-markers-item[data-min] .pn-range-markers-label{left:-0.0625em;transform:translateX(0%)}${e("pn-range")} .pn-range-markers-item[data-max] .pn-range-markers-label{left:unset;right:0;transform:translateX(0%)}${e("pn-range")} .pn-range-markers-item:before{content:"";position:absolute;left:0;top:-100%;border-left:0.0625em solid #d3cecb;height:1em;z-index:-1}${e("pn-range")} .pn-range-markers-label{position:absolute;top:0;left:50%;transform:translateX(-50%);font-weight:400;font-size:0.875em;color:#5e554a;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-markers-label{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-markers-label[data-active]{color:#2d2013}`}},[772,"pn-range",{label:[1],labelEnd:[1,"label-end"],helpertext:[1],value:[1538],valueEnd:[1538,"value-end"],name:[1],nameEnd:[1,"name-end"],min:[2],max:[2],step:[1],disabled:[4],markers:[16],input:[4],tooltipTemplate:[1,"tooltip-template"],tooltipHide:[4,"tooltip-hide"],textPrefix:[1,"text-prefix"],textSuffix:[1,"text-suffix"],icon:[1],iconEnd:[1,"icon-end"],multiple:[4],invalid:[4],error:[1],pnId:[1,"pn-id"],pnIdEnd:[1,"pn-id-end"],pnAriaLabel:[1,"pn-aria-label"],pnAriaLabelEnd:[1,"pn-aria-label-end"],pnAriaLabelledby:[1,"pn-aria-labelledby"],pnAriaLabelledbyEnd:[1,"pn-aria-labelledby-end"],showHelperSlot:[32],showErrorSlot:[32],isPressing:[32],pressControl:[32]},void 0,{value:[{handleValue:1}],valueEnd:[{handleValueEnd:1}],pnId:[{handleId:0}],pnIdEnd:[{handleId:1}],helpertext:[{handleMessage:1}],error:[{handleMessage:0}],multiple:[{handleMultiple:0}]}]),c=u,b=function(){"undefined"!=typeof customElements&&["pn-range","pn-button","pn-icon","pn-input","pn-spinner"].forEach((n=>{switch(n){case"pn-range":customElements.get(e(e(n)))||customElements.define(e(e(n)),u);break;case"pn-button":customElements.get(e(e(n)))||l();break;case"pn-icon":customElements.get(e(e(n)))||d();break;case"pn-input":customElements.get(e(e(n)))||h();break;case"pn-spinner":customElements.get(e(e(n)))||g()}}))};export{c as PnRange,b as defineCustomElement}