@postnord/web-components
Version:
PostNord Web Components
6 lines • 34.6 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import{r as t,c as e,g as i,h as n,a as l}from"./p-C247oTEA.js";import{a as o}from"./p-B88w-Zxn.js";import{c as s}from"./p-DrYFvs2M.js";import{c}from"./p-BvuWkoyY.js";import{uuidv4 as r,awaitTopbar as a,reduceMotion as p,ripple as u,getTotalHeightOffset as d,en as h}from"./index.esm.js";const m={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"}};const f="pn-multiselect{display:inline-block}pn-multiselect .pn-multiselect{border:0;margin:0;padding:0}pn-multiselect .pn-multiselect[data-icon] .pn-multiselect-element{padding-left:3em}pn-multiselect .pn-multiselect[data-error] .pn-multiselect-element{padding-right:5.5em;border-color:#a70707}pn-multiselect .pn-multiselect[data-error] .pn-multiselect-element:hover{border-color:#500715}pn-multiselect .pn-multiselect[data-error] .pn-multiselect-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}pn-multiselect .pn-multiselect-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-multiselect .pn-multiselect-label{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-label>span{font-size:0.875em}pn-multiselect .pn-multiselect-label{width:100%}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}pn-multiselect .pn-multiselect-group{position:relative;padding:0;margin:0}pn-multiselect .pn-multiselect-input{position:relative}pn-multiselect .pn-multiselect-input>pn-icon{pointer-events:none;position:absolute;top:0.75em;right:3.5em}pn-multiselect .pn-multiselect-input>pn-icon[data-custom]{left:0.75em;right:unset}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){pn-multiselect .pn-multiselect-button{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-multiselect .pn-multiselect-button:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}pn-multiselect .pn-multiselect-button>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){pn-multiselect .pn-multiselect-button>pn-icon>svg>path{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-button>pn-icon>svg>path{transition-delay:0.2s;transform-origin:center;transform:rotate(0deg)}pn-multiselect .pn-multiselect-button:hover{background-color:#effbff}pn-multiselect .pn-multiselect-button[aria-expanded=true]{background-color:#effbff}pn-multiselect .pn-multiselect-button[aria-expanded=true]>pn-icon>svg>path{transform:rotate(180deg);transition-delay:0s}pn-multiselect .pn-multiselect-element{color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}pn-multiselect .pn-multiselect-element:-webkit-autofill,pn-multiselect .pn-multiselect-element:-webkit-autofill:hover,pn-multiselect .pn-multiselect-element:-webkit-autofill:focus,pn-multiselect .pn-multiselect-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}pn-multiselect .pn-multiselect-element{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-multiselect .pn-multiselect-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}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){pn-multiselect .pn-multiselect-element{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-element::placeholder{color:#5e554a;font-weight:normal}pn-multiselect .pn-multiselect-element:hover{border-color:#005d92}pn-multiselect .pn-multiselect-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-multiselect .pn-multiselect-element{cursor:text;text-align:left;transition-delay:0.1s, 0.1s, 0s;width:100%;padding-right:3.5em;display:flex;align-items:center;justify-content:space-between;gap:0.5em;overflow:hidden;text-overflow:ellipsis}pn-multiselect .pn-multiselect-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2;pointer-events:none}pn-multiselect .pn-multiselect-element:disabled+.pn-multiselect-button{pointer-events:none}pn-multiselect .pn-multiselect-element:disabled+.pn-multiselect-button path{fill:#5e554a}pn-multiselect .pn-multiselect-element:placeholder{color:#5e554a;font-weight:normal}pn-multiselect .pn-multiselect-element[type=input]:hover{cursor:pointer;color:#2d2013;background-color:#effbff;transition-delay:0s}pn-multiselect .pn-multiselect-element[type=input]:hover[aria-invalid=true]{background-color:#fdefee}pn-multiselect .pn-multiselect-element:focus-visible{transition-delay:0s}pn-multiselect .pn-multiselect-element::-webkit-search-cancel-button,pn-multiselect .pn-multiselect-element::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}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}pn-multiselect .pn-multiselect-options[data-open]{visibility:visible}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)}pn-multiselect .pn-multiselect-options[data-moving]{overflow:hidden;visibility:visible}pn-multiselect .pn-multiselect-options::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}pn-multiselect .pn-multiselect-options::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}pn-multiselect .pn-multiselect-options::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}pn-multiselect .pn-multiselect-options::-webkit-scrollbar-thumb:hover{background-color:#5e554a}pn-multiselect .pn-multiselect-options::-webkit-scrollbar-corner,pn-multiselect .pn-multiselect-options::-webkit-scrollbar-button{display:none}pn-multiselect .pn-multiselect-options>pn-input{padding:0.5em}pn-multiselect .pn-multiselect-optgroup{list-style:none;padding:0}pn-multiselect .pn-multiselect-optgroup>.pn-multiselect-option>.pn-multiselect-option-content{padding-left:2em}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}pn-multiselect .pn-multiselect-chips:empty{display:none}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){pn-multiselect .pn-multiselect-chip{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-chip:focus-within{color:#005d92;outline-color:#005d92;background-color:#effbff;border-color:#005d92}pn-multiselect .pn-multiselect-chip[data-count]{pointer-events:none;border:0;padding-left:0;padding-right:0;background-color:unset}pn-multiselect .pn-multiselect-chip-label{font-size:0.875em;white-space:nowrap}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){pn-multiselect .pn-multiselect-chip-button{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-chip-button{-webkit-tap-highlight-color:transparent}pn-multiselect .pn-multiselect-chip-button:hover{background-color:#8eddf9}pn-multiselect .pn-multiselect-chip-button:focus{outline:0}pn-multiselect .pn-multiselect-no-results{margin:0;padding:0.75em}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}pn-multiselect .pn-multiselect-description[role=alert]{color:#a70707}pn-multiselect .pn-multiselect-option{position:relative;margin:0;padding:0}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}}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}pn-multiselect .pn-multiselect-option-input:disabled{pointer-events:none}pn-multiselect .pn-multiselect-option-input:disabled+.pn-multiselect-option-content{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2;pointer-events:none}pn-multiselect .pn-multiselect-option-input:disabled+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#f3f2f2;border-color:#969087}pn-multiselect .pn-multiselect-option-input:disabled+.pn-multiselect-option-content path{fill:#5e554a}pn-multiselect .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-multiselect .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#969087;border-color:#969087}pn-multiselect .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content path{fill:#5e554a}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#a70707}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]+.pn-multiselect-option-content .pn-ripple{background-color:#a70707}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:checked+.pn-multiselect-option-content{background-color:#fdefee}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#a70707;border-color:#a70707}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:checked:focus-visible+.pn-multiselect-option-content{background-color:#fdefee}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}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:checked:hover+.pn-multiselect-option-content{background-color:#fef7f6}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}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:hover+.pn-multiselect-option-content{background-color:#fef7f6}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#fdefee;border-color:#a70707}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}pn-multiselect .pn-multiselect-option-input:hover+.pn-multiselect-option-content{background-color:#effbff}pn-multiselect .pn-multiselect-option-input:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#005d92;background-color:#e0f8ff}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}pn-multiselect .pn-multiselect-option-input:checked+.pn-multiselect-option-content{background-color:#e0f8ff}pn-multiselect .pn-multiselect-option-input:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#005d92;background-color:#005d92}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}pn-multiselect .pn-multiselect-option-input:checked:hover+.pn-multiselect-option-content{background-color:#effbff}pn-multiselect .pn-multiselect-option-input:checked:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#0d234b;background-color:#0d234b}pn-multiselect .pn-multiselect-option-input:checked:focus-visible+.pn-multiselect-option-content{background-color:#e0f8ff}pn-multiselect .pn-multiselect-option-input:checked:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#0d234b;background-color:#0d234b}pn-multiselect .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#005d92;border-color:#005d92}pn-multiselect .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content svg .pn-multiselect-option-checkbox-checkmark-path{stroke-dashoffset:23}pn-multiselect .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content svg .pn-multiselect-option-checkbox-indeterminate-path{stroke-dashoffset:0}pn-multiselect .pn-multiselect-option-input:indeterminate:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#0d234b;border-color:#0d234b}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){pn-multiselect .pn-multiselect-option-content{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-option-text{flex:1;text-overflow:ellipsis;overflow:hidden}pn-multiselect .pn-multiselect-option-label{color:#2d2013;font-weight:400}pn-multiselect .pn-multiselect-option-helper{color:#5e554a;margin:0}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){pn-multiselect .pn-multiselect-option-checkbox{transition-duration:0s;transition-delay:0s}}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){pn-multiselect .pn-multiselect-option-checkbox svg polyline{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-option-checkbox svg polyline{transition-delay:0s}pn-multiselect .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-checkmark-path{stroke-dashoffset:23}pn-multiselect .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-indeterminate-path{stroke-dashoffset:23}";const b=class{constructor(i){t(this,i);this.toggleSelect=e(this,"toggleSelect");this.allOptions=e(this,"allOptions");this.selectedOption=e(this,"selectedOption");this.selectedAllOptions=e(this,"selectedAllOptions");this.searchInput=e(this,"searchInput")}id=`pn-multiselect-${r()}`;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;animation;animationDurationDefault=400;animationDuration=this.animationDurationDefault;get hostElement(){return i(this)}isSearching=false;open=false;upwards=false;srMessage;isClosing=false;isExpanding=false;label;helpertext;placeholder;name;selectId=this.id;selectName;icon;language=null;options;selectAll=false;allValue="pn_multiselect_all";search=false;searchQuery="";itemCount=5;maxHeight;top=false;bottom=false;required=false;disabled=false;invalid=false;error;handleOpen(){if(this.open){this.addGlobalEventListeners();this.handleDirection();this.handleMaxHeight();this.handleWidth();requestAnimationFrame((()=>this.openGrid()))}else{this.closeGrid();this.removeGlobalEventListeners()}}handleSearch(){if(!this.search)this.options=[...this.options.map((t=>{const e={...t,hide:false};if(e?.group?.length)e.group.map((t=>({...t,hide:false})));return e}))]}handleSearchQuery(){if(this.search&&typeof this.searchQuery==="string")this.handleInputSearch()}handleSelectId(){const t=this.selectId;this.idLegend=`${t}-legend`;this.idButton=`${t}-button`;this.idOptions=`${t}-options`;this.idHelper=`${t}-text`;this.idChips=`${t}-chips`;this.idSr=`${t}-sr`}handleResize(){if(!this.open)return;this.toggleOpen(false);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();if(this.language===null)await a(this.hostElement)}componentDidLoad(){if(!!this.searchQuery?.length)this.handleSearchQuery()}globalEvents=t=>{const e=t.target;const i=e?.closest(this.hostElement.localName);if(!i)this.toggleOpen(false)};addGlobalEventListeners(){const t=this.hostElement.getRootNode();t.addEventListener("click",this.globalEvents)}removeGlobalEventListeners(){const t=this.hostElement.getRootNode();t.removeEventListener("click",this.globalEvents)}openGrid(){requestAnimationFrame((()=>{const{clientHeight:t,scrollHeight:e}=this.elList;const i=this.isClosing?t:0;this.elList.style.height=`${e}px`;this.isExpanding=true;this.animateGrid(true,`${i}px`,this.maxHeight||`${this.elList.scrollHeight}px`)}))}closeGrid(){const{scrollHeight:t,clientHeight:e}=this.elList;const i=this.isExpanding?e:t;this.elList.style.height=`0px`;this.isClosing=true;this.animateGrid(false,`${i}px`,`0px`)}animateGrid(t,e,i){this.cancelAnimations();if(p())this.animationDuration=0;else this.animationDuration=this.animationDurationDefault;this.animation=this.elList.animate({height:[e,i]},{duration:this.animationDuration,easing:"cubic-bezier(0.6, 0, 0.2, 1)"});this.animation.onfinish=()=>this.animationFinish();this.animation.oncancel=()=>t?this.isExpanding=false:this.isClosing=false}animationFinish(){this.cancelAnimations();this.elList.style.height=this.isClosing?"0px":"";this.isClosing=false;this.isExpanding=false}cancelAnimations(){if(this.animation)this.animation.cancel()}emitEvents(t,e){this.allOptions.emit(this.options);if(t)return this.selectedOption.emit(t);const i={checked:e,searching:this.isSearching};if(this.search&&this.optionsTotal()!==this.optionsSearch().length){i.query=this.searchQuery;i.found=this.optionsSearch()}this.selectedAllOptions.emit(i)}optionsChecked(){const t=this.options?.reduce(((t,e)=>{const i=e.group?[...e.group.filter((({checked:t})=>t))]:[];if(e.checked)t.push(e);if(i?.length)t.push(...i);return t}),[]);return t}optionsTotal(){return this.options?.reduce(((t,e)=>t+(e?.group?.length?e.group.length+1:1)),0)}optionsIndex(t){const e=({group:e=[]})=>e?.findIndex((({value:e})=>e===t));const i=this.options.findIndex((i=>i.value===t||e(i)!==-1));const n=e(this.options?.[i]);return{indexGroup:i,indexNested:n}}optionsCheckedTotal(){return this.optionsChecked()?.length}optionsCheckedPreview(){return this.optionsChecked()?.slice(0,this.itemCount)}optionsCheckedLabels(){return this.optionsChecked()?.map((({label:t})=>t))?.join(", ")}optionsSearch(){const t=this.options?.reduce(((t,e)=>{const i=e.group?[...e.group.filter((({hide:t})=>!t))]:[];if(!e.hide)t.push(e);if(i?.length)t.push(...i);return t}),[]);return t}noResults(){return this.optionsSearch()?.length===0}isIndeterminate(t){const e=this.options?.[t];if(e?.group?.length){const t=e.group.every((({checked:t})=>t));const i=e.group.every((({checked:t})=>!t));return!(t||i)}return false}optionSelect({val:t,checked:e,chip:i}){if(t===this.allValue)return this.optionSelectAll(e);const n=this.options;const{indexGroup:l,indexNested:o}=this.optionsIndex(t);const s=n[l]?.group;const c=s?.[o];if(c?.value){n[l].group[o].checked=e;const t=s?.every((({checked:t})=>t));if(t)n[l].checked=true;else n[l].checked=false}else{n[l].checked=e;if(s?.length)n[l].group=s?.map((t=>({...t,checked:e})))}const r=o===-1?n[l]:n[l].group[o];this.emitEvents(r);this.options=[...n];if(typeof i==="number"){this.handleSrMesssage(`${this.translate("REMOVED")} ${r.label}`);requestAnimationFrame((()=>{const t=i===this.optionsCheckedTotal()?i-1:i;const e=Array.from(this.elChips.children)?.[t];e?.querySelector("button").focus({preventScroll:true})}))}}optionSelectAll(t){this.options=[...this.options.map((e=>{const i={...e,checked:this.isSearching?e.hide?e.checked:t:t};if(i.group)i.group=[...i.group.map((e=>({...e,checked:this.isSearching?e.hide?e.checked:t:t})))];const n=i?.group?.every((({checked:t})=>t));if(i?.group?.length)i.checked=n;return i}))];this.emitEvents(null,t)}optionSelected(t){return!!this.optionsChecked()?.find((({value:e,checked:i})=>e===t&&i))}translate(t){const e=m?.[t]?.[this.language||h];if(e.includes("{number}"))return e.replace("{number}",this.optionsSearch().length);return e}getRect(t){return t?.getBoundingClientRect()}ripple({clientX:t,clientY:e,target:i}){const n=t===0&&e===0;const l=i.nextElementSibling;const{x:o,width:s,y:c,top:r}=this.getRect(l);const a=n?{clientX:o+s-24,clientY:c-r}:{clientX:t,clientY:e};u(a,l)}handleSrMesssage(t){this.srMessage=t;clearTimeout(this.srTimer);this.srTimer=setTimeout((()=>this.srMessage=null),2e3)}handleDirection(){if(this.top)return this.upwards=true;if(this.bottom)return this.upwards=false;const{bottom:t,top:e}=this.getRect(this.elInput);const i=16;const n=window.innerHeight-t-i;const l=e-i;this.upwards=l/2>n}handleMaxHeight(){if(this.maxHeight)return this.elGroup.style.setProperty("--pn-select-max-height",this.maxHeight);const{bottom:t,top:e}=this.getRect(this.elInput);const i=this.upwards?e:t;const n=d();const l=this.upwards?n+16:16;const o=this.upwards?i-l:window.innerHeight-i-l;this.elGroup.style.setProperty("--pn-select-max-height",`${Math.ceil(o)}px`)}handleWidth(){const{width:t}=this.getRect(this.elInput);this.elGroup.style.setProperty("--pn-select-options-width",`${Math.ceil(t)}px`)}setFocus(){if(this.search)this.elInput.focus({preventScroll:true});else this.elButton.focus({preventScroll:true})}hasError(){return this.invalid||!!this.error}hasMessage(){return!!this.helpertext||!!this.error}toggleOpen(t){if(typeof t==="boolean"&&t===this.open)return;this.open=t??!this.open;this.toggleSelect.emit({open:this.open})}handleInputKeyboard(t){t.stopImmediatePropagation();const{code:e}=t;if(e==="Escape")return this.toggleOpen(false);if(!this.open&&e.match(/^(Space|Enter)$|Arrow|^Key.*$/))this.toggleOpen()}setSearchQuery(t){if(!this.open)this.toggleOpen(true);this.searchQuery=t}handleInputSearch(){if(this.isEmpty())return;const t=this.searchQuery;const e=({label:e,helpertext:i,value:n})=>`${e} ${i} ${n}`.trim().toLowerCase().includes(t.toLowerCase());const i=this.options.map((t=>{const i=t?.group?.map((t=>({...t,hide:!e(t)})))||[];const n=e(t)||i?.some((({hide:t})=>!t));t.hide=!n;if(t?.group?.length)t.group=[...i];return t}));this.isSearching=t!=="";this.options=[...i];this.searchInput.emit({query:t,found:this.optionsSearch()})}getListItem(t){const{value:e}=this.options[t];return this.elList.querySelector(`.pn-multiselect-option-input[value='${e}']`)}getOptionIndex(t,e,i){const n=this.optionsTotal()-1;if(i==="End")return n;if(i==="Home")return 0;const l=this.options.findIndex((({value:e})=>e===t));const o=e.find((t=>typeof t==="number"));const s=l+o;if(s>=n)return n;if(s<=0)return 0;return s}checkboxNav(t,e){const{code:i}=t;const n=i==="ArrowUp"&&-1;const l=i==="ArrowDown"&&1;const o=i==="PageUp"&&-10;const s=i==="PageDown"&&10;const c=i==="Home"&&0;const r=i==="End"&&this.optionsTotal()-1;const a=i==="Tab";const p=i==="Space";const u=i==="Enter";const d=i==="Escape";const h=[n,l,o,s,c,r,a,p,u,d];if(!h.some((t=>typeof t==="number"||t)))return;if(a||p||u)return;t.stopImmediatePropagation();t.preventDefault();if(d){this.setFocus();return this.toggleOpen(false)}const m=this.getOptionIndex(e,h,i);return this.getListItem(m)?.focus()}handleBlur(t){const e=t.target;const i=t.relatedTarget;const n=(i||e)?.className==="pn-multiselect-chip-button";if(n)this.toggleOpen(false)}handleLabel(){if(this.disabled)return;this.setFocus()}isEmpty(){return(this.options?.length||0)===0}showSelectAll(){return this.selectAll&&!this.isEmpty()&&!this.noResults()}showEmptyOption(){return this.isSearching&&this.noResults()||this.isEmpty()}getPlaceholder(){const t=this.search?"SEARCH":"SELECT_AN_OPTION";return this.placeholder||this.translate(t)}handleChange({target:t}){const{value:e,checked:i}=t;this.optionSelect({val:e,checked:i})}additonalOptions(){const t=this.optionsCheckedTotal()-this.itemCount;const e=`MORE_OPTION${t===1?"":"S"}`;return`${t} ${this.translate(e)}`}describedBy(){const t=[this.search&&this.idChips,this.srMessage&&this.idSr,!!this.helpertext&&this.idHelper].filter(Boolean);if(t.length)return t.join(" ");return null}renderOption({label:t,value:e,checked:i,helpertext:l,icon:o,id:s=`${this.selectId}-${e||t}`,invalid:c,disabled:r,hide:a,group:p},u,d){return n("li",{class:"pn-multiselect-option",key:s,hidden:a},n("input",{type:"checkbox",id:s,class:"pn-multiselect-option-input",checked:i??this.optionSelected(e),indeterminate:d===undefined&&this.isIndeterminate(u),name:this.name,value:e,disabled:this.disabled||r,required:this.required,"aria-invalid":c?"true":null,"aria-describedby":l?`${s}-helper`:null,onClick:t=>this.ripple(t),onKeyDown:t=>this.checkboxNav(t,e),onBlur:t=>this.handleBlur(t)}),n("div",{class:"pn-multiselect-option-content"},!!o&&n("pn-icon",{icon:o,color:"blue900"}),n("div",{class:"pn-multiselect-option-text"},n("label",{class:"pn-multiselect-option-label",htmlFor:s},n("span",null,t)),l&&n("p",{class:"pn-multiselect-option-helper",id:`${s}-helper`},l)),n("div",{class:"pn-multiselect-option-checkbox"},n("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},n("polyline",{class:"pn-multiselect-option-checkbox-checkmark-path",points:"4,12 9,17 20,6","stroke-width":"3"}),n("polyline",{class:"pn-multiselect-option-checkbox-indeterminate-path",points:"4,12 20,12","stroke-width":"3"})))),p?.length&&n("ul",{class:"pn-multiselect-optgroup"},p?.map(((t,e)=>this.renderOption(t,u,e)))))}renderOptions(){return n("ul",{id:this.idOptions,class:"pn-multiselect-options","data-open":this.open,"data-upwards":this.upwards,"data-moving":this.isClosing||this.isExpanding,onChange:t=>this.handleChange(t),style:{height:"0px"},ref:t=>this.elList=t},this.showSelectAll()&&this.renderOption({label:this.translate(`SELECT_${this.isSearching?"FOUND":"ALL"}_OPTIONS`),value:this.allValue,checked:this.optionsTotal()===this.optionsCheckedTotal()}),this.options?.map(((t,e)=>this.renderOption(t,e))),this.showEmptyOption()&&n("li",{class:"pn-multiselect-option"},n("div",{class:"pn-multiselect-option-content",role:"alert"},n("div",{class:"pn-multiselect-option-text"},n("span",{class:"pn-multiselect-option-label"},this.translate(this.isEmpty()?"NO_OPTIONS":"NO_SEARCH_RESULTS"))))))}renderChips(){return n("ul",{id:this.idChips,class:"pn-multiselect-chips","aria-label":this.translate("SELECTED_OPTIONS"),ref:t=>this.elChips=t},this.optionsCheckedPreview()?.map((({label:t,value:e},i)=>n("li",{class:"pn-multiselect-chip","aria-setsize":this.optionsCheckedTotal(),"aria-posinset":i+1,key:`${t}-${e}`},n("span",{class:"pn-multiselect-chip-label"},t),n("button",{type:"button",class:"pn-multiselect-chip-button","aria-label":`${this.translate("REMOVE")} ${t}`,onClick:()=>this.optionSelect({val:e,checked:false,chip:i})},n("pn-icon",{icon:c,small:true,color:"blue700"}))))),this.optionsCheckedTotal()>this.itemCount&&n("li",{class:"pn-multiselect-chip","data-count":true},n("span",{class:"pn-multiselect-chip-label"},"+ ",this.additonalOptions())))}render(){return n(l,{key:"b7e9ba8133b2b95d65db84bbc717bfa8a33daab6"},n("fieldset",{key:"5f468f786090d38a6d314ec5ca7fe139811e89d4",class:"pn-multiselect","data-icon":!!this.icon,"data-error":this.hasError(),disabled:this.disabled},this.label&&n("legend",{key:"6c32b7062a04bfc654db36bf331fd3287d099183",id:this.idLegend,class:"pn-multiselect-label",onClick:()=>this.handleLabel()},n("span",{key:"e9a5476f9a581145de2deec5c44fd2fcea522caa"},this.label),!!this.optionsChecked()?.length&&n("span",{key:"64e8911980077b3944bec6125ad70dfec95c2254"},this.optionsCheckedTotal(),"/",this.optionsTotal())),n("div",{key:"a5e7d491973c76fc2445cb5d9c2ae3bb92ba0ec9",class:"pn-multiselect-group",ref:t=>this.elGroup=t},n("div",{key:"f72a71bcaea8daac2f950b82bb59b12eded97cc4",class:"pn-multiselect-input"},!!this.icon&&n("pn-icon",{key:"0627c1d0ed8c7a7b4f8e06bd8ae2798462e87e92",class:"pn-multiselect-icon","data-custom":true,icon:this.icon}),n("input",{key:"ba53f46c15712b30ad2ce8c33aa3620851ddc430",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,onClick:()=>this.search&&this.open?null:this.toggleOpen(),onKeyDown:t=>this.handleInputKeyboard(t),onBlur:t=>this.handleBlur(t),onInput:t=>this.search&&this.setSearchQuery(t.target.value),ref:t=>this.elInput=t}),this.hasError()&&n("pn-icon",{key:"48ff7baa24d949741f1203ed29c85924706eff2a",class:"pn-multiselect-icon","data-error":true,icon:o,color:"warning"}),n("button",{key:"64edce006f8eeec56b3d50c794422841f20fc5b7",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.toString(),onClick:()=>this.toggleOpen(),ref:t=>this.elButton=t},n("pn-icon",{key:"36144a7923ee3afc8bbfc8b842aea6d05c900c08",class:"pn-multiselect-icon",icon:s,color:"blue700"}))),this.renderOptions()),this.hasMessage()&&n("p",{key:"bded5f8503c0c8c9868db4d72387923c4e5b8666",id:this.idHelper,class:"pn-multiselect-description",role:!!this.error?"alert":null},n("span",{key:"242489cf50337adf678e96abf01b78727e59a8bc"},this.error||this.helpertext)),this.search&&this.renderChips(),n("slot",{key:"207d92a634d3b76826f25f119b5ac8ba448b79c2"}),this.search&&n("p",{key:"e95a184a94cbe4725fb75007fb90eb6a6c5dd61d",id:this.idSr,class:"pn-multiselect-sr-only",role:"alert","aria-live":"assertive"},this.srMessage&&n("span",{key:"07dcacaa7c14c9d90c9a8376793813c552a6b5e7"},this.srMessage))))}static get watchers(){return{open:["handleOpen"],search:["handleSearch"],searchQuery:["handleSearchQuery"],selectId:["handleSelectId"]}}};b.style=f;export{b as pn_multiselect};
//# sourceMappingURL=p-738cd70c.entry.js.map