@kubex/zinc 1.1.34 → 1.1.35

package/dist/custom-elements.json

@@ -39878,7 +39878,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.34",
+    "version": "1.1.35",
     "author": "",
     "license": "MIT"
   }

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kubex/zinc",
-  "version": "1.1.34",
+  "version": "1.1.35",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/dist/zn.min.js

@@ -1444,7 +1444,7 @@ import{a as _n,b as D1,c as nr,d as c,e as B}from"./chunks/zn.UBLZO6CI.js";var J
           <zn-icon slot="action" src="close" size="16"
                    @click=${r=>this.handleTagRemove(r,t)}></zn-icon>`}
       </zn-chip>
-    `;this.selectFirst=!1;this.distinct="";this.conditional="";this.maxResults=0;this.searchDebounce=300;this.searchParam="q";this.searchOnly=!1;this.handleDocumentFocusIn=t=>{let r=t.composedPath();this&&!r.includes(this)&&this.hide().then()};this.handleDocumentKeyDown=t=>{let r=t.target,n=r.closest(".select__clear")!==null,a=r.closest("zn-icon")!==null,s=r.closest(".select__expand-icon")!==null;if(!((n||a)&&!s)){if(t.key==="Escape"&&this.open&&this.freeText&&this._searchDisplayValue.trim()&&(this.clearSearch(),this.displayInput.value=""),(t.key==="Escape"||t.key==="Tab")&&this.open&&!this.closeWatcher&&(t.preventDefault(),t.stopPropagation(),this.hide().then(),this.displayInput.focus({preventScroll:!0})),t.key==="Escape"&&!this.open&&(t.stopPropagation(),this.displayInput.blur()),t.key==="Enter"||t.key===" "&&!this._isTypeable&&this.typeToSelectString===""){if(t.preventDefault(),t.stopImmediatePropagation(),!this.open){this.show().then();return}if(this.freeText&&!(!(this._addOptionActive&&this._freeTextAddValue!==null)&&this.currentOption&&!this.currentOption.disabled&&!this.currentOption.hidden)&&this.commitFreeText())return;this.currentOption&&!this.currentOption.disabled&&(this.valueHasChanged=!0,this.multiple?this.toggleOptionSelection(this.currentOption):this.setSelectedOptions(this.currentOption),this._isTypeable&&(this.clearSearch(),this.multiple&&(this.displayInput.value="")),this.updateComplete.then(()=>{this.emit("zn-input"),this.emit("zn-change")}),this.multiple?this._isTypeable&&this.updateComplete.then(()=>{this.displayInput.value="",this.displayInput.focus({preventScroll:!0})}):(this.hide().then(),this.displayInput.focus({preventScroll:!0})));return}if(["ArrowUp","ArrowDown","Home","End"].includes(t.key)){if(t.preventDefault(),!this.open&&(this.show().then(),this.currentOption))return;let l=this._isTypeable?this.getVisibleOptions():this.getAllOptions(),d=this.freeText&&this._freeTextAddValue!==null,h="add",m=d?[h,...l]:[...l];if(m.length===0)return;let f=this._addOptionActive&&d?h:this.currentOption??null,g=f===null?-1:m.indexOf(f),b=Math.max(0,g);t.key==="ArrowDown"?(b=g+1,b>m.length-1&&(b=0)):t.key==="ArrowUp"?(b=g-1,b<0&&(b=m.length-1)):t.key==="Home"?b=0:t.key==="End"&&(b=m.length-1);let v=m[b];v===h?(this._addOptionActive=!0,this.setCurrentOption(null)):(this._addOptionActive=!1,this.setCurrentOption(v))}if(!this._isTypeable&&(t.key.length===1||t.key==="Backspace")){let l=this.getAllOptions();if(t.metaKey||t.ctrlKey||t.altKey)return;if(!this.open){if(t.key==="Backspace")return;this.show().then()}t.stopPropagation(),t.preventDefault(),clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=window.setTimeout(()=>this.typeToSelectString="",1e3),t.key==="Backspace"?this.typeToSelectString=this.typeToSelectString.slice(0,-1):this.typeToSelectString+=t.key.toLowerCase();for(let d of l)if(d.getTextLabel().toLowerCase().startsWith(this.typeToSelectString)){this.setCurrentOption(d);break}}}};this.handleDocumentMouseDown=t=>{let r=t.composedPath();this&&!r.includes(this)&&this.hide().then()}}get value(){return this._value}set value(t){if(this.multiple){if(!Array.isArray(t))if(t.trimStart().startsWith("["))try{let r=JSON.parse(t);t=Array.isArray(r)?r:t.split(" ")}catch{typeof t=="string"&&(t=t.split(" "))}else t=t.split(" ")}else t=Array.isArray(t)?t.join(" "):t;this._value!==t&&(this.valueHasChanged=!0,this._value=t,this.hasUpdated&&this.updateDependencies())}get validity(){return this.valueInput?.validity}get validationMessage(){return this.valueInput?.validationMessage}connectedCallback(){if(super.connectedCallback(),this.updateComplete.then(()=>this.handleDefaultSlotChange()),this.open=!1,this.cacheKey){let t=JSON.parse(localStorage.getItem("zn-linked-select-cache")||"{}");t[this.cacheKey]&&(this.value=t[this.cacheKey])}}disconnectedCallback(){super.disconnectedCallback(),this._fetchAbortController?.abort(),this._fetchAbortController=null,this._searchDebounceTimer!==null&&(clearTimeout(this._searchDebounceTimer),this._searchDebounceTimer=null)}updateHasInputPrefix(){let t=this.prefixSlot?.assignedElements({flatten:!0})||[];this.inputPrefix=t.length>0}addOpenListeners(){let t=this.getRootNode();t.addEventListener("focusin",this.handleDocumentFocusIn),t.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("mousedown",this.handleDocumentMouseDown),"CloseWatcher"in window&&(this.closeWatcher?.destroy(),this.closeWatcher=new CloseWatcher,this.closeWatcher.onclose=()=>{this.open&&(this.hide().then(),this.displayInput.focus({preventScroll:!0}))})}removeOpenListeners(){let t=this.getRootNode();t.removeEventListener("focusin",this.handleDocumentFocusIn),t.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousedown",this.handleDocumentMouseDown),this.closeWatcher?.destroy()}handleFocus(){this.hasFocus=!0,this.displayInput.setSelectionRange(0,0),this.emit("zn-focus")}handleBlur(){this.hasFocus=!1,this.emit("zn-blur")}handleLabelClick(){this.displayInput.focus()}handleComboboxMouseDown(t){let r=t.composedPath(),n=r.some(l=>l instanceof Element&&l.tagName.toLowerCase()==="zn-icon"),a=r.some(l=>l instanceof Element&&l.classList.contains("select__expand-icon")),s=r.some(l=>l instanceof Element&&l.classList.contains("select__prefix"));if(!((this.disabled||this._fetchLoading||this._fetchError||n)&&!a||s)){if(this._isTypeable&&this.open&&!a){t.preventDefault(),this.displayInput.focus({preventScroll:!0});return}t.preventDefault(),this.displayInput.focus({preventScroll:!0}),this.open=!this.open}}handleComboboxKeyDown(t){if(t.key==="Tab")return;t.composedPath().some(a=>a instanceof Element&&a.classList?.contains("select__prefix"))||(t.stopPropagation(),this.handleDocumentKeyDown(t))}handleClearClick(t){t.stopPropagation(),this.value.length>0&&(this.valueHasChanged=!0,this._isTypeable&&(this.clearSearch(),this.displayInput.value=""),this.setSelectedOptions([]),this.displayInput.focus({preventScroll:!0}),this.updateComplete.then(()=>{this.emit("zn-clear"),this.emit("zn-input"),this.emit("zn-change"),this.triggerSubmit&&this.formControlController.submit()}))}handleClearMouseDown(t){t.stopPropagation(),t.preventDefault()}get _isRemoteSearch(){return this.search&&!!this.dataUri}get _isTypeable(){return this.search||this.freeText}handleSearchInput(){if(this._isTypeable)if(this._addOptionActive=!1,this._searchDisplayValue=this.displayInput.value,this._searchQuery=this._searchDisplayValue.toLowerCase(),this.open||this.show().then(),this._isRemoteSearch){if(this._searchDebounceTimer!==null&&(clearTimeout(this._searchDebounceTimer),this._searchDebounceTimer=null),!this._searchQuery){this.filterOptions();return}if(this._lastRemoteExhaustive&&this._lastRemoteQuery!==null&&this._searchQuery.startsWith(this._lastRemoteQuery)){this.filterOptions();return}this._noResultsVisible=!1,this._searchDebounceTimer=window.setTimeout(()=>{this._searchDebounceTimer=null,this.fetchOptions(this._searchQuery).then()},this.searchDebounce)}else this.filterOptions()}filterOptions(){let t=this.getAllOptions(),r=this._searchQuery;if(!r){t.forEach(n=>{n.hidden=!1}),this.getAllOptGroups().forEach(n=>{n.hidden=!1}),this._noResultsVisible=!1;return}if(t.forEach(n=>{if(n.selected&&n.hidden)return;let a=n.getTextLabel().toLowerCase(),s=n.value.toLowerCase(),l=a.includes(r)||s.includes(r);n.hidden=!l}),this.getAllOptGroups().forEach(n=>n.updateVisibility()),this._noResultsVisible=t.filter(n=>!n.selected).every(n=>n.hidden),this.currentOption&&this.currentOption.hidden){let n=t.find(a=>!a.hidden&&!a.disabled);n&&this.setCurrentOption(n)}}clearSearch(){this._searchQuery="",this._searchDisplayValue="",this._noResultsVisible=!1,this._addOptionActive=!1,this._searchDebounceTimer!==null&&(clearTimeout(this._searchDebounceTimer),this._searchDebounceTimer=null),this._searchLoading=!1,this.getAllOptions().forEach(r=>{r.hidden=!1}),this.getAllOptGroups().forEach(r=>{r.hidden=!1})}commitFreeText(t=!0){if(!this.freeText)return!1;let r=(this.displayInput?.value??"").trim();if(!r)return!1;this.valueHasChanged=!0;let n=r.toLowerCase(),s=this.getAllOptions().find(l=>l.value.toLowerCase()===n||l.getTextLabel().toLowerCase()===n)??this._createFreeTextOption(r);return this.multiple?this.toggleOptionSelection(s,!0):this.setSelectedOptions(s),this.clearSearch(),this.updateComplete.then(()=>{this.emit("zn-input"),this.emit("zn-change")}),t&&(this.multiple?(this.displayInput.value="",this.displayInput.focus({preventScroll:!0})):(this.hide().then(),this.displayInput.focus({preventScroll:!0}))),!0}get _freeTextAddValue(){if(!this.freeText||!this.open)return null;let t=this._searchDisplayValue.trim();if(!t)return null;let r=t.toLowerCase();return this.getAllOptions().some(a=>a.value.toLowerCase()===r||a.getTextLabel().toLowerCase()===r)?null:t}handleAddOptionMouseDown(t){t.preventDefault()}_materialiseFreeTextValues(t){if(!this.freeText)return;let r=new Set(this.getAllOptions().map(n=>n.value));t.forEach(n=>{n===""||r.has(n)||(this._createFreeTextOption(n),r.add(n))})}_createFreeTextOption(t){let r=document.createElement("zn-option");return r.value=t,r.textContent=t,r.setAttribute("data-free-text",""),this.appendChild(r),r}handleOptionClick(t){let r=t.target;if(r.closest(".select__add-option")){this.commitFreeText();return}let n=r.closest("zn-option"),a=this.value;if(n&&!n.disabled){if(this.valueHasChanged=!0,this.multiple){if(this.maxOptions>0&&this.selectedOptions.length>=this.maxOptions&&!n.selected)return;this.toggleOptionSelection(n)}else this.setSelectedOptions(n);this._isTypeable&&(this.clearSearch(),this.multiple&&(this.displayInput.value="")),this.updateComplete.then(()=>{this.multiple&&this._isTypeable&&this.open&&(this.displayInput.value=""),this.displayInput.focus({preventScroll:!0})}),this.value!==a&&this.updateComplete.then(()=>{this.emit("zn-input"),this.emit("zn-change")}),this.multiple||(this.hide().then(),this.displayInput.focus({preventScroll:!0})),this.triggerSubmit&&this.formControlController.submit()}}handleDefaultSlotChange(){customElements.get("zn-option")||customElements.whenDefined("zn-option").then(()=>this.handleDefaultSlotChange());let t=this.getAllOptions(),r=this.valueHasChanged?this.value:this.defaultValue,n=Array.isArray(r)?r:[r],a=[];if(t.forEach(s=>a.push(s.value)),this._materialiseFreeTextValues(n),this.setSelectedOptions(this.getAllOptions().filter(s=>n.includes(s.value))),!this.valueHasChanged){let s=t.filter(l=>l.hasAttribute("selected"));s.length&&(this.multiple?this.setSelectedOptions(s):this.setSelectedOptions(s[0]))}this.selectFirst&&this.selectedOptions.length===0&&t.length>0&&(this.setSelectedOptions(t[0]),this.valueHasChanged=!0,this.emit("zn-input"),this.emit("zn-change"))}handleTagRemove(t,r){t.stopPropagation(),t.stopImmediatePropagation(),this.disabled||(this.toggleOptionSelection(r,!1),this.updateComplete.then(()=>{this.emit("zn-input"),this.emit("zn-change")}))}getAllOptions(){let t=this.shadowRoot?[...this.shadowRoot.querySelectorAll(".select__listbox zn-option")]:[],r=[...this.querySelectorAll("zn-option")];return[...t,...r]}getAllOptGroups(){let t=this.shadowRoot?[...this.shadowRoot.querySelectorAll(".select__listbox zn-opt-group")]:[],r=[...this.querySelectorAll("zn-opt-group")];return[...t,...r]}getVisibleOptions(){return this.getAllOptions().filter(t=>!t.hidden)}getFirstOption(){return this.querySelector("zn-option")}setCurrentOption(t){this.getAllOptions().forEach(n=>{n.current=!1,n.tabIndex=-1}),t&&(this.currentOption=t,t.current=!0,t.tabIndex=0,this._isTypeable&&this.open&&this.shadowRoot?.activeElement===this.displayInput||t.focus())}setSelectedOptions(t){let r=this.getAllOptions(),n=Array.isArray(t)?t:[t];r.forEach(a=>a.selected=!1),n.length&&n.forEach(a=>a.selected=!0),this.selectionChanged()}toggleOptionSelection(t,r){r===!0||r===!1?t.selected=r:t.selected=!t.selected,this.selectionChanged()}selectionChanged(){this.selectedOptions=this.getAllOptions().filter(r=>r.selected),this.querySelectorAll("[data-free-text]").forEach(r=>{r.selected||r.remove()}),this._isRemoteSearch&&this.multiple&&(this._selectedRemoteItems=this.selectedOptions.map(r=>({key:r.value,value:r.getTextLabel()})));let t=this.valueHasChanged;if(this.multiple)this.getAllOptions().filter(r=>!r.multiple).forEach(r=>{r.multiple=!0}),this.value=this.selectedOptions.map(r=>r.value),this.value.length===0?this.displayLabel="":this.displayLabel=this.localize.term("numOptionsSelected",this.selectedOptions.length);else{this.getAllOptions().filter(n=>n.multiple).forEach(n=>{n.multiple=!1});let r=this.selectedOptions[0];this.value=r?.value??"",this.displayLabel=r?.getTextLabel()??""}this.valueHasChanged=t,this.updateComplete.then(()=>{this.formControlController.updateValidity()})}get tags(){return this.selectedOptions.map((t,r)=>{if(r<this.maxOptionsVisible||this.maxOptionsVisible<=0){let n=this.getTag(t,r);return u`
+    `;this.selectFirst=!1;this.distinct="";this.conditional="";this.maxResults=0;this.searchDebounce=300;this.searchParam="q";this.searchOnly=!1;this.handleDocumentFocusIn=t=>{let r=t.composedPath();this&&!r.includes(this)&&this.hide().then()};this.handleDocumentKeyDown=t=>{let r=t.target,n=r.closest(".select__clear")!==null,a=r.closest("zn-icon")!==null,s=r.closest(".select__expand-icon")!==null;if(!((n||a)&&!s)){if(t.key==="Escape"&&this.open&&this.freeText&&this._searchDisplayValue.trim()&&(this.clearSearch(),this.displayInput.value=""),(t.key==="Escape"||t.key==="Tab")&&this.open&&!this.closeWatcher&&(t.preventDefault(),t.stopPropagation(),this.hide().then(),this.displayInput.focus({preventScroll:!0})),t.key==="Escape"&&!this.open&&(t.stopPropagation(),this.displayInput.blur()),t.key==="Enter"||t.key===" "&&!this._isTypeable&&this.typeToSelectString===""){if(t.preventDefault(),t.stopImmediatePropagation(),!this.open){this.show().then();return}if(this.freeText&&!(!(this._addOptionActive&&this._freeTextAddValue!==null)&&this.currentOption&&!this.currentOption.disabled&&!this.currentOption.hidden)&&this.commitFreeText())return;this.currentOption&&!this.currentOption.disabled&&(this.valueHasChanged=!0,this.multiple?this.toggleOptionSelection(this.currentOption):this.setSelectedOptions(this.currentOption),this._isTypeable&&(this.clearSearch(),this.multiple&&(this.displayInput.value="")),this.updateComplete.then(()=>{this.emit("zn-input"),this.emit("zn-change")}),this.multiple?this._isTypeable&&this.updateComplete.then(()=>{this.displayInput.value="",this.displayInput.focus({preventScroll:!0})}):(this.hide().then(),this.displayInput.focus({preventScroll:!0})));return}if(["ArrowUp","ArrowDown","Home","End"].includes(t.key)){if(t.preventDefault(),!this.open&&(this.show().then(),this.currentOption))return;let l=this._isTypeable?this.getVisibleOptions():this.getAllOptions(),d=this.freeText&&this._freeTextAddValue!==null,h="add",m=d?[h,...l]:[...l];if(m.length===0)return;let f=this._addOptionActive&&d?h:this.currentOption??null,g=f===null?-1:m.indexOf(f),b=Math.max(0,g);t.key==="ArrowDown"?(b=g+1,b>m.length-1&&(b=0)):t.key==="ArrowUp"?(b=g-1,b<0&&(b=m.length-1)):t.key==="Home"?b=0:t.key==="End"&&(b=m.length-1);let v=m[b];v===h?(this._addOptionActive=!0,this.setCurrentOption(null)):(this._addOptionActive=!1,this.setCurrentOption(v))}if(!this._isTypeable&&(t.key.length===1||t.key==="Backspace")){let l=this.getAllOptions();if(t.metaKey||t.ctrlKey||t.altKey)return;if(!this.open){if(t.key==="Backspace")return;this.show().then()}t.stopPropagation(),t.preventDefault(),clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=window.setTimeout(()=>this.typeToSelectString="",1e3),t.key==="Backspace"?this.typeToSelectString=this.typeToSelectString.slice(0,-1):this.typeToSelectString+=t.key.toLowerCase();for(let d of l)if(d.getTextLabel().toLowerCase().startsWith(this.typeToSelectString)){this.setCurrentOption(d);break}}}};this.handleDocumentMouseDown=t=>{let r=t.composedPath();this&&!r.includes(this)&&this.hide().then()}}get value(){return this._value}set value(t){if(this.multiple){if(!Array.isArray(t))if(t.trimStart().startsWith("["))try{let r=JSON.parse(t);t=Array.isArray(r)?r:t.split(" ")}catch{typeof t=="string"&&(t=t.split(" "))}else t=t.split(" ")}else t=Array.isArray(t)?t.join(" "):t;this._value!==t&&(this.valueHasChanged=!0,this._value=t,this.hasUpdated&&this.updateDependencies())}get validity(){return this.valueInput?.validity}get validationMessage(){return this.valueInput?.validationMessage}connectedCallback(){if(super.connectedCallback(),this.updateComplete.then(()=>this.handleDefaultSlotChange()),this.open=!1,this.cacheKey){let t=JSON.parse(localStorage.getItem("zn-linked-select-cache")||"{}");t[this.cacheKey]&&(this.value=t[this.cacheKey])}}disconnectedCallback(){super.disconnectedCallback(),this._fetchAbortController?.abort(),this._fetchAbortController=null,this._searchDebounceTimer!==null&&(clearTimeout(this._searchDebounceTimer),this._searchDebounceTimer=null)}updateHasInputPrefix(){let t=this.prefixSlot?.assignedElements({flatten:!0})||[];this.inputPrefix=t.length>0}addOpenListeners(){let t=this.getRootNode();t.addEventListener("focusin",this.handleDocumentFocusIn),t.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("mousedown",this.handleDocumentMouseDown),"CloseWatcher"in window&&(this.closeWatcher?.destroy(),this.closeWatcher=new CloseWatcher,this.closeWatcher.onclose=()=>{this.open&&(this.hide().then(),this.displayInput.focus({preventScroll:!0}))})}removeOpenListeners(){let t=this.getRootNode();t.removeEventListener("focusin",this.handleDocumentFocusIn),t.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousedown",this.handleDocumentMouseDown),this.closeWatcher?.destroy()}handleFocus(){this.hasFocus=!0,this.displayInput.setSelectionRange(0,0),this.emit("zn-focus")}handleBlur(){this.hasFocus=!1,this.emit("zn-blur")}handleLabelClick(){this.displayInput.focus()}handleComboboxMouseDown(t){let r=t.composedPath(),n=r.some(l=>l instanceof Element&&l.tagName.toLowerCase()==="zn-icon"),a=r.some(l=>l instanceof Element&&l.classList.contains("select__expand-icon")),s=r.some(l=>l instanceof Element&&l.classList.contains("select__prefix"));if(!((this.disabled||this._fetchLoading||this._fetchError||n)&&!a||s)){if(this._isTypeable&&this.open&&!a){t.preventDefault(),this.displayInput.focus({preventScroll:!0});return}t.preventDefault(),this.displayInput.focus({preventScroll:!0}),this.open=!this.open}}handleComboboxKeyDown(t){if(t.key==="Tab")return;t.composedPath().some(a=>a instanceof Element&&a.classList?.contains("select__prefix"))||(t.stopPropagation(),this.handleDocumentKeyDown(t))}handleClearClick(t){t.stopPropagation(),this.value.length>0&&(this.valueHasChanged=!0,this._isTypeable&&(this.clearSearch(),this.displayInput.value=""),this.setSelectedOptions([]),this.displayInput.focus({preventScroll:!0}),this.updateComplete.then(()=>{this.emit("zn-clear"),this.emit("zn-input"),this.emit("zn-change"),this.triggerSubmit&&this.formControlController.submit()}))}handleClearMouseDown(t){t.stopPropagation(),t.preventDefault()}get _isRemoteSearch(){return this.search&&!!this.dataUri}get _isTypeable(){return this.search||this.freeText}handleSearchInput(){if(this._isTypeable)if(this._addOptionActive=!1,this._searchDisplayValue=this.displayInput.value,this._searchQuery=this._searchDisplayValue.toLowerCase(),this.open||this.show().then(),this._isRemoteSearch){if(this._searchDebounceTimer!==null&&(clearTimeout(this._searchDebounceTimer),this._searchDebounceTimer=null),!this._searchQuery){this.filterOptions();return}if(this._lastRemoteExhaustive&&this._lastRemoteQuery!==null&&this._searchQuery.startsWith(this._lastRemoteQuery)){this.filterOptions();return}this._noResultsVisible=!1,this._searchDebounceTimer=window.setTimeout(()=>{this._searchDebounceTimer=null,this.fetchOptions(this._searchQuery).then()},this.searchDebounce)}else this.filterOptions()}filterOptions(){let t=this.getAllOptions(),r=this._searchQuery;if(!r){t.forEach(n=>{n.hidden=!1}),this.getAllOptGroups().forEach(n=>{n.hidden=!1}),this._noResultsVisible=!1;return}if(t.forEach(n=>{if(n.selected&&n.hidden)return;let a=n.getTextLabel().toLowerCase(),s=n.value.toLowerCase(),l=a.includes(r)||s.includes(r);n.hidden=!l}),this.getAllOptGroups().forEach(n=>n.updateVisibility()),this._noResultsVisible=t.filter(n=>!n.selected).every(n=>n.hidden),this.currentOption&&this.currentOption.hidden){let n=t.find(a=>!a.hidden&&!a.disabled);n&&this.setCurrentOption(n)}}clearSearch(){this._searchQuery="",this._searchDisplayValue="",this._noResultsVisible=!1,this._addOptionActive=!1,this._searchDebounceTimer!==null&&(clearTimeout(this._searchDebounceTimer),this._searchDebounceTimer=null),this._searchLoading=!1,this.getAllOptions().forEach(r=>{r.hidden=!1}),this.getAllOptGroups().forEach(r=>{r.hidden=!1})}commitFreeText(t=!0){if(!this.freeText)return!1;let r=(this.displayInput?.value??"").trim();if(!r)return!1;this.valueHasChanged=!0;let n=r.toLowerCase(),s=this.getAllOptions().find(l=>l.value.toLowerCase()===n||l.getTextLabel().toLowerCase()===n)??this._createFreeTextOption(r);return this.multiple?this.toggleOptionSelection(s,!0):this.setSelectedOptions(s),this.clearSearch(),this.updateComplete.then(()=>{this.emit("zn-input"),this.emit("zn-change")}),t&&(this.multiple?(this.displayInput.value="",this.displayInput.focus({preventScroll:!0})):(this.hide().then(),this.displayInput.focus({preventScroll:!0}))),!0}get _freeTextAddValue(){if(!this.freeText||!this.open)return null;let t=this._searchDisplayValue.trim();if(!t)return null;let r=t.toLowerCase();return this.getAllOptions().some(a=>a.value.toLowerCase()===r||a.getTextLabel().toLowerCase()===r)?null:t}handleAddOptionMouseDown(t){t.preventDefault()}_materialiseFreeTextValues(t){if(!this.freeText)return;let r=new Set(this.getAllOptions().map(n=>n.value));t.forEach(n=>{n===""||r.has(n)||(this._createFreeTextOption(n),r.add(n))})}_createFreeTextOption(t){let r=document.createElement("zn-option");return r.value=t,r.textContent=t,r.setAttribute("data-free-text",""),this.appendChild(r),r}handleOptionClick(t){let r=t.target;if(r.closest(".select__add-option")){this.commitFreeText();return}let n=r.closest("zn-option"),a=this.value;if(n&&!n.disabled){if(this.valueHasChanged=!0,this.multiple){if(this.maxOptions>0&&this.selectedOptions.length>=this.maxOptions&&!n.selected)return;this.toggleOptionSelection(n)}else this.setSelectedOptions(n);this._isTypeable&&(this.clearSearch(),this.multiple&&(this.displayInput.value="")),this.updateComplete.then(()=>{this.multiple&&this._isTypeable&&this.open&&(this.displayInput.value=""),this.displayInput.focus({preventScroll:!0})}),this.value!==a&&this.updateComplete.then(()=>{this.emit("zn-input"),this.emit("zn-change")}),this.multiple||(this.hide().then(),this.displayInput.focus({preventScroll:!0})),this.triggerSubmit&&this.formControlController.submit()}}handleDefaultSlotChange(){customElements.get("zn-option")||customElements.whenDefined("zn-option").then(()=>this.handleDefaultSlotChange());let t=this.getAllOptions(),r=this.valueHasChanged?this.value:this.defaultValue,n=Array.isArray(r)?r:[r],a=[];if(t.forEach(s=>a.push(s.value)),this._materialiseFreeTextValues(n),this.setSelectedOptions(this.getAllOptions().filter(s=>n.includes(s.value))),!this.valueHasChanged){let s=t.filter(l=>l.hasAttribute("selected"));s.length&&(this.multiple?this.setSelectedOptions(s):this.setSelectedOptions(s[0]),(!this.defaultValue||this.defaultValue.length===0)&&(this.defaultValue=this.value))}this.selectFirst&&this.selectedOptions.length===0&&t.length>0&&(this.setSelectedOptions(t[0]),this.valueHasChanged=!0,this.emit("zn-input"),this.emit("zn-change"))}handleTagRemove(t,r){t.stopPropagation(),t.stopImmediatePropagation(),this.disabled||(this.valueHasChanged=!0,this.toggleOptionSelection(r,!1),this.updateComplete.then(()=>{this.emit("zn-input"),this.emit("zn-change")}))}getAllOptions(){let t=this.shadowRoot?[...this.shadowRoot.querySelectorAll(".select__listbox zn-option")]:[],r=[...this.querySelectorAll("zn-option")];return[...t,...r]}getAllOptGroups(){let t=this.shadowRoot?[...this.shadowRoot.querySelectorAll(".select__listbox zn-opt-group")]:[],r=[...this.querySelectorAll("zn-opt-group")];return[...t,...r]}getVisibleOptions(){return this.getAllOptions().filter(t=>!t.hidden)}getFirstOption(){return this.querySelector("zn-option")}setCurrentOption(t){this.getAllOptions().forEach(n=>{n.current=!1,n.tabIndex=-1}),t&&(this.currentOption=t,t.current=!0,t.tabIndex=0,this._isTypeable&&this.open&&this.shadowRoot?.activeElement===this.displayInput||t.focus())}setSelectedOptions(t){let r=this.getAllOptions(),n=Array.isArray(t)?t:[t];r.forEach(a=>a.selected=!1),n.length&&n.forEach(a=>a.selected=!0),this.selectionChanged()}toggleOptionSelection(t,r){r===!0||r===!1?t.selected=r:t.selected=!t.selected,this.selectionChanged()}selectionChanged(){this.selectedOptions=this.getAllOptions().filter(r=>r.selected),this.querySelectorAll("[data-free-text]").forEach(r=>{r.selected||r.remove()}),this._isRemoteSearch&&this.multiple&&(this._selectedRemoteItems=this.selectedOptions.map(r=>({key:r.value,value:r.getTextLabel()})));let t=this.valueHasChanged;if(this.multiple)this.getAllOptions().filter(r=>!r.multiple).forEach(r=>{r.multiple=!0}),this.value=this.selectedOptions.map(r=>r.value),this.value.length===0?this.displayLabel="":this.displayLabel=this.localize.term("numOptionsSelected",this.selectedOptions.length);else{this.getAllOptions().filter(n=>n.multiple).forEach(n=>{n.multiple=!1});let r=this.selectedOptions[0];this.value=r?.value??"",this.displayLabel=r?.getTextLabel()??""}this.valueHasChanged=t,this.updateComplete.then(()=>{this.formControlController.updateValidity()})}get tags(){return this.selectedOptions.map((t,r)=>{if(r<this.maxOptionsVisible||this.maxOptionsVisible<=0){let n=this.getTag(t,r);return u`
           <div @zn-remove=${a=>this.handleTagRemove(a,t)}>
             ${typeof n=="string"?Xe(n):n}
           </div>`}else if(r===this.maxOptionsVisible)return u`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.34",
+  "version": "1.1.35",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/select/select.component.ts

@@ -1079,6 +1079,10 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
         } else {
           this.setSelectedOptions(initiallySelectedOptions[0]);
         }
+
+        if (!this.defaultValue || this.defaultValue.length === 0) {
+          this.defaultValue = this.value;
+        }
       }
     }
 
@@ -1096,6 +1100,8 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     event.stopImmediatePropagation();
 
     if (!this.disabled) {
+      this.valueHasChanged = true;
+
       // Deselecting drops the backing element for free-text values via selectionChanged's cleanup.
       this.toggleOptionSelection(option, false);
 

package/src/components/select/select.test.ts

@@ -231,6 +231,33 @@ describe('<zn-select>', () => {
       const chip = el.shadowRoot!.querySelector<HTMLElement>('.select__tags zn-chip')!;
       expect(getComputedStyle(chip).cursor).to.equal('default');
     });
+
+    it('removes a value when the tag remove icon is clicked before any other interaction', async () => {
+      const el = await fixture<ZnSelect>(html`
+        <zn-select multiple value="a b c">
+          <zn-option value="a">Option 1</zn-option>
+          <zn-option value="b">Option 2</zn-option>
+          <zn-option value="c">Option 3</zn-option>
+        </zn-select>
+      `);
+      await el.updateComplete;
+      expect(el.value).to.deep.equal(['a', 'b', 'c']);
+
+      let changed = false;
+      el.addEventListener('zn-change', () => {
+        changed = true;
+      });
+
+      const removeIcon = el.shadowRoot!.querySelector<HTMLElement>('.select__tags zn-icon[slot="action"]')!;
+      removeIcon.click();
+      await el.updateComplete;
+      // handleValueChange runs as a @watch on the next update cycle; give it a beat
+      await el.updateComplete;
+
+      expect(el.value).to.deep.equal(['b', 'c']);
+      expect(el.shadowRoot!.querySelectorAll('.select__tags zn-chip').length).to.equal(2);
+      expect(changed).to.be.true;
+    });
   });
 
   describe('free-text', () => {