@kubex/zinc 1.1.33 → 1.1.35

package/dist/custom-elements.json

@@ -47,6 +47,79 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/action-bar/action-bar.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ZnActionBar",
+          "cssProperties": [
+            {
+              "description": "An example CSS custom property.",
+              "name": "--example"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot.",
+              "name": ""
+            },
+            {
+              "description": "An example slot.",
+              "name": "example"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted as an example.",
+              "name": "zn-event-name"
+            }
+          ],
+          "superclass": {
+            "name": "ZincElement",
+            "module": "/src/internal/zinc-element"
+          },
+          "summary": "Short summary of the component's intended use.",
+          "tagNameWithoutPrefix": "action-bar",
+          "tagName": "zn-action-bar",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
+          "documentation": "https://zinc.style/components/action-bar",
+          "status": "experimental",
+          "since": "1.0",
+          "dependencies": [
+            "zn-example"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ZnActionBar",
+            "module": "components/action-bar/action-bar.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/alert/alert.js",
@@ -223,79 +296,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/action-bar/action-bar.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ZnActionBar",
-          "cssProperties": [
-            {
-              "description": "An example CSS custom property.",
-              "name": "--example"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot.",
-              "name": ""
-            },
-            {
-              "description": "An example slot.",
-              "name": "example"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted as an example.",
-              "name": "zn-event-name"
-            }
-          ],
-          "superclass": {
-            "name": "ZincElement",
-            "module": "/src/internal/zinc-element"
-          },
-          "summary": "Short summary of the component's intended use.",
-          "tagNameWithoutPrefix": "action-bar",
-          "tagName": "zn-action-bar",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
-          "documentation": "https://zinc.style/components/action-bar",
-          "status": "experimental",
-          "since": "1.0",
-          "dependencies": [
-            "zn-example"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ZnActionBar",
-            "module": "components/action-bar/action-bar.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/animated-button/animated-button.js",
@@ -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.33",
+    "version": "1.1.35",
     "author": "",
     "license": "MIT"
   }

package/dist/vscode.html-custom-data.json

@@ -13,6 +13,17 @@
         }
       ]
     },
+    {
+      "name": "zn-action-bar",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/action-bar"
+        }
+      ]
+    },
     {
       "name": "zn-alert",
       "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -52,17 +63,6 @@
         }
       ]
     },
-    {
-      "name": "zn-action-bar",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://zinc.style/components/action-bar"
-        }
-      ]
-    },
     {
       "name": "zn-animated-button",
       "description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",

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.33",
+  "version": "1.1.35",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -15,6 +15,28 @@
           "events": [],
           "js": { "properties": [], "events": [] }
         },
+        {
+          "name": "zn-action-bar",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-alert",
           "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -78,28 +100,6 @@
             ]
           }
         },
-        {
-          "name": "zn-action-bar",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
         {
           "name": "zn-animated-button",
           "description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",

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`
@@ -3825,7 +3825,7 @@ ${ua(this.code(o,t))}
     `}render(){return u`
       <slot></slot>
       ${this.hasSubmitButton?"":this.renderDefaultButton()}
-    `}};qi.styles=T(k_),c([p()],qi.prototype,"button",2);var D6=qi;qi.define("zn-filter-wrapper");var S_=A`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:contents}.container{padding-bottom:50px}.container--scroll{height:100%;width:100%;overflow:hidden;position:relative}.container--scroll .scroll-content{height:100%;width:100%;overflow:auto;box-sizing:border-box}.setting-container__dropdown{z-index:10;position:absolute;border-radius:50%;width:32px;height:32px;padding:4px;background:rgba(var(--zn-panel,0.8));box-shadow:var(--zn-shadow-small);opacity:0.7;transition-duration:0.3s;transition-property:opacity}.setting-container__dropdown:hover{background:rgba(var(--zn-panel,1))}.setting-container__dropdown--top-end{top:var(--zn-base-gap);right:calc(var(--zn-base-gap) + var(--zn-gutter));bottom:auto}.setting-container__dropdown--top-start{top:var(--zn-base-gap);right:auto;left:calc(var(--zn-base-gap) + var(--zn-gutter));bottom:auto}.setting-container__dropdown--bottom-end{bottom:calc(var(--zn-base-gap) + var(--zn-scroll-footer-height,0px));right:calc(var(--zn-base-gap) + var(--zn-gutter));top:auto}.setting-container__dropdown--bottom-start{bottom:calc(var(--zn-base-gap) + var(--zn-scroll-footer-height,0px));left:calc(var(--zn-base-gap) + var(--zn-gutter));top:auto}.setting-container__dropdown[open],.setting-container__dropdown:hover{opacity:1}.setting-container__toggle-button::part(icon){rotate:0deg;transition:rotate 0.9s ease-in-out,color 0.9s ease-in-out}.setting-container__dropdown[open] .setting-container__toggle-button::part(icon),.setting-container__toggle-button:hover::part(icon){color:rgb(var(--zn-primary));cursor:pointer;rotate:380deg}zn-button{border-radius:var(--zn-border-radius)}.pull-tab{position:absolute;top:0;right:calc(var(--zn-base-gap) + var(--zn-gutter));z-index:20;display:flex;flex-direction:column;align-items:flex-end;max-height:100%}.pull-tab__panel{display:grid;grid-template-rows:0fr;min-height:0;overflow:hidden;background-color:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-top:none;border-bottom-width:0;border-radius:0 0 0 var(--zn-border-radius);transition:grid-template-rows 0.22s ease,border-bottom-width 0s linear 0.22s;will-change:grid-template-rows}.pull-tab--open .pull-tab__panel{grid-template-rows:1fr;border-bottom-width:1px;transition:grid-template-rows 0.22s ease,border-bottom-width 0s linear 0s}.pull-tab__panel-content{min-height:0;overflow:hidden}.pull-tab__panel-content .settings-container__dropdown-content{border:none;box-shadow:none;border-radius:0;margin-bottom:0;max-width:none;width:auto}.pull-tab--expanded .pull-tab__panel-content{overflow-y:auto}.pull-tab__tab{flex-shrink:0;background-color:rgb(var(--zn-panel));color:rgb(var(--zn-text-heading));border:1px solid rgb(var(--zn-border-color));border-top:none;border-radius:0 0 10px 10px;padding:var(--zn-spacing-x-small);cursor:pointer;display:inline-flex;align-items:center;gap:var(--zn-spacing-x-small);max-height:36px;overflow:hidden;margin-top:-1px}.pull-tab__tab:hover{background-color:rgb(var(--zn-shadow))}.pull-tab__tab:focus-visible{outline:2px solid rgb(var(--zn-primary));outline-offset:-2px}.settings-container__dropdown-content{display:flex;flex-direction:column;gap:var(--zn-spacing-large);background-color:rgb(var(--zn-panel));padding:var(--zn-spacing-large);box-shadow:var(--zn-shadow-small);border-radius:var(--zn-border-radius);max-width:var(--zn-size-mpanel);width:-moz-fit-content;width:fit-content;z-index:20;border:1px solid rgb(var(--zn-border-color));margin-bottom:10px}`;var jr=class extends C{constructor(){super(...arguments);this.filters=[];this.position="bottom-start";this.pullTab=!1;this.open=!1;this.panelExpanded=!1;this._mutationObserver=new Dt(this,{target:null,config:{childList:!0,subtree:!0,attributes:!0},callback:t=>{for(let r of t)if(!(r.type==="attributes"&&r.attributeName==="hidden")){this.scheduleUpdateFilters();break}}});this._updateFiltersScheduled=!1;this._hiddenElements=new Set;this.handleDocumentMouseDown=t=>{if(!this.open)return;let r=this.shadowRoot?.querySelector(".pull-tab");r&&t.composedPath().includes(r)||this.hidePullTab()};this.togglePullTab=()=>{this.open?this.hidePullTab():(this.open=!0,document.addEventListener("mousedown",this.handleDocumentMouseDown,!0),this.emit("zn-show"))};this.handlePanelTransitionEnd=t=>{t.propertyName==="grid-template-rows"&&(this.panelExpanded=this.open)};this.handleContentSlotChange=()=>{this.updateFilters()};this.handleFiltersSlotChange=()=>{this.recomputeFiltersFromSlot(),this.updateFilters()}}connectedCallback(){if(super.connectedCallback(),this._store=new qr(window.sessionStorage,this.storeKey),this.recomputeFiltersFromSlot(),this.storeKey){let t=this._store.get("filters");if(t){let r=JSON.parse(t);this.filters=this.filters.map(n=>({...n,checked:Object.prototype.hasOwnProperty.call(r,n.attribute)?r[n.attribute]:n.checked}))}}this.updateFilters(),this._mutationObserver.observe(this)}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown,!0),super.disconnectedCallback()}hidePullTab(){this.open=!1,this.panelExpanded=!1,document.removeEventListener("mousedown",this.handleDocumentMouseDown,!0),this.emit("zn-hide")}scheduleUpdateFilters(){this._updateFiltersScheduled||(this._updateFiltersScheduled=!0,Promise.resolve().then(()=>{this._updateFiltersScheduled=!1,this.updateFilters()}))}recomputeFiltersFromSlot(){let t=new Map(this.filters.map(a=>[a.attribute,a.checked])),r=this.querySelectorAll('[slot="filter"]'),n=[];r.forEach(a=>{let s=a.getAttribute("attribute");if(!s)return;let l=a.getAttribute("default")==="true",d=t.has(s)?!!t.get(s):l,h=a.textContent||"Unnamed Filter",m=a.getAttribute("item-selector")||"*";n.push({attribute:s,checked:d,label:h,itemSelector:m})}),this.filters=n}updateSingleFilter(t,r){let n,a=t.attribute==="*"?"":`[${t.attribute}]`;t.itemSelector&&t.itemSelector.startsWith(">")?n=qt(t.itemSelector.substring(1)+a,this,""):n=this.querySelectorAll(t.itemSelector+a),n.forEach(s=>{r?this.filters.some(d=>{if(d.attribute===t.attribute||d.checked)return!1;let h=d.attribute==="*"?"":`[${d.attribute}]`,m;return d.itemSelector&&d.itemSelector.startsWith(">")?m=qt(d.itemSelector.substring(1)+h,this,""):m=this.querySelectorAll(d.itemSelector+h),Array.from(m).includes(s)})||(s.removeAttribute("hidden"),this._hiddenElements.delete(s)):(s.setAttribute("hidden","true"),this._hiddenElements.add(s))})}updateFilters(){this._hiddenElements.forEach(t=>t.removeAttribute("hidden")),this._hiddenElements.clear(),this.filters.forEach(t=>{this.updateSingleFilter(t,t.checked)})}updateFilter(t){let r=t.target.getAttribute("data-attribute"),n=t.target.isChecked,a=this.filters.find(s=>s.attribute===r);if(a){if(this.filters=this.filters.map(s=>s.attribute===r?{...s,checked:n}:s),this.storeKey){let s=this.filters.reduce((l,d)=>(l[d.attribute]=d.checked,l),{});this._store.set("filters",JSON.stringify(s))}this.updateSingleFilter(a,n)}}render(){let t="top-start";switch(this.position){case"top-end":t="bottom-end";break;case"top-start":t="bottom-start";break;case"bottom-end":t="top-end";break;case"bottom-start":t="top-start";break}return u`
+    `}};qi.styles=T(k_),c([p()],qi.prototype,"button",2);var D6=qi;qi.define("zn-filter-wrapper");var S_=A`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:contents}.container{padding-bottom:50px}.container--scroll{height:100%;width:100%;overflow:hidden;position:relative}.container--scroll .scroll-content{height:100%;width:100%;overflow:auto;box-sizing:border-box}.setting-container__dropdown{z-index:10;position:absolute;border-radius:50%;width:32px;height:32px;padding:4px;background:rgba(var(--zn-panel,0.8));box-shadow:var(--zn-shadow-small);opacity:0.7;transition-duration:0.3s;transition-property:opacity}.setting-container__dropdown:hover{background:rgba(var(--zn-panel,1))}.setting-container__dropdown--top-end{top:var(--zn-base-gap);right:calc(var(--zn-base-gap) + var(--zn-gutter));bottom:auto}.setting-container__dropdown--top-start{top:var(--zn-base-gap);right:auto;left:calc(var(--zn-base-gap) + var(--zn-gutter));bottom:auto}.setting-container__dropdown--bottom-end{bottom:calc(var(--zn-base-gap) + var(--zn-scroll-footer-height,0px));right:calc(var(--zn-base-gap) + var(--zn-gutter));top:auto}.setting-container__dropdown--bottom-start{bottom:calc(var(--zn-base-gap) + var(--zn-scroll-footer-height,0px));left:calc(var(--zn-base-gap) + var(--zn-gutter));top:auto}.setting-container__dropdown[open],.setting-container__dropdown:hover{opacity:1}.setting-container__toggle-button::part(icon){rotate:0deg;transition:rotate 0.9s ease-in-out,color 0.9s ease-in-out}.setting-container__dropdown[open] .setting-container__toggle-button::part(icon),.setting-container__toggle-button:hover::part(icon){color:rgb(var(--zn-primary));cursor:pointer;rotate:380deg}zn-button{border-radius:var(--zn-border-radius)}.pull-tab{position:absolute;top:0;right:calc(var(--zn-base-gap) + var(--zn-gutter));z-index:20;display:flex;flex-direction:column;align-items:flex-end;max-height:100%}.pull-tab__panel{display:grid;grid-template-rows:0fr;min-height:0;overflow:hidden;background-color:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-top:none;border-bottom-width:0;border-radius:0 0 0 var(--zn-border-radius);transition:grid-template-rows 0.22s ease,border-bottom-width 0s linear 0.22s;will-change:grid-template-rows}.pull-tab--open .pull-tab__panel{grid-template-rows:1fr;border-bottom-width:1px;transition:grid-template-rows 0.22s ease,border-bottom-width 0s linear 0s}.pull-tab__panel-content{min-height:0;overflow:hidden}.pull-tab__panel-content .settings-container__dropdown-content{border:none;box-shadow:none;border-radius:0;margin-bottom:0;max-width:none;width:auto}.pull-tab--expanded .pull-tab__panel-content{overflow-y:auto}.pull-tab__tab{flex-shrink:0;background-color:rgb(var(--zn-panel));color:rgb(var(--zn-text-heading));border:1px solid rgb(var(--zn-border-color));border-top:none;border-radius:0 0 10px 10px;padding:var(--zn-spacing-x-small);cursor:pointer;display:inline-flex;align-items:center;gap:var(--zn-spacing-x-small);max-height:36px;overflow:hidden;margin-top:-1px}.pull-tab__tab:hover{background-color:rgb(var(--zn-shadow))}.pull-tab__tab:focus-visible{outline:2px solid rgb(var(--zn-primary));outline-offset:-2px}.settings-container__dropdown-content{display:flex;flex-direction:column;gap:var(--zn-spacing-small);background-color:rgb(var(--zn-panel));padding:var(--zn-spacing-small);box-shadow:var(--zn-shadow-small);border-radius:var(--zn-border-radius);max-width:var(--zn-size-mpanel);width:-moz-fit-content;width:fit-content;z-index:20;border:1px solid rgb(var(--zn-border-color));margin-bottom:10px}`;var jr=class extends C{constructor(){super(...arguments);this.filters=[];this.position="bottom-start";this.pullTab=!1;this.open=!1;this.panelExpanded=!1;this._mutationObserver=new Dt(this,{target:null,config:{childList:!0,subtree:!0,attributes:!0},callback:t=>{for(let r of t)if(!(r.type==="attributes"&&r.attributeName==="hidden")){this.scheduleUpdateFilters();break}}});this._updateFiltersScheduled=!1;this._hiddenElements=new Set;this.handleDocumentMouseDown=t=>{if(!this.open)return;let r=this.shadowRoot?.querySelector(".pull-tab");r&&t.composedPath().includes(r)||this.hidePullTab()};this.togglePullTab=()=>{this.open?this.hidePullTab():(this.open=!0,document.addEventListener("mousedown",this.handleDocumentMouseDown,!0),this.emit("zn-show"))};this.handlePanelTransitionEnd=t=>{t.propertyName==="grid-template-rows"&&(this.panelExpanded=this.open)};this.handleContentSlotChange=()=>{this.updateFilters()};this.handleFiltersSlotChange=()=>{this.recomputeFiltersFromSlot(),this.updateFilters()}}connectedCallback(){if(super.connectedCallback(),this._store=new qr(window.sessionStorage,this.storeKey),this.recomputeFiltersFromSlot(),this.storeKey){let t=this._store.get("filters");if(t){let r=JSON.parse(t);this.filters=this.filters.map(n=>({...n,checked:Object.prototype.hasOwnProperty.call(r,n.attribute)?r[n.attribute]:n.checked}))}}this.updateFilters(),this._mutationObserver.observe(this)}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown,!0),super.disconnectedCallback()}hidePullTab(){this.open=!1,this.panelExpanded=!1,document.removeEventListener("mousedown",this.handleDocumentMouseDown,!0),this.emit("zn-hide")}scheduleUpdateFilters(){this._updateFiltersScheduled||(this._updateFiltersScheduled=!0,Promise.resolve().then(()=>{this._updateFiltersScheduled=!1,this.updateFilters()}))}recomputeFiltersFromSlot(){let t=new Map(this.filters.map(a=>[a.attribute,a.checked])),r=this.querySelectorAll('[slot="filter"]'),n=[];r.forEach(a=>{let s=a.getAttribute("attribute");if(!s)return;let l=a.getAttribute("default")==="true",d=t.has(s)?!!t.get(s):l,h=a.textContent||"Unnamed Filter",m=a.getAttribute("item-selector")||"*";n.push({attribute:s,checked:d,label:h,itemSelector:m})}),this.filters=n}updateSingleFilter(t,r){let n,a=t.attribute==="*"?"":`[${t.attribute}]`;t.itemSelector&&t.itemSelector.startsWith(">")?n=qt(t.itemSelector.substring(1)+a,this,""):n=this.querySelectorAll(t.itemSelector+a),n.forEach(s=>{r?this.filters.some(d=>{if(d.attribute===t.attribute||d.checked)return!1;let h=d.attribute==="*"?"":`[${d.attribute}]`,m;return d.itemSelector&&d.itemSelector.startsWith(">")?m=qt(d.itemSelector.substring(1)+h,this,""):m=this.querySelectorAll(d.itemSelector+h),Array.from(m).includes(s)})||(s.removeAttribute("hidden"),this._hiddenElements.delete(s)):(s.setAttribute("hidden","true"),this._hiddenElements.add(s))})}updateFilters(){this._hiddenElements.forEach(t=>t.removeAttribute("hidden")),this._hiddenElements.clear(),this.filters.forEach(t=>{this.updateSingleFilter(t,t.checked)})}updateFilter(t){let r=t.target.getAttribute("data-attribute"),n=t.target.isChecked,a=this.filters.find(s=>s.attribute===r);if(a){if(this.filters=this.filters.map(s=>s.attribute===r?{...s,checked:n}:s),this.storeKey){let s=this.filters.reduce((l,d)=>(l[d.attribute]=d.checked,l),{});this._store.set("filters",JSON.stringify(s))}this.updateSingleFilter(a,n)}}render(){let t="top-start";switch(this.position){case"top-end":t="bottom-end";break;case"top-start":t="bottom-start";break;case"bottom-end":t="top-end";break;case"bottom-start":t="top-start";break}return u`
       <div class="${N({container:!0,"container--scroll":!this.noScroll})}">
         <div class="scroll-content">
           <slot @slotchange="${this.handleContentSlotChange}"></slot>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.33",
+  "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', () => {

package/src/components/settings-container/settings-container.scss

@@ -162,9 +162,9 @@ zn-button {
 .settings-container__dropdown-content {
   display: flex;
   flex-direction: column;
-  gap: var(--zn-spacing-large);
+  gap: var(--zn-spacing-small);
   background-color: rgb(var(--zn-panel));
-  padding: var(--zn-spacing-large);
+  padding: var(--zn-spacing-small);
   box-shadow: var(--zn-shadow-small);
   border-radius: var(--zn-border-radius);
   max-width: var(--zn-size-mpanel);