@aquera/nile-elements 0.0.24 → 0.0.25

package/dist/index.iife.js

@@ -2038,6 +2038,7 @@ const bM=Symbol.for(""),ZM=M=>{if((null==M?void 0:M.r)===bM)return null==M?void
     color: hsl(0, 0%, 100%);
     padding: 0.25rem 0.5rem;
     pointer-events: none;
+    word-break: break-all;
   }
 `;function Ii(M,N,i){return new Promise((D=>{if(i?.duration===1/0)throw new Error("Promise-based animations must be finite.");const j=M.animate(N,{...i,duration:ui()?0:i.duration});j.addEventListener("cancel",D,{once:!0}),j.addEventListener("finish",D,{once:!0})}))}function gi(M){return(M=M.toString().toLowerCase()).indexOf("ms")>-1?parseFloat(M):M.indexOf("s")>-1?1e3*parseFloat(M):parseFloat(M)}function ui(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}function ti(M){return Promise.all(M.getAnimations().map((M=>new Promise((N=>{const i=requestAnimationFrame(N);M.addEventListener("cancel",(()=>i),{once:!0}),M.addEventListener("finish",(()=>i),{once:!0}),M.cancel()})))))}const Ti=new Map,Li=new WeakMap;function zi(M,N){return"rtl"===N.toLowerCase()?{keyframes:M.rtlKeyframes||M.keyframes,options:M.options}:M}function Ai(M,N){Ti.set(M,function(M){return M??{keyframes:[],options:{duration:0}}}(N))}function ci(M,N,i){const D=Li.get(M);if(D?.[N])return zi(D[N],i.dir);const j=Ti.get(N);return j?zi(j,i.dir):{keyframes:[],options:{duration:0}}}function ei(M,N){return new Promise((i=>{M.addEventListener(N,(function D(j){j.target===M&&(M.removeEventListener(N,D),i())}))}))}M.NileTooltip=class extends BM{constructor(){super(...arguments),this.content="",this.placement="top",this.disabled=!1,this.distance=8,this.open=!1,this.skidding=0,this.trigger="hover focus",this.hoist=!1}static get styles(){return[ji]}connectedCallback(){super.connectedCallback(),this.handleBlur=this.handleBlur.bind(this),this.handleClick=this.handleClick.bind(this),this.handleFocus=this.handleFocus.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleMouseOver=this.handleMouseOver.bind(this),this.handleMouseOut=this.handleMouseOut.bind(this),this.updateComplete.then((()=>{this.addEventListener("blur",this.handleBlur,!0),this.addEventListener("focus",this.handleFocus,!0),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("mouseover",this.handleMouseOver),this.addEventListener("mouseout",this.handleMouseOut)}))}firstUpdated(){this.body.hidden=!this.open,this.open&&(this.popup.active=!0,this.popup.reposition())}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("blur",this.handleBlur,!0),this.removeEventListener("focus",this.handleFocus,!0),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("mouseover",this.handleMouseOver),this.removeEventListener("mouseout",this.handleMouseOut)}handleBlur(){this.hasTrigger("focus")&&this.hide()}handleClick(){this.hasTrigger("click")&&(this.open?this.hide():this.show())}handleFocus(){this.hasTrigger("focus")&&this.show()}handleKeyDown(M){this.open&&"Escape"===M.key&&(M.stopPropagation(),this.hide())}handleMouseOver(){if(this.hasTrigger("hover")){const M=gi(getComputedStyle(this).getPropertyValue("--show-delay"));clearTimeout(this.hoverTimeout),this.hoverTimeout=window.setTimeout((()=>this.show()),M)}}handleMouseOut(){if(this.hasTrigger("hover")){const M=gi(getComputedStyle(this).getPropertyValue("--hide-delay"));clearTimeout(this.hoverTimeout),this.hoverTimeout=window.setTimeout((()=>this.hide()),M)}}hasTrigger(M){return this.trigger.split(" ").includes(M)}async handleOpenChange(){if(this.open){if(this.disabled)return;this.emit("nile-show"),await ti(this.body),this.body.hidden=!1,this.popup.active=!0;const{keyframes:M,options:N}=ci(this,"tooltip.show",{dir:""});await Ii(this.popup.popup,M,N),this.emit("nile-after-show")}else{this.emit("nile-hide"),await ti(this.body);const{keyframes:M,options:N}=ci(this,"tooltip.hide",{dir:""});await Ii(this.popup.popup,M,N),this.popup.active=!1,this.body.hidden=!0,this.emit("nile-after-hide")}}async handleOptionsChange(){this.hasUpdated&&(await this.updateComplete,this.popup.reposition())}handleDisabledChange(){this.disabled&&this.open&&this.hide()}async show(){if(!this.open)return this.open=!0,ei(this,"nile-after-show")}async hide(){if(this.open)return this.open=!1,ei(this,"nile-after-hide")}render(){return V`
       <nile-popup
@@ -2736,6 +2737,10 @@ const bM=Symbol.for(""),ZM=M=>{if((null==M?void 0:M.r)===bM)return null==M?void
       transform: rotate(360deg);
     }
   }
+
+  .select__invisible{
+    opacity: 0;
+  }
 `,oi=u`
   :host {
     display: inline-block;
@@ -2898,7 +2903,7 @@ const bM=Symbol.for(""),ZM=M=>{if((null==M?void 0:M.r)===bM)return null==M?void
               ></nile-icon-button>
             `:""}
       </span>
-    `}},M.NileTag.styles=oi,N([LM({reflect:!0})],M.NileTag.prototype,"variant",void 0),N([LM({reflect:!0})],M.NileTag.prototype,"size",void 0),N([LM({type:Boolean,reflect:!0})],M.NileTag.prototype,"pill",void 0),N([LM({type:Boolean})],M.NileTag.prototype,"removable",void 0),M.NileTag=N([uM("nile-tag")],M.NileTag);const ni=new Set;function di(M){if(ni.add(M),!document.body.classList.contains("nile-scroll-lock")){const M=function(){const M=document.documentElement.clientWidth;return Math.abs(window.innerWidth-M)}();document.body.classList.add("nile-scroll-lock"),document.body.style.setProperty("--nile-scroll-lock-size",`${M}px`)}}function Ei(M){ni.delete(M),0===ni.size&&(document.body.classList.remove("nile-scroll-lock"),document.body.style.removeProperty("--nile-scroll-lock-size"))}function Si(M,N,i="vertical",D="smooth"){const j=function(M,N){return{top:Math.round(M.getBoundingClientRect().top-N.getBoundingClientRect().top),left:Math.round(M.getBoundingClientRect().left-N.getBoundingClientRect().left)}}(M,N),I=j.top+N.scrollTop,g=j.left+N.scrollLeft,u=N.scrollLeft,t=N.scrollLeft+N.offsetWidth,T=N.scrollTop,L=N.scrollTop+N.offsetHeight;"horizontal"!==i&&"both"!==i||(g<u?N.scrollTo({left:g,behavior:D}):g+M.clientWidth>t&&N.scrollTo({left:g-N.offsetWidth+M.clientWidth,behavior:D})),"vertical"!==i&&"both"!==i||(I<T?N.scrollTo({top:I,behavior:D}):I+M.clientHeight>L&&N.scrollTo({top:I-N.offsetHeight+M.clientHeight,behavior:D}))}M.NileSelect=class extends BM{constructor(){super(...arguments),this.formControlController=new hM(this,{assumeInteractionOn:["nile-blur","nile-input"]}),this.hasSlotController=new YM(this,"help-text","label"),this.typeToSelectString="",this.hasFocus=!1,this.displayLabel="",this.selectedOptions=[],this.oldValue="",this.name="",this.value="",this.defaultValue="",this.size="medium",this.placeholder="Select...",this.searchValue="",this.searchEnabled=!1,this.optionsLoading=!1,this.multiple=!1,this.helpText="",this.errorMessage="",this.warning=!1,this.error=!1,this.success=!1,this.maxOptionsVisible=3,this.disabled=!1,this.clearable=!1,this.open=!1,this.hoist=!1,this.filled=!1,this.pill=!1,this.label="",this.placement="bottom",this.form="",this.required=!1,this.showSelected=!1,this.showNoResults=!1,this.noResultsMessage="No results found"}get validity(){return this.valueInput?.validity}get validationMessage(){return this.valueInput?.validationMessage}connectedCallback(){super.connectedCallback(),this.handleDocumentFocusIn=this.handleDocumentFocusIn.bind(this),this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.open=!1,this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}addOpenListeners(){document.addEventListener("focusin",this.handleDocumentFocusIn),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("mousedown",this.handleDocumentMouseDown)}removeOpenListeners(){document.removeEventListener("focusin",this.handleDocumentFocusIn),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousedown",this.handleDocumentMouseDown)}handleFocus(){this.hasFocus=!0,this.displayInput.setSelectionRange(0,0),this.emit("nile-focus",{value:this.value,name:this.name})}handleBlur(){this.hasFocus=!1,this.emit("nile-blur",{value:this.value,name:this.name})}handleDocumentFocusIn(M){const N=M.composedPath();this&&!N.includes(this)&&this.hide()}handleFooterClick(M){M.stopPropagation(),M.preventDefault()}toggleShowSelected(M){if(M.stopPropagation(),M.preventDefault(),0===this.selectedOptions?.length)return;this.showSelected=!this.showSelected;this.getAllOptions().forEach((M=>{M.selected||(M.hidden=this.showSelected)})),this.requestUpdate()}unSlectAll(){this.showSelected=!1;this.getAllOptions().forEach((M=>{M.selected=!1,M.hidden=!1})),this.value="",this.selectionChanged(),this.emit("nile-change",{value:this.value,name:this.name})}handleDocumentKeyDown(M){const N=M.target,i=null!==N.closest(".select__clear"),D=null!==N.closest("nile-icon-button");if(!i&&!D){if("Escape"===M.key&&this.open&&(M.preventDefault(),M.stopPropagation(),this.hide(),this.displayInput.focus({preventScroll:!0})),"Enter"===M.key||" "===M.key&&""===this.typeToSelectString)return M.preventDefault(),M.stopImmediatePropagation(),this.open?void(this.currentOption&&!this.currentOption.disabled&&(this.multiple?this.toggleOptionSelection(this.currentOption):this.setSelectedOptions(this.currentOption),this.updateComplete.then((()=>{this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})})),this.multiple||(this.hide(),this.displayInput.focus({preventScroll:!0})))):void this.show();if(["ArrowUp","ArrowDown","Home","End"].includes(M.key)){const N=this.getAllOptions(),i=N.indexOf(this.currentOption);let D=Math.max(0,i);if(M.preventDefault(),!this.open&&(this.show(),this.currentOption))return;"ArrowDown"===M.key?(D=i+1,D>N.length-1&&(D=0)):"ArrowUp"===M.key?(D=i-1,D<0&&(D=N.length-1)):"Home"===M.key?D=0:"End"===M.key&&(D=N.length-1),this.setCurrentOption(N[D])}if(1===M.key.length||"Backspace"===M.key){const N=this.getAllOptions();if(M.metaKey||M.ctrlKey||M.altKey)return;if(!this.open){if("Backspace"===M.key)return;this.show()}M.stopPropagation(),M.preventDefault(),clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=window.setTimeout((()=>this.typeToSelectString=""),1e3),"Backspace"===M.key?this.typeToSelectString=this.typeToSelectString.slice(0,-1):this.typeToSelectString+=M.key.toLowerCase();for(const M of N){if(M.getTextLabel().toLowerCase().startsWith(this.typeToSelectString)){this.setCurrentOption(M);break}}}}}handleDocumentMouseDown(M){const N=M.composedPath();this&&!N.includes(this)&&this.hide()}handleLabelClick(){this.displayInput.focus(),this.hide()}handleComboboxMouseDown(M){const N=M.composedPath().some((M=>M instanceof Element&&"nile-icon-button"===M.tagName.toLowerCase()));this.disabled||N||(M.preventDefault(),this.displayInput.focus({preventScroll:!0}),this.open=!this.open)}handleComboboxKeyDown(M){M.stopPropagation(),this.handleDocumentKeyDown(M)}handleClearClick(M){M.stopPropagation(),""!==this.value&&(this.setSelectedOptions([]),this.displayInput.focus({preventScroll:!0}),this.updateComplete.then((()=>{this.emit("nile-clear",{value:this.value,name:this.name}),this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})})))}handleClearMouseDown(M){M.stopPropagation(),M.preventDefault()}handleOptionClick(M){const N=M.target.closest("nile-option"),i=this.value;if(this.oldValue=i,N&&!N.disabled&&(this.multiple?this.toggleOptionSelection(N):this.setSelectedOptions(N),this.updateComplete.then((()=>this.displayInput.focus({preventScroll:!0}))),this.value!==i&&this.updateComplete.then((()=>{this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})})),this.multiple||(this.hide(),this.displayInput.focus({preventScroll:!0}))),this.showSelected){this.getAllOptions().forEach((M=>{M.selected||(M.hidden=this.showSelected)})),this.requestUpdate()}}handleDefaultSlotChange(){const M=this.getAllOptions(),N=Array.isArray(this.value)?this.value:[this.value],i=[];customElements.get("nile-option")?(M.forEach((M=>i.push(M.value))),this.setSelectedOptions(M.filter((M=>N.includes(M.value))))):customElements.whenDefined("nile-option").then((()=>this.handleDefaultSlotChange()))}handleTagRemove(M,N){if(M.stopPropagation(),!this.disabled){this.toggleOptionSelection(N,!1);this.getAllOptions().forEach((M=>{M.selected||(M.hidden=this.showSelected)})),this.updateComplete.then((()=>{this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})}))}}getAllOptions(){const M=[...this.querySelectorAll("nile-option")];return M.sort(((M,N)=>{let i=this.oldValue.indexOf(M.value),D=this.oldValue.indexOf(N.value);return-1===i&&(i=1/0),-1===D&&(D=1/0),i<D?-1:i>D?1:0})),M}getOptionPrefix(M){const N=M.shadowRoot?.querySelector('slot[name="prefix"]');if(!N)return"";const i=N.assignedNodes(),D=[];return i.forEach((M=>{M instanceof HTMLElement?D.push(M.outerHTML):M.nodeType===Node.TEXT_NODE&&D.push(M.textContent||"")})),D.join("")}getFirstOption(){return this.querySelector("nile-option")}setCurrentOption(M){this.getAllOptions().forEach((M=>{M.current=!1,M.tabIndex=-1})),M&&(this.currentOption=M,M.current=!0,M.tabIndex=0,M.focus())}setSelectedOptions(M){const N=this.getAllOptions(),i=Array.isArray(M)?M:[M];N.forEach((M=>M.selected=!1)),i.length&&i.forEach((M=>M.selected=!0)),this.selectionChanged()}toggleOptionSelection(M,N){M.selected=!0===N||!1===N?N:!M.selected,this.selectionChanged()}selectionChanged(){if(this.selectedOptions=this.getAllOptions().filter((M=>M.selected)),this.multiple){if(this.value=this.selectedOptions.map((M=>M.value)),this.placeholder&&0===this.value.length?this.displayLabel="":this.displayLabel=this.selectedOptions.length+" selected",0===this.selectedOptions.length){this.showSelected=!1;this.getAllOptions().forEach((M=>{M.selected||(M.hidden=this.showSelected)})),this.requestUpdate()}}else this.value=this.selectedOptions[0]?.value??this.value,this.displayLabel=this.selectedOptions[0]?.getTextLabel()?this.selectedOptions[0].getTextLabel():this.value??"";this.updateComplete.then((()=>{this.formControlController.updateValidity()})),this.calculateTotalWidthOfTags()}handleSearchFocus(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}handleSearchBlur(){document.addEventListener("keydown",this.handleDocumentKeyDown)}handleSearchChange(M){this.searchValue=M.detail.value,0===this.filterOptions(this.searchValue).length?this.showNoResults=!0:this.showNoResults=!1}filterOptions(M){const N=this.getAllOptions(),i=M.toLowerCase();let D=[];return N.forEach((M=>{const N=M.getTextLabel().toLowerCase(),j=(M.value||"").toLowerCase();N.includes(i)||j.includes(i)?(M.hidden=!1,D.push(M)):M.hidden=!0})),D}handleInvalid(M){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(M)}handleDisabledChange(){this.disabled&&(this.open=!1,this.handleOpenChange())}handleValueChange(){const M=this.getAllOptions(),N=Array.isArray(this.value)?this.value:[this.value];this.setSelectedOptions(M.filter((M=>N.includes(M.value))))}async handleOpenChange(){if(this.open&&!this.disabled){this.setCurrentOption(this.selectedOptions[0]||this.getFirstOption()),this.emit("nile-show",{value:this.value,name:this.name}),this.addOpenListeners(),await ti(this),this.listbox.hidden=!1,this.popup.active=!0,requestAnimationFrame((()=>{this.setCurrentOption(this.currentOption)}));const{keyframes:M,options:N}=ci(this,"select.show",{dir:"ltr"});await Ii(this.popup.popup,M,N),this.currentOption&&Si(this.currentOption,this.listbox,"vertical","auto"),this.emit("nile-after-show",{value:this.value,name:this.name})}else{this.emit("nile-hide",{value:this.value,name:this.name}),this.removeOpenListeners(),await ti(this);const{keyframes:M,options:N}=ci(this,"select.hide",{dir:"ltr"});await Ii(this.popup.popup,M,N),this.listbox.hidden=!0,this.popup.active=!1,this.emit("nile-after-hide",{value:this.value,name:this.name})}}async show(){if(!this.open&&!this.disabled)return this.open=!0,ei(this,"nile-after-show");this.open=!1}async hide(){if(this.open&&!this.disabled)return this.open=!1,ei(this,"nile-after-hide");this.open=!1}checkValidity(){return this.valueInput.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.valueInput.reportValidity()}setCustomValidity(M){this.valueInput.setCustomValidity(M),this.formControlController.updateValidity()}focus(M){this.displayInput.focus(M)}blur(){this.displayInput.blur()}onInputChange(M){M.stopPropagation()}calculateWidthOfSelectTagsDiv(){if(this.shadowRoot){const M=this.shadowRoot.querySelector("div.select__tags");if(M instanceof HTMLElement){return M.offsetWidth-70}}}calculateTotalWidthOfTags(){this.maxOptionsVisible=1/0,setTimeout((()=>{let M=[];if(this.shadowRoot){this.shadowRoot.querySelectorAll("nile-tag").forEach((N=>{N instanceof HTMLElement&&M.push(N.offsetWidth)}))}if(this.value.length!==M.length)return;const N=this.calculateWidthOfSelectTagsDiv();if(!N)return;let i=0,D=0;for(let j=0;j<M.length;j++)if(i+=M[j],i>N){D=j;break}this.maxOptionsVisible=D}),1)}render(){const M=this.hasSlotController.test("label");this.hasSlotController.test("help-text");const N=this.hasSlotController.test("label-suffix"),i=!!this.label||!!M,D=this.clearable&&!this.disabled&&this.value.length>0,j=this.placeholder&&0===this.value.length,I=this.searchValue||"",g=!!this.helpText,u=!!this.errorMessage;return V`
+    `}},M.NileTag.styles=oi,N([LM({reflect:!0})],M.NileTag.prototype,"variant",void 0),N([LM({reflect:!0})],M.NileTag.prototype,"size",void 0),N([LM({type:Boolean,reflect:!0})],M.NileTag.prototype,"pill",void 0),N([LM({type:Boolean})],M.NileTag.prototype,"removable",void 0),M.NileTag=N([uM("nile-tag")],M.NileTag);const ni=new Set;function di(M){if(ni.add(M),!document.body.classList.contains("nile-scroll-lock")){const M=function(){const M=document.documentElement.clientWidth;return Math.abs(window.innerWidth-M)}();document.body.classList.add("nile-scroll-lock"),document.body.style.setProperty("--nile-scroll-lock-size",`${M}px`)}}function Ei(M){ni.delete(M),0===ni.size&&(document.body.classList.remove("nile-scroll-lock"),document.body.style.removeProperty("--nile-scroll-lock-size"))}function Si(M,N,i="vertical",D="smooth"){const j=function(M,N){return{top:Math.round(M.getBoundingClientRect().top-N.getBoundingClientRect().top),left:Math.round(M.getBoundingClientRect().left-N.getBoundingClientRect().left)}}(M,N),I=j.top+N.scrollTop,g=j.left+N.scrollLeft,u=N.scrollLeft,t=N.scrollLeft+N.offsetWidth,T=N.scrollTop,L=N.scrollTop+N.offsetHeight;"horizontal"!==i&&"both"!==i||(g<u?N.scrollTo({left:g,behavior:D}):g+M.clientWidth>t&&N.scrollTo({left:g-N.offsetWidth+M.clientWidth,behavior:D})),"vertical"!==i&&"both"!==i||(I<T?N.scrollTo({top:I,behavior:D}):I+M.clientHeight>L&&N.scrollTo({top:I-N.offsetHeight+M.clientHeight,behavior:D}))}M.NileSelect=class extends BM{constructor(){super(...arguments),this.formControlController=new hM(this,{assumeInteractionOn:["nile-blur","nile-input"]}),this.hasSlotController=new YM(this,"help-text","label"),this.typeToSelectString="",this.hasFocus=!1,this.displayLabel="",this.selectedOptions=[],this.oldValue="",this.name="",this.value="",this.defaultValue="",this.size="medium",this.placeholder="Select...",this.searchValue="",this.searchEnabled=!1,this.optionsLoading=!1,this.multiple=!1,this.helpText="",this.errorMessage="",this.warning=!1,this.error=!1,this.success=!1,this.maxOptionsVisible=3,this.disabled=!1,this.clearable=!1,this.open=!1,this.hoist=!1,this.filled=!1,this.pill=!1,this.label="",this.placement="bottom",this.form="",this.required=!1,this.showSelected=!1,this.oldMaxOptionsVisible=1,this.showNoResults=!1,this.noResultsMessage="No results found"}get validity(){return this.valueInput?.validity}get validationMessage(){return this.valueInput?.validationMessage}connectedCallback(){super.connectedCallback(),this.handleDocumentFocusIn=this.handleDocumentFocusIn.bind(this),this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.open=!1,this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}addOpenListeners(){document.addEventListener("focusin",this.handleDocumentFocusIn),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("mousedown",this.handleDocumentMouseDown)}removeOpenListeners(){document.removeEventListener("focusin",this.handleDocumentFocusIn),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousedown",this.handleDocumentMouseDown)}handleFocus(){this.hasFocus=!0,this.displayInput.setSelectionRange(0,0),this.emit("nile-focus",{value:this.value,name:this.name})}handleBlur(){this.hasFocus=!1,this.emit("nile-blur",{value:this.value,name:this.name})}handleDocumentFocusIn(M){const N=M.composedPath();this&&!N.includes(this)&&this.hide()}handleFooterClick(M){M.stopPropagation(),M.preventDefault()}toggleShowSelected(M){if(M.stopPropagation(),M.preventDefault(),0===this.selectedOptions?.length)return;this.showSelected=!this.showSelected;this.getAllOptions().forEach((M=>{M.selected||(M.hidden=this.showSelected)})),this.requestUpdate()}unSlectAll(){this.showSelected=!1;this.getAllOptions().forEach((M=>{M.selected=!1,M.hidden=!1})),this.value="",this.selectionChanged(),this.emit("nile-change",{value:this.value,name:this.name})}handleDocumentKeyDown(M){const N=M.target,i=null!==N.closest(".select__clear"),D=null!==N.closest("nile-icon-button");if(!i&&!D){if("Escape"===M.key&&this.open&&(M.preventDefault(),M.stopPropagation(),this.hide(),this.displayInput.focus({preventScroll:!0})),"Enter"===M.key||" "===M.key&&""===this.typeToSelectString)return M.preventDefault(),M.stopImmediatePropagation(),this.open?void(this.currentOption&&!this.currentOption.disabled&&(this.multiple?this.toggleOptionSelection(this.currentOption):this.setSelectedOptions(this.currentOption),this.updateComplete.then((()=>{this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})})),this.multiple||(this.hide(),this.displayInput.focus({preventScroll:!0})))):void this.show();if(["ArrowUp","ArrowDown","Home","End"].includes(M.key)){const N=this.getAllOptions(),i=N.indexOf(this.currentOption);let D=Math.max(0,i);if(M.preventDefault(),!this.open&&(this.show(),this.currentOption))return;"ArrowDown"===M.key?(D=i+1,D>N.length-1&&(D=0)):"ArrowUp"===M.key?(D=i-1,D<0&&(D=N.length-1)):"Home"===M.key?D=0:"End"===M.key&&(D=N.length-1),this.setCurrentOption(N[D])}if(1===M.key.length||"Backspace"===M.key){const N=this.getAllOptions();if(M.metaKey||M.ctrlKey||M.altKey)return;if(!this.open){if("Backspace"===M.key)return;this.show()}M.stopPropagation(),M.preventDefault(),clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=window.setTimeout((()=>this.typeToSelectString=""),1e3),"Backspace"===M.key?this.typeToSelectString=this.typeToSelectString.slice(0,-1):this.typeToSelectString+=M.key.toLowerCase();for(const M of N){if(M.getTextLabel().toLowerCase().startsWith(this.typeToSelectString)){this.setCurrentOption(M);break}}}}}handleDocumentMouseDown(M){const N=M.composedPath();this&&!N.includes(this)&&this.hide()}handleLabelClick(){this.displayInput.focus(),this.hide()}handleComboboxMouseDown(M){const N=M.composedPath().some((M=>M instanceof Element&&"nile-icon-button"===M.tagName.toLowerCase()));this.disabled||N||(M.preventDefault(),this.displayInput.focus({preventScroll:!0}),this.open=!this.open)}handleComboboxKeyDown(M){M.stopPropagation(),this.handleDocumentKeyDown(M)}handleClearClick(M){M.stopPropagation(),""!==this.value&&(this.setSelectedOptions([]),this.displayInput.focus({preventScroll:!0}),this.updateComplete.then((()=>{this.emit("nile-clear",{value:this.value,name:this.name}),this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})})))}handleClearMouseDown(M){M.stopPropagation(),M.preventDefault()}handleOptionClick(M){const N=M.target.closest("nile-option"),i=this.value;if(this.oldValue=i,N&&!N.disabled&&(this.multiple?this.toggleOptionSelection(N):this.setSelectedOptions(N),this.updateComplete.then((()=>this.displayInput.focus({preventScroll:!0}))),this.value!==i&&this.updateComplete.then((()=>{this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})})),this.multiple||(this.hide(),this.displayInput.focus({preventScroll:!0}))),this.showSelected){this.getAllOptions().forEach((M=>{M.selected||(M.hidden=this.showSelected)})),this.requestUpdate()}}handleDefaultSlotChange(){const M=this.getAllOptions(),N=Array.isArray(this.value)?this.value:[this.value],i=[];customElements.get("nile-option")?(M.forEach((M=>i.push(M.value))),this.setSelectedOptions(M.filter((M=>N.includes(M.value))))):customElements.whenDefined("nile-option").then((()=>this.handleDefaultSlotChange()))}handleTagRemove(M,N){if(M.stopPropagation(),!this.disabled){this.toggleOptionSelection(N,!1);this.getAllOptions().forEach((M=>{M.selected||(M.hidden=this.showSelected)})),this.updateComplete.then((()=>{this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})}))}}getAllOptions(){const M=[...this.querySelectorAll("nile-option")];return M.sort(((M,N)=>{let i=this.oldValue.indexOf(M.value),D=this.oldValue.indexOf(N.value);return-1===i&&(i=1/0),-1===D&&(D=1/0),i<D?-1:i>D?1:0})),M}getOptionPrefix(M){const N=M.shadowRoot?.querySelector('slot[name="prefix"]');if(!N)return"";const i=N.assignedNodes(),D=[];return i.forEach((M=>{M instanceof HTMLElement?D.push(M.outerHTML):M.nodeType===Node.TEXT_NODE&&D.push(M.textContent||"")})),D.join("")}getFirstOption(){return this.querySelector("nile-option")}setCurrentOption(M){this.getAllOptions().forEach((M=>{M.current=!1,M.tabIndex=-1})),M&&(this.currentOption=M,M.current=!0,M.tabIndex=0,M.focus())}setSelectedOptions(M){const N=this.getAllOptions(),i=Array.isArray(M)?M:[M];N.forEach((M=>M.selected=!1)),i.length&&i.forEach((M=>M.selected=!0)),this.selectionChanged()}toggleOptionSelection(M,N){M.selected=!0===N||!1===N?N:!M.selected,this.selectionChanged()}selectionChanged(){if(this.selectedOptions=this.getAllOptions().filter((M=>M.selected)),this.multiple){if(this.value=this.selectedOptions.map((M=>M.value)),this.placeholder&&0===this.value.length?this.displayLabel="":this.displayLabel=this.selectedOptions.length+" selected",0===this.selectedOptions.length){this.showSelected=!1;this.getAllOptions().forEach((M=>{M.selected||(M.hidden=this.showSelected)})),this.requestUpdate()}}else this.value=this.selectedOptions[0]?.value??this.value,this.displayLabel=this.selectedOptions[0]?.getTextLabel()?this.selectedOptions[0].getTextLabel():this.value??"";this.updateComplete.then((()=>{this.formControlController.updateValidity()})),this.calculateTotalWidthOfTags()}handleSearchFocus(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}handleSearchBlur(){document.addEventListener("keydown",this.handleDocumentKeyDown)}handleSearchChange(M){this.searchValue=M.detail.value,0===this.filterOptions(this.searchValue).length?this.showNoResults=!0:this.showNoResults=!1}filterOptions(M){const N=this.getAllOptions(),i=M.toLowerCase();let D=[];return N.forEach((M=>{const N=M.getTextLabel().toLowerCase(),j=(M.value||"").toLowerCase();N.includes(i)||j.includes(i)?(M.hidden=!1,D.push(M)):M.hidden=!0})),D}handleInvalid(M){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(M)}handleDisabledChange(){this.disabled&&(this.open=!1,this.handleOpenChange())}handleValueChange(){const M=this.getAllOptions(),N=Array.isArray(this.value)?this.value:[this.value];this.setSelectedOptions(M.filter((M=>N.includes(M.value))))}async handleOpenChange(){if(this.open&&!this.disabled){this.setCurrentOption(this.selectedOptions[0]||this.getFirstOption()),this.emit("nile-show",{value:this.value,name:this.name}),this.addOpenListeners(),await ti(this),this.listbox.hidden=!1,this.popup.active=!0,requestAnimationFrame((()=>{this.setCurrentOption(this.currentOption)}));const{keyframes:M,options:N}=ci(this,"select.show",{dir:"ltr"});await Ii(this.popup.popup,M,N),this.currentOption&&Si(this.currentOption,this.listbox,"vertical","auto"),this.emit("nile-after-show",{value:this.value,name:this.name})}else{this.emit("nile-hide",{value:this.value,name:this.name}),this.removeOpenListeners(),await ti(this);const{keyframes:M,options:N}=ci(this,"select.hide",{dir:"ltr"});await Ii(this.popup.popup,M,N),this.listbox.hidden=!0,this.popup.active=!1,this.emit("nile-after-hide",{value:this.value,name:this.name})}}async show(){if(!this.open&&!this.disabled)return this.open=!0,ei(this,"nile-after-show");this.open=!1}async hide(){if(this.open&&!this.disabled)return this.open=!1,ei(this,"nile-after-hide");this.open=!1}checkValidity(){return this.valueInput.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.valueInput.reportValidity()}setCustomValidity(M){this.valueInput.setCustomValidity(M),this.formControlController.updateValidity()}focus(M){this.displayInput.focus(M)}blur(){this.displayInput.blur()}onInputChange(M){M.stopPropagation()}calculateWidthOfSelectTagsDiv(){if(this.shadowRoot){const M=this.shadowRoot.querySelector("div.select__tags");if(M instanceof HTMLElement){return M.offsetWidth-70}}}calculateTotalWidthOfTags(){this.maxOptionsVisible!==1/0&&(this.oldMaxOptionsVisible=this.maxOptionsVisible),this.maxOptionsVisible=1/0,setTimeout((()=>{let M=[];if(this.shadowRoot){this.shadowRoot.querySelectorAll("nile-tag").forEach((N=>{N instanceof HTMLElement&&M.push(N.offsetWidth)}))}if(this.value.length!==M.length)return;const N=this.calculateWidthOfSelectTagsDiv();if(!N)return;let i=0,D=0;for(let j=0;j<M.length;j++)if(i+=M[j],i>N){D=j;break}this.maxOptionsVisible=D}),1)}render(){const M=this.hasSlotController.test("label");this.hasSlotController.test("help-text");const N=this.hasSlotController.test("label-suffix"),i=!!this.label||!!M,D=this.clearable&&!this.disabled&&this.value.length>0,j=this.placeholder&&0===this.value.length,I=this.searchValue||"",g=!!this.helpText,u=!!this.errorMessage;return V`
       <div
         part="form-control"
         class=${nM({"form-control":!0,"form-control--small":"small"===this.size,"form-control--medium":"medium"===this.size,"form-control--large":"large"===this.size,"form-control--has-label":i,"form-control--has-help-text":g})}
@@ -2965,8 +2970,9 @@ const bM=Symbol.for(""),ZM=M=>{if((null==M?void 0:M.r)===bM)return null==M?void
 
               ${this.multiple?V`
                     <div part="tags" class="select__tags">
-                      ${this.selectedOptions.map(((M,N)=>N<this.maxOptionsVisible||this.maxOptionsVisible<=0?V`
+                      ${this.selectedOptions.map(((M,N)=>{if(N<this.maxOptionsVisible||this.maxOptionsVisible<=0){const i={select__invisible:N+1>this.oldMaxOptionsVisible&&this.maxOptionsVisible===1/0};return V`
                             <nile-tag
+                              class=${nM(i)}
                               part="tag"
                               exportparts="
                                   base:tag__base,
@@ -2984,11 +2990,11 @@ const bM=Symbol.for(""),ZM=M=>{if((null==M?void 0:M.r)===bM)return null==M?void
                                   >`:""}
                               ${M.getTextLabel()}
                             </nile-tag>
-                          `:N===this.maxOptionsVisible?V`
+                          `}return N===this.maxOptionsVisible?V`
                             <span class="select__tags-count"
                               >+${this.selectedOptions.length-N} More
                             </span>
-                          `:null))}
+                          `:null}))}
                     </div>
                   `:""}
 
@@ -3109,7 +3115,7 @@ const bM=Symbol.for(""),ZM=M=>{if((null==M?void 0:M.r)===bM)return null==M?void
               >
             `:""}
       </div>
-    `}},M.NileSelect.styles=li,N([cM(".select")],M.NileSelect.prototype,"popup",void 0),N([cM(".select__combobox")],M.NileSelect.prototype,"combobox",void 0),N([cM(".select__display-input")],M.NileSelect.prototype,"displayInput",void 0),N([cM(".select__value-input")],M.NileSelect.prototype,"valueInput",void 0),N([cM(".select__listbox")],M.NileSelect.prototype,"listbox",void 0),N([zM()],M.NileSelect.prototype,"hasFocus",void 0),N([zM()],M.NileSelect.prototype,"displayLabel",void 0),N([zM()],M.NileSelect.prototype,"currentOption",void 0),N([zM()],M.NileSelect.prototype,"selectedOptions",void 0),N([zM()],M.NileSelect.prototype,"oldValue",void 0),N([LM()],M.NileSelect.prototype,"name",void 0),N([LM({converter:{fromAttribute:M=>M.split(" "),toAttribute:M=>M.join(" ")}})],M.NileSelect.prototype,"value",void 0),N([FM()],M.NileSelect.prototype,"defaultValue",void 0),N([LM()],M.NileSelect.prototype,"size",void 0),N([LM()],M.NileSelect.prototype,"placeholder",void 0),N([zM()],M.NileSelect.prototype,"searchValue",void 0),N([LM({type:Boolean,reflect:!0})],M.NileSelect.prototype,"searchEnabled",void 0),N([LM({type:Boolean,reflect:!0})],M.NileSelect.prototype,"optionsLoading",void 0),N([LM({type:Boolean,reflect:!0})],M.NileSelect.prototype,"multiple",void 0),N([LM({attribute:"help-text"})],M.NileSelect.prototype,"helpText",void 0),N([LM({attribute:"error-message"})],M.NileSelect.prototype,"errorMessage",void 0),N([LM({type:Boolean})],M.NileSelect.prototype,"warning",void 0),N([LM({type:Boolean})],M.NileSelect.prototype,"error",void 0),N([LM({type:Boolean})],M.NileSelect.prototype,"success",void 0),N([LM({attribute:"max-options-visible",type:Number})],M.NileSelect.prototype,"maxOptionsVisible",void 0),N([LM({type:Boolean,reflect:!0})],M.NileSelect.prototype,"disabled",void 0),N([LM({type:Boolean})],M.NileSelect.prototype,"clearable",void 0),N([LM({type:Boolean,reflect:!0})],M.NileSelect.prototype,"open",void 0),N([LM({type:Boolean})],M.NileSelect.prototype,"hoist",void 0),N([LM({type:Boolean,reflect:!0})],M.NileSelect.prototype,"filled",void 0),N([LM({type:Boolean,reflect:!0})],M.NileSelect.prototype,"pill",void 0),N([LM()],M.NileSelect.prototype,"label",void 0),N([LM({reflect:!0})],M.NileSelect.prototype,"placement",void 0),N([LM({reflect:!0})],M.NileSelect.prototype,"form",void 0),N([LM({type:Boolean,reflect:!0})],M.NileSelect.prototype,"required",void 0),N([LM({type:Boolean})],M.NileSelect.prototype,"showSelected",void 0),N([LM({type:Boolean})],M.NileSelect.prototype,"showNoResults",void 0),N([LM({type:String})],M.NileSelect.prototype,"noResultsMessage",void 0),N([vM("disabled",{waitUntilFirstUpdate:!0})],M.NileSelect.prototype,"handleDisabledChange",null),N([vM("value",{waitUntilFirstUpdate:!0})],M.NileSelect.prototype,"handleValueChange",null),N([vM("open",{waitUntilFirstUpdate:!0})],M.NileSelect.prototype,"handleOpenChange",null),M.NileSelect=N([uM("nile-select")],M.NileSelect),Ai("select.show",{keyframes:[{opacity:0,scale:.9},{opacity:1,scale:1}],options:{duration:100,easing:"ease"}}),Ai("select.hide",{keyframes:[{opacity:1,scale:1},{opacity:0,scale:.9}],options:{duration:100,easing:"ease"}});const wi=u`
+    `}},M.NileSelect.styles=li,N([cM(".select")],M.NileSelect.prototype,"popup",void 0),N([cM(".select__combobox")],M.NileSelect.prototype,"combobox",void 0),N([cM(".select__display-input")],M.NileSelect.prototype,"displayInput",void 0),N([cM(".select__value-input")],M.NileSelect.prototype,"valueInput",void 0),N([cM(".select__listbox")],M.NileSelect.prototype,"listbox",void 0),N([zM()],M.NileSelect.prototype,"hasFocus",void 0),N([zM()],M.NileSelect.prototype,"displayLabel",void 0),N([zM()],M.NileSelect.prototype,"currentOption",void 0),N([zM()],M.NileSelect.prototype,"selectedOptions",void 0),N([zM()],M.NileSelect.prototype,"oldValue",void 0),N([LM()],M.NileSelect.prototype,"name",void 0),N([LM({converter:{fromAttribute:M=>M.split(" "),toAttribute:M=>M.join(" ")}})],M.NileSelect.prototype,"value",void 0),N([FM()],M.NileSelect.prototype,"defaultValue",void 0),N([LM()],M.NileSelect.prototype,"size",void 0),N([LM()],M.NileSelect.prototype,"placeholder",void 0),N([zM()],M.NileSelect.prototype,"searchValue",void 0),N([LM({type:Boolean,reflect:!0})],M.NileSelect.prototype,"searchEnabled",void 0),N([LM({type:Boolean,reflect:!0})],M.NileSelect.prototype,"optionsLoading",void 0),N([LM({type:Boolean,reflect:!0})],M.NileSelect.prototype,"multiple",void 0),N([LM({attribute:"help-text"})],M.NileSelect.prototype,"helpText",void 0),N([LM({attribute:"error-message"})],M.NileSelect.prototype,"errorMessage",void 0),N([LM({type:Boolean})],M.NileSelect.prototype,"warning",void 0),N([LM({type:Boolean})],M.NileSelect.prototype,"error",void 0),N([LM({type:Boolean})],M.NileSelect.prototype,"success",void 0),N([LM({attribute:"max-options-visible",type:Number})],M.NileSelect.prototype,"maxOptionsVisible",void 0),N([LM({type:Boolean,reflect:!0})],M.NileSelect.prototype,"disabled",void 0),N([LM({type:Boolean})],M.NileSelect.prototype,"clearable",void 0),N([LM({type:Boolean,reflect:!0})],M.NileSelect.prototype,"open",void 0),N([LM({type:Boolean})],M.NileSelect.prototype,"hoist",void 0),N([LM({type:Boolean,reflect:!0})],M.NileSelect.prototype,"filled",void 0),N([LM({type:Boolean,reflect:!0})],M.NileSelect.prototype,"pill",void 0),N([LM()],M.NileSelect.prototype,"label",void 0),N([LM({reflect:!0})],M.NileSelect.prototype,"placement",void 0),N([LM({reflect:!0})],M.NileSelect.prototype,"form",void 0),N([LM({type:Boolean,reflect:!0})],M.NileSelect.prototype,"required",void 0),N([LM({type:Boolean})],M.NileSelect.prototype,"showSelected",void 0),N([zM()],M.NileSelect.prototype,"oldMaxOptionsVisible",void 0),N([LM({type:Boolean})],M.NileSelect.prototype,"showNoResults",void 0),N([LM({type:String})],M.NileSelect.prototype,"noResultsMessage",void 0),N([vM("disabled",{waitUntilFirstUpdate:!0})],M.NileSelect.prototype,"handleDisabledChange",null),N([vM("value",{waitUntilFirstUpdate:!0})],M.NileSelect.prototype,"handleValueChange",null),N([vM("open",{waitUntilFirstUpdate:!0})],M.NileSelect.prototype,"handleOpenChange",null),M.NileSelect=N([uM("nile-select")],M.NileSelect),Ai("select.show",{keyframes:[{opacity:0,scale:.9},{opacity:1,scale:1}],options:{duration:100,easing:"ease"}}),Ai("select.hide",{keyframes:[{opacity:1,scale:1},{opacity:0,scale:.9}],options:{duration:100,easing:"ease"}});const wi=u`
   :host {
     display: block;
     user-select: none;