@nvidia-elements/core 2.5.0 → 2.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/NOTICE.md +1 -222
- package/dist/accordion/accordion2.js +4 -4
- package/dist/alert/alert-group2.js +1 -1
- package/dist/alert/alert2.js +1 -1
- package/dist/avatar/avatar-group2.js +1 -1
- package/dist/avatar/avatar2.js +1 -1
- package/dist/badge/badge2.js +1 -1
- package/dist/breadcrumb/breadcrumb2.js +1 -1
- package/dist/bundles/index.d.ts +2 -0
- package/dist/bundles/index.js +5 -5
- package/dist/button/button2.js +1 -1
- package/dist/button-group/button-group2.js +1 -1
- package/dist/card/card2.js +4 -4
- package/dist/chat-message/chat-message2.js +1 -1
- package/dist/checkbox/checkbox-group2.js +1 -1
- package/dist/checkbox/checkbox2.js +1 -1
- package/dist/color/color2.js +1 -1
- package/dist/combobox/combobox2.js +1 -1
- package/dist/copy-button/copy-button2.js +1 -1
- package/dist/data.snippets.json +42 -42
- package/dist/date/date2.js +1 -1
- package/dist/datetime/datetime2.js +1 -1
- package/dist/dialog/dialog-footer2.js +1 -1
- package/dist/dialog/dialog-header2.js +1 -1
- package/dist/dialog/dialog2.js +2 -2
- package/dist/dialog/dialog2.js.map +1 -1
- package/dist/divider/divider2.js +1 -1
- package/dist/dot/dot2.js +1 -1
- package/dist/drawer/drawer-content2.js +1 -1
- package/dist/drawer/drawer-footer2.js +1 -1
- package/dist/drawer/drawer-header2.js +1 -1
- package/dist/drawer/drawer2.js +1 -1
- package/dist/dropdown/dropdown-footer2.js +1 -1
- package/dist/dropdown/dropdown-header2.js +1 -1
- package/dist/dropdown/dropdown2.js +1 -1
- package/dist/dropdown-group/dropdown-group.js +1 -1
- package/dist/dropzone/dropzone2.js +1 -1
- package/dist/file/file2.js +1 -1
- package/dist/format-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/control2.js +1 -1
- package/dist/forms/control-group/control-group2.js +1 -1
- package/dist/forms/control-message/control-message2.js +1 -1
- package/dist/gauge/gauge.d.ts +2 -0
- package/dist/gauge/gauge.examples.js.map +1 -1
- package/dist/gauge/gauge.examples.json +1 -1
- package/dist/gauge/gauge.js +1 -1
- package/dist/gauge/gauge.js.map +1 -1
- package/dist/gauge/gauge2.js +68 -31
- 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/index.js +1 -1
- package/dist/input/input-group2.js +1 -1
- package/dist/input/input2.js +1 -1
- package/dist/internal/services/global.service.js +1 -1
- package/dist/logo/logo2.js +1 -1
- package/dist/menu/menu-item2.js +1 -1
- package/dist/menu/menu2.js +1 -1
- package/dist/month/month2.js +1 -1
- package/dist/notification/notification-group2.js +1 -1
- package/dist/notification/notification2.js +1 -1
- package/dist/page/page-panel/page-panel-content2.js +1 -1
- package/dist/page/page-panel/page-panel-footer2.js +1 -1
- package/dist/page/page-panel/page-panel-header2.js +1 -1
- package/dist/page/page-panel/page-panel2.js +1 -1
- package/dist/page/page2.js +1 -1
- package/dist/page-header/page-header2.js +1 -1
- package/dist/page-loader/page-loader2.js +1 -1
- package/dist/pagination/pagination2.js +1 -1
- package/dist/panel/panel2.js +4 -4
- package/dist/password/password2.js +1 -1
- package/dist/preferences-input/preferences-input2.js +1 -1
- package/dist/progress-bar/progress-bar2.js +1 -1
- package/dist/progress-ring/progress-ring2.js +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip2.js +1 -1
- package/dist/pulse/pulse2.js +1 -1
- package/dist/radio/radio-group2.js +1 -1
- package/dist/radio/radio2.js +1 -1
- package/dist/range/range2.js +1 -1
- package/dist/resize-handle/resize-handle2.js +1 -1
- package/dist/search/search2.js +1 -1
- package/dist/select/select2.js +1 -1
- package/dist/skeleton/skeleton2.js +1 -1
- package/dist/sort-button/sort-button2.js +1 -1
- package/dist/sparkline/sparkline2.js +1 -1
- package/dist/star-rating/star-rating2.js +1 -1
- package/dist/steps/steps2.js +2 -2
- package/dist/switch/switch-group2.js +1 -1
- package/dist/switch/switch2.js +1 -1
- package/dist/tabs/tabs-group2.js +1 -1
- package/dist/tabs/tabs2.js +2 -2
- package/dist/tag/tag2.js +1 -1
- package/dist/textarea/textarea2.js +1 -1
- package/dist/time/time2.js +1 -1
- package/dist/toast/toast2.js +1 -1
- package/dist/toggletip/toggletip-footer2.js +1 -1
- package/dist/toggletip/toggletip-header2.js +1 -1
- package/dist/toggletip/toggletip2.js +1 -1
- package/dist/toolbar/toolbar2.js +1 -1
- package/dist/tooltip/tooltip2.js +1 -1
- package/dist/tree/tree-node2.js +1 -1
- package/dist/tree/tree2.js +1 -1
- package/dist/week/week2.js +1 -1
- package/package.json +1 -1
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
{
|
|
114
114
|
"id": "gauge-size",
|
|
115
115
|
"name": "Size",
|
|
116
|
-
"template": "<div nve-layout=\"row gap:sm\">\n <nve-gauge size=\"sm\" value=\"50\" aria-valuetext=\"30Hz\">\n <span nve-text=\"grow\">30Hz</span>\n </nve-gauge>\n <nve-gauge size=\"md\" value=\"50\" aria-valuetext=\"12Hz\">\n <span nve-text=\"grow\">12Hz</span>\n </nve-gauge>\n <nve-gauge size=\"lg\" value=\"
|
|
116
|
+
"template": "<div nve-layout=\"row gap:sm\">\n <nve-gauge size=\"sm\" value=\"50\" aria-valuetext=\"30Hz\">\n <span nve-text=\"grow\">30Hz</span>\n </nve-gauge>\n <nve-gauge size=\"md\" value=\"50\" aria-valuetext=\"12Hz\">\n <span nve-text=\"grow\">12Hz</span>\n </nve-gauge>\n <nve-gauge size=\"lg\" value=\"84\" aria-valuetext=\"84%\">\n <span nve-text=\"grow\">84%</span>\n </nve-gauge>\n</div>\n",
|
|
117
117
|
"summary": "Gauges in small, medium, and large sizes for dense robotics and autonomous vehicle dashboards.",
|
|
118
118
|
"description": "",
|
|
119
119
|
"composition": false,
|
package/dist/gauge/gauge.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/gauge/gauge.css?inline
|
|
2
|
-
var e = ":host{--color: var(--nve-sys-text-emphasis-color);--background: var(--nve-sys-interaction-background);--needle-background: var(--nve-sys-interaction-color);--accent-color: var(--nve-sys-interaction-color);--thumb-background: var(--accent-color);--track-background: var(--accent-color);--track-width: 8px;--font-size: var(--nve-ref-font-size-400);--font-weight: var(--nve-ref-font-weight-regular);--gap: var(--nve-ref-space-xs);--width: 128px;--height: calc(var(--width) * .8627);--_animation-duration: var(--nve-ref-animation-duration-250);--_needle-size: calc(var(--track-width) / 3);display:inline-block;position:relative;width:var(--width);height:var(--height);font-weight:var(--font-weight);container-type:inline-size;contain:layout;text-box:trim-both cap alphabetic}.fill-dot-
|
|
2
|
+
var e = ":host{--color: var(--nve-sys-text-emphasis-color);--background: var(--nve-sys-interaction-background);--needle-background: var(--nve-sys-interaction-color);--accent-color: var(--nve-sys-interaction-color);--thumb-background: var(--accent-color);--track-background: var(--accent-color);--track-width: 8px;--font-size: var(--nve-ref-font-size-400);--font-weight: var(--nve-ref-font-weight-regular);--gap: var(--nve-ref-space-xs);--width: 128px;--height: calc(var(--width) * .8627);--_animation-duration: var(--nve-ref-animation-duration-250);--_needle-size: calc(var(--track-width) / 3);display:inline-block;position:relative;width:var(--width);height:var(--height);font-weight:var(--font-weight);container-type:inline-size;contain:layout;text-box:trim-both cap alphabetic}.fill-dot-end{r:calc(var(--track-width) / 3.2)}:host([size=\"sm\"]){--font-size: var(--nve-ref-font-size-300);--width: 96px;--_needle-size: calc(var(--track-width) / 2.25);.fill-dot-end{r:calc(var(--track-width) / 2.4)}}:host([size=\"lg\"]){--font-size: var(--nve-ref-font-size-500);--width: 160px;--_needle-size: calc(var(--track-width) / 3.75);.fill-dot-end{r:calc(var(--track-width) / 4)}}[internal-host]{display:grid;place-items:center;position:relative;height:100%}:host([shape=\"half\"]){--height: calc(var(--width) * .5313)}:host([shape=\"half\"]) [internal-host]{place-items:end center}svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}path{fill:none;stroke:#fff;stroke-width:var(--track-width);vector-effect:non-scaling-stroke}path.background{stroke-linecap:round}path.gauge{stroke-linecap:round}.background-surface,.fill-surface{inline-size:100%;block-size:100%}.background-surface{background:var(--background)}.fill-surface{background:var(--track-background)}.fill-dot-end{fill:var(--thumb-background);transform:rotate(var(--_dot-angle));transform-box:view-box;transform-origin:var(--_dot-origin)}:host([thumb=\"dot\"]) .fill-dot-end{animation:gauge-dot-in var(--_animation-duration) var(--nve-ref-animation-easing-100);will-change:transform}.fill-layer[hidden],.fill-dot-end[hidden],.needle[hidden]{display:none}.needle{animation:gauge-needle-in var(--_animation-duration) var(--nve-ref-animation-easing-100);transform:rotate(var(--_needle-angle));transform-box:view-box;transform-origin:var(--_needle-origin);will-change:transform}.needle-line{stroke:var(--needle-background);stroke-linecap:round;stroke-width:var(--_needle-size)}.needle-hub{fill:var(--needle-background);r:var(--_needle-size)}slot{display:flex;flex-direction:column;place-items:center;justify-content:center;height:100%;gap:var(--gap);color:var(--color);font-size:var(--font-size);font-weight:var(--nve-ref-font-weight-medium);padding-block-start:calc(var(--track-width) * 2);text-box:trim-both cap alphabetic;line-height:1;width:50%;font-variant-numeric:tabular-nums}:host([shape=\"half\"]) slot{transform:translateY(1cqh)}:host([thumb=\"needle\"]) slot{transform:translateY(1cqh);justify-content:end}:host([shape=\"half\"][thumb=\"needle\"]) slot{transform:translateY(2cqh)}::slotted(*){color:var(--color);font-size:var(--font-size)}:host([status=\"success\"]){--accent-color: var(--nve-sys-support-success-emphasis-color);--background: var(--nve-sys-support-success-muted-color)}:host([status=\"warning\"]){--accent-color: var(--nve-sys-support-warning-emphasis-color);--background: var(--nve-sys-support-warning-muted-color)}:host([status=\"danger\"]){--accent-color: var(--nve-sys-support-danger-emphasis-color);--background: var(--nve-sys-support-danger-muted-color)}:host([status=\"accent\"]){--accent-color: var(--nve-sys-accent-secondary-background)}@media(prefers-reduced-motion:reduce){:host{--_animation-duration: 0s}}@keyframes gauge-dot-in{0%{transform:rotate(var(--_dot-start-angle))}to{transform:rotate(var(--_dot-angle))}}@keyframes gauge-needle-in{0%{transform:rotate(var(--_needle-start-angle))}to{transform:rotate(var(--_needle-angle))}}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
package/dist/gauge/gauge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gauge.js","names":[],"sources":["../../src/gauge/gauge.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n --color: var(--nve-sys-text-emphasis-color);\n --background: var(--nve-sys-interaction-background);\n --needle-background: var(--nve-sys-interaction-color);\n --accent-color: var(--nve-sys-interaction-color);\n --thumb-background: var(--accent-color);\n --track-background: var(--accent-color);\n --track-width: 8px;\n --font-size: var(--nve-ref-font-size-400);\n --font-weight: var(--nve-ref-font-weight-regular);\n --gap: var(--nve-ref-space-xs);\n --width: 128px;\n --height: calc(var(--width) * 0.8627);\n --_animation-duration: var(--nve-ref-animation-duration-250);\n --_needle-size: calc(var(--track-width) / 3);\n\n display: inline-block;\n position: relative;\n width: var(--width);\n height: var(--height);\n font-weight: var(--font-weight);\n container-type: inline-size;\n contain: layout;\n text-box: trim-both cap alphabetic;\n}\n\n.fill-dot-
|
|
1
|
+
{"version":3,"file":"gauge.js","names":[],"sources":["../../src/gauge/gauge.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n --color: var(--nve-sys-text-emphasis-color);\n --background: var(--nve-sys-interaction-background);\n --needle-background: var(--nve-sys-interaction-color);\n --accent-color: var(--nve-sys-interaction-color);\n --thumb-background: var(--accent-color);\n --track-background: var(--accent-color);\n --track-width: 8px;\n --font-size: var(--nve-ref-font-size-400);\n --font-weight: var(--nve-ref-font-weight-regular);\n --gap: var(--nve-ref-space-xs);\n --width: 128px;\n --height: calc(var(--width) * 0.8627);\n --_animation-duration: var(--nve-ref-animation-duration-250);\n --_needle-size: calc(var(--track-width) / 3);\n\n display: inline-block;\n position: relative;\n width: var(--width);\n height: var(--height);\n font-weight: var(--font-weight);\n container-type: inline-size;\n contain: layout;\n text-box: trim-both cap alphabetic;\n}\n\n.fill-dot-end {\n r: calc(var(--track-width) / 3.2);\n}\n\n:host([size='sm']) {\n --font-size: var(--nve-ref-font-size-300);\n --width: 96px;\n --_needle-size: calc(var(--track-width) / 2.25);\n\n .fill-dot-end {\n r: calc(var(--track-width) / 2.4);\n }\n}\n\n:host([size='lg']) {\n --font-size: var(--nve-ref-font-size-500);\n --width: 160px;\n --_needle-size: calc(var(--track-width) / 3.75);\n\n .fill-dot-end {\n r: calc(var(--track-width) / 4);\n }\n}\n\n[internal-host] {\n display: grid;\n place-items: center;\n position: relative;\n height: 100%;\n}\n\n:host([shape='half']) {\n --height: calc(var(--width) * 0.5313);\n}\n\n:host([shape='half']) [internal-host] {\n place-items: end center;\n}\n\nsvg {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n\npath {\n fill: none;\n stroke: white;\n stroke-width: var(--track-width);\n vector-effect: non-scaling-stroke;\n}\n\npath.background {\n stroke-linecap: round;\n}\n\npath.gauge {\n stroke-linecap: round;\n}\n\n.background-surface,\n.fill-surface {\n inline-size: 100%;\n block-size: 100%;\n}\n\n.background-surface {\n background: var(--background);\n}\n\n.fill-surface {\n background: var(--track-background);\n}\n\n.fill-dot-end {\n fill: var(--thumb-background);\n transform: rotate(var(--_dot-angle));\n transform-box: view-box;\n transform-origin: var(--_dot-origin);\n}\n\n:host([thumb='dot']) .fill-dot-end {\n animation: gauge-dot-in var(--_animation-duration) var(--nve-ref-animation-easing-100);\n will-change: transform;\n}\n\n.fill-layer[hidden],\n.fill-dot-end[hidden],\n.needle[hidden] {\n display: none;\n}\n\n.needle {\n animation: gauge-needle-in var(--_animation-duration) var(--nve-ref-animation-easing-100);\n transform: rotate(var(--_needle-angle));\n transform-box: view-box;\n transform-origin: var(--_needle-origin);\n will-change: transform;\n}\n\n.needle-line {\n stroke: var(--needle-background);\n stroke-linecap: round;\n stroke-width: var(--_needle-size);\n}\n\n.needle-hub {\n fill: var(--needle-background);\n r: var(--_needle-size);\n}\n\nslot {\n display: flex;\n flex-direction: column;\n place-items: center;\n justify-content: center;\n height: 100%;\n gap: var(--gap);\n color: var(--color);\n font-size: var(--font-size);\n font-weight: var(--nve-ref-font-weight-medium);\n padding-block-start: calc(var(--track-width) * 2);\n text-box: trim-both cap alphabetic;\n line-height: 1;\n width: 50%;\n font-variant-numeric: tabular-nums;\n}\n\n:host([shape='half']) slot {\n transform: translateY(1cqh);\n}\n\n:host([thumb='needle']) slot {\n transform: translateY(1cqh);\n justify-content: end;\n}\n\n:host([shape='half'][thumb='needle']) slot {\n transform: translateY(2cqh);\n}\n\n::slotted(*) {\n color: var(--color);\n font-size: var(--font-size);\n}\n\n:host([status='success']) {\n --accent-color: var(--nve-sys-support-success-emphasis-color);\n --background: var(--nve-sys-support-success-muted-color);\n}\n\n:host([status='warning']) {\n --accent-color: var(--nve-sys-support-warning-emphasis-color);\n --background: var(--nve-sys-support-warning-muted-color);\n}\n\n:host([status='danger']) {\n --accent-color: var(--nve-sys-support-danger-emphasis-color);\n --background: var(--nve-sys-support-danger-muted-color);\n}\n\n:host([status='accent']) {\n --accent-color: var(--nve-sys-accent-secondary-background);\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host {\n --_animation-duration: 0s;\n }\n}\n\n@keyframes gauge-dot-in {\n from {\n transform: rotate(var(--_dot-start-angle));\n }\n\n to {\n transform: rotate(var(--_dot-angle));\n }\n}\n\n@keyframes gauge-needle-in {\n from {\n transform: rotate(var(--_needle-start-angle));\n }\n\n to {\n transform: rotate(var(--_needle-angle));\n }\n}\n"],"mappings":""}
|
package/dist/gauge/gauge2.js
CHANGED
|
@@ -7,15 +7,11 @@ import { LitElement as a, html as o } from "lit";
|
|
|
7
7
|
import { property as s } from "lit/decorators/property.js";
|
|
8
8
|
import { styleMap as c } from "lit/directives/style-map.js";
|
|
9
9
|
//#region src/gauge/gauge.ts
|
|
10
|
-
var l =
|
|
10
|
+
var l = {
|
|
11
11
|
default: {
|
|
12
12
|
center: 64,
|
|
13
13
|
path: "M 27.23 100.77 A 52 52 0 1 1 100.77 100.77",
|
|
14
14
|
radius: 52,
|
|
15
|
-
start: {
|
|
16
|
-
x: 27.23,
|
|
17
|
-
y: 100.77
|
|
18
|
-
},
|
|
19
15
|
startAngle: 135,
|
|
20
16
|
sweepAngle: 270,
|
|
21
17
|
surfaceHeight: 128,
|
|
@@ -25,26 +21,18 @@ var l = 200, u = 100 / 110.93, d = {
|
|
|
25
21
|
center: 64,
|
|
26
22
|
path: "M 12 64 A 52 52 0 0 1 116 64",
|
|
27
23
|
radius: 52,
|
|
28
|
-
start: {
|
|
29
|
-
x: 12,
|
|
30
|
-
y: 64
|
|
31
|
-
},
|
|
32
24
|
startAngle: 180,
|
|
33
25
|
sweepAngle: 180,
|
|
34
26
|
surfaceHeight: 64,
|
|
35
27
|
viewBox: "8.53 8.53 110.93 58.93"
|
|
36
28
|
}
|
|
37
|
-
},
|
|
38
|
-
"--_progress": e,
|
|
39
|
-
"--_dash-progress": `${e * u}cqw`,
|
|
40
|
-
"--_dash-gap": `${l * u}cqw`
|
|
41
|
-
}), p = (e, t, n) => ({
|
|
29
|
+
}, u = (e, t, n) => ({
|
|
42
30
|
[`--_${e}-angle`]: `${t}deg`,
|
|
43
31
|
[`--_${e}-origin`]: `${n.center}px ${n.center}px`,
|
|
44
32
|
[`--_${e}-start-angle`]: `${n.startAngle}deg`
|
|
45
|
-
}),
|
|
33
|
+
}), d = class extends a {
|
|
46
34
|
constructor(...t) {
|
|
47
|
-
super(...t), this.value = 0, this.max = 100, this.status = "neutral", this.thumb = "fill", this.#e = new e(this), this.i18n = this.#e.i18n;
|
|
35
|
+
super(...t), this.value = 0, this.max = 100, this.status = "neutral", this.thumb = "fill", this.#e = new e(this), this.i18n = this.#e.i18n, this.#t = 0, this.#r = 0;
|
|
48
36
|
}
|
|
49
37
|
static {
|
|
50
38
|
this.styles = n([i]);
|
|
@@ -52,11 +40,14 @@ var l = 200, u = 100 / 110.93, d = {
|
|
|
52
40
|
static {
|
|
53
41
|
this.metadata = {
|
|
54
42
|
tag: "nve-gauge",
|
|
55
|
-
version: "2.5.
|
|
43
|
+
version: "2.5.2"
|
|
56
44
|
};
|
|
57
45
|
}
|
|
58
46
|
#e;
|
|
59
|
-
#t
|
|
47
|
+
#t;
|
|
48
|
+
#n;
|
|
49
|
+
#r;
|
|
50
|
+
#i() {
|
|
60
51
|
let e = this.max, t = e !== void 0 && Number.isFinite(e) && e > 0 ? e : 100;
|
|
61
52
|
return {
|
|
62
53
|
value: Number.isFinite(this.value) ? Math.min(Math.max(this.value, 0), t) : 0,
|
|
@@ -64,43 +55,89 @@ var l = 200, u = 100 / 110.93, d = {
|
|
|
64
55
|
};
|
|
65
56
|
}
|
|
66
57
|
render() {
|
|
67
|
-
let e = this.#
|
|
68
|
-
return o`<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
|
|
58
|
+
let e = this.#f(), t = this.#t, n = this.#p(), r = this.#l(e, t), i = this.#u(e, t), a = n === "fill", s = t > 0 && (n === "fill" || n === "dot");
|
|
59
|
+
return o`<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="${!a || 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>`;
|
|
69
60
|
}
|
|
70
61
|
connectedCallback() {
|
|
71
62
|
super.connectedCallback(), t(this), this._internals.role = "progressbar";
|
|
72
63
|
}
|
|
64
|
+
disconnectedCallback() {
|
|
65
|
+
super.disconnectedCallback(), this.#n && (this.#s(), this.#t = this.#a(), this.requestUpdate());
|
|
66
|
+
}
|
|
67
|
+
willUpdate(e) {
|
|
68
|
+
super.willUpdate(e), (e.has("value") || e.has("max")) && this.#o();
|
|
69
|
+
}
|
|
73
70
|
updated(e) {
|
|
74
71
|
super.updated(e);
|
|
75
|
-
let { value: t, max: n } = this.#
|
|
72
|
+
let { value: t, max: n } = this.#i();
|
|
76
73
|
this._internals.ariaValueNow = `${t}`, this._internals.ariaValueMax = `${n}`;
|
|
77
74
|
let { status: r } = this, i = r !== void 0 && r !== "neutral" && r !== "accent" ? this.i18n[r] : void 0;
|
|
78
75
|
this._internals.ariaLabel = i ?? this.i18n.information ?? null;
|
|
79
76
|
}
|
|
80
|
-
#
|
|
77
|
+
#a() {
|
|
78
|
+
let { value: e, max: t } = this.#i();
|
|
79
|
+
return e / t * 100;
|
|
80
|
+
}
|
|
81
|
+
#o() {
|
|
82
|
+
let e = this.#a(), t = this.hasUpdated ? this.#c() : void 0;
|
|
83
|
+
if (this.#s(), !t || e === this.#t) {
|
|
84
|
+
this.#t = e;
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
let n = this.#t, r = this.animate(null, t), i = (t) => {
|
|
88
|
+
this.#t = n + (e - n) * t, this.requestUpdate();
|
|
89
|
+
}, a = () => {
|
|
90
|
+
i(r.effect?.getComputedTiming().progress ?? 0), r.playState === "running" && (this.#r = requestAnimationFrame(a));
|
|
91
|
+
};
|
|
92
|
+
r.finished.then(() => {
|
|
93
|
+
this.#n === r && (this.#s(), i(1));
|
|
94
|
+
}, () => void 0), this.#n = r, this.#r = requestAnimationFrame(a);
|
|
95
|
+
}
|
|
96
|
+
#s() {
|
|
97
|
+
this.#n &&= (cancelAnimationFrame(this.#r), this.#n.cancel(), void 0);
|
|
98
|
+
}
|
|
99
|
+
#c() {
|
|
100
|
+
let e = getComputedStyle(this), t = e.getPropertyValue("--_animation-duration").trim(), n = parseFloat(t) * (t.endsWith("ms") ? 1 : 1e3), r = e.getPropertyValue("--nve-ref-animation-easing-100").trim();
|
|
101
|
+
return n > 0 ? {
|
|
102
|
+
duration: n,
|
|
103
|
+
easing: r || "linear"
|
|
104
|
+
} : void 0;
|
|
105
|
+
}
|
|
106
|
+
#l(e, t) {
|
|
81
107
|
return e.startAngle + e.sweepAngle * (t / 100);
|
|
82
108
|
}
|
|
83
|
-
#
|
|
84
|
-
|
|
109
|
+
#u(e, t) {
|
|
110
|
+
let n = this.#d(e, e.startAngle), r = e.sweepAngle * (t / 100), i = this.#d(e, e.startAngle + r), a = +(r > 180);
|
|
111
|
+
return `M ${n.x} ${n.y} A ${e.radius} ${e.radius} 0 ${a} 1 ${i.x} ${i.y}`;
|
|
85
112
|
}
|
|
86
|
-
#
|
|
113
|
+
#d(e, t) {
|
|
114
|
+
let n = t * Math.PI / 180;
|
|
115
|
+
return {
|
|
116
|
+
x: e.center + e.radius * Math.cos(n),
|
|
117
|
+
y: e.center + e.radius * Math.sin(n)
|
|
118
|
+
};
|
|
119
|
+
}
|
|
120
|
+
#f() {
|
|
121
|
+
return this.shape === "half" ? l.half : l.default;
|
|
122
|
+
}
|
|
123
|
+
#p() {
|
|
87
124
|
return this.thumb === "dot" || this.thumb === "needle" ? this.thumb : "fill";
|
|
88
125
|
}
|
|
89
126
|
};
|
|
90
|
-
r([s({ type: Number })],
|
|
127
|
+
r([s({ type: Number })], d.prototype, "value", void 0), r([s({ type: Number })], d.prototype, "max", void 0), r([s({
|
|
91
128
|
type: String,
|
|
92
129
|
reflect: !0
|
|
93
|
-
})],
|
|
130
|
+
})], d.prototype, "status", void 0), r([s({
|
|
94
131
|
type: String,
|
|
95
132
|
reflect: !0
|
|
96
|
-
})],
|
|
133
|
+
})], d.prototype, "shape", void 0), r([s({
|
|
97
134
|
type: String,
|
|
98
135
|
reflect: !0
|
|
99
|
-
})],
|
|
136
|
+
})], d.prototype, "thumb", void 0), r([s({
|
|
100
137
|
type: String,
|
|
101
138
|
reflect: !0
|
|
102
|
-
})],
|
|
139
|
+
})], d.prototype, "size", void 0), r([s({ type: Object })], d.prototype, "i18n", void 0);
|
|
103
140
|
//#endregion
|
|
104
|
-
export {
|
|
141
|
+
export { d as Gauge };
|
|
105
142
|
|
|
106
143
|
//# sourceMappingURL=gauge2.js.map
|
package/dist/gauge/gauge2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gauge2.js","names":["#i18nController","#geometry","#normalizedValues","#normalizedThumb","#angleAtProgress"],"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_DASH_GAP = 200;\nconst GAUGE_DASH_SCALE = 100 / 110.93;\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 start: { x: 27.23, y: 100.77 },\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 start: { x: 12, y: 64 },\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 fillMaskStyle = (progress: number) => ({\n '--_progress': progress,\n '--_dash-progress': `${progress * GAUGE_DASH_SCALE}cqw`,\n '--_dash-gap': `${GAUGE_DASH_GAP * GAUGE_DASH_SCALE}cqw`\n});\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 #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 { value, max } = this.#normalizedValues();\n const progress = (value / max) * 100;\n const thumb = this.#normalizedThumb();\n const progressAngle = this.#angleAtProgress(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 pathLength=\"100\" 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 pathLength=\"100\" d=${geometry.path} class=\"gauge\"\n ?empty=${progress <= 0}\n style=${styleMap(fillMaskStyle(progress))}\n stroke-dasharray=${`${progress} ${GAUGE_DASH_GAP}`}>\n </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)\" ?hidden=${!showFill}>\n <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"fill-surface\"></div>\n </foreignObject>\n <circle class=\"fill-dot-start\" cx=${geometry.start.x} cy=${geometry.start.y} ?hidden=${!(showFill && progress > 0)}></circle>\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 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 #angleAtProgress(geometry: GaugeGeometry, progress: number) {\n return geometry.startAngle + geometry.sweepAngle * (progress / 100);\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":["#i18nController","#geometry","#paintedProgress","#normalizedThumb","#angleAtProgress","#pathAtProgress","#progressAnimation","#stopProgressAnimation","#targetProgress","#animateProgress","#normalizedValues","#animationTiming","#progressFrame","#pointAtAngle"],"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 the animation was cancelled on\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":";;;;;;;;;AAWA,IAAM,IAAiB;CACrB,SAAS;EACP,QAAQ;EACR,MAAM;EACN,QAAQ;EACR,YAAY;EACZ,YAAY;EACZ,eAAe;EACf,SAAS;CACX;CACA,MAAM;EACJ,QAAQ;EACR,MAAM;EACN,QAAQ;EACR,YAAY;EACZ,YAAY;EACZ,eAAe;EACf,SAAS;CACX;AACF,GAIM,KAAc,GAAyB,GAAuB,OAA6B;EAC9F,MAAM,EAAM,UAAU,GAAG,EAAc;EACvC,MAAM,EAAM,WAAW,GAAG,EAAS,OAAO,KAAK,EAAS,OAAO;EAC/D,MAAM,EAAM,gBAAgB,GAAG,EAAS,WAAW;AACtD,IAuBa,IAAb,cAA2B,EAAW;;4BAYA,cAGD,mBAG6C,wBAMF,kBAKtC,IAAI,EAAqB,IAAI,eAGlC,KAAKA,GAAgB,gBAGrC,aAIF;;;gBAtCD,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;EACX;;CAuBA;CAMA;CAEA;CAEA;CAEA,KAAoB;EAClB,IAAM,IAAY,KAAK,KACjB,IAAM,MAAc,KAAA,KAAa,OAAO,SAAS,CAAS,KAAK,IAAY,IAAI,IAAY;EAEjG,OAAO;GAAE,OADK,OAAO,SAAS,KAAK,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,OAAO,CAAC,GAAG,CAAG,IAAI;GACrE;EAAI;CACtB;CAEA,SAAS;EACP,IAAM,IAAW,KAAKC,GAAU,GAC1B,IAAW,KAAKC,IAChB,IAAQ,KAAKC,GAAiB,GAC9B,IAAgB,KAAKC,GAAiB,GAAU,CAAQ,GACxD,IAAW,KAAKC,GAAgB,GAAU,CAAQ,GAClD,IAAW,MAAU,QACrB,IAAU,IAAW,MAAM,MAAU,UAAU,MAAU;EAE/D,OAAO,CAAI,oCAEQ,EAAS,QAAQ,uIAE2D,EAAS,cAAc,aAClG,EAAS,KAAK,qHAEuD,EAAS,cAAc,aAC5F,EAAS,0BAAwB,KAAY,EAAE,4DAGzB,EAAS,cAAc,kLAGJ,EAAS,cAAc,oCAClE,CAAC,KAAY,KAAY,EAAE,0HAGL,EAAS,SAAS,EAAS,OAAO,QAAM,EAAS,OAAO,aAC9E,CAAC,EAAQ,WACX,EAAS,EAAW,OAAO,GAAe,CAAQ,CAAC,EAAE,wCAGnD,MAAU,SAAS,WACrB,EAAS,EAAW,UAAU,GAAe,CAAQ,CAAC,EAAE,kCACjC,EAAS,OAAO,QAAM,EAAS,OAAO,QAAM,EAAS,SAAS,GAAG,QAAM,EAAS,OAAO,0CACtF,EAAS,OAAO,QAAM,EAAS,OAAO;CAMhF;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,uBAAuB;EAIrB,AAHA,MAAM,qBAAqB,GAGvB,KAAKC,OACP,KAAKC,GAAuB,GAC5B,KAAKL,KAAmB,KAAKM,GAAgB,GAC7C,KAAK,cAAc;CAEvB;CAEA,WAAW,GAA6B;EAGtC,AAFA,MAAM,WAAW,CAAK,IAElB,EAAM,IAAI,OAAO,KAAK,EAAM,IAAI,KAAK,MACvC,KAAKC,GAAiB;CAE1B;CAEA,QAAQ,GAA6B;EACnC,MAAM,QAAQ,CAAK;EACnB,IAAM,EAAE,UAAO,WAAQ,KAAKC,GAAkB;EAE9C,AADA,KAAK,WAAW,eAAe,GAAG,KAClC,KAAK,WAAW,eAAe,GAAG;EAClC,IAAM,EAAE,cAAW,MACb,IACJ,MAAW,KAAA,KAAa,MAAW,aAAa,MAAW,WAAW,KAAK,KAAK,KAAU,KAAA;EAC5F,KAAK,WAAW,YAAY,KAAe,KAAK,KAAK,eAAe;CACtE;CAEA,KAAkB;EAChB,IAAM,EAAE,UAAO,WAAQ,KAAKA,GAAkB;EAC9C,OAAQ,IAAQ,IAAO;CACzB;CAMA,KAAmB;EACjB,IAAM,IAAS,KAAKF,GAAgB,GAC9B,IAAS,KAAK,aAAa,KAAKG,GAAiB,IAAI,KAAA;EAI3D,IAFA,KAAKJ,GAAuB,GAExB,CAAC,KAAU,MAAW,KAAKL,IAAkB;GAC/C,KAAKA,KAAmB;GACxB;EACF;EAEA,IAAM,IAAO,KAAKA,IAEZ,IAAY,KAAK,QAAQ,MAAM,CAAM,GACrC,KAAS,MAAqB;GAElC,AADA,KAAKA,KAAmB,KAAQ,IAAS,KAAQ,GACjD,KAAK,cAAc;EACrB,GACM,UAAmB;GAGvB,AAFA,EAAM,EAAU,QAAQ,kBAAkB,CAAC,CAAC,YAAY,CAAC,GAErD,EAAU,cAAc,cAC1B,KAAKU,KAAiB,sBAAsB,CAAU;EAE1D;EAcA,AAZA,EAAU,SAAS,WACX;GAEJ,AAAI,KAAKN,OAAuB,MAC9B,KAAKC,GAAuB,GAC5B,EAAM,CAAC;EAEX,SACM,KAAA,CACR,GAEA,KAAKD,KAAqB,GAC1B,KAAKM,KAAiB,sBAAsB,CAAU;CACxD;CAEA,KAAyB;EAEvB,AAGE,KAAKN,QAFL,qBAAqB,KAAKM,EAAc,GACxC,KAAKN,GAAmB,OAAO,GACL,KAAA;CAE9B;CAEA,KAAmB;EACjB,IAAM,IAAc,iBAAiB,IAAI,GACnC,IAAW,EAAY,iBAAiB,uBAAuB,CAAC,CAAC,KAAK,GACtE,IAAe,WAAW,CAAQ,KAAK,EAAS,SAAS,IAAI,IAAI,IAAI,MACrE,IAAS,EAAY,iBAAiB,gCAAgC,CAAC,CAAC,KAAK;EAEnF,OAAO,IAAe,IAAI;GAAE,UAAU;GAAc,QAAQ,KAAU;EAAS,IAAI,KAAA;CACrF;CAEA,GAAiB,GAAyB,GAAkB;EAC1D,OAAO,EAAS,aAAa,EAAS,cAAc,IAAW;CACjE;CAEA,GAAgB,GAAyB,GAAkB;EACzD,IAAM,IAAQ,KAAKO,GAAc,GAAU,EAAS,UAAU,GACxD,IAAa,EAAS,cAAc,IAAW,MAC/C,IAAM,KAAKA,GAAc,GAAU,EAAS,aAAa,CAAU,GACnE,IAAe,MAAa;EAClC,OAAO,KAAK,EAAM,EAAE,GAAG,EAAM,EAAE,KAAK,EAAS,OAAO,GAAG,EAAS,OAAO,KAAK,EAAa,KAAK,EAAI,EAAE,GAAG,EAAI;CAC7G;CAEA,GAAc,GAAyB,GAAe;EACpD,IAAM,IAAW,IAAQ,KAAK,KAAM;EACpC,OAAO;GACL,GAAG,EAAS,SAAS,EAAS,SAAS,KAAK,IAAI,CAAO;GACvD,GAAG,EAAS,SAAS,EAAS,SAAS,KAAK,IAAI,CAAO;EACzD;CACF;CAEA,KAAY;EACV,OAAO,KAAK,UAAU,SAAS,EAAe,OAAO,EAAe;CACtE;CAEA,KAAmB;EACjB,OAAO,KAAK,UAAU,SAAS,KAAK,UAAU,WAAW,KAAK,QAAQ;CACxE;AACF;GAlNG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAGzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,MAGzB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAKxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA"}
|
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 e extends o {
|
|
|
16
16
|
static {
|
|
17
17
|
this.metadata = {
|
|
18
18
|
tag: "nve-icon",
|
|
19
|
-
version: "2.5.
|
|
19
|
+
version: "2.5.2"
|
|
20
20
|
};
|
|
21
21
|
}
|
|
22
22
|
static {
|
|
@@ -94,7 +94,7 @@ a([l({
|
|
|
94
94
|
})], f.prototype, "name", void 0), a([d()], f.prototype, "svg", void 0);
|
|
95
95
|
function p(t) {
|
|
96
96
|
if (typeof globalThis.customElements?.get == "function") {
|
|
97
|
-
let n = e(t.metadata.version), i = e("2.5.
|
|
97
|
+
let n = e(t.metadata.version), i = e("2.5.2");
|
|
98
98
|
n.minor <= i.minor && n.major <= i.major && (t._icons = {
|
|
99
99
|
...t._icons,
|
|
100
100
|
...r
|
package/dist/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import { I18nService as e } from "./internal/services/i18n.service.js";
|
|
|
2
2
|
import { getThemeTokens as t } from "./internal/utils/dom.js";
|
|
3
3
|
import { statusIcons as n } from "./internal/types/index.js";
|
|
4
4
|
//#region src/index.ts
|
|
5
|
-
var r = "2.5.
|
|
5
|
+
var r = "2.5.2", i = "@nvidia-elements";
|
|
6
6
|
//#endregion
|
|
7
7
|
export { e as I18nService, i as SCOPE, r as VERSION, t as getThemeTokens, n as statusIcons };
|
|
8
8
|
|
package/dist/input/input2.js
CHANGED
|
@@ -19,7 +19,7 @@ var a = class {
|
|
|
19
19
|
i18nRegistry: {},
|
|
20
20
|
audit: {}
|
|
21
21
|
}
|
|
22
|
-
}, globalThis.NVE_ELEMENTS.state.versions = Array.from(/* @__PURE__ */ new Set([...globalThis.NVE_ELEMENTS.state.versions, "2.5.
|
|
22
|
+
}, globalThis.NVE_ELEMENTS.state.versions = Array.from(/* @__PURE__ */ new Set([...globalThis.NVE_ELEMENTS.state.versions, "2.5.2"])), globalThis.NVE_ELEMENTS.state.scopedRegistry ??= {}, globalThis.NVE_ELEMENTS.state.scopedRegistry["2.5.2"] = i(), globalThis.NVE_ELEMENTS.state.versions.length > 1 && globalThis.NVE_ELEMENTS.state.env !== "production" && console.warn(e(), `\n\n${JSON.stringify(globalThis.NVE_ELEMENTS.state.versions, null, 2)}`);
|
|
23
23
|
}
|
|
24
24
|
get state() {
|
|
25
25
|
return globalThis.NVE_ELEMENTS.state;
|
package/dist/logo/logo2.js
CHANGED
package/dist/menu/menu-item2.js
CHANGED
package/dist/menu/menu2.js
CHANGED
package/dist/month/month2.js
CHANGED
package/dist/page/page2.js
CHANGED
package/dist/panel/panel2.js
CHANGED
|
@@ -21,7 +21,7 @@ var g = class extends f {
|
|
|
21
21
|
static {
|
|
22
22
|
this.metadata = {
|
|
23
23
|
tag: "nve-panel-header",
|
|
24
|
-
version: "2.5.
|
|
24
|
+
version: "2.5.2"
|
|
25
25
|
};
|
|
26
26
|
}
|
|
27
27
|
render() {
|
|
@@ -37,7 +37,7 @@ var g = class extends f {
|
|
|
37
37
|
static {
|
|
38
38
|
this.metadata = {
|
|
39
39
|
tag: "nve-panel-content",
|
|
40
|
-
version: "2.5.
|
|
40
|
+
version: "2.5.2"
|
|
41
41
|
};
|
|
42
42
|
}
|
|
43
43
|
render() {
|
|
@@ -50,7 +50,7 @@ var g = class extends f {
|
|
|
50
50
|
static {
|
|
51
51
|
this.metadata = {
|
|
52
52
|
tag: "nve-panel-footer",
|
|
53
|
-
version: "2.5.
|
|
53
|
+
version: "2.5.2"
|
|
54
54
|
};
|
|
55
55
|
}
|
|
56
56
|
render() {
|
|
@@ -69,7 +69,7 @@ var g = class extends f {
|
|
|
69
69
|
static {
|
|
70
70
|
this.metadata = {
|
|
71
71
|
tag: "nve-panel",
|
|
72
|
-
version: "2.5.
|
|
72
|
+
version: "2.5.2"
|
|
73
73
|
};
|
|
74
74
|
}
|
|
75
75
|
static {
|