@postnord/web-components/components/pn-multiselect.js

PostNord Web Components

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