@nvidia-elements/core 2.9.0 → 2.10.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 +13 -0
- package/README.md +3 -7
- package/dist/accordion/accordion.d.ts +4 -4
- package/dist/accordion/accordion2.js +4 -4
- package/dist/alert/alert-group.d.ts +1 -1
- package/dist/alert/alert-group2.js +1 -1
- package/dist/alert/alert.d.ts +1 -1
- package/dist/alert/alert2.js +1 -1
- package/dist/avatar/avatar-group.d.ts +1 -1
- package/dist/avatar/avatar-group2.js +1 -1
- package/dist/avatar/avatar.d.ts +1 -1
- package/dist/avatar/avatar2.js +1 -1
- package/dist/badge/badge.d.ts +1 -1
- package/dist/badge/badge2.js +1 -1
- package/dist/breadcrumb/breadcrumb.d.ts +2 -1
- package/dist/breadcrumb/breadcrumb2.js +1 -1
- package/dist/breadcrumb/breadcrumb2.js.map +1 -1
- package/dist/bundles/index.d.ts +7 -1
- package/dist/bundles/index.js +1 -1
- package/dist/button/button.d.ts +1 -1
- package/dist/button/button2.js +1 -1
- package/dist/button-group/button-group.d.ts +1 -1
- package/dist/button-group/button-group2.js +1 -1
- package/dist/card/card.d.ts +4 -4
- package/dist/card/card2.js +4 -4
- package/dist/chat-message/chat-message.d.ts +1 -1
- package/dist/chat-message/chat-message2.js +1 -1
- package/dist/checkbox/checkbox-group2.js +1 -1
- package/dist/checkbox/checkbox2.js +1 -1
- package/dist/color/color.d.ts +1 -1
- package/dist/color/color2.js +1 -1
- package/dist/combobox/combobox.d.ts +2 -2
- package/dist/combobox/combobox2.js +1 -1
- package/dist/copy-button/copy-button.d.ts +1 -1
- package/dist/copy-button/copy-button2.js +1 -1
- package/dist/custom-elements-jsx.d.ts +16 -16
- package/dist/custom-elements-vue.d.ts +16 -16
- package/dist/custom-elements.json +323 -877
- package/dist/data.html.json +4 -4
- package/dist/data.snippets.json +45 -45
- package/dist/date/date.d.ts +1 -1
- package/dist/date/date2.js +1 -1
- package/dist/datetime/datetime.d.ts +1 -1
- package/dist/datetime/datetime2.js +1 -1
- package/dist/dialog/dialog-footer.d.ts +1 -1
- package/dist/dialog/dialog-footer2.js +1 -1
- package/dist/dialog/dialog-header.d.ts +1 -1
- package/dist/dialog/dialog-header2.js +1 -1
- package/dist/dialog/dialog.d.ts +1 -1
- package/dist/dialog/dialog2.js +1 -1
- package/dist/divider/divider.d.ts +1 -1
- package/dist/divider/divider2.js +1 -1
- package/dist/dot/dot.d.ts +1 -1
- package/dist/dot/dot2.js +1 -1
- package/dist/drawer/drawer-content.d.ts +1 -1
- package/dist/drawer/drawer-content2.js +1 -1
- package/dist/drawer/drawer-footer.d.ts +1 -1
- package/dist/drawer/drawer-footer2.js +1 -1
- package/dist/drawer/drawer-header.d.ts +1 -1
- package/dist/drawer/drawer-header2.js +1 -1
- package/dist/drawer/drawer.d.ts +1 -1
- package/dist/drawer/drawer2.js +1 -1
- package/dist/dropdown/dropdown-footer.d.ts +1 -1
- package/dist/dropdown/dropdown-footer2.js +1 -1
- package/dist/dropdown/dropdown-header.d.ts +1 -1
- package/dist/dropdown/dropdown-header2.js +1 -1
- package/dist/dropdown/dropdown.d.ts +1 -1
- package/dist/dropdown/dropdown2.js +1 -1
- package/dist/dropdown-group/dropdown-group.d.ts +1 -1
- package/dist/dropdown-group/dropdown-group.js +1 -1
- package/dist/dropzone/dropzone.d.ts +1 -1
- package/dist/dropzone/dropzone2.js +1 -1
- package/dist/file/file2.js +1 -1
- package/dist/format-bytes/format-bytes.d.ts +1 -1
- package/dist/format-bytes/format-bytes2.js +1 -1
- package/dist/format-datetime/format-datetime.d.ts +1 -1
- package/dist/format-datetime/format-datetime2.js +1 -1
- package/dist/format-number/format-number.d.ts +1 -1
- package/dist/format-number/format-number2.js +1 -1
- package/dist/format-relative-time/format-relative-time.d.ts +1 -1
- package/dist/format-relative-time/format-relative-time2.js +1 -1
- package/dist/format-truncate/format-truncate2.js +1 -1
- package/dist/forms/control/control2.js +1 -1
- package/dist/forms/control-group/control-group.d.ts +3 -1
- package/dist/forms/control-group/control-group2.js +1 -1
- package/dist/forms/control-group/control-group2.js.map +1 -1
- package/dist/forms/control-message/control-message.d.ts +1 -1
- package/dist/forms/control-message/control-message2.js +1 -1
- package/dist/gauge/gauge.d.ts +1 -1
- package/dist/gauge/gauge2.js +1 -1
- package/dist/grid/cell/cell.d.ts +1 -1
- package/dist/grid/cell/cell2.js +1 -1
- package/dist/grid/column/column.d.ts +1 -1
- package/dist/grid/column/column2.js +1 -1
- package/dist/grid/footer/footer.d.ts +1 -1
- package/dist/grid/footer/footer2.js +1 -1
- package/dist/grid/grid.d.ts +3 -1
- package/dist/grid/grid2.js +1 -1
- package/dist/grid/grid2.js.map +1 -1
- package/dist/grid/header/header.d.ts +1 -1
- package/dist/grid/header/header2.js +1 -1
- package/dist/grid/placeholder/placeholder.d.ts +1 -1
- package/dist/grid/placeholder/placeholder2.js +1 -1
- package/dist/grid/row/row.d.ts +1 -1
- package/dist/grid/row/row2.js +1 -1
- package/dist/icon/icon.d.ts +1 -1
- package/dist/icon/icon2.js +2 -2
- package/dist/icon-button/icon-button.d.ts +1 -1
- package/dist/icon-button/icon-button2.js +1 -1
- package/dist/index.js +1 -1
- package/dist/input/input-group2.js +1 -1
- package/dist/input/input2.js +1 -1
- package/dist/internal/controllers/keynav-list.controller.js.map +1 -1
- package/dist/internal/services/global.service.js +1 -1
- package/dist/internal/utils/dom.d.ts +3 -1
- package/dist/internal/utils/dom.js.map +1 -1
- package/dist/logo/logo.d.ts +1 -1
- package/dist/logo/logo2.js +1 -1
- package/dist/menu/menu-item.d.ts +1 -1
- package/dist/menu/menu-item2.js +1 -1
- package/dist/menu/menu.d.ts +1 -1
- package/dist/menu/menu2.js +1 -1
- package/dist/month/month.d.ts +1 -1
- package/dist/month/month2.js +1 -1
- package/dist/notification/notification-group.d.ts +1 -1
- package/dist/notification/notification-group2.js +1 -1
- package/dist/notification/notification.d.ts +1 -1
- package/dist/notification/notification2.js +1 -1
- package/dist/page/page-panel/page-panel-content.d.ts +1 -1
- package/dist/page/page-panel/page-panel-content2.js +1 -1
- package/dist/page/page-panel/page-panel-footer.d.ts +1 -1
- package/dist/page/page-panel/page-panel-footer2.js +1 -1
- package/dist/page/page-panel/page-panel-header.d.ts +1 -1
- package/dist/page/page-panel/page-panel-header2.js +1 -1
- package/dist/page/page-panel/page-panel.d.ts +1 -1
- package/dist/page/page-panel/page-panel2.js +1 -1
- package/dist/page/page.d.ts +1 -1
- package/dist/page/page2.js +1 -1
- package/dist/page-header/page-header.d.ts +1 -1
- package/dist/page-header/page-header2.js +1 -1
- package/dist/page-loader/page-loader.d.ts +1 -1
- package/dist/page-loader/page-loader2.js +1 -1
- package/dist/pagination/pagination.d.ts +1 -1
- package/dist/pagination/pagination2.js +1 -1
- package/dist/panel/panel.d.ts +4 -4
- package/dist/panel/panel2.js +4 -4
- package/dist/password/password.d.ts +1 -1
- package/dist/password/password2.js +1 -1
- package/dist/preferences-input/preferences-input.d.ts +1 -1
- package/dist/preferences-input/preferences-input2.js +1 -1
- package/dist/progress-bar/progress-bar.d.ts +1 -1
- package/dist/progress-bar/progress-bar2.js +1 -1
- package/dist/progress-ring/progress-ring.d.ts +1 -1
- package/dist/progress-ring/progress-ring2.js +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip.d.ts +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip2.js +1 -1
- package/dist/pulse/pulse.d.ts +1 -1
- package/dist/pulse/pulse2.js +1 -1
- package/dist/radio/radio-group2.js +1 -1
- package/dist/radio/radio2.js +1 -1
- package/dist/range/range.d.ts +1 -1
- package/dist/range/range2.js +1 -1
- package/dist/resize-handle/resize-handle.d.ts +1 -1
- package/dist/resize-handle/resize-handle2.js +1 -1
- package/dist/search/search.d.ts +1 -1
- package/dist/search/search2.js +1 -1
- package/dist/select/select.d.ts +2 -2
- package/dist/select/select2.js +1 -1
- package/dist/skeleton/skeleton.d.ts +1 -1
- package/dist/skeleton/skeleton2.js +1 -1
- package/dist/sort-button/sort-button.d.ts +1 -1
- package/dist/sort-button/sort-button2.js +1 -1
- package/dist/sparkline/sparkline.d.ts +1 -1
- package/dist/sparkline/sparkline2.js +1 -1
- package/dist/star-rating/star-rating.d.ts +1 -1
- package/dist/star-rating/star-rating2.js +1 -1
- package/dist/steps/steps.d.ts +2 -2
- package/dist/steps/steps2.js +2 -2
- package/dist/switch/switch-group2.js +1 -1
- package/dist/switch/switch2.js +1 -1
- package/dist/tabs/tabs-group.d.ts +1 -1
- package/dist/tabs/tabs-group2.js +1 -1
- package/dist/tabs/tabs.d.ts +2 -2
- package/dist/tabs/tabs2.js +2 -2
- package/dist/tag/tag.d.ts +1 -1
- package/dist/tag/tag2.js +1 -1
- package/dist/textarea/textarea.d.ts +2 -2
- package/dist/textarea/textarea2.js +1 -1
- package/dist/time/time.d.ts +1 -1
- package/dist/time/time2.js +1 -1
- package/dist/toast/toast.d.ts +1 -1
- package/dist/toast/toast2.js +1 -1
- package/dist/toggletip/toggletip-footer.d.ts +1 -1
- package/dist/toggletip/toggletip-footer2.js +1 -1
- package/dist/toggletip/toggletip-header.d.ts +1 -1
- package/dist/toggletip/toggletip-header2.js +1 -1
- package/dist/toggletip/toggletip.d.ts +1 -1
- package/dist/toggletip/toggletip2.js +1 -1
- package/dist/toolbar/toolbar.d.ts +1 -1
- package/dist/toolbar/toolbar2.js +1 -1
- package/dist/tooltip/tooltip.d.ts +1 -1
- package/dist/tooltip/tooltip2.js +1 -1
- package/dist/tree/tree-node.d.ts +2 -2
- package/dist/tree/tree-node2.js +1 -1
- package/dist/tree/tree-node2.js.map +1 -1
- package/dist/tree/tree.d.ts +2 -1
- package/dist/tree/tree2.js +1 -1
- package/dist/tree/tree2.js.map +1 -1
- package/dist/viewport/viewport-gridlines.d.ts +1 -1
- package/dist/viewport/viewport-gridlines2.js +1 -1
- package/dist/viewport/viewport.d.ts +1 -1
- package/dist/viewport/viewport2.js +1 -1
- package/dist/week/week.d.ts +1 -1
- package/dist/week/week2.js +1 -1
- package/package.json +7 -4
package/dist/tabs/tabs2.js
CHANGED
|
@@ -20,7 +20,7 @@ var _ = class extends h(f) {
|
|
|
20
20
|
static {
|
|
21
21
|
this.metadata = {
|
|
22
22
|
tag: "nve-tabs-item",
|
|
23
|
-
version: "2.
|
|
23
|
+
version: "2.10.0",
|
|
24
24
|
parents: ["nve-tabs"]
|
|
25
25
|
};
|
|
26
26
|
}
|
|
@@ -53,7 +53,7 @@ var v = class extends f {
|
|
|
53
53
|
static {
|
|
54
54
|
this.metadata = {
|
|
55
55
|
tag: "nve-tabs",
|
|
56
|
-
version: "2.
|
|
56
|
+
version: "2.10.0",
|
|
57
57
|
children: ["nve-tabs-item"]
|
|
58
58
|
};
|
|
59
59
|
}
|
package/dist/tag/tag.d.ts
CHANGED
|
@@ -47,7 +47,7 @@ export declare class Tag extends Tag_base {
|
|
|
47
47
|
i18n: Partial<import("@nvidia-elements/core/internal").I18nStrings & {
|
|
48
48
|
__set: boolean;
|
|
49
49
|
}>;
|
|
50
|
-
render(): import("lit").TemplateResult<1>;
|
|
50
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
51
51
|
constructor();
|
|
52
52
|
}
|
|
53
53
|
export {};
|
package/dist/tag/tag2.js
CHANGED
|
@@ -23,9 +23,9 @@ import { Control } from '@nvidia-elements/core/forms';
|
|
|
23
23
|
export declare class Textarea extends Control {
|
|
24
24
|
static styles: CSSResult[];
|
|
25
25
|
/** @private */
|
|
26
|
-
protected get prefixContent(): import("lit").TemplateResult<1>;
|
|
26
|
+
protected get prefixContent(): import("lit-html").TemplateResult<1>;
|
|
27
27
|
/** @private */
|
|
28
|
-
protected get suffixContent(): import("lit").TemplateResult<1>;
|
|
28
|
+
protected get suffixContent(): import("lit-html").TemplateResult<1>;
|
|
29
29
|
static readonly metadata: {
|
|
30
30
|
tag: string;
|
|
31
31
|
version: string;
|
package/dist/time/time.d.ts
CHANGED
|
@@ -31,5 +31,5 @@ export declare class Time extends Control implements ContainerElement {
|
|
|
31
31
|
static elementDefinitions: {
|
|
32
32
|
[IconButton.metadata.tag]: typeof IconButton;
|
|
33
33
|
};
|
|
34
|
-
protected get suffixContent(): import("lit").TemplateResult<1>;
|
|
34
|
+
protected get suffixContent(): import("lit-html").TemplateResult<1>;
|
|
35
35
|
}
|
package/dist/time/time2.js
CHANGED
package/dist/toast/toast.d.ts
CHANGED
|
@@ -92,6 +92,6 @@ export declare class Toast extends LitElement {
|
|
|
92
92
|
protected typeNativePopoverController: TypeNativePopoverController<Toast>;
|
|
93
93
|
/** @private */
|
|
94
94
|
_internals: ElementInternals;
|
|
95
|
-
render(): import("lit").TemplateResult<1>;
|
|
95
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
96
96
|
connectedCallback(): void;
|
|
97
97
|
}
|
package/dist/toast/toast2.js
CHANGED
|
@@ -50,7 +50,7 @@ export declare class Toolbar extends LitElement implements ContainerElement {
|
|
|
50
50
|
private prefixElements;
|
|
51
51
|
private suffixElements;
|
|
52
52
|
private defaultElements;
|
|
53
|
-
render(): import("lit").TemplateResult<1>;
|
|
53
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
54
54
|
connectedCallback(): void;
|
|
55
55
|
firstUpdated(props: PropertyValues<this>): void;
|
|
56
56
|
updated(props: PropertyValues<this>): void;
|
package/dist/toolbar/toolbar2.js
CHANGED
|
@@ -72,6 +72,6 @@ export declare class Tooltip extends LitElement {
|
|
|
72
72
|
protected typeNativePopoverController: TypeNativePopoverController<Tooltip>;
|
|
73
73
|
/** @private */
|
|
74
74
|
_internals: ElementInternals;
|
|
75
|
-
render(): import("lit").TemplateResult<1>;
|
|
75
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
76
76
|
connectedCallback(): void;
|
|
77
77
|
}
|
package/dist/tooltip/tooltip2.js
CHANGED
package/dist/tree/tree-node.d.ts
CHANGED
|
@@ -65,7 +65,7 @@ export declare class TreeNode extends LitElement {
|
|
|
65
65
|
/** @private */
|
|
66
66
|
slot: string;
|
|
67
67
|
/**
|
|
68
|
-
* Returns
|
|
68
|
+
* Returns the slotted child tree nodes.
|
|
69
69
|
*/
|
|
70
70
|
readonly nodes: TreeNode[];
|
|
71
71
|
/** @private */
|
|
@@ -86,7 +86,7 @@ export declare class TreeNode extends LitElement {
|
|
|
86
86
|
};
|
|
87
87
|
static styles: import("lit").CSSResult[];
|
|
88
88
|
_internals: ElementInternals;
|
|
89
|
-
render(): import("lit").TemplateResult<1>;
|
|
89
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
90
90
|
connectedCallback(): void;
|
|
91
91
|
disconnectedCallback(): void;
|
|
92
92
|
/** opens and sets the expanded state automatically if behaviorExpand is true */
|
package/dist/tree/tree-node2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree-node2.js","names":[],"sources":["../../src/tree/tree-node.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport {\n I18nController,\n TypeExpandableController,\n TypeSelectableController,\n attachInternals,\n audit,\n getFlattenedFocusableItems,\n hostAttr,\n scopedRegistry,\n stateExpanded,\n stateHighlighted,\n stateSelected,\n typeAnchor,\n typeSSR,\n useStyles\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { Checkbox } from '@nvidia-elements/core/checkbox';\nimport type { Tree } from './tree.js';\nimport styles from './tree-node.css?inline';\nimport { updateNodeSelection } from './utils.js';\n\n/**\n * @element nve-tree-node\n * @description A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.\n * @documentation https://nvidia.github.io/elements/docs/elements/tree/\n * @since 1.2.0\n * @entrypoint \\@nvidia-elements/core/tree\n * @event open - Dispatched when the node opens.\n * @event close - Dispatched when the node closes.\n * @event select - Dispatched when the node selection state changes.\n * @command --select - use to select the node\n * @command --deselect - use to deselect the node\n * @command --toggle-select - use to toggle the node selection state\n * @command --open - use to open the node\n * @command --close - use to close the node\n * @command --toggle - use to toggle open / closed state of the node\n * @slot - Use default slot for basic text content or nested <nve-tree-node> elements.\n * @slot content - Use only for extended long form content containing interactive elements or form inputs.\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --font-size\n * @cssprop --min-height\n * @cssprop --text-wrap\n * @cssprop --font-weight\n * @cssprop --width\n\n * @csspart icon-button - The icon button element\n * @csspart icon - The icon element\n * @csspart checkbox - The checkbox element\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/treeview/\n *\n */\n@audit()\n@typeSSR({ log: false }) // warning about ssr mismatch disabled as tree node will never be a 1:1 match in ssr due to performance constraints and slot complexity\n@typeAnchor()\n@stateSelected()\n@stateExpanded()\n@scopedRegistry()\n@stateHighlighted()\nexport class TreeNode extends LitElement {\n /**\n * Determines if node is in an expanded state.\n */\n @property({ type: Boolean, reflect: true }) expanded = false;\n\n /**\n * Determines whether if node is in a selected state.\n */\n @property({ type: Boolean, reflect: true }) selected = false;\n\n /**\n * Determines whether a node can be expandable. Expandable by default if slotted nodes exist.\n */\n @property({ type: Boolean }) expandable = false;\n\n /**\n * Determines whether a node can be in a selected state. Nodes can be in a single or multi select state.\n */\n @property({ type: String }) selectable: 'single' | 'multi';\n\n /**\n * Determines the highlighted state of the element. Highlighted states serve non-interactive selections where nodes may relate to other selected portions of the UI.\n */\n @property({ type: Boolean }) highlighted = false;\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 /** @private */\n @hostAttr() slot = 'nodes';\n\n get #tree() {\n return this.closest<Tree>('nve-tree');\n }\n\n /**\n * Returns list of child nodes\n */\n @queryAssignedElements({ slot: 'nodes' }) readonly nodes!: TreeNode[];\n\n /** @private */\n @state() indeterminate = false;\n\n /** @private */\n @state() behaviorExpand = false;\n\n /** @private */\n @state() behaviorSelect = false;\n\n #typeExpandableController = new TypeExpandableController(this);\n\n #typeSelectableController = new TypeSelectableController(this);\n\n get #isExpandable() {\n return this.expandable || this.expanded || !!this.nodes?.length;\n }\n\n static metadata = {\n tag: 'nve-tree-node',\n version: '0.0.0',\n parents: ['nve-tree', 'nve-tree-node']\n };\n\n static elementDefinitions = {\n [IconButton.metadata.tag]: IconButton,\n [Icon.metadata.tag]: Icon,\n [Checkbox.metadata.tag]: Checkbox\n };\n\n static styles = useStyles([styles]);\n\n declare _internals: ElementInternals;\n\n /* eslint-disable @nvidia-elements/lint/no-missing-control-label */\n render() {\n return html`\n <div internal-host @slotchange=${this.#nodeUpdate}>\n <div part=\"_node\">\n ${\n this.#isExpandable\n ? html`\n <nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @pointerup=${this.#toggleExpand} role=\"presentation\" tabindex=\"-1\" size=\"sm\" container=\"inline\" nofocus>\n <nve-icon part=\"icon\" name=\"caret\" direction=${this.expanded ? 'down' : 'right'} size=\"sm\"></nve-icon>\n </nve-icon-button>`\n : nothing\n }\n ${\n this.selectable === 'multi'\n ? html`\n <nve-checkbox part=\"checkbox\" nofocus>\n <input type=\"checkbox\" @change=${this.#toggleMultiSelection} .checked=${this.selected} .indeterminate=${this.indeterminate} .ariaLabel=${this.i18n.expand} tabindex=\"-1\" />\n </nve-checkbox>`\n : nothing\n }\n <div tabindex=\"0\" part=\"_node-header\">\n <slot class=\"node-title\" @click=${this.#nodeHeaderClick}></slot>\n <slot name=\"content\" part=\"_content\"></slot>\n </div>\n </div>\n <div role=\"group\" part=\"_nodes\"><slot name=\"nodes\"></slot></div>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'treeitem';\n this.addEventListener('keydown', this.#onKeydown);\n this.addEventListener('keyup', this.#onKeyup);\n this.#nodeUpdate();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this.#onKeydown);\n this.removeEventListener('keyup', this.#onKeyup);\n }\n\n /** opens and sets the expanded state automatically if behaviorExpand is true */\n open() {\n this.#typeExpandableController.open();\n }\n\n /** closes and sets the expanded state automatically if behaviorExpand is true */\n close() {\n this.#typeExpandableController.close();\n }\n\n #nodeUpdate() {\n this.requestUpdate();\n this.#toggleExpandableState();\n }\n\n #toggleExpandableState() {\n this.#isExpandable ? this._internals.states.add('is-expandable') : this._internals.states.delete('is-expandable');\n }\n\n #onKeydown = (e: KeyboardEvent) => {\n const isSelectionKey = this.selectable && e.code === 'Space';\n const isExpansionKey = this.#isExpandable && (e.code === 'ArrowLeft' || e.code === 'ArrowRight');\n\n if (e.target === this && (isSelectionKey || isExpansionKey)) {\n e.preventDefault();\n }\n };\n\n #onKeyup = (e: KeyboardEvent) => {\n if (this.#isExpandable && e.code === 'ArrowLeft' && e.target === this) {\n this.close();\n }\n\n if (this.#isExpandable && e.code === 'ArrowRight' && e.target === this) {\n this.open();\n }\n\n if (e.code === 'Space' && e.target === this && this.selectable) {\n this.#toggleSelection();\n }\n };\n\n #nodeHeaderClick(e: Event) {\n const hasFocusableElements = getFlattenedFocusableItems(e.currentTarget as HTMLElement).length;\n if (this.#isExpandable && !this.selectable && !hasFocusableElements) {\n this.#toggleExpand();\n }\n\n if (this.selectable && (!hasFocusableElements || (e.target as HTMLElement).localName === 'a')) {\n this.#toggleSelection();\n }\n }\n\n #toggleExpand() {\n this.#typeExpandableController.toggle();\n }\n\n #toggleSelection() {\n if (this.selectable === 'single') {\n this.#toggleSingleSelection();\n }\n\n if (this.selectable === 'multi') {\n this.#toggleMultiSelection();\n }\n }\n\n #toggleSingleSelection() {\n this.#typeSelectableController.toggle();\n if (this.behaviorSelect) {\n this.#tree!.nodes.filter(n => n !== this).forEach(n => (n.selected = false));\n }\n }\n\n #toggleMultiSelection() {\n this.#typeSelectableController.toggle();\n\n if (this.behaviorSelect) {\n this.nodes.forEach(n => {\n n.selected = this.selected;\n n.indeterminate = false;\n });\n this.#tree!.nodes.forEach(node => updateNodeSelection(node));\n }\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tree-node2.js","names":[],"sources":["../../src/tree/tree-node.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport {\n I18nController,\n TypeExpandableController,\n TypeSelectableController,\n attachInternals,\n audit,\n getFlattenedFocusableItems,\n hostAttr,\n scopedRegistry,\n stateExpanded,\n stateHighlighted,\n stateSelected,\n typeAnchor,\n typeSSR,\n useStyles\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { Checkbox } from '@nvidia-elements/core/checkbox';\nimport type { Tree } from './tree.js';\nimport styles from './tree-node.css?inline';\nimport { updateNodeSelection } from './utils.js';\n\n/**\n * @element nve-tree-node\n * @description A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.\n * @documentation https://nvidia.github.io/elements/docs/elements/tree/\n * @since 1.2.0\n * @entrypoint \\@nvidia-elements/core/tree\n * @event open - Dispatched when the node opens.\n * @event close - Dispatched when the node closes.\n * @event select - Dispatched when the node selection state changes.\n * @command --select - use to select the node\n * @command --deselect - use to deselect the node\n * @command --toggle-select - use to toggle the node selection state\n * @command --open - use to open the node\n * @command --close - use to close the node\n * @command --toggle - use to toggle open / closed state of the node\n * @slot - Use default slot for basic text content or nested <nve-tree-node> elements.\n * @slot content - Use only for extended long form content containing interactive elements or form inputs.\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --font-size\n * @cssprop --min-height\n * @cssprop --text-wrap\n * @cssprop --font-weight\n * @cssprop --width\n\n * @csspart icon-button - The icon button element\n * @csspart icon - The icon element\n * @csspart checkbox - The checkbox element\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/treeview/\n *\n */\n@audit()\n@typeSSR({ log: false }) // warning about ssr mismatch disabled as tree node will never be a 1:1 match in ssr due to performance constraints and slot complexity\n@typeAnchor()\n@stateSelected()\n@stateExpanded()\n@scopedRegistry()\n@stateHighlighted()\nexport class TreeNode extends LitElement {\n /**\n * Determines if node is in an expanded state.\n */\n @property({ type: Boolean, reflect: true }) expanded = false;\n\n /**\n * Determines whether if node is in a selected state.\n */\n @property({ type: Boolean, reflect: true }) selected = false;\n\n /**\n * Determines whether a node can be expandable. Expandable by default if slotted nodes exist.\n */\n @property({ type: Boolean }) expandable = false;\n\n /**\n * Determines whether a node can be in a selected state. Nodes can be in a single or multi select state.\n */\n @property({ type: String }) selectable: 'single' | 'multi';\n\n /**\n * Determines the highlighted state of the element. Highlighted states serve non-interactive selections where nodes may relate to other selected portions of the UI.\n */\n @property({ type: Boolean }) highlighted = false;\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 /** @private */\n @hostAttr() slot = 'nodes';\n\n get #tree() {\n return this.closest<Tree>('nve-tree');\n }\n\n /**\n * Returns the slotted child tree nodes.\n */\n @queryAssignedElements({ slot: 'nodes' }) readonly nodes!: TreeNode[];\n\n /** @private */\n @state() indeterminate = false;\n\n /** @private */\n @state() behaviorExpand = false;\n\n /** @private */\n @state() behaviorSelect = false;\n\n #typeExpandableController = new TypeExpandableController(this);\n\n #typeSelectableController = new TypeSelectableController(this);\n\n get #isExpandable() {\n return this.expandable || this.expanded || !!this.nodes?.length;\n }\n\n static metadata = {\n tag: 'nve-tree-node',\n version: '0.0.0',\n parents: ['nve-tree', 'nve-tree-node']\n };\n\n static elementDefinitions = {\n [IconButton.metadata.tag]: IconButton,\n [Icon.metadata.tag]: Icon,\n [Checkbox.metadata.tag]: Checkbox\n };\n\n static styles = useStyles([styles]);\n\n declare _internals: ElementInternals;\n\n /* eslint-disable @nvidia-elements/lint/no-missing-control-label */\n render() {\n return html`\n <div internal-host @slotchange=${this.#nodeUpdate}>\n <div part=\"_node\">\n ${\n this.#isExpandable\n ? html`\n <nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @pointerup=${this.#toggleExpand} role=\"presentation\" tabindex=\"-1\" size=\"sm\" container=\"inline\" nofocus>\n <nve-icon part=\"icon\" name=\"caret\" direction=${this.expanded ? 'down' : 'right'} size=\"sm\"></nve-icon>\n </nve-icon-button>`\n : nothing\n }\n ${\n this.selectable === 'multi'\n ? html`\n <nve-checkbox part=\"checkbox\" nofocus>\n <input type=\"checkbox\" @change=${this.#toggleMultiSelection} .checked=${this.selected} .indeterminate=${this.indeterminate} .ariaLabel=${this.i18n.expand} tabindex=\"-1\" />\n </nve-checkbox>`\n : nothing\n }\n <div tabindex=\"0\" part=\"_node-header\">\n <slot class=\"node-title\" @click=${this.#nodeHeaderClick}></slot>\n <slot name=\"content\" part=\"_content\"></slot>\n </div>\n </div>\n <div role=\"group\" part=\"_nodes\"><slot name=\"nodes\"></slot></div>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'treeitem';\n this.addEventListener('keydown', this.#onKeydown);\n this.addEventListener('keyup', this.#onKeyup);\n this.#nodeUpdate();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this.#onKeydown);\n this.removeEventListener('keyup', this.#onKeyup);\n }\n\n /** opens and sets the expanded state automatically if behaviorExpand is true */\n open() {\n this.#typeExpandableController.open();\n }\n\n /** closes and sets the expanded state automatically if behaviorExpand is true */\n close() {\n this.#typeExpandableController.close();\n }\n\n #nodeUpdate() {\n this.requestUpdate();\n this.#toggleExpandableState();\n }\n\n #toggleExpandableState() {\n this.#isExpandable ? this._internals.states.add('is-expandable') : this._internals.states.delete('is-expandable');\n }\n\n #onKeydown = (e: KeyboardEvent) => {\n const isSelectionKey = this.selectable && e.code === 'Space';\n const isExpansionKey = this.#isExpandable && (e.code === 'ArrowLeft' || e.code === 'ArrowRight');\n\n if (e.target === this && (isSelectionKey || isExpansionKey)) {\n e.preventDefault();\n }\n };\n\n #onKeyup = (e: KeyboardEvent) => {\n if (this.#isExpandable && e.code === 'ArrowLeft' && e.target === this) {\n this.close();\n }\n\n if (this.#isExpandable && e.code === 'ArrowRight' && e.target === this) {\n this.open();\n }\n\n if (e.code === 'Space' && e.target === this && this.selectable) {\n this.#toggleSelection();\n }\n };\n\n #nodeHeaderClick(e: Event) {\n const hasFocusableElements = getFlattenedFocusableItems(e.currentTarget as HTMLElement).length;\n if (this.#isExpandable && !this.selectable && !hasFocusableElements) {\n this.#toggleExpand();\n }\n\n if (this.selectable && (!hasFocusableElements || (e.target as HTMLElement).localName === 'a')) {\n this.#toggleSelection();\n }\n }\n\n #toggleExpand() {\n this.#typeExpandableController.toggle();\n }\n\n #toggleSelection() {\n if (this.selectable === 'single') {\n this.#toggleSingleSelection();\n }\n\n if (this.selectable === 'multi') {\n this.#toggleMultiSelection();\n }\n }\n\n #toggleSingleSelection() {\n this.#typeSelectableController.toggle();\n if (this.behaviorSelect) {\n this.#tree!.nodes.filter(n => n !== this).forEach(n => (n.selected = false));\n }\n }\n\n #toggleMultiSelection() {\n this.#typeSelectableController.toggle();\n\n if (this.behaviorSelect) {\n this.nodes.forEach(n => {\n n.selected = this.selected;\n n.indeterminate = false;\n });\n this.#tree!.nodes.forEach(node => updateNodeSelection(node));\n }\n }\n}\n"],"mappings":"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"}
|
package/dist/tree/tree.d.ts
CHANGED
|
@@ -42,12 +42,13 @@ export declare class Tree extends LitElement {
|
|
|
42
42
|
children: string[];
|
|
43
43
|
};
|
|
44
44
|
_internals: ElementInternals;
|
|
45
|
+
/** Returns the tree nodes in document order. */
|
|
45
46
|
get nodes(): TreeNode[];
|
|
46
47
|
/** @private */
|
|
47
48
|
get keynavListConfig(): KeynavListConfig;
|
|
48
49
|
/** @private */
|
|
49
50
|
get openNodes(): TreeNode[];
|
|
50
|
-
render(): import("lit").TemplateResult<1>;
|
|
51
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
51
52
|
connectedCallback(): void;
|
|
52
53
|
disconnectedCallback(): void;
|
|
53
54
|
updated(props: PropertyValues<this>): Promise<void>;
|
package/dist/tree/tree2.js
CHANGED
package/dist/tree/tree2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree2.js","names":[],"sources":["../../src/tree/tree.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 type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n appendRootNodeStyle,\n attachInternals,\n audit,\n keyNavigationList,\n onChildListMutation,\n useStyles\n} from '@nvidia-elements/core/internal';\nimport { updateNodeSelection } from './utils.js';\nimport { TreeNode } from './tree-node.js';\nimport styles from './tree.css?inline';\nimport globalStyles from './tree.global.css?inline';\n\n/**\n * @element nve-tree\n * @description A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.\n * @documentation https://nvidia.github.io/elements/docs/elements/tree/\n * @since 1.2.0\n * @entrypoint \\@nvidia-elements/core/tree\n * @slot - tree nodes\n * @cssprop --max-width\n * @cssprop --node-border - Border style for tree node depth indicator\n * @event open - Dispatched from a child nve-tree-node when opened.\n * @event close - Dispatched from a child nve-tree-node when closed.\n * @event select - Dispatched from a child nve-tree-node when its selection state changes.\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/treeview/\n *\n */\n@audit()\n@keyNavigationList<Tree>()\nexport class Tree extends LitElement {\n /**\n * Determines whether all nodes can be in a selected state. Nodes can be in a single or multi select state.\n */\n @property({ type: String }) selectable: 'single' | 'multi';\n\n /**\n * Determines whether the tree nodes should handle auto-expanding behavior.\n */\n @property({ type: Boolean, attribute: 'behavior-expand' }) behaviorExpand = false;\n\n /**\n * Determines whether the tree nodes should handle auto-select behavior.\n */\n @property({ type: Boolean, attribute: 'behavior-select' }) behaviorSelect = false;\n\n /**\n * Determines if the node depth border renders.\n */\n @property({ type: Boolean, reflect: true }) border = false;\n\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-tree',\n version: '0.0.0',\n children: ['nve-tree-node']\n };\n\n _internals: ElementInternals;\n\n get nodes() {\n return Array.from(this.querySelectorAll<TreeNode>(TreeNode.metadata.tag));\n }\n\n /** @private */\n get keynavListConfig(): KeynavListConfig {\n return {\n items: this.openNodes\n .map(node => node.shadowRoot!.querySelector('[part=\"_node-header\"]'))\n .filter((el): el is HTMLElement => el !== null),\n layout: 'vertical'\n };\n }\n\n /** @private */\n get openNodes(): TreeNode[] {\n return this.nodes.filter(\n node => node.expanded || (node.parentNode as TreeNode).expanded || (node.parentNode as Tree) === this\n );\n }\n\n render() {\n return html`\n <div internal-host>\n <slot name=\"nodes\"></slot>\n </div>\n `;\n }\n\n #observers: MutationObserver[] = [];\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n appendRootNodeStyle(this, globalStyles);\n this._internals.role = 'tree';\n\n this.#observers.push(\n onChildListMutation(\n this,\n () => {\n this.#syncNodes();\n },\n { subtree: true }\n )\n );\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#observers.forEach(o => o.disconnect());\n }\n\n async updated(props: PropertyValues<this>) {\n super.updated(props);\n await this.updateComplete;\n this.#syncNodes();\n }\n\n #syncNodes() {\n this.#syncNodeOptions();\n this.#syncNodeSelections();\n }\n\n #syncNodeOptions() {\n this.nodes.forEach(node => {\n node.selectable = this.selectable;\n node.behaviorExpand = this.behaviorExpand;\n node.behaviorSelect = this.behaviorSelect;\n });\n }\n\n #syncNodeSelections() {\n if (this.behaviorSelect && this.selectable === 'multi') {\n this.nodes.forEach(node => updateNodeSelection(node));\n }\n }\n}\n"],"mappings":";;;;;;;;;;;;;;AAqCO,IAAM,IAAN,cAAmB,EAAW;;
|
|
1
|
+
{"version":3,"file":"tree2.js","names":[],"sources":["../../src/tree/tree.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 type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n appendRootNodeStyle,\n attachInternals,\n audit,\n keyNavigationList,\n onChildListMutation,\n useStyles\n} from '@nvidia-elements/core/internal';\nimport { updateNodeSelection } from './utils.js';\nimport { TreeNode } from './tree-node.js';\nimport styles from './tree.css?inline';\nimport globalStyles from './tree.global.css?inline';\n\n/**\n * @element nve-tree\n * @description A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.\n * @documentation https://nvidia.github.io/elements/docs/elements/tree/\n * @since 1.2.0\n * @entrypoint \\@nvidia-elements/core/tree\n * @slot - tree nodes\n * @cssprop --max-width\n * @cssprop --node-border - Border style for tree node depth indicator\n * @event open - Dispatched from a child nve-tree-node when opened.\n * @event close - Dispatched from a child nve-tree-node when closed.\n * @event select - Dispatched from a child nve-tree-node when its selection state changes.\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/treeview/\n *\n */\n@audit()\n@keyNavigationList<Tree>()\nexport class Tree extends LitElement {\n /**\n * Determines whether all nodes can be in a selected state. Nodes can be in a single or multi select state.\n */\n @property({ type: String }) selectable: 'single' | 'multi';\n\n /**\n * Determines whether the tree nodes should handle auto-expanding behavior.\n */\n @property({ type: Boolean, attribute: 'behavior-expand' }) behaviorExpand = false;\n\n /**\n * Determines whether the tree nodes should handle auto-select behavior.\n */\n @property({ type: Boolean, attribute: 'behavior-select' }) behaviorSelect = false;\n\n /**\n * Determines if the node depth border renders.\n */\n @property({ type: Boolean, reflect: true }) border = false;\n\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-tree',\n version: '0.0.0',\n children: ['nve-tree-node']\n };\n\n _internals: ElementInternals;\n\n /** Returns the tree nodes in document order. */\n get nodes() {\n return Array.from(this.querySelectorAll<TreeNode>(TreeNode.metadata.tag));\n }\n\n /** @private */\n get keynavListConfig(): KeynavListConfig {\n return {\n items: this.openNodes\n .map(node => node.shadowRoot!.querySelector('[part=\"_node-header\"]'))\n .filter((el): el is HTMLElement => el !== null),\n layout: 'vertical'\n };\n }\n\n /** @private */\n get openNodes(): TreeNode[] {\n return this.nodes.filter(\n node => node.expanded || (node.parentNode as TreeNode).expanded || (node.parentNode as Tree) === this\n );\n }\n\n render() {\n return html`\n <div internal-host>\n <slot name=\"nodes\"></slot>\n </div>\n `;\n }\n\n #observers: MutationObserver[] = [];\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n appendRootNodeStyle(this, globalStyles);\n this._internals.role = 'tree';\n\n this.#observers.push(\n onChildListMutation(\n this,\n () => {\n this.#syncNodes();\n },\n { subtree: true }\n )\n );\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#observers.forEach(o => o.disconnect());\n }\n\n async updated(props: PropertyValues<this>) {\n super.updated(props);\n await this.updateComplete;\n this.#syncNodes();\n }\n\n #syncNodes() {\n this.#syncNodeOptions();\n this.#syncNodeSelections();\n }\n\n #syncNodeOptions() {\n this.nodes.forEach(node => {\n node.selectable = this.selectable;\n node.behaviorExpand = this.behaviorExpand;\n node.behaviorSelect = this.behaviorSelect;\n });\n }\n\n #syncNodeSelections() {\n if (this.behaviorSelect && this.selectable === 'multi') {\n this.nodes.forEach(node => updateNodeSelection(node));\n }\n }\n}\n"],"mappings":";;;;;;;;;;;;;;AAqCO,IAAM,IAAN,cAAmB,EAAW;;EA6DF,aApD2C,KAAA,iBAAA,IAKA,KAAA,iBAAA,IAKvB,KAAA,SAAA,IA0CpB,KAAA,KAAA,CAAC;;;EAxClB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,eAAe;EAC5B;;CAKA,IAAI,QAAQ;EACV,OAAO,MAAM,KAAK,KAAK,iBAA2B,EAAS,SAAS,GAAG,CAAC;CAC1E;CAGA,IAAI,mBAAqC;EACvC,OAAO;GACL,OAAO,KAAK,UACT,KAAI,MAAQ,EAAK,WAAY,cAAc,yBAAuB,CAAC,CAAC,CACpE,QAAQ,MAA0B,MAAO,IAAI;GAChD,QAAQ;EACV;CACF;CAGA,IAAI,YAAwB;EAC1B,OAAO,KAAK,MAAM,QAChB,MAAQ,EAAK,YAAa,EAAK,WAAwB,YAAa,EAAK,eAAwB,IACnG;CACF;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA;CAEA,oBAAoB;EAMlB,AALA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,EAAoB,MAAM,CAAY,GACtC,KAAK,WAAW,OAAO,QAEvB,KAAK,GAAW,KACd,EACE,YACM;GACJ,KAAK,GAAW;EAClB,GACA,EAAE,SAAS,GAAK,CAClB,CACF;CACF;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,GAAW,SAAQ,MAAK,EAAE,WAAW,CAAC;CAC7C;CAEA,MAAM,QAAQ,GAA6B;EAGzC,AAFA,MAAM,QAAQ,CAAK,GACnB,MAAM,KAAK,gBACX,KAAK,GAAW;CAClB;CAEA,KAAa;EAEX,AADA,KAAK,GAAiB,GACtB,KAAK,GAAoB;CAC3B;CAEA,KAAmB;EACjB,KAAK,MAAM,SAAQ,MAAQ;GAGzB,AAFA,EAAK,aAAa,KAAK,YACvB,EAAK,iBAAiB,KAAK,gBAC3B,EAAK,iBAAiB,KAAK;EAC7B,CAAC;CACH;CAEA,KAAsB;EACpB,AAAI,KAAK,kBAAkB,KAAK,eAAe,WAC7C,KAAK,MAAM,SAAQ,MAAQ,EAAoB,CAAI,CAAC;CAExD;AACF;AAzGG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAKzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAKxD,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAKxD,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GArB3C,IAAA,EAAA,CAAA,EAAM,GACN,EAAwB,CAAA,GAAA,CAAA"}
|
|
@@ -34,5 +34,5 @@ export declare class ViewportGridlines extends LitElement {
|
|
|
34
34
|
connectedCallback(): void;
|
|
35
35
|
disconnectedCallback(): void;
|
|
36
36
|
protected willUpdate(changed: PropertyValues<this>): void;
|
|
37
|
-
render(): typeof nothing | import("lit").TemplateResult<1>;
|
|
37
|
+
render(): typeof nothing | import("lit-html").TemplateResult<1>;
|
|
38
38
|
}
|
|
@@ -69,7 +69,7 @@ export declare class Viewport extends LitElement {
|
|
|
69
69
|
connectedCallback(): void;
|
|
70
70
|
disconnectedCallback(): void;
|
|
71
71
|
protected updated(changed: PropertyValues<this>): void;
|
|
72
|
-
render(): import("lit").TemplateResult<1>;
|
|
72
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
73
73
|
/** Converts a content-space point to viewport CSS pixels. */
|
|
74
74
|
toViewportCoords(contentX: number, contentY: number): ViewportPoint;
|
|
75
75
|
/** Converts a viewport CSS-pixel point to content space. */
|
package/dist/week/week.d.ts
CHANGED
|
@@ -31,5 +31,5 @@ export declare class Week extends Control implements ContainerElement {
|
|
|
31
31
|
static elementDefinitions: {
|
|
32
32
|
[IconButton.metadata.tag]: typeof IconButton;
|
|
33
33
|
};
|
|
34
|
-
protected get suffixContent(): import("lit").TemplateResult<1>;
|
|
34
|
+
protected get suffixContent(): import("lit-html").TemplateResult<1>;
|
|
35
35
|
}
|
package/dist/week/week2.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nvidia-elements/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.10.0",
|
|
4
4
|
"release": {
|
|
5
5
|
"extends": "../../release.config.js"
|
|
6
6
|
},
|
|
@@ -12,7 +12,10 @@
|
|
|
12
12
|
"design-system",
|
|
13
13
|
"ui-components",
|
|
14
14
|
"accessibility",
|
|
15
|
-
"lit"
|
|
15
|
+
"lit",
|
|
16
|
+
"react",
|
|
17
|
+
"vue",
|
|
18
|
+
"angular"
|
|
16
19
|
],
|
|
17
20
|
"homepage": "https://NVIDIA.github.io/elements/",
|
|
18
21
|
"repository": {
|
|
@@ -992,13 +995,13 @@
|
|
|
992
995
|
"@internals/testing": "0.0.0",
|
|
993
996
|
"@internals/vite": "0.0.0",
|
|
994
997
|
"@lit-labs/virtualizer": "2.1.1",
|
|
995
|
-
"@nvidia-elements/lint": "2.7.
|
|
998
|
+
"@nvidia-elements/lint": "2.7.1",
|
|
996
999
|
"@nvidia-elements/styles": "^2.1.3",
|
|
997
1000
|
"@typescript/lib-dom": "npm:@types/web@0.0.312",
|
|
998
1001
|
"@vitest/browser": "5.0.0",
|
|
999
1002
|
"@vitest/coverage-istanbul": "5.0.0",
|
|
1000
1003
|
"axe-core": "4.11.0",
|
|
1001
|
-
"eslint": "10.
|
|
1004
|
+
"eslint": "10.11.0",
|
|
1002
1005
|
"lit": "3.3.3",
|
|
1003
1006
|
"lit-analyzer": "2.0.3",
|
|
1004
1007
|
"lit-html": "3.3.3",
|