@kubex/zinc 1.1.155 → 1.1.156

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -56,6 +56,79 @@
56
56
  }
57
57
  ]
58
58
  },
59
+ {
60
+ "kind": "javascript-module",
61
+ "path": "components/action-bar/action-bar.js",
62
+ "declarations": [
63
+ {
64
+ "kind": "class",
65
+ "description": "",
66
+ "name": "ZnActionBar",
67
+ "cssProperties": [
68
+ {
69
+ "description": "An example CSS custom property.",
70
+ "name": "--example"
71
+ }
72
+ ],
73
+ "cssParts": [
74
+ {
75
+ "description": "The component's base wrapper.",
76
+ "name": "base"
77
+ }
78
+ ],
79
+ "slots": [
80
+ {
81
+ "description": "The default slot.",
82
+ "name": ""
83
+ },
84
+ {
85
+ "description": "An example slot.",
86
+ "name": "example"
87
+ }
88
+ ],
89
+ "members": [
90
+ {
91
+ "kind": "field",
92
+ "name": "localize",
93
+ "privacy": "private",
94
+ "readonly": true,
95
+ "default": "new LocalizeController(this)"
96
+ }
97
+ ],
98
+ "events": [
99
+ {
100
+ "description": "Emitted as an example.",
101
+ "name": "zn-event-name"
102
+ }
103
+ ],
104
+ "superclass": {
105
+ "name": "ZincElement",
106
+ "module": "/src/internal/zinc-element"
107
+ },
108
+ "summary": "Short summary of the component's intended use.",
109
+ "tagNameWithoutPrefix": "action-bar",
110
+ "tagName": "zn-action-bar",
111
+ "customElement": true,
112
+ "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 */",
113
+ "documentation": "https://zinc.style/components/action-bar",
114
+ "status": "experimental",
115
+ "since": "1.0",
116
+ "dependencies": [
117
+ "zn-example"
118
+ ]
119
+ }
120
+ ],
121
+ "exports": [
122
+ {
123
+ "kind": "js",
124
+ "name": "default",
125
+ "declaration": {
126
+ "name": "ZnActionBar",
127
+ "module": "components/action-bar/action-bar.js"
128
+ }
129
+ }
130
+ ]
131
+ },
59
132
  {
60
133
  "kind": "javascript-module",
61
134
  "path": "components/alert/alert.js",
@@ -250,79 +323,6 @@
250
323
  }
251
324
  ]
252
325
  },
253
- {
254
- "kind": "javascript-module",
255
- "path": "components/action-bar/action-bar.js",
256
- "declarations": [
257
- {
258
- "kind": "class",
259
- "description": "",
260
- "name": "ZnActionBar",
261
- "cssProperties": [
262
- {
263
- "description": "An example CSS custom property.",
264
- "name": "--example"
265
- }
266
- ],
267
- "cssParts": [
268
- {
269
- "description": "The component's base wrapper.",
270
- "name": "base"
271
- }
272
- ],
273
- "slots": [
274
- {
275
- "description": "The default slot.",
276
- "name": ""
277
- },
278
- {
279
- "description": "An example slot.",
280
- "name": "example"
281
- }
282
- ],
283
- "members": [
284
- {
285
- "kind": "field",
286
- "name": "localize",
287
- "privacy": "private",
288
- "readonly": true,
289
- "default": "new LocalizeController(this)"
290
- }
291
- ],
292
- "events": [
293
- {
294
- "description": "Emitted as an example.",
295
- "name": "zn-event-name"
296
- }
297
- ],
298
- "superclass": {
299
- "name": "ZincElement",
300
- "module": "/src/internal/zinc-element"
301
- },
302
- "summary": "Short summary of the component's intended use.",
303
- "tagNameWithoutPrefix": "action-bar",
304
- "tagName": "zn-action-bar",
305
- "customElement": true,
306
- "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 */",
307
- "documentation": "https://zinc.style/components/action-bar",
308
- "status": "experimental",
309
- "since": "1.0",
310
- "dependencies": [
311
- "zn-example"
312
- ]
313
- }
314
- ],
315
- "exports": [
316
- {
317
- "kind": "js",
318
- "name": "default",
319
- "declaration": {
320
- "name": "ZnActionBar",
321
- "module": "components/action-bar/action-bar.js"
322
- }
323
- }
324
- ]
325
- },
326
326
  {
327
327
  "kind": "javascript-module",
328
328
  "path": "components/animated-button/animated-button.js",
@@ -38273,6 +38273,16 @@
38273
38273
  "description": "Disables click-to-toggle so the value is only revealed on hover. Clicks still bubble to the parent.",
38274
38274
  "attribute": "no-toggle"
38275
38275
  },
38276
+ {
38277
+ "kind": "field",
38278
+ "name": "_isMasked",
38279
+ "type": {
38280
+ "text": "boolean"
38281
+ },
38282
+ "privacy": "private",
38283
+ "description": "Nothing is hidden when the revealed value is what's already on show, so there is nothing to reveal.",
38284
+ "readonly": true
38285
+ },
38276
38286
  {
38277
38287
  "kind": "field",
38278
38288
  "name": "_isRevealed",
@@ -40920,6 +40930,21 @@
40920
40930
  "privacy": "private",
40921
40931
  "description": "Filters visible options based on the current search query"
40922
40932
  },
40933
+ {
40934
+ "kind": "method",
40935
+ "name": "updateEmptyState",
40936
+ "privacy": "private",
40937
+ "description": "Nothing for the user to pick: either the option list is empty or every option is filtered out.\nThe search paths track this themselves, so this covers opening a dropdown with no query."
40938
+ },
40939
+ {
40940
+ "kind": "field",
40941
+ "name": "emptyStateText",
40942
+ "type": {
40943
+ "text": "string"
40944
+ },
40945
+ "privacy": "private",
40946
+ "readonly": true
40947
+ },
40923
40948
  {
40924
40949
  "kind": "method",
40925
40950
  "name": "clearSearch",
@@ -53560,7 +53585,7 @@
53560
53585
  "package": {
53561
53586
  "name": "@kubex/zinc",
53562
53587
  "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
53563
- "version": "1.1.155",
53588
+ "version": "1.1.156",
53564
53589
  "author": "",
53565
53590
  "license": "MIT"
53566
53591
  }
@@ -13,6 +13,17 @@
13
13
  }
14
14
  ]
15
15
  },
16
+ {
17
+ "name": "zn-action-bar",
18
+ "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.",
19
+ "attributes": [],
20
+ "references": [
21
+ {
22
+ "name": "Documentation",
23
+ "url": "https://zinc.style/components/action-bar"
24
+ }
25
+ ]
26
+ },
16
27
  {
17
28
  "name": "zn-alert",
18
29
  "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.",
@@ -53,17 +64,6 @@
53
64
  }
54
65
  ]
55
66
  },
56
- {
57
- "name": "zn-action-bar",
58
- "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.",
59
- "attributes": [],
60
- "references": [
61
- {
62
- "name": "Documentation",
63
- "url": "https://zinc.style/components/action-bar"
64
- }
65
- ]
66
- },
67
67
  {
68
68
  "name": "zn-animated-button",
69
69
  "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",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@kubex/zinc",
4
- "version": "1.1.155",
4
+ "version": "1.1.156",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -15,6 +15,28 @@
15
15
  "events": [],
16
16
  "js": { "properties": [], "events": [] }
17
17
  },
18
+ {
19
+ "name": "zn-action-bar",
20
+ "description": "Short summary of the component's intended use.\n\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.",
21
+ "doc-url": "",
22
+ "attributes": [],
23
+ "slots": [
24
+ { "name": "", "description": "The default slot." },
25
+ { "name": "example", "description": "An example slot." }
26
+ ],
27
+ "events": [
28
+ { "name": "zn-event-name", "description": "Emitted as an example." }
29
+ ],
30
+ "js": {
31
+ "properties": [],
32
+ "events": [
33
+ {
34
+ "name": "zn-event-name",
35
+ "description": "Emitted as an example."
36
+ }
37
+ ]
38
+ }
39
+ },
18
40
  {
19
41
  "name": "zn-alert",
20
42
  "description": "Short summary of the component's intended use.\n\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.",
@@ -83,28 +105,6 @@
83
105
  ]
84
106
  }
85
107
  },
86
- {
87
- "name": "zn-action-bar",
88
- "description": "Short summary of the component's intended use.\n\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.",
89
- "doc-url": "",
90
- "attributes": [],
91
- "slots": [
92
- { "name": "", "description": "The default slot." },
93
- { "name": "example", "description": "An example slot." }
94
- ],
95
- "events": [
96
- { "name": "zn-event-name", "description": "Emitted as an example." }
97
- ],
98
- "js": {
99
- "properties": [],
100
- "events": [
101
- {
102
- "name": "zn-event-name",
103
- "description": "Emitted as an example."
104
- }
105
- ]
106
- }
107
- },
108
108
  {
109
109
  "name": "zn-animated-button",
110
110
  "description": "\n\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.d.ts CHANGED
@@ -2954,6 +2954,12 @@ declare module "components/select/select.component" {
2954
2954
  private handleSearchInput;
2955
2955
  /** Filters visible options based on the current search query */
2956
2956
  private filterOptions;
2957
+ /**
2958
+ * Nothing for the user to pick: either the option list is empty or every option is filtered out.
2959
+ * The search paths track this themselves, so this covers opening a dropdown with no query.
2960
+ */
2961
+ private updateEmptyState;
2962
+ private get emptyStateText();
2957
2963
  /** Clears the search query and shows all options */
2958
2964
  private clearSearch;
2959
2965
  private updateOptGroupSeparators;
@@ -9156,6 +9162,8 @@ declare module "components/reveal/reveal.component" {
9156
9162
  hideDelay: number;
9157
9163
  /** Disables click-to-toggle so the value is only revealed on hover. Clicks still bubble to the parent. */
9158
9164
  noToggle: boolean;
9165
+ /** Nothing is hidden when the revealed value is what's already on show, so there is nothing to reveal. */
9166
+ private get _isMasked();
9159
9167
  private _isRevealed;
9160
9168
  private _isToggled;
9161
9169
  private _hideTimer?;
package/dist/zn.min.js CHANGED
@@ -589,7 +589,7 @@ import{a as Hn,b as z3,c as _r,d as c,e as V}from"./chunks/zn.UBLZO6CI.js";var e
589
589
  <slot @slotchange=${this.handleSlotChange}></slot>
590
590
  </div>
591
591
  </div>
592
- `}handleSlotChange(){this.disabled&&this.propagateDisabled()}propagateDisabled(){this.querySelectorAll("zn-option").forEach(t=>{t.disabled=this.disabled})}};Wn.styles=z(w0),c([p()],Wn.prototype,"label",2),c([p({type:Boolean,reflect:!0})],Wn.prototype,"disabled",2),c([K("label")],Wn.prototype,"handleLabelChange",1),c([K("disabled")],Wn.prototype,"handleDisabledChange",1);var bs=Wn;var Xu=bs;bs.define("zn-opt-group");var z0=_`@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}*,*::before,*::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:block}.select{flex:1 1 auto;display:inline-flex;width:100%;position:relative;vertical-align:middle}.select::part(popup){z-index:var(--zn-z-index-dropdown)}.select[data-current-placement^=top]::part(popup){transform-origin:bottom}.select[data-current-placement^=bottom]::part(popup){transform-origin:top}.select__combobox{flex:1;display:flex;width:100%;min-width:0;position:relative;align-items:center;justify-content:start;font-family:var(--zn-input-font-family);font-weight:var(--zn-input-font-weight);letter-spacing:var(--zn-input-letter-spacing);vertical-align:middle;overflow:hidden;cursor:pointer;transition:var(--zn-transition-fast) color,var(--zn-transition-fast) border,var(--zn-transition-fast) box-shadow,var(--zn-transition-fast) background-color}.select__prefix{display:flex;align-items:center;align-self:stretch;height:100%}.select__display-input{position:relative;width:100%;font:inherit;border:none;background:none;color:var(--zn-input-color);cursor:inherit;overflow:hidden;padding:0;margin:0;-webkit-appearance:none}.select__display-input::-moz-placeholder{color:var(--zn-input-placeholder-color)}.select__display-input::placeholder{color:var(--zn-input-placeholder-color)}.select:not(.select--disabled):hover .select__display-input{color:var(--zn-input-color-hover)}.select__display-input:focus{outline:none}.select--multiple:not(.select--placeholder-visible):not(.select--search) .select__display-input,.select--multiple.select--search:not(.select--open):not(.select--placeholder-visible) .select__display-input{position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%;opacity:0}.select--multiple.select--search.select--open .select__display-input{flex:1 1 60px;min-width:60px;width:auto;order:2;margin-inline-start:var(--zn-spacing-2x-small)}.select--multiple.select--search.select--open .select__prefix{order:0}.select--multiple.select--search.select--open .select__tags{order:1;flex:0 1 auto}.select--multiple.select--search.select--open .select__clear{order:4}.select--multiple.select--search.select--open .select__expand-icon{order:5}.select--multiple.select--search.select--open .select__combobox{flex-wrap:wrap;gap:var(--zn-spacing-2x-small);padding-inline-start:0;overflow:visible;align-content:flex-start;align-items:center;align-self:flex-start;height:auto;padding-block:var(--zn-spacing-2x-small)}.select__value-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;margin:0;opacity:0;z-index:-1}.select__tags{display:flex;flex:1;align-items:center;flex-wrap:wrap;margin-inline-start:var(--zn-spacing-2x-small)}.select__tags zn-chip{cursor:default}.select__tags zn-icon[slot=action]{cursor:pointer}.select--disabled .select__tags,.select--disabled .select__tags zn-chip,.select--disabled .select__tags zn-icon[slot=action]{cursor:not-allowed}.select--standard .select__combobox{background-color:var(--zn-input-background-color);border:solid var(--zn-input-border-width) var(--zn-input-border-color)}.select--standard.select--disabled .select__combobox{background-color:var(--zn-input-background-color-disabled);border-color:var(--zn-input-border-color-disabled);color:var(--zn-input-color-disabled);opacity:0.5;cursor:not-allowed;outline:none}.select--standard:not(.select--disabled).select--open .select__combobox,.select--standard:not(.select--disabled).select--focused .select__combobox{background-color:var(--zn-input-background-color-focus);border-color:var(--zn-input-border-color-focus);box-shadow:0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color)}.select--standard:hover:not(.select--disabled) .select__combobox{background-color:var(--zn-input-background-color-hover);border-color:var(--zn-input-border-color-hover)}.select--small .select__combobox{border-radius:var(--zn-input-border-radius-small);font-size:var(--zn-input-font-size-small);min-height:var(--zn-input-height-small);padding-block:0;padding-inline:var(--zn-spacing-small)}.select--small .select__clear{margin-inline-start:var(--zn-input-spacing-small)}.select--small .select__prefix::slotted(*){margin-inline-end:var(--zn-input-spacing-small)}.select--small.select--multiple:not(.select--placeholder-visible) .select__combobox{padding-block:2px;padding-inline-start:0}.select--small .select__tags{gap:2px}.select--medium .select__combobox{border-radius:var(--zn-input-border-radius-medium);font-size:var(--zn-input-font-size-medium);min-height:var(--zn-input-height-medium);padding-block:0;padding-inline:var(--zn-spacing-small)}.select--has-input-prefix.select--medium .select__combobox{padding-inline-start:0}.select--medium .select__clear{margin-inline-start:var(--zn-input-spacing-medium)}.select--medium .select__prefix::slotted(*){margin-inline-end:var(--zn-input-spacing-medium)}.select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox{padding-inline-start:0;padding-block:3px}.select--medium .select__tags{gap:3px}.select--large .select__combobox{border-radius:var(--zn-input-border-radius-large);font-size:var(--zn-input-font-size-large);min-height:var(--zn-input-height-large);padding-block:0;padding-inline:var(--zn-spacing-small)}.select--has-input-prefix.select--large .select__combobox{padding-inline-start:0}.select--large .select__clear{margin-inline-start:var(--zn-input-spacing-large)}.select--large .select__prefix::slotted(*){margin-inline-end:var(--zn-input-spacing-large)}.select--large.select--multiple:not(.select--placeholder-visible) .select__combobox{padding-inline-start:0;padding-block:4px}.select--large .select__tags{gap:4px}.select--pill.select--small .select__combobox{border-radius:var(--zn-input-height-small);padding:0 var(--zn-spacing-large)}.select--pill.select--medium .select__combobox{border-radius:var(--zn-input-height-medium);padding:0 var(--zn-spacing-large)}.select--pill.select--large .select__combobox{border-radius:var(--zn-input-height-large);padding:0 var(--zn-spacing-large)}.select__prefix{flex:0;display:inline-flex;align-items:center;color:var(--zn-input-icon-color)}.select--has-input-prefix.select--standard .select__combobox{padding-inline-start:0}.select__suffix{flex:0 0 auto;display:inline-flex;align-items:center}.select__suffix::slotted(*){margin-inline-start:var(--zn-spacing-x-small)}.select__clear{display:inline-flex;align-items:center;justify-content:center;font-size:var(--zn-font-size-large);color:var(--zn-input-icon-color);border:none;background:none;padding:0;transition:var(--zn-transition-fast) color;cursor:pointer}.select__clear zn-icon{--icon-size:var(--zn-font-size-large);--icon-color:var(--zn-input-icon-color)}.select__clear:hover{color:var(--zn-input-icon-color-hover)}.select__clear:hover zn-icon{--icon-color:var(--zn-input-icon-color-hover)}.select__clear:focus{outline:none}.select__expand-icon{flex:0 0 auto;display:flex;align-items:center;transition:var(--zn-transition-medium) rotate ease;rotate:0;margin-inline-start:var(--zn-spacing-small)}.select__expand-icon zn-icon{--icon-size:var(--zn-font-size-large);--icon-color:var(--zn-input-icon-color)}.select--open .select__expand-icon{rotate:-180deg}.select__spinner{animation:spin 1s linear infinite;--icon-size:var(--zn-font-size-large);--icon-color:var(--zn-input-icon-color)}@keyframes spin{from{rotate:0deg}to{rotate:360deg}}.select__fetch-error-icon{--icon-size:var(--zn-font-size-large);--icon-color:var(--zn-color-danger-600)}.select__listbox{display:block;position:relative;font-family:var(--zn-font-sans);font-size:var(--zn-font-size-medium);font-weight:var(--zn-font-weight-normal);box-shadow:var(--zn-shadow-medium);background:var(--zn-panel-background-color);border:solid var(--zn-panel-border-width) var(--zn-panel-border-color);border-radius:var(--zn-border-radius);margin:var(--zn-spacing-x-small) 0;padding-inline:0;overflow:auto;overscroll-behavior:none;max-width:var(--auto-size-available-width);max-height:min(500px,var(--auto-size-available-height))}.select__listbox ::slotted(zn-divider){--spacing:var(--zn-spacing-x-small)}.select__listbox ::slotted(small){font-size:var(--zn-font-size-x-small);font-weight:var(--zn-font-weight-semibold);line-height:var(--zn-line-height-normal);letter-spacing:var(--zn-letter-spacing-loose);text-transform:uppercase;color:var(--zn-color-neutral-600);padding-block:var(--zn-spacing-x-small) var(--zn-spacing-2x-small);padding-inline:var(--zn-spacing-small);-moz-user-select:none;user-select:none;-webkit-user-select:none}.select__listbox ::slotted(zn-opt-group){display:block}.select__listbox ::slotted(zn-opt-group[hidden]){display:none}.select__search-loading{display:flex;align-items:center;justify-content:center;gap:var(--zn-spacing-small);padding:var(--zn-spacing-medium) var(--zn-spacing-2x-large);color:var(--zn-color-neutral-500);font-size:var(--zn-font-size-medium)}.select__max-results-indicator{display:block;padding:var(--zn-spacing-small) var(--zn-spacing-2x-large);text-align:center;color:var(--zn-color-neutral-500);font-size:var(--zn-font-size-small);font-style:italic;border-top:solid var(--zn-panel-border-width) var(--zn-panel-border-color)}.select__empty-state{display:block;padding:var(--zn-spacing-medium) var(--zn-spacing-2x-large);text-align:center;color:var(--zn-color-neutral-500);font-size:var(--zn-font-size-medium)}.select__empty-state[hidden]{display:none}.select__add-option{display:flex;align-items:center;padding:var(--zn-spacing-x-small) var(--zn-spacing-small);color:var(--zn-input-color);font-size:var(--zn-font-size-small);cursor:pointer}.select__add-option:hover,.select__add-option.select__add-option--current{background-color:var(--zn-color-primary-100)}.select--search .select__combobox{cursor:text}.select--search .select__display-input{cursor:text}`;var Z=class extends S{constructor(){super(...arguments);this.formControlController=new re(this,{assumeInteractionOn:["zn-blur","zn-input"]});this.conditionalController=new gs(this);this.hasSlotController=new Y(this,"help-text","label");this.localize=new Ft(this);this.typeToSelectString="";this.hasFocus=!1;this.displayLabel="";this.selectedOptions=[];this.valueHasChanged=!1;this.inputPrefix=!1;this._searchQuery="";this._searchDisplayValue="";this._noResultsVisible=!1;this._addOptionActive=!1;this._fetchedOptions=[];this._fetchLoading=!1;this._fetchError="";this._fetchAbortController=null;this._searchDebounceTimer=null;this._searchLoading=!1;this._lastRemoteQuery=null;this._lastRemoteExhaustive=!1;this._totalResultCount=0;this._selectedRemoteItems=[];this.name="";this.nonRemovable=!1;this._value="";this.defaultValue="";this.size="medium";this.placeholder="";this.multiple=!1;this.maxOptions=0;this.maxOptionsVisible=3;this.disabled=!1;this.clearable=!1;this.open=!1;this.hoist=!1;this.pill=!1;this.search=!1;this.freeText=!1;this.label="";this.labelTooltip="";this.contextNote="";this.placement="bottom";this.helpText="";this.required=!1;this.cacheKey="";this.triggerSubmit=!1;this.getTag=t=>u`
592
+ `}handleSlotChange(){this.disabled&&this.propagateDisabled()}propagateDisabled(){this.querySelectorAll("zn-option").forEach(t=>{t.disabled=this.disabled})}};Wn.styles=z(w0),c([p()],Wn.prototype,"label",2),c([p({type:Boolean,reflect:!0})],Wn.prototype,"disabled",2),c([K("label")],Wn.prototype,"handleLabelChange",1),c([K("disabled")],Wn.prototype,"handleDisabledChange",1);var bs=Wn;var Xu=bs;bs.define("zn-opt-group");var z0=_`@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}*,*::before,*::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:block}.select{flex:1 1 auto;display:inline-flex;width:100%;position:relative;vertical-align:middle}.select::part(popup){z-index:var(--zn-z-index-dropdown)}.select[data-current-placement^=top]::part(popup){transform-origin:bottom}.select[data-current-placement^=bottom]::part(popup){transform-origin:top}.select__combobox{flex:1;display:flex;width:100%;min-width:0;position:relative;align-items:center;justify-content:start;font-family:var(--zn-input-font-family);font-weight:var(--zn-input-font-weight);letter-spacing:var(--zn-input-letter-spacing);vertical-align:middle;overflow:hidden;cursor:pointer;transition:var(--zn-transition-fast) color,var(--zn-transition-fast) border,var(--zn-transition-fast) box-shadow,var(--zn-transition-fast) background-color}.select__prefix{display:flex;align-items:center;align-self:stretch;height:100%}.select__display-input{position:relative;width:100%;font:inherit;border:none;background:none;color:var(--zn-input-color);cursor:inherit;overflow:hidden;padding:0;margin:0;-webkit-appearance:none}.select__display-input::-moz-placeholder{color:var(--zn-input-placeholder-color)}.select__display-input::placeholder{color:var(--zn-input-placeholder-color)}.select:not(.select--disabled):hover .select__display-input{color:var(--zn-input-color-hover)}.select__display-input:focus{outline:none}.select--multiple:not(.select--placeholder-visible):not(.select--search) .select__display-input,.select--multiple.select--search:not(.select--open):not(.select--placeholder-visible) .select__display-input{position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%;opacity:0}.select--multiple.select--search.select--open .select__display-input{flex:1 1 60px;min-width:60px;width:auto;order:2;margin-inline-start:var(--zn-spacing-2x-small)}.select--multiple.select--search.select--open .select__prefix{order:0}.select--multiple.select--search.select--open .select__tags{order:1;flex:0 1 auto}.select--multiple.select--search.select--open .select__clear{order:4}.select--multiple.select--search.select--open .select__expand-icon{order:5}.select--multiple.select--search.select--open .select__combobox{flex-wrap:wrap;gap:var(--zn-spacing-2x-small);padding-inline-start:0;overflow:visible;align-content:flex-start;align-items:center;align-self:flex-start;height:auto;padding-block:var(--zn-spacing-2x-small)}.select__value-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;margin:0;opacity:0;z-index:-1}.select__tags{display:flex;flex:1;align-items:center;flex-wrap:wrap;margin-inline-start:var(--zn-spacing-2x-small)}.select__tags zn-chip{cursor:default}.select__tags zn-icon[slot=action]{cursor:pointer}.select--disabled .select__tags,.select--disabled .select__tags zn-chip,.select--disabled .select__tags zn-icon[slot=action]{cursor:not-allowed}.select--standard .select__combobox{background-color:var(--zn-input-background-color);border:solid var(--zn-input-border-width) var(--zn-input-border-color)}.select--standard.select--disabled .select__combobox{background-color:var(--zn-input-background-color-disabled);border-color:var(--zn-input-border-color-disabled);color:var(--zn-input-color-disabled);opacity:0.5;cursor:not-allowed;outline:none}.select--standard:not(.select--disabled).select--open .select__combobox,.select--standard:not(.select--disabled).select--focused .select__combobox{background-color:var(--zn-input-background-color-focus);border-color:var(--zn-input-border-color-focus);box-shadow:0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color)}.select--standard:hover:not(.select--disabled) .select__combobox{background-color:var(--zn-input-background-color-hover);border-color:var(--zn-input-border-color-hover)}.select--small .select__combobox{border-radius:var(--zn-input-border-radius-small);font-size:var(--zn-input-font-size-small);min-height:var(--zn-input-height-small);padding-block:0;padding-inline:var(--zn-spacing-small)}.select--small .select__clear{margin-inline-start:var(--zn-input-spacing-small)}.select--small .select__prefix::slotted(*){margin-inline-end:var(--zn-input-spacing-small)}.select--small.select--multiple:not(.select--placeholder-visible) .select__combobox{padding-block:2px;padding-inline-start:0}.select--small .select__tags{gap:2px}.select--medium .select__combobox{border-radius:var(--zn-input-border-radius-medium);font-size:var(--zn-input-font-size-medium);min-height:var(--zn-input-height-medium);padding-block:0;padding-inline:var(--zn-spacing-small)}.select--has-input-prefix.select--medium .select__combobox{padding-inline-start:0}.select--medium .select__clear{margin-inline-start:var(--zn-input-spacing-medium)}.select--medium .select__prefix::slotted(*){margin-inline-end:var(--zn-input-spacing-medium)}.select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox{padding-inline-start:0;padding-block:3px}.select--medium .select__tags{gap:3px}.select--large .select__combobox{border-radius:var(--zn-input-border-radius-large);font-size:var(--zn-input-font-size-large);min-height:var(--zn-input-height-large);padding-block:0;padding-inline:var(--zn-spacing-small)}.select--has-input-prefix.select--large .select__combobox{padding-inline-start:0}.select--large .select__clear{margin-inline-start:var(--zn-input-spacing-large)}.select--large .select__prefix::slotted(*){margin-inline-end:var(--zn-input-spacing-large)}.select--large.select--multiple:not(.select--placeholder-visible) .select__combobox{padding-inline-start:0;padding-block:4px}.select--large .select__tags{gap:4px}.select--pill.select--small .select__combobox{border-radius:var(--zn-input-height-small);padding:0 var(--zn-spacing-large)}.select--pill.select--medium .select__combobox{border-radius:var(--zn-input-height-medium);padding:0 var(--zn-spacing-large)}.select--pill.select--large .select__combobox{border-radius:var(--zn-input-height-large);padding:0 var(--zn-spacing-large)}.select__prefix{flex:0;display:inline-flex;align-items:center;color:var(--zn-input-icon-color)}.select--has-input-prefix.select--standard .select__combobox{padding-inline-start:0}.select__suffix{flex:0 0 auto;display:inline-flex;align-items:center}.select__suffix::slotted(*){margin-inline-start:var(--zn-spacing-x-small)}.select__clear{display:inline-flex;align-items:center;justify-content:center;font-size:var(--zn-font-size-large);color:var(--zn-input-icon-color);border:none;background:none;padding:0;transition:var(--zn-transition-fast) color;cursor:pointer}.select__clear zn-icon{--icon-size:var(--zn-font-size-large);--icon-color:var(--zn-input-icon-color)}.select__clear:hover{color:var(--zn-input-icon-color-hover)}.select__clear:hover zn-icon{--icon-color:var(--zn-input-icon-color-hover)}.select__clear:focus{outline:none}.select__expand-icon{flex:0 0 auto;display:flex;align-items:center;transition:var(--zn-transition-medium) rotate ease;rotate:0;margin-inline-start:var(--zn-spacing-small)}.select__expand-icon zn-icon{--icon-size:var(--zn-font-size-large);--icon-color:var(--zn-input-icon-color)}.select--open .select__expand-icon{rotate:-180deg}.select__spinner{animation:spin 1s linear infinite;--icon-size:var(--zn-font-size-large);--icon-color:var(--zn-input-icon-color)}@keyframes spin{from{rotate:0deg}to{rotate:360deg}}.select__fetch-error-icon{--icon-size:var(--zn-font-size-large);--icon-color:var(--zn-color-danger-600)}.select__listbox{display:block;position:relative;font-family:var(--zn-font-sans);font-size:var(--zn-font-size-medium);font-weight:var(--zn-font-weight-normal);box-shadow:var(--zn-shadow-medium);background:var(--zn-panel-background-color);border:solid var(--zn-panel-border-width) var(--zn-panel-border-color);border-radius:var(--zn-border-radius);margin:var(--zn-spacing-x-small) 0;padding-inline:0;overflow:auto;overscroll-behavior:none;max-width:var(--auto-size-available-width);max-height:min(500px,var(--auto-size-available-height))}.select__listbox ::slotted(zn-divider){--spacing:var(--zn-spacing-x-small)}.select__listbox ::slotted(small){font-size:var(--zn-font-size-x-small);font-weight:var(--zn-font-weight-semibold);line-height:var(--zn-line-height-normal);letter-spacing:var(--zn-letter-spacing-loose);text-transform:uppercase;color:var(--zn-color-neutral-600);padding-block:var(--zn-spacing-x-small) var(--zn-spacing-2x-small);padding-inline:var(--zn-spacing-small);-moz-user-select:none;user-select:none;-webkit-user-select:none}.select__listbox ::slotted(zn-opt-group){display:block}.select__listbox ::slotted(zn-opt-group[hidden]){display:none}.select__search-loading{display:flex;align-items:center;justify-content:center;gap:var(--zn-spacing-small);padding:var(--zn-spacing-small) var(--zn-spacing-medium);color:var(--zn-color-neutral-500);font-size:var(--zn-font-size-medium)}.select__max-results-indicator{display:block;padding:var(--zn-spacing-small) var(--zn-spacing-2x-large);text-align:center;color:var(--zn-color-neutral-500);font-size:var(--zn-font-size-small);font-style:italic;border-top:solid var(--zn-panel-border-width) var(--zn-panel-border-color)}.select__empty-state{display:block;padding:var(--zn-spacing-small) var(--zn-spacing-medium);text-align:center;color:var(--zn-color-neutral-500);font-size:var(--zn-font-size-medium)}.select__empty-state[hidden]{display:none}.select__add-option{display:flex;align-items:center;padding:var(--zn-spacing-x-small) var(--zn-spacing-small);color:var(--zn-input-color);font-size:var(--zn-font-size-small);cursor:pointer}.select__add-option:hover,.select__add-option.select__add-option--current{background-color:var(--zn-color-primary-100)}.select--search .select__combobox{cursor:text}.select--search .select__display-input{cursor:text}`;var Z=class extends S{constructor(){super(...arguments);this.formControlController=new re(this,{assumeInteractionOn:["zn-blur","zn-input"]});this.conditionalController=new gs(this);this.hasSlotController=new Y(this,"help-text","label");this.localize=new Ft(this);this.typeToSelectString="";this.hasFocus=!1;this.displayLabel="";this.selectedOptions=[];this.valueHasChanged=!1;this.inputPrefix=!1;this._searchQuery="";this._searchDisplayValue="";this._noResultsVisible=!1;this._addOptionActive=!1;this._fetchedOptions=[];this._fetchLoading=!1;this._fetchError="";this._fetchAbortController=null;this._searchDebounceTimer=null;this._searchLoading=!1;this._lastRemoteQuery=null;this._lastRemoteExhaustive=!1;this._totalResultCount=0;this._selectedRemoteItems=[];this.name="";this.nonRemovable=!1;this._value="";this.defaultValue="";this.size="medium";this.placeholder="";this.multiple=!1;this.maxOptions=0;this.maxOptionsVisible=3;this.disabled=!1;this.clearable=!1;this.open=!1;this.hoist=!1;this.pill=!1;this.search=!1;this.freeText=!1;this.label="";this.labelTooltip="";this.contextNote="";this.placement="bottom";this.helpText="";this.required=!1;this.cacheKey="";this.triggerSubmit=!1;this.getTag=t=>u`
593
593
  <zn-chip
594
594
  part="tag"
595
595
  exportparts="
@@ -606,12 +606,12 @@ import{a as Hn,b as z3,c as _r,d as c,e as V}from"./chunks/zn.UBLZO6CI.js";var e
606
606
  <zn-icon slot="action" src="close" size="16"
607
607
  @click=${r=>this.handleTagRemove(r,t)}></zn-icon>`}
608
608
  </zn-chip>
609
- `;this.selectFirst=!1;this.distinct="";this.conditional="";this.requires="";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,b=f===null?-1:m.indexOf(f),g=Math.max(0,b);t.key==="ArrowDown"?(g=b+1,g>m.length-1&&(g=0)):t.key==="ArrowUp"?(g=b-1,g<0&&(g=m.length-1)):t.key==="Home"?g=0:t.key==="End"&&(g=m.length-1);let v=m[g];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(a=>{a.hidden=!1}),this.getAllOptGroups().forEach(a=>{a.hidden=!1}),this.updateOptGroupSeparators(),this._noResultsVisible=!1;return}let n=new Set(this.getAllOptGroups().filter(a=>a.label.toLowerCase().includes(r)));if(t.forEach(a=>{if(a.selected&&a.hidden)return;let s=a.closest("zn-opt-group");if(s&&n.has(s)){a.hidden=!1;return}let l=a.getTextLabel().toLowerCase(),d=a.value.toLowerCase(),h=l.includes(r)||d.includes(r);a.hidden=!h}),this.getAllOptGroups().forEach(a=>a.updateVisibility()),this.updateOptGroupSeparators(),this._noResultsVisible=t.filter(a=>!a.selected).every(a=>a.hidden),this.currentOption&&this.currentOption.hidden){let a=t.find(s=>!s.hidden&&!s.disabled);a&&this.setCurrentOption(a)}}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}),this.updateOptGroupSeparators()}updateOptGroupSeparators(){this.getAllOptGroups().forEach(t=>t.updateSeparator())}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.updateOptGroupSeparators(),!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"),this.triggerSubmit&&this.formControlController.submit()}))}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`
609
+ `;this.selectFirst=!1;this.distinct="";this.conditional="";this.requires="";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,b=f===null?-1:m.indexOf(f),g=Math.max(0,b);t.key==="ArrowDown"?(g=b+1,g>m.length-1&&(g=0)):t.key==="ArrowUp"?(g=b-1,g<0&&(g=m.length-1)):t.key==="Home"?g=0:t.key==="End"&&(g=m.length-1);let v=m[g];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(a=>{a.hidden=!1}),this.getAllOptGroups().forEach(a=>{a.hidden=!1}),this.updateOptGroupSeparators(),this.updateEmptyState();return}let n=new Set(this.getAllOptGroups().filter(a=>a.label.toLowerCase().includes(r)));if(t.forEach(a=>{if(a.selected&&a.hidden)return;let s=a.closest("zn-opt-group");if(s&&n.has(s)){a.hidden=!1;return}let l=a.getTextLabel().toLowerCase(),d=a.value.toLowerCase(),h=l.includes(r)||d.includes(r);a.hidden=!h}),this.getAllOptGroups().forEach(a=>a.updateVisibility()),this.updateOptGroupSeparators(),this._noResultsVisible=t.filter(a=>!a.selected).every(a=>a.hidden),this.currentOption&&this.currentOption.hidden){let a=t.find(s=>!s.hidden&&!s.disabled);a&&this.setCurrentOption(a)}}updateEmptyState(){let t=this.getAllOptions();this._noResultsVisible=t.length===0||t.every(r=>r.hidden)}get emptyStateText(){return this._searchQuery?"No matching options":"No options available"}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}),this.updateOptGroupSeparators()}updateOptGroupSeparators(){this.getAllOptGroups().forEach(t=>t.updateSeparator())}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.updateOptGroupSeparators(),!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")),this.open&&this.updateEmptyState()}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"),this.triggerSubmit&&this.formControlController.submit()}))}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`
610
610
  <div @zn-remove=${a=>this.handleTagRemove(a,t)}>
611
611
  ${typeof n=="string"?Ct(n):n}
612
612
  </div>`}else if(r===this.maxOptionsVisible)return u`
613
613
  <zn-chip>+${this.selectedOptions.length-r}</zn-chip>`;return u``})}_renderSelectedRemoteItems(){if(!this._isRemoteSearch||!this.multiple||this._selectedRemoteItems.length===0)return B;let t=new Set;for(let r of this._fetchedOptions)if(r.group!==void 0)for(let n of r.options)t.add(n.key);else t.add(r.key);return this._selectedRemoteItems.filter(r=>!t.has(r.key)).map(r=>u`
614
- <zn-option value=${r.key} hidden>${r.value}</zn-option>`)}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)}updated(t){super.updated(t),this.updateOptGroupSeparators()}firstUpdated(t){if(super.firstUpdated(t),this.distinct!==""){let r=document.querySelector(`zn-select[id="${this.distinct}"]`);r&&(r.addEventListener("zn-change",()=>{let n=Array.isArray(r.value)?r.value:[r.value];this.getAllOptions().map(s=>s).forEach(s=>{n.includes(s.value)?s.style.display="none":s.style.display=""})}),r.dispatchEvent(new Event("zn-input")))}this.conditionalController.setup(),this.dataUri&&!this.searchOnly&&this.fetchOptions().then(),this.updateHasInputPrefix(),this.updateDependencies()}handleDisabledChange(){this.disabled?(this.open=!1,this.handleOpenChange().then(),this._fetchAbortController?.abort(),this._fetchAbortController=null,this._fetchLoading=!1,this._fetchError=""):this.dataUri&&!this.searchOnly&&this.fetchOptions().then()}handleSrcChange(){this.dataUri&&!this.searchOnly?this.fetchOptions().then():(this._fetchedOptions=[],this._fetchLoading=!1,this._fetchError="",this.handleDefaultSlotChange())}_handleFetchError(t){this._fetchError=t,this._fetchLoading=!1,this._fetchAbortController=null,this.emit("zn-error",{detail:{status:400}})}_buildCacheKey(t){let r=this.cacheKey||this.dataUri;return t?`zn-select-search:${r}:${t}`:`zn-select-search:${r}`}_readCache(t){if(!this.cacheKey)return null;try{let r=localStorage.getItem(this._buildCacheKey(t));if(r)return JSON.parse(r)}catch{}return null}_writeCache(t,r){if(this.cacheKey)try{localStorage.setItem(this._buildCacheKey(t),JSON.stringify(r))}catch{}}_parseOptions(t){let r;if(Array.isArray(t))t.length>0&&t.some(a=>a&&typeof a=="object"&&"group"in a)?r=t.map(a=>"group"in a&&Array.isArray(a.options)?{group:String(a.group),options:a.options}:a):r=t;else if(t&&typeof t=="object")r=Object.entries(t).map(([n,a])=>({key:n,value:String(a)}));else return null;if(this.maxResults>0){let n=0,a=[];for(let s of r){if(n>=this.maxResults)break;if(s.group!==void 0){let l=this.maxResults-n,d=s.options.slice(0,l);d.length>0&&(a.push({group:s.group,options:d}),n+=d.length)}else a.push(s),n++}r=a}return r}async fetchOptions(t){if(!this.dataUri||this.disabled)return;let r=!!t;if(this.cacheKey){let n=this._readCache(t);if(n){this._fetchedOptions=n,this._searchLoading=!1,this._fetchLoading=!1,this._totalResultCount=0,this._noResultsVisible=n.length===0&&r,this.emit("zn-load"),this.updateComplete.then(()=>this.handleDefaultSlotChange());return}}this._fetchAbortController?.abort(),this._fetchAbortController=new AbortController,r?this._searchLoading=!0:this._fetchLoading=!0,this._fetchError="";try{let n=this.dataUri;if(t){let h=n.includes("?")?"&":"?";n=`${n}${h}${encodeURIComponent(this.searchParam)}=${encodeURIComponent(t)}`}let a=await fetch(n,{signal:this._fetchAbortController.signal,credentials:"same-origin",headers:{"x-kx-fetch-style":"zn-select-options","x-kx-context-data":this.contextData||""}});if(!a.ok){this._searchLoading=!1,this._handleFetchError(a.statusText||`HTTP ${a.status}`);return}let s=await a.json(),l=Array.isArray(s)?s.reduce((h,m)=>{if(m&&typeof m=="object"&&"group"in m){let f=m;return h+(Array.isArray(f.options)?f.options.length:0)}return h+1},0):s&&typeof s=="object"?Object.keys(s).length:0,d=this._parseOptions(s);if(!d){this._searchLoading=!1,this._handleFetchError("Expected JSON array or object of options");return}this._fetchedOptions=d,this._fetchLoading=!1,this._searchLoading=!1,this._fetchAbortController=null,this._noResultsVisible=d.length===0&&r,this._totalResultCount=this.maxResults>0&&l>this.maxResults?l:0,this._lastRemoteQuery=t??"",this._lastRemoteExhaustive=this.maxResults>0?l<this.maxResults:!0,this._writeCache(t,d),this.emit("zn-load"),this.updateComplete.then(()=>{this.handleDefaultSlotChange()})}catch(n){if(n instanceof DOMException&&n.name==="AbortError")return;this._searchLoading=!1,this._handleFetchError(n instanceof Error?n.message:"Failed to load options")}}attributeChangedCallback(t,r,n){if(super.attributeChangedCallback(t,r,n),t==="value"){let a=this.valueHasChanged;this.value=this.defaultValue,this.valueHasChanged=a}}handleValueChange(){if(!this.valueHasChanged){let n=this.valueHasChanged;this.value=this.defaultValue,this.valueHasChanged=n}let t=this.getAllOptions(),r=Array.isArray(this.value)?this.value:[this.value];this.setSelectedOptions(t.filter(n=>r.includes(n.value))),this.updateDependencies()}async handleOpenChange(){if(this.open&&!this.disabled){this.setCurrentOption(null),this._isTypeable&&(this.clearSearch(),this.displayInput.value="",this.displayInput.readOnly=!1),this.emit("zn-show"),this.addOpenListeners(),await Qu(this),this.listbox.hidden=!1,this.popup.active=!0,requestAnimationFrame(()=>{this.setCurrentOption(this.currentOption)}),this._isTypeable&&requestAnimationFrame(()=>{this.displayInput.focus({preventScroll:!0})});let{keyframes:t,options:r}=Cn(this,"select.show",{dir:this.localize.dir()});await yi(this.popup.popup,t,r),this.currentOption&&i0(this.currentOption,this.listbox,"vertical","auto"),this.emit("zn-after-show")}else{this.emit("zn-hide"),this.removeOpenListeners(),this._isTypeable&&(this.freeText&&this._searchDisplayValue.trim()&&this.commitFreeText(!1),this.clearSearch(),this.displayInput.readOnly=!0,this.displayInput.value=this.multiple?"":this.displayLabel),await Qu(this);let{keyframes:t,options:r}=Cn(this,"select.hide",{dir:this.localize.dir()});await yi(this.popup.popup,t,r),this.listbox.hidden=!0,this.popup.active=!1,this.emit("zn-after-hide")}}async show(){if(this.open||this.disabled){this.open=!1;return}return this.open=!0,Li(this,"zn-after-show")}async hide(){if(!this.open||this.disabled){this.open=!1;return}return this.open=!1,Li(this,"zn-after-hide")}checkValidity(){return this.valueInput?this.valueInput.checkValidity():!1}getForm(){return this.formControlController.getForm()}reportValidity(){return this.valueInput?this.valueInput.reportValidity():!1}setCustomValidity(t){this.valueInput.setCustomValidity(t),this.formControlController.updateValidity()}focus(t){this.displayInput.focus(t)}blur(){this.displayInput.blur()}updateDependencies(){let t=this.getRootNode();if(!t?.querySelectorAll)return;t.querySelectorAll("[data-disable-on]").forEach(n=>{let a=n.getAttribute("data-disable-on");if(!a)return;let s=null;try{s=t.querySelector(a)}catch{}if(!s){let l=a.startsWith("#")?a:`#${a}`;try{s=t.querySelector(l)}catch{}}s===this&&this.updateDependencyState(n)})}updateDependencyState(t){let r=t.getAttribute("data-disable-value");if(r!==null){let n=r.split(",").map(s=>s.trim()),a;Array.isArray(this.value)?a=this.value.some(s=>n.includes(s)):a=n.includes(String(this.value)),this.toggleDisabled(t,a)}}toggleDisabled(t,r){let n=()=>{"defaultValue"in t&&typeof t.defaultValue<"u"&&(t.value=t.defaultValue)};t.disabled=r,r&&n()}render(){let t=this.hasSlotController.test("label"),r=this.hasSlotController.test("label-tooltip"),n=this.hasSlotController.test("context-note"),a=this.hasSlotController.test("help-text"),s=this.label?!0:t,l=this.labelTooltip?!0:r,d=this.contextNote?!0:n,h=this.helpText?!0:a,m=this.clearable&&!this.disabled&&this.value.length>0,f=this.placeholder&&this.value.length===0,b=this._fetchLoading||!!this._fetchError,g=this.disabled||b;return u`
614
+ <zn-option value=${r.key} hidden>${r.value}</zn-option>`)}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)}updated(t){super.updated(t),this.updateOptGroupSeparators()}firstUpdated(t){if(super.firstUpdated(t),this.distinct!==""){let r=document.querySelector(`zn-select[id="${this.distinct}"]`);r&&(r.addEventListener("zn-change",()=>{let n=Array.isArray(r.value)?r.value:[r.value];this.getAllOptions().map(s=>s).forEach(s=>{n.includes(s.value)?s.style.display="none":s.style.display=""})}),r.dispatchEvent(new Event("zn-input")))}this.conditionalController.setup(),this.dataUri&&!this.searchOnly&&this.fetchOptions().then(),this.updateHasInputPrefix(),this.updateDependencies()}handleDisabledChange(){this.disabled?(this.open=!1,this.handleOpenChange().then(),this._fetchAbortController?.abort(),this._fetchAbortController=null,this._fetchLoading=!1,this._fetchError=""):this.dataUri&&!this.searchOnly&&this.fetchOptions().then()}handleSrcChange(){this.dataUri&&!this.searchOnly?this.fetchOptions().then():(this._fetchedOptions=[],this._fetchLoading=!1,this._fetchError="",this.handleDefaultSlotChange())}_handleFetchError(t){this._fetchError=t,this._fetchLoading=!1,this._fetchAbortController=null,this.emit("zn-error",{detail:{status:400}})}_buildCacheKey(t){let r=this.cacheKey||this.dataUri;return t?`zn-select-search:${r}:${t}`:`zn-select-search:${r}`}_readCache(t){if(!this.cacheKey)return null;try{let r=localStorage.getItem(this._buildCacheKey(t));if(r)return JSON.parse(r)}catch{}return null}_writeCache(t,r){if(this.cacheKey)try{localStorage.setItem(this._buildCacheKey(t),JSON.stringify(r))}catch{}}_parseOptions(t){let r;if(Array.isArray(t))t.length>0&&t.some(a=>a&&typeof a=="object"&&"group"in a)?r=t.map(a=>"group"in a&&Array.isArray(a.options)?{group:String(a.group),options:a.options}:a):r=t;else if(t&&typeof t=="object")r=Object.entries(t).map(([n,a])=>({key:n,value:String(a)}));else return null;if(this.maxResults>0){let n=0,a=[];for(let s of r){if(n>=this.maxResults)break;if(s.group!==void 0){let l=this.maxResults-n,d=s.options.slice(0,l);d.length>0&&(a.push({group:s.group,options:d}),n+=d.length)}else a.push(s),n++}r=a}return r}async fetchOptions(t){if(!this.dataUri||this.disabled)return;let r=!!t;if(this.cacheKey){let n=this._readCache(t);if(n){this._fetchedOptions=n,this._searchLoading=!1,this._fetchLoading=!1,this._totalResultCount=0,this._noResultsVisible=n.length===0&&r,this.emit("zn-load"),this.updateComplete.then(()=>this.handleDefaultSlotChange());return}}this._fetchAbortController?.abort(),this._fetchAbortController=new AbortController,r?this._searchLoading=!0:this._fetchLoading=!0,this._fetchError="";try{let n=this.dataUri;if(t){let h=n.includes("?")?"&":"?";n=`${n}${h}${encodeURIComponent(this.searchParam)}=${encodeURIComponent(t)}`}let a=await fetch(n,{signal:this._fetchAbortController.signal,credentials:"same-origin",headers:{"x-kx-fetch-style":"zn-select-options","x-kx-context-data":this.contextData||""}});if(!a.ok){this._searchLoading=!1,this._handleFetchError(a.statusText||`HTTP ${a.status}`);return}let s=await a.json(),l=Array.isArray(s)?s.reduce((h,m)=>{if(m&&typeof m=="object"&&"group"in m){let f=m;return h+(Array.isArray(f.options)?f.options.length:0)}return h+1},0):s&&typeof s=="object"?Object.keys(s).length:0,d=this._parseOptions(s);if(!d){this._searchLoading=!1,this._handleFetchError("Expected JSON array or object of options");return}this._fetchedOptions=d,this._fetchLoading=!1,this._searchLoading=!1,this._fetchAbortController=null,this._noResultsVisible=d.length===0&&r,this._totalResultCount=this.maxResults>0&&l>this.maxResults?l:0,this._lastRemoteQuery=t??"",this._lastRemoteExhaustive=this.maxResults>0?l<this.maxResults:!0,this._writeCache(t,d),this.emit("zn-load"),this.updateComplete.then(()=>{this.handleDefaultSlotChange()})}catch(n){if(n instanceof DOMException&&n.name==="AbortError")return;this._searchLoading=!1,this._handleFetchError(n instanceof Error?n.message:"Failed to load options")}}attributeChangedCallback(t,r,n){if(super.attributeChangedCallback(t,r,n),t==="value"){let a=this.valueHasChanged;this.value=this.defaultValue,this.valueHasChanged=a}}handleValueChange(){if(!this.valueHasChanged){let n=this.valueHasChanged;this.value=this.defaultValue,this.valueHasChanged=n}let t=this.getAllOptions(),r=Array.isArray(this.value)?this.value:[this.value];this.setSelectedOptions(t.filter(n=>r.includes(n.value))),this.updateDependencies()}async handleOpenChange(){if(this.open&&!this.disabled){this.setCurrentOption(null),this._isTypeable&&(this.clearSearch(),this.displayInput.value="",this.displayInput.readOnly=!1),this.updateEmptyState(),this.emit("zn-show"),this.addOpenListeners(),await Qu(this),this.listbox.hidden=!1,this.popup.active=!0,requestAnimationFrame(()=>{this.setCurrentOption(this.currentOption)}),this._isTypeable&&requestAnimationFrame(()=>{this.displayInput.focus({preventScroll:!0})});let{keyframes:t,options:r}=Cn(this,"select.show",{dir:this.localize.dir()});await yi(this.popup.popup,t,r),this.currentOption&&i0(this.currentOption,this.listbox,"vertical","auto"),this.emit("zn-after-show")}else{this.emit("zn-hide"),this.removeOpenListeners(),this._isTypeable&&(this.freeText&&this._searchDisplayValue.trim()&&this.commitFreeText(!1),this.clearSearch(),this.displayInput.readOnly=!0,this.displayInput.value=this.multiple?"":this.displayLabel),await Qu(this);let{keyframes:t,options:r}=Cn(this,"select.hide",{dir:this.localize.dir()});await yi(this.popup.popup,t,r),this.listbox.hidden=!0,this.popup.active=!1,this.emit("zn-after-hide")}}async show(){if(this.open||this.disabled){this.open=!1;return}return this.open=!0,Li(this,"zn-after-show")}async hide(){if(!this.open||this.disabled){this.open=!1;return}return this.open=!1,Li(this,"zn-after-hide")}checkValidity(){return this.valueInput?this.valueInput.checkValidity():!1}getForm(){return this.formControlController.getForm()}reportValidity(){return this.valueInput?this.valueInput.reportValidity():!1}setCustomValidity(t){this.valueInput.setCustomValidity(t),this.formControlController.updateValidity()}focus(t){this.displayInput.focus(t)}blur(){this.displayInput.blur()}updateDependencies(){let t=this.getRootNode();if(!t?.querySelectorAll)return;t.querySelectorAll("[data-disable-on]").forEach(n=>{let a=n.getAttribute("data-disable-on");if(!a)return;let s=null;try{s=t.querySelector(a)}catch{}if(!s){let l=a.startsWith("#")?a:`#${a}`;try{s=t.querySelector(l)}catch{}}s===this&&this.updateDependencyState(n)})}updateDependencyState(t){let r=t.getAttribute("data-disable-value");if(r!==null){let n=r.split(",").map(s=>s.trim()),a;Array.isArray(this.value)?a=this.value.some(s=>n.includes(s)):a=n.includes(String(this.value)),this.toggleDisabled(t,a)}}toggleDisabled(t,r){let n=()=>{"defaultValue"in t&&typeof t.defaultValue<"u"&&(t.value=t.defaultValue)};t.disabled=r,r&&n()}render(){let t=this.hasSlotController.test("label"),r=this.hasSlotController.test("label-tooltip"),n=this.hasSlotController.test("context-note"),a=this.hasSlotController.test("help-text"),s=this.label?!0:t,l=this.labelTooltip?!0:r,d=this.contextNote?!0:n,h=this.helpText?!0:a,m=this.clearable&&!this.disabled&&this.value.length>0,f=this.placeholder&&this.value.length===0,b=this._fetchLoading||!!this._fetchError,g=this.disabled||b;return u`
615
615
  <div
616
616
  part="form-control"
617
617
  class=${M({"form-control":!0,"form-control--small":this.size==="small","form-control--medium":this.size==="medium","form-control--large":this.size==="large","form-control--has-label":s,"form-control--has-label-tooltip":l,"form-control--has-context-note":d,"form-control--has-help-text":h})}>
@@ -760,7 +760,7 @@ import{a as Hn,b as z3,c as _r,d as c,e as V}from"./chunks/zn.UBLZO6CI.js";var e
760
760
  </div>`:u`
761
761
  <div part="empty-state" class="select__empty-state"
762
762
  ?hidden=${!this._noResultsVisible||this._freeTextAddValue!==null}>
763
- No matching options
763
+ ${this.emptyStateText}
764
764
  </div>`}
765
765
  </div>
766
766
  </zn-popup>
@@ -2277,7 +2277,7 @@ import{a as Hn,b as z3,c as _r,d as c,e as V}from"./chunks/zn.UBLZO6CI.js";var e
2277
2277
  </zn-dialog>
2278
2278
  `:B}
2279
2279
 
2280
- </div>`}};Se.styles=[z(Te),z(z1)],Se.dependencies={"zn-icon":ne,"zn-button":Me,"zn-dialog":Sa,"zn-input":lt,"zn-select":Ne,"zn-option":Ke},Se.freeInputLibraries=new Set(["gravatar","libravatar","avatar"]),c([p()],Se.prototype,"name",2),c([p()],Se.prototype,"icon",2),c([p()],Se.prototype,"label",2),c([p()],Se.prototype,"library",2),c([p()],Se.prototype,"color",2),c([p({type:Boolean,attribute:"no-color"})],Se.prototype,"noColor",2),c([p({type:Boolean,attribute:"no-library"})],Se.prototype,"noLibrary",2),c([p({attribute:"help-text"})],Se.prototype,"helpText",2),c([p({type:Boolean,reflect:!0})],Se.prototype,"disabled",2),c([p({type:Boolean,reflect:!0})],Se.prototype,"required",2),c([p({type:Boolean,attribute:"trigger-submit"})],Se.prototype,"triggerSubmit",2),c([p({type:Boolean,attribute:"allow-upload"})],Se.prototype,"allowUpload",2),c([p()],Se.prototype,"accept",2),c([p({reflect:!0})],Se.prototype,"form",2),c([Ee("icon")],Se.prototype,"defaultValue",2),c([I()],Se.prototype,"_dialogOpen",2),c([I()],Se.prototype,"_searchQuery",2),c([I()],Se.prototype,"_iconList",2),c([I()],Se.prototype,"_filteredIcons",2),c([I()],Se.prototype,"_pendingIcon",2),c([I()],Se.prototype,"_pendingLibrary",2),c([I()],Se.prototype,"_pendingColor",2),c([I()],Se.prototype,"_pendingFile",2),c([I()],Se.prototype,"_pendingFileUrl",2),c([I()],Se.prototype,"_mode",2),c([I()],Se.prototype,"_file",2),c([I()],Se.prototype,"_fileUrl",2),c([F("zn-dialog")],Se.prototype,"_dialog",2),c([F(".icon-picker__file-input")],Se.prototype,"_fileInput",2);var zs=Se;var a8=zs;zs.define("zn-icon-picker");var _1=_`@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}*,*::before,*::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:block;container-type:inline-size;width:100%}.ai{display:flex;width:100%;flex-direction:row;gap:10px}.ai:not(.ai--editing) .ai__input::part(base),.ai:not(.ai--editing) .ai__input::part(combobox),.ai:not(.ai--editing) .ai__input::part(textarea){background-color:transparent;border-color:transparent;box-shadow:none;opacity:1;cursor:initial}.ai:not(.ai--editing) .ai__input::part(input){line-height:var(--zn-line-height-looser)}.ai:not(.ai--editing) .ai__input::part(display-input){color:rgb(var(--zn-text))}.ai:not(.ai--editing) .ai__input::part(input),.ai:not(.ai--editing) .ai__input::part(combobox),.ai:not(.ai--editing) .ai__input::part(textarea){padding:0;color:rgb(var(--zn-text));text-decoration:underline;text-decoration-style:dashed;text-decoration-color:rgb(var(--zn-primary),0.5);text-underline-offset:3px}.ai:not(.ai--editing) .ai__input::part(textarea){padding-top:8px;box-shadow:none;text-decoration:none}.ai:not(.ai--editing) .ai__input::part(expand-icon){display:none}.ai:not(.ai--editing) .ai__input::part(form-control-help-text){display:none}.ai:not(.ai--editing):hover .button--edit{display:inline-block}.ai__input::part(form-control-input){margin:0}.ai__input{height:unset;opacity:1}.ai__input[dir=rtl]::part(input),.ai__input[dir=rtl]::part(textarea),.ai__input[dir=rtl]::part(combobox){text-align:left}.ai:not(.ai--editing) .ai__input::part(input)::-webkit-inner-spin-button,.ai:not(.ai--editing) .ai__input::part(input)::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ai--padded{padding:var(--zn-spacing-large)}.ai--inline{display:flex;flex-direction:row;align-items:start;gap:5px}@container (min-width:480px){.ai--inline{align-items:center}}.ai--inline .ai__input{width:100%}.ai--inline .ai__left{width:100%;display:flex;flex-direction:row;justify-content:flex-end}@container (max-width:479px){.ai--inline .ai__left{justify-content:flex-start;flex-direction:column}}.ai--editing .ai__right{display:flex !important}.ai__left{display:flex;flex-direction:column;gap:5px;width:100%}.ai--masked:not(.ai--editing) .ai__input{display:none}.ai__reveal{line-height:var(--zn-line-height-looser);color:rgb(var(--zn-text))}.ai__reveal::part(base){width:100%;text-decoration:underline;text-decoration-style:dashed;text-decoration-color:rgb(var(--zn-primary),0.5);text-underline-offset:3px}.ai:not(.ai--disabled) .ai__left{cursor:pointer}.ai__description{font-size:12px;font-weight:500;line-height:18px;color:rgb(var(--zn-text))}.ai__right{font-size:12px;color:rgb(var(--zn-primary));font-weight:500;cursor:pointer;flex-direction:row;gap:10px;align-items:center;justify-content:flex-end}.ai__right .button--edit{display:none}.ai--disabled:not(.ai--editing) .ai__input::part(input),.ai--disabled:not(.ai--editing) .ai__input::part(combobox),.ai--disabled:not(.ai--editing) .ai__input::part(textarea){text-decoration:none;caret-color:transparent;border-radius:0}.ai--disabled:not(.ai--editing) .ai__reveal::part(base){text-decoration:none}.ai--disabled:not(.ai--editing) .ai__input::part(display-input){cursor:text}.ai--disabled:not(.ai--editing) .ai__right{display:none !important}zn-textarea::part(textarea){resize:none}`;var de=class extends S{constructor(){super(...arguments);this.formControlController=new re(this,{defaultValue:t=>t.defaultValue,value:t=>{if(t.multiple){let r=typeof t.value=="string"?t.value.split(" ").filter(n=>n!==""):t.value;return r.length>0?r:""}return t.value}});this.hasSlotController=new Y(this,"help-text","[default]");this.conditionalController=new gs(this);this.value="";this.displayValue="";this.clearOnEdit=!1;this.conditional="";this.requires="";this.size="medium";this.inputType="text";this.slashItems=[];this.slashPreset="";this.slashTrigger="/";this.slashHeading="Insert";this.slashHideKeys=!1;this.slashRecentKey="";this.options={};this.iconPosition="none";this.helpText="";this.dir="auto";this.mouseEventHandler=t=>{this.isEditing&&!this.contains(t.target)&&((Array.isArray(this.value)?JSON.stringify(this.value)!==JSON.stringify(this._editStartValue):this.value!==this._editStartValue)||(this.isEditing=!1,this.value=this._valueBeforeEdit,this.input.blur()))};this.escKeyHandler=t=>{t.key==="Escape"&&this.isEditing&&(this.isEditing=!1,this.value=this._valueBeforeEdit,this.input.blur())};this.submitKeyHandler=t=>{t.key==="Enter"&&this.isEditing&&!t.shiftKey&&(this.isEditing=!1,this.emit("zn-submit",{detail:{value:this.value,element:this}}),this.formControlController.submit(),this.input.blur())};this.captureMouseDown=t=>{this.disabled&&!this.isEditing&&t.stopPropagation()};this.captureKeyDown=t=>{this.disabled&&!this.isEditing&&(t.stopPropagation(),t.preventDefault())};this.handleEditClick=t=>{t.preventDefault(),t.stopPropagation(),!this.disabled&&(this.isEditing||(this._valueBeforeEdit=this.value,this.clearOnEdit&&(this.value=this.multiple?[]:""),this._editStartValue=this.value),this.isEditing=!0)};this.handleSubmitClick=t=>{t.preventDefault(),this.isEditing=!1,this.emit("zn-submit",{detail:{value:this.value,element:this}}),this.formControlController.submit()};this.handleCancelClick=t=>{t.preventDefault(),this.isEditing=!1,this.value=this._valueBeforeEdit};this.handleBlur=()=>{this.hasFocus=!1};this.handleInput=t=>{this.disabled||!this.isEditing||(this.value=t.target.value,this.emit("zn-input"))};this.handleSlotChange=async()=>{await this.updateComplete,this.input instanceof Ne&&this.moveSlottedOptionsToSelect()}}get validity(){return this.input?.validity}get validationMessage(){return this.input.validationMessage}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(t){this.input.setCustomValidity(t)}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.escKeyHandler),document.addEventListener("keydown",this.submitKeyHandler),document.addEventListener("click",this.mouseEventHandler),this.addEventListener("mousedown",this.captureMouseDown,{capture:!0}),this.addEventListener("keydown",this.captureKeyDown,{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.escKeyHandler),document.removeEventListener("keydown",this.submitKeyHandler),document.removeEventListener("click",this.mouseEventHandler),this.removeEventListener("mousedown",this.captureMouseDown,!0),this.removeEventListener("keydown",this.captureKeyDown,!0)}async firstUpdated(){await this.updateComplete,this.input.addEventListener("onclick",this.handleEditClick),this.conditionalController.setup()}willUpdate(t){(t.has("value")||t.has("multiple"))&&(this.multiple&&typeof this.value=="string"?this.value=this.value.split(" ").filter(r=>r!==""):!this.multiple&&Array.isArray(this.value)&&(this.value=this.value.join(" ")))}async handleValueChange(){await this.updateComplete,this.formControlController.updateValidity()}async handleIsEditingChange(){await this.updateComplete,this.input instanceof Ne&&!this.isEditing&&await this.input.hide(),this.conditionalController.check()}moveSlottedOptionsToSelect(){if(!(this.input instanceof Ne))return;Array.from(this.querySelectorAll("zn-option")).forEach(r=>{this.input.appendChild(r)})}render(){let t=this.editText,r=this.hasSlotController.test("help-text"),n=this.helpText?!0:r;Object.keys(this.options).length>0&&(this.inputType="select"),this.selectProvider&&(this.inputType="data-select"),this.freeText&&!this.selectProvider&&(this.inputType="select");let a;switch(this.inputType){case"select":a=this._getSelectInput();break;case"data-select":a=this._getDataSelectInput();break;case"number":a=this._getNumberInput();break;case"textarea":a=this._getTextAreaInput();break;default:a=this._getTextInput()}return u`
2280
+ </div>`}};Se.styles=[z(Te),z(z1)],Se.dependencies={"zn-icon":ne,"zn-button":Me,"zn-dialog":Sa,"zn-input":lt,"zn-select":Ne,"zn-option":Ke},Se.freeInputLibraries=new Set(["gravatar","libravatar","avatar"]),c([p()],Se.prototype,"name",2),c([p()],Se.prototype,"icon",2),c([p()],Se.prototype,"label",2),c([p()],Se.prototype,"library",2),c([p()],Se.prototype,"color",2),c([p({type:Boolean,attribute:"no-color"})],Se.prototype,"noColor",2),c([p({type:Boolean,attribute:"no-library"})],Se.prototype,"noLibrary",2),c([p({attribute:"help-text"})],Se.prototype,"helpText",2),c([p({type:Boolean,reflect:!0})],Se.prototype,"disabled",2),c([p({type:Boolean,reflect:!0})],Se.prototype,"required",2),c([p({type:Boolean,attribute:"trigger-submit"})],Se.prototype,"triggerSubmit",2),c([p({type:Boolean,attribute:"allow-upload"})],Se.prototype,"allowUpload",2),c([p()],Se.prototype,"accept",2),c([p({reflect:!0})],Se.prototype,"form",2),c([Ee("icon")],Se.prototype,"defaultValue",2),c([I()],Se.prototype,"_dialogOpen",2),c([I()],Se.prototype,"_searchQuery",2),c([I()],Se.prototype,"_iconList",2),c([I()],Se.prototype,"_filteredIcons",2),c([I()],Se.prototype,"_pendingIcon",2),c([I()],Se.prototype,"_pendingLibrary",2),c([I()],Se.prototype,"_pendingColor",2),c([I()],Se.prototype,"_pendingFile",2),c([I()],Se.prototype,"_pendingFileUrl",2),c([I()],Se.prototype,"_mode",2),c([I()],Se.prototype,"_file",2),c([I()],Se.prototype,"_fileUrl",2),c([F("zn-dialog")],Se.prototype,"_dialog",2),c([F(".icon-picker__file-input")],Se.prototype,"_fileInput",2);var zs=Se;var a8=zs;zs.define("zn-icon-picker");var _1=_`@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}*,*::before,*::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:block;container-type:inline-size;width:100%}.ai{display:flex;width:100%;flex-direction:row;gap:10px}.ai:not(.ai--editing) .ai__input::part(base),.ai:not(.ai--editing) .ai__input::part(combobox),.ai:not(.ai--editing) .ai__input::part(textarea){background-color:transparent;border-color:transparent;box-shadow:none;opacity:1;cursor:initial}.ai:not(.ai--editing) .ai__input::part(input){line-height:var(--zn-line-height-looser)}.ai:not(.ai--editing) .ai__input::part(display-input){color:rgb(var(--zn-text))}.ai:not(.ai--editing) .ai__input::part(input),.ai:not(.ai--editing) .ai__input::part(combobox),.ai:not(.ai--editing) .ai__input::part(textarea){padding:0;color:rgb(var(--zn-text));text-decoration:underline;text-decoration-style:dashed;text-decoration-color:rgb(var(--zn-primary),0.5);text-underline-offset:3px}.ai:not(.ai--editing) .ai__input::part(textarea){padding-top:8px;box-shadow:none;text-decoration:none}.ai:not(.ai--editing) .ai__input::part(expand-icon){display:none}.ai:not(.ai--editing) .ai__input::part(form-control-help-text){display:none}.ai:not(.ai--editing):hover .button--edit{display:inline-block}.ai__input::part(form-control-input){margin:0;display:flex}.ai__input{height:unset;opacity:1}.ai__input[dir=rtl]::part(input),.ai__input[dir=rtl]::part(textarea),.ai__input[dir=rtl]::part(combobox){text-align:left}.ai:not(.ai--editing) .ai__input::part(input)::-webkit-inner-spin-button,.ai:not(.ai--editing) .ai__input::part(input)::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ai--padded{padding:var(--zn-spacing-large)}.ai--inline{display:flex;flex-direction:row;align-items:start;gap:5px}@container (min-width:480px){.ai--inline{align-items:center}}.ai--inline .ai__input{width:100%}.ai--inline .ai__left{width:100%;display:flex;flex-direction:row;justify-content:flex-end}@container (max-width:479px){.ai--inline .ai__left{justify-content:flex-start;flex-direction:column}}.ai--editing .ai__right{display:flex !important}.ai__left{display:flex;flex-direction:column;gap:5px;width:100%}.ai--masked:not(.ai--editing) .ai__input{display:none}.ai__reveal{line-height:var(--zn-input-height-medium);color:rgb(var(--zn-text))}.ai__reveal::part(base){width:100%;text-decoration:underline;text-decoration-style:dashed;text-decoration-color:rgb(var(--zn-primary),0.5);text-underline-offset:3px}.ai:not(.ai--disabled) .ai__left{cursor:pointer}.ai__description{font-size:12px;font-weight:500;line-height:18px;color:rgb(var(--zn-text))}.ai__right{font-size:12px;color:rgb(var(--zn-primary));font-weight:500;cursor:pointer;flex-direction:row;gap:10px;align-items:center;justify-content:flex-end}.ai__right .button--edit{display:none}.ai--disabled:not(.ai--editing) .ai__input::part(input),.ai--disabled:not(.ai--editing) .ai__input::part(combobox),.ai--disabled:not(.ai--editing) .ai__input::part(textarea){text-decoration:none;caret-color:transparent;border-radius:0}.ai--disabled:not(.ai--editing) .ai__reveal::part(base){text-decoration:none}.ai--disabled:not(.ai--editing) .ai__input::part(display-input){cursor:text}.ai--disabled:not(.ai--editing) .ai__right{display:none !important}zn-textarea::part(textarea){resize:none}:host([size=small]) .ai__reveal{line-height:var(--zn-input-height-small)}:host([size=large]) .ai__reveal{line-height:var(--zn-input-height-large)}`;var de=class extends S{constructor(){super(...arguments);this.formControlController=new re(this,{defaultValue:t=>t.defaultValue,value:t=>{if(t.multiple){let r=typeof t.value=="string"?t.value.split(" ").filter(n=>n!==""):t.value;return r.length>0?r:""}return t.value}});this.hasSlotController=new Y(this,"help-text","[default]");this.conditionalController=new gs(this);this.value="";this.displayValue="";this.clearOnEdit=!1;this.conditional="";this.requires="";this.size="medium";this.inputType="text";this.slashItems=[];this.slashPreset="";this.slashTrigger="/";this.slashHeading="Insert";this.slashHideKeys=!1;this.slashRecentKey="";this.options={};this.iconPosition="none";this.helpText="";this.dir="auto";this.mouseEventHandler=t=>{this.isEditing&&!this.contains(t.target)&&((Array.isArray(this.value)?JSON.stringify(this.value)!==JSON.stringify(this._editStartValue):this.value!==this._editStartValue)||(this.isEditing=!1,this.value=this._valueBeforeEdit,this.input.blur()))};this.escKeyHandler=t=>{t.key==="Escape"&&this.isEditing&&(this.isEditing=!1,this.value=this._valueBeforeEdit,this.input.blur())};this.submitKeyHandler=t=>{t.key==="Enter"&&this.isEditing&&!t.shiftKey&&(this.isEditing=!1,this.emit("zn-submit",{detail:{value:this.value,element:this}}),this.formControlController.submit(),this.input.blur())};this.captureMouseDown=t=>{this.disabled&&!this.isEditing&&t.stopPropagation()};this.captureKeyDown=t=>{this.disabled&&!this.isEditing&&(t.stopPropagation(),t.preventDefault())};this.handleEditClick=t=>{t.preventDefault(),t.stopPropagation(),!this.disabled&&(this.isEditing||(this._valueBeforeEdit=this.value,this.clearOnEdit&&(this.value=this.multiple?[]:""),this._editStartValue=this.value),this.isEditing=!0)};this.handleSubmitClick=t=>{t.preventDefault(),this.isEditing=!1,this.emit("zn-submit",{detail:{value:this.value,element:this}}),this.formControlController.submit()};this.handleCancelClick=t=>{t.preventDefault(),this.isEditing=!1,this.value=this._valueBeforeEdit};this.handleBlur=()=>{this.hasFocus=!1};this.handleInput=t=>{this.disabled||!this.isEditing||(this.value=t.target.value,this.emit("zn-input"))};this.handleSlotChange=async()=>{await this.updateComplete,this.input instanceof Ne&&this.moveSlottedOptionsToSelect()}}get validity(){return this.input?.validity}get validationMessage(){return this.input.validationMessage}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(t){this.input.setCustomValidity(t)}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.escKeyHandler),document.addEventListener("keydown",this.submitKeyHandler),document.addEventListener("click",this.mouseEventHandler),this.addEventListener("mousedown",this.captureMouseDown,{capture:!0}),this.addEventListener("keydown",this.captureKeyDown,{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.escKeyHandler),document.removeEventListener("keydown",this.submitKeyHandler),document.removeEventListener("click",this.mouseEventHandler),this.removeEventListener("mousedown",this.captureMouseDown,!0),this.removeEventListener("keydown",this.captureKeyDown,!0)}async firstUpdated(){await this.updateComplete,this.input.addEventListener("onclick",this.handleEditClick),this.conditionalController.setup()}willUpdate(t){(t.has("value")||t.has("multiple"))&&(this.multiple&&typeof this.value=="string"?this.value=this.value.split(" ").filter(r=>r!==""):!this.multiple&&Array.isArray(this.value)&&(this.value=this.value.join(" ")))}async handleValueChange(){await this.updateComplete,this.formControlController.updateValidity()}async handleIsEditingChange(){await this.updateComplete,this.input instanceof Ne&&!this.isEditing&&await this.input.hide(),this.conditionalController.check()}moveSlottedOptionsToSelect(){if(!(this.input instanceof Ne))return;Array.from(this.querySelectorAll("zn-option")).forEach(r=>{this.input.appendChild(r)})}render(){let t=this.editText,r=this.hasSlotController.test("help-text"),n=this.helpText?!0:r;(Object.keys(this.options).length>0||this.hasAttribute("options"))&&(this.inputType="select"),this.selectProvider&&(this.inputType="data-select"),this.freeText&&!this.selectProvider&&(this.inputType="select");let a;switch(this.inputType){case"select":a=this._getSelectInput();break;case"data-select":a=this._getDataSelectInput();break;case"number":a=this._getNumberInput();break;case"textarea":a=this._getTextAreaInput();break;default:a=this._getTextInput()}return u`
2281
2281
  <div class="${M({ai:!0,"ai--editing":this.isEditing,"ai--focused":this.hasFocus,"ai--disabled":this.disabled,"ai--inline":this.inline,"ai--padded":this.padded,"ai--masked":!!this.displayValue})}" dir="ltr">
2282
2282
 
2283
2283
  <div class="ai__left" @click="${this.disabled?void 0:this.handleEditClick}">
@@ -4330,16 +4330,20 @@ ${Pa(this.code(i,t))}
4330
4330
  style="margin-bottom: var(--zn-spacing-small)">
4331
4331
  <zn-icon src="search" slot="prefix"></zn-icon>
4332
4332
  </zn-input>
4333
- <slot></slot> `}};ta.styles=z(R2),c([p()],ta.prototype,"attr",2);var WL=ta;ta.define("zn-filter-container");var O2=_`@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}*,*::before,*::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:inline-block;cursor:pointer}.reveal{display:inline-grid;grid-template-areas:"stack";align-items:center;overflow:hidden}.reveal__text{grid-area:stack;line-height:inherit;transition:opacity 0.2s ease,transform 0.2s ease;will-change:opacity,transform}.reveal__text--initial{opacity:1;transform:translateY(0)}.reveal__text--revealed{opacity:0;transform:translateY(0.5em)}.reveal--revealed .reveal__text--initial{opacity:0;transform:translateY(-0.5em)}.reveal--revealed .reveal__text--revealed{opacity:1;transform:translateY(0)}`;var Wi=class extends S{constructor(){super(...arguments);this.duration=2e3;this.initial="";this.revealed="";this.hideDelay=150;this.noToggle=!1;this._isRevealed=!1;this._isToggled=!1}disconnectedCallback(){super.disconnectedCallback(),this._clearHideTimer()}_clearHideTimer(){this._hideTimer&&(clearTimeout(this._hideTimer),this._hideTimer=void 0)}handleToggleReveal(){this.noToggle||(this._clearHideTimer(),this.duration?(this._isRevealed=!0,this._isToggled=!0,this.requestUpdate(),setTimeout(()=>{this._isRevealed=!1,this._isToggled=!1,this.requestUpdate()},this.duration)):(this._isRevealed=!this._isRevealed,this._isToggled=!this._isToggled,this.requestUpdate()))}handleMouseEnter(){this._clearHideTimer(),this._isRevealed=!0,this.requestUpdate()}handleMouseLeave(){this._isToggled||(this._clearHideTimer(),this._hideTimer=setTimeout(()=>{this._hideTimer=void 0,this._isRevealed=!1,this.requestUpdate()},this.hideDelay))}render(){return u`
4333
+ <slot></slot> `}};ta.styles=z(R2),c([p()],ta.prototype,"attr",2);var WL=ta;ta.define("zn-filter-container");var O2=_`@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}*,*::before,*::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:inline-block}.reveal{display:inline-grid;grid-template-areas:"stack";align-items:center;overflow:hidden}.reveal--clickable{cursor:pointer}.reveal--static{cursor:auto}.reveal__text{grid-area:stack;line-height:inherit;transition:opacity 0.2s ease,transform 0.2s ease;will-change:opacity,transform}.reveal__text--initial{opacity:1;transform:translateY(0)}.reveal__text--revealed{opacity:0;transform:translateY(0.5em)}.reveal--revealed .reveal__text--initial{opacity:0;transform:translateY(-0.5em)}.reveal--revealed .reveal__text--revealed{opacity:1;transform:translateY(0)}`;var Wi=class extends S{constructor(){super(...arguments);this.duration=2e3;this.initial="";this.revealed="";this.hideDelay=150;this.noToggle=!1;this._isRevealed=!1;this._isToggled=!1}get _isMasked(){return this.revealed!==""&&this.revealed!==this.initial}disconnectedCallback(){super.disconnectedCallback(),this._clearHideTimer()}_clearHideTimer(){this._hideTimer&&(clearTimeout(this._hideTimer),this._hideTimer=void 0)}handleToggleReveal(){this.noToggle||(this._clearHideTimer(),this.duration?(this._isRevealed=!0,this._isToggled=!0,this.requestUpdate(),setTimeout(()=>{this._isRevealed=!1,this._isToggled=!1,this.requestUpdate()},this.duration)):(this._isRevealed=!this._isRevealed,this._isToggled=!this._isToggled,this.requestUpdate()))}handleMouseEnter(){this._clearHideTimer(),this._isRevealed=!0,this.requestUpdate()}handleMouseLeave(){this._isToggled||(this._clearHideTimer(),this._hideTimer=setTimeout(()=>{this._hideTimer=void 0,this._isRevealed=!1,this.requestUpdate()},this.hideDelay))}render(){return this._isMasked?u`
4334
4334
  <div part="base"
4335
- class=${M({reveal:!0,"reveal--revealed":this._isRevealed,"reveal--toggled":this._isToggled})}
4335
+ class=${M({reveal:!0,"reveal--clickable":!this.noToggle,"reveal--revealed":this._isRevealed,"reveal--toggled":this._isToggled})}
4336
4336
  @click="${this.handleToggleReveal}"
4337
4337
  @mouseenter="${this.handleMouseEnter}"
4338
4338
  @mouseleave="${this.handleMouseLeave}">
4339
4339
  <span class="reveal__text reveal__text--initial">${this.initial}</span>
4340
4340
  <span class="reveal__text reveal__text--revealed">${this.revealed}</span>
4341
4341
  </div>
4342
- `}};Wi.styles=z(O2),c([p({type:Number})],Wi.prototype,"duration",2),c([p()],Wi.prototype,"initial",2),c([p()],Wi.prototype,"revealed",2),c([p({type:Number,attribute:"hide-delay"})],Wi.prototype,"hideDelay",2),c([p({type:Boolean,attribute:"no-toggle"})],Wi.prototype,"noToggle",2);var KL=Wi;Wi.define("zn-reveal");var N2=_`:host{display:block;width:100%}`;var Ki=class extends S{constructor(){super();this._isPlaying=!1;this.value="";this.label="";this.placeholder="";this.files=[];this._audio=new Audio,this._audio.addEventListener("ended",()=>{this._isPlaying=!1,this._audio.currentTime=0})}disconnectedCallback(){super.disconnectedCallback(),this.stopAudio()}updated(t){super.updated(t),t.has("value")&&(this.stopAudio(),this.value&&(this._audio.src=this.value))}stopAudio(){this._audio&&(this._audio.pause(),this._audio.currentTime=0),this._isPlaying=!1}handleSelectChange(t){t.target===t.currentTarget&&(this.value=t.target.value)}togglePreview(t){if(t.stopPropagation(),!this.value){t.preventDefault(),this._isPlaying=!1,this.requestUpdate();return}this._isPlaying?(this._audio.pause(),this._isPlaying=!1):this._audio.play().then(()=>{this._isPlaying=!0}).catch(r=>{console.error("Audio playback failed:",r),this._isPlaying=!1,this.requestUpdate()})}render(){return u`
4342
+ `:u`
4343
+ <div part="base" class="reveal reveal--static">
4344
+ <span class="reveal__text">${this.initial||this.revealed}</span>
4345
+ </div>
4346
+ `}};Wi.styles=z(O2),c([p({type:Number})],Wi.prototype,"duration",2),c([p()],Wi.prototype,"initial",2),c([p()],Wi.prototype,"revealed",2),c([p({type:Number,attribute:"hide-delay"})],Wi.prototype,"hideDelay",2),c([p({type:Boolean,attribute:"no-toggle"})],Wi.prototype,"noToggle",2);var KL=Wi;Wi.define("zn-reveal");var N2=_`:host{display:block;width:100%}`;var Ki=class extends S{constructor(){super();this._isPlaying=!1;this.value="";this.label="";this.placeholder="";this.files=[];this._audio=new Audio,this._audio.addEventListener("ended",()=>{this._isPlaying=!1,this._audio.currentTime=0})}disconnectedCallback(){super.disconnectedCallback(),this.stopAudio()}updated(t){super.updated(t),t.has("value")&&(this.stopAudio(),this.value&&(this._audio.src=this.value))}stopAudio(){this._audio&&(this._audio.pause(),this._audio.currentTime=0),this._isPlaying=!1}handleSelectChange(t){t.target===t.currentTarget&&(this.value=t.target.value)}togglePreview(t){if(t.stopPropagation(),!this.value){t.preventDefault(),this._isPlaying=!1,this.requestUpdate();return}this._isPlaying?(this._audio.pause(),this._isPlaying=!1):this._audio.play().then(()=>{this._isPlaying=!0}).catch(r=>{console.error("Audio playback failed:",r),this._isPlaying=!1,this.requestUpdate()})}render(){return u`
4343
4347
  <zn-select
4344
4348
  label="${this.label}"
4345
4349
  value="${this.value}"
@@ -117,6 +117,22 @@ Use the `placeholder` attribute to add a placeholder.
117
117
  </zn-select>
118
118
  ```
119
119
 
120
+ ### Empty State
121
+
122
+ A select with nothing to choose from says so when opened, rather than showing an empty dropdown. The wording distinguishes a list that is empty from one a search has filtered down to nothing: type `zzz` into the second select below to see it.
123
+
124
+ ```html:preview
125
+ <zn-select label="No options" placeholder="Select a reason"></zn-select>
126
+ <br />
127
+ <zn-select label="Searched to nothing" search placeholder="Type to search...">
128
+ <zn-option value="au">Australia</zn-option>
129
+ <zn-option value="br">Brazil</zn-option>
130
+ <zn-option value="ca">Canada</zn-option>
131
+ </zn-select>
132
+ ```
133
+
134
+ Options that arrive later — from `data-uri`, a remote search, or appended `zn-option` elements — clear the message as soon as they land, so an empty list at first render is safe.
135
+
120
136
  ### Clearable
121
137
 
122
138
  Use the `clearable` attribute to make the control clearable. The clear button only appears when an option is selected.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kubex/zinc",
3
- "version": "1.1.155",
3
+ "version": "1.1.156",
4
4
  "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
5
5
  "keywords": [
6
6
  "web components",
@@ -368,8 +368,8 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
368
368
  const hasHelpTextSlot = this.hasSlotController.test('help-text');
369
369
  const hasHelpText = this.helpText ? true : hasHelpTextSlot;
370
370
 
371
- // Default input type to select if options are provided
372
- if (Object.keys(this.options).length > 0) {
371
+ // An options list that renders empty is still a select — never silently fall back to free text
372
+ if (Object.keys(this.options).length > 0 || this.hasAttribute('options')) {
373
373
  this.inputType = 'select';
374
374
  }
375
375
 
@@ -59,6 +59,9 @@
59
59
 
60
60
  &__input::part(form-control-input) {
61
61
  margin: 0;
62
+ // Block wrapper round an inline-flex base adds baseline strut, leaving the input
63
+ // ~1.4px taller than the reveal that replaces it
64
+ display: flex;
62
65
  }
63
66
 
64
67
  &__input {
@@ -133,7 +136,8 @@
133
136
  }
134
137
 
135
138
  &__reveal {
136
- line-height: var(--zn-line-height-looser);
139
+ // Matches the height of the input it stands in for, so entering edit mode doesn't resize the row
140
+ line-height: var(--zn-input-height-medium);
137
141
  color: rgb(var(--zn-text));
138
142
 
139
143
  // Fill the row so hovering anywhere over the field reveals the value
@@ -199,4 +203,10 @@ zn-textarea::part(textarea) {
199
203
  resize: none;
200
204
  }
201
205
 
206
+ :host([size="small"]) .ai__reveal {
207
+ line-height: var(--zn-input-height-small);
208
+ }
202
209
 
210
+ :host([size="large"]) .ai__reveal {
211
+ line-height: var(--zn-input-height-large);
212
+ }
@@ -565,4 +565,28 @@ describe('<zn-inline-edit>', () => {
565
565
  expect(submits, 'Enter belongs to the open menu, not the form').to.equal(0);
566
566
  });
567
567
  });
568
+
569
+ // The theme stylesheet isn't loaded in tests, so the sizing tokens the reveal and the input both
570
+ // key off have to be supplied for the comparison to mean anything.
571
+ it('should keep the same height whether it shows a reveal or the input it replaces', async () => {
572
+ const tokens = 'display: contents; --zn-input-height-medium: 36px; --zn-line-height-looser: 3;';
573
+ const plain = await fixture<HTMLDivElement>(html`
574
+ <div style="${tokens}">
575
+ <zn-inline-edit name="email" value="alan.jones@example.com"></zn-inline-edit>
576
+ </div>
577
+ `);
578
+ const masked = await fixture<HTMLDivElement>(html`
579
+ <div style="${tokens}">
580
+ <zn-inline-edit name="email" value="alan.jones@example.com"
581
+ display-value="\u2022\u2022\u2022\u2022\u2022@example.com"></zn-inline-edit>
582
+ </div>
583
+ `);
584
+ const [plainEdit, maskedEdit] = [plain, masked].map(el => el.querySelector<ZnInlineEdit>('zn-inline-edit')!);
585
+ await Promise.all([plainEdit.updateComplete, maskedEdit.updateComplete]);
586
+
587
+ const height = (el: ZnInlineEdit) =>
588
+ el.shadowRoot!.querySelector<HTMLElement>('.ai')!.getBoundingClientRect().height;
589
+
590
+ expect(height(maskedEdit)).to.equal(height(plainEdit));
591
+ });
568
592
  });
@@ -44,6 +44,11 @@ export default class ZnReveal extends ZincElement {
44
44
  /** Disables click-to-toggle so the value is only revealed on hover. Clicks still bubble to the parent. */
45
45
  @property({type: Boolean, attribute: 'no-toggle'}) noToggle: boolean = false;
46
46
 
47
+ /** Nothing is hidden when the revealed value is what's already on show, so there is nothing to reveal. */
48
+ private get _isMasked(): boolean {
49
+ return this.revealed !== '' && this.revealed !== this.initial;
50
+ }
51
+
47
52
  private _isRevealed: boolean = false;
48
53
  private _isToggled: boolean = false;
49
54
  private _hideTimer?: ReturnType<typeof setTimeout>;
@@ -102,10 +107,19 @@ export default class ZnReveal extends ZincElement {
102
107
  }
103
108
 
104
109
  render() {
110
+ if (!this._isMasked) {
111
+ return html`
112
+ <div part="base" class="reveal reveal--static">
113
+ <span class="reveal__text">${this.initial || this.revealed}</span>
114
+ </div>
115
+ `;
116
+ }
117
+
105
118
  return html`
106
119
  <div part="base"
107
120
  class=${classMap({
108
121
  'reveal': true,
122
+ 'reveal--clickable': !this.noToggle,
109
123
  'reveal--revealed': this._isRevealed,
110
124
  'reveal--toggled': this._isToggled,
111
125
  })}
@@ -2,7 +2,6 @@
2
2
 
3
3
  :host {
4
4
  display: inline-block;
5
- cursor: pointer;
6
5
  }
7
6
 
8
7
 
@@ -13,6 +12,16 @@
13
12
  overflow: hidden;
14
13
  }
15
14
 
15
+ // Only a click that toggles earns the pointer: a static or hover-only reveal does nothing on click.
16
+ .reveal--clickable {
17
+ cursor: pointer;
18
+ }
19
+
20
+ // cursor inherits, so a static reveal has to opt out of a clickable container's pointer
21
+ .reveal--static {
22
+ cursor: auto;
23
+ }
24
+
16
25
  .reveal__text {
17
26
  grid-area: stack;
18
27
  line-height: inherit;
@@ -21,6 +21,42 @@ describe('<zn-reveal>', () => {
21
21
  expect(container.classList.contains('reveal--revealed')).to.be.true;
22
22
  });
23
23
 
24
+ it('should render static text when the revealed value matches the initial', async () => {
25
+ const el = await fixture<ZnReveal>(html`
26
+ <zn-reveal initial="real" revealed="real"></zn-reveal>
27
+ `);
28
+ const container = el.shadowRoot!.querySelector<HTMLElement>('.reveal')!;
29
+
30
+ expect(container.classList.contains('reveal--static')).to.be.true;
31
+
32
+ container.click();
33
+ await el.updateComplete;
34
+
35
+ expect(container.classList.contains('reveal--revealed')).to.be.false;
36
+ });
37
+
38
+ it('should only show a pointer cursor when a click would toggle the value', async () => {
39
+ const cursorOf = (el: ZnReveal) =>
40
+ getComputedStyle(el.shadowRoot!.querySelector<HTMLElement>('.reveal')!).cursor;
41
+
42
+ const toggleable = await fixture<ZnReveal>(html`
43
+ <zn-reveal initial="****" revealed="real"></zn-reveal>
44
+ `);
45
+ // Inside a clickable row (an inline edit, say) the inherited pointer has to be shaken off
46
+ const unmasked = (await fixture<HTMLDivElement>(html`
47
+ <div style="cursor: pointer">
48
+ <zn-reveal initial="real" revealed="real"></zn-reveal>
49
+ </div>
50
+ `)).querySelector<ZnReveal>('zn-reveal')!;
51
+ const hoverOnly = await fixture<ZnReveal>(html`
52
+ <zn-reveal initial="****" revealed="real" no-toggle></zn-reveal>
53
+ `);
54
+
55
+ expect(cursorOf(toggleable)).to.equal('pointer');
56
+ expect(cursorOf(unmasked)).to.not.equal('pointer');
57
+ expect(cursorOf(hoverOnly)).to.not.equal('pointer');
58
+ });
59
+
24
60
  it('should not toggle on click when no-toggle is set', async () => {
25
61
  const el = await fixture<ZnReveal>(html`
26
62
  <zn-reveal initial="****" revealed="real" no-toggle></zn-reveal>
@@ -846,7 +846,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
846
846
  group.hidden = false;
847
847
  });
848
848
  this.updateOptGroupSeparators();
849
- this._noResultsVisible = false;
849
+ this.updateEmptyState();
850
850
  return;
851
851
  }
852
852
 
@@ -887,6 +887,19 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
887
887
  }
888
888
  }
889
889
 
890
+ /**
891
+ * Nothing for the user to pick: either the option list is empty or every option is filtered out.
892
+ * The search paths track this themselves, so this covers opening a dropdown with no query.
893
+ */
894
+ private updateEmptyState() {
895
+ const options = this.getAllOptions();
896
+ this._noResultsVisible = options.length === 0 || options.every(option => option.hidden);
897
+ }
898
+
899
+ private get emptyStateText(): string {
900
+ return this._searchQuery ? 'No matching options' : 'No options available';
901
+ }
902
+
890
903
  /** Clears the search query and shows all options */
891
904
  private clearSearch() {
892
905
  this._searchQuery = '';
@@ -1132,6 +1145,10 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
1132
1145
  this.emit('zn-input');
1133
1146
  this.emit('zn-change');
1134
1147
  }
1148
+
1149
+ if (this.open) {
1150
+ this.updateEmptyState();
1151
+ }
1135
1152
  }
1136
1153
 
1137
1154
  private handleTagRemove(event: ZnRemoveEvent, option: ZnOption) {
@@ -1653,6 +1670,8 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
1653
1670
  this.displayInput.readOnly = false;
1654
1671
  }
1655
1672
 
1673
+ this.updateEmptyState();
1674
+
1656
1675
  // Show
1657
1676
  this.emit('zn-show');
1658
1677
  this.addOpenListeners();
@@ -2041,7 +2060,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
2041
2060
  : html`
2042
2061
  <div part="empty-state" class="select__empty-state"
2043
2062
  ?hidden=${!this._noResultsVisible || this._freeTextAddValue !== null}>
2044
- No matching options
2063
+ ${this.emptyStateText}
2045
2064
  </div>`
2046
2065
  }
2047
2066
  </div>
@@ -444,7 +444,7 @@
444
444
  align-items: center;
445
445
  justify-content: center;
446
446
  gap: var(--zn-spacing-small);
447
- padding: var(--zn-spacing-medium) var(--zn-spacing-2x-large);
447
+ padding: var(--zn-spacing-small) var(--zn-spacing-medium);
448
448
  color: var(--zn-color-neutral-500);
449
449
  font-size: var(--zn-font-size-medium);
450
450
  }
@@ -463,7 +463,8 @@
463
463
  /* Empty state (no search results) */
464
464
  .select__empty-state {
465
465
  display: block;
466
- padding: var(--zn-spacing-medium) var(--zn-spacing-2x-large);
466
+ // Keeps the one-line popup close to the height of a single option row
467
+ padding: var(--zn-spacing-small) var(--zn-spacing-medium);
467
468
  text-align: center;
468
469
  color: var(--zn-color-neutral-500);
469
470
  font-size: var(--zn-font-size-medium);
@@ -978,3 +978,62 @@ describe('<zn-select> requires', () => {
978
978
  expect(c.disabled, 'both filled').to.be.false;
979
979
  });
980
980
  });
981
+
982
+ describe('<zn-select> empty state', () => {
983
+ const emptyState = (el: ZnSelect) =>
984
+ el.shadowRoot!.querySelector<HTMLElement>('[part="empty-state"]')!;
985
+
986
+ it('should tell the user there is nothing to pick when opened with no options', async () => {
987
+ const el = await fixture<ZnSelect>(html`
988
+ <zn-select placeholder="Select a reason"></zn-select>`);
989
+ await el.show();
990
+ await el.updateComplete;
991
+
992
+ expect(emptyState(el).hidden).to.be.false;
993
+ expect(emptyState(el).textContent!.trim()).to.equal('No options available');
994
+ });
995
+
996
+ it('should stay hidden when the select has options', async () => {
997
+ const el = await fixture<ZnSelect>(html`
998
+ <zn-select>
999
+ <zn-option value="apple">Apple</zn-option>
1000
+ </zn-select>`);
1001
+ await el.show();
1002
+ await el.updateComplete;
1003
+
1004
+ expect(emptyState(el).hidden).to.be.true;
1005
+ });
1006
+
1007
+ it('should distinguish a filtered-out list from an empty one', async () => {
1008
+ const el = await fixture<ZnSelect>(html`
1009
+ <zn-select search>
1010
+ <zn-option value="apple">Apple</zn-option>
1011
+ </zn-select>`);
1012
+ await el.show();
1013
+ await el.updateComplete;
1014
+
1015
+ const displayInput = el.shadowRoot!.querySelector<HTMLInputElement>('.select__display-input')!;
1016
+ displayInput.value = 'zzz';
1017
+ displayInput.dispatchEvent(new Event('input'));
1018
+ await el.updateComplete;
1019
+
1020
+ expect(emptyState(el).hidden).to.be.false;
1021
+ expect(emptyState(el).textContent!.trim()).to.equal('No matching options');
1022
+ });
1023
+
1024
+ it('should drop the empty state once options arrive while open', async () => {
1025
+ const el = await fixture<ZnSelect>(html`
1026
+ <zn-select></zn-select>`);
1027
+ await el.show();
1028
+ await el.updateComplete;
1029
+ expect(emptyState(el).hidden, 'empty before options').to.be.false;
1030
+
1031
+ const option = document.createElement('zn-option');
1032
+ option.value = 'apple';
1033
+ option.textContent = 'Apple';
1034
+ el.appendChild(option);
1035
+ await waitUntil(() => emptyState(el).hidden);
1036
+
1037
+ expect(emptyState(el).hidden).to.be.true;
1038
+ });
1039
+ });