@nvidia-elements/core 2.19.0 → 2.19.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 +12 -0
- package/dist/_virtual/_rolldown/runtime.js +17 -0
- package/dist/accordion/accordion2.js +60 -57
- package/dist/accordion/accordion2.js.map +1 -1
- package/dist/alert/alert-group2.js +1 -1
- package/dist/alert/alert2.js +37 -31
- package/dist/alert/alert2.js.map +1 -1
- package/dist/avatar/avatar-group2.js +1 -1
- package/dist/avatar/avatar2.js +1 -1
- package/dist/badge/badge.d.ts +0 -6
- package/dist/badge/badge2.js +31 -36
- package/dist/badge/badge2.js.map +1 -1
- package/dist/breadcrumb/breadcrumb2.js +1 -1
- package/dist/bundles/index.d.ts +25 -27
- package/dist/bundles/index.js +9 -9
- 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/color.d.ts +2 -0
- package/dist/color/color2.js +7 -4
- package/dist/color/color2.js.map +1 -1
- package/dist/combobox/combobox.d.ts +2 -0
- package/dist/combobox/combobox2.js +14 -6
- package/dist/combobox/combobox2.js.map +1 -1
- package/dist/copy-button/copy-button2.js +26 -23
- package/dist/copy-button/copy-button2.js.map +1 -1
- package/dist/custom-elements-jsx.d.ts +0 -4
- package/dist/custom-elements-vue.d.ts +0 -4
- package/dist/custom-elements.json +3 -173
- package/dist/data.html.json +0 -10
- package/dist/data.snippets.json +27 -27
- package/dist/date/date.d.ts +2 -0
- package/dist/date/date2.js +7 -4
- package/dist/date/date2.js.map +1 -1
- package/dist/datetime/datetime.d.ts +2 -0
- package/dist/datetime/datetime2.js +7 -4
- package/dist/datetime/datetime2.js.map +1 -1
- package/dist/dialog/dialog-footer2.js +1 -1
- package/dist/dialog/dialog-header2.js +1 -1
- package/dist/dialog/dialog2.js +27 -27
- package/dist/dialog/dialog2.js.map +1 -1
- package/dist/divider/divider2.js +1 -1
- package/dist/dot/dot2.js +1 -1
- package/dist/drag-handle/drag-handle2.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 +27 -27
- package/dist/drawer/drawer2.js.map +1 -1
- package/dist/dropdown/dropdown-footer2.js +1 -1
- package/dist/dropdown/dropdown-header2.js +1 -1
- package/dist/dropdown/dropdown2.js +23 -23
- package/dist/dropdown/dropdown2.js.map +1 -1
- package/dist/dropdown-group/dropdown-group.js +1 -1
- package/dist/dropzone/dropzone2.js +28 -22
- package/dist/dropzone/dropzone2.js.map +1 -1
- package/dist/file/file2.js +1 -1
- package/dist/format-bytes/format-bytes2.js +1 -1
- package/dist/format-datetime/format-datetime2.js +1 -1
- package/dist/format-number/format-number2.js +1 -1
- package/dist/format-relative-time/format-relative-time2.js +1 -1
- package/dist/format-truncate/format-truncate2.js +1 -1
- package/dist/forms/control/control.d.ts +3 -0
- package/dist/forms/control/control2.js +34 -31
- package/dist/forms/control/control2.js.map +1 -1
- package/dist/forms/control-group/control-group2.js +1 -1
- package/dist/forms/control-message/control-message2.js +1 -1
- package/dist/gauge/gauge2.js +26 -21
- package/dist/gauge/gauge2.js.map +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/iframe/iframe2.js +1 -1
- package/dist/index.js +5 -6
- package/dist/input/input-group2.js +1 -1
- package/dist/input/input2.js +1 -1
- package/dist/internal/index.d.ts +1 -2
- package/dist/internal/index.js +150 -33
- package/dist/internal/index.js.map +1 -0
- package/dist/internal/types/index.d.ts +1 -1
- package/dist/internal/types/index.js.map +1 -1
- package/dist/logo/logo2.js +1 -1
- package/dist/menu/menu-group2.js +1 -1
- package/dist/menu/menu-item2.js +1 -1
- package/dist/menu/menu2.js +1 -1
- package/dist/month/month.d.ts +2 -0
- package/dist/month/month2.js +7 -4
- package/dist/month/month2.js.map +1 -1
- package/dist/notification/notification-group2.js +1 -1
- package/dist/notification/notification2.js +38 -32
- package/dist/notification/notification2.js.map +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-panel.d.ts +0 -7
- package/dist/page/page-panel/page-panel2.js +18 -20
- package/dist/page/page-panel/page-panel2.js.map +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 +45 -38
- package/dist/pagination/pagination2.js.map +1 -1
- package/dist/panel/panel2.js +43 -38
- package/dist/panel/panel2.js.map +1 -1
- package/dist/password/password.d.ts +2 -0
- package/dist/password/password2.js +10 -4
- package/dist/password/password2.js.map +1 -1
- package/dist/preferences-input/preferences-input2.js +32 -27
- package/dist/preferences-input/preferences-input2.js.map +1 -1
- package/dist/progress-bar/progress-bar2.js +1 -1
- package/dist/progress-dot/progress-dot2.js +17 -17
- package/dist/progress-dot/progress-dot2.js.map +1 -1
- package/dist/progress-ring/progress-ring2.js +27 -22
- package/dist/progress-ring/progress-ring2.js.map +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip2.js +30 -30
- package/dist/progressive-filter-chip/progressive-filter-chip2.js.map +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 +17 -17
- package/dist/resize-handle/resize-handle2.js.map +1 -1
- package/dist/search/search2.js +1 -1
- package/dist/select/select2.js +44 -41
- package/dist/select/select2.js.map +1 -1
- package/dist/skeleton/skeleton2.js +1 -1
- package/dist/sort-button/sort-button2.js +20 -20
- package/dist/sort-button/sort-button2.js.map +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/tabs-item-group2.js +1 -1
- package/dist/tabs/tabs2.js +2 -2
- package/dist/tag/tag2.js +19 -19
- package/dist/tag/tag2.js.map +1 -1
- package/dist/textarea/textarea2.js +1 -1
- package/dist/time/time.d.ts +2 -0
- package/dist/time/time2.js +7 -4
- package/dist/time/time2.js.map +1 -1
- package/dist/toast/toast2.js +35 -29
- package/dist/toast/toast2.js.map +1 -1
- package/dist/toggletip/toggletip-footer2.js +1 -1
- package/dist/toggletip/toggletip-header2.js +1 -1
- package/dist/toggletip/toggletip2.js +25 -25
- package/dist/toggletip/toggletip2.js.map +1 -1
- package/dist/toolbar/toolbar2.js +1 -1
- package/dist/tooltip/tooltip2.js +1 -1
- package/dist/tree/tree-node2.js +45 -45
- package/dist/tree/tree-node2.js.map +1 -1
- package/dist/tree/tree2.js +1 -1
- package/dist/week/week.d.ts +2 -0
- package/dist/week/week2.js +7 -4
- package/dist/week/week2.js.map +1 -1
- package/package.json +2 -2
- package/dist/internal/controllers/i18n.controller.d.ts +0 -19
- package/dist/internal/controllers/i18n.controller.examples.js +0 -6
- package/dist/internal/controllers/i18n.controller.examples.js.map +0 -1
- package/dist/internal/controllers/i18n.controller.examples.json +0 -16
- package/dist/internal/controllers/i18n.controller.js +0 -38
- package/dist/internal/controllers/i18n.controller.js.map +0 -1
- package/dist/internal/services/i18n.service.d.ts +0 -64
- package/dist/internal/services/i18n.service.js +0 -73
- package/dist/internal/services/i18n.service.js.map +0 -1
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
import c from "../
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import
|
|
13
|
-
import p from "./progressive-filter-chip.
|
|
14
|
-
import m from "
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
1
|
+
import { appendRootNodeStyle as e, generateId as t } from "../internal/utils/dom.js";
|
|
2
|
+
import { attachInternals as n } from "../internal/utils/a11y.js";
|
|
3
|
+
import { TypeClosableController as r } from "../internal/controllers/type-closable.controller.js";
|
|
4
|
+
import { typeSSR as i } from "../internal/controllers/type-ssr.controller.js";
|
|
5
|
+
import { scopedRegistry as a } from "../internal/decorators/scoped-registry.js";
|
|
6
|
+
import { useStyles as o } from "../internal/styles/index.js";
|
|
7
|
+
import s from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
|
|
8
|
+
import { IconButton as c } from "../icon-button/icon-button2.js";
|
|
9
|
+
import { Input as l } from "../input/input2.js";
|
|
10
|
+
import { Select as u } from "../select/select2.js";
|
|
11
|
+
import { Date as d } from "../date/date2.js";
|
|
12
|
+
import f from "./progressive-filter-chip.global.js";
|
|
13
|
+
import p from "./progressive-filter-chip.js";
|
|
14
|
+
import { LitElement as m, html as h, nothing as g } from "lit";
|
|
15
|
+
import { property as _ } from "lit/decorators/property.js";
|
|
16
|
+
import { I18nController as v } from "@nvidia-elements/foundations/internal/i18n";
|
|
17
17
|
import { state as y } from "lit/decorators/state.js";
|
|
18
18
|
//#region src/progressive-filter-chip/progressive-filter-chip.ts
|
|
19
|
-
var b = class extends
|
|
20
|
-
constructor(...
|
|
21
|
-
super(...
|
|
19
|
+
var b = { close: "close" }, x = class extends m {
|
|
20
|
+
constructor(...e) {
|
|
21
|
+
super(...e), this.#e = new v(this, b), this.i18n = this.#e.i18n, this.inputs = [], this.#t = new r(this);
|
|
22
22
|
}
|
|
23
23
|
static {
|
|
24
24
|
this.metadata = {
|
|
25
25
|
tag: "nve-progressive-filter-chip",
|
|
26
|
-
version: "2.19.
|
|
26
|
+
version: "2.19.1"
|
|
27
27
|
};
|
|
28
28
|
}
|
|
29
29
|
static {
|
|
30
30
|
this.elementDefinitions = {
|
|
31
|
+
[l.metadata.tag]: l,
|
|
31
32
|
[u.metadata.tag]: u,
|
|
32
33
|
[d.metadata.tag]: d,
|
|
33
|
-
[
|
|
34
|
-
[l.metadata.tag]: l
|
|
34
|
+
[c.metadata.tag]: c
|
|
35
35
|
};
|
|
36
36
|
}
|
|
37
37
|
#e;
|
|
38
38
|
static {
|
|
39
|
-
this.styles =
|
|
39
|
+
this.styles = o([p]);
|
|
40
40
|
}
|
|
41
41
|
#t;
|
|
42
42
|
#n(e) {
|
|
43
|
-
let t =
|
|
44
|
-
return e.tagName === "SELECT" ?
|
|
43
|
+
let t = h`<slot name="${e.slot}" @slotchange="${this.#r}"></slot>`;
|
|
44
|
+
return e.tagName === "SELECT" ? h`<nve-select part="select" multiple-overflow ?fit-text="${!e.multiple}">${t}</nve-select>` : e.tagName === "INPUT" && e.type === "date" ? h`<nve-date part="date">${t}</nve-date>` : e.tagName === "INPUT" ? h`<nve-input part="input">${t}</nve-input>` : t;
|
|
45
45
|
}
|
|
46
46
|
render() {
|
|
47
|
-
return
|
|
47
|
+
return h`<div internal-host>${this.inputs.map((e) => this.#n(e))} ${this.closable ? h`<nve-icon-button part="icon-button" exportparts="icon:icon-button-icon" @click="${() => this.#t.close()}" .ariaLabel="${this.i18n.close}" icon-name="cancel"></nve-icon-button>` : g}</div><slot hidden-slot @slotchange="${this.#i}"></slot>`;
|
|
48
48
|
}
|
|
49
49
|
connectedCallback() {
|
|
50
|
-
super.connectedCallback(),
|
|
50
|
+
super.connectedCallback(), n(this), this._internals.role = "toolbar", this.setAttribute("nve-control", ""), e(this, f);
|
|
51
51
|
}
|
|
52
52
|
#r(e) {
|
|
53
53
|
e.target.assignedElements().length || this.#a();
|
|
@@ -56,15 +56,15 @@ var b = class extends h {
|
|
|
56
56
|
if (e.target && e.target.assignedElements().length) {
|
|
57
57
|
this.#a();
|
|
58
58
|
let e = Array.from(this.shadowRoot.querySelector("slot:not([name])").assignedElements()).filter((e) => e.matches("input, select, nve-button, [nve-control]"));
|
|
59
|
-
e.forEach((e) => e.slot =
|
|
59
|
+
e.forEach((e) => e.slot = t()), this.inputs = e.length ? e : this.inputs;
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
62
|
#a() {
|
|
63
63
|
Array.from(this.shadowRoot.querySelectorAll("slot")).flatMap((e) => e.assignedElements()).forEach((e) => e.slot = "");
|
|
64
64
|
}
|
|
65
65
|
};
|
|
66
|
-
|
|
66
|
+
s([_({ type: Boolean })], x.prototype, "closable", void 0), s([_({ type: Object })], x.prototype, "i18n", void 0), s([y()], x.prototype, "inputs", void 0), x = s([i(), a()], x);
|
|
67
67
|
//#endregion
|
|
68
|
-
export {
|
|
68
|
+
export { x as ProgressiveFilterChip };
|
|
69
69
|
|
|
70
70
|
//# sourceMappingURL=progressive-filter-chip2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progressive-filter-chip2.js","names":[],"sources":["../../src/progressive-filter-chip/progressive-filter-chip.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport {\n appendRootNodeStyle,\n attachInternals,\n generateId,\n
|
|
1
|
+
{"version":3,"file":"progressive-filter-chip2.js","names":[],"sources":["../../src/progressive-filter-chip/progressive-filter-chip.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport {\n appendRootNodeStyle,\n attachInternals,\n generateId,\n scopedRegistry,\n TypeClosableController,\n typeSSR,\n useStyles\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { Input } from '@nvidia-elements/core/input';\nimport { Select } from '@nvidia-elements/core/select';\nimport { Date } from '@nvidia-elements/core/date';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport globalStyles from './progressive-filter-chip.global.css?inline';\nimport styles from './progressive-filter-chip.css?inline';\n\nconst i18nDefaults = {\n close: 'close'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-progressive-filter-chip\n * @description A filter chip is a control that enables users to select many options from a set of choices.\n * @documentation https://nvidia.github.io/elements/docs/elements/progressive-filter-chip/\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/progressive-filter-chip\n * @slot - `input`, `select`, `nve-button`, or other `[nve-control]` elements used to build the filter.\n * @event close - Dispatched when the filter chip closes.\n * @cssprop --gap\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --background\n * @cssprop --font-weight\n * @cssprop --padding\n * @cssprop --width\n * @csspart select - The select element\n * @csspart date - The date input element\n * @csspart input - The input element\n * @csspart icon-button - The icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n */\n@typeSSR()\n@scopedRegistry()\nexport class ProgressiveFilterChip extends LitElement {\n static readonly metadata = {\n tag: 'nve-progressive-filter-chip',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Input.metadata.tag]: Input,\n [Select.metadata.tag]: Select,\n [Date.metadata.tag]: Date,\n [IconButton.metadata.tag]: IconButton\n };\n\n /** Determines if a close button should render within filter chip */\n @property({ type: Boolean }) closable: boolean;\n\n #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n /** Enables updating internal string values for internationalization. */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n @state() private inputs: Element[] = [];\n\n static styles = useStyles([styles]);\n\n #typeClosableController = new TypeClosableController(this);\n\n /** @private */\n declare _internals: ElementInternals;\n\n #getControlTemplate(el: Element) {\n const slot = html`<slot name=${el.slot} @slotchange=${this.#removeItem}></slot>`;\n if (el.tagName === 'SELECT') {\n return html`<nve-select part=\"select\" multiple-overflow ?fit-text=${!(el as HTMLSelectElement).multiple}>${slot}</nve-select>`;\n } else if (el.tagName === 'INPUT' && (el as HTMLInputElement).type === 'date') {\n return html`<nve-date part=\"date\">${slot}</nve-date>`;\n } else if (el.tagName === 'INPUT') {\n return html`<nve-input part=\"input\">${slot}</nve-input>`;\n } else {\n return slot;\n }\n }\n\n render() {\n return html`\n <div internal-host>\n ${this.inputs.map(el => this.#getControlTemplate(el))}\n ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${() => this.#typeClosableController.close()} .ariaLabel=${this.i18n.close} icon-name=\"cancel\"></nve-icon-button>` : nothing}\n </div>\n <slot hidden-slot @slotchange=${this.#createItems}></slot>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'toolbar';\n this.setAttribute('nve-control', '');\n appendRootNodeStyle(this, globalStyles);\n }\n\n #removeItem(e: Event) {\n if (!(e.target as HTMLSlotElement).assignedElements().length) {\n this.#resetItems();\n }\n }\n\n #createItems(e: Event) {\n if (e.target && (e.target as HTMLSlotElement).assignedElements().length) {\n this.#resetItems();\n const items = Array.from(\n this.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])')!.assignedElements()\n ).filter(i => i.matches('input, select, nve-button, [nve-control]'));\n items.forEach(i => (i.slot = generateId()));\n this.inputs = items.length ? items : this.inputs;\n }\n }\n\n #resetItems() {\n Array.from(this.shadowRoot!.querySelectorAll('slot'))\n .flatMap(i => i.assignedElements())\n .forEach(i => (i.slot = ''));\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAuBA,IAAM,IAAe,EACnB,OAAO,QACT,GAyBa,IAAN,cAAoC,EAAW;;EAyB1B,aATc,KAAA,KAAA,IAAI,EAAqB,MAAM,CAAY,GAGhD,KAAA,OAAA,KAAK,GAAgB,MAEnB,KAAA,SAAA,CAAC,GAIZ,KAAA,KAAA,IAAI,EAAuB,IAAI;;;EAxB9B,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA;IACzB,EAAM,SAAS,MAAM;IACrB,EAAO,SAAS,MAAM;IACtB,EAAK,SAAS,MAAM;IACpB,EAAW,SAAS,MAAM;EAC7B;;CAKA;;EAOgB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;CAElC;CAKA,GAAoB,GAAa;EAC/B,IAAM,IAAO,CAAI,eAAc,EAAG,KAAK,iBAAe,KAAK,GAAY;EAQrE,OAPE,EAAG,YAAY,WACV,CAAI,0DAAyD,CAAE,EAAyB,SAAS,IAAG,EAAK,iBACvG,EAAG,YAAY,WAAY,EAAwB,SAAS,SAC9D,CAAI,yBAAyB,EAAK,eAChC,EAAG,YAAY,UACjB,CAAI,2BAA2B,EAAK,gBAEpC;CAEX;CAEA,SAAS;EACP,OAAO,CAAI,sBAEP,KAAK,OAAO,KAAI,MAAM,KAAK,GAAoB,CAAE,CAAC,EAAE,GACpD,KAAK,WAAW,CAAI,yFAAwF,KAAK,GAAwB,MAAM,EAAE,gBAAc,KAAK,KAAK,MAAM,2CAA0C,EAAQ,uCAErM,KAAK,GAAa;CAEpD;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,WACvB,KAAK,aAAa,eAAe,EAAE,GACnC,EAAoB,MAAM,CAAY;CACxC;CAEA,GAAY,GAAU;EACpB,AAAM,EAAE,OAA2B,iBAAiB,CAAC,CAAC,UACpD,KAAK,GAAY;CAErB;CAEA,GAAa,GAAU;EACrB,IAAI,EAAE,UAAW,EAAE,OAA2B,iBAAiB,CAAC,CAAC,QAAQ;GACvE,KAAK,GAAY;GACjB,IAAM,IAAQ,MAAM,KAClB,KAAK,WAAY,cAA+B,kBAAkB,CAAC,CAAE,iBAAiB,CACxF,CAAC,CAAC,QAAO,MAAK,EAAE,QAAQ,0CAA0C,CAAC;GAEnE,AADA,EAAM,SAAQ,MAAM,EAAE,OAAO,EAAW,CAAE,GAC1C,KAAK,SAAS,EAAM,SAAS,IAAQ,KAAK;EAC5C;CACF;CAEA,KAAc;EACZ,MAAM,KAAK,KAAK,WAAY,iBAAiB,MAAM,CAAC,CAAC,CAClD,SAAQ,MAAK,EAAE,iBAAiB,CAAC,CAAC,CAClC,SAAQ,MAAM,EAAE,OAAO,EAAG;CAC/B;AACF;AArEG,EAAA,CAAA,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAK1B,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAEzB,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAvBR,IAAA,EAAA,CAAA,EAAQ,GACR,EAAe,CAAA,GAAA,CAAA"}
|
package/dist/pulse/pulse2.js
CHANGED
package/dist/radio/radio2.js
CHANGED
package/dist/range/range2.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { GestureController as e } from "../internal/controllers/gesture.controller.js";
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import r from "
|
|
5
|
-
import i from "
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
2
|
+
import { useStyles as t } from "../internal/styles/index.js";
|
|
3
|
+
import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
|
|
4
|
+
import r from "./resize-handle.js";
|
|
5
|
+
import { LitElement as i, html as a } from "lit";
|
|
6
|
+
import { property as o } from "lit/decorators/property.js";
|
|
7
|
+
import { I18nController as s } from "@nvidia-elements/foundations/internal/i18n";
|
|
8
8
|
import { FormControlMixin as c } from "@nvidia-elements/forms/mixins";
|
|
9
9
|
import { ifDefined as l } from "lit/directives/if-defined.js";
|
|
10
10
|
//#region src/resize-handle/resize-handle.ts
|
|
11
|
-
var u = class extends c(
|
|
11
|
+
var u = { resize: "resize" }, d = class extends c(i) {
|
|
12
12
|
static {
|
|
13
|
-
this.styles =
|
|
13
|
+
this.styles = t([r]);
|
|
14
14
|
}
|
|
15
15
|
get #e() {
|
|
16
16
|
return this.shadowRoot.querySelector("input");
|
|
@@ -18,7 +18,7 @@ var u = class extends c(a) {
|
|
|
18
18
|
static {
|
|
19
19
|
this.metadata = {
|
|
20
20
|
tag: "nve-resize-handle",
|
|
21
|
-
version: "2.19.
|
|
21
|
+
version: "2.19.1",
|
|
22
22
|
valueSchema: { type: "number" }
|
|
23
23
|
};
|
|
24
24
|
}
|
|
@@ -27,10 +27,10 @@ var u = class extends c(a) {
|
|
|
27
27
|
#r;
|
|
28
28
|
#i;
|
|
29
29
|
render() {
|
|
30
|
-
return
|
|
30
|
+
return a`<div internal-host><div class="line" part="_line"></div><input aria-label="${l(this.ariaLabel ?? this.i18n.resize)}" type="range" min="${this.min}" max="${this.max}" .valueAsNumber="${this.valueAsNumber}" @input="${(e) => this.#f(e.target.valueAsNumber)}" @change="${(e) => this.#p(e.target.valueAsNumber)}" step="${this.step}"></div>`;
|
|
31
31
|
}
|
|
32
32
|
constructor() {
|
|
33
|
-
super(), this.orientation = "horizontal", this.min = 0, this.max = 100, this.step = 10, this.#t = new
|
|
33
|
+
super(), this.orientation = "horizontal", this.min = 0, this.max = 100, this.step = 10, this.#t = new s(this, u), this.i18n = this.#t.i18n, this.#i = 0, this.#o = (e) => {
|
|
34
34
|
let t = e.detail;
|
|
35
35
|
t.kind === "pointerdown" ? t.event.button === 0 && t.event.isPrimary && this.#r === void 0 && t.claim({ kind: "drag" }) && this.#c(t.event.pointerId) : t.kind === "pointerend" && t.event.pointerId === this.#r && (t.interrupted ? this.#d() : this.#u());
|
|
36
36
|
}, this.#s = (e) => {
|
|
@@ -81,20 +81,20 @@ var u = class extends c(a) {
|
|
|
81
81
|
e <= this.max && e >= this.min && (this.valueAsNumber = e);
|
|
82
82
|
}
|
|
83
83
|
};
|
|
84
|
-
|
|
84
|
+
n([o({
|
|
85
85
|
type: String,
|
|
86
86
|
reflect: !0
|
|
87
|
-
})],
|
|
87
|
+
})], d.prototype, "orientation", void 0), n([o({
|
|
88
88
|
type: Number,
|
|
89
89
|
reflect: !0
|
|
90
|
-
})],
|
|
90
|
+
})], d.prototype, "min", void 0), n([o({
|
|
91
91
|
type: Number,
|
|
92
92
|
reflect: !0
|
|
93
|
-
})],
|
|
93
|
+
})], d.prototype, "max", void 0), n([o({
|
|
94
94
|
type: Number,
|
|
95
95
|
reflect: !0
|
|
96
|
-
})],
|
|
96
|
+
})], d.prototype, "step", void 0), n([o({ type: Object })], d.prototype, "i18n", void 0);
|
|
97
97
|
//#endregion
|
|
98
|
-
export {
|
|
98
|
+
export { d as ResizeHandle };
|
|
99
99
|
|
|
100
100
|
//# sourceMappingURL=resize-handle2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resize-handle2.js","names":[],"sources":["../../src/resize-handle/resize-handle.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property } from 'lit/decorators/property.js';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport {
|
|
1
|
+
{"version":3,"file":"resize-handle2.js","names":[],"sources":["../../src/resize-handle/resize-handle.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property } from 'lit/decorators/property.js';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { GestureController, useStyles, type Gesture, type GestureInput } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './resize-handle.css?inline';\n\nconst i18nDefaults = {\n resize: 'resize'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-resize-handle\n * @description A resize-handle slider is a control that enables users to resize views or panels vertically or horizontally.\n * @documentation https://nvidia.github.io/elements/docs/elements/resize-handle/\n * @since 1.27.0\n * @entrypoint \\@nvidia-elements/core/resize-handle\n * @event toggle - Dispatched when the resize handle is double clicked.\n * @cssprop --background\n * @cssprop --line-width\n * @cssprop --target-size\n * @cssprop --cursor\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/slider/\n *\n */\nexport class ResizeHandle extends FormControlMixin<typeof LitElement, number>(LitElement) {\n /**\n * Determines the orientation direction of the resize handle.\n */\n @property({ type: String, reflect: true }) orientation?: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Determines the min resize value.\n */\n @property({ type: Number, reflect: true }) min = 0;\n\n /**\n * Determines the max resize value.\n */\n @property({ type: Number, reflect: true }) max = 100;\n\n /**\n * Determines the value step change.\n */\n @property({ type: Number, reflect: true }) step = 10;\n\n static styles = useStyles([styles]);\n\n get #range() {\n return this.shadowRoot!.querySelector('input')!;\n }\n\n static readonly metadata = {\n tag: 'nve-resize-handle',\n version: '0.0.0',\n valueSchema: {\n type: 'number' as const\n }\n };\n\n readonly #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n readonly #gestureController: GestureController;\n\n #dragPointerId?: number;\n\n /**\n * Updates internal string values for internationalization.\n */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n #offset = 0;\n\n render() {\n return html`\n <div internal-host>\n <div class=\"line\" part=\"_line\"></div>\n <input aria-label=${ifDefined(this.ariaLabel ?? this.i18n.resize)} type=\"range\" min=${this.min} max=${this.max} .valueAsNumber=${this.valueAsNumber} @input=${(e: Event) => this.#setInput((e.target as HTMLInputElement).valueAsNumber)} @change=${(e: Event) => this.#setChange((e.target as HTMLInputElement).valueAsNumber)} step=${this.step} />\n </div>\n `;\n }\n\n constructor() {\n super();\n this.value = this.value ?? 50;\n this.#offset = this.valueAsNumber;\n this.#gestureController = new GestureController(this, { touchAction: 'none' });\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._internals.role = 'none';\n this.addEventListener('nve-gesture', this.#handleGesture as EventListener);\n this.addEventListener('nve-gesture-input', this.#handleGestureInput as EventListener);\n }\n\n disconnectedCallback() {\n this.removeEventListener('nve-gesture', this.#handleGesture as EventListener);\n this.removeEventListener('nve-gesture-input', this.#handleGestureInput as EventListener);\n this.#cancelDrag();\n super.disconnectedCallback();\n }\n\n firstUpdated(props: PropertyValues) {\n super.firstUpdated(props);\n this.#gestureController.target = this;\n this.addEventListener('dblclick', () => {\n if (!this.dispatchEvent(new CustomEvent('toggle', { cancelable: true, bubbles: true, composed: true }))) {\n return;\n }\n this.#toggle();\n });\n }\n\n #toggle() {\n const value = this.valueAsNumber <= this.max && this.valueAsNumber !== this.min ? this.min : this.max;\n this.#setInput(value);\n this.#setChange(value);\n }\n\n #handleGestureInput = (event: CustomEvent<GestureInput>): void => {\n const input = event.detail;\n if (input.kind === 'pointerdown') {\n const canStartDrag = input.event.button === 0 && input.event.isPrimary && this.#dragPointerId === undefined;\n if (canStartDrag && input.claim({ kind: 'drag' })) this.#dragStart(input.event.pointerId);\n } else if (input.kind === 'pointerend' && input.event.pointerId === this.#dragPointerId) {\n if (input.interrupted) this.#cancelDrag();\n else this.#dragEnd();\n }\n };\n\n #handleGesture = (event: CustomEvent<Gesture<undefined>>): void => {\n if (event.detail.kind === 'drag' && event.detail.event.pointerId === this.#dragPointerId) {\n this.#dragMove(event.detail);\n }\n };\n\n #dragStart(pointerId: number) {\n this.#dragPointerId = pointerId;\n this.#range.step = '1';\n this._internals.states.add('active');\n this.#offset = this.valueAsNumber;\n }\n\n #dragMove(gesture: Extract<Gesture<undefined>, { kind: 'drag' }>) {\n const offset =\n (this.orientation === 'vertical' ? gesture.movementX : -gesture.movementY) * (this.dir === 'rtl' ? -1 : 1);\n this.#offset = Math.max(this.min, Math.min(this.max, this.#offset + offset));\n this.#setInput(this.#offset);\n }\n\n #dragEnd() {\n this.#offset = this.valueAsNumber;\n this.#range.step = `${this.step}`;\n this.#dragPointerId = undefined;\n this._internals.states.delete('active');\n this.#setChange(this.#offset);\n }\n\n #cancelDrag() {\n if (this.#dragPointerId === undefined) return;\n this.#dragPointerId = undefined;\n this.#range.step = `${this.step}`;\n this._internals.states.delete('active');\n }\n\n #setInput(value: number) {\n this.#updateValue(value);\n this.dispatchInputEvent();\n }\n\n #setChange(value: number) {\n this.#updateValue(value);\n this.dispatchChangeEvent();\n }\n\n #updateValue(value: number) {\n if (value <= this.max && value >= this.min) {\n this.valueAsNumber = value;\n }\n }\n}\n"],"mappings":"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"}
|
package/dist/search/search2.js
CHANGED
package/dist/select/select2.js
CHANGED
|
@@ -1,42 +1,45 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import _ from "
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
1
|
+
import { onChildListMutation as e } from "../internal/utils/events.js";
|
|
2
|
+
import { focusElementTimeout as t, onListboxActivate as n } from "../internal/utils/focus.js";
|
|
3
|
+
import { appendRootNodeStyle as r, getElementUpdate as i } from "../internal/utils/dom.js";
|
|
4
|
+
import { scopedRegistry as a } from "../internal/decorators/scoped-registry.js";
|
|
5
|
+
import { useStyles as o } from "../internal/styles/index.js";
|
|
6
|
+
import s from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
|
|
7
|
+
import { Icon as c } from "../icon/icon2.js";
|
|
8
|
+
import { Control as l } from "../forms/control/control2.js";
|
|
9
|
+
import { Tag as u } from "../tag/tag2.js";
|
|
10
|
+
import { Menu as d } from "../menu/menu2.js";
|
|
11
|
+
import { MenuItem as f } from "../menu/menu-item2.js";
|
|
12
|
+
import { Dropdown as p } from "../dropdown/dropdown2.js";
|
|
13
|
+
import m from "./select.js";
|
|
14
|
+
import h from "./select.global.js";
|
|
15
|
+
import { html as g, nothing as _ } from "lit";
|
|
16
|
+
import { property as v } from "lit/decorators/property.js";
|
|
17
|
+
import { I18nController as y, i18n as b } from "@nvidia-elements/foundations/internal/i18n";
|
|
18
18
|
import { ifDefined as x } from "lit/directives/if-defined.js";
|
|
19
19
|
//#region src/select/select.ts
|
|
20
|
-
var S =
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
var S = {
|
|
21
|
+
select: "select",
|
|
22
|
+
selected: "selected"
|
|
23
|
+
}, C = class extends l {
|
|
24
|
+
constructor(...e) {
|
|
25
|
+
super(...e), this.#e = new y(this, S), this.i18n = this.#e.i18n, this.#l = [], this.#p = /* @__PURE__ */ new Map();
|
|
23
26
|
}
|
|
24
27
|
static {
|
|
25
|
-
this.styles =
|
|
28
|
+
this.styles = o([...l.styles, m]);
|
|
26
29
|
}
|
|
27
30
|
static {
|
|
28
31
|
this.metadata = {
|
|
29
32
|
tag: "nve-select",
|
|
30
|
-
version: "2.19.
|
|
33
|
+
version: "2.19.1"
|
|
31
34
|
};
|
|
32
35
|
}
|
|
33
36
|
static {
|
|
34
37
|
this.elementDefinitions = {
|
|
35
|
-
[
|
|
36
|
-
[h.metadata.tag]: h,
|
|
38
|
+
[c.metadata.tag]: c,
|
|
37
39
|
[p.metadata.tag]: p,
|
|
38
|
-
[
|
|
39
|
-
[f.metadata.tag]: f
|
|
40
|
+
[d.metadata.tag]: d,
|
|
41
|
+
[f.metadata.tag]: f,
|
|
42
|
+
[u.metadata.tag]: u
|
|
40
43
|
};
|
|
41
44
|
}
|
|
42
45
|
#e;
|
|
@@ -47,10 +50,10 @@ var S = class extends d {
|
|
|
47
50
|
return Array.from(this.#t?.options ? this.#t.options : []);
|
|
48
51
|
}
|
|
49
52
|
get #r() {
|
|
50
|
-
return this.shadowRoot.querySelector(
|
|
53
|
+
return this.shadowRoot.querySelector(p.metadata.tag);
|
|
51
54
|
}
|
|
52
55
|
get #i() {
|
|
53
|
-
return this.shadowRoot.querySelectorAll(
|
|
56
|
+
return this.shadowRoot.querySelectorAll(f.metadata.tag);
|
|
54
57
|
}
|
|
55
58
|
get #a() {
|
|
56
59
|
return this.shadowRoot.querySelector("[input]");
|
|
@@ -67,25 +70,25 @@ var S = class extends d {
|
|
|
67
70
|
#l;
|
|
68
71
|
get #u() {
|
|
69
72
|
let e = this.#c, t = e ? e.innerText : `${this.#t.selectedOptions.length} ${this.i18n.selected}`;
|
|
70
|
-
return
|
|
73
|
+
return g`<div class="tags-label ${e ? "placeholder" : ""}" aria-hidden="true">${t}</div>`;
|
|
71
74
|
}
|
|
72
75
|
get prefixContent() {
|
|
73
|
-
return this.#t?.multiple && this.#t?.size === 0 ?
|
|
76
|
+
return this.#t?.multiple && this.#t?.size === 0 ? g`${this.#u}<div class="tags">${this.#n.filter((e) => e.selected && e !== this.#c).map((e) => g`<nve-tag part="tag" readonly="readonly" color="gray-slate" closable .value="${e.value}" @click="${() => this.#x(e, !1)}">${e.textContent}</nve-tag>`)}</div>` : _;
|
|
74
77
|
}
|
|
75
78
|
get #d() {
|
|
76
|
-
return
|
|
79
|
+
return g`<nve-menu part="menu" role="listbox" style="--width:100%;--min-width:fit-content" aria-label="${x(this.i18n.select)}">${this.#n.filter((e) => e !== this.#c).map((e, t) => g`<nve-menu-item part="menu-item" role="option" @click="${() => this.#x(e, !e.selected)}" ?selected="${e.selected}" ?disabled="${e.disabled}" ?hidden="${!!e.hidden}" aria-selected="${e.selected}"><slot name="option-${t + 1}"><nve-icon part="icon" name="check" size="sm" aria-hidden="true"></nve-icon>${e.innerText}</slot></nve-menu-item>`)}</nve-menu>`;
|
|
77
80
|
}
|
|
78
81
|
get suffixContent() {
|
|
79
|
-
return this.#t?.size === 0 ?
|
|
82
|
+
return this.#t?.size === 0 ? g`<nve-icon name="caret" part="caret" direction="down" size="sm" aria-hidden="true"></nve-icon><nve-dropdown part="dropdown" @close="${this.#y}" @open="${this.#v}" hidden .anchor="${this.#a}" position="bottom">${this.#d}</nve-dropdown>` : this.#d;
|
|
80
83
|
}
|
|
81
84
|
async firstUpdated(e) {
|
|
82
85
|
super.firstUpdated(e), await this.updateComplete, this.#_();
|
|
83
86
|
}
|
|
84
87
|
#f() {
|
|
85
|
-
this.#l.push(
|
|
88
|
+
this.#l.push(i(this.#t, "value", () => this.requestUpdate()), e(this.#t, () => this.requestUpdate(), {
|
|
86
89
|
attributes: !0,
|
|
87
90
|
subtree: !0
|
|
88
|
-
}),
|
|
91
|
+
}), e(this.#t, () => this.#g(), { subtree: !0 }));
|
|
89
92
|
}
|
|
90
93
|
#p;
|
|
91
94
|
#m() {
|
|
@@ -100,13 +103,13 @@ var S = class extends d {
|
|
|
100
103
|
e.has(n) || (t.disconnect(), this.#p.delete(n), this.#l = this.#l.filter((e) => e !== t));
|
|
101
104
|
}), this.#n.forEach((e) => {
|
|
102
105
|
if (!this.#p.has(e)) {
|
|
103
|
-
let t =
|
|
106
|
+
let t = i(e, "selected", () => this.requestUpdate());
|
|
104
107
|
this.#p.set(e, t), this.#l.push(t);
|
|
105
108
|
}
|
|
106
109
|
});
|
|
107
110
|
}
|
|
108
111
|
connectedCallback() {
|
|
109
|
-
super.connectedCallback(),
|
|
112
|
+
super.connectedCallback(), r(this, h), this.updateComplete.then(() => {
|
|
110
113
|
this.isConnected && this.#m();
|
|
111
114
|
});
|
|
112
115
|
}
|
|
@@ -117,8 +120,8 @@ var S = class extends d {
|
|
|
117
120
|
super.updated(e), this.#t?.size && this.#t?.size !== 0 ? (this._internals.states.add("size"), this.style.setProperty("--size", `${this.#t.size}`)) : (this._internals.states.delete("size"), this.style.removeProperty("--size")), this.#t?.multiple && this.#t?.size === 0 ? this._internals.states.add("multiple") : this._internals.states.delete("multiple");
|
|
118
121
|
}
|
|
119
122
|
#_() {
|
|
120
|
-
this.#t?.size === 0 &&
|
|
121
|
-
this.requestUpdate(), this.#r.style.setProperty("--min-width", `${this.#a.getBoundingClientRect().width}px`), this.#r.showPopover(),
|
|
123
|
+
this.#t?.size === 0 && n(this.#t, () => {
|
|
124
|
+
this.requestUpdate(), this.#r.style.setProperty("--min-width", `${this.#a.getBoundingClientRect().width}px`), this.#r.showPopover(), t(this.#i[0]);
|
|
122
125
|
});
|
|
123
126
|
}
|
|
124
127
|
#v() {
|
|
@@ -139,11 +142,11 @@ var S = class extends d {
|
|
|
139
142
|
this.#t?.multiple && t && t.getBoundingClientRect().width > e - 48 ? this._internals.states.add("multiple-overflow") : this._internals.states.delete("multiple-overflow");
|
|
140
143
|
}
|
|
141
144
|
};
|
|
142
|
-
|
|
145
|
+
s([v({
|
|
143
146
|
type: String,
|
|
144
147
|
reflect: !0
|
|
145
|
-
})],
|
|
148
|
+
})], C.prototype, "container", void 0), s([v({ type: Object })], C.prototype, "i18n", void 0), C = s([b(), a()], C);
|
|
146
149
|
//#endregion
|
|
147
|
-
export {
|
|
150
|
+
export { C as Select };
|
|
148
151
|
|
|
149
152
|
//# sourceMappingURL=select2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select2.js","names":[],"sources":["../../src/select/select.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, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n focusElementTimeout,\n onListboxActivate,\n useStyles,\n i18n,\n I18nController,\n onChildListMutation,\n getElementUpdate,\n scopedRegistry,\n appendRootNodeStyle\n} from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { Menu, MenuItem } from '@nvidia-elements/core/menu';\nimport { Dropdown } from '@nvidia-elements/core/dropdown';\nimport { Tag } from '@nvidia-elements/core/tag';\nimport styles from './select.css?inline';\nimport globalStyles from './select.global.css?inline';\n\n/**\n * @element nve-select\n * @description A select is a control that enables users to select an option from a list of options.\n * @documentation https://nvidia.github.io/elements/docs/elements/select/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/select\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 --border-bottom\n * @cssprop --cursor\n * @cssprop --font-weight\n * @cssprop --text-align\n * @cssprop --scroll-height\n * @cssprop --width\n * @cssprop --control-width\n * @cssprop --max-width\n * @cssprop --min-width\n * @cssprop --box-shadow\n * @cssprop --max-height\n * @cssprop --text-transform\n * @csspart tag\n * @csspart menu - The dropdown menu element\n * @csspart menu-item - The menu item elements\n * @csspart icon - The icon element\n * @csspart caret - The caret/chevron icon element\n * @csspart dropdown - The dropdown popup element\n * @slot - Select input element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\n */\n@i18n<Select>()\n@scopedRegistry()\nexport class Select extends Control {\n static styles = useStyles([...Control.styles, styles]);\n\n static readonly metadata = {\n tag: 'nve-select',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\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 /** Flat container option applies when embedding the component within another containing element */\n @property({ type: String, reflect: true }) container?: 'flat' | 'inline';\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /** Updates internal string values for internationalization. */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n get #select() {\n return this.input as unknown as HTMLSelectElement;\n }\n\n get #options() {\n return Array.from(this.#select?.options ? this.#select.options : []);\n }\n\n get #dropdown() {\n return this.shadowRoot!.querySelector<Dropdown>(Dropdown.metadata.tag);\n }\n\n get #menuItems() {\n return this.shadowRoot!.querySelectorAll<MenuItem>(MenuItem.metadata.tag);\n }\n\n get #input() {\n return this.shadowRoot!.querySelector<HTMLElement>('[input]');\n }\n\n get #tags() {\n return this.shadowRoot!.querySelector('.tags');\n }\n\n get #caret() {\n return this.shadowRoot!.querySelector<Icon>('[name=\"caret\"]');\n }\n\n get #placeholderOption() {\n return this.#options.find(o => o.selected && o.hidden && o.disabled);\n }\n\n #observers: (MutationObserver | ResizeObserver)[] = [];\n\n get #multipleSelectLabel() {\n const option = this.#placeholderOption;\n const label = option ? option.innerText : `${this.#select.selectedOptions.length} ${this.i18n.selected}`;\n return html`<div class=\"tags-label ${option ? 'placeholder' : ''}\" aria-hidden=\"true\">${label}</div>`;\n }\n\n protected get prefixContent() {\n return this.#select?.multiple && this.#select?.size === 0\n ? html`\n ${this.#multipleSelectLabel}\n <div class=\"tags\">\n ${this.#options\n .filter(o => o.selected && o !== this.#placeholderOption)\n .map(\n o => html`\n <nve-tag part=\"tag\" readonly color=\"gray-slate\" closable .value=${o.value} @click=${() => this.#selectValue(o, false)}>${o.textContent}</nve-tag>`\n )}\n </div>`\n : nothing;\n }\n\n get #menu() {\n return html`\n <nve-menu part=\"menu\" role=\"listbox\" style=\"--width: 100%; --min-width: fit-content\" aria-label=${ifDefined(this.i18n.select)}>\n ${this.#options\n .filter(o => o !== this.#placeholderOption)\n .map(\n (o, i) => html`\n <nve-menu-item part=\"menu-item\" role=\"option\" @click=${() => this.#selectValue(o, !o.selected)} ?selected=${o.selected} ?disabled=${o.disabled} ?hidden=${!!o.hidden} aria-selected=${o.selected}>\n <slot name=\"option-${i + 1}\">\n <nve-icon part=\"icon\" name=\"check\" size=\"sm\" aria-hidden=\"true\"></nve-icon> ${o.innerText}\n </slot>\n </nve-menu-item>`\n )}\n </nve-menu>`;\n }\n\n protected get suffixContent() {\n return this.#select?.size === 0\n ? html`\n <nve-icon name=\"caret\" part=\"caret\" direction=\"down\" size=\"sm\" aria-hidden=\"true\"></nve-icon>\n <nve-dropdown part=\"dropdown\" @close=${this.#closeDropdown} @open=${this.#openDropdown} hidden .anchor=${this.#input as HTMLElement} position=\"bottom\">\n ${this.#menu}\n </nve-dropdown>`\n : this.#menu;\n }\n\n async firstUpdated(props: PropertyValues<this>) {\n super.firstUpdated(props);\n await this.updateComplete;\n this.#setupCustomSelectUI();\n }\n\n #syncSelectValueStates() {\n this.#observers.push(\n getElementUpdate(this.#select, 'value', () => this.requestUpdate()),\n onChildListMutation(this.#select, () => this.requestUpdate(), { attributes: true, subtree: true }),\n onChildListMutation(this.#select, () => this.#syncOptionSelectedStates(), { subtree: true })\n );\n }\n\n #optionObservers = new Map<HTMLOptionElement, MutationObserver>();\n\n #setupObservers() {\n this.#disconnectObservers();\n this.#setupOverflowListener();\n this.#syncSelectValueStates();\n this.#syncOptionSelectedStates();\n }\n\n #disconnectObservers() {\n this.#observers.forEach(observer => observer.disconnect());\n this.#observers = [];\n this.#optionObservers.clear();\n }\n\n #syncOptionSelectedStates() {\n const options = new Set(this.#options);\n\n this.#optionObservers.forEach((observer, option) => {\n if (!options.has(option)) {\n observer.disconnect();\n this.#optionObservers.delete(option);\n this.#observers = this.#observers.filter(o => o !== observer);\n }\n });\n\n this.#options.forEach(o => {\n if (!this.#optionObservers.has(o)) {\n const observer = getElementUpdate(o, 'selected', () => this.requestUpdate());\n this.#optionObservers.set(o, observer);\n this.#observers.push(observer);\n }\n });\n }\n\n connectedCallback() {\n super.connectedCallback();\n appendRootNodeStyle(this, globalStyles);\n void this.updateComplete.then(() => {\n if (this.isConnected) {\n this.#setupObservers();\n }\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#disconnectObservers();\n }\n\n async updated(props: PropertyValues<this>) {\n super.updated(props);\n if (this.#select?.size && this.#select?.size !== 0) {\n this._internals.states.add('size');\n this.style.setProperty('--size', `${this.#select.size}`);\n } else {\n this._internals.states.delete('size');\n this.style.removeProperty('--size');\n }\n\n if (this.#select?.multiple && this.#select?.size === 0) {\n this._internals.states.add('multiple');\n } else {\n this._internals.states.delete('multiple');\n }\n }\n\n #setupCustomSelectUI() {\n if (this.#select?.size === 0) {\n onListboxActivate(this.#select, () => {\n this.requestUpdate(); // update menu items\n this.#dropdown!.style.setProperty('--min-width', `${this.#input!.getBoundingClientRect().width}px`);\n this.#dropdown!.showPopover();\n focusElementTimeout(this.#menuItems[0] as HTMLElement);\n });\n }\n }\n\n #openDropdown() {\n this.#dropdown!.hidden = false;\n this.#caret!.direction = 'up';\n }\n\n #closeDropdown() {\n this.#dropdown!.hidden = true;\n this.#caret!.direction = 'down';\n }\n\n #setupOverflowListener() {\n const observer = new ResizeObserver(entries => this.#updateMultipleOverflow(entries[0]!.contentRect.width));\n this.#observers.push(observer);\n observer.observe(this.#input!);\n }\n\n async #selectValue(option: HTMLOptionElement, selected: boolean) {\n if (this.#select.multiple || (!this.#select.multiple && option.value !== this.#select.value)) {\n option.selected = selected;\n }\n\n // native select only the first selected option determines the select input value\n if (this.#select.selectedOptions.length < 1) {\n this.#select.value = selected ? option.value : '';\n }\n\n this.#select.dispatchEvent(new Event('input', { bubbles: true }));\n this.#select.dispatchEvent(new Event('change', { bubbles: true }));\n this.requestUpdate();\n\n if (!this.#select.multiple && this.#dropdown) {\n this.#dropdown.hidePopover();\n } else {\n await this.updateComplete;\n this.#updateMultipleOverflow(this.#input!.getBoundingClientRect().width);\n }\n }\n\n #updateMultipleOverflow(width: number) {\n const tags = this.#tags;\n if (this.#select?.multiple && tags && tags.getBoundingClientRect().width > width - 48) {\n this._internals.states.add('multiple-overflow');\n } else {\n this._internals.states.delete('multiple-overflow');\n }\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"select2.js","names":[],"sources":["../../src/select/select.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, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n focusElementTimeout,\n onListboxActivate,\n useStyles,\n onChildListMutation,\n getElementUpdate,\n scopedRegistry,\n appendRootNodeStyle\n} from '@nvidia-elements/core/internal';\nimport { i18n, I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { Menu, MenuItem } from '@nvidia-elements/core/menu';\nimport { Dropdown } from '@nvidia-elements/core/dropdown';\nimport { Tag } from '@nvidia-elements/core/tag';\nimport styles from './select.css?inline';\nimport globalStyles from './select.global.css?inline';\n\nconst i18nDefaults = {\n select: 'select',\n selected: 'selected'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-select\n * @description A select is a control that enables users to select an option from a list of options.\n * @documentation https://nvidia.github.io/elements/docs/elements/select/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/select\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 --border-bottom\n * @cssprop --cursor\n * @cssprop --font-weight\n * @cssprop --text-align\n * @cssprop --scroll-height\n * @cssprop --width\n * @cssprop --control-width\n * @cssprop --max-width\n * @cssprop --min-width\n * @cssprop --box-shadow\n * @cssprop --max-height\n * @cssprop --text-transform\n * @csspart tag\n * @csspart menu - The dropdown menu element\n * @csspart menu-item - The menu item elements\n * @csspart icon - The icon element\n * @csspart caret - The caret/chevron icon element\n * @csspart dropdown - The dropdown popup element\n * @slot - Select input element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\n */\n@i18n<Select>()\n@scopedRegistry()\nexport class Select extends Control {\n static styles = useStyles([...Control.styles, styles]);\n\n static readonly metadata = {\n tag: 'nve-select',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\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 /** Flat container option applies when embedding the component within another containing element */\n @property({ type: String, reflect: true }) container?: 'flat' | 'inline';\n\n #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n /** Updates internal string values for internationalization. */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n get #select() {\n return this.input as unknown as HTMLSelectElement;\n }\n\n get #options() {\n return Array.from(this.#select?.options ? this.#select.options : []);\n }\n\n get #dropdown() {\n return this.shadowRoot!.querySelector<Dropdown>(Dropdown.metadata.tag);\n }\n\n get #menuItems() {\n return this.shadowRoot!.querySelectorAll<MenuItem>(MenuItem.metadata.tag);\n }\n\n get #input() {\n return this.shadowRoot!.querySelector<HTMLElement>('[input]');\n }\n\n get #tags() {\n return this.shadowRoot!.querySelector('.tags');\n }\n\n get #caret() {\n return this.shadowRoot!.querySelector<Icon>('[name=\"caret\"]');\n }\n\n get #placeholderOption() {\n return this.#options.find(o => o.selected && o.hidden && o.disabled);\n }\n\n #observers: (MutationObserver | ResizeObserver)[] = [];\n\n get #multipleSelectLabel() {\n const option = this.#placeholderOption;\n const label = option ? option.innerText : `${this.#select.selectedOptions.length} ${this.i18n.selected}`;\n return html`<div class=\"tags-label ${option ? 'placeholder' : ''}\" aria-hidden=\"true\">${label}</div>`;\n }\n\n protected get prefixContent() {\n return this.#select?.multiple && this.#select?.size === 0\n ? html`\n ${this.#multipleSelectLabel}\n <div class=\"tags\">\n ${this.#options\n .filter(o => o.selected && o !== this.#placeholderOption)\n .map(\n o => html`\n <nve-tag part=\"tag\" readonly color=\"gray-slate\" closable .value=${o.value} @click=${() => this.#selectValue(o, false)}>${o.textContent}</nve-tag>`\n )}\n </div>`\n : nothing;\n }\n\n get #menu() {\n return html`\n <nve-menu part=\"menu\" role=\"listbox\" style=\"--width: 100%; --min-width: fit-content\" aria-label=${ifDefined(this.i18n.select)}>\n ${this.#options\n .filter(o => o !== this.#placeholderOption)\n .map(\n (o, i) => html`\n <nve-menu-item part=\"menu-item\" role=\"option\" @click=${() => this.#selectValue(o, !o.selected)} ?selected=${o.selected} ?disabled=${o.disabled} ?hidden=${!!o.hidden} aria-selected=${o.selected}>\n <slot name=\"option-${i + 1}\">\n <nve-icon part=\"icon\" name=\"check\" size=\"sm\" aria-hidden=\"true\"></nve-icon> ${o.innerText}\n </slot>\n </nve-menu-item>`\n )}\n </nve-menu>`;\n }\n\n protected get suffixContent() {\n return this.#select?.size === 0\n ? html`\n <nve-icon name=\"caret\" part=\"caret\" direction=\"down\" size=\"sm\" aria-hidden=\"true\"></nve-icon>\n <nve-dropdown part=\"dropdown\" @close=${this.#closeDropdown} @open=${this.#openDropdown} hidden .anchor=${this.#input as HTMLElement} position=\"bottom\">\n ${this.#menu}\n </nve-dropdown>`\n : this.#menu;\n }\n\n async firstUpdated(props: PropertyValues<this>) {\n super.firstUpdated(props);\n await this.updateComplete;\n this.#setupCustomSelectUI();\n }\n\n #syncSelectValueStates() {\n this.#observers.push(\n getElementUpdate(this.#select, 'value', () => this.requestUpdate()),\n onChildListMutation(this.#select, () => this.requestUpdate(), { attributes: true, subtree: true }),\n onChildListMutation(this.#select, () => this.#syncOptionSelectedStates(), { subtree: true })\n );\n }\n\n #optionObservers = new Map<HTMLOptionElement, MutationObserver>();\n\n #setupObservers() {\n this.#disconnectObservers();\n this.#setupOverflowListener();\n this.#syncSelectValueStates();\n this.#syncOptionSelectedStates();\n }\n\n #disconnectObservers() {\n this.#observers.forEach(observer => observer.disconnect());\n this.#observers = [];\n this.#optionObservers.clear();\n }\n\n #syncOptionSelectedStates() {\n const options = new Set(this.#options);\n\n this.#optionObservers.forEach((observer, option) => {\n if (!options.has(option)) {\n observer.disconnect();\n this.#optionObservers.delete(option);\n this.#observers = this.#observers.filter(o => o !== observer);\n }\n });\n\n this.#options.forEach(o => {\n if (!this.#optionObservers.has(o)) {\n const observer = getElementUpdate(o, 'selected', () => this.requestUpdate());\n this.#optionObservers.set(o, observer);\n this.#observers.push(observer);\n }\n });\n }\n\n connectedCallback() {\n super.connectedCallback();\n appendRootNodeStyle(this, globalStyles);\n void this.updateComplete.then(() => {\n if (this.isConnected) {\n this.#setupObservers();\n }\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#disconnectObservers();\n }\n\n async updated(props: PropertyValues<this>) {\n super.updated(props);\n if (this.#select?.size && this.#select?.size !== 0) {\n this._internals.states.add('size');\n this.style.setProperty('--size', `${this.#select.size}`);\n } else {\n this._internals.states.delete('size');\n this.style.removeProperty('--size');\n }\n\n if (this.#select?.multiple && this.#select?.size === 0) {\n this._internals.states.add('multiple');\n } else {\n this._internals.states.delete('multiple');\n }\n }\n\n #setupCustomSelectUI() {\n if (this.#select?.size === 0) {\n onListboxActivate(this.#select, () => {\n this.requestUpdate(); // update menu items\n this.#dropdown!.style.setProperty('--min-width', `${this.#input!.getBoundingClientRect().width}px`);\n this.#dropdown!.showPopover();\n focusElementTimeout(this.#menuItems[0] as HTMLElement);\n });\n }\n }\n\n #openDropdown() {\n this.#dropdown!.hidden = false;\n this.#caret!.direction = 'up';\n }\n\n #closeDropdown() {\n this.#dropdown!.hidden = true;\n this.#caret!.direction = 'down';\n }\n\n #setupOverflowListener() {\n const observer = new ResizeObserver(entries => this.#updateMultipleOverflow(entries[0]!.contentRect.width));\n this.#observers.push(observer);\n observer.observe(this.#input!);\n }\n\n async #selectValue(option: HTMLOptionElement, selected: boolean) {\n if (this.#select.multiple || (!this.#select.multiple && option.value !== this.#select.value)) {\n option.selected = selected;\n }\n\n // native select only the first selected option determines the select input value\n if (this.#select.selectedOptions.length < 1) {\n this.#select.value = selected ? option.value : '';\n }\n\n this.#select.dispatchEvent(new Event('input', { bubbles: true }));\n this.#select.dispatchEvent(new Event('change', { bubbles: true }));\n this.requestUpdate();\n\n if (!this.#select.multiple && this.#dropdown) {\n this.#dropdown.hidePopover();\n } else {\n await this.updateComplete;\n this.#updateMultipleOverflow(this.#input!.getBoundingClientRect().width);\n }\n }\n\n #updateMultipleOverflow(width: number) {\n const tags = this.#tags;\n if (this.#select?.multiple && tags && tags.getBoundingClientRect().width > width - 48) {\n this._internals.states.add('multiple-overflow');\n } else {\n this._internals.states.delete('multiple-overflow');\n }\n }\n}\n"],"mappings":"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"}
|