@nvidia-elements/core 0.0.2 → 0.0.3
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 -28
- package/README.md +1 -10
- package/dist/_virtual/{_@oxc-project_runtime@0.115.0 → _@oxc-project_runtime@0.123.0}/helpers/decorate.js +1 -1
- package/dist/accordion/accordion2.js +5 -5
- package/dist/alert/alert-banner2.js +1 -1
- package/dist/alert/alert-group2.js +2 -2
- package/dist/alert/alert2.js +2 -2
- package/dist/avatar/avatar-group2.js +1 -1
- package/dist/avatar/avatar2.js +2 -2
- package/dist/badge/badge2.js +2 -2
- package/dist/breadcrumb/breadcrumb2.js +2 -2
- package/dist/bundles/index.d.ts +38 -34
- package/dist/bundles/index.js +13 -6952
- package/dist/button/button2.js +2 -2
- package/dist/button-group/button-group2.js +2 -2
- package/dist/card/card2.js +5 -5
- package/dist/chat-message/chat-message2.js +2 -2
- package/dist/checkbox/checkbox-group2.js +2 -2
- package/dist/checkbox/checkbox2.js +2 -2
- package/dist/checkbox/define.js +6 -3
- package/dist/checkbox/define.js.map +1 -1
- package/dist/color/color2.js +2 -2
- package/dist/color/define.js +5 -3
- package/dist/color/define.js.map +1 -1
- package/dist/combobox/combobox.d.ts +1 -0
- package/dist/combobox/combobox.examples.js.map +1 -1
- package/dist/combobox/combobox.examples.json +11 -0
- package/dist/combobox/combobox2.js +76 -55
- package/dist/combobox/combobox2.js.map +1 -1
- package/dist/combobox/define.js +5 -3
- package/dist/combobox/define.js.map +1 -1
- package/dist/copy-button/copy-button2.js +2 -2
- package/dist/custom-elements-jsx.d.ts +9 -62
- package/dist/custom-elements-vue.d.ts +9 -62
- package/dist/custom-elements.json +61 -733
- package/dist/data.html.json +4 -42
- package/dist/date/date2.js +2 -2
- package/dist/date/define.js +5 -3
- package/dist/date/define.js.map +1 -1
- package/dist/datetime/datetime2.js +2 -2
- package/dist/datetime/define.js +5 -3
- package/dist/datetime/define.js.map +1 -1
- package/dist/dialog/dialog-footer2.js +2 -2
- package/dist/dialog/dialog-header2.js +2 -2
- package/dist/dialog/dialog2.js +2 -2
- package/dist/divider/divider2.js +2 -2
- package/dist/dot/dot2.js +2 -2
- package/dist/drawer/drawer-content2.js +2 -2
- package/dist/drawer/drawer-footer2.js +2 -2
- package/dist/drawer/drawer-header2.js +2 -2
- package/dist/drawer/drawer2.js +2 -2
- package/dist/dropdown/dropdown-footer2.js +2 -2
- package/dist/dropdown/dropdown-header2.js +2 -2
- package/dist/dropdown/dropdown2.js +2 -2
- package/dist/dropdown-group/dropdown-group.js +2 -2
- package/dist/dropzone/dropzone2.js +2 -2
- package/dist/file/define.js +5 -3
- package/dist/file/define.js.map +1 -1
- package/dist/file/file2.js +1 -1
- package/dist/forms/control/control2.js +2 -2
- package/dist/forms/control-group/control-group2.js +2 -2
- package/dist/forms/control-message/control-message2.js +2 -2
- package/dist/grid/cell/cell2.js +1 -1
- package/dist/grid/column/column.d.ts +1 -0
- package/dist/grid/column/column2.js +5 -2
- package/dist/grid/column/column2.js.map +1 -1
- package/dist/grid/footer/footer2.js +2 -2
- package/dist/grid/grid2.js +2 -2
- package/dist/grid/header/header2.js +2 -2
- package/dist/grid/placeholder/placeholder2.js +1 -1
- package/dist/grid/row/row2.js +2 -2
- package/dist/icon/icon2.js +3 -3
- package/dist/icon-button/icon-button2.js +2 -2
- package/dist/index.js +1 -1
- package/dist/input/define.js +6 -3
- package/dist/input/define.js.map +1 -1
- package/dist/input/input-group2.js +1 -1
- package/dist/input/input2.js +2 -2
- package/dist/internal/base/button.js +1 -1
- package/dist/internal/index.js +40 -40
- package/dist/internal/services/global.service.js +1 -1
- package/dist/internal/utils/dom.d.ts +2 -0
- package/dist/internal/utils/dom.js +51 -51
- package/dist/internal/utils/dom.js.map +1 -1
- package/dist/logo/logo2.js +2 -2
- package/dist/menu/menu-item2.js +2 -2
- package/dist/menu/menu.d.ts +3 -0
- package/dist/menu/menu2.js +23 -2
- package/dist/menu/menu2.js.map +1 -1
- package/dist/month/define.js +5 -3
- package/dist/month/define.js.map +1 -1
- package/dist/month/month2.js +2 -2
- package/dist/notification/notification-group2.js +2 -2
- package/dist/notification/notification2.js +2 -2
- package/dist/page/page-panel/page-panel-content2.js +1 -1
- package/dist/page/page-panel/page-panel-footer2.js +2 -2
- package/dist/page/page-panel/page-panel-header2.js +2 -2
- package/dist/page/page-panel/page-panel2.js +2 -2
- package/dist/page/page.examples.js.map +1 -1
- package/dist/page/page2.js +2 -2
- package/dist/page-header/page-header.examples.js.map +1 -1
- package/dist/page-header/page-header2.js +1 -1
- package/dist/page-loader/page-loader.js +1 -1
- package/dist/page-loader/page-loader.js.map +1 -1
- package/dist/page-loader/page-loader2.js +2 -2
- package/dist/pagination/pagination2.js +2 -2
- package/dist/panel/panel2.js +5 -5
- package/dist/password/define.js +5 -3
- package/dist/password/define.js.map +1 -1
- package/dist/password/password2.js +2 -2
- package/dist/preferences-input/preferences-input2.js +2 -2
- package/dist/progress-bar/progress-bar2.js +2 -2
- package/dist/progress-ring/progress-ring2.js +2 -2
- package/dist/progressive-filter-chip/progressive-filter-chip2.js +2 -2
- package/dist/pulse/pulse2.js +2 -2
- package/dist/radio/define.js +6 -3
- package/dist/radio/define.js.map +1 -1
- package/dist/radio/radio-group2.js +2 -2
- package/dist/radio/radio2.js +2 -2
- package/dist/range/define.js +5 -3
- package/dist/range/define.js.map +1 -1
- package/dist/range/range2.js +2 -2
- package/dist/resize-handle/resize-handle2.js +2 -2
- package/dist/search/define.js +5 -3
- package/dist/search/define.js.map +1 -1
- package/dist/search/search2.js +2 -2
- package/dist/select/define.js +5 -3
- package/dist/select/define.js.map +1 -1
- package/dist/select/select2.js +2 -2
- package/dist/skeleton/skeleton2.js +2 -2
- package/dist/sort-button/sort-button2.js +2 -2
- package/dist/sparkline/sparkline.utils.js +2 -8
- package/dist/sparkline/sparkline.utils.js.map +1 -1
- package/dist/sparkline/sparkline2.js +2 -2
- package/dist/star-rating/define.js +5 -3
- package/dist/star-rating/define.js.map +1 -1
- package/dist/star-rating/star-rating2.js +2 -2
- package/dist/steps/steps2.js +3 -3
- package/dist/switch/define.js +6 -3
- package/dist/switch/define.js.map +1 -1
- package/dist/switch/switch-group2.js +2 -2
- package/dist/switch/switch2.js +2 -2
- package/dist/tabs/tabs2.js +3 -3
- package/dist/tag/tag2.js +2 -2
- package/dist/textarea/define.js +5 -3
- package/dist/textarea/define.js.map +1 -1
- package/dist/textarea/textarea2.js +1 -1
- package/dist/time/define.js +5 -3
- package/dist/time/define.js.map +1 -1
- package/dist/time/time2.js +2 -2
- package/dist/toast/toast2.js +2 -2
- package/dist/toggletip/toggletip-footer2.js +2 -2
- package/dist/toggletip/toggletip-header2.js +2 -2
- package/dist/toggletip/toggletip2.js +2 -2
- package/dist/toolbar/toolbar2.js +2 -2
- package/dist/tooltip/tooltip2.js +2 -2
- package/dist/tree/tree-node2.js +2 -2
- package/dist/tree/tree2.js +2 -2
- package/dist/week/define.js +5 -3
- package/dist/week/define.js.map +1 -1
- package/dist/week/week2.js +2 -2
- package/package.json +10 -36
- package/dist/app-header/app-header.d.ts +0 -39
- package/dist/app-header/app-header.js +0 -6
- package/dist/app-header/app-header.js.map +0 -1
- package/dist/app-header/app-header2.js +0 -54
- package/dist/app-header/app-header2.js.map +0 -1
- package/dist/app-header/define.d.ts +0 -6
- package/dist/app-header/define.js +0 -7
- package/dist/app-header/define.js.map +0 -1
- package/dist/app-header/index.d.ts +0 -1
- package/dist/app-header/index.js +0 -2
- package/dist/bundles/audit-logs.js +0 -50
- package/dist/bundles/icons.js +0 -285
- package/dist/bundles/index.css +0 -2
- package/dist/bundles/log.service.js +0 -90
- package/dist/bundles/rolldown-runtime.js +0 -11
- package/dist/css/module.layout.css +0 -1
- package/dist/css/module.typography.css +0 -1
- package/dist/index.css +0 -1
- package/dist/json-viewer/define.d.ts +0 -8
- package/dist/json-viewer/define.js +0 -8
- package/dist/json-viewer/define.js.map +0 -1
- package/dist/json-viewer/index.d.ts +0 -2
- package/dist/json-viewer/index.js +0 -3
- package/dist/json-viewer/json-viewer.d.ts +0 -25
- package/dist/json-viewer/json-viewer.js +0 -6
- package/dist/json-viewer/json-viewer.js.map +0 -1
- package/dist/json-viewer/json-viewer2.js +0 -39
- package/dist/json-viewer/json-viewer2.js.map +0 -1
- package/dist/json-viewer/node/node.d.ts +0 -21
- package/dist/json-viewer/node/node.js +0 -6
- package/dist/json-viewer/node/node.js.map +0 -1
- package/dist/json-viewer/node/node2.js +0 -72
- package/dist/json-viewer/node/node2.js.map +0 -1
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { focusElementTimeout as e } from "../internal/utils/focus.js";
|
|
2
|
-
import { getDisplayValue as t, getElementUpdate as n } from "../internal/utils/dom.js";
|
|
3
|
-
import { onChildListMutation as r } from "../internal/utils/events.js";
|
|
2
|
+
import { getDisplayValue as t, getElementUpdate as n, getPropertyChanges as r } from "../internal/utils/dom.js";
|
|
4
3
|
import { createLightDismiss as i } from "../internal/utils/keynav.js";
|
|
5
|
-
import { __decorate as a } from "../_virtual/_@oxc-project_runtime@0.
|
|
4
|
+
import { __decorate as a } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
|
|
6
5
|
import { scopedRegistry as o } from "../internal/decorators/scoped-registry.js";
|
|
7
6
|
import { useStyles as s } from "../internal/styles/index.js";
|
|
8
7
|
import { Icon as c } from "../icon/icon2.js";
|
|
@@ -32,7 +31,7 @@ var S = class extends l {
|
|
|
32
31
|
static {
|
|
33
32
|
this.metadata = {
|
|
34
33
|
tag: "nve-combobox",
|
|
35
|
-
version: "0.0.
|
|
34
|
+
version: "0.0.3"
|
|
36
35
|
};
|
|
37
36
|
}
|
|
38
37
|
static {
|
|
@@ -75,36 +74,46 @@ var S = class extends l {
|
|
|
75
74
|
return !!this.querySelector("[slot=\"footer\"]");
|
|
76
75
|
}
|
|
77
76
|
#d = [];
|
|
77
|
+
#f = !1;
|
|
78
78
|
get prefixContent() {
|
|
79
|
-
return this.#r?.multiple && !this.notags ? _`<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.#
|
|
79
|
+
return this.#r?.multiple && !this.notags ? _`<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.#A(e)}">${t(e)}</nve-tag>`)}</div>` : _`<slot name="prefix-icon"></slot>`;
|
|
80
80
|
}
|
|
81
|
-
get #
|
|
81
|
+
get #p() {
|
|
82
82
|
return (this.#t?.options?.length ?? 0) > 50;
|
|
83
83
|
}
|
|
84
|
-
get #
|
|
84
|
+
get #m() {
|
|
85
85
|
return !this._internals.states.has("dirty");
|
|
86
86
|
}
|
|
87
87
|
get suffixContent() {
|
|
88
88
|
if (v) return y;
|
|
89
|
-
let e = this.#i, n = this.#
|
|
90
|
-
return _`<nve-dropdown part="dropdown" .popoverType="${"manual"}" .modal="${!1}" @open="${
|
|
89
|
+
let e = this.#i, n = this.#p, r = this.#m, i = e.filter((e) => !e.hidden).filter((e) => !(e.value === "" && e.disabled)), a = i.filter((e) => !e.disabled).length === 0;
|
|
90
|
+
return _`<nve-dropdown part="dropdown" .popoverType="${"manual"}" .modal="${!1}" @open="${this.#T}" @close="${this.#P}" 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.#A(e)}" ?selected="${e.selected}" aria-selected="${e.selected ? "true" : "false"}" ?disabled="${e.disabled}" aria-label="${t(e)}">${this.#h(e)} ${n || r ? t(e) : _`<span role="presentation">${(e.label ? e.label : e.value)?.split("")?.map((e, t) => _`<span ?matches="${this.#j(e, t)}">${e}</span>`)}</span>`}</nve-menu-item>`)} ${a ? _`<nve-menu-item part="menu-item" .value="${""}" disabled="disabled">${this.i18n.noResults}</nve-menu-item>` : y}</nve-menu><slot name="footer"></slot></nve-dropdown>`;
|
|
91
91
|
}
|
|
92
|
-
#
|
|
92
|
+
#h(e) {
|
|
93
93
|
let t = this.#r;
|
|
94
|
-
return t?.multiple && this.#
|
|
94
|
+
return t?.multiple && this.#p ? _`<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;
|
|
95
95
|
}
|
|
96
96
|
async firstUpdated(e) {
|
|
97
97
|
super.firstUpdated(e), this.shadowRoot.addEventListener("slotchange", () => {
|
|
98
|
-
this.#e = null, this.#n = null;
|
|
99
|
-
}), await this.updateComplete, this.#
|
|
98
|
+
this.#e = null, this.#n = null, this.#C();
|
|
99
|
+
}), await this.updateComplete, this.#g(), this.#_(), this.#E(), this.#D(), this.#k(), this.#R(), this.#B(), await this.#O(), this.input.setAttribute("list", ""), this.input.autocomplete = "off";
|
|
100
100
|
}
|
|
101
101
|
connectedCallback() {
|
|
102
|
-
super.connectedCallback()
|
|
103
|
-
|
|
104
|
-
|
|
102
|
+
super.connectedCallback();
|
|
103
|
+
let e = new MutationObserver((e) => {
|
|
104
|
+
e.some((e) => e.type === "childList" && e.target === this) && (this.#e = null, this.#n = null), this.#C();
|
|
105
|
+
});
|
|
106
|
+
e.observe(this, {
|
|
107
|
+
childList: !0,
|
|
108
|
+
subtree: !0,
|
|
105
109
|
attributes: !0,
|
|
106
|
-
|
|
107
|
-
|
|
110
|
+
attributeFilter: [
|
|
111
|
+
"selected",
|
|
112
|
+
"disabled",
|
|
113
|
+
"value"
|
|
114
|
+
],
|
|
115
|
+
characterData: !0
|
|
116
|
+
}), this.#d.push(e);
|
|
108
117
|
}
|
|
109
118
|
disconnectedCallback() {
|
|
110
119
|
super.disconnectedCallback(), this.#d.forEach((e) => e.disconnect());
|
|
@@ -115,39 +124,51 @@ var S = class extends l {
|
|
|
115
124
|
selectAll() {
|
|
116
125
|
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 }));
|
|
117
126
|
}
|
|
118
|
-
#h() {
|
|
119
|
-
this.#r && !this.#r.multiple && (this.#_(), this.#y(), this.#x());
|
|
120
|
-
}
|
|
121
127
|
#g() {
|
|
122
|
-
this.#r
|
|
128
|
+
this.#r && !this.#r.multiple && (this.#v(), this.#b(), this.#S());
|
|
123
129
|
}
|
|
124
130
|
#_() {
|
|
131
|
+
this.#r?.multiple && (this.#v(), this.#b(), this.#S(), this._internals.states.add("multiple"));
|
|
132
|
+
}
|
|
133
|
+
#v() {
|
|
125
134
|
let e = Array.from(this.#r.selectedOptions).find((e) => e.hasAttribute("selected"));
|
|
126
135
|
e && !this.#r.multiple && !this.input.defaultValue && (this.input.value = t(e));
|
|
127
136
|
}
|
|
128
|
-
#
|
|
137
|
+
#y() {
|
|
129
138
|
!this.#r.multiple && !this.input.defaultValue && (this.input.value = t(Array.from(this.#r.selectedOptions).find((e) => e.value === this.#r.value)));
|
|
130
139
|
}
|
|
131
|
-
#
|
|
140
|
+
#b() {
|
|
132
141
|
this.#d.push(n(this.#r, "value", () => {
|
|
133
|
-
this.#
|
|
142
|
+
this.#y(), this.requestUpdate();
|
|
134
143
|
}));
|
|
135
144
|
}
|
|
136
|
-
#
|
|
137
|
-
#
|
|
145
|
+
#x = /* @__PURE__ */ new Set();
|
|
146
|
+
#S() {
|
|
138
147
|
this.#i.forEach((e) => {
|
|
139
|
-
this.#
|
|
148
|
+
this.#x.has(e) || (this.#x.add(e), r(e, "selected", () => this.requestUpdate()));
|
|
140
149
|
});
|
|
141
150
|
}
|
|
142
|
-
#
|
|
151
|
+
#C() {
|
|
152
|
+
this.#f || (this.#f = !0, queueMicrotask(() => {
|
|
153
|
+
this.#f = !1, this.#w(), this.#S(), this.requestUpdate();
|
|
154
|
+
}));
|
|
155
|
+
}
|
|
156
|
+
#w() {
|
|
157
|
+
let e = new Set(this.#i);
|
|
158
|
+
for (let t of this.#x) e.has(t) || this.#x.delete(t);
|
|
159
|
+
}
|
|
160
|
+
#T(e) {
|
|
161
|
+
e.target.hidden = !1;
|
|
162
|
+
}
|
|
163
|
+
#E() {
|
|
143
164
|
this.addEventListener("keydown", (e) => {
|
|
144
|
-
e.code === "Tab" && (this.#l && this.#o.matches(":popover-open") && this.input.value !== "" && (e.preventDefault(), this.#
|
|
165
|
+
e.code === "Tab" && (this.#l && this.#o.matches(":popover-open") && this.input.value !== "" && (e.preventDefault(), this.#I(this.#a[0].option), this.#L(this.#i.find((e) => (e.label ? e.label : e.value) === this.#a[0].option))), this.#o.hidePopover());
|
|
145
166
|
});
|
|
146
167
|
}
|
|
147
|
-
#
|
|
148
|
-
this.input.addEventListener("input", () => this.#
|
|
168
|
+
#D() {
|
|
169
|
+
this.input.addEventListener("input", () => this.#M()), this.shadowRoot.addEventListener("slotchange", () => this.#M());
|
|
149
170
|
}
|
|
150
|
-
async #
|
|
171
|
+
async #O() {
|
|
151
172
|
let e = this.#o;
|
|
152
173
|
await e.updateComplete, i({
|
|
153
174
|
element: e.shadowRoot.querySelector("[internal-host]"),
|
|
@@ -156,60 +177,60 @@ var S = class extends l {
|
|
|
156
177
|
this.#o.matches(":popover-open") && this.#o.hidePopover();
|
|
157
178
|
});
|
|
158
179
|
}
|
|
159
|
-
#
|
|
180
|
+
#k() {
|
|
160
181
|
this.input.addEventListener("pointerdown", () => {
|
|
161
|
-
this.#
|
|
182
|
+
this.#N();
|
|
162
183
|
}), this.addEventListener("keydown", (e) => {
|
|
163
|
-
e.code !== "Tab" && e.code !== "Escape" && this.#
|
|
184
|
+
e.code !== "Tab" && e.code !== "Escape" && this.#N(), e?.code === "ArrowDown" && this.getRootNode().activeElement === this.input && (this.#o.tabIndex = 0, this.#a[0]?.focus(), e.preventDefault());
|
|
164
185
|
});
|
|
165
186
|
}
|
|
166
|
-
#
|
|
167
|
-
this.#r?.multiple || (this.#
|
|
187
|
+
#A(n) {
|
|
188
|
+
this.#r?.multiple || (this.#I(t(n)), this.#o.hidePopover(), e(this.input)), this.#r && (n.selected = !n.selected, this.#L(n)), this.requestUpdate();
|
|
168
189
|
}
|
|
169
|
-
#
|
|
190
|
+
#j(e, t) {
|
|
170
191
|
return this.#l ? this.input.value.toLowerCase()[t]?.toLowerCase() === e.toLowerCase() : !1;
|
|
171
192
|
}
|
|
172
|
-
#
|
|
193
|
+
#M() {
|
|
173
194
|
this.#i.forEach((e) => {
|
|
174
195
|
e.textContent.trim().length ? e.hidden = !e.textContent.toLocaleLowerCase().includes(this.input?.value.toLowerCase()) : e.hidden = !e.value.toLocaleLowerCase().includes(this.input?.value.toLowerCase());
|
|
175
196
|
}), this.requestUpdate();
|
|
176
197
|
}
|
|
177
|
-
#
|
|
178
|
-
!this.input.disabled && !this.#o.matches(":popover-open") && (this.#r ? this.#i.forEach((e) => e.hidden = !1) : this.#
|
|
198
|
+
#N() {
|
|
199
|
+
!this.input.disabled && !this.#o.matches(":popover-open") && (this.#r ? (this.#i.forEach((e) => e.hidden = !1), this.requestUpdate()) : this.#M(), this.#o.style.setProperty("--min-width", `${this.#s.getBoundingClientRect().width}px`), this.#o.showPopover({ source: this.#s }), this.#o.tabIndex = -1);
|
|
179
200
|
}
|
|
180
|
-
#
|
|
181
|
-
this.#o.hidePopover(), this._internals.states.delete("dirty"), this.#
|
|
201
|
+
#P() {
|
|
202
|
+
this.#o.hidePopover(), this._internals.states.delete("dirty"), this.#F();
|
|
182
203
|
}
|
|
183
|
-
#
|
|
184
|
-
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.#
|
|
204
|
+
#F() {
|
|
205
|
+
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.#I(""), this.#L({
|
|
185
206
|
value: "",
|
|
186
207
|
selected: !1
|
|
187
208
|
}));
|
|
188
209
|
}
|
|
189
|
-
#
|
|
210
|
+
#I(e) {
|
|
190
211
|
this.input.value = e, this.input.dispatchEvent(new Event("input", { bubbles: !0 })), this.input.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
191
212
|
}
|
|
192
|
-
#
|
|
213
|
+
#L(e) {
|
|
193
214
|
let t = [...this.#i, {
|
|
194
215
|
value: "",
|
|
195
216
|
selected: null
|
|
196
217
|
}].find((t) => t.value === e.value);
|
|
197
218
|
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 }));
|
|
198
219
|
}
|
|
199
|
-
#
|
|
220
|
+
#R() {
|
|
200
221
|
if (this.#r?.multiple && !this.notags) {
|
|
201
|
-
this.#r.selectedOptions.length > 1 && this.#
|
|
202
|
-
let e = new ResizeObserver((e) => this.#
|
|
222
|
+
this.#r.selectedOptions.length > 1 && this.#z(this.#c.getBoundingClientRect().width);
|
|
223
|
+
let e = new ResizeObserver((e) => this.#z(e[0].contentRect.width));
|
|
203
224
|
this.#d.push(e), e.observe(this.#c);
|
|
204
225
|
}
|
|
205
226
|
}
|
|
206
|
-
#
|
|
227
|
+
#z(e) {
|
|
207
228
|
this.#r?.multiple && e > this.#s.getBoundingClientRect().width - 100 ? this._internals.states.add("multiple-overflow") : this._internals.states.delete("multiple-overflow");
|
|
208
229
|
}
|
|
209
|
-
#
|
|
210
|
-
this.#
|
|
230
|
+
#B() {
|
|
231
|
+
this.#V(), this.shadowRoot.addEventListener("slotchange", () => this.#V());
|
|
211
232
|
}
|
|
212
|
-
#
|
|
233
|
+
#V() {
|
|
213
234
|
this.#u ? this._internals.states.add("footer-content") : this._internals.states.delete("footer-content");
|
|
214
235
|
}
|
|
215
236
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox2.js","names":["#datalist","#_datalist","#select","#_select","#options","#items","#dropdown","#input","#tags","#hasAvailableOptions","#hasFooterContent","#selectValue","#largeOptionsList","#isPristine","#closeListBox","#getOptionCheckbox","#characterAtIndexMatches","#setupSingleSelect","#setupMultipleSelect","#setupAutoCompleteKeyEvents","#setupMenuItemUpdateEvents","#setupOpenKeyEvents","#setupOverflowListener","#setupSlotStates","#setupLightDismiss","#observers","#syncOptionSelectedStates","#setupInitialValue","#syncSelectValueStates","#updateInputValue","#trackedOptions","#setInputValue","#setSelectValue","#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 onChildListMutation,\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 * @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 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 #observers: (MutationObserver | ResizeObserver)[] = [];\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 return html`\n <nve-dropdown part=\"dropdown\" .popoverType=${'manual'} .modal=${false} @open=${(e: Event) => ((e.target as HTMLElement).hidden = false)} @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 ? html`<nve-menu-item part=\"menu-item\" .value=${''} disabled>${this.i18n.noResults}</nve-menu-item>` : nothing}\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 });\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 this.#observers.push(\n onChildListMutation(\n this,\n () => {\n this.#syncOptionSelectedStates();\n this.requestUpdate();\n },\n { attributes: true, subtree: true }\n )\n );\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();\n #syncOptionSelectedStates() {\n this.#options.forEach(o => {\n if (!this.#trackedOptions.has(o)) {\n this.#trackedOptions.add(o);\n this.#observers.push(getElementUpdate(o, 'selected', () => this.requestUpdate()));\n }\n });\n }\n\n #setupAutoCompleteKeyEvents() {\n this.addEventListener('keydown', (e: KeyboardEvent) => {\n if (e.code === 'Tab') {\n if (this.#hasAvailableOptions && this.#dropdown!.matches(':popover-open') && this.input.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 }\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 #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 } 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","#selectValue","#largeOptionsList","#isPristine","#onDropdownOpen","#closeListBox","#getOptionCheckbox","#characterAtIndexMatches","#onSlottedChildMutation","#setupSingleSelect","#setupMultipleSelect","#setupAutoCompleteKeyEvents","#setupMenuItemUpdateEvents","#setupOpenKeyEvents","#setupOverflowListener","#setupSlotStates","#setupLightDismiss","#observers","#setupInitialValue","#syncSelectValueStates","#syncOptionSelectedStates","#updateInputValue","#trackedOptions","#syncPending","#cleanupStaleTrackedOptions","#setInputValue","#setSelectValue","#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 * @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 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 #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 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 ? html`<nve-menu-item part=\"menu-item\" .value=${''} disabled>${this.i18n.noResults}</nve-menu-item>` : nothing}\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 if (e.code === 'Tab') {\n if (this.#hasAvailableOptions && this.#dropdown!.matches(':popover-open') && this.input.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 }\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 #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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"}
|
package/dist/combobox/define.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { define as e } from "../internal/utils/dom.js";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
import { ControlMessage as t } from "../forms/control-message/control-message2.js";
|
|
3
|
+
import { Control as n } from "../forms/control/control2.js";
|
|
4
|
+
import { ControlGroup as r } from "../forms/control-group/control-group2.js";
|
|
5
|
+
import { Combobox as i } from "./combobox2.js";
|
|
6
|
+
e(i), e(n), e(r), e(t);
|
|
5
7
|
//#endregion
|
|
6
8
|
|
|
7
9
|
//# sourceMappingURL=define.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"define.js","names":[],"sources":["../../src/combobox/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Combobox } from '@nvidia-elements/core/combobox';\nimport '@nvidia-elements/core/forms
|
|
1
|
+
{"version":3,"file":"define.js","names":[],"sources":["../../src/combobox/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Combobox } from '@nvidia-elements/core/combobox';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Combobox);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nve-combobox': Combobox;\n }\n}\n"],"mappings":";;;;;AAOA,EAAO,EAAS,EAChB,EAAO,EAAQ,EACf,EAAO,EAAa,EACpB,EAAO,EAAe"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
|
|
2
2
|
import { I18nController as t } from "../internal/controllers/i18n.controller.js";
|
|
3
3
|
import { scopedRegistry as n } from "../internal/decorators/scoped-registry.js";
|
|
4
4
|
import { useStyles as r } from "../internal/styles/index.js";
|
|
@@ -19,7 +19,7 @@ var p = class extends a {
|
|
|
19
19
|
static {
|
|
20
20
|
this.metadata = {
|
|
21
21
|
tag: "nve-copy-button",
|
|
22
|
-
version: "0.0.
|
|
22
|
+
version: "0.0.3"
|
|
23
23
|
};
|
|
24
24
|
}
|
|
25
25
|
static {
|
|
@@ -288,13 +288,6 @@ export type AlertProps = {
|
|
|
288
288
|
onclose?: (e: CustomEvent<never>) => void;
|
|
289
289
|
};
|
|
290
290
|
|
|
291
|
-
export type AppHeaderProps = {
|
|
292
|
-
/** @deprecated - not supported on custom element tags */
|
|
293
|
-
"nve-layout"?: string;
|
|
294
|
-
/** @deprecated - not supported on custom element tags */
|
|
295
|
-
"nve-text"?: string;
|
|
296
|
-
};
|
|
297
|
-
|
|
298
291
|
export type AvatarGroupProps = {
|
|
299
292
|
/** @deprecated - not supported on custom element tags */
|
|
300
293
|
"nve-layout"?: string;
|
|
@@ -745,6 +738,8 @@ export type ComboboxProps = {
|
|
|
745
738
|
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
746
739
|
prominence?: "muted";
|
|
747
740
|
|
|
741
|
+
/** Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`. */
|
|
742
|
+
onscroll?: (e: CustomEvent<never>) => void;
|
|
748
743
|
/** */
|
|
749
744
|
onreset?: (e: CustomEvent<CustomEvent>) => void;
|
|
750
745
|
};
|
|
@@ -2143,22 +2138,6 @@ export type InputProps = {
|
|
|
2143
2138
|
onreset?: (e: CustomEvent<CustomEvent>) => void;
|
|
2144
2139
|
};
|
|
2145
2140
|
|
|
2146
|
-
export type JSONViewerProps = {
|
|
2147
|
-
/** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */
|
|
2148
|
-
value?: object;
|
|
2149
|
-
/** Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
|
|
2150
|
-
- `true` The associated content expands and becomes visible to the user.
|
|
2151
|
-
|
|
2152
|
-
- `false` The associated content collapses and hides from the user. */
|
|
2153
|
-
expanded?: boolean;
|
|
2154
|
-
/** */
|
|
2155
|
-
expandedAll?: boolean;
|
|
2156
|
-
/** @deprecated - not supported on custom element tags */
|
|
2157
|
-
"nve-layout"?: string;
|
|
2158
|
-
/** @deprecated - not supported on custom element tags */
|
|
2159
|
-
"nve-text"?: string;
|
|
2160
|
-
};
|
|
2161
|
-
|
|
2162
2141
|
export type LogoProps = {
|
|
2163
2142
|
/** Defines a base color from the theme color palette */
|
|
2164
2143
|
color?:
|
|
@@ -2279,6 +2258,8 @@ export type MenuProps = {
|
|
|
2279
2258
|
"nve-text"?: string;
|
|
2280
2259
|
/** */
|
|
2281
2260
|
items?: MenuItem[];
|
|
2261
|
+
/** Fires when the user scrolls the menu list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`. */
|
|
2262
|
+
onscroll?: (e: CustomEvent<never>) => void;
|
|
2282
2263
|
};
|
|
2283
2264
|
|
|
2284
2265
|
export type MonthProps = {
|
|
@@ -3978,29 +3959,6 @@ export type CustomElements = {
|
|
|
3978
3959
|
*/
|
|
3979
3960
|
"nve-alert": Partial<AlertProps & BaseProps & BaseEvents>;
|
|
3980
3961
|
|
|
3981
|
-
/**
|
|
3982
|
-
* @deprecated use `nve-page-header` instead
|
|
3983
|
-
*
|
|
3984
|
-
* An element that appears across the top of all pages containing the application name and primary navigation.
|
|
3985
|
-
* ---
|
|
3986
|
-
*
|
|
3987
|
-
*
|
|
3988
|
-
* ### **Slots:**
|
|
3989
|
-
* - _default_ - Use the default slot in `logo` to create an app logo badge within the app header. Include a `<span>` element inside `app-header` to change the default application title.
|
|
3990
|
-
* - **title** - undefined
|
|
3991
|
-
* - **nav-items** - For `button` and `icon-button` elements used for navigation behavior. Use the `active` attribute to show the current page.
|
|
3992
|
-
* - **nav-actions** - For `icon-button` elements. Places them in the supplemental actions section of the app header.
|
|
3993
|
-
*
|
|
3994
|
-
* ### **CSS Properties:**
|
|
3995
|
-
* - **--background** - undefined _(default: undefined)_
|
|
3996
|
-
* - **--padding** - undefined _(default: undefined)_
|
|
3997
|
-
* - **--border-bottom** - undefined _(default: undefined)_
|
|
3998
|
-
* - **--color** - undefined _(default: undefined)_
|
|
3999
|
-
* - **--font-weight** - undefined _(default: undefined)_
|
|
4000
|
-
* - **--text-decoration** - undefined _(default: undefined)_
|
|
4001
|
-
*/
|
|
4002
|
-
"nve-app-header": Partial<AppHeaderProps & BaseProps & BaseEvents>;
|
|
4003
|
-
|
|
4004
3962
|
/**
|
|
4005
3963
|
* An avatar group displays a collection of user avatars in a compact and organized layout, showcasing many participants or contributors in a space-efficient way.
|
|
4006
3964
|
* ---
|
|
@@ -4304,7 +4262,8 @@ export type CustomElements = {
|
|
|
4304
4262
|
*
|
|
4305
4263
|
*
|
|
4306
4264
|
* ### **Events:**
|
|
4307
|
-
* - **
|
|
4265
|
+
* - **scroll** - Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`.
|
|
4266
|
+
* - **reset**
|
|
4308
4267
|
*
|
|
4309
4268
|
* ### **Methods:**
|
|
4310
4269
|
* - **reset()** - Resets control value to initial attribute value and clears any active validation rules.
|
|
@@ -5085,21 +5044,6 @@ export type CustomElements = {
|
|
|
5085
5044
|
*/
|
|
5086
5045
|
"nve-input": Partial<InputProps & BaseProps & BaseEvents>;
|
|
5087
5046
|
|
|
5088
|
-
/**
|
|
5089
|
-
* @deprecated use `nve-monaco-input` instead
|
|
5090
|
-
*
|
|
5091
|
-
* The JSON Viewer is a custom element that renders JSON data in a easy to read format. Use it for prototyping and quickly displaying and debugging data. The JSON View is not a substitute for treeview patterns.
|
|
5092
|
-
* ---
|
|
5093
|
-
*
|
|
5094
|
-
*
|
|
5095
|
-
* ### **Slots:**
|
|
5096
|
-
* - _default_ - default slot for json
|
|
5097
|
-
*
|
|
5098
|
-
* ### **CSS Parts:**
|
|
5099
|
-
* - **json-node** - The json node elements
|
|
5100
|
-
*/
|
|
5101
|
-
"nve-json-viewer": Partial<JSONViewerProps & BaseProps & BaseEvents>;
|
|
5102
|
-
|
|
5103
5047
|
/**
|
|
5104
5048
|
* A visual indicator for a brand or application.
|
|
5105
5049
|
* ---
|
|
@@ -5152,6 +5096,9 @@ export type CustomElements = {
|
|
|
5152
5096
|
* ---
|
|
5153
5097
|
*
|
|
5154
5098
|
*
|
|
5099
|
+
* ### **Events:**
|
|
5100
|
+
* - **scroll** - Fires when the user scrolls the menu list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`.
|
|
5101
|
+
*
|
|
5155
5102
|
* ### **Slots:**
|
|
5156
5103
|
* - _default_ - default slot for `nve-menu-item`
|
|
5157
5104
|
*
|