@nvidia-elements/core 2.0.3 → 2.1.0
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 +19 -0
- package/dist/_virtual/{_@oxc-project_runtime@0.133.0 → _@oxc-project_runtime@0.139.0}/helpers/esm/decorate.js +2 -2
- package/dist/accordion/accordion.d.ts +13 -12
- package/dist/accordion/accordion2.js +5 -5
- package/dist/accordion/accordion2.js.map +1 -1
- package/dist/accordion/define.d.ts +1 -1
- package/dist/alert/alert-group.d.ts +5 -4
- package/dist/alert/alert-group2.js +2 -2
- package/dist/alert/alert.d.ts +6 -6
- package/dist/alert/alert2.js +2 -2
- package/dist/alert/define.d.ts +1 -1
- package/dist/avatar/avatar-group.d.ts +2 -2
- package/dist/avatar/avatar-group2.js +1 -1
- package/dist/avatar/avatar.d.ts +3 -3
- package/dist/avatar/avatar2.js +2 -2
- package/dist/avatar/define.d.ts +1 -1
- package/dist/badge/badge.d.ts +7 -6
- package/dist/badge/badge2.js +2 -2
- package/dist/badge/badge2.js.map +1 -1
- package/dist/badge/define.d.ts +1 -1
- package/dist/breadcrumb/breadcrumb.d.ts +4 -4
- package/dist/breadcrumb/breadcrumb2.js +2 -2
- package/dist/breadcrumb/breadcrumb2.js.map +1 -1
- package/dist/breadcrumb/define.d.ts +1 -1
- package/dist/bundle.d.ts +136 -67
- package/dist/bundles/index.d.ts +49 -0
- package/dist/bundles/index.js +4 -4
- package/dist/button/button.d.ts +4 -4
- package/dist/button/button2.js +2 -2
- package/dist/button/button2.js.map +1 -1
- package/dist/button/define.d.ts +1 -1
- package/dist/button-group/button-group.d.ts +5 -4
- package/dist/button-group/button-group2.js +2 -2
- package/dist/button-group/define.d.ts +1 -1
- package/dist/card/card.d.ts +9 -9
- package/dist/card/card2.js +5 -5
- package/dist/card/define.d.ts +1 -1
- package/dist/chat-message/chat-message.d.ts +3 -3
- package/dist/chat-message/chat-message2.js +2 -2
- package/dist/chat-message/define.d.ts +1 -1
- package/dist/checkbox/checkbox-group.d.ts +2 -2
- package/dist/checkbox/checkbox-group2.js +2 -2
- package/dist/checkbox/checkbox.d.ts +2 -2
- package/dist/checkbox/checkbox2.js +2 -2
- package/dist/checkbox/define.d.ts +1 -1
- package/dist/color/color.d.ts +5 -5
- package/dist/color/color2.js +2 -2
- package/dist/color/color2.js.map +1 -1
- package/dist/color/define.d.ts +1 -1
- package/dist/combobox/combobox.d.ts +12 -11
- package/dist/combobox/combobox2.js +2 -2
- package/dist/combobox/combobox2.js.map +1 -1
- package/dist/combobox/define.d.ts +1 -1
- package/dist/copy-button/copy-button.d.ts +7 -7
- package/dist/copy-button/copy-button2.js +2 -2
- package/dist/copy-button/copy-button2.js.map +1 -1
- package/dist/copy-button/define.d.ts +1 -1
- package/dist/custom-elements-jsx.d.ts +52 -0
- package/dist/custom-elements-vue.d.ts +52 -0
- package/dist/custom-elements.json +415 -1
- package/dist/data.html.json +67 -0
- package/dist/date/date.d.ts +5 -5
- package/dist/date/date2.js +2 -2
- package/dist/date/define.d.ts +1 -1
- package/dist/datetime/datetime.d.ts +5 -5
- package/dist/datetime/datetime2.js +2 -2
- package/dist/datetime/define.d.ts +1 -1
- package/dist/dialog/define.d.ts +1 -1
- package/dist/dialog/dialog-footer.d.ts +2 -2
- package/dist/dialog/dialog-footer2.js +2 -2
- package/dist/dialog/dialog-header.d.ts +2 -2
- package/dist/dialog/dialog-header2.js +2 -2
- package/dist/dialog/dialog.d.ts +6 -5
- package/dist/dialog/dialog2.js +2 -2
- package/dist/divider/define.d.ts +1 -1
- package/dist/divider/divider.d.ts +4 -3
- package/dist/divider/divider2.js +2 -2
- package/dist/dot/define.d.ts +1 -1
- package/dist/dot/dot.d.ts +3 -3
- package/dist/dot/dot2.js +2 -2
- package/dist/drawer/define.d.ts +1 -1
- package/dist/drawer/drawer-content.d.ts +2 -2
- package/dist/drawer/drawer-content2.js +2 -2
- package/dist/drawer/drawer-footer.d.ts +2 -2
- package/dist/drawer/drawer-footer2.js +2 -2
- package/dist/drawer/drawer-header.d.ts +2 -2
- package/dist/drawer/drawer-header2.js +2 -2
- package/dist/drawer/drawer.d.ts +6 -5
- package/dist/drawer/drawer2.js +2 -2
- package/dist/dropdown/define.d.ts +1 -1
- package/dist/dropdown/dropdown-footer.d.ts +2 -2
- package/dist/dropdown/dropdown-footer2.js +2 -2
- package/dist/dropdown/dropdown-header.d.ts +2 -2
- package/dist/dropdown/dropdown-header2.js +2 -2
- package/dist/dropdown/dropdown.d.ts +6 -5
- package/dist/dropdown/dropdown2.js +2 -2
- package/dist/dropdown-group/define.d.ts +1 -1
- package/dist/dropdown-group/dropdown-group.d.ts +3 -3
- package/dist/dropdown-group/dropdown-group.js +2 -2
- package/dist/dropdown-group/dropdown-group.js.map +1 -1
- package/dist/dropzone/define.d.ts +1 -1
- package/dist/dropzone/dropzone.d.ts +12 -12
- package/dist/dropzone/dropzone.util.d.ts +1 -1
- package/dist/dropzone/dropzone.util.js.map +1 -1
- package/dist/dropzone/dropzone2.js +2 -2
- package/dist/dropzone/dropzone2.js.map +1 -1
- package/dist/file/define.d.ts +1 -1
- package/dist/file/file.d.ts +2 -2
- package/dist/file/file2.js +1 -1
- package/dist/format-datetime/define.d.ts +1 -1
- package/dist/format-datetime/format-datetime.d.ts +2 -2
- package/dist/format-datetime/format-datetime2.js +2 -2
- package/dist/format-datetime/format-datetime2.js.map +1 -1
- package/dist/format-number/define.d.ts +1 -1
- package/dist/format-number/format-number.d.ts +2 -2
- package/dist/format-number/format-number2.js +3 -3
- package/dist/format-number/format-number2.js.map +1 -1
- package/dist/format-relative-time/define.d.ts +1 -1
- package/dist/format-relative-time/format-relative-time.d.ts +2 -2
- package/dist/format-relative-time/format-relative-time2.js +2 -2
- package/dist/format-relative-time/format-relative-time2.js.map +1 -1
- package/dist/forms/control/control.d.ts +4 -3
- package/dist/forms/control/control2.js +2 -2
- package/dist/forms/control/control2.js.map +1 -1
- package/dist/forms/control-group/control-group.d.ts +4 -3
- package/dist/forms/control-group/control-group2.js +2 -2
- package/dist/forms/control-message/control-message.d.ts +4 -4
- package/dist/forms/control-message/control-message2.js +2 -2
- package/dist/forms/define.d.ts +1 -1
- package/dist/forms/utils/layout.d.ts +2 -2
- package/dist/forms/utils/layout.js +1 -1
- package/dist/forms/utils/layout.js.map +1 -1
- package/dist/forms/utils/states.d.ts +2 -2
- package/dist/forms/utils/states.js +1 -1
- package/dist/forms/utils/states.js.map +1 -1
- package/dist/gauge/define.d.ts +6 -0
- package/dist/gauge/define.js +7 -0
- package/dist/gauge/define.js.map +1 -0
- package/dist/gauge/gauge.d.ts +52 -0
- package/dist/gauge/gauge.examples.js +6 -0
- package/dist/gauge/gauge.examples.js.map +1 -0
- package/dist/gauge/gauge.examples.json +147 -0
- package/dist/gauge/gauge.js +6 -0
- package/dist/gauge/gauge.js.map +1 -0
- package/dist/gauge/gauge2.js +106 -0
- package/dist/gauge/gauge2.js.map +1 -0
- package/dist/gauge/index.d.ts +1 -0
- package/dist/gauge/index.js +2 -0
- package/dist/grid/cell/cell.d.ts +2 -2
- package/dist/grid/cell/cell2.js +1 -1
- package/dist/grid/column/column.d.ts +4 -3
- package/dist/grid/column/column2.js +2 -2
- package/dist/grid/column/column2.js.map +1 -1
- package/dist/grid/define.d.ts +1 -1
- package/dist/grid/footer/footer.d.ts +2 -2
- package/dist/grid/footer/footer2.js +2 -2
- package/dist/grid/grid.d.ts +6 -5
- package/dist/grid/grid2.js +2 -2
- package/dist/grid/grid2.js.map +1 -1
- package/dist/grid/header/header.d.ts +4 -3
- package/dist/grid/header/header2.js +2 -2
- package/dist/grid/header/header2.js.map +1 -1
- package/dist/grid/placeholder/placeholder.d.ts +2 -2
- package/dist/grid/placeholder/placeholder2.js +1 -1
- package/dist/grid/row/row.d.ts +2 -2
- package/dist/grid/row/row2.js +2 -2
- package/dist/icon/define.d.ts +1 -1
- package/dist/icon/icon.d.ts +6 -5
- package/dist/icon/icon2.js +3 -3
- package/dist/icon/icon2.js.map +1 -1
- package/dist/icon/icons.js.map +1 -1
- package/dist/icon-button/define.d.ts +1 -1
- package/dist/icon-button/icon-button.d.ts +6 -5
- package/dist/icon-button/icon-button2.js +2 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/input/define.d.ts +1 -1
- package/dist/input/input-group.d.ts +2 -2
- package/dist/input/input-group2.js +1 -1
- package/dist/input/input-group2.js.map +1 -1
- package/dist/input/input.d.ts +3 -3
- package/dist/input/input2.js +2 -2
- package/dist/internal/controllers/audit.controller.d.ts +1 -1
- package/dist/internal/controllers/i18n.controller.d.ts +3 -3
- package/dist/internal/controllers/i18n.controller.js +1 -1
- package/dist/internal/controllers/i18n.controller.js.map +1 -1
- package/dist/internal/controllers/keynav-grid.controller.d.ts +1 -1
- package/dist/internal/controllers/keynav-grid.controller.js.map +1 -1
- package/dist/internal/controllers/keynav-list.controller.d.ts +1 -1
- package/dist/internal/controllers/keynav-list.controller.js.map +1 -1
- package/dist/internal/controllers/state-expanded.controller.d.ts +1 -1
- package/dist/internal/controllers/state-highlighted.controller.d.ts +1 -1
- package/dist/internal/controllers/state-scroll.controller.d.ts +1 -1
- package/dist/internal/controllers/state-selected.controller.d.ts +1 -1
- package/dist/internal/controllers/state-selected.controller.js.map +1 -1
- package/dist/internal/controllers/type-anchor.controller.d.ts +1 -1
- package/dist/internal/controllers/type-anchor.controller.js.map +1 -1
- package/dist/internal/controllers/type-closable.controller.d.ts +1 -1
- package/dist/internal/controllers/type-expandable.controller.d.ts +1 -1
- package/dist/internal/controllers/type-native-popover.controller.d.ts +2 -2
- package/dist/internal/controllers/type-native-popover.controller.js.map +1 -1
- package/dist/internal/controllers/type-native-popover.utils.js.map +1 -1
- package/dist/internal/controllers/type-selectable.controller.d.ts +1 -1
- package/dist/internal/controllers/type-ssr.controller.d.ts +1 -1
- package/dist/internal/controllers/type-ssr.controller.js.map +1 -1
- package/dist/internal/controllers/type-touch.controller.d.ts +2 -2
- package/dist/internal/controllers/type-touch.controller.js.map +1 -1
- package/dist/internal/decorators/host-attr.d.ts +2 -2
- package/dist/internal/services/global.service.d.ts +1 -1
- package/dist/internal/services/global.service.js +1 -1
- package/dist/internal/services/global.service.js.map +1 -1
- package/dist/internal/services/global.utils.js.map +1 -1
- package/dist/internal/services/i18n.service.js.map +1 -1
- package/dist/internal/services/transition.service.js.map +1 -1
- package/dist/internal/styles/index.d.ts +1 -1
- package/dist/internal/types/index.d.ts +3 -3
- package/dist/internal/utils/a11y.js.map +1 -1
- package/dist/internal/utils/audit-logs.js +1 -1
- package/dist/internal/utils/audit.js.map +1 -1
- package/dist/internal/utils/dom.d.ts +1 -1
- package/dist/internal/utils/dom.js +10 -10
- package/dist/internal/utils/dom.js.map +1 -1
- package/dist/internal/utils/focus.js.map +1 -1
- package/dist/internal/utils/objects.js.map +1 -1
- package/dist/internal/utils/strings.js +1 -1
- package/dist/internal/utils/strings.js.map +1 -1
- package/dist/logo/define.d.ts +1 -1
- package/dist/logo/logo.d.ts +3 -3
- package/dist/logo/logo2.js +2 -2
- package/dist/menu/define.d.ts +1 -1
- package/dist/menu/menu-item.d.ts +3 -3
- package/dist/menu/menu-item2.js +2 -2
- package/dist/menu/menu-item2.js.map +1 -1
- package/dist/menu/menu.d.ts +4 -4
- package/dist/menu/menu2.js +2 -2
- package/dist/menu/menu2.js.map +1 -1
- package/dist/month/define.d.ts +1 -1
- package/dist/month/month.d.ts +5 -5
- package/dist/month/month2.js +2 -2
- package/dist/notification/define.d.ts +1 -1
- package/dist/notification/notification-group.d.ts +4 -3
- package/dist/notification/notification-group2.js +2 -2
- package/dist/notification/notification.d.ts +9 -7
- package/dist/notification/notification2.js +2 -2
- package/dist/page/define.d.ts +1 -1
- package/dist/page/page-panel/page-panel-content.d.ts +2 -2
- package/dist/page/page-panel/page-panel-content2.js +1 -1
- package/dist/page/page-panel/page-panel-footer.d.ts +2 -2
- package/dist/page/page-panel/page-panel-footer2.js +2 -2
- package/dist/page/page-panel/page-panel-header.d.ts +2 -2
- package/dist/page/page-panel/page-panel-header2.js +2 -2
- package/dist/page/page-panel/page-panel.d.ts +4 -4
- package/dist/page/page-panel/page-panel2.js +2 -2
- package/dist/page/page.d.ts +2 -2
- package/dist/page/page2.js +2 -2
- package/dist/page-header/define.d.ts +1 -1
- package/dist/page-header/page-header.d.ts +2 -2
- package/dist/page-header/page-header2.js +1 -1
- package/dist/page-loader/define.d.ts +1 -1
- package/dist/page-loader/page-loader.d.ts +5 -4
- package/dist/page-loader/page-loader2.js +2 -2
- package/dist/pagination/define.d.ts +1 -1
- package/dist/pagination/pagination.d.ts +8 -8
- package/dist/pagination/pagination2.js +2 -2
- package/dist/pagination/pagination2.js.map +1 -1
- package/dist/panel/define.d.ts +1 -1
- package/dist/panel/panel.d.ts +10 -10
- package/dist/panel/panel2.js +5 -5
- package/dist/password/define.d.ts +1 -1
- package/dist/password/password.d.ts +5 -5
- package/dist/password/password2.js +2 -2
- package/dist/polyfills/custom-state-set.js.map +1 -1
- package/dist/polyfills/index.d.ts +13 -0
- package/dist/preferences-input/define.d.ts +1 -1
- package/dist/preferences-input/preferences-input.d.ts +13 -13
- package/dist/preferences-input/preferences-input2.js +2 -2
- package/dist/preferences-input/preferences-input2.js.map +1 -1
- package/dist/progress-bar/define.d.ts +1 -1
- package/dist/progress-bar/progress-bar.d.ts +3 -3
- package/dist/progress-bar/progress-bar2.js +2 -2
- package/dist/progress-ring/define.d.ts +1 -1
- package/dist/progress-ring/progress-ring.d.ts +7 -6
- package/dist/progress-ring/progress-ring2.js +4 -4
- package/dist/progress-ring/progress-ring2.js.map +1 -1
- package/dist/progressive-filter-chip/define.d.ts +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip.d.ts +7 -7
- package/dist/progressive-filter-chip/progressive-filter-chip2.js +2 -2
- package/dist/progressive-filter-chip/progressive-filter-chip2.js.map +1 -1
- package/dist/pulse/define.d.ts +1 -1
- package/dist/pulse/pulse.d.ts +4 -4
- package/dist/pulse/pulse2.js +2 -2
- package/dist/radio/define.d.ts +1 -1
- package/dist/radio/radio-group.d.ts +2 -2
- package/dist/radio/radio-group2.js +2 -2
- package/dist/radio/radio.d.ts +2 -2
- package/dist/radio/radio2.js +2 -2
- package/dist/range/define.d.ts +1 -1
- package/dist/range/range.d.ts +5 -4
- package/dist/range/range2.js +2 -2
- package/dist/resize-handle/define.d.ts +1 -1
- package/dist/resize-handle/resize-handle.d.ts +6 -6
- package/dist/resize-handle/resize-handle2.js +2 -2
- package/dist/resize-handle/resize-handle2.js.map +1 -1
- package/dist/search/define.d.ts +1 -1
- package/dist/search/search.d.ts +5 -5
- package/dist/search/search2.js +2 -2
- package/dist/select/define.d.ts +1 -1
- package/dist/select/select.d.ts +11 -10
- package/dist/select/select2.js +2 -2
- package/dist/select/select2.js.map +1 -1
- package/dist/skeleton/define.d.ts +1 -1
- package/dist/skeleton/skeleton.d.ts +3 -3
- package/dist/skeleton/skeleton2.js +2 -2
- package/dist/skeleton/skeleton2.js.map +1 -1
- package/dist/sort-button/define.d.ts +1 -1
- package/dist/sort-button/sort-button.d.ts +5 -5
- package/dist/sort-button/sort-button2.js +2 -2
- package/dist/sort-button/sort-button2.js.map +1 -1
- package/dist/sparkline/define.d.ts +1 -1
- package/dist/sparkline/sparkline.d.ts +5 -4
- package/dist/sparkline/sparkline.utils.d.ts +1 -1
- package/dist/sparkline/sparkline.utils.js.map +1 -1
- package/dist/sparkline/sparkline2.js +2 -2
- package/dist/sparkline/sparkline2.js.map +1 -1
- package/dist/star-rating/define.d.ts +1 -1
- package/dist/star-rating/star-rating.d.ts +5 -5
- package/dist/star-rating/star-rating2.js +2 -2
- package/dist/star-rating/star-rating2.js.map +1 -1
- package/dist/steps/define.d.ts +1 -1
- package/dist/steps/steps.d.ts +10 -9
- package/dist/steps/steps2.js +3 -3
- package/dist/steps/steps2.js.map +1 -1
- package/dist/switch/define.d.ts +1 -1
- package/dist/switch/switch-group.d.ts +2 -2
- package/dist/switch/switch-group2.js +2 -2
- package/dist/switch/switch.d.ts +2 -2
- package/dist/switch/switch2.js +2 -2
- package/dist/tabs/define.d.ts +1 -1
- package/dist/tabs/tabs-group.d.ts +4 -3
- package/dist/tabs/tabs-group2.js +2 -2
- package/dist/tabs/tabs-group2.js.map +1 -1
- package/dist/tabs/tabs.d.ts +8 -7
- package/dist/tabs/tabs2.js +3 -3
- package/dist/tabs/tabs2.js.map +1 -1
- package/dist/tag/define.d.ts +1 -1
- package/dist/tag/tag.d.ts +6 -6
- package/dist/tag/tag2.js +2 -2
- package/dist/tag/tag2.js.map +1 -1
- package/dist/textarea/define.d.ts +1 -1
- package/dist/textarea/textarea.d.ts +2 -2
- package/dist/textarea/textarea2.js +1 -1
- package/dist/time/define.d.ts +1 -1
- package/dist/time/time.d.ts +5 -5
- package/dist/time/time2.js +2 -2
- package/dist/toast/define.d.ts +1 -1
- package/dist/toast/toast.d.ts +7 -6
- package/dist/toast/toast2.js +2 -2
- package/dist/toggletip/define.d.ts +1 -1
- package/dist/toggletip/toggletip-footer.d.ts +2 -2
- package/dist/toggletip/toggletip-footer2.js +2 -2
- package/dist/toggletip/toggletip-header.d.ts +2 -2
- package/dist/toggletip/toggletip-header2.js +2 -2
- package/dist/toggletip/toggletip.d.ts +6 -5
- package/dist/toggletip/toggletip2.js +2 -2
- package/dist/toolbar/define.d.ts +1 -1
- package/dist/toolbar/toolbar.d.ts +5 -4
- package/dist/toolbar/toolbar2.js +2 -2
- package/dist/toolbar/toolbar2.js.map +1 -1
- package/dist/tooltip/define.d.ts +1 -1
- package/dist/tooltip/tooltip.d.ts +4 -3
- package/dist/tooltip/tooltip.examples.js.map +1 -1
- package/dist/tooltip/tooltip.examples.json +9 -0
- package/dist/tooltip/tooltip2.js +2 -2
- package/dist/tree/define.d.ts +1 -1
- package/dist/tree/tree-node.d.ts +6 -6
- package/dist/tree/tree-node2.js +2 -2
- package/dist/tree/tree-node2.js.map +1 -1
- package/dist/tree/tree.d.ts +5 -4
- package/dist/tree/tree2.js +2 -2
- package/dist/tree/tree2.js.map +1 -1
- package/dist/week/define.d.ts +1 -1
- package/dist/week/week.d.ts +5 -5
- package/dist/week/week2.js +2 -2
- package/package.json +21 -9
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LitElement, PropertyValues } from 'lit';
|
|
1
|
+
import { LitElement, type PropertyValues } from 'lit';
|
|
2
2
|
/**
|
|
3
3
|
* @element nve-skeleton
|
|
4
4
|
* @description A loading placeholder component that displays animated placeholder shapes while content loads.
|
|
@@ -12,7 +12,7 @@ import { LitElement, PropertyValues } from 'lit';
|
|
|
12
12
|
*/
|
|
13
13
|
export declare class Skeleton extends LitElement {
|
|
14
14
|
#private;
|
|
15
|
-
static styles: import(
|
|
15
|
+
static styles: import("lit").CSSResult[];
|
|
16
16
|
static readonly metadata: {
|
|
17
17
|
tag: string;
|
|
18
18
|
version: string;
|
|
@@ -25,7 +25,7 @@ export declare class Skeleton extends LitElement {
|
|
|
25
25
|
hidden: boolean;
|
|
26
26
|
/** @private */
|
|
27
27
|
_internals: ElementInternals;
|
|
28
|
-
render(): import(
|
|
28
|
+
render(): import("lit").TemplateResult<1>;
|
|
29
29
|
connectedCallback(): void;
|
|
30
30
|
updated(props: PropertyValues<this>): void;
|
|
31
31
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { attachInternals as e } from "../internal/utils/a11y.js";
|
|
2
2
|
import { useStyles as t } from "../internal/styles/index.js";
|
|
3
|
-
import
|
|
3
|
+
import n from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
|
|
4
4
|
import r from "./skeleton.js";
|
|
5
5
|
import { LitElement as i, html as a } from "lit";
|
|
6
6
|
import { property as o } from "lit/decorators/property.js";
|
|
@@ -15,7 +15,7 @@ var s = class extends i {
|
|
|
15
15
|
static {
|
|
16
16
|
this.metadata = {
|
|
17
17
|
tag: "nve-skeleton",
|
|
18
|
-
version: "2.0
|
|
18
|
+
version: "2.1.0"
|
|
19
19
|
};
|
|
20
20
|
}
|
|
21
21
|
render() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton2.js","names":["#slotchange"],"sources":["../../src/skeleton/skeleton.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { attachInternals, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './skeleton.css?inline';\n\n/**\n * @element nve-skeleton\n * @description A loading placeholder component that displays animated placeholder shapes while content loads.\n * @since 1.44.0\n * @entrypoint \\@nvidia-elements/core/skeleton\n * @slot - default content slot\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --min-height\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live\n */\nexport class Skeleton extends LitElement {\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-skeleton',\n version: '0.0.0'\n };\n\n /** Visual animation style shown while content loads. */\n @property({ type: String, reflect: true }) effect: 'shimmer' | 'pulse';\n\n /** Geometry of the placeholder — rounded corners or a full pill outline. */\n @property({ type: String, reflect: true }) shape: 'round' | 'pill';\n\n /** Whether the skeleton hides its content */\n @property({ type: Boolean, reflect: true }) hidden = false;\n\n /** @private */\n declare _internals: ElementInternals;\n\n render() {\n return html`\n <div internal-host>\n <div class=\"animate\"></div>\n <slot @slotchange=${this.#slotchange}></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.ariaBusy = 'true';\n }\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n this._internals.ariaBusy = `${!this.hidden}`;\n }\n\n #slotchange(event: Event) {\n const target = event.target as HTMLSlotElement;\n const hasContent = target\n .assignedNodes()\n .some(\n node =>\n node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '')\n );\n\n if (hasContent) {\n this._internals.states.add('slotted');\n } else {\n this._internals.states.delete('slotted');\n }\n }\n}\n"],"mappings":";;;;;;;AAmBA,IAAa,IAAb,cAA8B,EAAW;;6BAec;;;gBAdrC,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;EACX;;CAcA,SAAS;EACP,OAAO,CAAI,oEAGa,KAAKA,GAAY;CAG3C;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,WAAW;CAC7B;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACnB,KAAK,WAAW,WAAW,GAAG,CAAC,KAAK;CACtC;CAEA,GAAY,GAAc;EASxB,AARe,EAAM,OAElB,cAAc,
|
|
1
|
+
{"version":3,"file":"skeleton2.js","names":["#slotchange"],"sources":["../../src/skeleton/skeleton.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { attachInternals, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './skeleton.css?inline';\n\n/**\n * @element nve-skeleton\n * @description A loading placeholder component that displays animated placeholder shapes while content loads.\n * @since 1.44.0\n * @entrypoint \\@nvidia-elements/core/skeleton\n * @slot - default content slot\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --min-height\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live\n */\nexport class Skeleton extends LitElement {\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-skeleton',\n version: '0.0.0'\n };\n\n /** Visual animation style shown while content loads. */\n @property({ type: String, reflect: true }) effect: 'shimmer' | 'pulse';\n\n /** Geometry of the placeholder — rounded corners or a full pill outline. */\n @property({ type: String, reflect: true }) shape: 'round' | 'pill';\n\n /** Whether the skeleton hides its content */\n @property({ type: Boolean, reflect: true }) hidden = false;\n\n /** @private */\n declare _internals: ElementInternals;\n\n render() {\n return html`\n <div internal-host>\n <div class=\"animate\"></div>\n <slot @slotchange=${this.#slotchange}></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.ariaBusy = 'true';\n }\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n this._internals.ariaBusy = `${!this.hidden}`;\n }\n\n #slotchange(event: Event) {\n const target = event.target as HTMLSlotElement;\n const hasContent = target\n .assignedNodes()\n .some(\n node =>\n node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '')\n );\n\n if (hasContent) {\n this._internals.states.add('slotted');\n } else {\n this._internals.states.delete('slotted');\n }\n }\n}\n"],"mappings":";;;;;;;AAmBA,IAAa,IAAb,cAA8B,EAAW;;6BAec;;;gBAdrC,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;EACX;;CAcA,SAAS;EACP,OAAO,CAAI,oEAGa,KAAKA,GAAY;CAG3C;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,WAAW;CAC7B;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACnB,KAAK,WAAW,WAAW,GAAG,CAAC,KAAK;CACtC;CAEA,GAAY,GAAc;EASxB,AARe,EAAM,OAElB,cAAc,CAAC,CACf,MACC,MACE,EAAK,aAAa,KAAK,gBAAiB,EAAK,aAAa,KAAK,aAAa,EAAK,aAAa,KAAK,MAAM,EAG3G,IACF,KAAK,WAAW,OAAO,IAAI,SAAS,IAEpC,KAAK,WAAW,OAAO,OAAO,SAAS;CAE3C;AACF;GA9CG,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;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
import { Icon } from '
|
|
3
|
-
declare const SortButton_base: import(
|
|
2
|
+
import { Icon } from '@nvidia-elements/core/icon';
|
|
3
|
+
declare const SortButton_base: import("@nvidia-elements/forms/mixins").ButtonFormControlMixinReturn<typeof LitElement>;
|
|
4
4
|
/**
|
|
5
5
|
* @element nve-sort-button
|
|
6
6
|
* @description A sort button is a control that enables users to sort a list of items in ascending or descending order.
|
|
@@ -16,7 +16,7 @@ declare const SortButton_base: import('@nvidia-elements/forms/mixins').ButtonFor
|
|
|
16
16
|
*/
|
|
17
17
|
export declare class SortButton extends SortButton_base {
|
|
18
18
|
#private;
|
|
19
|
-
static styles: import(
|
|
19
|
+
static styles: import("lit").CSSResult[];
|
|
20
20
|
static readonly metadata: {
|
|
21
21
|
tag: string;
|
|
22
22
|
version: string;
|
|
@@ -31,10 +31,10 @@ export declare class SortButton extends SortButton_base {
|
|
|
31
31
|
/**
|
|
32
32
|
* Updates internal string values for internationalization.
|
|
33
33
|
*/
|
|
34
|
-
i18n: Partial<import(
|
|
34
|
+
i18n: Partial<import("@nvidia-elements/core/internal").I18nStrings & {
|
|
35
35
|
__set: boolean;
|
|
36
36
|
}>;
|
|
37
|
-
render(): import(
|
|
37
|
+
render(): import("lit").TemplateResult<1>;
|
|
38
38
|
constructor();
|
|
39
39
|
connectedCallback(): void;
|
|
40
40
|
disconnectedCallback(): void;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { I18nController as e } from "../internal/controllers/i18n.controller.js";
|
|
2
2
|
import { scopedRegistry as t } from "../internal/decorators/scoped-registry.js";
|
|
3
3
|
import { useStyles as n } from "../internal/styles/index.js";
|
|
4
|
-
import
|
|
4
|
+
import r from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
|
|
5
5
|
import { Icon as i } from "../icon/icon2.js";
|
|
6
6
|
import a from "./sort-button.js";
|
|
7
7
|
import { LitElement as o, html as s } from "lit";
|
|
@@ -19,7 +19,7 @@ var u = {
|
|
|
19
19
|
static {
|
|
20
20
|
this.metadata = {
|
|
21
21
|
tag: "nve-sort-button",
|
|
22
|
-
version: "2.0
|
|
22
|
+
version: "2.1.0"
|
|
23
23
|
};
|
|
24
24
|
}
|
|
25
25
|
static {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sort-button2.js","names":["#i18nController","#onClick"],"sources":["../../src/sort-button/sort-button.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { useStyles, I18nController, scopedRegistry } from '@nvidia-elements/core/internal';\nimport styles from './sort-button.css?inline';\n\nconst nextSort = {\n none: 'ascending',\n ascending: 'descending',\n descending: 'none'\n};\n\n/**\n * @element nve-sort-button\n * @description A sort button is a control that enables users to sort a list of items in ascending or descending order.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/sort-button\n * @event sort - Dispatched on sort button click, returns the current sort value and the next sort value.\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border-radius\n * @cssprop --color\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/\n */\n@scopedRegistry()\nexport class SortButton extends ButtonFormControlMixin(LitElement) {\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-sort-button',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Icon.metadata.tag]: Icon\n };\n\n /**\n * The current sort value, can be ascending, descending, or none.\n */\n @property({ type: String, reflect: true }) sort: 'ascending' | 'descending' | 'none' = 'none';\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /**\n * Updates internal string values for internationalization.\n */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n render() {\n return html`\n <div internal-host focus-within>\n <nve-icon part=\"icon\" .name=${this.sort === 'descending' ? 'sort-descending' : 'sort-ascending'} aria-hidden=\"true\"></nve-icon>\n </div>\n `;\n }\n\n constructor() {\n super();\n this.type = 'button';\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._internals.role = 'spinbutton';\n this.addEventListener('click', this.#onClick);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.#onClick);\n }\n\n #onClick = () => {\n this._internals.ariaLabel = `${this.#i18nController.i18n.sort} ${nextSort[this.sort]}`;\n this.dispatchEvent(\n new CustomEvent('sort', {\n detail: { value: this.sort, next: nextSort[this.sort] },\n bubbles: true,\n composed: true\n })\n );\n };\n}\n"],"mappings":";;;;;;;;;;AAUA,IAAM,IAAW;CACf,MAAM;CACN,WAAW;CACX,YAAY;AACd,GAgBO,IAAA,cAAyB,EAAuB,CAAU,
|
|
1
|
+
{"version":3,"file":"sort-button2.js","names":["#i18nController","#onClick"],"sources":["../../src/sort-button/sort-button.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { useStyles, I18nController, scopedRegistry } from '@nvidia-elements/core/internal';\nimport styles from './sort-button.css?inline';\n\nconst nextSort = {\n none: 'ascending',\n ascending: 'descending',\n descending: 'none'\n};\n\n/**\n * @element nve-sort-button\n * @description A sort button is a control that enables users to sort a list of items in ascending or descending order.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/sort-button\n * @event sort - Dispatched on sort button click, returns the current sort value and the next sort value.\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border-radius\n * @cssprop --color\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/\n */\n@scopedRegistry()\nexport class SortButton extends ButtonFormControlMixin(LitElement) {\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-sort-button',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Icon.metadata.tag]: Icon\n };\n\n /**\n * The current sort value, can be ascending, descending, or none.\n */\n @property({ type: String, reflect: true }) sort: 'ascending' | 'descending' | 'none' = 'none';\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /**\n * Updates internal string values for internationalization.\n */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n render() {\n return html`\n <div internal-host focus-within>\n <nve-icon part=\"icon\" .name=${this.sort === 'descending' ? 'sort-descending' : 'sort-ascending'} aria-hidden=\"true\"></nve-icon>\n </div>\n `;\n }\n\n constructor() {\n super();\n this.type = 'button';\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._internals.role = 'spinbutton';\n this.addEventListener('click', this.#onClick);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.#onClick);\n }\n\n #onClick = () => {\n this._internals.ariaLabel = `${this.#i18nController.i18n.sort} ${nextSort[this.sort]}`;\n this.dispatchEvent(\n new CustomEvent('sort', {\n detail: { value: this.sort, next: nextSort[this.sort] },\n bubbles: true,\n composed: true\n })\n );\n };\n}\n"],"mappings":";;;;;;;;;;AAUA,IAAM,IAAW;CACf,MAAM;CACN,WAAW;CACX,YAAY;AACd,GAgBO,IAAA,cAAyB,EAAuB,CAAU,CAAC,CAAC;;gBACjD,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAK,SAAS,MAAM,EACvB;;CAOA;CAOA,SAAS;EACP,OAAO,CAAI,gEAEuB,KAAK,SAAS,eAAe,oBAAoB,iBAAiB;CAGtG;CAEA,cAAc;EAEZ,AADA,MAAM,eAlB+E,kBAE/C,IAAI,EAAqB,IAAI,eAKlC,KAAKA,GAAgB,sBA0BvC;GAEf,AADA,KAAK,WAAW,YAAY,GAAG,KAAKA,GAAgB,KAAK,KAAK,GAAG,EAAS,KAAK,SAC/E,KAAK,cACH,IAAI,YAAY,QAAQ;IACtB,QAAQ;KAAE,OAAO,KAAK;KAAM,MAAM,EAAS,KAAK;IAAM;IACtD,SAAS;IACT,UAAU;GACZ,CAAC,CACH;EACF,GAvBE,KAAK,OAAO;CACd;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,KAAK,WAAW,OAAO,cACvB,KAAK,iBAAiB,SAAS,KAAKC,EAAQ;CAC9C;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAKA,EAAQ;CACjD;CAEA;AAUF;GA3CG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAOxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAvB3B,EAAe,CAAA,GAAA,CAAA"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { PropertyValues
|
|
2
|
-
import {
|
|
1
|
+
import type { PropertyValues } from 'lit';
|
|
2
|
+
import { LitElement } from 'lit';
|
|
3
|
+
import type { DataElement, Interpolation, SizeExpanded, SparklineMark, SupportStatus, TaskStatus } from '@nvidia-elements/core/internal';
|
|
3
4
|
/**
|
|
4
5
|
* @element nve-sparkline
|
|
5
6
|
* @description A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).
|
|
@@ -24,7 +25,7 @@ import { DataElement, Interpolation, SizeExpanded, SparklineMark, SupportStatus,
|
|
|
24
25
|
*/
|
|
25
26
|
export declare class Sparkline extends LitElement implements DataElement<number[]> {
|
|
26
27
|
#private;
|
|
27
|
-
static styles: import(
|
|
28
|
+
static styles: import("lit").CSSResult[];
|
|
28
29
|
static readonly metadata: {
|
|
29
30
|
tag: string;
|
|
30
31
|
version: string;
|
|
@@ -57,7 +58,7 @@ export declare class Sparkline extends LitElement implements DataElement<number[
|
|
|
57
58
|
private validData;
|
|
58
59
|
/** @private */
|
|
59
60
|
_internals: ElementInternals;
|
|
60
|
-
render(): import(
|
|
61
|
+
render(): import("lit").TemplateResult<1>;
|
|
61
62
|
connectedCallback(): void;
|
|
62
63
|
willUpdate(changedProperties: PropertyValues<this>): void;
|
|
63
64
|
updated(props: PropertyValues<this>): void;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Dimensions, Interpolation, Point, Rect, Scale, SparklineMark } from '
|
|
1
|
+
import type { Dimensions, Interpolation, Point, Rect, Scale, SparklineMark } from '@nvidia-elements/core/internal';
|
|
2
2
|
export declare const PRECISION = 2;
|
|
3
3
|
export declare const VIEW_HEIGHT = 100;
|
|
4
4
|
export declare function toValidData(data: unknown): number[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sparkline.utils.js","names":[],"sources":["../../src/sparkline/sparkline.utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { Dimensions, Interpolation, Point, Rect, Scale, SparklineMark } from '@nvidia-elements/core/internal';\n\nexport const PRECISION = 2;\nexport const VIEW_HEIGHT = 100;\nconst DEFAULT_INTERVAL_LENGTH_EM = 0.6;\n\nconst HORIZONTAL_UNIT_WIDTH = VIEW_HEIGHT * DEFAULT_INTERVAL_LENGTH_EM;\nconst COLUMN_GAP_RATIO = 0.7;\nconst WINLOSS_GAP_RATIO = 0.85;\n\nexport function toValidData(data: unknown): number[] {\n if (!Array.isArray(data)) return [];\n return data.filter(Number.isFinite);\n}\n\nexport function calculateViewBox(\n mark: SparklineMark,\n pointCount: number,\n intervalLength = DEFAULT_INTERVAL_LENGTH_EM\n): Dimensions {\n const isIntervalBased = mark === 'line' || mark === 'area' || mark === 'gradient';\n const widthUnitCount = isIntervalBased ? Math.max(pointCount - 1, 1) : pointCount;\n const normalizedIntervalLength =\n Number.isFinite(intervalLength) && intervalLength > 0 ? intervalLength : DEFAULT_INTERVAL_LENGTH_EM;\n const width =\n mark === 'line' ? widthUnitCount * VIEW_HEIGHT * normalizedIntervalLength : widthUnitCount * HORIZONTAL_UNIT_WIDTH;\n\n return {\n width,\n height: VIEW_HEIGHT\n };\n}\n\nexport function calculateDomain(\n values: number[],\n options: { explicitMin?: number; explicitMax?: number; includeZero?: boolean } = {}\n): Scale | undefined {\n if (values.length === 0) return undefined;\n const { explicitMin, explicitMax, includeZero = false } = options;\n\n const dataMinimum = Math.min(...values);\n const dataMaximum = Math.max(...values);\n\n return {\n min: explicitMin ?? (includeZero ? Math.min(dataMinimum, 0) : dataMinimum),\n max: explicitMax ?? (includeZero ? Math.max(dataMaximum, 0) : dataMaximum)\n };\n}\n\nexport function valueToY(value: number, range: { min: number; max: number }, viewHeight = VIEW_HEIGHT): number {\n const span = range.max - range.min;\n if (span === 0) return viewHeight / 2;\n return viewHeight - ((value - range.min) / span) * viewHeight;\n}\n\nexport function toPlotPoints(\n values: number[],\n range: { min: number; max: number },\n view: { width: number; height?: number }\n): Point[] {\n const viewHeight = view.height ?? VIEW_HEIGHT;\n const stepX = values.length > 1 ? view.width / (values.length - 1) : 0;\n return values.map((value, index) => ({\n x: index * stepX,\n y: valueToY(value, range, viewHeight)\n }));\n}\n\nexport function calculateSymbolIndices(\n values: number[],\n denote: { first: boolean; last: boolean; min: boolean; max: boolean }\n): Set<number> {\n const indices = new Set<number>();\n if (values.length === 0) return indices;\n\n if (denote.first) indices.add(0);\n if (denote.last) indices.add(values.length - 1);\n\n const needsExtrema = denote.min || denote.max;\n if (!needsExtrema) return indices;\n\n const min = Math.min(...values);\n const max = Math.max(...values);\n\n values.forEach((value, index) => {\n if (denote.min && value === min) indices.add(index);\n if (denote.max && value === max) indices.add(index);\n });\n\n return indices;\n}\n\nexport function toInterpolation(interpolation: unknown): Interpolation {\n switch (interpolation) {\n case 'linear':\n return 'linear';\n case 'smooth':\n return 'smooth';\n case 'step':\n return 'step';\n default: {\n return 'linear';\n }\n }\n}\n\nexport function toLinePath(points: Point[], interpolation: Interpolation, viewWidth: number): string {\n if (points.length === 0) return '';\n if (points.length === 1) {\n const y = points[0]!.y.toFixed(PRECISION);\n return `M 0 ${y} L ${viewWidth.toFixed(PRECISION)} ${y}`;\n }\n\n switch (interpolation) {\n case 'step':\n return toStepOpenPath(points);\n case 'smooth':\n return toSmoothOpenPath(points);\n case 'linear':\n return toLinearOpenPath(points);\n default:\n return toLinearOpenPath(points);\n }\n}\n\nexport function toAreaPath(points: Point[], interpolation: Interpolation, viewHeight = VIEW_HEIGHT): string {\n if (points.length === 0) return '';\n\n let openPath = '';\n switch (interpolation) {\n case 'step':\n openPath = toStepOpenPath(points);\n break;\n case 'smooth':\n openPath = toSmoothOpenPath(points);\n break;\n case 'linear':\n openPath = toLinearOpenPath(points);\n break;\n default:\n openPath = toLinearOpenPath(points);\n break;\n }\n\n const last = points[points.length - 1]!;\n const first = points[0]!;\n openPath += ` L ${last.x.toFixed(PRECISION)} ${viewHeight.toFixed(PRECISION)}`;\n openPath += ` L ${first.x.toFixed(PRECISION)} ${viewHeight.toFixed(PRECISION)} Z`;\n return openPath;\n}\n\nexport function toColumnRects(points: Point[], baselineY: number, width: number): Rect[] {\n const { bandSize: bandWidth, stepSize: stepX } = calculateBandSizing(points.length, width, COLUMN_GAP_RATIO);\n\n return points.map((point, index) => {\n const x = index * stepX + (stepX - bandWidth) / 2;\n const height = Math.abs(point.y - baselineY);\n const y = Math.min(point.y, baselineY);\n return { x, y, width: bandWidth, height };\n });\n}\n\nexport function toWinLossRects(\n values: number[],\n baselineY: number,\n dimensions: { width: number; height: number }\n): (Rect & { className: 'win' | 'loss' | 'draw' })[] {\n const { bandSize: bandWidth, stepSize: stepX } = calculateBandSizing(\n values.length,\n dimensions.width,\n WINLOSS_GAP_RATIO\n );\n const barHeight = dimensions.height / 2;\n\n return values.map((value, index) => {\n const x = index * stepX + (stepX - bandWidth) / 2;\n\n if (value > 0) {\n return { className: 'win', x, y: baselineY - barHeight, width: bandWidth, height: barHeight };\n }\n\n if (value < 0) {\n return { className: 'loss', x, y: baselineY, width: bandWidth, height: barHeight };\n }\n\n return {\n className: 'draw',\n x,\n y: baselineY - barHeight / 4,\n width: bandWidth,\n height: barHeight / 2\n };\n });\n}\n\nfunction toLinearOpenPath(points: Point[]): string {\n return points.reduce((path, point, index) => {\n if (index === 0) {\n return `M ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n }\n return `${path} L ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n }, '');\n}\n\nfunction toSmoothOpenPath(points: Point[]): string {\n const segments = points.map((point, index) => {\n if (index === 0) {\n return `M ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n }\n const previous = points[index - 1]!;\n const deltaX = (point.x - previous.x) / 3;\n const p = PRECISION;\n return `C ${(previous.x + deltaX).toFixed(p)} ${previous.y.toFixed(p)} ${(point.x - deltaX).toFixed(p)} ${point.y.toFixed(p)} ${point.x.toFixed(p)} ${point.y.toFixed(p)}`;\n });\n return segments.join(' ');\n}\n\nfunction toStepOpenPath(points: Point[]): string {\n let path = `M ${points[0]!.x.toFixed(PRECISION)} ${points[0]!.y.toFixed(PRECISION)}`;\n for (let index = 1; index < points.length; index++) {\n const point = points[index]!;\n path += ` H ${point.x.toFixed(PRECISION)} V ${point.y.toFixed(PRECISION)}`;\n }\n return path;\n}\n\nfunction calculateBandSizing(count: number, viewDimension: number, gapRatio: number) {\n if (count <= 0) return { bandSize: 0, stepSize: 0 };\n\n const stepSize = viewDimension / count;\n const bandSize = stepSize * gapRatio;\n return { bandSize, stepSize };\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sparkline.utils.js","names":[],"sources":["../../src/sparkline/sparkline.utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { Dimensions, Interpolation, Point, Rect, Scale, SparklineMark } from '@nvidia-elements/core/internal';\n\nexport const PRECISION = 2;\nexport const VIEW_HEIGHT = 100;\nconst DEFAULT_INTERVAL_LENGTH_EM = 0.6;\n\nconst HORIZONTAL_UNIT_WIDTH = VIEW_HEIGHT * DEFAULT_INTERVAL_LENGTH_EM;\nconst COLUMN_GAP_RATIO = 0.7;\nconst WINLOSS_GAP_RATIO = 0.85;\n\nexport function toValidData(data: unknown): number[] {\n if (!Array.isArray(data)) return [];\n return data.filter(Number.isFinite);\n}\n\nexport function calculateViewBox(\n mark: SparklineMark,\n pointCount: number,\n intervalLength = DEFAULT_INTERVAL_LENGTH_EM\n): Dimensions {\n const isIntervalBased = mark === 'line' || mark === 'area' || mark === 'gradient';\n const widthUnitCount = isIntervalBased ? Math.max(pointCount - 1, 1) : pointCount;\n const normalizedIntervalLength =\n Number.isFinite(intervalLength) && intervalLength > 0 ? intervalLength : DEFAULT_INTERVAL_LENGTH_EM;\n const width =\n mark === 'line' ? widthUnitCount * VIEW_HEIGHT * normalizedIntervalLength : widthUnitCount * HORIZONTAL_UNIT_WIDTH;\n\n return {\n width,\n height: VIEW_HEIGHT\n };\n}\n\nexport function calculateDomain(\n values: number[],\n options: { explicitMin?: number; explicitMax?: number; includeZero?: boolean } = {}\n): Scale | undefined {\n if (values.length === 0) return undefined;\n const { explicitMin, explicitMax, includeZero = false } = options;\n\n const dataMinimum = Math.min(...values);\n const dataMaximum = Math.max(...values);\n\n return {\n min: explicitMin ?? (includeZero ? Math.min(dataMinimum, 0) : dataMinimum),\n max: explicitMax ?? (includeZero ? Math.max(dataMaximum, 0) : dataMaximum)\n };\n}\n\nexport function valueToY(value: number, range: { min: number; max: number }, viewHeight = VIEW_HEIGHT): number {\n const span = range.max - range.min;\n if (span === 0) return viewHeight / 2;\n return viewHeight - ((value - range.min) / span) * viewHeight;\n}\n\nexport function toPlotPoints(\n values: number[],\n range: { min: number; max: number },\n view: { width: number; height?: number }\n): Point[] {\n const viewHeight = view.height ?? VIEW_HEIGHT;\n const stepX = values.length > 1 ? view.width / (values.length - 1) : 0;\n return values.map((value, index) => ({\n x: index * stepX,\n y: valueToY(value, range, viewHeight)\n }));\n}\n\nexport function calculateSymbolIndices(\n values: number[],\n denote: { first: boolean; last: boolean; min: boolean; max: boolean }\n): Set<number> {\n const indices = new Set<number>();\n if (values.length === 0) return indices;\n\n if (denote.first) indices.add(0);\n if (denote.last) indices.add(values.length - 1);\n\n const needsExtrema = denote.min || denote.max;\n if (!needsExtrema) return indices;\n\n const min = Math.min(...values);\n const max = Math.max(...values);\n\n values.forEach((value, index) => {\n if (denote.min && value === min) indices.add(index);\n if (denote.max && value === max) indices.add(index);\n });\n\n return indices;\n}\n\nexport function toInterpolation(interpolation: unknown): Interpolation {\n switch (interpolation) {\n case 'linear':\n return 'linear';\n case 'smooth':\n return 'smooth';\n case 'step':\n return 'step';\n default: {\n return 'linear';\n }\n }\n}\n\nexport function toLinePath(points: Point[], interpolation: Interpolation, viewWidth: number): string {\n if (points.length === 0) return '';\n if (points.length === 1) {\n const y = points[0]!.y.toFixed(PRECISION);\n return `M 0 ${y} L ${viewWidth.toFixed(PRECISION)} ${y}`;\n }\n\n switch (interpolation) {\n case 'step':\n return toStepOpenPath(points);\n case 'smooth':\n return toSmoothOpenPath(points);\n case 'linear':\n return toLinearOpenPath(points);\n default:\n return toLinearOpenPath(points);\n }\n}\n\nexport function toAreaPath(points: Point[], interpolation: Interpolation, viewHeight = VIEW_HEIGHT): string {\n if (points.length === 0) return '';\n\n let openPath = '';\n switch (interpolation) {\n case 'step':\n openPath = toStepOpenPath(points);\n break;\n case 'smooth':\n openPath = toSmoothOpenPath(points);\n break;\n case 'linear':\n openPath = toLinearOpenPath(points);\n break;\n default:\n openPath = toLinearOpenPath(points);\n break;\n }\n\n const last = points[points.length - 1]!;\n const first = points[0]!;\n openPath += ` L ${last.x.toFixed(PRECISION)} ${viewHeight.toFixed(PRECISION)}`;\n openPath += ` L ${first.x.toFixed(PRECISION)} ${viewHeight.toFixed(PRECISION)} Z`;\n return openPath;\n}\n\nexport function toColumnRects(points: Point[], baselineY: number, width: number): Rect[] {\n const { bandSize: bandWidth, stepSize: stepX } = calculateBandSizing(points.length, width, COLUMN_GAP_RATIO);\n\n return points.map((point, index) => {\n const x = index * stepX + (stepX - bandWidth) / 2;\n const height = Math.abs(point.y - baselineY);\n const y = Math.min(point.y, baselineY);\n return { x, y, width: bandWidth, height };\n });\n}\n\nexport function toWinLossRects(\n values: number[],\n baselineY: number,\n dimensions: { width: number; height: number }\n): (Rect & { className: 'win' | 'loss' | 'draw' })[] {\n const { bandSize: bandWidth, stepSize: stepX } = calculateBandSizing(\n values.length,\n dimensions.width,\n WINLOSS_GAP_RATIO\n );\n const barHeight = dimensions.height / 2;\n\n return values.map((value, index) => {\n const x = index * stepX + (stepX - bandWidth) / 2;\n\n if (value > 0) {\n return { className: 'win', x, y: baselineY - barHeight, width: bandWidth, height: barHeight };\n }\n\n if (value < 0) {\n return { className: 'loss', x, y: baselineY, width: bandWidth, height: barHeight };\n }\n\n return {\n className: 'draw',\n x,\n y: baselineY - barHeight / 4,\n width: bandWidth,\n height: barHeight / 2\n };\n });\n}\n\nfunction toLinearOpenPath(points: Point[]): string {\n return points.reduce((path, point, index) => {\n if (index === 0) {\n return `M ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n }\n return `${path} L ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n }, '');\n}\n\nfunction toSmoothOpenPath(points: Point[]): string {\n const segments = points.map((point, index) => {\n if (index === 0) {\n return `M ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n }\n const previous = points[index - 1]!;\n const deltaX = (point.x - previous.x) / 3;\n const p = PRECISION;\n return `C ${(previous.x + deltaX).toFixed(p)} ${previous.y.toFixed(p)} ${(point.x - deltaX).toFixed(p)} ${point.y.toFixed(p)} ${point.x.toFixed(p)} ${point.y.toFixed(p)}`;\n });\n return segments.join(' ');\n}\n\nfunction toStepOpenPath(points: Point[]): string {\n let path = `M ${points[0]!.x.toFixed(PRECISION)} ${points[0]!.y.toFixed(PRECISION)}`;\n for (let index = 1; index < points.length; index++) {\n const point = points[index]!;\n path += ` H ${point.x.toFixed(PRECISION)} V ${point.y.toFixed(PRECISION)}`;\n }\n return path;\n}\n\nfunction calculateBandSizing(count: number, viewDimension: number, gapRatio: number) {\n if (count <= 0) return { bandSize: 0, stepSize: 0 };\n\n const stepSize = viewDimension / count;\n const bandSize = stepSize * gapRatio;\n return { bandSize, stepSize };\n}\n"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { attachInternals as e } from "../internal/utils/a11y.js";
|
|
2
2
|
import { statusStateStyles as t, supportStateStyles as n, useStyles as r } from "../internal/styles/index.js";
|
|
3
|
-
import
|
|
3
|
+
import i from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
|
|
4
4
|
import { calculateDomain as a, calculateSymbolIndices as o, calculateViewBox as s, toAreaPath as c, toColumnRects as l, toInterpolation as u, toLinePath as d, toPlotPoints as f, toValidData as p, toWinLossRects as m, valueToY as h } from "./sparkline.utils.js";
|
|
5
5
|
import g from "./sparkline.js";
|
|
6
6
|
import { LitElement as _, html as v, nothing as y, svg as b } from "lit";
|
|
@@ -21,7 +21,7 @@ var C = class extends _ {
|
|
|
21
21
|
static {
|
|
22
22
|
this.metadata = {
|
|
23
23
|
tag: "nve-sparkline",
|
|
24
|
-
version: "2.0
|
|
24
|
+
version: "2.1.0"
|
|
25
25
|
};
|
|
26
26
|
}
|
|
27
27
|
render() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sparkline2.js","names":["#renderChart","#renderLineVariant","#renderColumn","#renderWinLoss","#renderGradientDef","#renderZeroLine","#renderAccents"],"sources":["../../src/sparkline/sparkline.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues, SVGTemplateResult } from 'lit';\nimport { html, LitElement, nothing, svg } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport type {\n DataElement,\n Interpolation,\n Point,\n SizeExpanded,\n SparklineMark,\n SupportStatus,\n TaskStatus\n} from '@nvidia-elements/core/internal';\nimport { attachInternals, statusStateStyles, supportStateStyles, useStyles } from '@nvidia-elements/core/internal';\nimport {\n calculateDomain,\n calculateSymbolIndices,\n calculateViewBox,\n PRECISION,\n toAreaPath,\n toColumnRects,\n toInterpolation,\n toLinePath,\n toPlotPoints,\n toValidData,\n toWinLossRects,\n valueToY,\n VIEW_HEIGHT\n} from './sparkline.utils.js';\nimport styles from './sparkline.css?inline';\n\n/**\n * @element nve-sparkline\n * @description A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/sparkline\n * @cssprop --height - Height (defaults to 1em and scales with parent font-size).\n * @cssprop --line-color\n * @cssprop --line-width\n * @cssprop --fill-color - Color used by area and column marks.\n * @cssprop --gradient-max-color\n * @cssprop --gradient-min-color\n * @cssprop --zero-line-color\n * @cssprop --zero-line-width\n * @cssprop --win-color Color used to represent positive values (wins).\n * @cssprop --loss-color Color used to represent negative values (losses).\n * @cssprop --draw-color Color used to represent zero values (draws / neutral outcomes).\n * @cssprop --symbol-color\n * @cssprop --symbol-border-color\n * @cssprop --symbol-border-width\n * @cssprop --symbol-radius - symbol circle radius in SVG units.\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n */\nexport class Sparkline extends LitElement implements DataElement<number[]> {\n static styles = useStyles([styles, statusStateStyles, supportStateStyles]);\n\n static readonly metadata = {\n tag: 'nve-sparkline',\n version: '0.0.0'\n };\n\n /** Numeric values representing a data series. */\n @property({ type: Array }) data: number[] = [];\n\n /** Controls the visual representation of data points. */\n @property({ type: String }) mark: SparklineMark = 'line';\n\n /** Controls how the chart connects intermediate values between points in a data series. Defaults to `linear`. */\n @property({ type: String }) interpolation: Interpolation = 'linear';\n\n /** Applies semantic status colors used across Elements status patterns. */\n @property({ type: String, reflect: true }) status?: TaskStatus | SupportStatus;\n\n /** Controls the sparkline size with explicit font-size tokens. Omit to auto-scale with parent font-size (1em). */\n @property({ type: String, reflect: true }) size?: SizeExpanded;\n\n /** Denotes the first data point by rendering a symbol at its position. */\n @property({ type: Boolean, attribute: 'denote-first', reflect: true })\n denoteFirst = false;\n\n /** Denotes the last data point by rendering a symbol at its position. */\n @property({ type: Boolean, attribute: 'denote-last', reflect: true })\n denoteLast = false;\n\n /** Denotes all minimum-value data points by rendering symbols at their positions. */\n @property({ type: Boolean, attribute: 'denote-min', reflect: true })\n denoteMin = false;\n\n /** Denotes all maximum-value data points by rendering symbols at their positions. */\n @property({ type: Boolean, attribute: 'denote-max', reflect: true })\n denoteMax = false;\n\n /** Controls spacing between points in a line, in em (1 = chart height). Defaults to `0.6`. */\n @property({ type: Number, attribute: 'interval-length' }) intervalLength = 0.6;\n\n /** Lower bound for the y-axis domain. When undefined, derives the bound from data. */\n @property({ type: Number }) min?: number;\n\n /** Upper bound for the y-axis domain. When undefined, derives the bound from data. */\n @property({ type: Number }) max?: number;\n\n /** Cached valid numeric values derived from data property. */\n @state() private validData: number[] = [];\n\n /** @private */\n declare _internals: ElementInternals;\n\n render() {\n return html`<div internal-host>${this.#renderChart()}</div>`;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'img';\n }\n\n willUpdate(changedProperties: PropertyValues<this>) {\n super.willUpdate(changedProperties);\n\n if (changedProperties.has('data')) {\n this.validData = toValidData(this.data);\n }\n }\n\n #renderChart(): SVGTemplateResult | typeof nothing {\n const { width, height } = calculateViewBox(this.mark, this.validData.length, this.intervalLength);\n\n switch (this.mark) {\n case 'line':\n case 'area':\n case 'gradient':\n return this.#renderLineVariant(width, height);\n case 'column':\n return this.#renderColumn(width, height);\n case 'winloss':\n return this.#renderWinLoss(VIEW_HEIGHT / 2, width, height);\n default:\n const _exhaustiveCheck: never = this.mark;\n return nothing;\n }\n }\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n\n const { width, height } = calculateViewBox(this.mark, this.validData.length, this.intervalLength);\n const aspectRatio = width / height;\n const validAspectRatio = Number.isFinite(aspectRatio) && aspectRatio > 0 ? aspectRatio : 1;\n this.style.setProperty('--_aspect-ratio', validAspectRatio.toFixed(4));\n }\n\n #renderLineVariant(width: number, height: number) {\n const domain = calculateDomain(this.validData, { explicitMin: this.min, explicitMax: this.max });\n if (!domain) return nothing;\n\n const baselineY = valueToY(0, domain);\n const drawZeroLine = domain.min < 0 && domain.max > 0;\n\n const plotPoints = toPlotPoints(this.validData, domain, { width });\n const symbolIndices = calculateSymbolIndices(this.validData, {\n first: this.denoteFirst,\n last: this.denoteLast,\n min: this.denoteMin,\n max: this.denoteMax\n });\n const interpolation = toInterpolation(this.interpolation);\n\n const linePath = toLinePath(plotPoints, interpolation, width);\n const drawArea = this.mark === 'area' || this.mark === 'gradient';\n const areaPath = drawArea ? toAreaPath(plotPoints, interpolation, VIEW_HEIGHT) : '';\n\n return svg`\n <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n ${this.mark === 'gradient' ? this.#renderGradientDef(height) : nothing}\n\n ${\n areaPath.length\n ? this.mark === 'gradient'\n ? svg`<path class=\"area\" d=${areaPath} style=\"fill: url(#gradient)\"></path>`\n : svg`<path class=\"area\" d=${areaPath}></path>`\n : nothing\n }\n\n ${drawZeroLine ? this.#renderZeroLine(baselineY, width) : nothing}\n\n ${linePath ? svg`<path class=\"line\" d=${linePath} vector-effect=\"non-scaling-stroke\"></path>` : nothing}\n </svg>\n ${this.#renderAccents(plotPoints, symbolIndices)}\n `;\n }\n\n #renderGradientDef(height: number) {\n return svg`\n <defs>\n <linearGradient id=\"gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"${height}\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0%\" style=\"stop-color: var(--gradient-max-color)\"></stop>\n <stop offset=\"100%\" style=\"stop-color: var(--gradient-min-color)\"></stop>\n </linearGradient>\n </defs>\n `;\n }\n\n #renderZeroLine(position: number, width: number) {\n return svg`\n <line\n class=\"zero-line\"\n vector-effect=\"non-scaling-stroke\"\n x1=\"0\"\n y1=\"${position.toFixed(PRECISION)}\"\n x2=\"${width}\"\n y2=\"${position.toFixed(PRECISION)}\">\n </line>\n `;\n }\n\n #renderAccents(points: Point[], accentIndices: Set<number>) {\n if (points.length === 0 || accentIndices.size === 0) return nothing;\n\n return html`\n ${Array.from(accentIndices).map(index => {\n const point = points[index];\n if (!point) return nothing;\n\n const style = `--x: ${point.x.toFixed(PRECISION)}; --y: ${point.y.toFixed(PRECISION)}`;\n return html`\n <span style=${style} class=\"accent\"></span>\n `;\n })}\n `;\n }\n\n #renderColumn(width: number, height: number) {\n const domain = calculateDomain(this.validData, {\n explicitMin: this.min,\n explicitMax: this.max,\n includeZero: true\n });\n if (!domain) return nothing;\n\n const baselineY = valueToY(0, domain);\n const showZeroLine = domain.min < 0 && domain.max > 0;\n const plotPoints = toPlotPoints(this.validData, domain, { width });\n const rects = toColumnRects(plotPoints, baselineY, width);\n\n return svg`\n <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n ${showZeroLine ? this.#renderZeroLine(baselineY, width) : nothing}\n\n ${rects.map(rect => {\n return svg`<rect class=\"column\" x=\"${rect.x.toFixed(PRECISION)}\" y=\"${rect.y.toFixed(PRECISION)}\" width=\"${rect.width.toFixed(PRECISION)}\" height=\"${rect.height.toFixed(PRECISION)}\"></rect>`;\n })}\n </svg>\n `;\n }\n\n #renderWinLoss(baselineY: number, width: number, height: number) {\n if (this.validData.length === 0) return nothing;\n\n const rects = toWinLossRects(this.validData, baselineY, { width, height });\n\n return svg`\n <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n ${this.#renderZeroLine(baselineY, width)}\n\n ${rects.map(rect => {\n return svg`<rect class=\"${rect.className}\" x=\"${rect.x.toFixed(PRECISION)}\" y=\"${rect.y.toFixed(PRECISION)}\" width=\"${rect.width.toFixed(PRECISION)}\" height=\"${rect.height.toFixed(PRECISION)}\"></rect>`;\n })}\n </svg>\n `;\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sparkline2.js","names":["#renderChart","#renderLineVariant","#renderColumn","#renderWinLoss","#renderGradientDef","#renderZeroLine","#renderAccents"],"sources":["../../src/sparkline/sparkline.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues, SVGTemplateResult } from 'lit';\nimport { html, LitElement, nothing, svg } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport type {\n DataElement,\n Interpolation,\n Point,\n SizeExpanded,\n SparklineMark,\n SupportStatus,\n TaskStatus\n} from '@nvidia-elements/core/internal';\nimport { attachInternals, statusStateStyles, supportStateStyles, useStyles } from '@nvidia-elements/core/internal';\nimport {\n calculateDomain,\n calculateSymbolIndices,\n calculateViewBox,\n PRECISION,\n toAreaPath,\n toColumnRects,\n toInterpolation,\n toLinePath,\n toPlotPoints,\n toValidData,\n toWinLossRects,\n valueToY,\n VIEW_HEIGHT\n} from './sparkline.utils.js';\nimport styles from './sparkline.css?inline';\n\n/**\n * @element nve-sparkline\n * @description A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/sparkline\n * @cssprop --height - Height (defaults to 1em and scales with parent font-size).\n * @cssprop --line-color\n * @cssprop --line-width\n * @cssprop --fill-color - Color used by area and column marks.\n * @cssprop --gradient-max-color\n * @cssprop --gradient-min-color\n * @cssprop --zero-line-color\n * @cssprop --zero-line-width\n * @cssprop --win-color Color used to represent positive values (wins).\n * @cssprop --loss-color Color used to represent negative values (losses).\n * @cssprop --draw-color Color used to represent zero values (draws / neutral outcomes).\n * @cssprop --symbol-color\n * @cssprop --symbol-border-color\n * @cssprop --symbol-border-width\n * @cssprop --symbol-radius - symbol circle radius in SVG units.\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n */\nexport class Sparkline extends LitElement implements DataElement<number[]> {\n static styles = useStyles([styles, statusStateStyles, supportStateStyles]);\n\n static readonly metadata = {\n tag: 'nve-sparkline',\n version: '0.0.0'\n };\n\n /** Numeric values representing a data series. */\n @property({ type: Array }) data: number[] = [];\n\n /** Controls the visual representation of data points. */\n @property({ type: String }) mark: SparklineMark = 'line';\n\n /** Controls how the chart connects intermediate values between points in a data series. Defaults to `linear`. */\n @property({ type: String }) interpolation: Interpolation = 'linear';\n\n /** Applies semantic status colors used across Elements status patterns. */\n @property({ type: String, reflect: true }) status?: TaskStatus | SupportStatus;\n\n /** Controls the sparkline size with explicit font-size tokens. Omit to auto-scale with parent font-size (1em). */\n @property({ type: String, reflect: true }) size?: SizeExpanded;\n\n /** Denotes the first data point by rendering a symbol at its position. */\n @property({ type: Boolean, attribute: 'denote-first', reflect: true })\n denoteFirst = false;\n\n /** Denotes the last data point by rendering a symbol at its position. */\n @property({ type: Boolean, attribute: 'denote-last', reflect: true })\n denoteLast = false;\n\n /** Denotes all minimum-value data points by rendering symbols at their positions. */\n @property({ type: Boolean, attribute: 'denote-min', reflect: true })\n denoteMin = false;\n\n /** Denotes all maximum-value data points by rendering symbols at their positions. */\n @property({ type: Boolean, attribute: 'denote-max', reflect: true })\n denoteMax = false;\n\n /** Controls spacing between points in a line, in em (1 = chart height). Defaults to `0.6`. */\n @property({ type: Number, attribute: 'interval-length' }) intervalLength = 0.6;\n\n /** Lower bound for the y-axis domain. When undefined, derives the bound from data. */\n @property({ type: Number }) min?: number;\n\n /** Upper bound for the y-axis domain. When undefined, derives the bound from data. */\n @property({ type: Number }) max?: number;\n\n /** Cached valid numeric values derived from data property. */\n @state() private validData: number[] = [];\n\n /** @private */\n declare _internals: ElementInternals;\n\n render() {\n return html`<div internal-host>${this.#renderChart()}</div>`;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'img';\n }\n\n willUpdate(changedProperties: PropertyValues<this>) {\n super.willUpdate(changedProperties);\n\n if (changedProperties.has('data')) {\n this.validData = toValidData(this.data);\n }\n }\n\n #renderChart(): SVGTemplateResult | typeof nothing {\n const { width, height } = calculateViewBox(this.mark, this.validData.length, this.intervalLength);\n\n switch (this.mark) {\n case 'line':\n case 'area':\n case 'gradient':\n return this.#renderLineVariant(width, height);\n case 'column':\n return this.#renderColumn(width, height);\n case 'winloss':\n return this.#renderWinLoss(VIEW_HEIGHT / 2, width, height);\n default:\n const _exhaustiveCheck: never = this.mark;\n return nothing;\n }\n }\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n\n const { width, height } = calculateViewBox(this.mark, this.validData.length, this.intervalLength);\n const aspectRatio = width / height;\n const validAspectRatio = Number.isFinite(aspectRatio) && aspectRatio > 0 ? aspectRatio : 1;\n this.style.setProperty('--_aspect-ratio', validAspectRatio.toFixed(4));\n }\n\n #renderLineVariant(width: number, height: number) {\n const domain = calculateDomain(this.validData, { explicitMin: this.min, explicitMax: this.max });\n if (!domain) return nothing;\n\n const baselineY = valueToY(0, domain);\n const drawZeroLine = domain.min < 0 && domain.max > 0;\n\n const plotPoints = toPlotPoints(this.validData, domain, { width });\n const symbolIndices = calculateSymbolIndices(this.validData, {\n first: this.denoteFirst,\n last: this.denoteLast,\n min: this.denoteMin,\n max: this.denoteMax\n });\n const interpolation = toInterpolation(this.interpolation);\n\n const linePath = toLinePath(plotPoints, interpolation, width);\n const drawArea = this.mark === 'area' || this.mark === 'gradient';\n const areaPath = drawArea ? toAreaPath(plotPoints, interpolation, VIEW_HEIGHT) : '';\n\n return svg`\n <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n ${this.mark === 'gradient' ? this.#renderGradientDef(height) : nothing}\n\n ${\n areaPath.length\n ? this.mark === 'gradient'\n ? svg`<path class=\"area\" d=${areaPath} style=\"fill: url(#gradient)\"></path>`\n : svg`<path class=\"area\" d=${areaPath}></path>`\n : nothing\n }\n\n ${drawZeroLine ? this.#renderZeroLine(baselineY, width) : nothing}\n\n ${linePath ? svg`<path class=\"line\" d=${linePath} vector-effect=\"non-scaling-stroke\"></path>` : nothing}\n </svg>\n ${this.#renderAccents(plotPoints, symbolIndices)}\n `;\n }\n\n #renderGradientDef(height: number) {\n return svg`\n <defs>\n <linearGradient id=\"gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"${height}\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0%\" style=\"stop-color: var(--gradient-max-color)\"></stop>\n <stop offset=\"100%\" style=\"stop-color: var(--gradient-min-color)\"></stop>\n </linearGradient>\n </defs>\n `;\n }\n\n #renderZeroLine(position: number, width: number) {\n return svg`\n <line\n class=\"zero-line\"\n vector-effect=\"non-scaling-stroke\"\n x1=\"0\"\n y1=\"${position.toFixed(PRECISION)}\"\n x2=\"${width}\"\n y2=\"${position.toFixed(PRECISION)}\">\n </line>\n `;\n }\n\n #renderAccents(points: Point[], accentIndices: Set<number>) {\n if (points.length === 0 || accentIndices.size === 0) return nothing;\n\n return html`\n ${Array.from(accentIndices).map(index => {\n const point = points[index];\n if (!point) return nothing;\n\n const style = `--x: ${point.x.toFixed(PRECISION)}; --y: ${point.y.toFixed(PRECISION)}`;\n return html`\n <span style=${style} class=\"accent\"></span>\n `;\n })}\n `;\n }\n\n #renderColumn(width: number, height: number) {\n const domain = calculateDomain(this.validData, {\n explicitMin: this.min,\n explicitMax: this.max,\n includeZero: true\n });\n if (!domain) return nothing;\n\n const baselineY = valueToY(0, domain);\n const showZeroLine = domain.min < 0 && domain.max > 0;\n const plotPoints = toPlotPoints(this.validData, domain, { width });\n const rects = toColumnRects(plotPoints, baselineY, width);\n\n return svg`\n <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n ${showZeroLine ? this.#renderZeroLine(baselineY, width) : nothing}\n\n ${rects.map(rect => {\n return svg`<rect class=\"column\" x=\"${rect.x.toFixed(PRECISION)}\" y=\"${rect.y.toFixed(PRECISION)}\" width=\"${rect.width.toFixed(PRECISION)}\" height=\"${rect.height.toFixed(PRECISION)}\"></rect>`;\n })}\n </svg>\n `;\n }\n\n #renderWinLoss(baselineY: number, width: number, height: number) {\n if (this.validData.length === 0) return nothing;\n\n const rects = toWinLossRects(this.validData, baselineY, { width, height });\n\n return svg`\n <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n ${this.#renderZeroLine(baselineY, width)}\n\n ${rects.map(rect => {\n return svg`<rect class=\"${rect.className}\" x=\"${rect.x.toFixed(PRECISION)}\" y=\"${rect.y.toFixed(PRECISION)}\" width=\"${rect.width.toFixed(PRECISION)}\" height=\"${rect.height.toFixed(PRECISION)}\"></rect>`;\n })}\n </svg>\n `;\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { PropertyValues } from 'lit';
|
|
2
|
-
import { Control } from '
|
|
3
|
-
import { Icon } from '
|
|
1
|
+
import type { PropertyValues } from 'lit';
|
|
2
|
+
import { Control } from '@nvidia-elements/core/forms';
|
|
3
|
+
import { Icon } from '@nvidia-elements/core/icon';
|
|
4
4
|
/**
|
|
5
5
|
* @element nve-star-rating
|
|
6
6
|
* @description A star rating component lets users rate something using stars, providing a quick visual representation of feedback
|
|
@@ -17,7 +17,7 @@ import { Icon } from '../icon';
|
|
|
17
17
|
*/
|
|
18
18
|
export declare class StarRating extends Control {
|
|
19
19
|
#private;
|
|
20
|
-
static styles: import(
|
|
20
|
+
static styles: import("lit").CSSResult[];
|
|
21
21
|
static readonly metadata: {
|
|
22
22
|
tag: string;
|
|
23
23
|
version: string;
|
|
@@ -31,5 +31,5 @@ export declare class StarRating extends Control {
|
|
|
31
31
|
private active;
|
|
32
32
|
private precision;
|
|
33
33
|
firstUpdated(props: PropertyValues<this>): void;
|
|
34
|
-
protected get prefixContent(): import(
|
|
34
|
+
protected get prefixContent(): import("lit").TemplateResult<1>;
|
|
35
35
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { getElementUpdate as e } from "../internal/utils/dom.js";
|
|
2
2
|
import { scopedRegistry as t } from "../internal/decorators/scoped-registry.js";
|
|
3
3
|
import { useStyles as n } from "../internal/styles/index.js";
|
|
4
|
-
import
|
|
4
|
+
import r from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
|
|
5
5
|
import { Icon as i } from "../icon/icon2.js";
|
|
6
6
|
import { Control as a } from "../forms/control/control2.js";
|
|
7
7
|
import o from "./star-rating.js";
|
|
@@ -18,7 +18,7 @@ var l = class extends a {
|
|
|
18
18
|
static {
|
|
19
19
|
this.metadata = {
|
|
20
20
|
tag: "nve-star-rating",
|
|
21
|
-
version: "2.0
|
|
21
|
+
version: "2.1.0"
|
|
22
22
|
};
|
|
23
23
|
}
|
|
24
24
|
static {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"star-rating2.js","names":["#setValue","#getStepValue","#handleMouseMove"],"sources":["../../src/star-rating/star-rating.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport type { PropertyValues } from 'lit';\nimport { state } from 'lit/decorators/state.js';\nimport { useStyles, getElementUpdate, scopedRegistry } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './star-rating.css?inline';\n\n/**\n * @element nve-star-rating\n * @description A star rating component lets users rate something using stars, providing a quick visual representation of feedback\n * @since 1.23.1\n * @entrypoint \\@nvidia-elements/core/star-rating\n * @cssprop --star-size\n * @cssprop --color\n * @cssprop --stroke-color\n * @cssprop --width\n * @cssprop --height\n * @csspart icon - The icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range\n *\n */\n@scopedRegistry()\nexport class StarRating extends Control {\n static styles = useStyles([...Control.styles, styles]);\n\n static readonly metadata = {\n tag: 'nve-star-rating',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Icon.metadata.tag]: Icon\n };\n\n @state() private min = 0;\n @state() private max = 5;\n @state() private value = 0;\n @state() private active = 0;\n @state() private precision = 0.5;\n\n firstUpdated(props: PropertyValues<this>) {\n super.firstUpdated(props);\n\n getElementUpdate(this.input, 'max', (max: unknown) => {\n if (max) {\n this.max = parseInt(max as string);\n }\n });\n\n getElementUpdate(this.input, 'min', (min: unknown) => {\n if (min) {\n this.min = parseInt(min as string);\n }\n });\n\n getElementUpdate(this.input, 'value', (value: unknown) => {\n this.#setValue(value ? parseFloat(value as string) : this.input.valueAsNumber);\n });\n\n this.input.addEventListener('input', () => (this.value = this.input.valueAsNumber));\n\n this.value = this.input.valueAsNumber;\n }\n\n protected get prefixContent() {\n return html`\n <div aria-hidden=\"true\" class=\"stars\" @mouseleave=${() => (this.active = 0)}>\n ${new Array(this.max).fill('').map((_, i) => {\n const starValue = i + 1;\n const currentValue = this.active || this.value;\n const diff = currentValue - i;\n\n const iconName = diff >= 1 ? 'star' : diff >= 0.5 ? 'star-half' : 'star-stroke';\n\n return html`\n <nve-icon part=\"icon\"\n @click=${() => this.#setValue(this.#getStepValue(i, starValue))}\n @mousemove=${(e: MouseEvent) => this.#handleMouseMove(e, i, starValue)}\n name=${iconName}\n ></nve-icon>\n `;\n })}\n </div>\n `;\n }\n\n #handleMouseMove(e: MouseEvent, index: number, starValue: number) {\n const target = e.currentTarget as HTMLElement;\n const rect = target.getBoundingClientRect();\n const position = (e.clientX - rect.left) / rect.width;\n\n this.active = position <= 0.5 ? index + 0.5 : starValue;\n }\n\n #getStepValue(index: number, starValue: number) {\n // If hovering (active has a value), use that value\n if (this.active > 0) {\n return this.active;\n }\n\n // If clicking on the current value, toggle it off\n if (this.value === starValue || this.value === index + 0.5) {\n return 0;\n }\n\n // Otherwise, return the star value\n return starValue;\n }\n\n #setValue(value: number) {\n this.input.valueAsNumber = value === this.value ? 0 : value;\n this.input.dispatchEvent(new Event('input', { bubbles: true }));\n this.input.dispatchEvent(new Event('change', { bubbles: true }));\n }\n}\n"],"mappings":";;;;;;;;;;AA0BO,IAAA,IAAA,cAAyB,EAAQ;;0BAYf,cACA,gBACE,iBACC,oBACG;;;gBAfb,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;kBAE1B;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAK,SAAS,MAAM,EACvB;;CAQA,aAAa,GAA6B;EAqBxC,AApBA,MAAM,aAAa,CAAK,GAExB,EAAiB,KAAK,OAAO,QAAQ,MAAiB;GACpD,AAAI,MACF,KAAK,MAAM,SAAS,CAAa;EAErC,CAAC,GAED,EAAiB,KAAK,OAAO,QAAQ,MAAiB;GACpD,AAAI,MACF,KAAK,MAAM,SAAS,CAAa;EAErC,CAAC,GAED,EAAiB,KAAK,OAAO,UAAU,MAAmB;GACxD,KAAKA,GAAU,IAAQ,WAAW,CAAe,IAAI,KAAK,MAAM,aAAa;EAC/E,CAAC,GAED,KAAK,MAAM,iBAAiB,eAAgB,KAAK,QAAQ,KAAK,MAAM,aAAc,GAElF,KAAK,QAAQ,KAAK,MAAM;CAC1B;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,4DACgD,KAAK,SAAS,EAAG,IACpE,MAAM,KAAK,GAAG,
|
|
1
|
+
{"version":3,"file":"star-rating2.js","names":["#setValue","#getStepValue","#handleMouseMove"],"sources":["../../src/star-rating/star-rating.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport type { PropertyValues } from 'lit';\nimport { state } from 'lit/decorators/state.js';\nimport { useStyles, getElementUpdate, scopedRegistry } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './star-rating.css?inline';\n\n/**\n * @element nve-star-rating\n * @description A star rating component lets users rate something using stars, providing a quick visual representation of feedback\n * @since 1.23.1\n * @entrypoint \\@nvidia-elements/core/star-rating\n * @cssprop --star-size\n * @cssprop --color\n * @cssprop --stroke-color\n * @cssprop --width\n * @cssprop --height\n * @csspart icon - The icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range\n *\n */\n@scopedRegistry()\nexport class StarRating extends Control {\n static styles = useStyles([...Control.styles, styles]);\n\n static readonly metadata = {\n tag: 'nve-star-rating',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Icon.metadata.tag]: Icon\n };\n\n @state() private min = 0;\n @state() private max = 5;\n @state() private value = 0;\n @state() private active = 0;\n @state() private precision = 0.5;\n\n firstUpdated(props: PropertyValues<this>) {\n super.firstUpdated(props);\n\n getElementUpdate(this.input, 'max', (max: unknown) => {\n if (max) {\n this.max = parseInt(max as string);\n }\n });\n\n getElementUpdate(this.input, 'min', (min: unknown) => {\n if (min) {\n this.min = parseInt(min as string);\n }\n });\n\n getElementUpdate(this.input, 'value', (value: unknown) => {\n this.#setValue(value ? parseFloat(value as string) : this.input.valueAsNumber);\n });\n\n this.input.addEventListener('input', () => (this.value = this.input.valueAsNumber));\n\n this.value = this.input.valueAsNumber;\n }\n\n protected get prefixContent() {\n return html`\n <div aria-hidden=\"true\" class=\"stars\" @mouseleave=${() => (this.active = 0)}>\n ${new Array(this.max).fill('').map((_, i) => {\n const starValue = i + 1;\n const currentValue = this.active || this.value;\n const diff = currentValue - i;\n\n const iconName = diff >= 1 ? 'star' : diff >= 0.5 ? 'star-half' : 'star-stroke';\n\n return html`\n <nve-icon part=\"icon\"\n @click=${() => this.#setValue(this.#getStepValue(i, starValue))}\n @mousemove=${(e: MouseEvent) => this.#handleMouseMove(e, i, starValue)}\n name=${iconName}\n ></nve-icon>\n `;\n })}\n </div>\n `;\n }\n\n #handleMouseMove(e: MouseEvent, index: number, starValue: number) {\n const target = e.currentTarget as HTMLElement;\n const rect = target.getBoundingClientRect();\n const position = (e.clientX - rect.left) / rect.width;\n\n this.active = position <= 0.5 ? index + 0.5 : starValue;\n }\n\n #getStepValue(index: number, starValue: number) {\n // If hovering (active has a value), use that value\n if (this.active > 0) {\n return this.active;\n }\n\n // If clicking on the current value, toggle it off\n if (this.value === starValue || this.value === index + 0.5) {\n return 0;\n }\n\n // Otherwise, return the star value\n return starValue;\n }\n\n #setValue(value: number) {\n this.input.valueAsNumber = value === this.value ? 0 : value;\n this.input.dispatchEvent(new Event('input', { bubbles: true }));\n this.input.dispatchEvent(new Event('change', { bubbles: true }));\n }\n}\n"],"mappings":";;;;;;;;;;AA0BO,IAAA,IAAA,cAAyB,EAAQ;;0BAYf,cACA,gBACE,iBACC,oBACG;;;gBAfb,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;kBAE1B;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAK,SAAS,MAAM,EACvB;;CAQA,aAAa,GAA6B;EAqBxC,AApBA,MAAM,aAAa,CAAK,GAExB,EAAiB,KAAK,OAAO,QAAQ,MAAiB;GACpD,AAAI,MACF,KAAK,MAAM,SAAS,CAAa;EAErC,CAAC,GAED,EAAiB,KAAK,OAAO,QAAQ,MAAiB;GACpD,AAAI,MACF,KAAK,MAAM,SAAS,CAAa;EAErC,CAAC,GAED,EAAiB,KAAK,OAAO,UAAU,MAAmB;GACxD,KAAKA,GAAU,IAAQ,WAAW,CAAe,IAAI,KAAK,MAAM,aAAa;EAC/E,CAAC,GAED,KAAK,MAAM,iBAAiB,eAAgB,KAAK,QAAQ,KAAK,MAAM,aAAc,GAElF,KAAK,QAAQ,KAAK,MAAM;CAC1B;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,4DACgD,KAAK,SAAS,EAAG,IACpE,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,GAAG,MAAM;GAC3C,IAAM,IAAY,IAAI,GAEhB,KADe,KAAK,UAAU,KAAK,SACb;GAI5B,OAAO,CAAI,uCAEM,KAAKA,GAAU,KAAKC,GAAc,GAAG,CAAS,CAAC,EAAE,iBAClD,MAAkB,KAAKC,GAAiB,GAAG,GAAG,CAAS,EAAE,UALxD,KAAQ,IAAI,SAAS,KAAQ,KAAM,cAAc,cAMhD;EAGpB,CAAC,EAAE;CAGP;CAEA,GAAiB,GAAe,GAAe,GAAmB;EAEhE,IAAM,IADS,EAAE,cACG,sBAAsB,GACpC,KAAY,EAAE,UAAU,EAAK,QAAQ,EAAK;EAEhD,KAAK,SAAS,KAAY,KAAM,IAAQ,KAAM;CAChD;CAEA,GAAc,GAAe,GAAmB;EAY9C,OAVI,KAAK,SAAS,IACT,KAAK,SAIV,KAAK,UAAU,KAAa,KAAK,UAAU,IAAQ,KAC9C,IAIF;CACT;CAEA,GAAU,GAAe;EAGvB,AAFA,KAAK,MAAM,gBAAgB,MAAU,KAAK,QAAQ,IAAI,GACtD,KAAK,MAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAK,CAAC,CAAC,GAC9D,KAAK,MAAM,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CACjE;AACF;GAhFG,EAAM,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,MACN,EAAM,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,MACN,EAAM,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MACN,EAAM,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MACN,EAAM,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,UAjBR,EAAe,CAAA,GAAA,CAAA"}
|
package/dist/steps/define.d.ts
CHANGED
package/dist/steps/steps.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { PropertyValues
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
1
|
+
import type { PropertyValues } from 'lit';
|
|
2
|
+
import { LitElement } from 'lit';
|
|
3
|
+
import type { KeynavListConfig, Container } from '@nvidia-elements/core/internal';
|
|
4
|
+
import { IconButton } from '@nvidia-elements/core/icon-button';
|
|
5
|
+
import { ProgressRing } from '@nvidia-elements/core/progress-ring';
|
|
6
|
+
declare const StepsItem_base: import("@nvidia-elements/forms/mixins").ButtonFormControlMixinReturn<typeof LitElement>;
|
|
6
7
|
/**
|
|
7
8
|
* @element nve-steps-item
|
|
8
9
|
* @description Represents an individual step within a multi-step workflow, displaying its status and enabling navigation within the parent steps component.
|
|
@@ -36,7 +37,7 @@ export declare class StepsItem extends StepsItem_base {
|
|
|
36
37
|
container?: Extract<Container, 'condensed'>;
|
|
37
38
|
/** @private */
|
|
38
39
|
index: number;
|
|
39
|
-
static styles: import(
|
|
40
|
+
static styles: import("lit").CSSResult[];
|
|
40
41
|
static readonly metadata: {
|
|
41
42
|
tag: string;
|
|
42
43
|
version: string;
|
|
@@ -46,7 +47,7 @@ export declare class StepsItem extends StepsItem_base {
|
|
|
46
47
|
[IconButton.metadata.tag]: typeof IconButton;
|
|
47
48
|
[ProgressRing.metadata.tag]: typeof ProgressRing;
|
|
48
49
|
};
|
|
49
|
-
render(): import(
|
|
50
|
+
render(): import("lit").TemplateResult<1>;
|
|
50
51
|
constructor();
|
|
51
52
|
connectedCallback(): void;
|
|
52
53
|
}
|
|
@@ -73,7 +74,7 @@ export declare class Steps extends LitElement {
|
|
|
73
74
|
* Determines whether the steps should handle selection behavior vs. defaults to off.
|
|
74
75
|
*/
|
|
75
76
|
behaviorSelect: boolean;
|
|
76
|
-
static styles: import(
|
|
77
|
+
static styles: import("lit").CSSResult[];
|
|
77
78
|
static readonly metadata: {
|
|
78
79
|
tag: string;
|
|
79
80
|
version: string;
|
|
@@ -84,7 +85,7 @@ export declare class Steps extends LitElement {
|
|
|
84
85
|
private steps;
|
|
85
86
|
/** @private */
|
|
86
87
|
_internals: ElementInternals;
|
|
87
|
-
render(): import(
|
|
88
|
+
render(): import("lit").TemplateResult<1>;
|
|
88
89
|
connectedCallback(): void;
|
|
89
90
|
disconnectedCallback(): void;
|
|
90
91
|
updated(props: PropertyValues<this>): void;
|
package/dist/steps/steps2.js
CHANGED
|
@@ -4,7 +4,7 @@ import { attachInternals as n } from "../internal/utils/a11y.js";
|
|
|
4
4
|
import { stateSelected as r } from "../internal/controllers/state-selected.controller.js";
|
|
5
5
|
import { scopedRegistry as i } from "../internal/decorators/scoped-registry.js";
|
|
6
6
|
import { useStyles as a } from "../internal/styles/index.js";
|
|
7
|
-
import
|
|
7
|
+
import o from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
|
|
8
8
|
import { IconButton as s } from "../icon-button/icon-button2.js";
|
|
9
9
|
import c from "./steps-item.js";
|
|
10
10
|
import l from "./steps.js";
|
|
@@ -23,7 +23,7 @@ var v = class extends h(d) {
|
|
|
23
23
|
static {
|
|
24
24
|
this.metadata = {
|
|
25
25
|
tag: "nve-steps-item",
|
|
26
|
-
version: "2.0
|
|
26
|
+
version: "2.1.0",
|
|
27
27
|
parents: ["nve-steps"]
|
|
28
28
|
};
|
|
29
29
|
}
|
|
@@ -69,7 +69,7 @@ var y = class extends d {
|
|
|
69
69
|
static {
|
|
70
70
|
this.metadata = {
|
|
71
71
|
tag: "nve-steps",
|
|
72
|
-
version: "2.0
|
|
72
|
+
version: "2.1.0",
|
|
73
73
|
children: ["nve-steps-item"]
|
|
74
74
|
};
|
|
75
75
|
}
|
package/dist/steps/steps2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"steps2.js","names":["#selectTab","#syncChildSteps","#onClick"],"sources":["../../src/steps/steps.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 { state } from 'lit/decorators/state.js';\nimport { when } from 'lit/directives/when.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { KeynavListConfig, Container } from '@nvidia-elements/core/internal';\nimport {\n stateSelected,\n useStyles,\n keyNavigationList,\n attachInternals,\n audit,\n scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport stepsItemStyleSheet from './steps-item.css?inline';\nimport stepsStyleSheet from './steps.css?inline';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { ProgressRing } from '@nvidia-elements/core/progress-ring';\n\n/**\n * @element nve-steps-item\n * @description Represents an individual step within a multi-step workflow, displaying its status and enabling navigation within the parent steps component.\n * @since 0.30.0\n * @entrypoint \\@nvidia-elements/core/steps\n * @slot - default slot for step text\n * @slot status-icon - custom slotted step icon\n * @cssprop --font-size\n * @cssprop --border-top\n * @cssprop --width\n * @cssprop --font-weight\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --text-transform\n * @csspart icon-button - The icon button element\n * @csspart progress-ring - The progress ring element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n */\n@audit()\n@scopedRegistry()\n@stateSelected<StepsItem>()\nexport class StepsItem extends ButtonFormControlMixin(LitElement) {\n /**\n * Determines which item the user selects, defaults to false.\n */\n @property({ type: Boolean, reflect: true }) selected = false;\n\n /**\n * Four visual treatments represent the `status` of tasks. When `status` has a value of `warning`, `success`, or `danger`, the component embeds appropriate icons.\n */\n @property({ type: String, reflect: true }) status?: 'accent' | 'danger' | 'success' | 'pending';\n\n /**\n * Determines whether the steps should display in condensed format with no text labels.\n */\n @property({ type: String, reflect: true }) container?: Extract<Container, 'condensed'>;\n\n /** @private */\n @state() index: number = 0;\n\n static styles = useStyles([stepsItemStyleSheet]);\n\n static readonly metadata = {\n tag: 'nve-steps-item',\n version: '0.0.0',\n parents: ['nve-steps']\n };\n\n static elementDefinitions = {\n [IconButton.metadata.tag]: IconButton,\n [ProgressRing.metadata.tag]: ProgressRing\n };\n\n render() {\n return html`\n <div internal-host focus-within>\n <slot name=\"status-icon\">\n ${!this.status ? html`<nve-icon-button part=\"icon-button\" readonly id=\"number-icon\" .disabled=${this.disabled}>${this.index}</nve-icon-button>` : ''}\n ${this.status === 'success' ? html`<nve-icon-button part=\"icon-button\" readonly size=\"sm\" interaction=\"emphasis\" icon-name=\"check\"></nve-icon-button>` : ''}\n ${this.status === 'danger' ? html`<nve-icon-button part=\"icon-button\" readonly size=\"sm\" interaction=\"destructive\" icon-name=\"exclamation-circle\"></nve-icon-button>` : ''}\n ${this.status === 'pending' ? html`<nve-progress-ring part=\"progress-ring\" status=\"accent\" size=\"sm\"></nve-progress-ring>` : ''}\n </slot>\n ${when(this.container !== 'condensed', () => html`<slot></slot>`)}\n </div>\n `;\n }\n\n constructor() {\n super();\n this.type = 'button';\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._internals.role = 'tab';\n }\n}\n\n/**\n * @element nve-steps\n * @description Steps enables a multi-step workflow allowing a user to complete a goal in a specific sequence.\n * @since 0.30.0\n * @entrypoint \\@nvidia-elements/core/steps\n * @slot - default slot for steps-item\n * @cssprop --gap\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n */\n@audit()\n@keyNavigationList<Steps>()\nexport class Steps extends LitElement {\n /**\n * Determines whether the steps should display in a vertical layout vs. defaulting to horizontal.\n */\n @property({ type: Boolean, reflect: true }) vertical = false;\n\n /**\n * Determines whether the steps should display in condensed format with no text labels.\n */\n @property({ type: String, reflect: true }) container?: Extract<Container, 'condensed'>;\n\n /**\n * Determines whether the steps should handle selection behavior vs. defaults to off.\n */\n @property({ type: Boolean, attribute: 'behavior-select' }) behaviorSelect = false;\n\n static styles = useStyles([stepsStyleSheet]);\n\n static readonly metadata = {\n tag: 'nve-steps',\n version: '0.0.0',\n children: ['nve-steps-item']\n };\n\n /** @private */\n get keynavListConfig(): KeynavListConfig {\n return {\n items: this.steps,\n layout: this.vertical ? 'vertical' : 'horizontal'\n };\n }\n\n @queryAssignedElements({ selector: 'nve-steps-item' }) private steps!: StepsItem[];\n\n /** @private */\n declare _internals: ElementInternals;\n\n #selectTab(stepsItem: HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean }) {\n if (!this.behaviorSelect || !stepsItem.matches('nve-steps-item') || stepsItem.disabled) {\n return;\n }\n\n this.steps.forEach(i => (i.selected = false));\n stepsItem.selected = true;\n }\n\n render() {\n return html`\n <div internal-host>\n <slot @slotchange=${this.#syncChildSteps}></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'tablist';\n this.addEventListener('click', this.#onClick);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.#onClick);\n }\n\n #onClick = (e: Event) => {\n this.#selectTab(e.target as HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean });\n };\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n if (props.has('container') || props.has('vertical')) {\n this.#syncChildSteps();\n }\n }\n\n #syncChildSteps() {\n this._internals.ariaOrientation = this.vertical ? 'vertical' : 'horizontal';\n this.steps.forEach((item, i) => {\n item.index = i + 1;\n item.container = this.container;\n });\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA6CO,IAAA,IAAA,cAAwB,EAAuB,CAAU,
|
|
1
|
+
{"version":3,"file":"steps2.js","names":["#selectTab","#syncChildSteps","#onClick"],"sources":["../../src/steps/steps.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 { state } from 'lit/decorators/state.js';\nimport { when } from 'lit/directives/when.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { KeynavListConfig, Container } from '@nvidia-elements/core/internal';\nimport {\n stateSelected,\n useStyles,\n keyNavigationList,\n attachInternals,\n audit,\n scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport stepsItemStyleSheet from './steps-item.css?inline';\nimport stepsStyleSheet from './steps.css?inline';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { ProgressRing } from '@nvidia-elements/core/progress-ring';\n\n/**\n * @element nve-steps-item\n * @description Represents an individual step within a multi-step workflow, displaying its status and enabling navigation within the parent steps component.\n * @since 0.30.0\n * @entrypoint \\@nvidia-elements/core/steps\n * @slot - default slot for step text\n * @slot status-icon - custom slotted step icon\n * @cssprop --font-size\n * @cssprop --border-top\n * @cssprop --width\n * @cssprop --font-weight\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --text-transform\n * @csspart icon-button - The icon button element\n * @csspart progress-ring - The progress ring element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n */\n@audit()\n@scopedRegistry()\n@stateSelected<StepsItem>()\nexport class StepsItem extends ButtonFormControlMixin(LitElement) {\n /**\n * Determines which item the user selects, defaults to false.\n */\n @property({ type: Boolean, reflect: true }) selected = false;\n\n /**\n * Four visual treatments represent the `status` of tasks. When `status` has a value of `warning`, `success`, or `danger`, the component embeds appropriate icons.\n */\n @property({ type: String, reflect: true }) status?: 'accent' | 'danger' | 'success' | 'pending';\n\n /**\n * Determines whether the steps should display in condensed format with no text labels.\n */\n @property({ type: String, reflect: true }) container?: Extract<Container, 'condensed'>;\n\n /** @private */\n @state() index: number = 0;\n\n static styles = useStyles([stepsItemStyleSheet]);\n\n static readonly metadata = {\n tag: 'nve-steps-item',\n version: '0.0.0',\n parents: ['nve-steps']\n };\n\n static elementDefinitions = {\n [IconButton.metadata.tag]: IconButton,\n [ProgressRing.metadata.tag]: ProgressRing\n };\n\n render() {\n return html`\n <div internal-host focus-within>\n <slot name=\"status-icon\">\n ${!this.status ? html`<nve-icon-button part=\"icon-button\" readonly id=\"number-icon\" .disabled=${this.disabled}>${this.index}</nve-icon-button>` : ''}\n ${this.status === 'success' ? html`<nve-icon-button part=\"icon-button\" readonly size=\"sm\" interaction=\"emphasis\" icon-name=\"check\"></nve-icon-button>` : ''}\n ${this.status === 'danger' ? html`<nve-icon-button part=\"icon-button\" readonly size=\"sm\" interaction=\"destructive\" icon-name=\"exclamation-circle\"></nve-icon-button>` : ''}\n ${this.status === 'pending' ? html`<nve-progress-ring part=\"progress-ring\" status=\"accent\" size=\"sm\"></nve-progress-ring>` : ''}\n </slot>\n ${when(this.container !== 'condensed', () => html`<slot></slot>`)}\n </div>\n `;\n }\n\n constructor() {\n super();\n this.type = 'button';\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._internals.role = 'tab';\n }\n}\n\n/**\n * @element nve-steps\n * @description Steps enables a multi-step workflow allowing a user to complete a goal in a specific sequence.\n * @since 0.30.0\n * @entrypoint \\@nvidia-elements/core/steps\n * @slot - default slot for steps-item\n * @cssprop --gap\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n */\n@audit()\n@keyNavigationList<Steps>()\nexport class Steps extends LitElement {\n /**\n * Determines whether the steps should display in a vertical layout vs. defaulting to horizontal.\n */\n @property({ type: Boolean, reflect: true }) vertical = false;\n\n /**\n * Determines whether the steps should display in condensed format with no text labels.\n */\n @property({ type: String, reflect: true }) container?: Extract<Container, 'condensed'>;\n\n /**\n * Determines whether the steps should handle selection behavior vs. defaults to off.\n */\n @property({ type: Boolean, attribute: 'behavior-select' }) behaviorSelect = false;\n\n static styles = useStyles([stepsStyleSheet]);\n\n static readonly metadata = {\n tag: 'nve-steps',\n version: '0.0.0',\n children: ['nve-steps-item']\n };\n\n /** @private */\n get keynavListConfig(): KeynavListConfig {\n return {\n items: this.steps,\n layout: this.vertical ? 'vertical' : 'horizontal'\n };\n }\n\n @queryAssignedElements({ selector: 'nve-steps-item' }) private steps!: StepsItem[];\n\n /** @private */\n declare _internals: ElementInternals;\n\n #selectTab(stepsItem: HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean }) {\n if (!this.behaviorSelect || !stepsItem.matches('nve-steps-item') || stepsItem.disabled) {\n return;\n }\n\n this.steps.forEach(i => (i.selected = false));\n stepsItem.selected = true;\n }\n\n render() {\n return html`\n <div internal-host>\n <slot @slotchange=${this.#syncChildSteps}></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'tablist';\n this.addEventListener('click', this.#onClick);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.#onClick);\n }\n\n #onClick = (e: Event) => {\n this.#selectTab(e.target as HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean });\n };\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n if (props.has('container') || props.has('vertical')) {\n this.#syncChildSteps();\n }\n }\n\n #syncChildSteps() {\n this._internals.ariaOrientation = this.vertical ? 'vertical' : 'horizontal';\n this.steps.forEach((item, i) => {\n item.index = i + 1;\n item.container = this.container;\n });\n }\n}\n"],"mappings":"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"}
|
package/dist/switch/define.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { CSSResult } from 'lit';
|
|
2
|
-
import { ControlGroup } from '
|
|
1
|
+
import type { CSSResult } from 'lit';
|
|
2
|
+
import { ControlGroup } from '@nvidia-elements/core/forms';
|
|
3
3
|
/**
|
|
4
4
|
* @element nve-switch-group
|
|
5
5
|
* @description A switch group is a container for a group of switches.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { audit as e } from "../internal/controllers/audit.controller.js";
|
|
2
2
|
import { useStyles as t } from "../internal/styles/index.js";
|
|
3
|
-
import
|
|
3
|
+
import n from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
|
|
4
4
|
import { ControlGroup as r } from "../forms/control-group/control-group2.js";
|
|
5
5
|
import i from "./switch-group.js";
|
|
6
6
|
//#region src/switch/switch-group.ts
|
|
@@ -11,7 +11,7 @@ var a = class extends r {
|
|
|
11
11
|
static {
|
|
12
12
|
this.metadata = {
|
|
13
13
|
tag: "nve-switch-group",
|
|
14
|
-
version: "2.0
|
|
14
|
+
version: "2.1.0",
|
|
15
15
|
children: [
|
|
16
16
|
"label",
|
|
17
17
|
"nve-control-message",
|
package/dist/switch/switch.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { CSSResult } from 'lit';
|
|
2
|
-
import { Control } from '
|
|
1
|
+
import type { CSSResult } from 'lit';
|
|
2
|
+
import { Control } from '@nvidia-elements/core/forms';
|
|
3
3
|
/**
|
|
4
4
|
* @element nve-switch
|
|
5
5
|
* @description A switch is a control that enables users to switch between two mutually exclusive options (on or off, checked or unchecked) through a single click or tap.
|