@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,5 +1,6 @@
|
|
|
1
1
|
import type { TemplateResult } from 'lit';
|
|
2
2
|
import { LitElement, nothing } from 'lit';
|
|
3
|
+
import { type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';
|
|
3
4
|
/**
|
|
4
5
|
* @element nve-control
|
|
5
6
|
* @description Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.
|
|
@@ -31,6 +32,8 @@ export declare class Control extends LitElement {
|
|
|
31
32
|
fitText: boolean;
|
|
32
33
|
/** Sets the input to match native default content block */
|
|
33
34
|
fitContent: boolean;
|
|
35
|
+
/** Component-specific defaults supplied by a derived control. */
|
|
36
|
+
protected get i18nDefaults(): I18nDefaults;
|
|
34
37
|
/** Enables internal string values to update for internationalization. */
|
|
35
38
|
i18n: Partial<import("@nvidia-elements/core/internal").I18nStrings & {
|
|
36
39
|
__set: boolean;
|
|
@@ -1,25 +1,28 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import
|
|
7
|
-
import u from "
|
|
8
|
-
import {
|
|
9
|
-
import
|
|
10
|
-
import g from "./control.
|
|
11
|
-
import _ from "
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
1
|
+
import { appendRootNodeStyle as e, getAttributeListChanges as t } from "../../internal/utils/dom.js";
|
|
2
|
+
import { associateAriaDescribedBy as n, associateDataList as r, associateLabel as i, attachInternals as a } from "../../internal/utils/a11y.js";
|
|
3
|
+
import { typeSSR as o } from "../../internal/controllers/type-ssr.controller.js";
|
|
4
|
+
import { hostAttr as s } from "../../internal/decorators/host-attr.js";
|
|
5
|
+
import { useStyles as c } from "../../internal/styles/index.js";
|
|
6
|
+
import l from "../../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
|
|
7
|
+
import { inputQuery as u, setupControlStates as d, setupControlStatusStates as f, setupControlValidationStates as p } from "../utils/states.js";
|
|
8
|
+
import { setupControlLayoutStates as m } from "../utils/layout.js";
|
|
9
|
+
import h from "./control.global.js";
|
|
10
|
+
import g from "./control.js";
|
|
11
|
+
import { LitElement as _, html as v, isServer as y, nothing as b } from "lit";
|
|
12
|
+
import { property as x } from "lit/decorators/property.js";
|
|
13
|
+
import { I18nController as S } from "@nvidia-elements/foundations/internal/i18n";
|
|
14
14
|
//#region src/forms/control/control.ts
|
|
15
|
-
var C = class extends
|
|
16
|
-
constructor(...
|
|
17
|
-
super(...
|
|
15
|
+
var C = class extends _ {
|
|
16
|
+
constructor(...e) {
|
|
17
|
+
super(...e), this.fitText = !1, this.fitContent = !1, this.#e = new S(this, this.i18nDefaults), this.i18n = this.#e.i18n, this.nveControl = "", this.#i = [], this._associateDatalist = !0, this.#a = () => {
|
|
18
18
|
this.#f(), this.input && this.#i.length === 0 && this.#l();
|
|
19
19
|
}, this.#u = () => {
|
|
20
20
|
this.#f(), this.#p();
|
|
21
21
|
};
|
|
22
22
|
}
|
|
23
|
+
get i18nDefaults() {
|
|
24
|
+
return {};
|
|
25
|
+
}
|
|
23
26
|
#e;
|
|
24
27
|
get #t() {
|
|
25
28
|
return this.shadowRoot?.querySelector("slot[name=\"label\"]")?.assignedElements({ flatten: !0 })?.[0];
|
|
@@ -29,33 +32,33 @@ var C = class extends v {
|
|
|
29
32
|
}
|
|
30
33
|
#r;
|
|
31
34
|
get input() {
|
|
32
|
-
if (!
|
|
35
|
+
if (!y && !this.#r) {
|
|
33
36
|
let e = this.querySelector("slot")?.assignedElements()?.find((e) => e.matches("input, select, selectmenu, textarea, [nve-control]")) ?? Array.from(this.shadowRoot.querySelector("slot")?.assignedElements({ flatten: !0 }) ?? []).find((e) => e.matches("input, select, selectmenu, textarea, [nve-control]"));
|
|
34
|
-
this.#r = e || this.querySelector(
|
|
37
|
+
this.#r = e || this.querySelector(u);
|
|
35
38
|
}
|
|
36
39
|
return this.#r;
|
|
37
40
|
}
|
|
38
41
|
get prefixContent() {
|
|
39
|
-
return
|
|
42
|
+
return b;
|
|
40
43
|
}
|
|
41
44
|
get suffixContent() {
|
|
42
|
-
return
|
|
45
|
+
return b;
|
|
43
46
|
}
|
|
44
47
|
#i;
|
|
45
48
|
static {
|
|
46
|
-
this.styles =
|
|
49
|
+
this.styles = c([g]);
|
|
47
50
|
}
|
|
48
51
|
static {
|
|
49
52
|
this.metadata = {
|
|
50
53
|
tag: "nve-control",
|
|
51
|
-
version: "2.19.
|
|
54
|
+
version: "2.19.1"
|
|
52
55
|
};
|
|
53
56
|
}
|
|
54
57
|
render() {
|
|
55
|
-
return this.nveControl === "inline" ?
|
|
58
|
+
return this.nveControl === "inline" ? v`<div internal-host part="_internal-host"><div input part="_input"><slot interaction-state></slot></div><slot name="label" part="_label"></slot><slot name="messages" part="_messages"></slot></div>` : v`<div internal-host part="_internal-host"><slot name="label" part="_label"></slot><div input part="_input">${this.prefixContent}<slot></slot>${this.suffixContent}</div><slot name="messages" part="_messages"></slot></div>`;
|
|
56
59
|
}
|
|
57
60
|
connectedCallback() {
|
|
58
|
-
super.connectedCallback(),
|
|
61
|
+
super.connectedCallback(), a(this), e(this, h), this.shadowRoot.addEventListener("slotchange", this.#a);
|
|
59
62
|
}
|
|
60
63
|
disconnectedCallback() {
|
|
61
64
|
super.disconnectedCallback(), this.shadowRoot.removeEventListener("slotchange", this.#a), this.shadowRoot.removeEventListener("slotchange", this.#u), this.#i.forEach((e) => e.disconnect()), this.#i.length = 0;
|
|
@@ -86,7 +89,7 @@ var C = class extends v {
|
|
|
86
89
|
return e instanceof HTMLInputElement && (e.type === "checkbox" || e.type === "radio");
|
|
87
90
|
}
|
|
88
91
|
#l() {
|
|
89
|
-
this.#i.push(...
|
|
92
|
+
this.#i.push(...p(this, this.#n), ...d(this), ...f(this, this.#n), m(this), t(this, ["hidden", "status"], () => this.#f())), this.#d(), this.#p(), this.shadowRoot.addEventListener("slotchange", this.#u);
|
|
90
93
|
}
|
|
91
94
|
#u;
|
|
92
95
|
#d() {
|
|
@@ -96,7 +99,7 @@ var C = class extends v {
|
|
|
96
99
|
this.input && (this.toggleAttribute("multiple", this.input?.multiple), this.input?.hasAttribute("size") ? this.setAttribute("size", "") : this.removeAttribute("size"));
|
|
97
100
|
}
|
|
98
101
|
#p() {
|
|
99
|
-
this.#m(),
|
|
102
|
+
this.#m(), i(this.#t, this.input), n(Array.from(this.#n), this.input), this._associateDatalist && r(this.querySelector("datalist"), this.input);
|
|
100
103
|
}
|
|
101
104
|
#m() {
|
|
102
105
|
let e = this.querySelector("label") || this.shadowRoot.querySelector("slot").assignedNodes({ flatten: !0 }).find((e) => e.tagName === "LABEL");
|
|
@@ -108,21 +111,21 @@ var C = class extends v {
|
|
|
108
111
|
} catch {}
|
|
109
112
|
}
|
|
110
113
|
};
|
|
111
|
-
|
|
114
|
+
l([x({ type: String })], C.prototype, "status", void 0), l([x({
|
|
112
115
|
type: String,
|
|
113
116
|
reflect: !0
|
|
114
|
-
})], C.prototype, "layout", void 0),
|
|
117
|
+
})], C.prototype, "layout", void 0), l([x({
|
|
115
118
|
type: Boolean,
|
|
116
119
|
reflect: !0,
|
|
117
120
|
attribute: "fit-text"
|
|
118
|
-
})], C.prototype, "fitText", void 0),
|
|
121
|
+
})], C.prototype, "fitText", void 0), l([x({
|
|
119
122
|
type: Boolean,
|
|
120
123
|
reflect: !0,
|
|
121
124
|
attribute: "fit-content"
|
|
122
|
-
})], C.prototype, "fitContent", void 0),
|
|
125
|
+
})], C.prototype, "fitContent", void 0), l([x({ type: Object })], C.prototype, "i18n", void 0), l([x({
|
|
123
126
|
type: String,
|
|
124
127
|
reflect: !0
|
|
125
|
-
})], C.prototype, "prominence", void 0),
|
|
128
|
+
})], C.prototype, "prominence", void 0), l([s({ attribute: "nve-control" })], C.prototype, "nveControl", void 0), C = l([o()], C);
|
|
126
129
|
//#endregion
|
|
127
130
|
export { C as Control };
|
|
128
131
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"control2.js","names":[],"sources":["../../../src/forms/control/control.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { TemplateResult } from 'lit';\nimport { LitElement, html, nothing, isServer } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport {\n attachInternals,\n useStyles,\n associateLabel,\n associateAriaDescribedBy,\n associateDataList,\n appendRootNodeStyle,\n getAttributeListChanges,\n I18nController,\n hostAttr,\n typeSSR\n} from '@nvidia-elements/core/internal';\nimport type { ControlMessage } from '../control-message/control-message.js';\nimport {\n setupControlValidationStates,\n setupControlStates,\n setupControlStatusStates,\n inputQuery,\n type ControlStateCleanup\n} from '../utils/states.js';\nimport { setupControlLayoutStates } from '../utils/layout.js';\nimport globalStyles from './control.global.css?inline';\nimport styles from './control.css?inline';\n\ninterface ResettableControl {\n getAttribute: Element['getAttribute'];\n value: string;\n}\n\ntype ControlInput = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | ResettableControl;\n\n/**\n * @element nve-control\n * @description Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.\n * @documentation https://nvidia.github.io/elements/docs/elements/control/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - Control input element\n * @slot label - Label element\n * @cssprop --cursor\n * @cssprop --accent-color\n * @cssprop --color\n * @cssprop --label-color\n * @cssprop --label-width\n * @cssprop --label-font-weight\n * @cssprop --label-font-size\n * @cssprop --control-width\n * @cssprop --control-height\n\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\n@typeSSR()\nexport class Control extends LitElement {\n /** Set current visual state for control. This overrides any validation states active. */\n @property({ type: String }) status: 'warning' | 'error' | 'success' | 'disabled';\n\n /** Set current control + label + control message layout. Layouts will collapse based on available container space. */\n @property({ type: String, reflect: true }) layout:\n | 'vertical'\n | 'vertical-inline'\n | 'horizontal'\n | 'horizontal-inline';\n\n /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */\n @property({ type: Boolean, reflect: true, attribute: 'fit-text' }) fitText = false;\n\n /** Sets the input to match native default content block */\n @property({ type: Boolean, reflect: true, attribute: 'fit-content' }) fitContent = false;\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /** Enables internal string values to update for internationalization. */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n /** Set the visual prominence of the control */\n @property({ type: String, reflect: true }) prominence: 'muted';\n\n get #label() {\n return this.shadowRoot\n ?.querySelector<HTMLSlotElement>('slot[name=\"label\"]')\n ?.assignedElements({ flatten: true })?.[0] as HTMLLabelElement;\n }\n\n get #messages() {\n return (this.shadowRoot\n ?.querySelector<HTMLSlotElement>('slot[name=\"messages\"]')\n ?.assignedElements({ flatten: true }) ?? []) as ControlMessage[];\n }\n\n #input: HTMLInputElement;\n\n /** @private */\n get input(): HTMLInputElement {\n if (!isServer && !this.#input) {\n const slotted =\n this.querySelector('slot')\n ?.assignedElements()\n ?.find(i => i.matches(inputQuery)) ??\n Array.from(this.shadowRoot!.querySelector('slot')?.assignedElements({ flatten: true }) ?? []).find(i =>\n i.matches(inputQuery)\n );\n this.#input = (slotted ? slotted : this.querySelector(inputQuery)) as HTMLInputElement;\n }\n\n return this.#input;\n }\n\n /** @private */\n protected get prefixContent(): typeof nothing | TemplateResult {\n return nothing;\n }\n\n /** @private */\n protected get suffixContent(): typeof nothing | TemplateResult {\n return nothing;\n }\n\n @hostAttr({ attribute: 'nve-control' }) protected nveControl = '';\n\n /** @private */\n declare _internals: ElementInternals;\n\n #observers: (MutationObserver | ResizeObserver | ControlStateCleanup)[] = [];\n\n protected _associateDatalist = true;\n\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-control',\n version: '0.0.0'\n };\n\n render() {\n return this.nveControl !== 'inline'\n ? html`\n <div internal-host part=\"_internal-host\">\n <slot name=\"label\" part=\"_label\"></slot>\n <div input part=\"_input\">\n ${this.prefixContent}\n <slot></slot>\n ${this.suffixContent}\n </div>\n <slot name=\"messages\" part=\"_messages\"></slot>\n </div>\n `\n : html`\n <div internal-host part=\"_internal-host\">\n <div input part=\"_input\"><slot interaction-state></slot></div>\n <slot name=\"label\" part=\"_label\"></slot>\n <slot name=\"messages\" part=\"_messages\"></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n appendRootNodeStyle(this, globalStyles);\n this.shadowRoot!.addEventListener('slotchange', this.#onRootSlotchange);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.shadowRoot!.removeEventListener('slotchange', this.#onRootSlotchange);\n this.shadowRoot!.removeEventListener('slotchange', this.#onInputSlotchange);\n this.#observers.forEach(observer => observer.disconnect());\n this.#observers.length = 0;\n }\n\n #onRootSlotchange = () => {\n this.#updateStyleStates();\n\n if (this.input && this.#observers.length === 0) {\n this.#setupInput();\n }\n };\n\n /** Resets control value to initial attribute value and clears any active validation rules. */\n reset() {\n this.#resetInputValue(this.input);\n this.requestUpdate();\n this.dispatchEvent(new CustomEvent('reset', { bubbles: true, composed: true }));\n }\n\n #resetInputValue(input: ControlInput) {\n if (input instanceof HTMLSelectElement) {\n this.#resetSelectValue(input);\n return;\n }\n\n if (this.#isCheckedInput(input)) {\n input.checked = input.defaultChecked;\n input.indeterminate = false;\n return;\n }\n\n input.value =\n input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement\n ? input.defaultValue\n : (input.getAttribute('value') ?? '');\n }\n\n #resetSelectValue(input: HTMLSelectElement) {\n const hasDefaultSelection = Array.from(input.options).some(option => option.defaultSelected);\n Array.from(input.options).forEach(option => (option.selected = option.defaultSelected));\n if (!input.multiple && !hasDefaultSelection) input.selectedIndex = 0;\n }\n\n #isCheckedInput(input: ControlInput): input is HTMLInputElement {\n return input instanceof HTMLInputElement && (input.type === 'checkbox' || input.type === 'radio');\n }\n\n #setupInput() {\n this.#observers.push(\n ...setupControlValidationStates(this, this.#messages),\n ...setupControlStates(this),\n ...setupControlStatusStates(this, this.#messages),\n setupControlLayoutStates(this),\n getAttributeListChanges(this, ['hidden', 'status'], () => this.#updateStyleStates())\n );\n\n this.#polyfillShowPicker();\n this.#updateAssociations();\n this.shadowRoot!.addEventListener('slotchange', this.#onInputSlotchange);\n }\n\n #onInputSlotchange = () => {\n this.#updateStyleStates();\n this.#updateAssociations();\n };\n\n #polyfillShowPicker() {\n if (!this.input.showPicker) {\n this.input.showPicker = () => this.input.focus();\n }\n }\n\n #updateStyleStates() {\n if (this.input) {\n this.toggleAttribute('multiple', this.input?.multiple);\n this.input?.hasAttribute('size') ? this.setAttribute('size', '') : this.removeAttribute('size');\n }\n }\n\n #updateAssociations() {\n this.#assignLabel();\n associateLabel(this.#label, this.input);\n associateAriaDescribedBy(Array.from(this.#messages), this.input);\n\n if (this._associateDatalist) {\n associateDataList(this.querySelector<HTMLDataListElement>('datalist')!, this.input);\n }\n }\n\n #assignLabel() {\n const label =\n this.querySelector('label') ||\n (this.shadowRoot!.querySelector('slot')!\n .assignedNodes({ flatten: true })\n .find((i: Node) => (i as HTMLElement).tagName === 'LABEL') as HTMLLabelElement);\n if (label) {\n label.slot = 'label';\n }\n }\n\n protected showPicker() {\n try {\n this.input.showPicker();\n } catch {\n //\n }\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"control2.js","names":[],"sources":["../../../src/forms/control/control.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { TemplateResult } from 'lit';\nimport { LitElement, html, nothing, isServer } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport {\n attachInternals,\n useStyles,\n associateLabel,\n associateAriaDescribedBy,\n associateDataList,\n appendRootNodeStyle,\n getAttributeListChanges,\n hostAttr,\n typeSSR\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport type { ControlMessage } from '../control-message/control-message.js';\nimport {\n setupControlValidationStates,\n setupControlStates,\n setupControlStatusStates,\n inputQuery,\n type ControlStateCleanup\n} from '../utils/states.js';\nimport { setupControlLayoutStates } from '../utils/layout.js';\nimport globalStyles from './control.global.css?inline';\nimport styles from './control.css?inline';\n\ninterface ResettableControl {\n getAttribute: Element['getAttribute'];\n value: string;\n}\n\ntype ControlInput = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | ResettableControl;\n\n/**\n * @element nve-control\n * @description Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.\n * @documentation https://nvidia.github.io/elements/docs/elements/control/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - Control input element\n * @slot label - Label element\n * @cssprop --cursor\n * @cssprop --accent-color\n * @cssprop --color\n * @cssprop --label-color\n * @cssprop --label-width\n * @cssprop --label-font-weight\n * @cssprop --label-font-size\n * @cssprop --control-width\n * @cssprop --control-height\n\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\n@typeSSR()\nexport class Control extends LitElement {\n /** Set current visual state for control. This overrides any validation states active. */\n @property({ type: String }) status: 'warning' | 'error' | 'success' | 'disabled';\n\n /** Set current control + label + control message layout. Layouts will collapse based on available container space. */\n @property({ type: String, reflect: true }) layout:\n | 'vertical'\n | 'vertical-inline'\n | 'horizontal'\n | 'horizontal-inline';\n\n /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */\n @property({ type: Boolean, reflect: true, attribute: 'fit-text' }) fitText = false;\n\n /** Sets the input to match native default content block */\n @property({ type: Boolean, reflect: true, attribute: 'fit-content' }) fitContent = false;\n\n /** Component-specific defaults supplied by a derived control. */\n protected get i18nDefaults(): I18nDefaults {\n return {};\n }\n\n #i18nController: I18nController<this> = new I18nController<this>(this, this.i18nDefaults);\n\n /** Enables internal string values to update for internationalization. */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n /** Set the visual prominence of the control */\n @property({ type: String, reflect: true }) prominence: 'muted';\n\n get #label() {\n return this.shadowRoot\n ?.querySelector<HTMLSlotElement>('slot[name=\"label\"]')\n ?.assignedElements({ flatten: true })?.[0] as HTMLLabelElement;\n }\n\n get #messages() {\n return (this.shadowRoot\n ?.querySelector<HTMLSlotElement>('slot[name=\"messages\"]')\n ?.assignedElements({ flatten: true }) ?? []) as ControlMessage[];\n }\n\n #input: HTMLInputElement;\n\n /** @private */\n get input(): HTMLInputElement {\n if (!isServer && !this.#input) {\n const slotted =\n this.querySelector('slot')\n ?.assignedElements()\n ?.find(i => i.matches(inputQuery)) ??\n Array.from(this.shadowRoot!.querySelector('slot')?.assignedElements({ flatten: true }) ?? []).find(i =>\n i.matches(inputQuery)\n );\n this.#input = (slotted ? slotted : this.querySelector(inputQuery)) as HTMLInputElement;\n }\n\n return this.#input;\n }\n\n /** @private */\n protected get prefixContent(): typeof nothing | TemplateResult {\n return nothing;\n }\n\n /** @private */\n protected get suffixContent(): typeof nothing | TemplateResult {\n return nothing;\n }\n\n @hostAttr({ attribute: 'nve-control' }) protected nveControl = '';\n\n /** @private */\n declare _internals: ElementInternals;\n\n #observers: (MutationObserver | ResizeObserver | ControlStateCleanup)[] = [];\n\n protected _associateDatalist = true;\n\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-control',\n version: '0.0.0'\n };\n\n render() {\n return this.nveControl !== 'inline'\n ? html`\n <div internal-host part=\"_internal-host\">\n <slot name=\"label\" part=\"_label\"></slot>\n <div input part=\"_input\">\n ${this.prefixContent}\n <slot></slot>\n ${this.suffixContent}\n </div>\n <slot name=\"messages\" part=\"_messages\"></slot>\n </div>\n `\n : html`\n <div internal-host part=\"_internal-host\">\n <div input part=\"_input\"><slot interaction-state></slot></div>\n <slot name=\"label\" part=\"_label\"></slot>\n <slot name=\"messages\" part=\"_messages\"></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n appendRootNodeStyle(this, globalStyles);\n this.shadowRoot!.addEventListener('slotchange', this.#onRootSlotchange);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.shadowRoot!.removeEventListener('slotchange', this.#onRootSlotchange);\n this.shadowRoot!.removeEventListener('slotchange', this.#onInputSlotchange);\n this.#observers.forEach(observer => observer.disconnect());\n this.#observers.length = 0;\n }\n\n #onRootSlotchange = () => {\n this.#updateStyleStates();\n\n if (this.input && this.#observers.length === 0) {\n this.#setupInput();\n }\n };\n\n /** Resets control value to initial attribute value and clears any active validation rules. */\n reset() {\n this.#resetInputValue(this.input);\n this.requestUpdate();\n this.dispatchEvent(new CustomEvent('reset', { bubbles: true, composed: true }));\n }\n\n #resetInputValue(input: ControlInput) {\n if (input instanceof HTMLSelectElement) {\n this.#resetSelectValue(input);\n return;\n }\n\n if (this.#isCheckedInput(input)) {\n input.checked = input.defaultChecked;\n input.indeterminate = false;\n return;\n }\n\n input.value =\n input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement\n ? input.defaultValue\n : (input.getAttribute('value') ?? '');\n }\n\n #resetSelectValue(input: HTMLSelectElement) {\n const hasDefaultSelection = Array.from(input.options).some(option => option.defaultSelected);\n Array.from(input.options).forEach(option => (option.selected = option.defaultSelected));\n if (!input.multiple && !hasDefaultSelection) input.selectedIndex = 0;\n }\n\n #isCheckedInput(input: ControlInput): input is HTMLInputElement {\n return input instanceof HTMLInputElement && (input.type === 'checkbox' || input.type === 'radio');\n }\n\n #setupInput() {\n this.#observers.push(\n ...setupControlValidationStates(this, this.#messages),\n ...setupControlStates(this),\n ...setupControlStatusStates(this, this.#messages),\n setupControlLayoutStates(this),\n getAttributeListChanges(this, ['hidden', 'status'], () => this.#updateStyleStates())\n );\n\n this.#polyfillShowPicker();\n this.#updateAssociations();\n this.shadowRoot!.addEventListener('slotchange', this.#onInputSlotchange);\n }\n\n #onInputSlotchange = () => {\n this.#updateStyleStates();\n this.#updateAssociations();\n };\n\n #polyfillShowPicker() {\n if (!this.input.showPicker) {\n this.input.showPicker = () => this.input.focus();\n }\n }\n\n #updateStyleStates() {\n if (this.input) {\n this.toggleAttribute('multiple', this.input?.multiple);\n this.input?.hasAttribute('size') ? this.setAttribute('size', '') : this.removeAttribute('size');\n }\n }\n\n #updateAssociations() {\n this.#assignLabel();\n associateLabel(this.#label, this.input);\n associateAriaDescribedBy(Array.from(this.#messages), this.input);\n\n if (this._associateDatalist) {\n associateDataList(this.querySelector<HTMLDataListElement>('datalist')!, this.input);\n }\n }\n\n #assignLabel() {\n const label =\n this.querySelector('label') ||\n (this.shadowRoot!.querySelector('slot')!\n .assignedNodes({ flatten: true })\n .find((i: Node) => (i as HTMLElement).tagName === 'LABEL') as HTMLLabelElement);\n if (label) {\n label.slot = 'label';\n }\n }\n\n protected showPicker() {\n try {\n this.input.showPicker();\n } catch {\n //\n }\n }\n}\n"],"mappings":"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"}
|
package/dist/gauge/gauge2.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import r from "
|
|
5
|
-
import i from "
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
1
|
+
import { attachInternals as e } from "../internal/utils/a11y.js";
|
|
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 "./gauge.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 { styleMap as c } from "lit/directives/style-map.js";
|
|
9
9
|
//#region src/gauge/gauge.ts
|
|
10
10
|
var l = {
|
|
@@ -30,17 +30,22 @@ var l = {
|
|
|
30
30
|
[`--_${e}-angle`]: `${t}deg`,
|
|
31
31
|
[`--_${e}-origin`]: `${n.center}px ${n.center}px`,
|
|
32
32
|
[`--_${e}-start-angle`]: `${n.startAngle}deg`
|
|
33
|
-
}), d =
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
}), d = {
|
|
34
|
+
danger: "danger",
|
|
35
|
+
information: "information",
|
|
36
|
+
success: "success",
|
|
37
|
+
warning: "warning"
|
|
38
|
+
}, f = class extends i {
|
|
39
|
+
constructor(...e) {
|
|
40
|
+
super(...e), this.value = 0, this.max = 100, this.status = "neutral", this.thumb = "fill", this.#e = new s(this, d), this.i18n = this.#e.i18n, this.#t = 0, this.#r = 0;
|
|
36
41
|
}
|
|
37
42
|
static {
|
|
38
|
-
this.styles =
|
|
43
|
+
this.styles = t([r]);
|
|
39
44
|
}
|
|
40
45
|
static {
|
|
41
46
|
this.metadata = {
|
|
42
47
|
tag: "nve-gauge",
|
|
43
|
-
version: "2.19.
|
|
48
|
+
version: "2.19.1"
|
|
44
49
|
};
|
|
45
50
|
}
|
|
46
51
|
#e;
|
|
@@ -55,11 +60,11 @@ var l = {
|
|
|
55
60
|
};
|
|
56
61
|
}
|
|
57
62
|
render() {
|
|
58
|
-
let e = this.#f(), t = this.#t, n = this.#p(), r = this.#l(e, t), i = this.#u(e, t),
|
|
59
|
-
return
|
|
63
|
+
let e = this.#f(), t = this.#t, n = this.#p(), r = this.#l(e, t), i = this.#u(e, t), o = n === "fill", s = t > 0 && (n === "fill" || n === "dot");
|
|
64
|
+
return a`<div internal-host><svg viewBox="${e.viewBox}" role="presentation" aria-hidden="true"><defs><mask id="background-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="128" height="${e.surfaceHeight}"><path d="${e.path}" class="background"></path></mask><mask id="fill-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="128" height="${e.surfaceHeight}"><path d="${i}" class="gauge" ?empty="${t <= 0}"></path></mask></defs><foreignObject width="128" height="${e.surfaceHeight}" mask="url(#background-mask)"><div xmlns="http://www.w3.org/1999/xhtml" class="background-surface"></div></foreignObject><foreignObject class="fill-layer" width="128" height="${e.surfaceHeight}" mask="url(#fill-mask)" ?hidden="${!o || t <= 0}"><div xmlns="http://www.w3.org/1999/xhtml" class="fill-surface"></div></foreignObject><circle class="fill-dot-end" cx="${e.center + e.radius}" cy="${e.center}" ?hidden="${!s}" style="${c(u("dot", r, e))}"></circle><g class="needle" ?hidden="${n !== "needle"}" style="${c(u("needle", r, e))}"><line class="needle-line" x1="${e.center}" y1="${e.center}" x2="${e.center + 40}" y2="${e.center}"></line><circle class="needle-hub" cx="${e.center}" cy="${e.center}"></circle></g></svg><slot></slot></div>`;
|
|
60
65
|
}
|
|
61
66
|
connectedCallback() {
|
|
62
|
-
super.connectedCallback(),
|
|
67
|
+
super.connectedCallback(), e(this), this._internals.role = "progressbar";
|
|
63
68
|
}
|
|
64
69
|
disconnectedCallback() {
|
|
65
70
|
super.disconnectedCallback(), this.#n && (this.#s(), this.#t = this.#a(), this.requestUpdate());
|
|
@@ -124,20 +129,20 @@ var l = {
|
|
|
124
129
|
return this.thumb === "dot" || this.thumb === "needle" ? this.thumb : "fill";
|
|
125
130
|
}
|
|
126
131
|
};
|
|
127
|
-
|
|
132
|
+
n([o({ type: Number })], f.prototype, "value", void 0), n([o({ type: Number })], f.prototype, "max", void 0), n([o({
|
|
128
133
|
type: String,
|
|
129
134
|
reflect: !0
|
|
130
|
-
})],
|
|
135
|
+
})], f.prototype, "status", void 0), n([o({
|
|
131
136
|
type: String,
|
|
132
137
|
reflect: !0
|
|
133
|
-
})],
|
|
138
|
+
})], f.prototype, "shape", void 0), n([o({
|
|
134
139
|
type: String,
|
|
135
140
|
reflect: !0
|
|
136
|
-
})],
|
|
141
|
+
})], f.prototype, "thumb", void 0), n([o({
|
|
137
142
|
type: String,
|
|
138
143
|
reflect: !0
|
|
139
|
-
})],
|
|
144
|
+
})], f.prototype, "size", void 0), n([o({ type: Object })], f.prototype, "i18n", void 0);
|
|
140
145
|
//#endregion
|
|
141
|
-
export {
|
|
146
|
+
export { f as Gauge };
|
|
142
147
|
|
|
143
148
|
//# sourceMappingURL=gauge2.js.map
|
package/dist/gauge/gauge2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gauge2.js","names":[],"sources":["../../src/gauge/gauge.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, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport type { Size, SupportStatus } from '@nvidia-elements/core/internal';\nimport { attachInternals, I18nController, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './gauge.css?inline';\n\nconst GAUGE_GEOMETRY = {\n default: {\n center: 64,\n path: 'M 27.23 100.77 A 52 52 0 1 1 100.77 100.77',\n radius: 52,\n startAngle: 135,\n sweepAngle: 270,\n surfaceHeight: 128,\n viewBox: '8.53 8.53 110.93 95.7'\n },\n half: {\n center: 64,\n path: 'M 12 64 A 52 52 0 0 1 116 64',\n radius: 52,\n startAngle: 180,\n sweepAngle: 180,\n surfaceHeight: 64,\n viewBox: '8.53 8.53 110.93 58.93'\n }\n} as const;\n\ntype GaugeGeometry = (typeof GAUGE_GEOMETRY)[keyof typeof GAUGE_GEOMETRY];\n\nconst thumbStyle = (thumb: 'dot' | 'needle', progressAngle: number, geometry: GaugeGeometry) => ({\n [`--_${thumb}-angle`]: `${progressAngle}deg`,\n [`--_${thumb}-origin`]: `${geometry.center}px ${geometry.center}px`,\n [`--_${thumb}-start-angle`]: `${geometry.startAngle}deg`\n});\n\n/**\n * @element nve-gauge\n * @description Use a gauge to show system resource usage.\n * @documentation https://nvidia.github.io/elements/docs/elements/gauge/\n * @since 2.0.4\n * @entrypoint \\@nvidia-elements/core/gauge\n * @slot - Content to display in the gauge center.\n * @cssprop --track-width\n * @cssprop --accent-color\n * @cssprop --background\n * @cssprop --needle-background\n * @cssprop --track-background\n * @cssprop --thumb-background\n * @cssprop --color\n * @cssprop --width\n * @cssprop --height\n * @cssprop --font-size\n * @cssprop --gap\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role\n * @stable false\n */\nexport class Gauge extends LitElement {\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-gauge',\n version: '0.0.0'\n };\n\n /** @private */\n declare _internals: ElementInternals;\n\n /** The current `value` of the gauge. */\n @property({ type: Number }) value = 0;\n\n /** The `max` value of the gauge that the `value` is proportionally scaled to. */\n @property({ type: Number }) max? = 100;\n\n /** Four visual treatments represent the `status` of tasks. */\n @property({ type: String, reflect: true }) status?: SupportStatus | 'neutral' = 'neutral';\n\n /** Determines the gauge shape. Set `half` for a compact semi-circular arc. */\n @property({ type: String, reflect: true }) shape?: 'half';\n\n /** Controls the value indicator. Set `dot` for only the end dot or `needle` for a pointer. */\n @property({ type: String, reflect: true }) thumb: 'fill' | 'dot' | 'needle' = 'fill';\n\n /** T-shirt `size` of the gauge. */\n @property({ type: String, reflect: true }) size?: Size;\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /** Enables updating internal string values for internationalization. */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n /** Progress the gauge paints, which eases toward the value instead of jumping to it. */\n #paintedProgress = 0;\n\n #progressAnimation?: Animation;\n\n #progressFrame = 0;\n\n #normalizedValues() {\n const sourceMax = this.max;\n const max = sourceMax !== undefined && Number.isFinite(sourceMax) && sourceMax > 0 ? sourceMax : 100;\n const value = Number.isFinite(this.value) ? Math.min(Math.max(this.value, 0), max) : 0;\n return { value, max };\n }\n\n render() {\n const geometry = this.#geometry();\n const progress = this.#paintedProgress;\n const thumb = this.#normalizedThumb();\n const progressAngle = this.#angleAtProgress(geometry, progress);\n const fillPath = this.#pathAtProgress(geometry, progress);\n const showFill = thumb === 'fill';\n const showDot = progress > 0 && (thumb === 'fill' || thumb === 'dot');\n\n return html`\n <div internal-host>\n <svg viewBox=${geometry.viewBox} role=\"presentation\" aria-hidden=\"true\">\n <defs>\n <mask id=\"background-mask\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"128\" height=${geometry.surfaceHeight}>\n <path d=${geometry.path} class=\"background\"></path>\n </mask>\n <mask id=\"fill-mask\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"128\" height=${geometry.surfaceHeight}>\n <path d=${fillPath} class=\"gauge\" ?empty=${progress <= 0}></path>\n </mask>\n </defs>\n <foreignObject width=\"128\" height=${geometry.surfaceHeight} mask=\"url(#background-mask)\">\n <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"background-surface\"></div>\n </foreignObject>\n <foreignObject class=\"fill-layer\" width=\"128\" height=${geometry.surfaceHeight} mask=\"url(#fill-mask)\"\n ?hidden=${!showFill || progress <= 0}>\n <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"fill-surface\"></div>\n </foreignObject>\n <circle class=\"fill-dot-end\" cx=${geometry.center + geometry.radius} cy=${geometry.center}\n ?hidden=${!showDot}\n style=${styleMap(thumbStyle('dot', progressAngle, geometry))}>\n </circle>\n <g class=\"needle\"\n ?hidden=${thumb !== 'needle'}\n style=${styleMap(thumbStyle('needle', progressAngle, geometry))}>\n <line class=\"needle-line\" x1=${geometry.center} y1=${geometry.center} x2=${geometry.center + 40} y2=${geometry.center}></line>\n <circle class=\"needle-hub\" cx=${geometry.center} cy=${geometry.center}></circle>\n </g>\n </svg>\n <slot></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'progressbar';\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n // settle the value, otherwise reattaching paints the frame where the animation stopped\n if (this.#progressAnimation) {\n this.#stopProgressAnimation();\n this.#paintedProgress = this.#targetProgress();\n this.requestUpdate();\n }\n }\n\n willUpdate(props: PropertyValues<this>) {\n super.willUpdate(props);\n\n if (props.has('value') || props.has('max')) {\n this.#animateProgress();\n }\n }\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n const { value, max } = this.#normalizedValues();\n this._internals.ariaValueNow = `${value}`;\n this._internals.ariaValueMax = `${max}`;\n const { status } = this;\n const statusLabel =\n status !== undefined && status !== 'neutral' && status !== 'accent' ? this.i18n[status] : undefined;\n this._internals.ariaLabel = statusLabel ?? this.i18n.information ?? null;\n }\n\n #targetProgress() {\n const { value, max } = this.#normalizedValues();\n return (value / max) * 100;\n }\n\n /**\n * Eases the painted progress toward the value with the duration and easing declared in css, so\n * that `prefers-reduced-motion` and a `--_animation-duration` override both settle immediately.\n */\n #animateProgress() {\n const target = this.#targetProgress();\n const timing = this.hasUpdated ? this.#animationTiming() : undefined;\n\n this.#stopProgressAnimation();\n\n if (!timing || target === this.#paintedProgress) {\n this.#paintedProgress = target;\n return;\n }\n\n const from = this.#paintedProgress;\n // keyframeless animations only keep time, leaving every painted frame to `render`\n const animation = this.animate(null, timing);\n const paint = (progress: number) => {\n this.#paintedProgress = from + (target - from) * progress;\n this.requestUpdate();\n };\n const paintFrame = () => {\n paint(animation.effect?.getComputedTiming().progress ?? 0);\n\n if (animation.playState === 'running') {\n this.#progressFrame = requestAnimationFrame(paintFrame);\n }\n };\n\n animation.finished.then(\n () => {\n // a value that changes on the frame this settles already started the next animation\n if (this.#progressAnimation === animation) {\n this.#stopProgressAnimation();\n paint(1);\n }\n },\n () => undefined\n );\n\n this.#progressAnimation = animation;\n this.#progressFrame = requestAnimationFrame(paintFrame);\n }\n\n #stopProgressAnimation() {\n // only a browser render starts an animation, so server rendering never reaches these apis\n if (this.#progressAnimation) {\n cancelAnimationFrame(this.#progressFrame);\n this.#progressAnimation.cancel();\n this.#progressAnimation = undefined;\n }\n }\n\n #animationTiming() {\n const gaugeStyles = getComputedStyle(this);\n const duration = gaugeStyles.getPropertyValue('--_animation-duration').trim();\n const milliseconds = parseFloat(duration) * (duration.endsWith('ms') ? 1 : 1000);\n const easing = gaugeStyles.getPropertyValue('--nve-ref-animation-easing-100').trim();\n\n return milliseconds > 0 ? { duration: milliseconds, easing: easing || 'linear' } : undefined;\n }\n\n #angleAtProgress(geometry: GaugeGeometry, progress: number) {\n return geometry.startAngle + geometry.sweepAngle * (progress / 100);\n }\n\n #pathAtProgress(geometry: GaugeGeometry, progress: number) {\n const start = this.#pointAtAngle(geometry, geometry.startAngle);\n const sweepAngle = geometry.sweepAngle * (progress / 100);\n const end = this.#pointAtAngle(geometry, geometry.startAngle + sweepAngle);\n const largeArcFlag = sweepAngle > 180 ? 1 : 0;\n return `M ${start.x} ${start.y} A ${geometry.radius} ${geometry.radius} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;\n }\n\n #pointAtAngle(geometry: GaugeGeometry, angle: number) {\n const radians = (angle * Math.PI) / 180;\n return {\n x: geometry.center + geometry.radius * Math.cos(radians),\n y: geometry.center + geometry.radius * Math.sin(radians)\n };\n }\n\n #geometry() {\n return this.shape === 'half' ? GAUGE_GEOMETRY.half : GAUGE_GEOMETRY.default;\n }\n\n #normalizedThumb() {\n return this.thumb === 'dot' || this.thumb === 'needle' ? this.thumb : 'fill';\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"gauge2.js","names":[],"sources":["../../src/gauge/gauge.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, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport type { Size, SupportStatus } from '@nvidia-elements/core/internal';\nimport { attachInternals, useStyles } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './gauge.css?inline';\n\nconst GAUGE_GEOMETRY = {\n default: {\n center: 64,\n path: 'M 27.23 100.77 A 52 52 0 1 1 100.77 100.77',\n radius: 52,\n startAngle: 135,\n sweepAngle: 270,\n surfaceHeight: 128,\n viewBox: '8.53 8.53 110.93 95.7'\n },\n half: {\n center: 64,\n path: 'M 12 64 A 52 52 0 0 1 116 64',\n radius: 52,\n startAngle: 180,\n sweepAngle: 180,\n surfaceHeight: 64,\n viewBox: '8.53 8.53 110.93 58.93'\n }\n} as const;\n\ntype GaugeGeometry = (typeof GAUGE_GEOMETRY)[keyof typeof GAUGE_GEOMETRY];\n\nconst thumbStyle = (thumb: 'dot' | 'needle', progressAngle: number, geometry: GaugeGeometry) => ({\n [`--_${thumb}-angle`]: `${progressAngle}deg`,\n [`--_${thumb}-origin`]: `${geometry.center}px ${geometry.center}px`,\n [`--_${thumb}-start-angle`]: `${geometry.startAngle}deg`\n});\n\nconst i18nDefaults = {\n danger: 'danger',\n information: 'information',\n success: 'success',\n warning: 'warning'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-gauge\n * @description Use a gauge to show system resource usage.\n * @documentation https://nvidia.github.io/elements/docs/elements/gauge/\n * @since 2.0.4\n * @entrypoint \\@nvidia-elements/core/gauge\n * @slot - Content to display in the gauge center.\n * @cssprop --track-width\n * @cssprop --accent-color\n * @cssprop --background\n * @cssprop --needle-background\n * @cssprop --track-background\n * @cssprop --thumb-background\n * @cssprop --color\n * @cssprop --width\n * @cssprop --height\n * @cssprop --font-size\n * @cssprop --gap\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role\n * @stable false\n */\nexport class Gauge extends LitElement {\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-gauge',\n version: '0.0.0'\n };\n\n /** @private */\n declare _internals: ElementInternals;\n\n /** The current `value` of the gauge. */\n @property({ type: Number }) value = 0;\n\n /** The `max` value of the gauge that the `value` is proportionally scaled to. */\n @property({ type: Number }) max? = 100;\n\n /** Four visual treatments represent the `status` of tasks. */\n @property({ type: String, reflect: true }) status?: SupportStatus | 'neutral' = 'neutral';\n\n /** Determines the gauge shape. Set `half` for a compact semi-circular arc. */\n @property({ type: String, reflect: true }) shape?: 'half';\n\n /** Controls the value indicator. Set `dot` for only the end dot or `needle` for a pointer. */\n @property({ type: String, reflect: true }) thumb: 'fill' | 'dot' | 'needle' = 'fill';\n\n /** T-shirt `size` of the gauge. */\n @property({ type: String, reflect: true }) size?: Size;\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 /** Progress the gauge paints, which eases toward the value instead of jumping to it. */\n #paintedProgress = 0;\n\n #progressAnimation?: Animation;\n\n #progressFrame = 0;\n\n #normalizedValues() {\n const sourceMax = this.max;\n const max = sourceMax !== undefined && Number.isFinite(sourceMax) && sourceMax > 0 ? sourceMax : 100;\n const value = Number.isFinite(this.value) ? Math.min(Math.max(this.value, 0), max) : 0;\n return { value, max };\n }\n\n render() {\n const geometry = this.#geometry();\n const progress = this.#paintedProgress;\n const thumb = this.#normalizedThumb();\n const progressAngle = this.#angleAtProgress(geometry, progress);\n const fillPath = this.#pathAtProgress(geometry, progress);\n const showFill = thumb === 'fill';\n const showDot = progress > 0 && (thumb === 'fill' || thumb === 'dot');\n\n return html`\n <div internal-host>\n <svg viewBox=${geometry.viewBox} role=\"presentation\" aria-hidden=\"true\">\n <defs>\n <mask id=\"background-mask\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"128\" height=${geometry.surfaceHeight}>\n <path d=${geometry.path} class=\"background\"></path>\n </mask>\n <mask id=\"fill-mask\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"128\" height=${geometry.surfaceHeight}>\n <path d=${fillPath} class=\"gauge\" ?empty=${progress <= 0}></path>\n </mask>\n </defs>\n <foreignObject width=\"128\" height=${geometry.surfaceHeight} mask=\"url(#background-mask)\">\n <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"background-surface\"></div>\n </foreignObject>\n <foreignObject class=\"fill-layer\" width=\"128\" height=${geometry.surfaceHeight} mask=\"url(#fill-mask)\"\n ?hidden=${!showFill || progress <= 0}>\n <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"fill-surface\"></div>\n </foreignObject>\n <circle class=\"fill-dot-end\" cx=${geometry.center + geometry.radius} cy=${geometry.center}\n ?hidden=${!showDot}\n style=${styleMap(thumbStyle('dot', progressAngle, geometry))}>\n </circle>\n <g class=\"needle\"\n ?hidden=${thumb !== 'needle'}\n style=${styleMap(thumbStyle('needle', progressAngle, geometry))}>\n <line class=\"needle-line\" x1=${geometry.center} y1=${geometry.center} x2=${geometry.center + 40} y2=${geometry.center}></line>\n <circle class=\"needle-hub\" cx=${geometry.center} cy=${geometry.center}></circle>\n </g>\n </svg>\n <slot></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'progressbar';\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n // settle the value, otherwise reattaching paints the frame where the animation stopped\n if (this.#progressAnimation) {\n this.#stopProgressAnimation();\n this.#paintedProgress = this.#targetProgress();\n this.requestUpdate();\n }\n }\n\n willUpdate(props: PropertyValues<this>) {\n super.willUpdate(props);\n\n if (props.has('value') || props.has('max')) {\n this.#animateProgress();\n }\n }\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n const { value, max } = this.#normalizedValues();\n this._internals.ariaValueNow = `${value}`;\n this._internals.ariaValueMax = `${max}`;\n const { status } = this;\n const statusLabel =\n status !== undefined && status !== 'neutral' && status !== 'accent' ? this.i18n[status] : undefined;\n this._internals.ariaLabel = statusLabel ?? this.i18n.information ?? null;\n }\n\n #targetProgress() {\n const { value, max } = this.#normalizedValues();\n return (value / max) * 100;\n }\n\n /**\n * Eases the painted progress toward the value with the duration and easing declared in css, so\n * that `prefers-reduced-motion` and a `--_animation-duration` override both settle immediately.\n */\n #animateProgress() {\n const target = this.#targetProgress();\n const timing = this.hasUpdated ? this.#animationTiming() : undefined;\n\n this.#stopProgressAnimation();\n\n if (!timing || target === this.#paintedProgress) {\n this.#paintedProgress = target;\n return;\n }\n\n const from = this.#paintedProgress;\n // keyframeless animations only keep time, leaving every painted frame to `render`\n const animation = this.animate(null, timing);\n const paint = (progress: number) => {\n this.#paintedProgress = from + (target - from) * progress;\n this.requestUpdate();\n };\n const paintFrame = () => {\n paint(animation.effect?.getComputedTiming().progress ?? 0);\n\n if (animation.playState === 'running') {\n this.#progressFrame = requestAnimationFrame(paintFrame);\n }\n };\n\n animation.finished.then(\n () => {\n // a value that changes on the frame this settles already started the next animation\n if (this.#progressAnimation === animation) {\n this.#stopProgressAnimation();\n paint(1);\n }\n },\n () => undefined\n );\n\n this.#progressAnimation = animation;\n this.#progressFrame = requestAnimationFrame(paintFrame);\n }\n\n #stopProgressAnimation() {\n // only a browser render starts an animation, so server rendering never reaches these apis\n if (this.#progressAnimation) {\n cancelAnimationFrame(this.#progressFrame);\n this.#progressAnimation.cancel();\n this.#progressAnimation = undefined;\n }\n }\n\n #animationTiming() {\n const gaugeStyles = getComputedStyle(this);\n const duration = gaugeStyles.getPropertyValue('--_animation-duration').trim();\n const milliseconds = parseFloat(duration) * (duration.endsWith('ms') ? 1 : 1000);\n const easing = gaugeStyles.getPropertyValue('--nve-ref-animation-easing-100').trim();\n\n return milliseconds > 0 ? { duration: milliseconds, easing: easing || 'linear' } : undefined;\n }\n\n #angleAtProgress(geometry: GaugeGeometry, progress: number) {\n return geometry.startAngle + geometry.sweepAngle * (progress / 100);\n }\n\n #pathAtProgress(geometry: GaugeGeometry, progress: number) {\n const start = this.#pointAtAngle(geometry, geometry.startAngle);\n const sweepAngle = geometry.sweepAngle * (progress / 100);\n const end = this.#pointAtAngle(geometry, geometry.startAngle + sweepAngle);\n const largeArcFlag = sweepAngle > 180 ? 1 : 0;\n return `M ${start.x} ${start.y} A ${geometry.radius} ${geometry.radius} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;\n }\n\n #pointAtAngle(geometry: GaugeGeometry, angle: number) {\n const radians = (angle * Math.PI) / 180;\n return {\n x: geometry.center + geometry.radius * Math.cos(radians),\n y: geometry.center + geometry.radius * Math.sin(radians)\n };\n }\n\n #geometry() {\n return this.shape === 'half' ? GAUGE_GEOMETRY.half : GAUGE_GEOMETRY.default;\n }\n\n #normalizedThumb() {\n return this.thumb === 'dot' || this.thumb === 'needle' ? this.thumb : 'fill';\n }\n}\n"],"mappings":"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"}
|
package/dist/grid/cell/cell2.js
CHANGED
package/dist/grid/grid2.js
CHANGED
package/dist/grid/row/row2.js
CHANGED
package/dist/icon/icon2.js
CHANGED
|
@@ -16,7 +16,7 @@ var f = class n extends o {
|
|
|
16
16
|
static {
|
|
17
17
|
this.metadata = {
|
|
18
18
|
tag: "nve-icon",
|
|
19
|
-
version: "2.19.
|
|
19
|
+
version: "2.19.1"
|
|
20
20
|
};
|
|
21
21
|
}
|
|
22
22
|
static {
|
|
@@ -103,7 +103,7 @@ a([l({
|
|
|
103
103
|
})], f.prototype, "name", void 0), a([d()], f.prototype, "svg", void 0);
|
|
104
104
|
function p(e) {
|
|
105
105
|
if (typeof globalThis.customElements?.get == "function") {
|
|
106
|
-
let t = n(e.metadata.version), i = n("2.19.
|
|
106
|
+
let t = n(e.metadata.version), i = n("2.19.1");
|
|
107
107
|
t.minor <= i.minor && t.major <= i.major && (e._icons = {
|
|
108
108
|
...e._icons,
|
|
109
109
|
...r
|
package/dist/iframe/iframe2.js
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import { getThemeTokens as e } from "./internal/utils/dom.js";
|
|
2
|
+
import { statusIcons as t } from "./internal/types/index.js";
|
|
3
|
+
import { internal_exports as n } from "./internal/index.js";
|
|
4
4
|
//#region src/index.ts
|
|
5
|
-
var r = "2.19.
|
|
6
|
-
|
|
7
|
-
export { e as I18nService, i as SCOPE, r as VERSION, t as getThemeTokens, n as statusIcons };
|
|
5
|
+
var r = "2.19.1", i = "@nvidia-elements", a = n.I18nService;
|
|
6
|
+
export { a as I18nService, i as SCOPE, r as VERSION, e as getThemeTokens, t as statusIcons };
|
|
8
7
|
|
|
9
8
|
//# sourceMappingURL=index.js.map
|
package/dist/input/input2.js
CHANGED
package/dist/internal/index.d.ts
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export * from './controllers/audit.controller.js';
|
|
5
5
|
export * from './controllers/gesture.controller.js';
|
|
6
|
-
export * from './controllers/i18n.controller.js';
|
|
7
6
|
export * from './controllers/key-state.controller.js';
|
|
8
7
|
export * from './controllers/keynav-grid.controller.js';
|
|
9
8
|
export * from './controllers/keynav-list.controller.js';
|
|
@@ -22,7 +21,7 @@ export * from './decorators/host-attr.js';
|
|
|
22
21
|
export * from './decorators/scoped-registry.js';
|
|
23
22
|
export * from './styles/index.js';
|
|
24
23
|
export * from './styles/popover.js';
|
|
25
|
-
export * from '
|
|
24
|
+
export * from '@nvidia-elements/foundations/internal/i18n';
|
|
26
25
|
export * from './services/log.service.js';
|
|
27
26
|
export * from './services/transition.service.js';
|
|
28
27
|
export * from './types/index.js';
|