@aquera/nile-elements 0.0.27 → 0.0.29

package/dist/index.iife.js

@@ -2657,7 +2657,7 @@ const bM=Symbol.for(""),ZM=M=>{if((null==M?void 0:M.r)===bM)return null==M?void
     max-height: var(--auto-size-available-height);
   }
 
-  .select__options {
+  .select__options__search-enabled {
     padding-top: 10px;
   }
 
@@ -2741,6 +2741,10 @@ const bM=Symbol.for(""),ZM=M=>{if((null==M?void 0:M.r)===bM)return null==M?void
   .select__invisible{
     opacity: 0;
   }
+
+  .select__prefix--from-options {
+    margin-inline-end: 12px;
+  }
 `,oi=u`
   :host {
     display: inline-block;
@@ -2903,7 +2907,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.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.map(String).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 this.multiple&&this.oldValue?.length>0&&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`
+    `}},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.map(String).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 this.multiple&&this.oldValue?.length>0&&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,t=this.selectedOptions[0]?this.getOptionPrefix(this.selectedOptions[0]):"";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})}
@@ -2939,11 +2943,14 @@ const bM=Symbol.for(""),ZM=M=>{if((null==M?void 0:M.r)===bM)return null==M?void
               @keydown=${this.handleComboboxKeyDown}
               @mousedown=${this.handleComboboxMouseDown}
             >
-              <slot
-                part="prefix"
-                name="prefix"
-                class=${nM({select__prefix:!0,multiple:this.multiple})}
-              ></slot>
+
+              ${t&&!this.multiple?V`<div class="select__prefix--from-options">
+                    ${EM(t)}
+                  </div>`:V`<slot
+                    part="prefix"
+                    name="prefix"
+                    class=${nM({select__prefix:!0,multiple:this.multiple})}
+                  ></slot>`}
 
               <input
                 part="display-input"
@@ -3074,7 +3081,9 @@ const bM=Symbol.for(""),ZM=M=>{if((null==M?void 0:M.r)===bM)return null==M?void
                       <nile-icon name="search" slot="suffix"> </nile-icon>
                     </nile-input>
                   </div>`:""}
-              <div class="select__options">
+              <div
+                class="select__options ${this.searchEnabled?"select__options__search-enabled":""}"
+              >
                 ${this.showNoResults?V`
                       <div class="select__no-results">
                         ${this.noResultsMessage}
@@ -3950,7 +3959,7 @@ const bM=Symbol.for(""),ZM=M=>{if((null==M?void 0:M.r)===bM)return null==M?void
   }
 
   .nile-error-message__error {
-    color: var(--nile-colors-red-500);
+    color: var(--nile-colors-red-700);
     word-break: break-word;
   }
 
@@ -4014,7 +4023,7 @@ const bM=Symbol.for(""),ZM=M=>{if((null==M?void 0:M.r)===bM)return null==M?void
           size="14"
           class="nile-error-message__icon"
           part="icon"
-          color="#E5434D"
+          color="#A4121C"
         ></nile-icon>
         <span class="nile-error-message__error">${this.errorMessage}</span>
 

package/dist/nile-error-message/nile-error-message.cjs.js

@@ -1,2 +1,2 @@
-System.register(["tslib","../index-cd83c5c8.cjs.js","lit/decorators.js","./nile-error-message.css.cjs.js","../property-0f6a51ec.cjs.js"],function(_export,_context){"use strict";var s,e,r,i,t,o,_templateObject,_templateObject2,_templateObject3,n;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,_toPropertyKey(descriptor.key),descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _toPropertyKey(arg){var key=_toPrimitive(arg,"string");return typeof key==="symbol"?key:String(key);}function _toPrimitive(input,hint){if(typeof input!=="object"||input===null)return input;var prim=input[Symbol.toPrimitive];if(prim!==undefined){var res=prim.call(input,hint||"default");if(typeof res!=="object")return res;throw new TypeError("@@toPrimitive must return a primitive value.");}return(hint==="string"?String:Number)(input);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(typeof call==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}return{setters:[function(_tslib){s=_tslib.__decorate;},function(_index001CjsJs){e=_index001CjsJs.s;r=_index001CjsJs.x;},function(_litDecoratorsJs){i=_litDecoratorsJs.customElement;},function(_nileErrorMessageCssCjsJs){t=_nileErrorMessageCssCjsJs.s;},function(_property002CjsJs){o=_property002CjsJs.n;}],execute:function(){_export("N",n=/*#__PURE__*/function(_e){_inherits(n,_e);var _super=_createSuper(n);function n(){var _this;_classCallCheck(this,n);_this=_super.apply(this,arguments),_this.errorMessage="",_this.isExpanded=!1,_this.MAX_LENGTH=100;return _this;}_createClass(n,[{key:"getTruncatedResponse",value:function getTruncatedResponse(){return this.errorResponse.length>this.MAX_LENGTH?"".concat(this.errorResponse.substring(0,this.MAX_LENGTH),"..."):this.errorResponse;}},{key:"toggleExpanded",value:function toggleExpanded(){this.isExpanded=!this.isExpanded;}},{key:"render",value:function render(){return r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div class=\"nile-error-message\" part=\"base\">\n        <nile-icon\n          name=\"info2\"\n          size=\"14\"\n          class=\"nile-error-message__icon\"\n          part=\"icon\"\n          color=\"#E5434D\"\n        ></nile-icon>\n        <span class=\"nile-error-message__error\">","</span>\n\n\n        ","\n\n        <div\n          class=\"nile-error-message__response-expanded ","\"\n        >\n          ","\n        </div>\n      </div>\n    "])),this.errorMessage,this.errorResponse?r(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n            <div class=\"nile-error-message__response\">\n            ","\n            ","\n            </div>\n            "])),this.errorResponse,this.errorResponseLong?r(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n              <span\n              class=\"nile-error-message__more-button\"\n              @click=","\n              >","</span\n            >"])),this.toggleExpanded,this.isExpanded?"View Less":"View More"):""):"",this.isExpanded?"expanded":"collapsed",this.errorResponseLong);}}],[{key:"styles",get:function get(){return[t];}}]);return n;}(e));s([o({type:String})],n.prototype,"errorMessage",void 0),s([o({type:String})],n.prototype,"errorResponse",void 0),s([o({type:String})],n.prototype,"errorResponseLong",void 0),s([o({type:Boolean})],n.prototype,"isExpanded",void 0),_export("N",n=s([i("nile-error-message")],n));}};});
+System.register(["tslib","../index-cd83c5c8.cjs.js","lit/decorators.js","./nile-error-message.css.cjs.js","../property-0f6a51ec.cjs.js"],function(_export,_context){"use strict";var s,e,r,i,t,o,_templateObject,_templateObject2,_templateObject3,n;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,_toPropertyKey(descriptor.key),descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _toPropertyKey(arg){var key=_toPrimitive(arg,"string");return typeof key==="symbol"?key:String(key);}function _toPrimitive(input,hint){if(typeof input!=="object"||input===null)return input;var prim=input[Symbol.toPrimitive];if(prim!==undefined){var res=prim.call(input,hint||"default");if(typeof res!=="object")return res;throw new TypeError("@@toPrimitive must return a primitive value.");}return(hint==="string"?String:Number)(input);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(typeof call==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}return{setters:[function(_tslib){s=_tslib.__decorate;},function(_index001CjsJs){e=_index001CjsJs.s;r=_index001CjsJs.x;},function(_litDecoratorsJs){i=_litDecoratorsJs.customElement;},function(_nileErrorMessageCssCjsJs){t=_nileErrorMessageCssCjsJs.s;},function(_property002CjsJs){o=_property002CjsJs.n;}],execute:function(){_export("N",n=/*#__PURE__*/function(_e){_inherits(n,_e);var _super=_createSuper(n);function n(){var _this;_classCallCheck(this,n);_this=_super.apply(this,arguments),_this.errorMessage="",_this.isExpanded=!1,_this.MAX_LENGTH=100;return _this;}_createClass(n,[{key:"getTruncatedResponse",value:function getTruncatedResponse(){return this.errorResponse.length>this.MAX_LENGTH?"".concat(this.errorResponse.substring(0,this.MAX_LENGTH),"..."):this.errorResponse;}},{key:"toggleExpanded",value:function toggleExpanded(){this.isExpanded=!this.isExpanded;}},{key:"render",value:function render(){return r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div class=\"nile-error-message\" part=\"base\">\n        <nile-icon\n          name=\"info2\"\n          size=\"14\"\n          class=\"nile-error-message__icon\"\n          part=\"icon\"\n          color=\"#A4121C\"\n        ></nile-icon>\n        <span class=\"nile-error-message__error\">","</span>\n\n\n        ","\n\n        <div\n          class=\"nile-error-message__response-expanded ","\"\n        >\n          ","\n        </div>\n      </div>\n    "])),this.errorMessage,this.errorResponse?r(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n            <div class=\"nile-error-message__response\">\n            ","\n            ","\n            </div>\n            "])),this.errorResponse,this.errorResponseLong?r(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n              <span\n              class=\"nile-error-message__more-button\"\n              @click=","\n              >","</span\n            >"])),this.toggleExpanded,this.isExpanded?"View Less":"View More"):""):"",this.isExpanded?"expanded":"collapsed",this.errorResponseLong);}}],[{key:"styles",get:function get(){return[t];}}]);return n;}(e));s([o({type:String})],n.prototype,"errorMessage",void 0),s([o({type:String})],n.prototype,"errorResponse",void 0),s([o({type:String})],n.prototype,"errorResponseLong",void 0),s([o({type:Boolean})],n.prototype,"isExpanded",void 0),_export("N",n=s([i("nile-error-message")],n));}};});
 //# sourceMappingURL=nile-error-message.cjs.js.map

package/dist/nile-error-message/nile-error-message.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-error-message.cjs.js","sources":["../../../src/nile-error-message/nile-error-message.ts"],"sourcesContent":["import {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-error-message.css';\n\n/**\n * A custom error message component that displays error information to the user.\n * @customElement nile-error-message\n */\n@customElement('nile-error-message')\nexport class NileErrorMessage extends LitElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  // Represents the error message to be displayed to the user.\n  @property({ type: String })\n  errorMessage: string = '';\n\n  // Represents additional details about the error, like stack trace or other info.\n  @property({ type: String })\n  errorResponse: string;\n\n  // Extended error information\n  @property({ type: String })\n  errorResponseLong: string;\n\n  @property({ type: Boolean })\n  isExpanded: boolean = false;\n\n  // The maximum length before truncation.\n  private readonly MAX_LENGTH: number = 100;\n\n  /**\n   * Get a truncated version of the errorResponse if it's too long.\n   * @returns {string}\n   */\n  getTruncatedResponse(): string {\n    if (this.errorResponse.length > this.MAX_LENGTH) {\n      return `${this.errorResponse.substring(0, this.MAX_LENGTH)}...`;\n    }\n    return this.errorResponse;\n  }\n\n  /**\n   * Toggle the expanded state of the error response.\n   */\n  toggleExpanded() {\n    this.isExpanded = !this.isExpanded;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"nile-error-message\" part=\"base\">\n        <nile-icon\n          name=\"info2\"\n          size=\"14\"\n          class=\"nile-error-message__icon\"\n          part=\"icon\"\n          color=\"#E5434D\"\n        ></nile-icon>\n        <span class=\"nile-error-message__error\">${this.errorMessage}</span>\n\n\n        ${this.errorResponse\n        ? html`\n            <div class=\"nile-error-message__response\">\n            ${this.errorResponse}\n            ${this.errorResponseLong\n                ? html`\n              <span\n              class=\"nile-error-message__more-button\"\n              @click=${this.toggleExpanded}\n              >${this.isExpanded ? 'View Less' : 'View More'}</span\n            >`:``}\n            </div>\n            `\n        : ``}\n\n        <div\n          class=\"nile-error-message__response-expanded ${this.isExpanded\n            ? 'expanded'\n            : 'collapsed'}\"\n        >\n          ${this.errorResponseLong}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-error-message': NileErrorMessage;\n  }\n}\n"],"names":["NileErrorMessage","n","constructor","this","errorMessage","isExpanded","MAX_LENGTH","_this","_createClass","key","value","getTruncatedResponse","errorResponse","length","concat","substring","toggleExpanded","render","html","_templateObject","_taggedTemplateLiteral","_templateObject2","errorResponseLong","_templateObject3","__decorate","get","styles","LitElement","property","type","String","prototype","Boolean","_export","customElement"],"mappings":"utHAeaA,CAAAA,uBAAAA,EAAAA,EAAAA,SAAAA,CAAAA,CAAAA,CAAAA,EAAAA,MAAAA,MAAAA,CAAAA,YAAAA,CAAAA,CAAAA,EAAN,SAAAC,EAAA,CAAAC,KAAAA,KAAAA,CAAAA,eAAAA,MAAAA,CAAAA,qCAOLC,KAAAA,CAAYC,YAAAA,CAAW,EAWvBD,CAAAA,KAAAA,CAAUE,UAAY,CAAA,CAAA,CAAA,CAGLF,KAAAA,CAAUG,UAAAA,CAAW,GA0DvC,QAAAC,KAAA,EA9EQC,YAAA,CAAAP,CAAA,GAAAQ,GAAA,wBAAAC,KAAA,CA0BP,SAAAC,qBAAA,CACE,CAAA,MAAIR,KAAKS,CAAAA,aAAAA,CAAcC,MAASV,CAAAA,IAAAA,CAAKG,UAC5B,IAAAQ,MAAA,CAAGX,IAAKS,CAAAA,aAAAA,CAAcG,SAAU,CAAA,CAAA,CAAGZ,IAAKG,CAAAA,UAAAA,CAAAA,QAE1CH,IAAKS,CAAAA,aACb,EAKD,GAAAH,GAAA,kBAAAC,KAAA,UAAAM,eAAA,CACEb,CAAAA,IAAAA,CAAKE,UAAcF,CAAAA,CAAAA,IAAAA,CAAKE,UACzB,EAEM,GAAAI,GAAA,UAAAC,KAAA,UAAAO,OAAA,CAAAA,CACL,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,4dASmCjB,IAAKC,CAAAA,YAAAA,CAG7CD,IAAAA,CAAKS,cACLM,CAAI,CAAAG,gBAAA,GAAAA,gBAAA,CAAAD,sBAAA,sIAEAjB,IAAKS,CAAAA,aAAAA,CACLT,IAAAA,CAAKmB,kBACDJ,CAAI,CAAAK,gBAAA,GAAAA,gBAAA,CAAAH,sBAAA,yJAGCjB,IAAKa,CAAAA,cAAAA,CACXb,IAAAA,CAAKE,WAAa,WAAc,CAAA,WAAA,EAClC,EAAA,EAGL,EAAA,CAG+CF,IAAAA,CAAKE,WAChD,UACA,CAAA,WAAA,CAEFF,IAAKmB,CAAAA,iBAAAA,EAId,CAvEDE,KAAAA,GAAAA,UAAAA,GAAAA,CANO,SAAAC,IAAA,CACL,CAAA,MAAO,CAACC,CAAAA,CACT,EAwBD,WAAAzB,CAAA,GA3BoC0B,CAAAA,GAOpCH,CAAAA,CAAA,CADCI,CAAS,CAAA,CAAEC,KAAMC,MACQ9B,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAA+B,UAAA,cAAA,CAAA,IAAA,EAAA,CAAA,CAI1BP,EAAA,CADCI,CAAAA,CAAS,CAAEC,IAAMC,CAAAA,MAAAA,CAAAA,CAAAA,CAAAA,CACI9B,EAAA+B,SAAA,CAAA,eAAA,CAAA,IAAA,IAItBP,CAAA,CAAA,CADCI,EAAS,CAAEC,IAAAA,CAAMC,UACQ9B,CAAA+B,CAAAA,SAAAA,CAAA,wBAAA,EAG1BP,CAAAA,CAAAA,CAAAA,CAAA,CADCI,CAAS,CAAA,CAAEC,KAAMG,OACUhC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAA+B,UAAA,YAAA,CAAA,IAAA,EAAA,CAAA,CAAAE,OAAA,KAlBjBjC,EAAgBwB,CAAA,CAAA,CAD5BU,CAAc,CAAA,oBAAA,CAAA,CAAA,CACFlC"}
+{"version":3,"file":"nile-error-message.cjs.js","sources":["../../../src/nile-error-message/nile-error-message.ts"],"sourcesContent":["import {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-error-message.css';\n\n/**\n * A custom error message component that displays error information to the user.\n * @customElement nile-error-message\n */\n@customElement('nile-error-message')\nexport class NileErrorMessage extends LitElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  // Represents the error message to be displayed to the user.\n  @property({ type: String })\n  errorMessage: string = '';\n\n  // Represents additional details about the error, like stack trace or other info.\n  @property({ type: String })\n  errorResponse: string;\n\n  // Extended error information\n  @property({ type: String })\n  errorResponseLong: string;\n\n  @property({ type: Boolean })\n  isExpanded: boolean = false;\n\n  // The maximum length before truncation.\n  private readonly MAX_LENGTH: number = 100;\n\n  /**\n   * Get a truncated version of the errorResponse if it's too long.\n   * @returns {string}\n   */\n  getTruncatedResponse(): string {\n    if (this.errorResponse.length > this.MAX_LENGTH) {\n      return `${this.errorResponse.substring(0, this.MAX_LENGTH)}...`;\n    }\n    return this.errorResponse;\n  }\n\n  /**\n   * Toggle the expanded state of the error response.\n   */\n  toggleExpanded() {\n    this.isExpanded = !this.isExpanded;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"nile-error-message\" part=\"base\">\n        <nile-icon\n          name=\"info2\"\n          size=\"14\"\n          class=\"nile-error-message__icon\"\n          part=\"icon\"\n          color=\"#A4121C\"\n        ></nile-icon>\n        <span class=\"nile-error-message__error\">${this.errorMessage}</span>\n\n\n        ${this.errorResponse\n        ? html`\n            <div class=\"nile-error-message__response\">\n            ${this.errorResponse}\n            ${this.errorResponseLong\n                ? html`\n              <span\n              class=\"nile-error-message__more-button\"\n              @click=${this.toggleExpanded}\n              >${this.isExpanded ? 'View Less' : 'View More'}</span\n            >`:``}\n            </div>\n            `\n        : ``}\n\n        <div\n          class=\"nile-error-message__response-expanded ${this.isExpanded\n            ? 'expanded'\n            : 'collapsed'}\"\n        >\n          ${this.errorResponseLong}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-error-message': NileErrorMessage;\n  }\n}\n"],"names":["NileErrorMessage","n","constructor","this","errorMessage","isExpanded","MAX_LENGTH","_this","_createClass","key","value","getTruncatedResponse","errorResponse","length","concat","substring","toggleExpanded","render","html","_templateObject","_taggedTemplateLiteral","_templateObject2","errorResponseLong","_templateObject3","__decorate","get","styles","LitElement","property","type","String","prototype","Boolean","_export","customElement"],"mappings":"utHAeaA,CAAAA,uBAAAA,EAAAA,EAAAA,SAAAA,CAAAA,CAAAA,CAAAA,EAAAA,MAAAA,MAAAA,CAAAA,YAAAA,CAAAA,CAAAA,EAAN,SAAAC,EAAA,CAAAC,KAAAA,KAAAA,CAAAA,eAAAA,MAAAA,CAAAA,qCAOLC,KAAAA,CAAYC,YAAAA,CAAW,EAWvBD,CAAAA,KAAAA,CAAUE,UAAY,CAAA,CAAA,CAAA,CAGLF,KAAAA,CAAUG,UAAAA,CAAW,GA0DvC,QAAAC,KAAA,EA9EQC,YAAA,CAAAP,CAAA,GAAAQ,GAAA,wBAAAC,KAAA,CA0BP,SAAAC,qBAAA,CACE,CAAA,MAAIR,KAAKS,CAAAA,aAAAA,CAAcC,MAASV,CAAAA,IAAAA,CAAKG,UAC5B,IAAAQ,MAAA,CAAGX,IAAKS,CAAAA,aAAAA,CAAcG,SAAU,CAAA,CAAA,CAAGZ,IAAKG,CAAAA,UAAAA,CAAAA,QAE1CH,IAAKS,CAAAA,aACb,EAKD,GAAAH,GAAA,kBAAAC,KAAA,UAAAM,eAAA,CACEb,CAAAA,IAAAA,CAAKE,UAAcF,CAAAA,CAAAA,IAAAA,CAAKE,UACzB,EAEM,GAAAI,GAAA,UAAAC,KAAA,UAAAO,OAAA,CAAAA,CACL,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,4dASmCjB,IAAKC,CAAAA,YAAAA,CAG7CD,IAAAA,CAAKS,cACLM,CAAI,CAAAG,gBAAA,GAAAA,gBAAA,CAAAD,sBAAA,sIAEAjB,IAAKS,CAAAA,aAAAA,CACLT,IAAAA,CAAKmB,kBACDJ,CAAI,CAAAK,gBAAA,GAAAA,gBAAA,CAAAH,sBAAA,yJAGCjB,IAAKa,CAAAA,cAAAA,CACXb,IAAAA,CAAKE,WAAa,WAAc,CAAA,WAAA,EAClC,EAAA,EAGL,EAAA,CAG+CF,IAAAA,CAAKE,WAChD,UACA,CAAA,WAAA,CAEFF,IAAKmB,CAAAA,iBAAAA,EAId,CAvEDE,KAAAA,GAAAA,UAAAA,GAAAA,CANO,SAAAC,IAAA,CACL,CAAA,MAAO,CAACC,CAAAA,CACT,EAwBD,WAAAzB,CAAA,GA3BoC0B,CAAAA,GAOpCH,CAAAA,CAAA,CADCI,CAAS,CAAA,CAAEC,KAAMC,MACQ9B,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAA+B,UAAA,cAAA,CAAA,IAAA,EAAA,CAAA,CAI1BP,EAAA,CADCI,CAAAA,CAAS,CAAEC,IAAMC,CAAAA,MAAAA,CAAAA,CAAAA,CAAAA,CACI9B,EAAA+B,SAAA,CAAA,eAAA,CAAA,IAAA,IAItBP,CAAA,CAAA,CADCI,EAAS,CAAEC,IAAAA,CAAMC,UACQ9B,CAAA+B,CAAAA,SAAAA,CAAA,wBAAA,EAG1BP,CAAAA,CAAAA,CAAAA,CAAA,CADCI,CAAS,CAAA,CAAEC,KAAMG,OACUhC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAA+B,UAAA,YAAA,CAAA,IAAA,EAAA,CAAA,CAAAE,OAAA,KAlBjBjC,EAAgBwB,CAAA,CAAA,CAD5BU,CAAc,CAAA,oBAAA,CAAA,CAAA,CACFlC"}

package/dist/nile-error-message/nile-error-message.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["../index-cd83c5c8.cjs.js"],function(_export,_context){"use strict";var e,_templateObject,r;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){e=_index001CjsJs.i;}],execute:function(){_export("s",r=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n  }\n\n  .nile-error-message {\n    width: 100%;\n    word-break: break-all;\n    font-size: var(--nile-font-size-small);\n    letter-spacing: 0.2px;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-font-size-small);\n  }\n\n  .nile-error-message__error {\n    color: var(--nile-colors-red-500);\n    word-break: break-word;\n  }\n\n  .nile-error-message__response {\n    color: var(--nile-colors-dark-500);\n    margin-top:6px;\n  }\n\n  .nile-error-message__icon {\n    vertical-align: middle;\n    margin-right:2px;\n  }\n\n  .nile-error-message__more-button {\n    color: var(--nile-colors-primary-600);\n    cursor: pointer;\n    white-space: nowrap;\n  }\n\n  .nile-error-message__response-expanded {\n    height: auto;\n    border: 1px solid var(--nile-colors-red-500);\n    border-left: 6px solid var(--nile-colors-red-500);\n    border-radius: 4px;\n    margin-top: 12px;\n    padding: 12px;\n    background: var(--nile-colors-neutral-100);\n  }\n\n  .nile-error-message__response-expanded {\n    max-height: 100px;\n    overflow-y: auto;\n    border: 1px solid var(--nile-colors-red-500);\n    border-left: 6px solid var(--nile-colors-red-500);\n    border-radius: 4px;\n    margin-top: 12px;\n    padding: 12px;\n    background: var(--nile-colors-neutral-100);\n    transition: max-height 0.3s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  .nile-error-message__response-expanded.collapsed {\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0.3s ease-in-out;\n    visibility: hidden;\n    padding: 0 12px;\n  }\n\n  .nile-error-message__response-expanded.expanded {\n    max-height: 100px;\n    transition: max-height 0.3s ease-in-out;\n    visibility: visible;\n    padding: 12px;\n  }\n"]))));}};});
+System.register(["../index-cd83c5c8.cjs.js"],function(_export,_context){"use strict";var e,_templateObject,r;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){e=_index001CjsJs.i;}],execute:function(){_export("s",r=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n  }\n\n  .nile-error-message {\n    width: 100%;\n    word-break: break-all;\n    font-size: var(--nile-font-size-small);\n    letter-spacing: 0.2px;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-font-size-small);\n  }\n\n  .nile-error-message__error {\n    color: var(--nile-colors-red-700);\n    word-break: break-word;\n  }\n\n  .nile-error-message__response {\n    color: var(--nile-colors-dark-500);\n    margin-top:6px;\n  }\n\n  .nile-error-message__icon {\n    vertical-align: middle;\n    margin-right:2px;\n  }\n\n  .nile-error-message__more-button {\n    color: var(--nile-colors-primary-600);\n    cursor: pointer;\n    white-space: nowrap;\n  }\n\n  .nile-error-message__response-expanded {\n    height: auto;\n    border: 1px solid var(--nile-colors-red-500);\n    border-left: 6px solid var(--nile-colors-red-500);\n    border-radius: 4px;\n    margin-top: 12px;\n    padding: 12px;\n    background: var(--nile-colors-neutral-100);\n  }\n\n  .nile-error-message__response-expanded {\n    max-height: 100px;\n    overflow-y: auto;\n    border: 1px solid var(--nile-colors-red-500);\n    border-left: 6px solid var(--nile-colors-red-500);\n    border-radius: 4px;\n    margin-top: 12px;\n    padding: 12px;\n    background: var(--nile-colors-neutral-100);\n    transition: max-height 0.3s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  .nile-error-message__response-expanded.collapsed {\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0.3s ease-in-out;\n    visibility: hidden;\n    padding: 0 12px;\n  }\n\n  .nile-error-message__response-expanded.expanded {\n    max-height: 100px;\n    transition: max-height 0.3s ease-in-out;\n    visibility: visible;\n    padding: 12px;\n  }\n"]))));}};});
 //# sourceMappingURL=nile-error-message.css.cjs.js.map

package/dist/nile-error-message/nile-error-message.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-error-message.css.cjs.js","sources":["../../../src/nile-error-message/nile-error-message.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * ErrorMessage CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .nile-error-message {\n    width: 100%;\n    word-break: break-all;\n    font-size: var(--nile-font-size-small);\n    letter-spacing: 0.2px;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-font-size-small);\n  }\n\n  .nile-error-message__error {\n    color: var(--nile-colors-red-500);\n    word-break: break-word;\n  }\n\n  .nile-error-message__response {\n    color: var(--nile-colors-dark-500);\n    margin-top:6px;\n  }\n\n  .nile-error-message__icon {\n    vertical-align: middle;\n    margin-right:2px;\n  }\n\n  .nile-error-message__more-button {\n    color: var(--nile-colors-primary-600);\n    cursor: pointer;\n    white-space: nowrap;\n  }\n\n  .nile-error-message__response-expanded {\n    height: auto;\n    border: 1px solid var(--nile-colors-red-500);\n    border-left: 6px solid var(--nile-colors-red-500);\n    border-radius: 4px;\n    margin-top: 12px;\n    padding: 12px;\n    background: var(--nile-colors-neutral-100);\n  }\n\n  .nile-error-message__response-expanded {\n    max-height: 100px;\n    overflow-y: auto;\n    border: 1px solid var(--nile-colors-red-500);\n    border-left: 6px solid var(--nile-colors-red-500);\n    border-radius: 4px;\n    margin-top: 12px;\n    padding: 12px;\n    background: var(--nile-colors-neutral-100);\n    transition: max-height 0.3s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  .nile-error-message__response-expanded.collapsed {\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0.3s ease-in-out;\n    visibility: hidden;\n    padding: 0 12px;\n  }\n\n  .nile-error-message__response-expanded.expanded {\n    max-height: 100px;\n    transition: max-height 0.3s ease-in-out;\n    visibility: visible;\n    padding: 12px;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"gXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-error-message.css.cjs.js","sources":["../../../src/nile-error-message/nile-error-message.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * ErrorMessage CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .nile-error-message {\n    width: 100%;\n    word-break: break-all;\n    font-size: var(--nile-font-size-small);\n    letter-spacing: 0.2px;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-font-size-small);\n  }\n\n  .nile-error-message__error {\n    color: var(--nile-colors-red-700);\n    word-break: break-word;\n  }\n\n  .nile-error-message__response {\n    color: var(--nile-colors-dark-500);\n    margin-top:6px;\n  }\n\n  .nile-error-message__icon {\n    vertical-align: middle;\n    margin-right:2px;\n  }\n\n  .nile-error-message__more-button {\n    color: var(--nile-colors-primary-600);\n    cursor: pointer;\n    white-space: nowrap;\n  }\n\n  .nile-error-message__response-expanded {\n    height: auto;\n    border: 1px solid var(--nile-colors-red-500);\n    border-left: 6px solid var(--nile-colors-red-500);\n    border-radius: 4px;\n    margin-top: 12px;\n    padding: 12px;\n    background: var(--nile-colors-neutral-100);\n  }\n\n  .nile-error-message__response-expanded {\n    max-height: 100px;\n    overflow-y: auto;\n    border: 1px solid var(--nile-colors-red-500);\n    border-left: 6px solid var(--nile-colors-red-500);\n    border-radius: 4px;\n    margin-top: 12px;\n    padding: 12px;\n    background: var(--nile-colors-neutral-100);\n    transition: max-height 0.3s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  .nile-error-message__response-expanded.collapsed {\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0.3s ease-in-out;\n    visibility: hidden;\n    padding: 0 12px;\n  }\n\n  .nile-error-message__response-expanded.expanded {\n    max-height: 100px;\n    transition: max-height 0.3s ease-in-out;\n    visibility: visible;\n    padding: 12px;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"gXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-error-message/nile-error-message.css.esm.js

@@ -12,7 +12,7 @@ import{i as e}from"../index-cd2f9c12.esm.js";const r=e`
   }
 
   .nile-error-message__error {
-    color: var(--nile-colors-red-500);
+    color: var(--nile-colors-red-700);
     word-break: break-word;
   }
 

package/dist/nile-error-message/nile-error-message.esm.js

@@ -5,7 +5,7 @@ import{__decorate as e}from"tslib";import{s,x as r}from"../index-cd2f9c12.esm.js
           size="14"
           class="nile-error-message__icon"
           part="icon"
-          color="#E5434D"
+          color="#A4121C"
         ></nile-icon>
         <span class="nile-error-message__error">${this.errorMessage}</span>