@nvidia-elements/core 0.1.4 → 0.2.1
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 +17 -0
- package/dist/accordion/accordion2.js +4 -4
- package/dist/alert/alert-group2.js +1 -1
- 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.js +2 -2
- package/dist/button/button2.js +1 -1
- package/dist/button-group/button-group2.js +1 -1
- package/dist/card/card2.js +4 -4
- package/dist/chat-message/chat-message2.js +1 -1
- package/dist/checkbox/checkbox-group2.js +1 -1
- package/dist/checkbox/checkbox2.js +1 -1
- package/dist/color/color2.js +1 -1
- package/dist/combobox/combobox.d.ts +7 -1
- package/dist/combobox/combobox.examples.js.map +1 -1
- package/dist/combobox/combobox.examples.json +21 -1
- package/dist/combobox/combobox.js +1 -1
- package/dist/combobox/combobox.js.map +1 -1
- package/dist/combobox/combobox2.js +67 -58
- package/dist/combobox/combobox2.js.map +1 -1
- package/dist/copy-button/copy-button2.js +1 -1
- package/dist/custom-elements-jsx.d.ts +5 -1
- package/dist/custom-elements-vue.d.ts +5 -1
- package/dist/custom-elements.json +46 -9
- package/dist/data.html.json +4 -4
- package/dist/data.snippets.json +32 -32
- package/dist/date/date2.js +1 -1
- 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/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/drawer2.js +1 -1
- package/dist/dropdown/dropdown-footer2.js +1 -1
- package/dist/dropdown/dropdown-header2.js +1 -1
- package/dist/dropdown/dropdown2.js +1 -1
- package/dist/dropdown-group/dropdown-group.js +1 -1
- package/dist/dropzone/dropzone2.js +1 -1
- package/dist/file/file2.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/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/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/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/icon2.js +2 -2
- package/dist/icon-button/icon-button2.js +1 -1
- package/dist/index.js +1 -1
- package/dist/input/input-group2.js +1 -1
- package/dist/input/input2.js +1 -1
- package/dist/internal/controllers/type-native-popover.controller.js +18 -15
- package/dist/internal/controllers/type-native-popover.controller.js.map +1 -1
- package/dist/internal/controllers/type-touch.controller.js +1 -0
- package/dist/internal/controllers/type-touch.controller.js.map +1 -1
- package/dist/internal/services/global.service.js +1 -1
- package/dist/logo/logo2.js +1 -1
- package/dist/menu/menu-item2.js +1 -1
- package/dist/menu/menu2.js +1 -1
- package/dist/month/month2.js +1 -1
- package/dist/notification/notification-group2.js +1 -1
- 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/page2.js +1 -1
- package/dist/page-header/page-header2.js +1 -1
- package/dist/page-loader/page-loader2.js +1 -1
- package/dist/pagination/pagination2.js +1 -1
- package/dist/panel/panel2.js +4 -4
- package/dist/password/password2.js +1 -1
- package/dist/preferences-input/preferences-input2.js +2 -1
- package/dist/preferences-input/preferences-input2.js.map +1 -1
- package/dist/progress-bar/progress-bar2.js +1 -1
- package/dist/progress-ring/progress-ring2.js +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/radio2.js +1 -1
- package/dist/range/range2.js +1 -1
- package/dist/resize-handle/resize-handle2.js +1 -1
- package/dist/search/search2.js +1 -1
- 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/switch2.js +1 -1
- package/dist/tabs/tabs-group2.js +1 -1
- package/dist/tabs/tabs2.js +2 -2
- package/dist/tag/tag2.js +1 -1
- package/dist/textarea/textarea2.js +1 -1
- package/dist/time/time2.js +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/toggletip2.js +1 -1
- package/dist/toolbar/toolbar2.js +1 -1
- package/dist/tooltip/tooltip2.js +1 -1
- package/dist/tree/tree-node2.js +1 -1
- package/dist/tree/tree2.js +1 -1
- package/dist/week/week2.js +1 -1
- package/package.json +3 -3
|
@@ -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.#
|
|
22
|
+
super(...e), this.#p = [], this.#m = !1, this._associateDatalist = !1, this.#w = /* @__PURE__ */ new Set();
|
|
23
23
|
}
|
|
24
24
|
static {
|
|
25
25
|
this.styles = s([
|
|
@@ -31,7 +31,7 @@ var S = class extends l {
|
|
|
31
31
|
static {
|
|
32
32
|
this.metadata = {
|
|
33
33
|
tag: "nve-combobox",
|
|
34
|
-
version: "0.1
|
|
34
|
+
version: "0.2.1"
|
|
35
35
|
};
|
|
36
36
|
}
|
|
37
37
|
static {
|
|
@@ -85,32 +85,35 @@ var S = class extends l {
|
|
|
85
85
|
#p;
|
|
86
86
|
#m;
|
|
87
87
|
get prefixContent() {
|
|
88
|
-
return this.#r?.multiple && !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.#N(e)}">${t(e)}</nve-tag>`)}</div>` : _`<slot name="prefix-icon"></slot>`;
|
|
89
89
|
}
|
|
90
90
|
get #h() {
|
|
91
|
-
return
|
|
91
|
+
return this.notags || this.tagLayout === "hidden";
|
|
92
92
|
}
|
|
93
93
|
get #g() {
|
|
94
|
+
return (this.#t?.options?.length ?? 0) > 50;
|
|
95
|
+
}
|
|
96
|
+
get #_() {
|
|
94
97
|
return !this._internals.states.has("dirty");
|
|
95
98
|
}
|
|
96
99
|
get suffixContent() {
|
|
97
100
|
if (v) return y;
|
|
98
|
-
let e = this.#i, n = this.#
|
|
99
|
-
return _`<nve-dropdown part="dropdown" .popoverType="${"manual"}" .modal="${!1}" @open="${this.#
|
|
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.#O}" @close="${this.#z}" hidden .anchor="${this.#s}" .trigger="${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.#N(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.#I(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.#P}"><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>`;
|
|
100
103
|
}
|
|
101
|
-
#
|
|
104
|
+
#v(e) {
|
|
102
105
|
let t = this.#r;
|
|
103
|
-
return t?.multiple && this.#
|
|
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;
|
|
104
107
|
}
|
|
105
108
|
async firstUpdated(e) {
|
|
106
109
|
super.firstUpdated(e), this.shadowRoot.addEventListener("slotchange", () => {
|
|
107
|
-
this.#e = null, this.#n = null, this.#
|
|
108
|
-
}), await this.updateComplete, this.#
|
|
110
|
+
this.#e = null, this.#n = null, this.#E();
|
|
111
|
+
}), await this.updateComplete, this.#y(), this.#b(), this.#k(), this.#A(), this.#M(), this.#U(), this.#G(), await this.#j(), this.input.setAttribute("list", ""), this.input.autocomplete = "off";
|
|
109
112
|
}
|
|
110
113
|
connectedCallback() {
|
|
111
114
|
super.connectedCallback();
|
|
112
115
|
let e = new MutationObserver((e) => {
|
|
113
|
-
e.some((e) => e.type === "childList" && e.target === this) && (this.#e = null, this.#n = null), this.#
|
|
116
|
+
e.some((e) => e.type === "childList" && e.target === this) && (this.#e = null, this.#n = null), this.#E();
|
|
114
117
|
});
|
|
115
118
|
e.observe(this, {
|
|
116
119
|
childList: !0,
|
|
@@ -133,55 +136,55 @@ var S = class extends l {
|
|
|
133
136
|
selectAll() {
|
|
134
137
|
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 }));
|
|
135
138
|
}
|
|
136
|
-
#v() {
|
|
137
|
-
this.#r && !this.#r.multiple && (this.#b(), this.#S(), this.#w());
|
|
138
|
-
}
|
|
139
139
|
#y() {
|
|
140
|
-
this.#r
|
|
140
|
+
this.#r && !this.#r.multiple && (this.#x(), this.#C(), this.#T());
|
|
141
141
|
}
|
|
142
142
|
#b() {
|
|
143
|
+
this.#r?.multiple && (this.#x(), this.#C(), this.#T(), this._internals.states.add("multiple"));
|
|
144
|
+
}
|
|
145
|
+
#x() {
|
|
143
146
|
let e = Array.from(this.#r.selectedOptions).find((e) => e.hasAttribute("selected"));
|
|
144
147
|
e && !this.#r.multiple && !this.input.defaultValue && (this.input.value = t(e));
|
|
145
148
|
}
|
|
146
|
-
#
|
|
149
|
+
#S() {
|
|
147
150
|
!this.#r.multiple && !this.input.defaultValue && (this.input.value = t(Array.from(this.#r.selectedOptions).find((e) => e.value === this.#r.value)));
|
|
148
151
|
}
|
|
149
|
-
#
|
|
152
|
+
#C() {
|
|
150
153
|
this.#p.push(n(this.#r, "value", () => {
|
|
151
|
-
this.#
|
|
154
|
+
this.#S(), this.requestUpdate();
|
|
152
155
|
}));
|
|
153
156
|
}
|
|
154
|
-
#
|
|
155
|
-
#
|
|
157
|
+
#w;
|
|
158
|
+
#T() {
|
|
156
159
|
this.#i.forEach((e) => {
|
|
157
|
-
this.#
|
|
160
|
+
this.#w.has(e) || (this.#w.add(e), r(e, "selected", () => this.requestUpdate()));
|
|
158
161
|
});
|
|
159
162
|
}
|
|
160
|
-
#
|
|
163
|
+
#E() {
|
|
161
164
|
this.#m || (this.#m = !0, queueMicrotask(() => {
|
|
162
|
-
this.#m = !1, this.#
|
|
165
|
+
this.#m = !1, this.#D(), this.#T(), this.requestUpdate();
|
|
163
166
|
}));
|
|
164
167
|
}
|
|
165
|
-
#
|
|
168
|
+
#D() {
|
|
166
169
|
let e = new Set(this.#i);
|
|
167
|
-
for (let t of this.#
|
|
170
|
+
for (let t of this.#w) e.has(t) || this.#w.delete(t);
|
|
168
171
|
}
|
|
169
|
-
#
|
|
172
|
+
#O(e) {
|
|
170
173
|
e.target.hidden = !1;
|
|
171
174
|
}
|
|
172
|
-
#
|
|
175
|
+
#k() {
|
|
173
176
|
this.addEventListener("keydown", (e) => {
|
|
174
177
|
let t = this.input.value.trim();
|
|
175
|
-
if (e.code === "Tab" && (this.#l && this.#o.matches(":popover-open") && t !== "" && (e.preventDefault(), this.#
|
|
178
|
+
if (e.code === "Tab" && (this.#l && this.#o.matches(":popover-open") && t !== "" && (e.preventDefault(), this.#V(this.#a[0].option), this.#H(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) {
|
|
176
179
|
let n = this.#f(t);
|
|
177
|
-
n ? this.#
|
|
180
|
+
n ? this.#N(n) : (e.preventDefault(), e.stopImmediatePropagation(), this.#F());
|
|
178
181
|
}
|
|
179
182
|
});
|
|
180
183
|
}
|
|
181
|
-
#
|
|
182
|
-
this.input.addEventListener("input", () => this.#
|
|
184
|
+
#A() {
|
|
185
|
+
this.input.addEventListener("input", () => this.#L()), this.shadowRoot.addEventListener("slotchange", () => this.#L());
|
|
183
186
|
}
|
|
184
|
-
async #
|
|
187
|
+
async #j() {
|
|
185
188
|
let e = this.#o;
|
|
186
189
|
await e.updateComplete, i({
|
|
187
190
|
element: e.shadowRoot.querySelector("[internal-host]"),
|
|
@@ -190,20 +193,22 @@ var S = class extends l {
|
|
|
190
193
|
this.#o.matches(":popover-open") && this.#o.hidePopover();
|
|
191
194
|
});
|
|
192
195
|
}
|
|
193
|
-
#
|
|
194
|
-
this
|
|
195
|
-
this.#
|
|
196
|
+
#M() {
|
|
197
|
+
this.#c?.addEventListener("pointerup", () => {
|
|
198
|
+
this.tagLayout === "wrap" && (this.input.focus(), setTimeout(() => this.#R(), 0));
|
|
199
|
+
}), this.input.addEventListener("pointerdown", () => {
|
|
200
|
+
this.#R();
|
|
196
201
|
}), this.addEventListener("keydown", (e) => {
|
|
197
|
-
e.code !== "Tab" && e.code !== "Escape" && this.#
|
|
202
|
+
e.code !== "Tab" && e.code !== "Escape" && this.#R(), e?.code === "ArrowDown" && this.getRootNode().activeElement === this.input && (this.#o.tabIndex = 0, this.#a[0]?.focus(), e.preventDefault());
|
|
198
203
|
});
|
|
199
204
|
}
|
|
200
|
-
#
|
|
201
|
-
this.#r?.multiple || (this.#
|
|
202
|
-
}
|
|
203
|
-
#N() {
|
|
204
|
-
this.#P();
|
|
205
|
+
#N(n) {
|
|
206
|
+
this.#r?.multiple || (this.#V(t(n)), this.#o.hidePopover(), e(this.input)), this.#r && (n.selected = !n.selected, this.#H(n)), this.requestUpdate();
|
|
205
207
|
}
|
|
206
208
|
#P() {
|
|
209
|
+
this.#F();
|
|
210
|
+
}
|
|
211
|
+
#F() {
|
|
207
212
|
let t = this.input.value.trim();
|
|
208
213
|
t && (this.dispatchEvent(new CustomEvent("create", {
|
|
209
214
|
detail: { value: t },
|
|
@@ -211,50 +216,50 @@ var S = class extends l {
|
|
|
211
216
|
composed: !0
|
|
212
217
|
})), this.input.value = "", this.#o.hidePopover(), e(this.input), this.requestUpdate());
|
|
213
218
|
}
|
|
214
|
-
#
|
|
219
|
+
#I(e, t) {
|
|
215
220
|
return this.#l ? this.input.value.toLowerCase()[t]?.toLowerCase() === e.toLowerCase() : !1;
|
|
216
221
|
}
|
|
217
|
-
#
|
|
222
|
+
#L() {
|
|
218
223
|
this.#i.forEach((e) => {
|
|
219
224
|
e.textContent.trim().length ? e.hidden = !e.textContent.toLocaleLowerCase().includes(this.input?.value.toLowerCase()) : e.hidden = !e.value.toLocaleLowerCase().includes(this.input?.value.toLowerCase());
|
|
220
225
|
}), this.requestUpdate();
|
|
221
226
|
}
|
|
222
|
-
#L() {
|
|
223
|
-
!this.input.disabled && !this.#o.matches(":popover-open") && (this.#r ? (this.#i.forEach((e) => e.hidden = !1), this.requestUpdate()) : this.#I(), this.#o.style.setProperty("--min-width", `${this.#s.getBoundingClientRect().width}px`), this.#o.showPopover({ source: this.#s }), this.#o.tabIndex = -1);
|
|
224
|
-
}
|
|
225
227
|
#R() {
|
|
226
|
-
this.#o.
|
|
228
|
+
!this.input.disabled && !this.#o.matches(":popover-open") && (this.#r ? (this.#i.forEach((e) => e.hidden = !1), this.requestUpdate()) : this.#L(), this.#o.style.setProperty("--min-width", `${this.#s.getBoundingClientRect().width}px`), this.#o.showPopover({ source: this.#s }), this.#o.tabIndex = -1);
|
|
227
229
|
}
|
|
228
230
|
#z() {
|
|
229
|
-
this.#
|
|
231
|
+
this.#o.hidePopover(), this._internals.states.delete("dirty"), this.#B();
|
|
232
|
+
}
|
|
233
|
+
#B() {
|
|
234
|
+
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.#V(""), this.#H({
|
|
230
235
|
value: "",
|
|
231
236
|
selected: !1
|
|
232
237
|
}));
|
|
233
238
|
}
|
|
234
|
-
#
|
|
239
|
+
#V(e) {
|
|
235
240
|
this.input.value = e, this.input.dispatchEvent(new Event("input", { bubbles: !0 })), this.input.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
236
241
|
}
|
|
237
|
-
#
|
|
242
|
+
#H(e) {
|
|
238
243
|
let t = [...this.#i, {
|
|
239
244
|
value: "",
|
|
240
245
|
selected: null
|
|
241
246
|
}].find((t) => t.value === e.value);
|
|
242
247
|
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 }));
|
|
243
248
|
}
|
|
244
|
-
#
|
|
245
|
-
if (this.#r?.multiple && !this
|
|
246
|
-
this.#r.selectedOptions.length > 1 && this.#
|
|
247
|
-
let e = new ResizeObserver((e) => this.#
|
|
249
|
+
#U() {
|
|
250
|
+
if (this.#r?.multiple && !this.#h) {
|
|
251
|
+
this.#r.selectedOptions.length > 1 && this.#W(this.#c.getBoundingClientRect().width);
|
|
252
|
+
let e = new ResizeObserver((e) => this.#W(e[0].contentRect.width));
|
|
248
253
|
this.#p.push(e), e.observe(this.#c);
|
|
249
254
|
}
|
|
250
255
|
}
|
|
251
|
-
#
|
|
256
|
+
#W(e) {
|
|
252
257
|
this.#r?.multiple && e > this.#s.getBoundingClientRect().width - 100 ? this._internals.states.add("multiple-overflow") : this._internals.states.delete("multiple-overflow");
|
|
253
258
|
}
|
|
254
|
-
#W() {
|
|
255
|
-
this.#G(), this.shadowRoot.addEventListener("slotchange", () => this.#G());
|
|
256
|
-
}
|
|
257
259
|
#G() {
|
|
260
|
+
this.#K(), this.shadowRoot.addEventListener("slotchange", () => this.#K());
|
|
261
|
+
}
|
|
262
|
+
#K() {
|
|
258
263
|
this.#u ? this._internals.states.add("footer-content") : this._internals.states.delete("footer-content");
|
|
259
264
|
}
|
|
260
265
|
};
|
|
@@ -265,6 +270,10 @@ a([b({
|
|
|
265
270
|
type: Boolean,
|
|
266
271
|
reflect: !0
|
|
267
272
|
})], S.prototype, "notags", void 0), a([b({
|
|
273
|
+
type: String,
|
|
274
|
+
reflect: !0,
|
|
275
|
+
attribute: "tag-layout"
|
|
276
|
+
})], S.prototype, "tagLayout", void 0), a([b({
|
|
268
277
|
type: Boolean,
|
|
269
278
|
reflect: !0,
|
|
270
279
|
attribute: "behavior-create"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox2.js","names":["#datalist","#_datalist","#select","#_select","#options","#items","#dropdown","#input","#tags","#hasAvailableOptions","#hasFooterContent","#showCreateItem","#findOptionMatch","#selectValue","#largeOptionsList","#isPristine","#onDropdownOpen","#closeListBox","#getOptionCheckbox","#characterAtIndexMatches","#onCreateItemClick","#onSlottedChildMutation","#setupSingleSelect","#setupMultipleSelect","#setupAutoCompleteKeyEvents","#setupMenuItemUpdateEvents","#setupOpenKeyEvents","#setupOverflowListener","#setupSlotStates","#setupLightDismiss","#observers","#setupInitialValue","#syncSelectValueStates","#syncOptionSelectedStates","#updateInputValue","#trackedOptions","#syncPending","#cleanupStaleTrackedOptions","#setInputValue","#setSelectValue","#dispatchCreate","#filterOptions","#openListBox","#validateSingleSelectValue","#updateMultipleOverflow","#setSlotStates"],"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 * @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 /** Disable rendering of inline tags for many-item select */\n @property({ type: Boolean, reflect: true }) notags: boolean;\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.notags\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 #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.#onDropdownOpen} @close=${this.#closeListBox} hidden .anchor=${this.#input as HTMLElement} .trigger=${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 #onDropdownOpen(e: Event) {\n (e.target as HTMLElement).hidden = false;\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.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 #closeListBox() {\n this.#dropdown!.hidePopover();\n this._internals.states.delete('dirty');\n this.#validateSingleSelectValue();\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.notags) {\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":["#datalist","#_datalist","#select","#_select","#options","#items","#dropdown","#input","#tags","#hasAvailableOptions","#hasFooterContent","#showCreateItem","#findOptionMatch","#tagLayoutIsHidden","#selectValue","#largeOptionsList","#isPristine","#onDropdownOpen","#closeListBox","#getOptionCheckbox","#characterAtIndexMatches","#onCreateItemClick","#onSlottedChildMutation","#setupSingleSelect","#setupMultipleSelect","#setupAutoCompleteKeyEvents","#setupMenuItemUpdateEvents","#setupOpenKeyEvents","#setupOverflowListener","#setupSlotStates","#setupLightDismiss","#observers","#setupInitialValue","#syncSelectValueStates","#syncOptionSelectedStates","#updateInputValue","#trackedOptions","#syncPending","#cleanupStaleTrackedOptions","#setInputValue","#setSelectValue","#dispatchCreate","#filterOptions","#openListBox","#validateSingleSelectValue","#updateMultipleOverflow","#setSlotStates"],"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 * @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 /**\n * @deprecated Use `tagLayout = 'hidden'` or `tag-layout=\"hidden\"` instead.\n *\n * Disable rendering of inline tags for many-item select\n */\n @property({ type: Boolean, reflect: true }) notags: boolean;\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.notags || 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.#onDropdownOpen} @close=${this.#closeListBox} hidden .anchor=${this.#input as HTMLElement} .trigger=${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 #onDropdownOpen(e: Event) {\n (e.target as HTMLElement).hidden = false;\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 #closeListBox() {\n this.#dropdown!.hidePopover();\n this._internals.states.delete('dirty');\n this.#validateSingleSelectValue();\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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"}
|
|
@@ -661,8 +661,12 @@ export type ComboboxProps = {
|
|
|
661
661
|
/** Demonstrates different container styles to accommodate visual weight and context.
|
|
662
662
|
- `flat` Element has white space bounds but reduced visual container. */
|
|
663
663
|
container?: "flat";
|
|
664
|
-
/**
|
|
664
|
+
/** @deprecated Use `tagLayout = 'hidden'` or `tag-layout="hidden"` instead.
|
|
665
|
+
|
|
666
|
+
Disable rendering of inline tags for many-item select */
|
|
665
667
|
notags?: boolean;
|
|
668
|
+
/** Manage inline tag rendering for many-item select */
|
|
669
|
+
"tag-layout"?: "hidden" | "wrap";
|
|
666
670
|
/** Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail. */
|
|
667
671
|
"behavior-create"?: boolean;
|
|
668
672
|
/** @deprecated - not supported on custom element tags */
|
|
@@ -588,8 +588,12 @@ type ComboboxProps = {
|
|
|
588
588
|
/** Demonstrates different container styles to accommodate visual weight and context.
|
|
589
589
|
- `flat` Element has white space bounds but reduced visual container. */
|
|
590
590
|
container?: "flat";
|
|
591
|
-
/**
|
|
591
|
+
/** @deprecated Use `tagLayout = 'hidden'` or `tag-layout="hidden"` instead.
|
|
592
|
+
|
|
593
|
+
Disable rendering of inline tags for many-item select */
|
|
592
594
|
notags?: boolean;
|
|
595
|
+
/** Manage inline tag rendering for many-item select */
|
|
596
|
+
"tag-layout"?: "hidden" | "wrap";
|
|
593
597
|
/** Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail. */
|
|
594
598
|
"behavior-create"?: boolean;
|
|
595
599
|
/** @deprecated - not supported on custom element tags */
|
|
@@ -8355,17 +8355,34 @@
|
|
|
8355
8355
|
"_sourceAliases": [],
|
|
8356
8356
|
"values": [
|
|
8357
8357
|
{
|
|
8358
|
-
"value": "
|
|
8358
|
+
"value": "boolean",
|
|
8359
|
+
"description": ""
|
|
8360
|
+
}
|
|
8361
|
+
]
|
|
8362
|
+
},
|
|
8363
|
+
"deprecated": "Use `tagLayout = 'hidden'` or `tag-layout=\"hidden\"` instead.\n\nDisable rendering of inline tags for many-item select",
|
|
8364
|
+
"attribute": "notags",
|
|
8365
|
+
"reflects": true
|
|
8366
|
+
},
|
|
8367
|
+
{
|
|
8368
|
+
"kind": "field",
|
|
8369
|
+
"name": "tagLayout",
|
|
8370
|
+
"type": {
|
|
8371
|
+
"text": "'hidden' | 'wrap'",
|
|
8372
|
+
"_sourceAliases": [],
|
|
8373
|
+
"values": [
|
|
8374
|
+
{
|
|
8375
|
+
"value": "hidden",
|
|
8359
8376
|
"description": ""
|
|
8360
8377
|
},
|
|
8361
8378
|
{
|
|
8362
|
-
"value": "
|
|
8379
|
+
"value": "wrap",
|
|
8363
8380
|
"description": ""
|
|
8364
8381
|
}
|
|
8365
8382
|
]
|
|
8366
8383
|
},
|
|
8367
|
-
"description": "
|
|
8368
|
-
"attribute": "
|
|
8384
|
+
"description": "Manage inline tag rendering for many-item select",
|
|
8385
|
+
"attribute": "tag-layout",
|
|
8369
8386
|
"reflects": true
|
|
8370
8387
|
},
|
|
8371
8388
|
{
|
|
@@ -8681,17 +8698,32 @@
|
|
|
8681
8698
|
"_sourceAliases": [],
|
|
8682
8699
|
"values": [
|
|
8683
8700
|
{
|
|
8684
|
-
"value": "
|
|
8701
|
+
"value": "boolean",
|
|
8702
|
+
"description": ""
|
|
8703
|
+
}
|
|
8704
|
+
]
|
|
8705
|
+
},
|
|
8706
|
+
"deprecated": "Use `tagLayout = 'hidden'` or `tag-layout=\"hidden\"` instead.\n\nDisable rendering of inline tags for many-item select",
|
|
8707
|
+
"fieldName": "notags"
|
|
8708
|
+
},
|
|
8709
|
+
{
|
|
8710
|
+
"name": "tag-layout",
|
|
8711
|
+
"type": {
|
|
8712
|
+
"text": "'hidden' | 'wrap'",
|
|
8713
|
+
"_sourceAliases": [],
|
|
8714
|
+
"values": [
|
|
8715
|
+
{
|
|
8716
|
+
"value": "hidden",
|
|
8685
8717
|
"description": ""
|
|
8686
8718
|
},
|
|
8687
8719
|
{
|
|
8688
|
-
"value": "
|
|
8720
|
+
"value": "wrap",
|
|
8689
8721
|
"description": ""
|
|
8690
8722
|
}
|
|
8691
8723
|
]
|
|
8692
8724
|
},
|
|
8693
|
-
"description": "
|
|
8694
|
-
"fieldName": "
|
|
8725
|
+
"description": "Manage inline tag rendering for many-item select",
|
|
8726
|
+
"fieldName": "tagLayout"
|
|
8695
8727
|
},
|
|
8696
8728
|
{
|
|
8697
8729
|
"name": "behavior-create",
|
|
@@ -8921,7 +8953,7 @@
|
|
|
8921
8953
|
"since": "0.17.0",
|
|
8922
8954
|
"status": "stable",
|
|
8923
8955
|
"behavior": "form",
|
|
8924
|
-
"markdown": "## nve-combobox\n\nAn editable combobox with autocomplete behavior and selection support.\n\n### Example\n\n```html\n<nve-combobox>\n <label>label</label>\n <input type=\"search\" />\n <datalist>\n <option value=\"status\"></option>\n <option value=\"priority\"></option>\n <option value=\"date\"></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n </datalist>\n <nve-control-message>message</nve-control-message>\n</nve-combobox>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/combobox/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for an input and a datalist/select element |\n| prefix-icon | `string` | slot for icon before the input |\n| footer | `string` | slot for dropdown footer content |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat'` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n|
|
|
8956
|
+
"markdown": "## nve-combobox\n\nAn editable combobox with autocomplete behavior and selection support.\n\n### Example\n\n```html\n<nve-combobox>\n <label>label</label>\n <input type=\"search\" />\n <datalist>\n <option value=\"status\"></option>\n <option value=\"priority\"></option>\n <option value=\"date\"></option>\n <option value=\"session\"></option>\n <option value=\"configuration\"></option>\n <option value=\"contains\"></option>\n </datalist>\n <nve-control-message>message</nve-control-message>\n</nve-combobox>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/combobox/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for an input and a datalist/select element |\n| prefix-icon | `string` | slot for icon before the input |\n| footer | `string` | slot for dropdown footer content |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat'` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| tagLayout (tag-layout) | `'hidden' \\| 'wrap'` | Manage inline tag rendering for many-item select |\n| behaviorCreate (behavior-create) | `boolean` | Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail. |\n| reset | | Resets control value to initial attribute value and clears any active validation rules. |\n| selectAll | | Select all options provided |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |\n| layout | `\\| 'vertical'\n \\| 'vertical-inline'\n \\| 'horizontal'\n \\| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |\n| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n | | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` | |\n| showPicker | | |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| create | `CustomEvent` | Fires when the user confirms a value that doesn't match any existing option and the `behavior-create` attribute exists. `detail: { value }`. |\n| scroll | `CustomEvent` | Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`. |\n| reset | `CustomEvent` | |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --scroll-height | `string` | |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --border-color | `string` | [MDN](https://mdn.dev/CSS/border-color) |\n| --max-height | `string` | [MDN](https://mdn.dev/CSS/max-height) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
|
|
8925
8957
|
}
|
|
8926
8958
|
}
|
|
8927
8959
|
],
|
|
@@ -31293,6 +31325,11 @@
|
|
|
31293
31325
|
"kind": "method",
|
|
31294
31326
|
"name": "hostDisconnected"
|
|
31295
31327
|
},
|
|
31328
|
+
{
|
|
31329
|
+
"kind": "method",
|
|
31330
|
+
"name": "#clearInterestTimeout",
|
|
31331
|
+
"privacy": "private"
|
|
31332
|
+
},
|
|
31296
31333
|
{
|
|
31297
31334
|
"kind": "method",
|
|
31298
31335
|
"name": "#parseInterestDelay",
|