@nvidia-elements/core 2.12.0 → 2.12.2
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.
- package/CHANGELOG.md +16 -0
- package/dist/accordion/accordion.examples.json +1 -1
- package/dist/accordion/accordion2.js +4 -4
- package/dist/alert/alert-group2.js +1 -1
- package/dist/alert/alert.examples.json +6 -6
- package/dist/alert/alert2.js +1 -1
- package/dist/avatar/avatar-group2.js +1 -1
- package/dist/avatar/avatar2.js +1 -1
- package/dist/badge/badge2.js +1 -1
- package/dist/breadcrumb/breadcrumb2.js +1 -1
- package/dist/bundles/index.d.ts +467 -467
- package/dist/bundles/index.js +2 -2
- package/dist/button/button.examples.json +3 -3
- package/dist/button/button2.js +1 -1
- package/dist/button-group/button-group2.js +1 -1
- package/dist/card/card.examples.json +2 -2
- package/dist/card/card2.js +4 -4
- package/dist/chat-message/chat-message.examples.json +1 -1
- package/dist/chat-message/chat-message2.js +1 -1
- package/dist/checkbox/checkbox-group2.js +1 -1
- package/dist/checkbox/checkbox.examples.json +5 -5
- package/dist/checkbox/checkbox2.js +1 -1
- package/dist/color/color.examples.json +2 -2
- package/dist/color/color2.js +1 -1
- package/dist/combobox/combobox.examples.json +7 -7
- package/dist/combobox/combobox2.js +55 -53
- package/dist/combobox/combobox2.js.map +1 -1
- package/dist/copy-button/copy-button.examples.json +1 -1
- package/dist/copy-button/copy-button2.js +1 -1
- package/dist/custom-elements.json +28 -14
- package/dist/data.snippets.json +18 -18
- package/dist/date/date.examples.json +3 -3
- package/dist/date/date2.js +1 -1
- package/dist/datetime/datetime.examples.json +2 -2
- package/dist/datetime/datetime2.js +1 -1
- package/dist/dialog/dialog-footer2.js +1 -1
- package/dist/dialog/dialog-header2.js +1 -1
- package/dist/dialog/dialog.examples.json +7 -7
- package/dist/dialog/dialog2.js +1 -1
- package/dist/divider/divider2.js +1 -1
- package/dist/dot/dot2.js +1 -1
- package/dist/drawer/drawer-content2.js +1 -1
- package/dist/drawer/drawer-footer2.js +1 -1
- package/dist/drawer/drawer-header2.js +1 -1
- package/dist/drawer/drawer.examples.json +5 -5
- package/dist/drawer/drawer2.js +1 -1
- package/dist/dropdown/dropdown-footer2.js +1 -1
- package/dist/dropdown/dropdown-header2.js +1 -1
- package/dist/dropdown/dropdown.examples.json +3 -3
- package/dist/dropdown/dropdown2.js +1 -1
- package/dist/dropdown-group/dropdown-group.js +1 -1
- package/dist/dropzone/dropzone.examples.json +2 -2
- package/dist/dropzone/dropzone2.js +1 -1
- package/dist/file/file.examples.json +2 -2
- package/dist/file/file2.js +1 -1
- package/dist/format-bytes/format-bytes2.js +1 -1
- package/dist/format-datetime/format-datetime2.js +1 -1
- package/dist/format-number/format-number2.js +1 -1
- package/dist/format-relative-time/format-relative-time2.js +1 -1
- package/dist/format-truncate/format-truncate2.js +1 -1
- package/dist/forms/control/control.examples.json +3 -3
- package/dist/forms/control/control2.js +1 -1
- package/dist/forms/control-group/control-group2.js +1 -1
- package/dist/forms/control-message/control-message2.js +1 -1
- package/dist/forms/forms.examples.json +7 -7
- package/dist/forms/validation.examples.json +4 -4
- package/dist/gauge/gauge.examples.json +2 -2
- package/dist/gauge/gauge2.js +1 -1
- package/dist/grid/cell/cell2.js +1 -1
- package/dist/grid/column/column2.js +1 -1
- package/dist/grid/footer/footer2.js +1 -1
- package/dist/grid/grid.examples.json +6 -6
- package/dist/grid/grid2.js +1 -1
- package/dist/grid/header/header2.js +1 -1
- package/dist/grid/placeholder/placeholder2.js +1 -1
- package/dist/grid/row/row2.js +1 -1
- package/dist/icon/icon.examples.json +1 -1
- package/dist/icon/icon2.js +2 -2
- package/dist/icon/icons.d.ts +2 -1
- package/dist/icon/icons.js.map +1 -1
- package/dist/icon-button/icon-button2.js +1 -1
- package/dist/index.js +1 -1
- package/dist/input/input-group.examples.json +3 -3
- package/dist/input/input-group2.js +1 -1
- package/dist/input/input.examples.json +2 -2
- package/dist/input/input2.js +1 -1
- package/dist/internal/controllers/gesture.controller.examples.json +1 -1
- package/dist/internal/controllers/popover.examples.json +5 -5
- package/dist/internal/controllers/type-popover.controller.examples.json +1 -1
- package/dist/internal/services/global.service.js +1 -1
- package/dist/internal/types/icons.d.ts +1 -0
- package/dist/internal/types/index.d.ts +1 -1
- package/dist/internal/types/index.js.map +1 -1
- package/dist/internal/utils/dom.js +18 -10
- package/dist/internal/utils/dom.js.map +1 -1
- package/dist/logo/logo2.js +1 -1
- package/dist/menu/menu-group2.js +1 -1
- package/dist/menu/menu-item2.js +1 -1
- package/dist/menu/menu.examples.json +1 -1
- package/dist/menu/menu2.js +1 -1
- package/dist/month/month.examples.json +2 -2
- package/dist/month/month2.js +1 -1
- package/dist/notification/notification-group2.js +1 -1
- package/dist/notification/notification.examples.json +5 -5
- package/dist/notification/notification2.js +1 -1
- package/dist/page/page-panel/page-panel-content2.js +1 -1
- package/dist/page/page-panel/page-panel-footer2.js +1 -1
- package/dist/page/page-panel/page-panel-header2.js +1 -1
- package/dist/page/page-panel/page-panel2.js +1 -1
- package/dist/page/page.examples.json +25 -25
- package/dist/page/page2.js +1 -1
- package/dist/page-header/page-header2.js +1 -1
- package/dist/page-loader/page-loader.examples.json +1 -1
- package/dist/page-loader/page-loader2.js +1 -1
- package/dist/pagination/pagination.examples.json +2 -2
- package/dist/pagination/pagination2.js +1 -1
- package/dist/panel/panel.examples.json +7 -7
- package/dist/panel/panel2.js +4 -4
- package/dist/password/password.examples.json +2 -2
- package/dist/password/password2.js +1 -1
- package/dist/preferences-input/preferences-input.examples.json +1 -1
- package/dist/preferences-input/preferences-input2.js +1 -1
- package/dist/progress-bar/progress-bar2.js +1 -1
- package/dist/progress-ring/progress-ring.examples.json +5 -5
- package/dist/progress-ring/progress-ring2.js +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip.examples.json +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip2.js +1 -1
- package/dist/pulse/pulse2.js +1 -1
- package/dist/radio/radio-group2.js +1 -1
- package/dist/radio/radio.examples.json +5 -5
- package/dist/radio/radio2.js +1 -1
- package/dist/range/range.examples.json +2 -2
- package/dist/range/range2.js +1 -1
- package/dist/resize-handle/resize-handle.examples.json +2 -2
- package/dist/resize-handle/resize-handle2.js +1 -1
- package/dist/search/search.examples.json +2 -2
- package/dist/search/search2.js +1 -1
- package/dist/select/select.examples.json +8 -8
- package/dist/select/select2.js +1 -1
- package/dist/skeleton/skeleton2.js +1 -1
- package/dist/sort-button/sort-button2.js +1 -1
- package/dist/sparkline/sparkline2.js +1 -1
- package/dist/star-rating/star-rating2.js +1 -1
- package/dist/steps/steps2.js +2 -2
- package/dist/switch/switch-group2.js +1 -1
- package/dist/switch/switch.examples.json +5 -5
- package/dist/switch/switch2.js +1 -1
- package/dist/tabs/tabs-group2.js +1 -1
- package/dist/tabs/tabs.examples.json +1 -1
- package/dist/tabs/tabs2.js +2 -2
- package/dist/tag/tag2.js +1 -1
- package/dist/textarea/textarea.examples.json +2 -2
- package/dist/textarea/textarea2.js +1 -1
- package/dist/time/time.examples.json +2 -2
- package/dist/time/time2.js +1 -1
- package/dist/toast/toast.examples.json +1 -1
- package/dist/toast/toast2.js +1 -1
- package/dist/toggletip/toggletip-footer2.js +1 -1
- package/dist/toggletip/toggletip-header2.js +1 -1
- package/dist/toggletip/toggletip.examples.json +5 -5
- package/dist/toggletip/toggletip2.js +1 -1
- package/dist/toolbar/toolbar.examples.json +4 -4
- package/dist/toolbar/toolbar2.js +1 -1
- package/dist/tooltip/tooltip.examples.json +6 -6
- package/dist/tooltip/tooltip2.js +1 -1
- package/dist/tree/tree-node2.js +1 -1
- package/dist/tree/tree.examples.json +2 -2
- package/dist/tree/tree2.js +1 -1
- package/dist/viewport/viewport-gridlines2.js +1 -1
- package/dist/viewport/viewport-minimap2.js +1 -1
- package/dist/viewport/viewport.examples.json +9 -9
- package/dist/viewport/viewport2.js +1 -1
- package/dist/week/week.examples.json +3 -3
- package/dist/week/week2.js +1 -1
- package/package.json +2 -1
|
@@ -19,7 +19,7 @@ import { ifDefined as x } from "lit/directives/if-defined.js";
|
|
|
19
19
|
//#region src/combobox/combobox.ts
|
|
20
20
|
var S = class extends l {
|
|
21
21
|
constructor(...e) {
|
|
22
|
-
super(...e), this.#p = [], this.#m = !1, this._associateDatalist = !1, this.#w = /* @__PURE__ */ new
|
|
22
|
+
super(...e), this.#p = [], this.#m = !1, this._associateDatalist = !1, this.#w = /* @__PURE__ */ new Map();
|
|
23
23
|
}
|
|
24
24
|
static {
|
|
25
25
|
this.styles = a([
|
|
@@ -31,7 +31,7 @@ var S = class extends l {
|
|
|
31
31
|
static {
|
|
32
32
|
this.metadata = {
|
|
33
33
|
tag: "nve-combobox",
|
|
34
|
-
version: "2.12.
|
|
34
|
+
version: "2.12.2"
|
|
35
35
|
};
|
|
36
36
|
}
|
|
37
37
|
static {
|
|
@@ -85,7 +85,7 @@ var S = class extends l {
|
|
|
85
85
|
#p;
|
|
86
86
|
#m;
|
|
87
87
|
get prefixContent() {
|
|
88
|
-
return this.#r?.multiple && !this.#h ? _`<div class="tags-label" aria-hidden="true">${this.#r.selectedOptions.length} ${this.i18n.selected}</div><div class="tags">${Array.from(this.#r.selectedOptions).map((e) => _`<nve-tag part="tag" readonly="readonly" color="gray-slate" closable .value="${e.value}" @click="${() => this.#
|
|
88
|
+
return this.#r?.multiple && !this.#h ? _`<div class="tags-label" aria-hidden="true">${this.#r.selectedOptions.length} ${this.i18n.selected}</div><div class="tags">${Array.from(this.#r.selectedOptions).map((e) => _`<nve-tag part="tag" readonly="readonly" color="gray-slate" closable .value="${e.value}" @click="${() => this.#I(e)}">${t(e)}</nve-tag>`)}</div>` : _`<slot name="prefix-icon"></slot>`;
|
|
89
89
|
}
|
|
90
90
|
get #h() {
|
|
91
91
|
return this.tagLayout === "hidden";
|
|
@@ -99,22 +99,18 @@ var S = class extends l {
|
|
|
99
99
|
get suffixContent() {
|
|
100
100
|
if (v) return y;
|
|
101
101
|
let e = this.#i, n = this.#g, r = this.#_, i = e.filter((e) => !e.hidden).filter((e) => !(e.value === "" && e.disabled)), a = i.filter((e) => !e.disabled).length === 0, o = this.#d;
|
|
102
|
-
return _`<nve-dropdown part="dropdown" .popoverType="${"manual"}" .modal="${!1}" @open="${this.#
|
|
102
|
+
return _`<nve-dropdown part="dropdown" .popoverType="${"manual"}" .modal="${!1}" @open="${this.#A}" @close="${this.#j}" hidden .anchor="${this.#s}" position="bottom"><nve-menu part="menu" role="listbox" style="--width:100%;--min-width:fit-content" aria-label="${x(this.i18n.select)}">${i.map((e) => _`<nve-menu-item part="menu-item" .option="${t(e)}" role="option" @click="${() => this.#I(e)}" ?selected="${e.selected}" aria-selected="${e.selected ? "true" : "false"}" ?disabled="${e.disabled}" aria-label="${t(e)}">${this.#v(e)} ${n || r ? t(e) : _`<span role="presentation">${(e.label ? e.label : e.value)?.split("")?.map((e, t) => _`<span ?matches="${this.#z(e, t)}">${e}</span>`)}</span>`}</nve-menu-item>`)} ${a && !o ? _`<nve-menu-item part="menu-item" .value="${""}" disabled="disabled">${this.i18n.noResults}</nve-menu-item>` : y} ${o ? _`<nve-menu-item part="create-option" role="button" aria-label="${`${this.i18n.create} "${this.input?.value.trim()}"`}" @click="${this.#L}"><nve-icon part="icon" name="add" size="sm"></nve-icon>"${this.input?.value.trim()}"</nve-menu-item>` : y}</nve-menu><slot name="footer"></slot></nve-dropdown>`;
|
|
103
103
|
}
|
|
104
104
|
#v(e) {
|
|
105
105
|
let t = this.#r;
|
|
106
106
|
return t?.multiple && this.#g ? _`<input aria-hidden="true" type="checkbox" .checked="${e.selected}" .disabled="${e.disabled}" .name="${e.selected ? "check" : void 0}">` : t?.multiple ? _`<nve-checkbox part="checkbox"><input aria-hidden="true" type="checkbox" .checked="${e.selected}" .disabled="${e.disabled}" .name="${e.selected ? "check" : void 0}"></nve-checkbox>` : t ? _`<nve-icon part="icon" name="check" size="sm"></nve-icon>` : y;
|
|
107
107
|
}
|
|
108
108
|
async firstUpdated(e) {
|
|
109
|
-
super.firstUpdated(e), this.shadowRoot.addEventListener("slotchange", () =>
|
|
110
|
-
this.#e = null, this.#n = null, this.#E();
|
|
111
|
-
}), await this.updateComplete, this.#y(), this.#b(), this.#A(), this.#j(), this.#N(), this.#U(), this.#G(), await this.#M(), this.input.setAttribute("list", ""), this.input.autocomplete = "off";
|
|
109
|
+
super.firstUpdated(e), this.shadowRoot.addEventListener("slotchange", () => this.#O()), await this.updateComplete, this.#y(), this.#b(), this.#M(), this.#N(), this.#F(), this.#G(), this.#q(), await this.#P(), this.input.setAttribute("list", ""), this.input.autocomplete = "off";
|
|
112
110
|
}
|
|
113
111
|
connectedCallback() {
|
|
114
112
|
super.connectedCallback();
|
|
115
|
-
let e = new MutationObserver((
|
|
116
|
-
e.some((e) => e.type === "childList" && e.target === this) && (this.#e = null, this.#n = null), this.#E();
|
|
117
|
-
});
|
|
113
|
+
let e = new MutationObserver(() => this.#O());
|
|
118
114
|
e.observe(this, {
|
|
119
115
|
childList: !0,
|
|
120
116
|
subtree: !0,
|
|
@@ -125,10 +121,10 @@ var S = class extends l {
|
|
|
125
121
|
"value"
|
|
126
122
|
],
|
|
127
123
|
characterData: !0
|
|
128
|
-
}), this.#p.push(e);
|
|
124
|
+
}), this.#p.push(e), this.#T();
|
|
129
125
|
}
|
|
130
126
|
disconnectedCallback() {
|
|
131
|
-
super.disconnectedCallback(), this.#p.forEach((e) => e.disconnect());
|
|
127
|
+
super.disconnectedCallback(), this.#p.forEach((e) => e.disconnect()), this.#E();
|
|
132
128
|
}
|
|
133
129
|
reset() {
|
|
134
130
|
this.#o.hidePopover(), this.#r && (this.#r.selectedIndex = -1), super.reset();
|
|
@@ -137,10 +133,10 @@ var S = class extends l {
|
|
|
137
133
|
this.#i.forEach((e) => e.selected = !0), this.requestUpdate(), this.#r.dispatchEvent(new Event("input", { bubbles: !0 })), this.#r.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
138
134
|
}
|
|
139
135
|
#y() {
|
|
140
|
-
this.#r && !this.#r.multiple && (this.#x(), this.#C()
|
|
136
|
+
this.#r && !this.#r.multiple && (this.#x(), this.#C());
|
|
141
137
|
}
|
|
142
138
|
#b() {
|
|
143
|
-
this.#r?.multiple && (this.#x(), this.#C(), this
|
|
139
|
+
this.#r?.multiple && (this.#x(), this.#C(), this._internals.states.add("multiple"));
|
|
144
140
|
}
|
|
145
141
|
#x() {
|
|
146
142
|
let e = Array.from(this.#r.selectedOptions).find((e) => e.hasAttribute("selected"));
|
|
@@ -156,38 +152,44 @@ var S = class extends l {
|
|
|
156
152
|
}
|
|
157
153
|
#w;
|
|
158
154
|
#T() {
|
|
159
|
-
this.#
|
|
160
|
-
this.#w.has(e) || (this.#w.add(e), r(e, "selected", () => this.requestUpdate()));
|
|
161
|
-
});
|
|
155
|
+
this.#e = null, this.#n = null, this.#D(), this.requestUpdate();
|
|
162
156
|
}
|
|
163
157
|
#E() {
|
|
164
|
-
this.#
|
|
165
|
-
this.#m = !1, this.#D(), this.#T(), this.requestUpdate();
|
|
166
|
-
}));
|
|
158
|
+
this.#w.forEach((e) => e?.()), this.#w.clear();
|
|
167
159
|
}
|
|
168
160
|
#D() {
|
|
169
|
-
|
|
170
|
-
|
|
161
|
+
this.isConnected && this.#i.forEach((e) => {
|
|
162
|
+
this.#w.has(e) || this.#w.set(e, r(e, "selected", () => this.requestUpdate()));
|
|
163
|
+
});
|
|
171
164
|
}
|
|
172
165
|
#O() {
|
|
173
|
-
this.#
|
|
166
|
+
this.#m || (this.#m = !0, queueMicrotask(() => {
|
|
167
|
+
this.#m = !1, this.isConnected && (this.#e = null, this.#n = null, this.#k(), this.#D(), this.requestUpdate());
|
|
168
|
+
}));
|
|
174
169
|
}
|
|
175
170
|
#k() {
|
|
176
|
-
|
|
171
|
+
let e = new Set(this.#i);
|
|
172
|
+
for (let [t, n] of this.#w) e.has(t) || (n?.(), this.#w.delete(t));
|
|
177
173
|
}
|
|
178
174
|
#A() {
|
|
175
|
+
this.#o.hidden = !1;
|
|
176
|
+
}
|
|
177
|
+
#j() {
|
|
178
|
+
this.#o.hidden = !0, this._internals.states.delete("dirty"), this.#H();
|
|
179
|
+
}
|
|
180
|
+
#M() {
|
|
179
181
|
this.addEventListener("keydown", (e) => {
|
|
180
182
|
let t = this.input.value.trim();
|
|
181
|
-
if (e.code === "Tab" && (this.#l && this.#o.matches(":popover-open") && t !== "" && (e.preventDefault(), this.#
|
|
183
|
+
if (e.code === "Tab" && (this.#l && this.#o.matches(":popover-open") && t !== "" && (e.preventDefault(), this.#U(this.#a[0].option), this.#W(this.#i.find((e) => (e.label ? e.label : e.value) === this.#a[0].option))), this.#o.hidePopover()), e.code === "Enter" && this.behaviorCreate && !this.input.disabled && t) {
|
|
182
184
|
let n = this.#f(t);
|
|
183
|
-
n ? this.#
|
|
185
|
+
n ? this.#I(n) : (e.preventDefault(), e.stopImmediatePropagation(), this.#R());
|
|
184
186
|
}
|
|
185
187
|
});
|
|
186
188
|
}
|
|
187
|
-
#
|
|
188
|
-
this.input.addEventListener("input", () => this.#
|
|
189
|
+
#N() {
|
|
190
|
+
this.input.addEventListener("input", () => this.#B()), this.shadowRoot.addEventListener("slotchange", () => this.#B());
|
|
189
191
|
}
|
|
190
|
-
async #
|
|
192
|
+
async #P() {
|
|
191
193
|
let e = this.#o;
|
|
192
194
|
await e.updateComplete;
|
|
193
195
|
let t = {
|
|
@@ -198,22 +200,22 @@ var S = class extends l {
|
|
|
198
200
|
this.#o.matches(":popover-open") && this.#o.hidePopover();
|
|
199
201
|
});
|
|
200
202
|
}
|
|
201
|
-
#
|
|
203
|
+
#F() {
|
|
202
204
|
this.#c?.addEventListener("pointerup", () => {
|
|
203
|
-
this.tagLayout === "wrap" && (this.input.focus(), setTimeout(() => this.#
|
|
205
|
+
this.tagLayout === "wrap" && (this.input.focus(), setTimeout(() => this.#V(), 0));
|
|
204
206
|
}), this.input.addEventListener("pointerdown", () => {
|
|
205
|
-
this.#
|
|
207
|
+
this.#V();
|
|
206
208
|
}), this.addEventListener("keydown", (e) => {
|
|
207
|
-
e.code !== "Tab" && e.code !== "Escape" && this.#
|
|
209
|
+
e.code !== "Tab" && e.code !== "Escape" && this.#V(), e?.code === "ArrowDown" && this.getRootNode().activeElement === this.input && (this.#o.tabIndex = 0, this.#a[0]?.focus(), e.preventDefault());
|
|
208
210
|
});
|
|
209
211
|
}
|
|
210
|
-
#
|
|
211
|
-
this.#r?.multiple || (this.#
|
|
212
|
+
#I(n) {
|
|
213
|
+
this.#r?.multiple || (this.#U(t(n)), this.#o.hidePopover(), e(this.input)), this.#r && (n.selected = !n.selected, this.#W(n)), this.requestUpdate();
|
|
212
214
|
}
|
|
213
|
-
#
|
|
214
|
-
this.#
|
|
215
|
+
#L() {
|
|
216
|
+
this.#R();
|
|
215
217
|
}
|
|
216
|
-
#
|
|
218
|
+
#R() {
|
|
217
219
|
let t = this.input.value.trim();
|
|
218
220
|
t && (this.dispatchEvent(new CustomEvent("create", {
|
|
219
221
|
detail: { value: t },
|
|
@@ -221,47 +223,47 @@ var S = class extends l {
|
|
|
221
223
|
composed: !0
|
|
222
224
|
})), this.input.value = "", this.#o.hidePopover(), e(this.input), this.requestUpdate());
|
|
223
225
|
}
|
|
224
|
-
#
|
|
226
|
+
#z(e, t) {
|
|
225
227
|
return this.#l ? this.input.value.toLowerCase()[t]?.toLowerCase() === e.toLowerCase() : !1;
|
|
226
228
|
}
|
|
227
|
-
#
|
|
229
|
+
#B() {
|
|
228
230
|
this.#i.forEach((e) => {
|
|
229
231
|
e.hidden = e.textContent.trim().length ? !e.textContent.toLocaleLowerCase().includes(this.input?.value.toLowerCase()) : !e.value.toLocaleLowerCase().includes(this.input?.value.toLowerCase());
|
|
230
232
|
}), this.requestUpdate();
|
|
231
233
|
}
|
|
232
|
-
#
|
|
233
|
-
!this.input.disabled && !this.#o.matches(":popover-open") && (this.#r ? (this.#i.forEach((e) => e.hidden = !1), this.requestUpdate()) : this.#
|
|
234
|
+
#V() {
|
|
235
|
+
!this.input.disabled && !this.#o.matches(":popover-open") && (this.#r ? (this.#i.forEach((e) => e.hidden = !1), this.requestUpdate()) : this.#B(), this.#o.style.setProperty("--min-width", `${this.#s.getBoundingClientRect().width}px`), this.#o.showPopover({ source: this.#s }), this.#o.tabIndex = -1);
|
|
234
236
|
}
|
|
235
|
-
#
|
|
236
|
-
this.#r && !this.#r.multiple && !this.#i.filter((e) => !(e.value === "" && e.disabled)).find((e) => t(e) === this.input.value) && (this.#i.forEach((e) => e.selected = !1), this.#
|
|
237
|
+
#H() {
|
|
238
|
+
this.#r && !this.#r.multiple && !this.#i.filter((e) => !(e.value === "" && e.disabled)).find((e) => t(e) === this.input.value) && (this.#i.forEach((e) => e.selected = !1), this.#U(""), this.#W({
|
|
237
239
|
value: "",
|
|
238
240
|
selected: !1
|
|
239
241
|
}));
|
|
240
242
|
}
|
|
241
|
-
#
|
|
243
|
+
#U(e) {
|
|
242
244
|
this.input.value = e, this.input.dispatchEvent(new Event("input", { bubbles: !0 })), this.input.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
243
245
|
}
|
|
244
|
-
#
|
|
246
|
+
#W(e) {
|
|
245
247
|
let t = [...this.#i, {
|
|
246
248
|
value: "",
|
|
247
249
|
selected: null
|
|
248
250
|
}].find((t) => t.value === e.value);
|
|
249
251
|
t && (t.selected = e.selected ?? null), this.#r && !this.#r.multiple && (this.#r.value = e.value), this.#r?.dispatchEvent(new Event("input", { bubbles: !0 })), this.#r?.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
250
252
|
}
|
|
251
|
-
#
|
|
253
|
+
#G() {
|
|
252
254
|
if (this.#r?.multiple && !this.#h) {
|
|
253
|
-
this.#r.selectedOptions.length > 1 && this.#
|
|
254
|
-
let e = new ResizeObserver((e) => this.#
|
|
255
|
+
this.#r.selectedOptions.length > 1 && this.#K(this.#c.getBoundingClientRect().width);
|
|
256
|
+
let e = new ResizeObserver((e) => this.#K(e[0].contentRect.width));
|
|
255
257
|
this.#p.push(e), e.observe(this.#c);
|
|
256
258
|
}
|
|
257
259
|
}
|
|
258
|
-
#
|
|
260
|
+
#K(e) {
|
|
259
261
|
this.#r?.multiple && e > this.#s.getBoundingClientRect().width - 100 ? this._internals.states.add("multiple-overflow") : this._internals.states.delete("multiple-overflow");
|
|
260
262
|
}
|
|
261
|
-
#
|
|
262
|
-
this.#
|
|
263
|
+
#q() {
|
|
264
|
+
this.#J(), this.shadowRoot.addEventListener("slotchange", () => this.#J());
|
|
263
265
|
}
|
|
264
|
-
#
|
|
266
|
+
#J() {
|
|
265
267
|
this.#u ? this._internals.states.add("footer-content") : this._internals.states.delete("footer-content");
|
|
266
268
|
}
|
|
267
269
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox2.js","names":[],"sources":["../../src/combobox/combobox.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, isServer, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport {\n createLightDismiss,\n focusElementTimeout,\n getDisplayValue,\n getElementUpdate,\n getPropertyChanges,\n scopedRegistry,\n useStyles\n} from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport { Menu, MenuItem } from '@nvidia-elements/core/menu';\nimport { Dropdown } from '@nvidia-elements/core/dropdown';\nimport { Tag } from '@nvidia-elements/core/tag';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { Checkbox } from '@nvidia-elements/core/checkbox';\nimport styles from './combobox.css?inline';\n\n/**\n * @element nve-combobox\n * @description An editable combobox with autocomplete behavior and selection support.\n * @documentation https://nvidia.github.io/elements/docs/elements/combobox/\n * @since 0.17.0\n * @entrypoint \\@nvidia-elements/core/combobox\n * @slot - default slot for an input and a datalist/select element\n * @slot prefix-icon - slot for icon before the input\n * @slot footer - slot for dropdown footer content\n * @cssprop --scroll-height\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @cssprop --font-weight\n * @cssprop --width\n * @cssprop --border-color\n * @cssprop --max-height\n * @cssprop --text-transform\n * @csspart tag - The tag element for selected items\n * @csspart dropdown - The dropdown popup element\n * @csspart menu - The menu element\n * @csspart menu-item - The menu item elements\n * @csspart checkbox - The checkbox element\n * @csspart icon - The icon element\n * @event scroll - Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`.\n * @event create - Fires when the user confirms a value that doesn't match any existing option and the `behavior-create` attribute exists. `detail: { value }`.\n * @csspart create-option - The menu item element for creating new options\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/\n */\n@scopedRegistry()\nexport class Combobox extends Control implements ContainerElement {\n /**\n * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n * Use when embedding within another container such as a toolbar.\n */\n @property({ type: String, reflect: true }) container: 'flat';\n\n /** Manage inline tag rendering for many-item select */\n @property({ type: String, reflect: true, attribute: 'tag-layout' }) tagLayout: 'hidden' | 'wrap';\n\n /** Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail. */\n @property({ type: Boolean, reflect: true, attribute: 'behavior-create' }) behaviorCreate: boolean;\n\n static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n static readonly metadata = {\n tag: 'nve-combobox',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Checkbox.metadata.tag]: Checkbox,\n [Icon.metadata.tag]: Icon,\n [Dropdown.metadata.tag]: Dropdown,\n [Menu.metadata.tag]: Menu,\n [MenuItem.metadata.tag]: MenuItem,\n [Tag.metadata.tag]: Tag\n };\n\n /**\n * If a <select> exists, on focus all options show by default.\n * If a <datalist> exists, on focus only options that match the current input value show.\n */\n\n #_datalist: HTMLSelectElement | null;\n get #datalist(): HTMLSelectElement | null {\n if (!this.#_datalist) {\n this.#_datalist = this.shadowRoot\n ? ((this.shadowRoot\n .querySelector('slot')\n ?.assignedElements({ flatten: true })\n ?.find(i => i.tagName === 'DATALIST' || i.tagName === 'SELECT') ??\n this.querySelector('datalist, select')) as HTMLSelectElement)\n : null;\n }\n return this.#_datalist;\n }\n\n #_select: HTMLSelectElement | null;\n get #select(): HTMLSelectElement | null {\n if (!this.#_select) {\n this.#_select = this.shadowRoot\n ? ((this.shadowRoot\n .querySelector('slot')\n ?.assignedElements({ flatten: true })\n ?.find(i => i.tagName === 'SELECT') ?? this.querySelector('select')) as HTMLSelectElement)\n : null;\n }\n return this.#_select;\n }\n\n get #options(): HTMLOptionElement[] {\n return Array.from(this.#datalist?.options ? this.#datalist.options : []);\n }\n\n get #items() {\n return Array.from(this.shadowRoot!.querySelectorAll<MenuItem>(MenuItem.metadata.tag));\n }\n\n get #dropdown() {\n return this.shadowRoot!.querySelector<Dropdown>(Dropdown.metadata.tag);\n }\n\n get #input() {\n return this.shadowRoot!.querySelector('[input]');\n }\n\n get #tags() {\n return this.shadowRoot!.querySelector('.tags');\n }\n\n get #hasAvailableOptions() {\n return this.#options.find(o => !o.disabled && !o.hidden);\n }\n\n get #hasFooterContent() {\n return !!this.querySelector('[slot=\"footer\"]');\n }\n\n get #showCreateItem(): boolean {\n if (!this.behaviorCreate || this.input?.disabled) return false;\n const value = this.input?.value.trim();\n if (!value) return false;\n return !this.#findOptionMatch(value);\n }\n\n #findOptionMatch(value: string): HTMLOptionElement | undefined {\n const lower = value.toLowerCase();\n return this.#options.find(o => {\n const display = o.textContent!.trim() || o.value;\n return display.toLowerCase() === lower || o.value.toLowerCase() === lower;\n });\n }\n\n #observers: (MutationObserver | ResizeObserver)[] = [];\n #syncPending = false;\n\n protected _associateDatalist = false;\n\n protected get prefixContent() {\n return this.#select?.multiple && !this.#tagLayoutIsHidden\n ? html`\n <div class=\"tags-label\" aria-hidden=\"true\">${this.#select.selectedOptions.length} ${this.i18n.selected}</div>\n <div class=\"tags\">\n ${Array.from<HTMLOptionElement>(this.#select.selectedOptions).map(\n o => html`\n <nve-tag part=\"tag\" readonly color=\"gray-slate\" closable .value=${o.value} @click=${() => this.#selectValue(o)}>${getDisplayValue(o)}</nve-tag>`\n )}\n </div>`\n : html`<slot name=\"prefix-icon\"></slot>`;\n }\n\n get #tagLayoutIsHidden() {\n return this.tagLayout === 'hidden';\n }\n\n get #largeOptionsList() {\n return (this.#datalist?.options?.length ?? 0) > 50;\n }\n\n get #isPristine() {\n return !this._internals.states.has('dirty');\n }\n\n protected get suffixContent() {\n if (isServer) return nothing;\n const options = this.#options;\n const largeOptionsList = this.#largeOptionsList;\n const isPristine = this.#isPristine;\n const visibleOptions = options.filter(o => !o.hidden).filter(o => !(o.value === '' && o.disabled));\n const hasNoResults = visibleOptions.filter(o => !o.disabled).length === 0;\n const showCreateItem = this.#showCreateItem;\n return html`\n <nve-dropdown part=\"dropdown\" .popoverType=${'manual'} .modal=${false} @open=${this.#openDropdown} @close=${this.#closeDropdown} hidden .anchor=${this.#input as HTMLElement} position=\"bottom\">\n <nve-menu part=\"menu\" role=\"listbox\" style=\"--width: 100%; --min-width: fit-content\" aria-label=${ifDefined(this.i18n.select)}>\n ${visibleOptions.map(\n o => html`\n <nve-menu-item part=\"menu-item\" .option=${getDisplayValue(o)} role=\"option\" @click=${() => this.#selectValue(o)} ?selected=${o.selected} aria-selected=${o.selected ? 'true' : 'false'} ?disabled=${o.disabled} aria-label=${getDisplayValue(o)}>\n ${this.#getOptionCheckbox(o)}\n ${largeOptionsList || isPristine ? getDisplayValue(o) : html`<span role=\"presentation\">${(o.label ? o.label : o.value)?.split('')?.map((c, ci) => html`<span ?matches=${this.#characterAtIndexMatches(c, ci)}>${c}</span>`)}</span>`}\n </nve-menu-item>`\n )}\n ${hasNoResults && !showCreateItem ? html`<nve-menu-item part=\"menu-item\" .value=${''} disabled>${this.i18n.noResults}</nve-menu-item>` : nothing}\n ${\n showCreateItem\n ? html`<nve-menu-item part=\"create-option\" role=\"button\" aria-label=${`${this.i18n.create} \"${this.input?.value.trim()}\"`} @click=${this.#onCreateItemClick}>\n <nve-icon part=\"icon\" name=\"add\" size=\"sm\"></nve-icon> \"${this.input?.value.trim()}\"\n </nve-menu-item>`\n : nothing\n }\n </nve-menu>\n <slot name=\"footer\"></slot>\n </nve-dropdown>`;\n }\n\n #getOptionCheckbox(o: HTMLOptionElement) {\n const select = this.#select;\n if (select?.multiple && this.#largeOptionsList) {\n return html`<input aria-hidden=\"true\" type=\"checkbox\" .checked=${o.selected} .disabled=${o.disabled} .name=${o.selected ? 'check' : undefined} />`;\n } else if (select?.multiple) {\n /* eslint-disable @nvidia-elements/lint/no-missing-control-label */\n return html`<nve-checkbox part=\"checkbox\"><input aria-hidden=\"true\" type=\"checkbox\" .checked=${o.selected} .disabled=${o.disabled} .name=${o.selected ? 'check' : undefined} /></nve-checkbox>`;\n } else if (select) {\n return html`<nve-icon part=\"icon\" name=\"check\" size=\"sm\"></nve-icon>`;\n } else {\n return nothing;\n }\n }\n\n async firstUpdated(props: PropertyValues<this>) {\n super.firstUpdated(props);\n this.shadowRoot!.addEventListener('slotchange', () => {\n this.#_datalist = null;\n this.#_select = null;\n this.#onSlottedChildMutation();\n });\n await this.updateComplete;\n this.#setupSingleSelect();\n this.#setupMultipleSelect();\n this.#setupAutoCompleteKeyEvents();\n this.#setupMenuItemUpdateEvents();\n this.#setupOpenKeyEvents();\n this.#setupOverflowListener();\n this.#setupSlotStates();\n await this.#setupLightDismiss();\n this.input.setAttribute('list', '');\n this.input.autocomplete = 'off';\n }\n\n connectedCallback() {\n super.connectedCallback();\n const observer = new MutationObserver(mutations => {\n if (mutations.some(m => m.type === 'childList' && m.target === this)) {\n this.#_datalist = null;\n this.#_select = null;\n }\n this.#onSlottedChildMutation();\n });\n observer.observe(this, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['selected', 'disabled', 'value'],\n characterData: true\n });\n this.#observers.push(observer);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#observers.forEach(observer => observer.disconnect());\n }\n\n reset() {\n this.#dropdown!.hidePopover();\n if (this.#select) {\n this.#select.selectedIndex = -1;\n }\n super.reset();\n }\n\n /** Select all options provided */\n selectAll() {\n this.#options.forEach(o => (o.selected = true));\n this.requestUpdate();\n this.#select!.dispatchEvent(new Event('input', { bubbles: true }));\n this.#select!.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n #setupSingleSelect() {\n if (this.#select && !this.#select.multiple) {\n this.#setupInitialValue();\n this.#syncSelectValueStates();\n this.#syncOptionSelectedStates();\n }\n }\n\n #setupMultipleSelect() {\n if (this.#select?.multiple) {\n this.#setupInitialValue();\n this.#syncSelectValueStates();\n this.#syncOptionSelectedStates();\n this._internals.states.add('multiple');\n }\n }\n\n #setupInitialValue() {\n const selected = Array.from(this.#select!.selectedOptions).find((o: HTMLOptionElement) =>\n o.hasAttribute('selected')\n );\n if (selected && !this.#select!.multiple && !this.input.defaultValue) {\n this.input.value = getDisplayValue(selected);\n }\n }\n\n #updateInputValue() {\n if (!this.#select!.multiple && !this.input.defaultValue) {\n this.input.value = getDisplayValue(\n Array.from(this.#select!.selectedOptions).find(o => o.value === this.#select!.value)!\n );\n }\n }\n\n #syncSelectValueStates() {\n this.#observers.push(\n getElementUpdate(this.#select!, 'value', () => {\n this.#updateInputValue();\n this.requestUpdate();\n })\n );\n }\n\n #trackedOptions = new Set<HTMLOptionElement>();\n #syncOptionSelectedStates() {\n this.#options.forEach(o => {\n if (!this.#trackedOptions.has(o)) {\n this.#trackedOptions.add(o);\n getPropertyChanges(o, 'selected', () => this.requestUpdate());\n }\n });\n }\n\n #onSlottedChildMutation() {\n if (!this.#syncPending) {\n this.#syncPending = true;\n queueMicrotask(() => {\n this.#syncPending = false;\n this.#cleanupStaleTrackedOptions();\n this.#syncOptionSelectedStates();\n this.requestUpdate();\n });\n }\n }\n\n #cleanupStaleTrackedOptions() {\n const currentOptions = new Set(this.#options);\n for (const tracked of this.#trackedOptions) {\n if (!currentOptions.has(tracked)) {\n this.#trackedOptions.delete(tracked);\n }\n }\n }\n\n #openDropdown() {\n this.#dropdown!.hidden = false;\n }\n\n #closeDropdown() {\n this.#dropdown!.hidden = true;\n this._internals.states.delete('dirty');\n this.#validateSingleSelectValue();\n }\n\n #setupAutoCompleteKeyEvents() {\n this.addEventListener('keydown', (e: KeyboardEvent) => {\n const value = this.input.value.trim();\n\n if (e.code === 'Tab') {\n if (this.#hasAvailableOptions && this.#dropdown!.matches(':popover-open') && value !== '') {\n e.preventDefault();\n // the menu item option property caches/stores the option value instead of value to prevent unnecessary lit lifecycle updates for each menu item\n this.#setInputValue((this.#items[0] as MenuItem & { option: string }).option);\n this.#setSelectValue(\n this.#options.find(\n o => (o.label ? o.label : o.value) === (this.#items[0] as MenuItem & { option: string }).option\n )!\n );\n }\n this.#dropdown!.hidePopover();\n }\n\n if (e.code === 'Enter' && this.behaviorCreate && !this.input.disabled && value) {\n const match = this.#findOptionMatch(value);\n if (match) {\n this.#selectValue(match);\n } else {\n e.preventDefault();\n e.stopImmediatePropagation();\n this.#dispatchCreate();\n }\n }\n });\n }\n\n #setupMenuItemUpdateEvents() {\n this.input.addEventListener('input', () => this.#filterOptions());\n this.shadowRoot!.addEventListener('slotchange', () => this.#filterOptions());\n }\n\n async #setupLightDismiss() {\n const dropdown = this.#dropdown!;\n await dropdown.updateComplete;\n const options = {\n element: dropdown.shadowRoot!.querySelector<HTMLElement>('[internal-host]')!,\n focusElement: this.input\n };\n createLightDismiss(options, () => {\n if (this.#dropdown!.matches(':popover-open')) {\n this.#dropdown!.hidePopover();\n }\n });\n }\n\n #setupOpenKeyEvents() {\n this.#tags?.addEventListener('pointerup', () => {\n if (this.tagLayout !== 'wrap') return;\n this.input.focus();\n setTimeout(() => this.#openListBox(), 0);\n });\n\n this.input.addEventListener('pointerdown', () => {\n this.#openListBox();\n });\n\n this.addEventListener('keydown', (e: KeyboardEvent) => {\n if (e.code !== 'Tab' && e.code !== 'Escape') {\n this.#openListBox();\n }\n\n if (e?.code === 'ArrowDown' && (this.getRootNode() as ShadowRoot).activeElement === this.input) {\n this.#dropdown!.tabIndex = 0;\n this.#items[0]?.focus();\n e.preventDefault();\n }\n });\n }\n\n #selectValue(option: { selected?: boolean; label?: string; value?: string }) {\n if (!this.#select?.multiple) {\n this.#setInputValue(getDisplayValue(option));\n this.#dropdown!.hidePopover();\n focusElementTimeout(this.input);\n }\n\n if (this.#select) {\n option.selected = !option.selected;\n this.#setSelectValue(option);\n }\n\n this.requestUpdate();\n }\n\n #onCreateItemClick() {\n this.#dispatchCreate();\n }\n\n #dispatchCreate() {\n const value = this.input.value.trim();\n if (value) {\n this.dispatchEvent(new CustomEvent('create', { detail: { value }, bubbles: true, composed: true }));\n this.input.value = '';\n this.#dropdown!.hidePopover();\n focusElementTimeout(this.input);\n this.requestUpdate();\n }\n }\n\n #characterAtIndexMatches(character: string, index: number) {\n if (this.#hasAvailableOptions) {\n return this.input.value.toLowerCase()[index]?.toLowerCase() === character.toLowerCase();\n }\n return false;\n }\n\n #filterOptions() {\n this.#options.forEach(option => {\n const hasLabel = option.textContent!.trim().length;\n if (hasLabel) {\n const matchesLabel = option.textContent!.toLocaleLowerCase().includes(this.input?.value.toLowerCase());\n option.hidden = !matchesLabel;\n } else {\n const matchesValue = option.value.toLocaleLowerCase().includes(this.input?.value.toLowerCase());\n option.hidden = !matchesValue;\n }\n });\n this.requestUpdate();\n }\n\n #openListBox() {\n if (!this.input.disabled && !this.#dropdown!.matches(':popover-open')) {\n if (this.#select) {\n this.#options.forEach(option => (option.hidden = false));\n this.requestUpdate();\n } else {\n this.#filterOptions();\n }\n this.#dropdown!.style.setProperty('--min-width', `${this.#input!.getBoundingClientRect().width}px`);\n // explicitly provide source as the performance optimizations in the suffixContent getter prevent the dropdown from setting its anchor/trigger reliably\n this.#dropdown!.showPopover({ source: this.#input as HTMLElement });\n this.#dropdown!.tabIndex = -1;\n }\n }\n\n #validateSingleSelectValue() {\n const invalidInputValue =\n this.#select &&\n !this.#select.multiple &&\n !this.#options.filter(o => !(o.value === '' && o.disabled)).find(o => getDisplayValue(o) === this.input.value);\n if (invalidInputValue) {\n this.#options.forEach(o => (o.selected = false));\n this.#setInputValue('');\n this.#setSelectValue({ value: '', selected: false });\n }\n }\n\n #setInputValue(value: string) {\n this.input.value = value;\n this.input.dispatchEvent(new Event('input', { bubbles: true }));\n this.input.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n #setSelectValue(option: { value?: string; selected?: boolean }) {\n const found = [...this.#options, { value: '', selected: null as boolean | null }].find(\n o => o.value === option.value\n );\n if (found) found.selected = option.selected ?? null;\n\n if (this.#select && !this.#select.multiple) {\n this.#select.value = option.value!;\n }\n\n this.#select?.dispatchEvent(new Event('input', { bubbles: true }));\n this.#select?.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n #setupOverflowListener() {\n if (this.#select?.multiple && !this.#tagLayoutIsHidden) {\n if (this.#select.selectedOptions.length > 1) {\n // only calculate initial overflow if many tags exist\n this.#updateMultipleOverflow(this.#tags!.getBoundingClientRect().width);\n }\n const observer = new ResizeObserver(entries => this.#updateMultipleOverflow(entries[0]!.contentRect.width));\n this.#observers.push(observer);\n observer.observe(this.#tags!);\n }\n }\n\n #updateMultipleOverflow(tagWidth: number) {\n const INPUT_MIN_WIDTH = 100;\n if (this.#select?.multiple && tagWidth > this.#input!.getBoundingClientRect().width - INPUT_MIN_WIDTH) {\n this._internals.states.add('multiple-overflow');\n } else {\n this._internals.states.delete('multiple-overflow');\n }\n }\n\n #setupSlotStates() {\n this.#setSlotStates();\n this.shadowRoot!.addEventListener('slotchange', () => this.#setSlotStates());\n }\n\n #setSlotStates() {\n if (this.#hasFooterContent) {\n this._internals.states.add('footer-content');\n } else {\n this._internals.states.delete('footer-content');\n }\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"combobox2.js","names":[],"sources":["../../src/combobox/combobox.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, isServer, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport {\n createLightDismiss,\n focusElementTimeout,\n getDisplayValue,\n getElementUpdate,\n getPropertyChanges,\n scopedRegistry,\n useStyles\n} from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport { Menu, MenuItem } from '@nvidia-elements/core/menu';\nimport { Dropdown } from '@nvidia-elements/core/dropdown';\nimport { Tag } from '@nvidia-elements/core/tag';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { Checkbox } from '@nvidia-elements/core/checkbox';\nimport styles from './combobox.css?inline';\n\n/**\n * @element nve-combobox\n * @description An editable combobox with autocomplete behavior and selection support.\n * @documentation https://nvidia.github.io/elements/docs/elements/combobox/\n * @since 0.17.0\n * @entrypoint \\@nvidia-elements/core/combobox\n * @slot - default slot for an input and a datalist/select element\n * @slot prefix-icon - slot for icon before the input\n * @slot footer - slot for dropdown footer content\n * @cssprop --scroll-height\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @cssprop --font-weight\n * @cssprop --width\n * @cssprop --border-color\n * @cssprop --max-height\n * @cssprop --text-transform\n * @csspart tag - The tag element for selected items\n * @csspart dropdown - The dropdown popup element\n * @csspart menu - The menu element\n * @csspart menu-item - The menu item elements\n * @csspart checkbox - The checkbox element\n * @csspart icon - The icon element\n * @event scroll - Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`.\n * @event create - Fires when the user confirms a value that doesn't match any existing option and the `behavior-create` attribute exists. `detail: { value }`.\n * @csspart create-option - The menu item element for creating new options\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/\n */\n@scopedRegistry()\nexport class Combobox extends Control implements ContainerElement {\n /**\n * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n * Use when embedding within another container such as a toolbar.\n */\n @property({ type: String, reflect: true }) container: 'flat';\n\n /** Manage inline tag rendering for many-item select */\n @property({ type: String, reflect: true, attribute: 'tag-layout' }) tagLayout: 'hidden' | 'wrap';\n\n /** Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail. */\n @property({ type: Boolean, reflect: true, attribute: 'behavior-create' }) behaviorCreate: boolean;\n\n static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n static readonly metadata = {\n tag: 'nve-combobox',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Checkbox.metadata.tag]: Checkbox,\n [Icon.metadata.tag]: Icon,\n [Dropdown.metadata.tag]: Dropdown,\n [Menu.metadata.tag]: Menu,\n [MenuItem.metadata.tag]: MenuItem,\n [Tag.metadata.tag]: Tag\n };\n\n /**\n * If a <select> exists, on focus all options show by default.\n * If a <datalist> exists, on focus only options that match the current input value show.\n */\n\n #_datalist: HTMLSelectElement | null;\n get #datalist(): HTMLSelectElement | null {\n if (!this.#_datalist) {\n this.#_datalist = this.shadowRoot\n ? ((this.shadowRoot\n .querySelector('slot')\n ?.assignedElements({ flatten: true })\n ?.find(i => i.tagName === 'DATALIST' || i.tagName === 'SELECT') ??\n this.querySelector('datalist, select')) as HTMLSelectElement)\n : null;\n }\n return this.#_datalist;\n }\n\n #_select: HTMLSelectElement | null;\n get #select(): HTMLSelectElement | null {\n if (!this.#_select) {\n this.#_select = this.shadowRoot\n ? ((this.shadowRoot\n .querySelector('slot')\n ?.assignedElements({ flatten: true })\n ?.find(i => i.tagName === 'SELECT') ?? this.querySelector('select')) as HTMLSelectElement)\n : null;\n }\n return this.#_select;\n }\n\n get #options(): HTMLOptionElement[] {\n return Array.from(this.#datalist?.options ? this.#datalist.options : []);\n }\n\n get #items() {\n return Array.from(this.shadowRoot!.querySelectorAll<MenuItem>(MenuItem.metadata.tag));\n }\n\n get #dropdown() {\n return this.shadowRoot!.querySelector<Dropdown>(Dropdown.metadata.tag);\n }\n\n get #input() {\n return this.shadowRoot!.querySelector('[input]');\n }\n\n get #tags() {\n return this.shadowRoot!.querySelector('.tags');\n }\n\n get #hasAvailableOptions() {\n return this.#options.find(o => !o.disabled && !o.hidden);\n }\n\n get #hasFooterContent() {\n return !!this.querySelector('[slot=\"footer\"]');\n }\n\n get #showCreateItem(): boolean {\n if (!this.behaviorCreate || this.input?.disabled) return false;\n const value = this.input?.value.trim();\n if (!value) return false;\n return !this.#findOptionMatch(value);\n }\n\n #findOptionMatch(value: string): HTMLOptionElement | undefined {\n const lower = value.toLowerCase();\n return this.#options.find(o => {\n const display = o.textContent!.trim() || o.value;\n return display.toLowerCase() === lower || o.value.toLowerCase() === lower;\n });\n }\n\n #observers: (MutationObserver | ResizeObserver)[] = [];\n #syncPending = false;\n\n protected _associateDatalist = false;\n\n protected get prefixContent() {\n return this.#select?.multiple && !this.#tagLayoutIsHidden\n ? html`\n <div class=\"tags-label\" aria-hidden=\"true\">${this.#select.selectedOptions.length} ${this.i18n.selected}</div>\n <div class=\"tags\">\n ${Array.from<HTMLOptionElement>(this.#select.selectedOptions).map(\n o => html`\n <nve-tag part=\"tag\" readonly color=\"gray-slate\" closable .value=${o.value} @click=${() => this.#selectValue(o)}>${getDisplayValue(o)}</nve-tag>`\n )}\n </div>`\n : html`<slot name=\"prefix-icon\"></slot>`;\n }\n\n get #tagLayoutIsHidden() {\n return this.tagLayout === 'hidden';\n }\n\n get #largeOptionsList() {\n return (this.#datalist?.options?.length ?? 0) > 50;\n }\n\n get #isPristine() {\n return !this._internals.states.has('dirty');\n }\n\n protected get suffixContent() {\n if (isServer) return nothing;\n const options = this.#options;\n const largeOptionsList = this.#largeOptionsList;\n const isPristine = this.#isPristine;\n const visibleOptions = options.filter(o => !o.hidden).filter(o => !(o.value === '' && o.disabled));\n const hasNoResults = visibleOptions.filter(o => !o.disabled).length === 0;\n const showCreateItem = this.#showCreateItem;\n return html`\n <nve-dropdown part=\"dropdown\" .popoverType=${'manual'} .modal=${false} @open=${this.#openDropdown} @close=${this.#closeDropdown} hidden .anchor=${this.#input as HTMLElement} position=\"bottom\">\n <nve-menu part=\"menu\" role=\"listbox\" style=\"--width: 100%; --min-width: fit-content\" aria-label=${ifDefined(this.i18n.select)}>\n ${visibleOptions.map(\n o => html`\n <nve-menu-item part=\"menu-item\" .option=${getDisplayValue(o)} role=\"option\" @click=${() => this.#selectValue(o)} ?selected=${o.selected} aria-selected=${o.selected ? 'true' : 'false'} ?disabled=${o.disabled} aria-label=${getDisplayValue(o)}>\n ${this.#getOptionCheckbox(o)}\n ${largeOptionsList || isPristine ? getDisplayValue(o) : html`<span role=\"presentation\">${(o.label ? o.label : o.value)?.split('')?.map((c, ci) => html`<span ?matches=${this.#characterAtIndexMatches(c, ci)}>${c}</span>`)}</span>`}\n </nve-menu-item>`\n )}\n ${hasNoResults && !showCreateItem ? html`<nve-menu-item part=\"menu-item\" .value=${''} disabled>${this.i18n.noResults}</nve-menu-item>` : nothing}\n ${\n showCreateItem\n ? html`<nve-menu-item part=\"create-option\" role=\"button\" aria-label=${`${this.i18n.create} \"${this.input?.value.trim()}\"`} @click=${this.#onCreateItemClick}>\n <nve-icon part=\"icon\" name=\"add\" size=\"sm\"></nve-icon> \"${this.input?.value.trim()}\"\n </nve-menu-item>`\n : nothing\n }\n </nve-menu>\n <slot name=\"footer\"></slot>\n </nve-dropdown>`;\n }\n\n #getOptionCheckbox(o: HTMLOptionElement) {\n const select = this.#select;\n if (select?.multiple && this.#largeOptionsList) {\n return html`<input aria-hidden=\"true\" type=\"checkbox\" .checked=${o.selected} .disabled=${o.disabled} .name=${o.selected ? 'check' : undefined} />`;\n } else if (select?.multiple) {\n /* eslint-disable @nvidia-elements/lint/no-missing-control-label */\n return html`<nve-checkbox part=\"checkbox\"><input aria-hidden=\"true\" type=\"checkbox\" .checked=${o.selected} .disabled=${o.disabled} .name=${o.selected ? 'check' : undefined} /></nve-checkbox>`;\n } else if (select) {\n return html`<nve-icon part=\"icon\" name=\"check\" size=\"sm\"></nve-icon>`;\n } else {\n return nothing;\n }\n }\n\n async firstUpdated(props: PropertyValues<this>) {\n super.firstUpdated(props);\n this.shadowRoot!.addEventListener('slotchange', () => this.#onSlottedChildMutation());\n await this.updateComplete;\n this.#setupSingleSelect();\n this.#setupMultipleSelect();\n this.#setupAutoCompleteKeyEvents();\n this.#setupMenuItemUpdateEvents();\n this.#setupOpenKeyEvents();\n this.#setupOverflowListener();\n this.#setupSlotStates();\n await this.#setupLightDismiss();\n this.input.setAttribute('list', '');\n this.input.autocomplete = 'off';\n }\n\n connectedCallback() {\n super.connectedCallback();\n const observer = new MutationObserver(() => this.#onSlottedChildMutation());\n observer.observe(this, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['selected', 'disabled', 'value'],\n characterData: true\n });\n this.#observers.push(observer);\n this.#setupOptionObservers();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#observers.forEach(observer => observer.disconnect());\n this.#cleanupOptionObservers();\n }\n\n reset() {\n this.#dropdown!.hidePopover();\n if (this.#select) {\n this.#select.selectedIndex = -1;\n }\n super.reset();\n }\n\n /** Select all options provided */\n selectAll() {\n this.#options.forEach(o => (o.selected = true));\n this.requestUpdate();\n this.#select!.dispatchEvent(new Event('input', { bubbles: true }));\n this.#select!.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n #setupSingleSelect() {\n if (this.#select && !this.#select.multiple) {\n this.#setupInitialValue();\n this.#syncSelectValueStates();\n }\n }\n\n #setupMultipleSelect() {\n if (this.#select?.multiple) {\n this.#setupInitialValue();\n this.#syncSelectValueStates();\n this._internals.states.add('multiple');\n }\n }\n\n #setupInitialValue() {\n const selected = Array.from(this.#select!.selectedOptions).find((o: HTMLOptionElement) =>\n o.hasAttribute('selected')\n );\n if (selected && !this.#select!.multiple && !this.input.defaultValue) {\n this.input.value = getDisplayValue(selected);\n }\n }\n\n #updateInputValue() {\n if (!this.#select!.multiple && !this.input.defaultValue) {\n this.input.value = getDisplayValue(\n Array.from(this.#select!.selectedOptions).find(o => o.value === this.#select!.value)!\n );\n }\n }\n\n #syncSelectValueStates() {\n this.#observers.push(\n getElementUpdate(this.#select!, 'value', () => {\n this.#updateInputValue();\n this.requestUpdate();\n })\n );\n }\n\n #trackedOptions = new Map<HTMLOptionElement, ReturnType<typeof getPropertyChanges>>();\n\n #setupOptionObservers() {\n this.#_datalist = null;\n this.#_select = null;\n this.#syncOptionSelectedStates();\n this.requestUpdate();\n }\n\n #cleanupOptionObservers() {\n this.#trackedOptions.forEach(cleanup => cleanup?.());\n this.#trackedOptions.clear();\n }\n\n #syncOptionSelectedStates() {\n if (!this.isConnected) return;\n this.#options.forEach(o => {\n if (!this.#trackedOptions.has(o)) {\n this.#trackedOptions.set(\n o,\n getPropertyChanges(o, 'selected', () => this.requestUpdate())\n );\n }\n });\n }\n\n #onSlottedChildMutation() {\n if (!this.#syncPending) {\n this.#syncPending = true;\n queueMicrotask(() => {\n this.#syncPending = false;\n if (!this.isConnected) return;\n this.#_datalist = null;\n this.#_select = null;\n this.#cleanupStaleTrackedOptions();\n this.#syncOptionSelectedStates();\n this.requestUpdate();\n });\n }\n }\n\n #cleanupStaleTrackedOptions() {\n const currentOptions = new Set(this.#options);\n for (const [tracked, cleanup] of this.#trackedOptions) {\n if (!currentOptions.has(tracked)) {\n cleanup?.();\n this.#trackedOptions.delete(tracked);\n }\n }\n }\n\n #openDropdown() {\n this.#dropdown!.hidden = false;\n }\n\n #closeDropdown() {\n this.#dropdown!.hidden = true;\n this._internals.states.delete('dirty');\n this.#validateSingleSelectValue();\n }\n\n #setupAutoCompleteKeyEvents() {\n this.addEventListener('keydown', (e: KeyboardEvent) => {\n const value = this.input.value.trim();\n\n if (e.code === 'Tab') {\n if (this.#hasAvailableOptions && this.#dropdown!.matches(':popover-open') && value !== '') {\n e.preventDefault();\n // the menu item option property caches/stores the option value instead of value to prevent unnecessary lit lifecycle updates for each menu item\n this.#setInputValue((this.#items[0] as MenuItem & { option: string }).option);\n this.#setSelectValue(\n this.#options.find(\n o => (o.label ? o.label : o.value) === (this.#items[0] as MenuItem & { option: string }).option\n )!\n );\n }\n this.#dropdown!.hidePopover();\n }\n\n if (e.code === 'Enter' && this.behaviorCreate && !this.input.disabled && value) {\n const match = this.#findOptionMatch(value);\n if (match) {\n this.#selectValue(match);\n } else {\n e.preventDefault();\n e.stopImmediatePropagation();\n this.#dispatchCreate();\n }\n }\n });\n }\n\n #setupMenuItemUpdateEvents() {\n this.input.addEventListener('input', () => this.#filterOptions());\n this.shadowRoot!.addEventListener('slotchange', () => this.#filterOptions());\n }\n\n async #setupLightDismiss() {\n const dropdown = this.#dropdown!;\n await dropdown.updateComplete;\n const options = {\n element: dropdown.shadowRoot!.querySelector<HTMLElement>('[internal-host]')!,\n focusElement: this.input\n };\n createLightDismiss(options, () => {\n if (this.#dropdown!.matches(':popover-open')) {\n this.#dropdown!.hidePopover();\n }\n });\n }\n\n #setupOpenKeyEvents() {\n this.#tags?.addEventListener('pointerup', () => {\n if (this.tagLayout !== 'wrap') return;\n this.input.focus();\n setTimeout(() => this.#openListBox(), 0);\n });\n\n this.input.addEventListener('pointerdown', () => {\n this.#openListBox();\n });\n\n this.addEventListener('keydown', (e: KeyboardEvent) => {\n if (e.code !== 'Tab' && e.code !== 'Escape') {\n this.#openListBox();\n }\n\n if (e?.code === 'ArrowDown' && (this.getRootNode() as ShadowRoot).activeElement === this.input) {\n this.#dropdown!.tabIndex = 0;\n this.#items[0]?.focus();\n e.preventDefault();\n }\n });\n }\n\n #selectValue(option: { selected?: boolean; label?: string; value?: string }) {\n if (!this.#select?.multiple) {\n this.#setInputValue(getDisplayValue(option));\n this.#dropdown!.hidePopover();\n focusElementTimeout(this.input);\n }\n\n if (this.#select) {\n option.selected = !option.selected;\n this.#setSelectValue(option);\n }\n\n this.requestUpdate();\n }\n\n #onCreateItemClick() {\n this.#dispatchCreate();\n }\n\n #dispatchCreate() {\n const value = this.input.value.trim();\n if (value) {\n this.dispatchEvent(new CustomEvent('create', { detail: { value }, bubbles: true, composed: true }));\n this.input.value = '';\n this.#dropdown!.hidePopover();\n focusElementTimeout(this.input);\n this.requestUpdate();\n }\n }\n\n #characterAtIndexMatches(character: string, index: number) {\n if (this.#hasAvailableOptions) {\n return this.input.value.toLowerCase()[index]?.toLowerCase() === character.toLowerCase();\n }\n return false;\n }\n\n #filterOptions() {\n this.#options.forEach(option => {\n const hasLabel = option.textContent!.trim().length;\n if (hasLabel) {\n const matchesLabel = option.textContent!.toLocaleLowerCase().includes(this.input?.value.toLowerCase());\n option.hidden = !matchesLabel;\n } else {\n const matchesValue = option.value.toLocaleLowerCase().includes(this.input?.value.toLowerCase());\n option.hidden = !matchesValue;\n }\n });\n this.requestUpdate();\n }\n\n #openListBox() {\n if (!this.input.disabled && !this.#dropdown!.matches(':popover-open')) {\n if (this.#select) {\n this.#options.forEach(option => (option.hidden = false));\n this.requestUpdate();\n } else {\n this.#filterOptions();\n }\n this.#dropdown!.style.setProperty('--min-width', `${this.#input!.getBoundingClientRect().width}px`);\n // explicitly provide source as the performance optimizations in the suffixContent getter prevent the dropdown from setting its anchor/trigger reliably\n this.#dropdown!.showPopover({ source: this.#input as HTMLElement });\n this.#dropdown!.tabIndex = -1;\n }\n }\n\n #validateSingleSelectValue() {\n const invalidInputValue =\n this.#select &&\n !this.#select.multiple &&\n !this.#options.filter(o => !(o.value === '' && o.disabled)).find(o => getDisplayValue(o) === this.input.value);\n if (invalidInputValue) {\n this.#options.forEach(o => (o.selected = false));\n this.#setInputValue('');\n this.#setSelectValue({ value: '', selected: false });\n }\n }\n\n #setInputValue(value: string) {\n this.input.value = value;\n this.input.dispatchEvent(new Event('input', { bubbles: true }));\n this.input.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n #setSelectValue(option: { value?: string; selected?: boolean }) {\n const found = [...this.#options, { value: '', selected: null as boolean | null }].find(\n o => o.value === option.value\n );\n if (found) found.selected = option.selected ?? null;\n\n if (this.#select && !this.#select.multiple) {\n this.#select.value = option.value!;\n }\n\n this.#select?.dispatchEvent(new Event('input', { bubbles: true }));\n this.#select?.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n #setupOverflowListener() {\n if (this.#select?.multiple && !this.#tagLayoutIsHidden) {\n if (this.#select.selectedOptions.length > 1) {\n // only calculate initial overflow if many tags exist\n this.#updateMultipleOverflow(this.#tags!.getBoundingClientRect().width);\n }\n const observer = new ResizeObserver(entries => this.#updateMultipleOverflow(entries[0]!.contentRect.width));\n this.#observers.push(observer);\n observer.observe(this.#tags!);\n }\n }\n\n #updateMultipleOverflow(tagWidth: number) {\n const INPUT_MIN_WIDTH = 100;\n if (this.#select?.multiple && tagWidth > this.#input!.getBoundingClientRect().width - INPUT_MIN_WIDTH) {\n this._internals.states.add('multiple-overflow');\n } else {\n this._internals.states.delete('multiple-overflow');\n }\n }\n\n #setupSlotStates() {\n this.#setSlotStates();\n this.shadowRoot!.addEventListener('slotchange', () => this.#setSlotStates());\n }\n\n #setSlotStates() {\n if (this.#hasFooterContent) {\n this._internals.states.add('footer-content');\n } else {\n this._internals.states.delete('footer-content');\n }\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA6DO,IAAM,IAAN,cAAuB,EAAoC;;EAgR9C,aAxKkC,KAAA,KAAA,CAAC,GACtC,KAAA,KAAA,IAEgB,KAAA,qBAAA,IAqKb,KAAA,qBAAA,IAAI,IAA8D;;;EAnQpE,KAAA,SAAA,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA;IACzB,EAAS,SAAS,MAAM;IACxB,EAAK,SAAS,MAAM;IACpB,EAAS,SAAS,MAAM;IACxB,EAAK,SAAS,MAAM;IACpB,EAAS,SAAS,MAAM;IACxB,EAAI,SAAS,MAAM;EACtB;;CAOA;CACA,IAAI,KAAsC;EAUxC,OATA,AACE,KAAK,OAAa,KAAK,aACjB,KAAK,WACJ,cAAc,MAAM,CAAC,EACpB,iBAAiB,EAAE,SAAS,GAAK,CAAC,CAAC,EACnC,MAAK,MAAK,EAAE,YAAY,cAAc,EAAE,YAAY,QAAQ,KAC9D,KAAK,cAAc,kBAAkB,IACvC,MAEC,KAAK;CACd;CAEA;CACA,IAAI,KAAoC;EAStC,OARA,AACE,KAAK,OAAW,KAAK,aACf,KAAK,WACJ,cAAc,MAAM,CAAC,EACpB,iBAAiB,EAAE,SAAS,GAAK,CAAC,CAAC,EACnC,MAAK,MAAK,EAAE,YAAY,QAAQ,KAAK,KAAK,cAAc,QAAQ,IACpE,MAEC,KAAK;CACd;CAEA,IAAI,KAAgC;EAClC,OAAO,MAAM,KAAK,KAAK,IAAW,UAAU,KAAK,GAAU,UAAU,CAAC,CAAC;CACzE;CAEA,IAAI,KAAS;EACX,OAAO,MAAM,KAAK,KAAK,WAAY,iBAA2B,EAAS,SAAS,GAAG,CAAC;CACtF;CAEA,IAAI,KAAY;EACd,OAAO,KAAK,WAAY,cAAwB,EAAS,SAAS,GAAG;CACvE;CAEA,IAAI,KAAS;EACX,OAAO,KAAK,WAAY,cAAc,SAAS;CACjD;CAEA,IAAI,KAAQ;EACV,OAAO,KAAK,WAAY,cAAc,OAAO;CAC/C;CAEA,IAAI,KAAuB;EACzB,OAAO,KAAK,GAAS,MAAK,MAAK,CAAC,EAAE,YAAY,CAAC,EAAE,MAAM;CACzD;CAEA,IAAI,KAAoB;EACtB,OAAO,CAAC,CAAC,KAAK,cAAc,mBAAiB;CAC/C;CAEA,IAAI,KAA2B;EAC7B,IAAI,CAAC,KAAK,kBAAkB,KAAK,OAAO,UAAU,OAAO;EACzD,IAAM,IAAQ,KAAK,OAAO,MAAM,KAAK;EAErC,OADK,IACE,CAAC,KAAK,GAAiB,CAAK,IADhB;CAErB;CAEA,GAAiB,GAA8C;EAC7D,IAAM,IAAQ,EAAM,YAAY;EAChC,OAAO,KAAK,GAAS,MAAK,OACR,EAAE,YAAa,KAAK,KAAK,EAAE,MAAA,CAC5B,YAAY,MAAM,KAAS,EAAE,MAAM,YAAY,MAAM,CACrE;CACH;CAEA;CACA;CAIA,IAAc,gBAAgB;EAC5B,OAAO,KAAK,IAAS,YAAY,CAAC,KAAK,KACnC,CAAI,8CACqC,KAAK,GAAQ,gBAAgB,OAAO,GAAG,KAAK,KAAK,SAAS,0BAEnG,MAAM,KAAwB,KAAK,GAAQ,eAAe,CAAC,CAAC,KAC5D,MAAK,CAAI,+EACuD,EAAE,MAAM,kBAAgB,KAAK,GAAa,CAAC,EAAE,IAAG,EAAgB,CAAC,EAAE,WACrI,EAAE,UAEA,CAAI;CACV;CAEA,IAAI,KAAqB;EACvB,OAAO,KAAK,cAAc;CAC5B;CAEA,IAAI,KAAoB;EACtB,QAAQ,KAAK,IAAW,SAAS,UAAU,KAAK;CAClD;CAEA,IAAI,KAAc;EAChB,OAAO,CAAC,KAAK,WAAW,OAAO,IAAI,OAAO;CAC5C;CAEA,IAAc,gBAAgB;EAC5B,IAAI,GAAU,OAAO;EACrB,IAAM,IAAU,KAAK,IACf,IAAmB,KAAK,IACxB,IAAa,KAAK,IAClB,IAAiB,EAAQ,QAAO,MAAK,CAAC,EAAE,MAAM,CAAC,CAAC,QAAO,MAAK,EAAE,EAAE,UAAU,MAAM,EAAE,SAAS,GAC3F,IAAe,EAAe,QAAO,MAAK,CAAC,EAAE,QAAQ,CAAC,CAAC,WAAW,GAClE,IAAiB,KAAK;EAC5B,OAAO,CAAI,+CACkC,SAAS,YAAU,GAAM,WAAS,KAAK,GAAc,YAAU,KAAK,GAAe,oBAAkB,KAAK,GAAsB,oHACzE,EAAU,KAAK,KAAK,MAAM,EAAE,IAC1H,EAAe,KACf,MAAK,CAAI,4CACiC,EAAgB,CAAC,EAAE,gCAA8B,KAAK,GAAa,CAAC,EAAE,eAAa,EAAE,SAAS,mBAAiB,EAAE,WAAW,SAAS,QAAQ,eAAa,EAAE,SAAS,gBAAc,EAAgB,CAAC,EAAE,IAC5O,KAAK,GAAmB,CAAC,EAAE,GAC3B,KAAoB,IAAa,EAAgB,CAAC,IAAI,CAAI,8BAA8B,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAA,EAAQ,MAAM,EAAE,CAAC,EAAE,KAAK,GAAG,MAAO,CAAI,mBAAkB,KAAK,GAAyB,GAAG,CAAE,EAAE,IAAG,EAAE,QAAQ,EAAE,SAAS,iBAEzO,EAAE,GACA,KAAgB,CAAC,IAAiB,CAAI,2CAA0C,GAAG,wBAAY,KAAK,KAAK,UAAU,oBAAoB,EAAQ,GAE/I,IACI,CAAI,iEAAgE,GAAG,KAAK,KAAK,OAAO,IAAI,KAAK,OAAO,MAAM,KAAK,EAAE,GAAG,YAAU,KAAK,GAAmB,2DACpG,KAAK,OAAO,MAAM,KAAK,EAAE,qBAE/E,EACL;CAIP;CAEA,GAAmB,GAAsB;EACvC,IAAM,IAAS,KAAK;EASlB,OARE,GAAQ,YAAY,KAAK,KACpB,CAAI,uDAAsD,EAAE,SAAS,eAAa,EAAE,SAAS,WAAS,EAAE,WAAW,UAAU,KAAA,EAAU,MACrI,GAAQ,WAEV,CAAI,qFAAoF,EAAE,SAAS,eAAa,EAAE,SAAS,WAAS,EAAE,WAAW,UAAU,KAAA,EAAU,qBACnK,IACF,CAAI,6DAEJ;CAEX;CAEA,MAAM,aAAa,GAA6B;EAa9C,AAZA,MAAM,aAAa,CAAK,GACxB,KAAK,WAAY,iBAAiB,oBAAoB,KAAK,GAAwB,CAAC,GACpF,MAAM,KAAK,gBACX,KAAK,GAAmB,GACxB,KAAK,GAAqB,GAC1B,KAAK,GAA4B,GACjC,KAAK,GAA2B,GAChC,KAAK,GAAoB,GACzB,KAAK,GAAuB,GAC5B,KAAK,GAAiB,GACtB,MAAM,KAAK,GAAmB,GAC9B,KAAK,MAAM,aAAa,QAAQ,EAAE,GAClC,KAAK,MAAM,eAAe;CAC5B;CAEA,oBAAoB;EAClB,MAAM,kBAAkB;EACxB,IAAM,IAAW,IAAI,uBAAuB,KAAK,GAAwB,CAAC;EAS1E,AARA,EAAS,QAAQ,MAAM;GACrB,WAAW;GACX,SAAS;GACT,YAAY;GACZ,iBAAiB;IAAC;IAAY;IAAY;GAAO;GACjD,eAAe;EACjB,CAAC,GACD,KAAK,GAAW,KAAK,CAAQ,GAC7B,KAAK,GAAsB;CAC7B;CAEA,uBAAuB;EAGrB,AAFA,MAAM,qBAAqB,GAC3B,KAAK,GAAW,SAAQ,MAAY,EAAS,WAAW,CAAC,GACzD,KAAK,GAAwB;CAC/B;CAEA,QAAQ;EAKN,AAJA,KAAK,GAAW,YAAY,GACxB,KAAK,OACP,KAAK,GAAQ,gBAAgB,KAE/B,MAAM,MAAM;CACd;CAGA,YAAY;EAIV,AAHA,KAAK,GAAS,SAAQ,MAAM,EAAE,WAAW,EAAK,GAC9C,KAAK,cAAc,GACnB,KAAK,GAAS,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAK,CAAC,CAAC,GACjE,KAAK,GAAS,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CACpE;CAEA,KAAqB;EACnB,AAAI,KAAK,MAAW,CAAC,KAAK,GAAQ,aAChC,KAAK,GAAmB,GACxB,KAAK,GAAuB;CAEhC;CAEA,KAAuB;EACrB,AAAI,KAAK,IAAS,aAChB,KAAK,GAAmB,GACxB,KAAK,GAAuB,GAC5B,KAAK,WAAW,OAAO,IAAI,UAAU;CAEzC;CAEA,KAAqB;EACnB,IAAM,IAAW,MAAM,KAAK,KAAK,GAAS,eAAe,CAAC,CAAC,MAAM,MAC/D,EAAE,aAAa,UAAU,CAC3B;EACA,AAAI,KAAY,CAAC,KAAK,GAAS,YAAY,CAAC,KAAK,MAAM,iBACrD,KAAK,MAAM,QAAQ,EAAgB,CAAQ;CAE/C;CAEA,KAAoB;EAClB,AAAI,CAAC,KAAK,GAAS,YAAY,CAAC,KAAK,MAAM,iBACzC,KAAK,MAAM,QAAQ,EACjB,MAAM,KAAK,KAAK,GAAS,eAAe,CAAC,CAAC,MAAK,MAAK,EAAE,UAAU,KAAK,GAAS,KAAK,CACrF;CAEJ;CAEA,KAAyB;EACvB,KAAK,GAAW,KACd,EAAiB,KAAK,IAAU,eAAe;GAE7C,AADA,KAAK,GAAkB,GACvB,KAAK,cAAc;EACrB,CAAC,CACH;CACF;CAEA;CAEA,KAAwB;EAItB,AAHA,KAAK,KAAa,MAClB,KAAK,KAAW,MAChB,KAAK,GAA0B,GAC/B,KAAK,cAAc;CACrB;CAEA,KAA0B;EAExB,AADA,KAAK,GAAgB,SAAQ,MAAW,IAAU,CAAC,GACnD,KAAK,GAAgB,MAAM;CAC7B;CAEA,KAA4B;EACrB,KAAK,eACV,KAAK,GAAS,SAAQ,MAAK;GACzB,AAAK,KAAK,GAAgB,IAAI,CAAC,KAC7B,KAAK,GAAgB,IACnB,GACA,EAAmB,GAAG,kBAAkB,KAAK,cAAc,CAAC,CAC9D;EAEJ,CAAC;CACH;CAEA,KAA0B;EACxB,AAAK,KAAK,OACR,KAAK,KAAe,IACpB,qBAAqB;GACnB,KAAK,KAAe,IACf,KAAK,gBACV,KAAK,KAAa,MAClB,KAAK,KAAW,MAChB,KAAK,GAA4B,GACjC,KAAK,GAA0B,GAC/B,KAAK,cAAc;EACrB,CAAC;CAEL;CAEA,KAA8B;EAC5B,IAAM,IAAiB,IAAI,IAAI,KAAK,EAAQ;EAC5C,KAAK,IAAM,CAAC,GAAS,MAAY,KAAK,IACpC,AAAK,EAAe,IAAI,CAAO,MAC7B,IAAU,GACV,KAAK,GAAgB,OAAO,CAAO;CAGzC;CAEA,KAAgB;EACd,KAAK,GAAW,SAAS;CAC3B;CAEA,KAAiB;EAGf,AAFA,KAAK,GAAW,SAAS,IACzB,KAAK,WAAW,OAAO,OAAO,OAAO,GACrC,KAAK,GAA2B;CAClC;CAEA,KAA8B;EAC5B,KAAK,iBAAiB,YAAY,MAAqB;GACrD,IAAM,IAAQ,KAAK,MAAM,MAAM,KAAK;GAgBpC,IAdI,EAAE,SAAS,UACT,KAAK,MAAwB,KAAK,GAAW,QAAQ,eAAe,KAAK,MAAU,OACrF,EAAE,eAAe,GAEjB,KAAK,GAAgB,KAAK,GAAO,EAAE,CAAmC,MAAM,GAC5E,KAAK,GACH,KAAK,GAAS,MACZ,OAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAY,KAAK,GAAO,EAAE,CAAmC,MAC3F,CACF,IAEF,KAAK,GAAW,YAAY,IAG1B,EAAE,SAAS,WAAW,KAAK,kBAAkB,CAAC,KAAK,MAAM,YAAY,GAAO;IAC9E,IAAM,IAAQ,KAAK,GAAiB,CAAK;IACzC,AAAI,IACF,KAAK,GAAa,CAAK,KAEvB,EAAE,eAAe,GACjB,EAAE,yBAAyB,GAC3B,KAAK,GAAgB;GAEzB;EACF,CAAC;CACH;CAEA,KAA6B;EAE3B,AADA,KAAK,MAAM,iBAAiB,eAAe,KAAK,GAAe,CAAC,GAChE,KAAK,WAAY,iBAAiB,oBAAoB,KAAK,GAAe,CAAC;CAC7E;CAEA,MAAM,KAAqB;EACzB,IAAM,IAAW,KAAK;EACtB,MAAM,EAAS;EACf,IAAM,IAAU;GACd,SAAS,EAAS,WAAY,cAA2B,iBAAiB;GAC1E,cAAc,KAAK;EACrB;EACA,EAAmB,SAAe;GAChC,AAAI,KAAK,GAAW,QAAQ,eAAe,KACzC,KAAK,GAAW,YAAY;EAEhC,CAAC;CACH;CAEA,KAAsB;EAWpB,AAVA,KAAK,IAAO,iBAAiB,mBAAmB;GAC1C,KAAK,cAAc,WACvB,KAAK,MAAM,MAAM,GACjB,iBAAiB,KAAK,GAAa,GAAG,CAAC;EACzC,CAAC,GAED,KAAK,MAAM,iBAAiB,qBAAqB;GAC/C,KAAK,GAAa;EACpB,CAAC,GAED,KAAK,iBAAiB,YAAY,MAAqB;GAKrD,AAJI,EAAE,SAAS,SAAS,EAAE,SAAS,YACjC,KAAK,GAAa,GAGhB,GAAG,SAAS,eAAgB,KAAK,YAAY,CAAC,CAAgB,kBAAkB,KAAK,UACvF,KAAK,GAAW,WAAW,GAC3B,KAAK,GAAO,EAAE,EAAE,MAAM,GACtB,EAAE,eAAe;EAErB,CAAC;CACH;CAEA,GAAa,GAAgE;EAY3E,AAXK,KAAK,IAAS,aACjB,KAAK,GAAe,EAAgB,CAAM,CAAC,GAC3C,KAAK,GAAW,YAAY,GAC5B,EAAoB,KAAK,KAAK,IAG5B,KAAK,OACP,EAAO,WAAW,CAAC,EAAO,UAC1B,KAAK,GAAgB,CAAM,IAG7B,KAAK,cAAc;CACrB;CAEA,KAAqB;EACnB,KAAK,GAAgB;CACvB;CAEA,KAAkB;EAChB,IAAM,IAAQ,KAAK,MAAM,MAAM,KAAK;EACpC,AAAI,MACF,KAAK,cAAc,IAAI,YAAY,UAAU;GAAE,QAAQ,EAAE,SAAM;GAAG,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC,GAClG,KAAK,MAAM,QAAQ,IACnB,KAAK,GAAW,YAAY,GAC5B,EAAoB,KAAK,KAAK,GAC9B,KAAK,cAAc;CAEvB;CAEA,GAAyB,GAAmB,GAAe;EAIzD,OAHI,KAAK,KACA,KAAK,MAAM,MAAM,YAAY,CAAC,CAAC,EAAM,EAAE,YAAY,MAAM,EAAU,YAAY,IAEjF;CACT;CAEA,KAAiB;EAWf,AAVA,KAAK,GAAS,SAAQ,MAAU;GAE9B,AAKE,EAAO,SANQ,EAAO,YAAa,KAAK,CAAC,CAAC,SAG1B,CADK,EAAO,YAAa,kBAAkB,CAAC,CAAC,SAAS,KAAK,OAAO,MAAM,YAAY,CACnF,IAGD,CADK,EAAO,MAAM,kBAAkB,CAAC,CAAC,SAAS,KAAK,OAAO,MAAM,YAAY,CAC5E;EAErB,CAAC,GACD,KAAK,cAAc;CACrB;CAEA,KAAe;EACb,AAAI,CAAC,KAAK,MAAM,YAAY,CAAC,KAAK,GAAW,QAAQ,eAAe,MAC9D,KAAK,MACP,KAAK,GAAS,SAAQ,MAAW,EAAO,SAAS,EAAM,GACvD,KAAK,cAAc,KAEnB,KAAK,GAAe,GAEtB,KAAK,GAAW,MAAM,YAAY,eAAe,GAAG,KAAK,GAAQ,sBAAsB,CAAC,CAAC,MAAM,GAAG,GAElG,KAAK,GAAW,YAAY,EAAE,QAAQ,KAAK,GAAsB,CAAC,GAClE,KAAK,GAAW,WAAW;CAE/B;CAEA,KAA6B;EAK3B,AAHE,KAAK,MACL,CAAC,KAAK,GAAQ,YACd,CAAC,KAAK,GAAS,QAAO,MAAK,EAAE,EAAE,UAAU,MAAM,EAAE,SAAS,CAAC,CAAC,MAAK,MAAK,EAAgB,CAAC,MAAM,KAAK,MAAM,KAAK,MAE7G,KAAK,GAAS,SAAQ,MAAM,EAAE,WAAW,EAAM,GAC/C,KAAK,GAAe,EAAE,GACtB,KAAK,GAAgB;GAAE,OAAO;GAAI,UAAU;EAAM,CAAC;CAEvD;CAEA,GAAe,GAAe;EAG5B,AAFA,KAAK,MAAM,QAAQ,GACnB,KAAK,MAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAK,CAAC,CAAC,GAC9D,KAAK,MAAM,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CACjE;CAEA,GAAgB,GAAgD;EAC9D,IAAM,IAAQ,CAAC,GAAG,KAAK,IAAU;GAAE,OAAO;GAAI,UAAU;EAAuB,CAAC,CAAC,CAAC,MAChF,MAAK,EAAE,UAAU,EAAO,KAC1B;EAQA,AAPI,MAAO,EAAM,WAAW,EAAO,YAAY,OAE3C,KAAK,MAAW,CAAC,KAAK,GAAQ,aAChC,KAAK,GAAQ,QAAQ,EAAO,QAG9B,KAAK,IAAS,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAK,CAAC,CAAC,GACjE,KAAK,IAAS,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CACpE;CAEA,KAAyB;EACvB,IAAI,KAAK,IAAS,YAAY,CAAC,KAAK,IAAoB;GACtD,AAAI,KAAK,GAAQ,gBAAgB,SAAS,KAExC,KAAK,GAAwB,KAAK,GAAO,sBAAsB,CAAC,CAAC,KAAK;GAExE,IAAM,IAAW,IAAI,gBAAe,MAAW,KAAK,GAAwB,EAAQ,EAAE,CAAE,YAAY,KAAK,CAAC;GAE1G,AADA,KAAK,GAAW,KAAK,CAAQ,GAC7B,EAAS,QAAQ,KAAK,EAAM;EAC9B;CACF;CAEA,GAAwB,GAAkB;EAExC,AAAI,KAAK,IAAS,YAAY,IAAW,KAAK,GAAQ,sBAAsB,CAAC,CAAC,QAAQ,MACpF,KAAK,WAAW,OAAO,IAAI,mBAAmB,IAE9C,KAAK,WAAW,OAAO,OAAO,mBAAmB;CAErD;CAEA,KAAmB;EAEjB,AADA,KAAK,GAAe,GACpB,KAAK,WAAY,iBAAiB,oBAAoB,KAAK,GAAe,CAAC;CAC7E;CAEA,KAAiB;EACf,AAAI,KAAK,KACP,KAAK,WAAW,OAAO,IAAI,gBAAgB,IAE3C,KAAK,WAAW,OAAO,OAAO,gBAAgB;CAElD;AACF;AArhBG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAGjE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAZzE,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
{
|
|
75
75
|
"id": "copy-button-async-copy",
|
|
76
76
|
"name": "AsyncCopy",
|
|
77
|
-
"template": "<nve-copy-button id=\"async-copy-button\" value=\"initial value\" aria-label=\"copy value\" behavior-copy></nve-copy-button>\n<script type=\"module\">\n const button = document.querySelector(\"#async-copy-button\");\n button.addEventListener(\"pointerdown\", () => {\n button.disabled = true;\n // do an async operation\n new Promise((resolve) => setTimeout(resolve, 2000)).then(() => {\n button.value = \"async value\";\n button.disabled = false;\n button.dispatchEvent(new Event(\"click\"));\n });\n });\n</script>\n",
|
|
77
|
+
"template": "<nve-copy-button id=\"async-copy-button\" value=\"initial value\" aria-label=\"copy value\" behavior-copy></nve-copy-button>\n\n<script type=\"module\">\n const button = document.querySelector(\"#async-copy-button\");\n button.addEventListener(\"pointerdown\", () => {\n button.disabled = true;\n\n // do an async operation\n new Promise((resolve) => setTimeout(resolve, 2000)).then(() => {\n button.value = \"async value\";\n button.disabled = false;\n button.dispatchEvent(new Event(\"click\"));\n });\n });\n</script>\n",
|
|
78
78
|
"summary": "Advanced pattern for handling long-running copy to clipboard operations.",
|
|
79
79
|
"description": "",
|
|
80
80
|
"composition": false,
|