@nvidia-elements/core 0.0.2 → 0.0.4
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 +20 -28
- package/NOTICE.md +119 -0
- package/README.md +1 -10
- package/dist/_virtual/{_@oxc-project_runtime@0.115.0 → _@oxc-project_runtime@0.123.0}/helpers/decorate.js +1 -1
- package/dist/accordion/accordion2.js +5 -5
- package/dist/alert/alert-banner2.js +1 -1
- package/dist/alert/alert-group2.js +2 -2
- package/dist/alert/alert.examples.js.map +1 -1
- package/dist/alert/alert.examples.json +1 -1
- package/dist/alert/alert2.js +2 -2
- package/dist/avatar/avatar-group2.js +1 -1
- package/dist/avatar/avatar2.js +2 -2
- package/dist/badge/badge2.js +2 -2
- package/dist/breadcrumb/breadcrumb2.js +2 -2
- package/dist/bundle.d.ts +2 -0
- package/dist/bundles/index.d.ts +214 -35
- package/dist/bundles/index.js +13 -6952
- package/dist/button/button.examples.js.map +1 -1
- package/dist/button/button.examples.json +3 -3
- package/dist/button/button2.js +2 -2
- package/dist/button-group/button-group2.js +2 -2
- package/dist/card/card2.js +5 -5
- package/dist/chat-message/chat-message2.js +2 -2
- package/dist/checkbox/checkbox-group2.js +2 -2
- package/dist/checkbox/checkbox2.js +2 -2
- package/dist/checkbox/define.js +6 -3
- package/dist/checkbox/define.js.map +1 -1
- package/dist/color/color2.js +2 -2
- package/dist/color/define.js +5 -3
- package/dist/color/define.js.map +1 -1
- package/dist/combobox/combobox.d.ts +5 -0
- package/dist/combobox/combobox.examples.js.map +1 -1
- package/dist/combobox/combobox.examples.json +22 -0
- package/dist/combobox/combobox.js +1 -1
- package/dist/combobox/combobox.js.map +1 -1
- package/dist/combobox/combobox2.js +110 -61
- package/dist/combobox/combobox2.js.map +1 -1
- package/dist/combobox/define.js +5 -3
- package/dist/combobox/define.js.map +1 -1
- package/dist/copy-button/copy-button2.js +2 -2
- package/dist/custom-elements-jsx.d.ts +125 -63
- package/dist/custom-elements-vue.d.ts +125 -63
- package/dist/custom-elements.json +1626 -806
- package/dist/data.html.json +204 -46
- package/dist/data.snippets.json +9 -0
- package/dist/date/date2.js +2 -2
- package/dist/date/define.js +5 -3
- package/dist/date/define.js.map +1 -1
- package/dist/datetime/datetime2.js +2 -2
- package/dist/datetime/define.js +5 -3
- package/dist/datetime/define.js.map +1 -1
- package/dist/dialog/dialog-footer2.js +2 -2
- package/dist/dialog/dialog-header2.js +2 -2
- package/dist/dialog/dialog2.js +2 -2
- package/dist/divider/divider2.js +2 -2
- package/dist/dot/dot2.js +2 -2
- package/dist/drawer/drawer-content2.js +2 -2
- package/dist/drawer/drawer-footer2.js +2 -2
- package/dist/drawer/drawer-header2.js +2 -2
- package/dist/drawer/drawer2.js +2 -2
- package/dist/dropdown/dropdown-footer2.js +2 -2
- package/dist/dropdown/dropdown-header2.js +2 -2
- package/dist/dropdown/dropdown2.js +2 -2
- package/dist/dropdown-group/dropdown-group.js +2 -2
- package/dist/dropzone/dropzone.examples.js.map +1 -1
- package/dist/dropzone/dropzone.examples.json +3 -1
- package/dist/dropzone/dropzone2.js +2 -2
- package/dist/file/define.js +5 -3
- package/dist/file/define.js.map +1 -1
- package/dist/file/file2.js +1 -1
- package/dist/format-datetime/define.d.ts +6 -0
- package/dist/format-datetime/define.js +7 -0
- package/dist/format-datetime/define.js.map +1 -0
- package/dist/format-datetime/format-datetime.d.ts +74 -0
- package/dist/format-datetime/format-datetime.examples.js +6 -0
- package/dist/format-datetime/format-datetime.examples.js.map +1 -0
- package/dist/format-datetime/format-datetime.examples.json +87 -0
- package/dist/format-datetime/format-datetime.js +6 -0
- package/dist/format-datetime/format-datetime.js.map +1 -0
- package/dist/format-datetime/format-datetime2.js +77 -0
- package/dist/format-datetime/format-datetime2.js.map +1 -0
- package/dist/format-datetime/index.d.ts +1 -0
- package/dist/format-datetime/index.js +2 -0
- package/dist/format-relative-time/define.d.ts +6 -0
- package/dist/format-relative-time/define.js +7 -0
- package/dist/format-relative-time/define.js.map +1 -0
- package/dist/format-relative-time/format-relative-time.d.ts +47 -0
- package/dist/format-relative-time/format-relative-time.examples.js +6 -0
- package/dist/format-relative-time/format-relative-time.examples.js.map +1 -0
- package/dist/format-relative-time/format-relative-time.examples.json +69 -0
- package/dist/format-relative-time/format-relative-time.js +6 -0
- package/dist/format-relative-time/format-relative-time.js.map +1 -0
- package/dist/format-relative-time/format-relative-time2.js +118 -0
- package/dist/format-relative-time/format-relative-time2.js.map +1 -0
- package/dist/format-relative-time/index.d.ts +1 -0
- package/dist/format-relative-time/index.js +2 -0
- package/dist/forms/control/control2.js +2 -2
- package/dist/forms/control-group/control-group2.js +2 -2
- package/dist/forms/control-message/control-message2.js +2 -2
- package/dist/forms/forms.examples.js.map +1 -1
- package/dist/forms/forms.examples.json +4 -2
- package/dist/grid/cell/cell2.js +1 -1
- package/dist/grid/column/column.d.ts +1 -0
- package/dist/grid/column/column2.js +5 -2
- package/dist/grid/column/column2.js.map +1 -1
- package/dist/grid/footer/footer2.js +2 -2
- package/dist/grid/grid.examples.js.map +1 -1
- package/dist/grid/grid.examples.json +1 -1
- package/dist/grid/grid2.js +2 -2
- package/dist/grid/header/header2.js +2 -2
- package/dist/grid/placeholder/placeholder2.js +1 -1
- package/dist/grid/row/row2.js +2 -2
- package/dist/icon/icon2.js +3 -3
- package/dist/icon-button/icon-button2.js +2 -2
- package/dist/index.js +1 -1
- package/dist/input/define.js +6 -3
- package/dist/input/define.js.map +1 -1
- package/dist/input/input-group2.js +1 -1
- package/dist/input/input2.js +2 -2
- package/dist/internal/base/button.js +1 -1
- package/dist/internal/index.js +40 -40
- package/dist/internal/services/global.service.js +1 -1
- package/dist/internal/services/i18n.service.d.ts +1 -0
- package/dist/internal/services/i18n.service.js +2 -1
- package/dist/internal/services/i18n.service.js.map +1 -1
- package/dist/internal/utils/dom.d.ts +10 -0
- package/dist/internal/utils/dom.js +57 -51
- package/dist/internal/utils/dom.js.map +1 -1
- package/dist/logo/logo2.js +2 -2
- package/dist/menu/menu-item2.js +2 -2
- package/dist/menu/menu.d.ts +3 -0
- package/dist/menu/menu2.js +23 -2
- package/dist/menu/menu2.js.map +1 -1
- package/dist/month/define.js +5 -3
- package/dist/month/define.js.map +1 -1
- package/dist/month/month2.js +2 -2
- package/dist/notification/notification-group2.js +2 -2
- package/dist/notification/notification2.js +2 -2
- package/dist/page/page-panel/page-panel-content2.js +1 -1
- package/dist/page/page-panel/page-panel-footer2.js +2 -2
- package/dist/page/page-panel/page-panel-header2.js +2 -2
- package/dist/page/page-panel/page-panel2.js +2 -2
- package/dist/page/page.examples.js.map +1 -1
- package/dist/page/page.examples.json +0 -11
- package/dist/page/page2.js +2 -2
- package/dist/page-header/page-header.examples.js.map +1 -1
- package/dist/page-header/page-header.examples.json +2 -2
- package/dist/page-header/page-header2.js +1 -1
- package/dist/page-loader/page-loader.js +1 -1
- package/dist/page-loader/page-loader.js.map +1 -1
- package/dist/page-loader/page-loader2.js +2 -2
- package/dist/pagination/pagination2.js +2 -2
- package/dist/panel/panel2.js +5 -5
- package/dist/password/define.js +5 -3
- package/dist/password/define.js.map +1 -1
- package/dist/password/password2.js +2 -2
- package/dist/preferences-input/preferences-input2.js +2 -2
- package/dist/progress-bar/progress-bar2.js +2 -2
- package/dist/progress-ring/progress-ring2.js +2 -2
- package/dist/progressive-filter-chip/progressive-filter-chip2.js +2 -2
- package/dist/pulse/pulse2.js +2 -2
- package/dist/radio/define.js +6 -3
- package/dist/radio/define.js.map +1 -1
- package/dist/radio/radio-group2.js +2 -2
- package/dist/radio/radio2.js +2 -2
- package/dist/range/define.js +5 -3
- package/dist/range/define.js.map +1 -1
- package/dist/range/range2.js +2 -2
- package/dist/resize-handle/resize-handle.examples.js.map +1 -1
- package/dist/resize-handle/resize-handle.examples.json +3 -1
- package/dist/resize-handle/resize-handle2.js +2 -2
- package/dist/search/define.js +5 -3
- package/dist/search/define.js.map +1 -1
- package/dist/search/search2.js +2 -2
- package/dist/select/define.js +5 -3
- package/dist/select/define.js.map +1 -1
- package/dist/select/select2.js +2 -2
- package/dist/skeleton/skeleton.examples.js.map +1 -1
- package/dist/skeleton/skeleton.examples.json +3 -1
- package/dist/skeleton/skeleton2.js +2 -2
- package/dist/sort-button/sort-button2.js +2 -2
- package/dist/sparkline/sparkline.examples.js.map +1 -1
- package/dist/sparkline/sparkline.examples.json +3 -1
- package/dist/sparkline/sparkline.utils.js +2 -8
- package/dist/sparkline/sparkline.utils.js.map +1 -1
- package/dist/sparkline/sparkline2.js +2 -2
- package/dist/star-rating/define.js +5 -3
- package/dist/star-rating/define.js.map +1 -1
- package/dist/star-rating/star-rating2.js +2 -2
- package/dist/steps/steps2.js +3 -3
- package/dist/switch/define.js +6 -3
- package/dist/switch/define.js.map +1 -1
- package/dist/switch/switch-group2.js +2 -2
- package/dist/switch/switch2.js +2 -2
- package/dist/tabs/define.d.ts +2 -1
- package/dist/tabs/define.js +2 -1
- package/dist/tabs/define.js.map +1 -1
- package/dist/tabs/index.d.ts +1 -0
- package/dist/tabs/index.js +2 -1
- package/dist/tabs/tabs-group.d.ts +51 -0
- package/dist/tabs/tabs-group.js +6 -0
- package/dist/tabs/tabs-group.js.map +1 -0
- package/dist/tabs/tabs-group2.js +144 -0
- package/dist/tabs/tabs-group2.js.map +1 -0
- package/dist/tabs/tabs.examples.js.map +1 -1
- package/dist/tabs/tabs.examples.json +38 -2
- package/dist/tabs/tabs2.js +3 -3
- package/dist/tag/tag2.js +2 -2
- package/dist/textarea/define.js +5 -3
- package/dist/textarea/define.js.map +1 -1
- package/dist/textarea/textarea2.js +1 -1
- package/dist/time/define.js +5 -3
- package/dist/time/define.js.map +1 -1
- package/dist/time/time2.js +2 -2
- package/dist/toast/toast2.js +2 -2
- package/dist/toggletip/toggletip-footer2.js +2 -2
- package/dist/toggletip/toggletip-header2.js +2 -2
- package/dist/toggletip/toggletip2.js +2 -2
- package/dist/toolbar/toolbar2.js +2 -2
- package/dist/tooltip/tooltip2.js +2 -2
- package/dist/tree/tree-node.d.ts +1 -1
- package/dist/tree/tree-node.js +1 -1
- package/dist/tree/tree-node.js.map +1 -1
- package/dist/tree/tree-node2.js +2 -2
- package/dist/tree/tree-node2.js.map +1 -1
- package/dist/tree/tree.examples.js.map +1 -1
- package/dist/tree/tree.examples.json +1 -10
- package/dist/tree/tree2.js +2 -2
- package/dist/week/define.js +5 -3
- package/dist/week/define.js.map +1 -1
- package/dist/week/week2.js +2 -2
- package/package.json +43 -41
- package/dist/app-header/app-header.d.ts +0 -39
- package/dist/app-header/app-header.js +0 -6
- package/dist/app-header/app-header.js.map +0 -1
- package/dist/app-header/app-header2.js +0 -54
- package/dist/app-header/app-header2.js.map +0 -1
- package/dist/app-header/define.d.ts +0 -6
- package/dist/app-header/define.js +0 -7
- package/dist/app-header/define.js.map +0 -1
- package/dist/app-header/index.d.ts +0 -1
- package/dist/app-header/index.js +0 -2
- package/dist/bundles/audit-logs.js +0 -50
- package/dist/bundles/icons.js +0 -285
- package/dist/bundles/index.css +0 -2
- package/dist/bundles/log.service.js +0 -90
- package/dist/bundles/rolldown-runtime.js +0 -11
- package/dist/css/module.layout.css +0 -1
- package/dist/css/module.typography.css +0 -1
- package/dist/index.css +0 -1
- package/dist/json-viewer/define.d.ts +0 -8
- package/dist/json-viewer/define.js +0 -8
- package/dist/json-viewer/define.js.map +0 -1
- package/dist/json-viewer/index.d.ts +0 -2
- package/dist/json-viewer/index.js +0 -3
- package/dist/json-viewer/json-viewer.d.ts +0 -25
- package/dist/json-viewer/json-viewer.js +0 -6
- package/dist/json-viewer/json-viewer.js.map +0 -1
- package/dist/json-viewer/json-viewer2.js +0 -39
- package/dist/json-viewer/json-viewer2.js.map +0 -1
- package/dist/json-viewer/node/node.d.ts +0 -21
- package/dist/json-viewer/node/node.js +0 -6
- package/dist/json-viewer/node/node.js.map +0 -1
- package/dist/json-viewer/node/node2.js +0 -72
- package/dist/json-viewer/node/node2.js.map +0 -1
package/dist/dot/dot2.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { attachInternals as e } from "../internal/utils/a11y.js";
|
|
2
|
-
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.
|
|
2
|
+
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
|
|
3
3
|
import { statusStateStyles as n, supportStateStyles as r, useStyles as i } from "../internal/styles/index.js";
|
|
4
4
|
import a from "./dot.js";
|
|
5
5
|
import { LitElement as o, html as s } from "lit";
|
|
@@ -16,7 +16,7 @@ var l = class extends o {
|
|
|
16
16
|
static {
|
|
17
17
|
this.metadata = {
|
|
18
18
|
tag: "nve-dot",
|
|
19
|
-
version: "0.0.
|
|
19
|
+
version: "0.0.4"
|
|
20
20
|
};
|
|
21
21
|
}
|
|
22
22
|
render() {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
|
|
2
2
|
import { audit as t } from "../internal/controllers/audit.controller.js";
|
|
3
3
|
import { useStyles as n } from "../internal/styles/index.js";
|
|
4
4
|
import r from "./drawer-content.js";
|
|
@@ -11,7 +11,7 @@ var o = class extends i {
|
|
|
11
11
|
static {
|
|
12
12
|
this.metadata = {
|
|
13
13
|
tag: "nve-drawer-content",
|
|
14
|
-
version: "0.0.
|
|
14
|
+
version: "0.0.4",
|
|
15
15
|
parents: ["nve-drawer"]
|
|
16
16
|
};
|
|
17
17
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
|
|
2
2
|
import { audit as t } from "../internal/controllers/audit.controller.js";
|
|
3
3
|
import { useStyles as n } from "../internal/styles/index.js";
|
|
4
4
|
import r from "./drawer-footer.js";
|
|
@@ -11,7 +11,7 @@ var o = class extends i {
|
|
|
11
11
|
static {
|
|
12
12
|
this.metadata = {
|
|
13
13
|
tag: "nve-drawer-footer",
|
|
14
|
-
version: "0.0.
|
|
14
|
+
version: "0.0.4",
|
|
15
15
|
parents: ["nve-drawer"]
|
|
16
16
|
};
|
|
17
17
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
|
|
2
2
|
import { audit as t } from "../internal/controllers/audit.controller.js";
|
|
3
3
|
import { useStyles as n } from "../internal/styles/index.js";
|
|
4
4
|
import r from "./drawer-header.js";
|
|
@@ -11,7 +11,7 @@ var o = class extends i {
|
|
|
11
11
|
static {
|
|
12
12
|
this.metadata = {
|
|
13
13
|
tag: "nve-drawer-header",
|
|
14
|
-
version: "0.0.
|
|
14
|
+
version: "0.0.4",
|
|
15
15
|
parents: ["nve-drawer"]
|
|
16
16
|
};
|
|
17
17
|
}
|
package/dist/drawer/drawer2.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { createGhostElement as e } from "../internal/utils/dom.js";
|
|
2
|
-
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.
|
|
2
|
+
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
|
|
3
3
|
import { I18nController as n } from "../internal/controllers/i18n.controller.js";
|
|
4
4
|
import { TypeNativePopoverController as r } from "../internal/controllers/type-native-popover.controller.js";
|
|
5
5
|
import { typeSSR as i } from "../internal/controllers/type-ssr.controller.js";
|
|
@@ -28,7 +28,7 @@ var p = class extends u {
|
|
|
28
28
|
static {
|
|
29
29
|
this.metadata = {
|
|
30
30
|
tag: "nve-drawer",
|
|
31
|
-
version: "0.0.
|
|
31
|
+
version: "0.0.4"
|
|
32
32
|
};
|
|
33
33
|
}
|
|
34
34
|
static {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
|
|
2
2
|
import { audit as t } from "../internal/controllers/audit.controller.js";
|
|
3
3
|
import { useStyles as n } from "../internal/styles/index.js";
|
|
4
4
|
import r from "./dropdown-footer.js";
|
|
@@ -11,7 +11,7 @@ var o = class extends i {
|
|
|
11
11
|
static {
|
|
12
12
|
this.metadata = {
|
|
13
13
|
tag: "nve-dropdown-footer",
|
|
14
|
-
version: "0.0.
|
|
14
|
+
version: "0.0.4",
|
|
15
15
|
parents: ["nve-dropdown"]
|
|
16
16
|
};
|
|
17
17
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
|
|
2
2
|
import { audit as t } from "../internal/controllers/audit.controller.js";
|
|
3
3
|
import { useStyles as n } from "../internal/styles/index.js";
|
|
4
4
|
import r from "./dropdown-header.js";
|
|
@@ -11,7 +11,7 @@ var o = class extends i {
|
|
|
11
11
|
static {
|
|
12
12
|
this.metadata = {
|
|
13
13
|
tag: "nve-dropdown-header",
|
|
14
|
-
version: "0.0.
|
|
14
|
+
version: "0.0.4",
|
|
15
15
|
parents: ["nve-dropdown"]
|
|
16
16
|
};
|
|
17
17
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
|
|
2
2
|
import { audit as t } from "../internal/controllers/audit.controller.js";
|
|
3
3
|
import { I18nController as n } from "../internal/controllers/i18n.controller.js";
|
|
4
4
|
import { TypeNativePopoverController as r } from "../internal/controllers/type-native-popover.controller.js";
|
|
@@ -21,7 +21,7 @@ var p = class extends l {
|
|
|
21
21
|
static {
|
|
22
22
|
this.metadata = {
|
|
23
23
|
tag: "nve-dropdown",
|
|
24
|
-
version: "0.0.
|
|
24
|
+
version: "0.0.4"
|
|
25
25
|
};
|
|
26
26
|
}
|
|
27
27
|
static {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { isSimpleFocusable as e } from "../internal/utils/focus.js";
|
|
2
2
|
import { appendRootNodeStyle as t, clickOutsideElementBounds as n, getFlattenedFocusableItems as r } from "../internal/utils/dom.js";
|
|
3
|
-
import { __decorate as i } from "../_virtual/_@oxc-project_runtime@0.
|
|
3
|
+
import { __decorate as i } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
|
|
4
4
|
import { audit as a } from "../internal/controllers/audit.controller.js";
|
|
5
5
|
import { useStyles as o } from "../internal/styles/index.js";
|
|
6
6
|
import s from "./dropdown-group.global.js";
|
|
@@ -14,7 +14,7 @@ var d = class extends c {
|
|
|
14
14
|
static {
|
|
15
15
|
this.metadata = {
|
|
16
16
|
tag: "nve-dropdown-group",
|
|
17
|
-
version: "0.0.
|
|
17
|
+
version: "0.0.4",
|
|
18
18
|
children: ["nve-dropdown"]
|
|
19
19
|
};
|
|
20
20
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropzone.examples.js","names":[],"sources":["../../src/dropzone/dropzone.examples.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 '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/dropzone/define.js';\n\nexport default {\n title: 'Elements/Dropzone',\n component: 'nve-dropzone'\n};\n\n/**\n * @summary Basic file dropzone with drag-and-drop area for file upload interactions.\n */\nexport const Default = {\n render: () => html`\n<nve-dropzone name=\"files\" style=\"--min-height: 200px;\"></nve-dropzone>`\n};\n\n/**\n * @summary Dropzone with custom icon slot showing visual feedback on hover and highlight states.\n */\nexport const Icon = {\n render: () => html`\n<style>\n nve-dropzone nve-icon {\n --color: red;\n background: var(--nve-sys-layer-canvas-accent-background);\n }\n\n nve-dropzone[highlighted] nve-icon,\n nve-dropzone:hover nve-icon {\n --color: var(--nve-sys-text-white-color);\n background: var(--nve-sys-accent-primary-background);\n }\n</style>\n<nve-dropzone name=\"files\">\n <nve-icon slot=\"icon\" name=\"document\"></nve-icon>\n</nve-dropzone>\n`\n};\n\n/**\n * @summary Dropzone integrated with form validation showing file type and size constraint errors.\n */\nexport const Form = {\n render: () => html`\n<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n <section>\n <nve-control>\n <nve-dropzone name=\"files\" accept=\"image/gif, image/jpeg, image/png\" max-file-size=\"1048576\"></nve-dropzone>\n <nve-control-message error=\"typeMismatch\">Unsupported file type — this upload only accepts images</nve-control-message>\n <nve-control-message error=\"rangeOverflow\">File too big - maximum 1.00 MB allowed</nve-control-message>\n </nve-control>\n </section>\n <nve-button type=\"submit\">submit</nve-button>\n</form>\n<script type=\"module\">\n const form = document.querySelector('#form-demo');\n const dropzone = document.querySelector('#form-demo nve-dropzone');\n\n dropzone.addEventListener('change', e => {\n console.log('change', e.target.value);\n const files = e.target.value;\n console.log('Validity:', e.target.validity);\n console.log('Validation Message:', e.target.validationMessage);\n });\n\n form.addEventListener('submit', e => {\n e.preventDefault();\n const formData = new FormData(e.target);\n const files = formData.getAll('files');\n\n if (form.checkValidity()) {\n console.log('Form submitted successfully!');\n } else {\n console.log('Form validation failed');\n }\n });\n</script>\n`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
|
|
1
|
+
{"version":3,"file":"dropzone.examples.js","names":[],"sources":["../../src/dropzone/dropzone.examples.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 '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/dropzone/define.js';\n\nexport default {\n title: 'Elements/Dropzone',\n component: 'nve-dropzone'\n};\n\n/**\n * @summary Basic file dropzone with drag-and-drop area for file upload interactions.\n */\nexport const Default = {\n render: () => html`\n<nve-dropzone name=\"files\" style=\"--min-height: 200px;\"></nve-dropzone>`\n};\n\n/**\n * @summary Dropzone with custom icon slot showing visual feedback on hover and highlight states.\n * @tags theme\n */\nexport const Icon = {\n render: () => html`\n<style>\n nve-dropzone nve-icon {\n --color: red;\n background: var(--nve-sys-layer-canvas-accent-background);\n }\n\n nve-dropzone[highlighted] nve-icon,\n nve-dropzone:hover nve-icon {\n --color: var(--nve-sys-text-white-color);\n background: var(--nve-sys-accent-primary-background);\n }\n</style>\n<nve-dropzone name=\"files\">\n <nve-icon slot=\"icon\" name=\"document\"></nve-icon>\n</nve-dropzone>\n`\n};\n\n/**\n * @summary Dropzone integrated with form validation showing file type and size constraint errors.\n */\nexport const Form = {\n render: () => html`\n<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n <section>\n <nve-control>\n <nve-dropzone name=\"files\" accept=\"image/gif, image/jpeg, image/png\" max-file-size=\"1048576\"></nve-dropzone>\n <nve-control-message error=\"typeMismatch\">Unsupported file type — this upload only accepts images</nve-control-message>\n <nve-control-message error=\"rangeOverflow\">File too big - maximum 1.00 MB allowed</nve-control-message>\n </nve-control>\n </section>\n <nve-button type=\"submit\">submit</nve-button>\n</form>\n<script type=\"module\">\n const form = document.querySelector('#form-demo');\n const dropzone = document.querySelector('#form-demo nve-dropzone');\n\n dropzone.addEventListener('change', e => {\n console.log('change', e.target.value);\n const files = e.target.value;\n console.log('Validity:', e.target.validity);\n console.log('Validation Message:', e.target.validationMessage);\n });\n\n form.addEventListener('submit', e => {\n e.preventDefault();\n const formData = new FormData(e.target);\n const files = formData.getAll('files');\n\n if (form.checkValidity()) {\n console.log('Form submitted successfully!');\n } else {\n console.log('Form validation failed');\n }\n });\n</script>\n`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { formatFileSize as e } from "../internal/utils/strings.js";
|
|
2
2
|
import { removeEmptyTextNode as t } from "../internal/utils/dom.js";
|
|
3
|
-
import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.
|
|
3
|
+
import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
|
|
4
4
|
import { I18nController as r } from "../internal/controllers/i18n.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";
|
|
@@ -20,7 +20,7 @@ var g = class extends h(d) {
|
|
|
20
20
|
static {
|
|
21
21
|
this.metadata = {
|
|
22
22
|
tag: "nve-dropzone",
|
|
23
|
-
version: "0.0.
|
|
23
|
+
version: "0.0.4",
|
|
24
24
|
validators: [l, c],
|
|
25
25
|
valueSchema: {
|
|
26
26
|
type: "array",
|
package/dist/file/define.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { define as e } from "../internal/utils/dom.js";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
import { ControlMessage as t } from "../forms/control-message/control-message2.js";
|
|
3
|
+
import { Control as n } from "../forms/control/control2.js";
|
|
4
|
+
import { ControlGroup as r } from "../forms/control-group/control-group2.js";
|
|
5
|
+
import { File as i } from "./file2.js";
|
|
6
|
+
e(i), e(n), e(r), e(t);
|
|
5
7
|
//#endregion
|
|
6
8
|
|
|
7
9
|
//# sourceMappingURL=define.js.map
|
package/dist/file/define.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"define.js","names":[],"sources":["../../src/file/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { File } from '@nvidia-elements/core/file';\nimport '@nvidia-elements/core/forms
|
|
1
|
+
{"version":3,"file":"define.js","names":[],"sources":["../../src/file/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { File } from '@nvidia-elements/core/file';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(File);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nve-file': File;\n }\n}\n"],"mappings":";;;;;AAOA,EAAO,EAAK,EACZ,EAAO,EAAQ,EACf,EAAO,EAAa,EACpB,EAAO,EAAe"}
|
package/dist/file/file2.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"define.js","names":[],"sources":["../../src/format-datetime/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { FormatDatetime } from '@nvidia-elements/core/format-datetime';\n\ndefine(FormatDatetime);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nve-format-datetime': FormatDatetime;\n }\n}\n"],"mappings":";;;AAMA,EAAO,EAAe"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* @element nve-format-datetime
|
|
4
|
+
* @description Formats a date/time value as localized text using the Intl.DateTimeFormat API. Renders inside a semantic time element.
|
|
5
|
+
* Granular options (weekday, year, month, day, hour, minute, second) mirror the Intl.DateTimeFormat API. 'numeric' omits zero-padding, '2-digit' zero-pads.
|
|
6
|
+
* @since 0.0.0
|
|
7
|
+
* @entrypoint \@nvidia-elements/core/format-datetime
|
|
8
|
+
* @slot - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.
|
|
9
|
+
*/
|
|
10
|
+
export declare class FormatDatetime extends LitElement {
|
|
11
|
+
#private;
|
|
12
|
+
static styles: import('lit').CSSResult[];
|
|
13
|
+
static readonly metadata: {
|
|
14
|
+
tag: string;
|
|
15
|
+
version: string;
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Optional date string for values supplied by JavaScript or bound data.
|
|
19
|
+
* By default, the component formats the element's text content, which also serves as the SSR fallback.
|
|
20
|
+
* When both are present, this property takes precedence.
|
|
21
|
+
*/
|
|
22
|
+
date?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.
|
|
25
|
+
*/
|
|
26
|
+
locale?: string;
|
|
27
|
+
/**
|
|
28
|
+
* Weekday representation: 'long' | 'short' | 'narrow'.
|
|
29
|
+
*/
|
|
30
|
+
weekday?: 'long' | 'short' | 'narrow';
|
|
31
|
+
/**
|
|
32
|
+
* Year representation: 'numeric' | '2-digit'.
|
|
33
|
+
*/
|
|
34
|
+
year?: 'numeric' | '2-digit';
|
|
35
|
+
/**
|
|
36
|
+
* Month representation: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'.
|
|
37
|
+
*/
|
|
38
|
+
month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';
|
|
39
|
+
/**
|
|
40
|
+
* Day representation: 'numeric' | '2-digit'.
|
|
41
|
+
*/
|
|
42
|
+
day?: 'numeric' | '2-digit';
|
|
43
|
+
/**
|
|
44
|
+
* Hour representation: 'numeric' | '2-digit'.
|
|
45
|
+
*/
|
|
46
|
+
hour?: 'numeric' | '2-digit';
|
|
47
|
+
/**
|
|
48
|
+
* Minute representation: 'numeric' | '2-digit'.
|
|
49
|
+
*/
|
|
50
|
+
minute?: 'numeric' | '2-digit';
|
|
51
|
+
/**
|
|
52
|
+
* Second representation: 'numeric' | '2-digit'.
|
|
53
|
+
*/
|
|
54
|
+
second?: 'numeric' | '2-digit';
|
|
55
|
+
/**
|
|
56
|
+
* Preset date formatting style: 'full' | 'long' | 'medium' | 'short'.
|
|
57
|
+
* Preset styles take precedence over granular date and time part options.
|
|
58
|
+
*/
|
|
59
|
+
dateStyle?: 'full' | 'long' | 'medium' | 'short';
|
|
60
|
+
/**
|
|
61
|
+
* Preset time formatting style: 'full' | 'long' | 'medium' | 'short'.
|
|
62
|
+
* Preset styles take precedence over granular date and time part options.
|
|
63
|
+
*/
|
|
64
|
+
timeStyle?: 'full' | 'long' | 'medium' | 'short';
|
|
65
|
+
/**
|
|
66
|
+
* Time zone name display: 'long' | 'short'. Use it with granular options only; preset styles ignore it.
|
|
67
|
+
*/
|
|
68
|
+
timeZoneName?: 'long' | 'short';
|
|
69
|
+
/**
|
|
70
|
+
* IANA time zone identifier (such as 'America/New_York', 'UTC').
|
|
71
|
+
*/
|
|
72
|
+
timeZone?: string;
|
|
73
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
74
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"format-datetime.examples.js","names":[],"sources":["../../src/format-datetime/format-datetime.examples.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 '@nvidia-elements/core/format-datetime/define.js';\n\nexport default {\n title: 'Elements/FormatDatetime',\n component: 'nve-format-datetime',\n};\n\n/**\n * @summary Basic date formatting with the long date style preset. Use for displaying human-readable dates in content areas, tables, or metadata.\n */\nexport const Default = {\n render: () => html`\n <nve-format-datetime date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n `\n};\n\n/**\n * @summary Date style presets for controlling output density. Use full or long for detail-rich contexts and medium or short for compact layouts like data tables or cards.\n */\nexport const DateStyle = {\n render: () => html`\n<div nve-layout=\"column gap:sm\">\n <nve-format-datetime date-style=\"full\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n <nve-format-datetime date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n <nve-format-datetime date-style=\"medium\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n <nve-format-datetime date-style=\"short\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n `\n};\n\n/**\n * @summary Combined date and time style presets for full timestamps. Use for audit logs, event schedules, or activity feeds that need both date and time.\n * Preset styles take precedence over granular formatting options when both appear.\n */\nexport const TimeStyle = {\n render: () => html`\n<div nve-layout=\"column gap:sm\">\n <nve-format-datetime date-style=\"long\" time-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n <nve-format-datetime date-style=\"short\" time-style=\"short\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n `\n};\n\n/**\n * @summary Granular date part options for precise formatting control. Use when presets don't match your layout, such as weekday and month only. Do not combine with date-style or time-style; style presets take priority if both appear.\n */\nexport const Granular = {\n render: () => html`\n<div nve-layout=\"column gap:sm\">\n <nve-format-datetime weekday=\"long\" month=\"short\" day=\"numeric\" year=\"numeric\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n <nve-format-datetime month=\"long\" year=\"numeric\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n `\n};\n\n/**\n * @summary Time-only formatting with granular hour, minute, and second options. Use for clocks, time labels, or timestamps where the date is unnecessary.\n */\nexport const TimeOnly = {\n render: () => html`\n<div nve-layout=\"column gap:sm\">\n <nve-format-datetime hour=\"numeric\" minute=\"2-digit\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n <nve-format-datetime hour=\"2-digit\" minute=\"2-digit\" second=\"2-digit\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n `\n};\n\n/**\n * @summary Explicit locale settings for internationalized date output. Use when the target audience locale differs from the browser default, such as multilingual dashboards or region-specific reports.\n */\nexport const Locale = {\n render: () => html`\n<div nve-layout=\"column gap:sm\">\n <nve-format-datetime locale=\"de-DE\" date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n <nve-format-datetime locale=\"ja\" date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n <nve-format-datetime locale=\"fr-FR\" date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n `\n};\n\n/**\n * @summary Date attribute input for values supplied by JavaScript or bound data. By default, the component formats text content, which also serves as the SSR fallback, and `date` wins when both are present.\n */\nexport const DateAttribute = {\n render: () => html`\n <nve-format-datetime date=\"2023-07-28T04:20:17.434Z\" date-style=\"long\"></nve-format-datetime>\n `\n};\n\n/**\n * @summary Time zone conversion for displaying dates in a specific region. Use for global teams, scheduling interfaces, or when UTC or server timestamps need a fixed time zone.\n */\nexport const TimeZone = {\n render: () => html`\n<div nve-layout=\"column gap:sm\">\n <nve-format-datetime date-style=\"long\" time-style=\"long\" time-zone=\"America/New_York\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n <nve-format-datetime date-style=\"long\" time-style=\"long\" time-zone=\"Asia/Tokyo\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n `\n};\n\n/**\n * @summary Time zone name labels in short and long form alongside the formatted date. Use with granular options when the viewer needs to know which time zone applies, such as meeting schedulers or cross-region dashboards.\n */\nexport const TimeZoneName = {\n render: () => html`\n<div nve-layout=\"column gap:sm\">\n <nve-format-datetime locale=\"en-US\" month=\"long\" day=\"numeric\" year=\"numeric\" hour=\"numeric\" minute=\"2-digit\" time-zone=\"America/New_York\" time-zone-name=\"short\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n <nve-format-datetime locale=\"en-US\" month=\"long\" day=\"numeric\" year=\"numeric\" hour=\"numeric\" minute=\"2-digit\" time-zone=\"America/New_York\" time-zone-name=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
{
|
|
2
|
+
"element": "nve-format-datetime",
|
|
3
|
+
"entrypoint": "@nvidia-elements/core/format-datetime/format-datetime.examples.json",
|
|
4
|
+
"items": [
|
|
5
|
+
{
|
|
6
|
+
"id": "core-format-datetime_default",
|
|
7
|
+
"name": "Default",
|
|
8
|
+
"template": "<nve-format-datetime date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n",
|
|
9
|
+
"summary": "Basic date formatting with the long date style preset. Use for displaying human-readable dates in content areas, tables, or metadata.",
|
|
10
|
+
"description": "",
|
|
11
|
+
"composition": false,
|
|
12
|
+
"tags": []
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"id": "core-format-datetime_date-style",
|
|
16
|
+
"name": "DateStyle",
|
|
17
|
+
"template": "<div nve-layout=\"column gap:sm\">\n <nve-format-datetime date-style=\"full\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n <nve-format-datetime date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n <nve-format-datetime date-style=\"medium\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n <nve-format-datetime date-style=\"short\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
|
|
18
|
+
"summary": "Date style presets for controlling output density. Use full or long for detail-rich contexts and medium or short for compact layouts like data tables or cards.",
|
|
19
|
+
"description": "",
|
|
20
|
+
"composition": false,
|
|
21
|
+
"tags": []
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"id": "core-format-datetime_time-style",
|
|
25
|
+
"name": "TimeStyle",
|
|
26
|
+
"template": "<div nve-layout=\"column gap:sm\">\n <nve-format-datetime date-style=\"long\" time-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n <nve-format-datetime date-style=\"short\" time-style=\"short\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
|
|
27
|
+
"summary": "Combined date and time style presets for full timestamps. Use for audit logs, event schedules, or activity feeds that need both date and time. Preset styles take precedence over granular formatting options when both appear.",
|
|
28
|
+
"description": "",
|
|
29
|
+
"composition": false,
|
|
30
|
+
"tags": []
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"id": "core-format-datetime_granular",
|
|
34
|
+
"name": "Granular",
|
|
35
|
+
"template": "<div nve-layout=\"column gap:sm\">\n <nve-format-datetime weekday=\"long\" month=\"short\" day=\"numeric\" year=\"numeric\"\n >2023-07-28T04:20:17.434Z</nve-format-datetime\n >\n <nve-format-datetime month=\"long\" year=\"numeric\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
|
|
36
|
+
"summary": "Granular date part options for precise formatting control. Use when presets don't match your layout, such as weekday and month only. Do not combine with date-style or time-style; style presets take priority if both appear.",
|
|
37
|
+
"description": "",
|
|
38
|
+
"composition": false,
|
|
39
|
+
"tags": []
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"id": "core-format-datetime_time-only",
|
|
43
|
+
"name": "TimeOnly",
|
|
44
|
+
"template": "<div nve-layout=\"column gap:sm\">\n <nve-format-datetime hour=\"numeric\" minute=\"2-digit\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n <nve-format-datetime hour=\"2-digit\" minute=\"2-digit\" second=\"2-digit\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
|
|
45
|
+
"summary": "Time-only formatting with granular hour, minute, and second options. Use for clocks, time labels, or timestamps where the date is unnecessary.",
|
|
46
|
+
"description": "",
|
|
47
|
+
"composition": false,
|
|
48
|
+
"tags": []
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"id": "core-format-datetime_locale",
|
|
52
|
+
"name": "Locale",
|
|
53
|
+
"template": "<div nve-layout=\"column gap:sm\">\n <nve-format-datetime locale=\"de-DE\" date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n <nve-format-datetime locale=\"ja\" date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n <nve-format-datetime locale=\"fr-FR\" date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
|
|
54
|
+
"summary": "Explicit locale settings for internationalized date output. Use when the target audience locale differs from the browser default, such as multilingual dashboards or region-specific reports.",
|
|
55
|
+
"description": "",
|
|
56
|
+
"composition": false,
|
|
57
|
+
"tags": []
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"id": "core-format-datetime_date-attribute",
|
|
61
|
+
"name": "DateAttribute",
|
|
62
|
+
"template": "<nve-format-datetime date=\"2023-07-28T04:20:17.434Z\" date-style=\"long\"></nve-format-datetime>\n",
|
|
63
|
+
"summary": "Date attribute input for values supplied by JavaScript or bound data. By default, the component formats text content, which also serves as the SSR fallback, and `date` wins when both are present.",
|
|
64
|
+
"description": "",
|
|
65
|
+
"composition": false,
|
|
66
|
+
"tags": []
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"id": "core-format-datetime_time-zone",
|
|
70
|
+
"name": "TimeZone",
|
|
71
|
+
"template": "<div nve-layout=\"column gap:sm\">\n <nve-format-datetime date-style=\"long\" time-style=\"long\" time-zone=\"America/New_York\"\n >2023-07-28T04:20:17.434Z</nve-format-datetime\n >\n <nve-format-datetime date-style=\"long\" time-style=\"long\" time-zone=\"Asia/Tokyo\"\n >2023-07-28T04:20:17.434Z</nve-format-datetime\n >\n</div>\n",
|
|
72
|
+
"summary": "Time zone conversion for displaying dates in a specific region. Use for global teams, scheduling interfaces, or when UTC or server timestamps need a fixed time zone.",
|
|
73
|
+
"description": "",
|
|
74
|
+
"composition": false,
|
|
75
|
+
"tags": []
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"id": "core-format-datetime_time-zone-name",
|
|
79
|
+
"name": "TimeZoneName",
|
|
80
|
+
"template": "<div nve-layout=\"column gap:sm\">\n <nve-format-datetime\n locale=\"en-US\"\n month=\"long\"\n day=\"numeric\"\n year=\"numeric\"\n hour=\"numeric\"\n minute=\"2-digit\"\n time-zone=\"America/New_York\"\n time-zone-name=\"short\"\n >2023-07-28T04:20:17.434Z</nve-format-datetime\n >\n <nve-format-datetime\n locale=\"en-US\"\n month=\"long\"\n day=\"numeric\"\n year=\"numeric\"\n hour=\"numeric\"\n minute=\"2-digit\"\n time-zone=\"America/New_York\"\n time-zone-name=\"long\"\n >2023-07-28T04:20:17.434Z</nve-format-datetime\n >\n</div>\n",
|
|
81
|
+
"summary": "Time zone name labels in short and long form alongside the formatted date. Use with granular options when the viewer needs to know which time zone applies, such as meeting schedulers or cross-region dashboards.",
|
|
82
|
+
"description": "",
|
|
83
|
+
"composition": false,
|
|
84
|
+
"tags": []
|
|
85
|
+
}
|
|
86
|
+
]
|
|
87
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"format-datetime.js","names":[],"sources":["../../src/format-datetime/format-datetime.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n display: inline;\n}\n\n[internal-host] {\n color: var(--nve-sys-text-color, inherit);\n}\n\nslot {\n display: none;\n}\n"],"mappings":""}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { LogService as e } from "../internal/services/log.service.js";
|
|
2
|
+
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
|
|
3
|
+
import { typeSSR as n } from "../internal/controllers/type-ssr.controller.js";
|
|
4
|
+
import { useStyles as r } from "../internal/styles/index.js";
|
|
5
|
+
import i from "./format-datetime.js";
|
|
6
|
+
import { LitElement as a, html as o } from "lit";
|
|
7
|
+
import { property as s } from "lit/decorators/property.js";
|
|
8
|
+
//#region src/format-datetime/format-datetime.ts
|
|
9
|
+
var c = class extends a {
|
|
10
|
+
static {
|
|
11
|
+
this.styles = r([i]);
|
|
12
|
+
}
|
|
13
|
+
static {
|
|
14
|
+
this.metadata = {
|
|
15
|
+
tag: "nve-format-datetime",
|
|
16
|
+
version: "0.0.4"
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
get #e() {
|
|
20
|
+
return this.date ?? this.textContent?.trim() ?? "";
|
|
21
|
+
}
|
|
22
|
+
get #t() {
|
|
23
|
+
return this.locale ?? (globalThis.document?.documentElement?.lang || void 0);
|
|
24
|
+
}
|
|
25
|
+
get #n() {
|
|
26
|
+
let t = this.#e;
|
|
27
|
+
if (!t) return "";
|
|
28
|
+
let n = this.#s(t);
|
|
29
|
+
if (!n) return t;
|
|
30
|
+
try {
|
|
31
|
+
return new Intl.DateTimeFormat(this.#t, this.#r).format(n);
|
|
32
|
+
} catch (n) {
|
|
33
|
+
return e.warn(`format-datetime: ${n.message}`), t;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
get #r() {
|
|
37
|
+
return this.#i ? this.#a : this.#o;
|
|
38
|
+
}
|
|
39
|
+
get #i() {
|
|
40
|
+
return this.dateStyle !== void 0 || this.timeStyle !== void 0;
|
|
41
|
+
}
|
|
42
|
+
get #a() {
|
|
43
|
+
let e = {};
|
|
44
|
+
return this.dateStyle && (e.dateStyle = this.dateStyle), this.timeStyle && (e.timeStyle = this.timeStyle), this.timeZone && (e.timeZone = this.timeZone), e;
|
|
45
|
+
}
|
|
46
|
+
get #o() {
|
|
47
|
+
let e = {};
|
|
48
|
+
return this.weekday && (e.weekday = this.weekday), this.year && (e.year = this.year), this.month && (e.month = this.month), this.day && (e.day = this.day), this.hour && (e.hour = this.hour), this.minute && (e.minute = this.minute), this.second && (e.second = this.second), this.timeZoneName && (e.timeZoneName = this.timeZoneName), this.timeZone && (e.timeZone = this.timeZone), e;
|
|
49
|
+
}
|
|
50
|
+
#s(t) {
|
|
51
|
+
let n = new Date(t);
|
|
52
|
+
return isNaN(n.getTime()) ? (e.warn(`format-datetime: invalid date value "${t}"`), null) : n;
|
|
53
|
+
}
|
|
54
|
+
render() {
|
|
55
|
+
return o`<time internal-host datetime="${this.#e}">${this.#n}<slot @slotchange="${this.#c}" hidden></slot></time>`;
|
|
56
|
+
}
|
|
57
|
+
#c() {
|
|
58
|
+
this.requestUpdate();
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
t([s({ type: String })], c.prototype, "date", void 0), t([s({ type: String })], c.prototype, "locale", void 0), t([s({ type: String })], c.prototype, "weekday", void 0), t([s({ type: String })], c.prototype, "year", void 0), t([s({ type: String })], c.prototype, "month", void 0), t([s({ type: String })], c.prototype, "day", void 0), t([s({ type: String })], c.prototype, "hour", void 0), t([s({ type: String })], c.prototype, "minute", void 0), t([s({ type: String })], c.prototype, "second", void 0), t([s({
|
|
62
|
+
type: String,
|
|
63
|
+
attribute: "date-style"
|
|
64
|
+
})], c.prototype, "dateStyle", void 0), t([s({
|
|
65
|
+
type: String,
|
|
66
|
+
attribute: "time-style"
|
|
67
|
+
})], c.prototype, "timeStyle", void 0), t([s({
|
|
68
|
+
type: String,
|
|
69
|
+
attribute: "time-zone-name"
|
|
70
|
+
})], c.prototype, "timeZoneName", void 0), t([s({
|
|
71
|
+
type: String,
|
|
72
|
+
attribute: "time-zone"
|
|
73
|
+
})], c.prototype, "timeZone", void 0), c = t([n()], c);
|
|
74
|
+
//#endregion
|
|
75
|
+
export { c as FormatDatetime };
|
|
76
|
+
|
|
77
|
+
//# sourceMappingURL=format-datetime2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"format-datetime2.js","names":["#dateValue","#resolvedLocale","#formattedDate","#parseDate","#formatOptions","#hasPresetStyle","#presetFormatOptions","#granularFormatOptions","#onSlotChange"],"sources":["../../src/format-datetime/format-datetime.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 { useStyles, typeSSR, LogService } from '@nvidia-elements/core/internal';\nimport styles from './format-datetime.css?inline';\n\n/**\n * @element nve-format-datetime\n * @description Formats a date/time value as localized text using the Intl.DateTimeFormat API. Renders inside a semantic time element.\n * Granular options (weekday, year, month, day, hour, minute, second) mirror the Intl.DateTimeFormat API. 'numeric' omits zero-padding, '2-digit' zero-pads.\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/format-datetime\n * @slot - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.\n */\n@typeSSR()\nexport class FormatDatetime extends LitElement {\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-format-datetime',\n version: '0.0.0'\n };\n\n /**\n * Optional date string for values supplied by JavaScript or bound data.\n * By default, the component formats the element's text content, which also serves as the SSR fallback.\n * When both are present, this property takes precedence.\n */\n @property({ type: String }) date?: string;\n\n /**\n * Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.\n */\n @property({ type: String }) locale?: string;\n\n /**\n * Weekday representation: 'long' | 'short' | 'narrow'.\n */\n @property({ type: String }) weekday?: 'long' | 'short' | 'narrow';\n\n /**\n * Year representation: 'numeric' | '2-digit'.\n */\n @property({ type: String }) year?: 'numeric' | '2-digit';\n\n /**\n * Month representation: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'.\n */\n @property({ type: String }) month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';\n\n /**\n * Day representation: 'numeric' | '2-digit'.\n */\n @property({ type: String }) day?: 'numeric' | '2-digit';\n\n /**\n * Hour representation: 'numeric' | '2-digit'.\n */\n @property({ type: String }) hour?: 'numeric' | '2-digit';\n\n /**\n * Minute representation: 'numeric' | '2-digit'.\n */\n @property({ type: String }) minute?: 'numeric' | '2-digit';\n\n /**\n * Second representation: 'numeric' | '2-digit'.\n */\n @property({ type: String }) second?: 'numeric' | '2-digit';\n\n /**\n * Preset date formatting style: 'full' | 'long' | 'medium' | 'short'.\n * Preset styles take precedence over granular date and time part options.\n */\n @property({ type: String, attribute: 'date-style' }) dateStyle?: 'full' | 'long' | 'medium' | 'short';\n\n /**\n * Preset time formatting style: 'full' | 'long' | 'medium' | 'short'.\n * Preset styles take precedence over granular date and time part options.\n */\n @property({ type: String, attribute: 'time-style' }) timeStyle?: 'full' | 'long' | 'medium' | 'short';\n\n /**\n * Time zone name display: 'long' | 'short'. Use it with granular options only; preset styles ignore it.\n */\n @property({ type: String, attribute: 'time-zone-name' }) timeZoneName?: 'long' | 'short';\n\n /**\n * IANA time zone identifier (such as 'America/New_York', 'UTC').\n */\n @property({ type: String, attribute: 'time-zone' }) timeZone?: string;\n\n get #dateValue(): string {\n return this.date ?? this.textContent?.trim() ?? '';\n }\n\n get #resolvedLocale(): string | undefined {\n return this.locale ?? (globalThis.document?.documentElement?.lang || undefined);\n }\n\n get #formattedDate(): string {\n const iso = this.#dateValue;\n if (!iso) return '';\n\n const date = this.#parseDate(iso);\n if (!date) return iso;\n\n try {\n return new Intl.DateTimeFormat(this.#resolvedLocale, this.#formatOptions).format(date);\n } catch (e) {\n LogService.warn(`format-datetime: ${(e as Error).message}`);\n return iso;\n }\n }\n\n get #formatOptions(): Intl.DateTimeFormatOptions {\n return this.#hasPresetStyle ? this.#presetFormatOptions : this.#granularFormatOptions;\n }\n\n get #hasPresetStyle(): boolean {\n return this.dateStyle !== undefined || this.timeStyle !== undefined;\n }\n\n get #presetFormatOptions(): Intl.DateTimeFormatOptions {\n const options: Intl.DateTimeFormatOptions = {};\n\n if (this.dateStyle) options.dateStyle = this.dateStyle;\n if (this.timeStyle) options.timeStyle = this.timeStyle;\n if (this.timeZone) options.timeZone = this.timeZone;\n\n return options;\n }\n\n get #granularFormatOptions(): Intl.DateTimeFormatOptions {\n const options: Intl.DateTimeFormatOptions = {};\n\n if (this.weekday) options.weekday = this.weekday;\n if (this.year) options.year = this.year;\n if (this.month) options.month = this.month;\n if (this.day) options.day = this.day;\n if (this.hour) options.hour = this.hour;\n if (this.minute) options.minute = this.minute;\n if (this.second) options.second = this.second;\n if (this.timeZoneName) options.timeZoneName = this.timeZoneName;\n if (this.timeZone) options.timeZone = this.timeZone;\n\n return options;\n }\n\n #parseDate(iso: string): Date | null {\n const date = new Date(iso);\n if (!isNaN(date.getTime())) return date;\n\n LogService.warn(`format-datetime: invalid date value \"${iso}\"`);\n return null;\n }\n\n render() {\n return html`<time internal-host datetime=${this.#dateValue}>${this.#formattedDate}<slot @slotchange=${this.#onSlotChange} hidden></slot></time>`;\n }\n\n #onSlotChange() {\n this.requestUpdate();\n }\n}\n"],"mappings":";;;;;;;;AAiBO,IAAA,IAAA,cAA6B,EAAW;;gBAC7B,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;CAuED,KAAA,IAAyB;AACvB,SAAO,KAAK,QAAQ,KAAK,aAAa,MAAM,IAAI;;CAGlD,KAAA,IAA0C;AACxC,SAAO,KAAK,WAAW,WAAW,UAAU,iBAAiB,QAAQ,KAAA;;CAGvE,KAAA,IAA6B;EAC3B,IAAM,IAAM,MAAA;AACZ,MAAI,CAAC,EAAK,QAAO;EAEjB,IAAM,IAAO,MAAA,EAAgB,EAAI;AACjC,MAAI,CAAC,EAAM,QAAO;AAElB,MAAI;AACF,UAAO,IAAI,KAAK,eAAe,MAAA,GAAsB,MAAA,EAAoB,CAAC,OAAO,EAAK;WAC/E,GAAG;AAEV,UADA,EAAW,KAAK,oBAAqB,EAAY,UAAU,EACpD;;;CAIX,KAAA,IAAiD;AAC/C,SAAO,MAAA,IAAuB,MAAA,IAA4B,MAAA;;CAG5D,KAAA,IAA+B;AAC7B,SAAO,KAAK,cAAc,KAAA,KAAa,KAAK,cAAc,KAAA;;CAG5D,KAAA,IAAuD;EACrD,IAAM,IAAsC,EAAE;AAM9C,SAJI,KAAK,cAAW,EAAQ,YAAY,KAAK,YACzC,KAAK,cAAW,EAAQ,YAAY,KAAK,YACzC,KAAK,aAAU,EAAQ,WAAW,KAAK,WAEpC;;CAGT,KAAA,IAAyD;EACvD,IAAM,IAAsC,EAAE;AAY9C,SAVI,KAAK,YAAS,EAAQ,UAAU,KAAK,UACrC,KAAK,SAAM,EAAQ,OAAO,KAAK,OAC/B,KAAK,UAAO,EAAQ,QAAQ,KAAK,QACjC,KAAK,QAAK,EAAQ,MAAM,KAAK,MAC7B,KAAK,SAAM,EAAQ,OAAO,KAAK,OAC/B,KAAK,WAAQ,EAAQ,SAAS,KAAK,SACnC,KAAK,WAAQ,EAAQ,SAAS,KAAK,SACnC,KAAK,iBAAc,EAAQ,eAAe,KAAK,eAC/C,KAAK,aAAU,EAAQ,WAAW,KAAK,WAEpC;;CAGT,GAAW,GAA0B;EACnC,IAAM,IAAO,IAAI,KAAK,EAAI;AAI1B,SAHK,MAAM,EAAK,SAAS,CAAC,IAE1B,EAAW,KAAK,wCAAwC,EAAI,GAAG,EACxD,QAH4B;;CAMrC,SAAS;AACP,SAAO,CAAI,iCAAgC,MAAA,EAAgB,IAAG,MAAA,EAAoB,qBAAoB,MAAA,EAAmB;;CAG3H,KAAgB;AACd,OAAK,eAAe;;;GAtIrB,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAK1B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAK1B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,KAK1B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAK1B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,SAAA,KAAA,EAAA,KAK1B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,OAAA,KAAA,EAAA,KAK1B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAK1B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAK1B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAM1B,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAc,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,KAMnD,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAc,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,KAKnD,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAkB,CAAC,CAAA,EAAA,EAAA,WAAA,gBAAA,KAAA,EAAA,KAKvD,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAa,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,SA5EpD,GAAS,CAAA,EAAA,EAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './format-datetime.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"define.js","names":[],"sources":["../../src/format-relative-time/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { FormatRelativeTime } from '@nvidia-elements/core/format-relative-time';\n\ndefine(FormatRelativeTime);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nve-format-relative-time': FormatRelativeTime;\n }\n}\n"],"mappings":";;;AAMA,EAAO,EAAmB"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* @element nve-format-relative-time
|
|
4
|
+
* @description Formats a date/time value as localized relative text using the Intl.RelativeTimeFormat API. Renders inside a semantic time element.
|
|
5
|
+
* Options mirror the Intl.RelativeTimeFormat API. When unit is 'auto', the component selects the best unit based on the time difference.
|
|
6
|
+
* @since 0.0.0
|
|
7
|
+
* @entrypoint \@nvidia-elements/core/format-relative-time
|
|
8
|
+
* @slot - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.
|
|
9
|
+
*/
|
|
10
|
+
export declare class FormatRelativeTime extends LitElement {
|
|
11
|
+
#private;
|
|
12
|
+
static styles: import('lit').CSSResult[];
|
|
13
|
+
static readonly metadata: {
|
|
14
|
+
tag: string;
|
|
15
|
+
version: string;
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Optional date string for values supplied by JavaScript or bound data.
|
|
19
|
+
* By default, the component formats the element's text content, which also serves as the SSR fallback.
|
|
20
|
+
* When both are present, this property takes precedence.
|
|
21
|
+
*/
|
|
22
|
+
date?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.
|
|
25
|
+
*/
|
|
26
|
+
locale?: string;
|
|
27
|
+
/**
|
|
28
|
+
* Numeric formatting: 'always' | 'auto'. When 'auto', enables natural language forms such as 'yesterday' instead of '1 day ago'.
|
|
29
|
+
*/
|
|
30
|
+
numeric: 'always' | 'auto';
|
|
31
|
+
/**
|
|
32
|
+
* Formatting length: 'long' | 'short' | 'narrow'. Controls verbosity (such as '3 days ago' vs '3d ago'). Maps to Intl.RelativeTimeFormat style option.
|
|
33
|
+
*/
|
|
34
|
+
formatStyle: 'long' | 'short' | 'narrow';
|
|
35
|
+
/**
|
|
36
|
+
* Time unit: 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year' | 'auto'. Use 'auto' to let the component select the most appropriate unit based on the time difference.
|
|
37
|
+
*/
|
|
38
|
+
unit: 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year' | 'auto';
|
|
39
|
+
/**
|
|
40
|
+
* When present, auto-updates the displayed relative time at appropriate intervals.
|
|
41
|
+
*/
|
|
42
|
+
sync: boolean;
|
|
43
|
+
connectedCallback(): void;
|
|
44
|
+
disconnectedCallback(): void;
|
|
45
|
+
updated(changed: Map<string, unknown>): void;
|
|
46
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
47
|
+
}
|