@nvidia-elements/core 2.2.0 → 2.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/dist/accordion/accordion.d.ts +7 -5
- package/dist/accordion/accordion2.js +4 -4
- package/dist/accordion/accordion2.js.map +1 -1
- package/dist/alert/alert-group2.js +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-group2.js.map +1 -1
- package/dist/avatar/avatar.d.ts +1 -1
- package/dist/avatar/avatar2.js +1 -1
- package/dist/avatar/avatar2.js.map +1 -1
- package/dist/badge/badge.d.ts +1 -1
- package/dist/badge/badge2.js +1 -1
- package/dist/badge/badge2.js.map +1 -1
- package/dist/breadcrumb/breadcrumb2.js +1 -1
- package/dist/bundles/index.d.ts +67 -45
- package/dist/bundles/index.js +2 -2
- package/dist/button/button2.js +1 -1
- package/dist/button-group/button-group2.js +1 -1
- package/dist/card/card.d.ts +3 -1
- package/dist/card/card2.js +4 -4
- package/dist/card/card2.js.map +1 -1
- package/dist/chat-message/chat-message.d.ts +3 -1
- package/dist/chat-message/chat-message2.js +1 -1
- package/dist/chat-message/chat-message2.js.map +1 -1
- package/dist/checkbox/checkbox-group2.js +1 -1
- package/dist/checkbox/checkbox2.js +1 -1
- package/dist/color/color2.js +1 -1
- package/dist/combobox/combobox2.js +1 -1
- package/dist/copy-button/copy-button.d.ts +1 -1
- package/dist/copy-button/copy-button2.js +1 -1
- package/dist/copy-button/copy-button2.js.map +1 -1
- package/dist/custom-elements-jsx.d.ts +1340 -982
- package/dist/custom-elements-vue.d.ts +1048 -859
- package/dist/custom-elements.json +1382 -1948
- package/dist/data.html.json +330 -510
- package/dist/date/date2.js +1 -1
- package/dist/datetime/datetime2.js +1 -1
- package/dist/dialog/dialog-footer2.js +1 -1
- package/dist/dialog/dialog-header2.js +1 -1
- package/dist/dialog/dialog.d.ts +1 -1
- package/dist/dialog/dialog2.js +1 -1
- package/dist/dialog/dialog2.js.map +1 -1
- package/dist/divider/divider2.js +1 -1
- package/dist/dot/dot2.js +1 -1
- package/dist/drawer/drawer-content2.js +1 -1
- package/dist/drawer/drawer-footer2.js +1 -1
- package/dist/drawer/drawer-header2.js +1 -1
- package/dist/drawer/drawer.d.ts +1 -1
- package/dist/drawer/drawer.js +1 -1
- package/dist/drawer/drawer.js.map +1 -1
- package/dist/drawer/drawer2.js +1 -1
- package/dist/drawer/drawer2.js.map +1 -1
- package/dist/dropdown/dropdown-footer2.js +1 -1
- package/dist/dropdown/dropdown-header2.js +1 -1
- package/dist/dropdown/dropdown.d.ts +1 -0
- package/dist/dropdown/dropdown2.js +1 -1
- package/dist/dropdown/dropdown2.js.map +1 -1
- package/dist/dropdown-group/dropdown-group.d.ts +1 -2
- package/dist/dropdown-group/dropdown-group.js +1 -1
- package/dist/dropdown-group/dropdown-group.js.map +1 -1
- package/dist/dropzone/dropzone.d.ts +6 -3
- package/dist/dropzone/dropzone2.js +1 -1
- package/dist/dropzone/dropzone2.js.map +1 -1
- package/dist/file/file2.js +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-number/format-number2.js.map +1 -1
- package/dist/format-relative-time/format-relative-time2.js +1 -1
- package/dist/forms/control/control2.js +1 -1
- package/dist/forms/control-group/control-group2.js +1 -1
- package/dist/forms/control-message/control-message.d.ts +2 -1
- package/dist/forms/control-message/control-message2.js +1 -1
- package/dist/forms/control-message/control-message2.js.map +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/cell/cell2.js.map +1 -1
- package/dist/grid/column/column.d.ts +1 -1
- package/dist/grid/column/column2.js +1 -1
- package/dist/grid/column/column2.js.map +1 -1
- package/dist/grid/footer/footer.d.ts +2 -1
- package/dist/grid/footer/footer2.js +1 -1
- package/dist/grid/footer/footer2.js.map +1 -1
- package/dist/grid/grid.d.ts +1 -1
- package/dist/grid/grid2.js +1 -1
- package/dist/grid/grid2.js.map +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/placeholder/placeholder2.js.map +1 -1
- package/dist/grid/row/row2.js +1 -1
- package/dist/icon/icon2.js +2 -2
- package/dist/icon-button/icon-button2.js +1 -1
- package/dist/index.js +1 -1
- package/dist/input/input-group2.js +1 -1
- package/dist/input/input2.js +1 -1
- package/dist/internal/services/global.service.js +1 -1
- package/dist/internal/types/index.d.ts +3 -3
- package/dist/internal/types/index.js.map +1 -1
- package/dist/logo/logo.d.ts +1 -1
- package/dist/logo/logo2.js +1 -1
- package/dist/logo/logo2.js.map +1 -1
- package/dist/menu/menu-item.d.ts +2 -1
- package/dist/menu/menu-item2.js +1 -1
- package/dist/menu/menu-item2.js.map +1 -1
- package/dist/menu/menu2.js +1 -1
- package/dist/month/month2.js +1 -1
- package/dist/notification/notification-group2.js +1 -1
- package/dist/notification/notification.d.ts +1 -1
- package/dist/notification/notification2.js +1 -1
- package/dist/notification/notification2.js.map +1 -1
- package/dist/page/page-panel/page-panel-content2.js +1 -1
- package/dist/page/page-panel/page-panel-footer.d.ts +1 -0
- package/dist/page/page-panel/page-panel-footer2.js +1 -1
- package/dist/page/page-panel/page-panel-footer2.js.map +1 -1
- package/dist/page/page-panel/page-panel-header.d.ts +1 -0
- package/dist/page/page-panel/page-panel-header2.js +1 -1
- package/dist/page/page-panel/page-panel-header2.js.map +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-panel/page-panel2.js.map +1 -1
- package/dist/page/page2.js +1 -1
- package/dist/page-header/page-header2.js +1 -1
- package/dist/page-loader/page-loader.d.ts +1 -1
- package/dist/page-loader/page-loader2.js +1 -1
- package/dist/page-loader/page-loader2.js.map +1 -1
- package/dist/pagination/pagination.d.ts +4 -3
- package/dist/pagination/pagination2.js +5 -2
- package/dist/pagination/pagination2.js.map +1 -1
- package/dist/panel/panel2.js +4 -4
- package/dist/password/password2.js +1 -1
- package/dist/preferences-input/preferences-input.d.ts +2 -0
- package/dist/preferences-input/preferences-input2.js +1 -1
- package/dist/preferences-input/preferences-input2.js.map +1 -1
- package/dist/progress-bar/progress-bar2.js +1 -1
- package/dist/progress-ring/progress-ring2.js +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip.d.ts +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip2.js +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip2.js.map +1 -1
- package/dist/pulse/pulse2.js +1 -1
- package/dist/radio/radio-group2.js +1 -1
- package/dist/radio/radio2.js +1 -1
- package/dist/range/range2.js +1 -1
- package/dist/resize-handle/resize-handle2.js +1 -1
- package/dist/search/search2.js +1 -1
- package/dist/select/select.js +1 -1
- package/dist/select/select.js.map +1 -1
- package/dist/select/select2.js +2 -2
- package/dist/select/select2.js.map +1 -1
- package/dist/skeleton/skeleton.d.ts +2 -2
- package/dist/skeleton/skeleton2.js +1 -1
- package/dist/skeleton/skeleton2.js.map +1 -1
- package/dist/sort-button/sort-button2.js +1 -1
- package/dist/sparkline/sparkline2.js +1 -1
- package/dist/star-rating/star-rating2.js +1 -1
- package/dist/steps/steps.d.ts +1 -1
- package/dist/steps/steps2.js +2 -2
- package/dist/steps/steps2.js.map +1 -1
- package/dist/switch/switch-group2.js +1 -1
- package/dist/switch/switch2.js +1 -1
- package/dist/tabs/tabs-group2.js +1 -1
- package/dist/tabs/tabs.d.ts +1 -1
- package/dist/tabs/tabs2.js +2 -2
- package/dist/tabs/tabs2.js.map +1 -1
- package/dist/tag/tag.d.ts +1 -1
- package/dist/tag/tag2.js +1 -1
- package/dist/tag/tag2.js.map +1 -1
- package/dist/textarea/textarea2.js +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/toast/toast2.js.map +1 -1
- package/dist/toggletip/toggletip-footer2.js +1 -1
- package/dist/toggletip/toggletip-header2.js +1 -1
- package/dist/toggletip/toggletip.d.ts +1 -0
- package/dist/toggletip/toggletip2.js +1 -1
- package/dist/toggletip/toggletip2.js.map +1 -1
- package/dist/toolbar/toolbar.d.ts +1 -1
- package/dist/toolbar/toolbar2.js +1 -1
- package/dist/toolbar/toolbar2.js.map +1 -1
- package/dist/tooltip/tooltip.d.ts +2 -1
- package/dist/tooltip/tooltip2.js +1 -1
- package/dist/tooltip/tooltip2.js.map +1 -1
- package/dist/tree/tree-node.d.ts +3 -0
- package/dist/tree/tree-node2.js +1 -1
- package/dist/tree/tree-node2.js.map +1 -1
- package/dist/tree/tree2.js +1 -1
- package/dist/week/week2.js +1 -1
- package/package.json +3 -3
package/dist/date/date2.js
CHANGED
package/dist/dialog/dialog.d.ts
CHANGED
|
@@ -12,7 +12,7 @@ import { IconButton } from '@nvidia-elements/core/icon-button';
|
|
|
12
12
|
* @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)
|
|
13
13
|
* @event open - Dispatched when the dialog opens.
|
|
14
14
|
* @event close - Dispatched when the dialog closes.
|
|
15
|
-
* @slot -
|
|
15
|
+
* @slot - Dialog body content displayed between the header and footer.
|
|
16
16
|
* @cssprop --border
|
|
17
17
|
* @cssprop --border-radius
|
|
18
18
|
* @cssprop --background
|
package/dist/dialog/dialog2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog2.js","names":["#i18nController"],"sources":["../../src/dialog/dialog.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 type { PopoverAlign, PopoverPosition, PopoverType, Size } from '@nvidia-elements/core/internal';\nimport {\n audit,\n excessiveInstanceLimit,\n I18nController,\n popoverStyles,\n TypeNativePopoverController,\n useStyles,\n attachInternals,\n appendRootNodeStyle,\n scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport globalStyles from './dialog.global.css?inline';\nimport styles from './dialog.css?inline';\n\n/**\n * @element nve-dialog\n * @description Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n * @documentation https://nvidia.github.io/elements/docs/elements/dialog/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/dialog\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the dialog opens.\n * @event close - Dispatched when the dialog closes.\n * @slot -
|
|
1
|
+
{"version":3,"file":"dialog2.js","names":["#i18nController"],"sources":["../../src/dialog/dialog.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 type { PopoverAlign, PopoverPosition, PopoverType, Size } from '@nvidia-elements/core/internal';\nimport {\n audit,\n excessiveInstanceLimit,\n I18nController,\n popoverStyles,\n TypeNativePopoverController,\n useStyles,\n attachInternals,\n appendRootNodeStyle,\n scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport globalStyles from './dialog.global.css?inline';\nimport styles from './dialog.css?inline';\n\n/**\n * @element nve-dialog\n * @description Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n * @documentation https://nvidia.github.io/elements/docs/elements/dialog/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/dialog\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the dialog opens.\n * @event close - Dispatched when the dialog closes.\n * @slot - Dialog body content displayed between the header and footer.\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --gap\n * @cssprop --max-width\n * @cssprop --min-height\n * @cssprop --max-height\n * @cssprop --animation-duration - Duration of dialog open/close animations\n * @csspart close-button - The inner template reference for the close button of the dialog.\n * @csspart icon-button - The icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n */\n@audit({ excessiveInstanceLimit })\n@scopedRegistry()\nexport class Dialog extends LitElement {\n /**\n * Sets the side position of the popover relative to the provided anchor element.\n * For dialog the anchor defaults to the document body.\n */\n @property({ type: String, reflect: true }) position: PopoverPosition = 'center';\n\n /**\n * Sets the alignment of the popover relative to the provided anchor element.\n * If an arrow exists the alignment will be relative to the arrow against the anchor.\n */\n @property({ type: String, reflect: true }) alignment: PopoverAlign = 'center';\n\n /**\n * Sets the max size of the dialog.\n */\n @property({ type: String, reflect: true }) size?: Size;\n\n /**\n * Determines if a close button should render within dialog. Non-closable\n * dialogs suit dialogs that require user confirmation steps.\n */\n @property({ type: Boolean }) closable: boolean;\n\n /**\n * Determines if a dialog should have a modal backdrop that visually overlays the UI.\n */\n @property({ type: Boolean, reflect: true }) modal: boolean;\n\n /**\n * (optional) By default the popover will automatically anchor itself relative to the trigger element.\n * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n */\n @property({ type: String }) anchor: string | HTMLElement = globalThis.document?.body;\n\n /**\n * @deprecated Use the popover API instead.\n * The trigger defines what element triggers an `open` interaction event.\n * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n */\n @property({ type: String }) trigger: string | HTMLElement;\n\n /**\n * @deprecated Use the popover API instead.\n * Determines if popover visibility behavior should be automatically controlled by the trigger.\n */\n @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /**\n * Enables internal string values to update for internationalization.\n */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n /** @private */\n get popoverType(): PopoverType {\n return this.modal ? 'auto' : 'manual';\n }\n\n /** @private */\n get popoverDismissible() {\n return !!this.closable;\n }\n\n protected typeNativePopoverController = new TypeNativePopoverController<Dialog>(this);\n\n static styles = useStyles([popoverStyles, styles]);\n\n static readonly metadata = {\n tag: 'nve-dialog',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [IconButton.metadata.tag]: IconButton\n };\n\n /** @private */\n declare _internals: ElementInternals;\n\n render() {\n return html`\n <div internal-host part=\"_host\">\n <div class=\"header\">\n ${this.closable ? html`<nve-icon-button part=\"close-button icon-button\" exportparts=\"icon:icon-button-icon\" size=\"sm\" @click=${this.hidePopover} icon-name=\"cancel\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n <slot name=\"header\"></slot>\n </div>\n <div class=\"content\" part=\"_content\">\n <slot></slot>\n </div>\n <slot name=\"footer\"></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'dialog';\n appendRootNodeStyle(this, globalStyles);\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiDO,IAAA,IAAA,cAAqB,EAAW;;+BAKkC,2BAMF,wBAsBV,WAAW,UAAU,gBAexC,IAAI,EAAqB,IAAI,eAKlC,KAAKA,GAAgB,yCAYhB,IAAI,EAAoC,IAAI;;CAjBpF;CAQA,IAAI,cAA2B;EAC7B,OAAO,KAAK,QAAQ,SAAS;CAC/B;CAGA,IAAI,qBAAqB;EACvB,OAAO,CAAC,CAAC,KAAK;CAChB;;gBAIgB,EAAU,CAAC,GAAe,CAAM,CAAC;;;kBAEtB;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAKA,SAAS;EACP,OAAO,CAAI,uDAGL,KAAK,WAAW,CAAI,0GAAyG,KAAK,YAAY,mCAAiC,KAAK,KAAK,MAAM,wBAAuB,GAAG;CASjO;CAEA,oBAAoB;EAIlB,AAHA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,UACvB,EAAoB,MAAM,CAAY;CACxC;AACF;GAjGG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAMxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAMxC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAK1B,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAMzC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAOzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAMzB,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,MAOxE,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAvD3B,EAAM,EAAE,wBAAA,GAAuB,CAAC,GAChC,EAAe,CAAA,GAAA,CAAA"}
|
package/dist/divider/divider2.js
CHANGED
package/dist/dot/dot2.js
CHANGED
package/dist/drawer/drawer.d.ts
CHANGED
|
@@ -12,7 +12,7 @@ import { IconButton } from '@nvidia-elements/core/icon-button';
|
|
|
12
12
|
* @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)
|
|
13
13
|
* @event open - Dispatched when the drawer opens.
|
|
14
14
|
* @event close - Dispatched when the drawer closes.
|
|
15
|
-
* @slot -
|
|
15
|
+
* @slot - Drawer body content displayed between the header and footer.
|
|
16
16
|
* @cssprop --border
|
|
17
17
|
* @cssprop --background
|
|
18
18
|
* @cssprop --color
|
package/dist/drawer/drawer.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/drawer/drawer.css?inline
|
|
2
|
-
var e = ":host{--nve-sys-interaction-background: var(--nve-sys-interaction-background-300);--nve-sys-interaction-field-background: var(--nve-sys-interaction-background-300);--nve-sys-layer-popover-arrow-padding: 0px;--nve-sys-layer-popover-arrow-offset: 0px;--nve-sys-layer-popover-offset: 0px;--border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);--background: var(--nve-sys-layer-overlay-background);--color: var(--nve-sys-layer-overlay-color);--padding: 0;--box-shadow: var(--nve-ref-shadow-500);--gap: var(--nve-ref-space-sm);--top: 0px;--max-width: 400px;--width: 100vw;width:var(--width);max-width:var(--max-width);height:calc(100vh - var(--top));margin:initial!important;margin-block-start:var(--top)!important;position-area:unset!important}:host([size=\"sm\"]){--max-width: 280px}:host([size=\"lg\"]){--max-width: 540px}:host([position=\"left\"]){transform:translate(calc(-1 * var(--width)))!important}:host([position=\"right\"]){transform:translate(var(--width))!important}:host(:popover-open){transform:translate(0)!important}:host([inline]){--nve-sys-interaction-background: var(--nve-sys-interaction-background-200);--nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);--background: var(--nve-sys-layer-container-background);--box-shadow: none;--border: 0;transition:none!important}[internal-host]{border:var(--border);background:var(--background);color:var(--color);box-shadow:var(--box-shadow);bottom:0!important;display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;width:100%}::backdrop{background:transparent}:host([modal])::backdrop{background:#00000012}.header{display:flex;gap:var(--gap)}.content{padding:var(--padding);display:flex;flex-direction:column;align-items:start;overflow:auto;flex:1}nve-icon-button{position:absolute;top:var(--nve-ref-size-200);right:var(--nve-ref-size-200);z-index:99}:host([position=\"bottom\"]),:host([position=\"top\"]){min-width:100%;height:max-content}:host([position=\"bottom\"]) [internal-host],:host([position=\"top\"]) [internal-host]{height:min-content}:host([position=\"left\"]){inset:auto auto auto 0}:host([position=\"right\"]){inset:auto 0 auto auto}:host([position=\"top\"]){inset:0 auto auto}:host([position=\"bottom\"]){inset:auto auto 0}";
|
|
2
|
+
var e = ":host{--nve-sys-interaction-background: var(--nve-sys-interaction-background-300);--nve-sys-interaction-field-background: var(--nve-sys-interaction-background-300);--nve-sys-layer-popover-arrow-padding: 0px;--nve-sys-layer-popover-arrow-offset: 0px;--nve-sys-layer-popover-offset: 0px;--border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);--background: var(--nve-sys-layer-overlay-background);--color: var(--nve-sys-layer-overlay-color);--padding: 0;--box-shadow: var(--nve-ref-shadow-500);--gap: var(--nve-ref-space-sm);--top: 0px;--max-width: 400px;--width: 100vw;width:var(--width);max-width:var(--max-width);height:calc(100vh - var(--top));margin:initial!important;margin-block-start:var(--top)!important;position-area:unset!important}:host([size=\"sm\"]){--max-width: 280px}:host([size=\"lg\"]){--max-width: 540px}:host([position=\"left\"]){transform:translate(calc(-1 * var(--width)))!important}:host([position=\"right\"]){transform:translate(var(--width))!important}:host(:popover-open){transform:translate(0)!important}:host([inline]){--nve-sys-interaction-background: var(--nve-sys-interaction-background-200);--nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);--background: var(--nve-sys-layer-container-background);--box-shadow: none;--border: 0;transition:none!important}[internal-host]{border:var(--border);background:var(--background);color:var(--color);box-shadow:var(--box-shadow);bottom:0!important;display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;width:100%}::backdrop{background:transparent}:host([modal])::backdrop{background:#00000012}.header{display:flex;gap:var(--gap)}.content{padding:var(--padding);display:flex;flex-direction:column;align-items:start;overflow:auto;flex:1}nve-icon-button{position:absolute;top:var(--nve-ref-size-200);right:var(--nve-ref-size-200);z-index:99}:host([position=\"bottom\"]),:host([position=\"top\"]){min-width:100%;height:max-content}:host([position=\"bottom\"]) [internal-host],:host([position=\"top\"]) [internal-host]{height:min-content}:host([position=\"left\"]){inset:auto auto auto 0!important}:host([position=\"right\"]){inset:auto 0 auto auto!important}:host([position=\"top\"]){inset:0 auto auto!important}:host([position=\"bottom\"]){inset:auto auto 0!important}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.js","names":[],"sources":["../../src/drawer/drawer.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 --nve-sys-interaction-background: var(--nve-sys-interaction-background-300);\n --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-300);\n --nve-sys-layer-popover-arrow-padding: 0px;\n --nve-sys-layer-popover-arrow-offset: 0px;\n --nve-sys-layer-popover-offset: 0px;\n --border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n --background: var(--nve-sys-layer-overlay-background);\n --color: var(--nve-sys-layer-overlay-color);\n --padding: 0;\n --box-shadow: var(--nve-ref-shadow-500);\n --gap: var(--nve-ref-space-sm);\n --top: 0px;\n --max-width: 400px;\n --width: 100vw;\n width: var(--width);\n max-width: var(--max-width);\n height: calc(100vh - var(--top));\n margin: initial !important;\n margin-block-start: var(--top) !important;\n position-area: unset !important; /* drawer uses its own fixed positioning with translation */\n}\n\n:host([size='sm']) {\n --max-width: 280px;\n}\n\n:host([size='lg']) {\n --max-width: 540px;\n}\n\n:host([position='left']) {\n transform: translateX(calc(-1 * var(--width))) !important;\n}\n\n:host([position='right']) {\n transform: translateX(var(--width)) !important;\n}\n\n:host(:popover-open) {\n transform: translateX(0) !important;\n}\n\n:host([inline]) {\n --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n --background: var(--nve-sys-layer-container-background);\n --box-shadow: none;\n --border: 0;\n transition: none !important;\n}\n\n[internal-host] {\n border: var(--border);\n background: var(--background);\n color: var(--color);\n box-shadow: var(--box-shadow);\n bottom: 0 !important;\n display: grid;\n grid-template-rows: auto minmax(0, 1fr) auto;\n height: 100%;\n width: 100%;\n}\n\n::backdrop {\n background: transparent;\n}\n\n:host([modal])::backdrop {\n /* --nve-sys-layer-backdrop-background (not available on top layer) */\n background: hsl(0 0% 0% / 0.07); /* eslint-disable-line @nvidia-elements/lint/no-unexpected-css-value */\n}\n\n.header {\n display: flex;\n gap: var(--gap);\n}\n\n.content {\n padding: var(--padding);\n display: flex;\n flex-direction: column;\n align-items: start;\n overflow: auto;\n flex: 1;\n}\n\nnve-icon-button {\n position: absolute;\n top: var(--nve-ref-size-200);\n right: var(--nve-ref-size-200);\n z-index: 99;\n}\n\n:host([position='bottom']),\n:host([position='top']) {\n min-width: 100%;\n height: max-content;\n}\n\n:host([position='bottom']) [internal-host],\n:host([position='top']) [internal-host] {\n height: min-content;\n}\n\n:host([position='left']) {\n inset: auto auto auto 0;\n}\n\n:host([position='right']) {\n inset: auto 0 auto auto;\n}\n\n:host([position='top']) {\n inset: 0 auto auto;\n}\n\n:host([position='bottom']) {\n inset: auto auto 0;\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"drawer.js","names":[],"sources":["../../src/drawer/drawer.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 --nve-sys-interaction-background: var(--nve-sys-interaction-background-300);\n --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-300);\n --nve-sys-layer-popover-arrow-padding: 0px;\n --nve-sys-layer-popover-arrow-offset: 0px;\n --nve-sys-layer-popover-offset: 0px;\n --border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n --background: var(--nve-sys-layer-overlay-background);\n --color: var(--nve-sys-layer-overlay-color);\n --padding: 0;\n --box-shadow: var(--nve-ref-shadow-500);\n --gap: var(--nve-ref-space-sm);\n --top: 0px;\n --max-width: 400px;\n --width: 100vw;\n width: var(--width);\n max-width: var(--max-width);\n height: calc(100vh - var(--top));\n margin: initial !important;\n margin-block-start: var(--top) !important;\n position-area: unset !important; /* drawer uses its own fixed positioning with translation */\n}\n\n:host([size='sm']) {\n --max-width: 280px;\n}\n\n:host([size='lg']) {\n --max-width: 540px;\n}\n\n:host([position='left']) {\n transform: translateX(calc(-1 * var(--width))) !important;\n}\n\n:host([position='right']) {\n transform: translateX(var(--width)) !important;\n}\n\n:host(:popover-open) {\n transform: translateX(0) !important;\n}\n\n:host([inline]) {\n --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n --background: var(--nve-sys-layer-container-background);\n --box-shadow: none;\n --border: 0;\n transition: none !important;\n}\n\n[internal-host] {\n border: var(--border);\n background: var(--background);\n color: var(--color);\n box-shadow: var(--box-shadow);\n bottom: 0 !important;\n display: grid;\n grid-template-rows: auto minmax(0, 1fr) auto;\n height: 100%;\n width: 100%;\n}\n\n::backdrop {\n background: transparent;\n}\n\n:host([modal])::backdrop {\n /* --nve-sys-layer-backdrop-background (not available on top layer) */\n background: hsl(0 0% 0% / 0.07); /* eslint-disable-line @nvidia-elements/lint/no-unexpected-css-value */\n}\n\n.header {\n display: flex;\n gap: var(--gap);\n}\n\n.content {\n padding: var(--padding);\n display: flex;\n flex-direction: column;\n align-items: start;\n overflow: auto;\n flex: 1;\n}\n\nnve-icon-button {\n position: absolute;\n top: var(--nve-ref-size-200);\n right: var(--nve-ref-size-200);\n z-index: 99;\n}\n\n:host([position='bottom']),\n:host([position='top']) {\n min-width: 100%;\n height: max-content;\n}\n\n:host([position='bottom']) [internal-host],\n:host([position='top']) [internal-host] {\n height: min-content;\n}\n\n:host([position='left']) {\n inset: auto auto auto 0 !important;\n}\n\n:host([position='right']) {\n inset: auto 0 auto auto !important;\n}\n\n:host([position='top']) {\n inset: 0 auto auto !important;\n}\n\n:host([position='bottom']) {\n inset: auto auto 0 !important;\n}\n"],"mappings":""}
|
package/dist/drawer/drawer2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer2.js","names":["#i18nController","#inlineElement","#onToggle"],"sources":["../../src/drawer/drawer.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 type { PopoverType, Size } from '@nvidia-elements/core/internal';\nimport {\n createGhostElement,\n I18nController,\n popoverStyles,\n scopedRegistry,\n TypeNativePopoverController,\n typeSSR,\n useStyles\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport styles from './drawer.css?inline';\n\n/**\n * @element nve-drawer\n * @description Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings). Or use [Panel](./docs/elements/panel/) inline as its content couples with or closely relates to the content on the page (details, extra actions/options). [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n * @documentation https://nvidia.github.io/elements/docs/elements/drawer/\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/drawer\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the drawer opens.\n * @event close - Dispatched when the drawer closes.\n * @slot -
|
|
1
|
+
{"version":3,"file":"drawer2.js","names":["#i18nController","#inlineElement","#onToggle"],"sources":["../../src/drawer/drawer.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 type { PopoverType, Size } from '@nvidia-elements/core/internal';\nimport {\n createGhostElement,\n I18nController,\n popoverStyles,\n scopedRegistry,\n TypeNativePopoverController,\n typeSSR,\n useStyles\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport styles from './drawer.css?inline';\n\n/**\n * @element nve-drawer\n * @description Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings). Or use [Panel](./docs/elements/panel/) inline as its content couples with or closely relates to the content on the page (details, extra actions/options). [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n * @documentation https://nvidia.github.io/elements/docs/elements/drawer/\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/drawer\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the drawer opens.\n * @event close - Dispatched when the drawer closes.\n * @slot - Drawer body content displayed between the header and footer.\n * @cssprop --border\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --gap\n * @cssprop --top\n * @cssprop --max-width\n * @cssprop --width\n * @cssprop --animation-duration - Duration of drawer open/close animations\n * @csspart icon-button - The close icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n */\n@typeSSR()\n@scopedRegistry()\nexport class Drawer extends LitElement {\n /**\n * Sets the side position of the popover relative to the provided anchor element.\n * For drawer the anchor defaults to the document body.\n */\n @property({ type: String, reflect: true }) position: 'left' | 'right' | 'bottom' | 'top' = 'left';\n\n /**\n * Sets the max size of the drawer.\n */\n @property({ type: String, reflect: true }) size?: Size;\n\n /**\n * Determines if a close button should render within drawer. Non-closable\n * drawers suit drawers that require user confirmation steps.\n */\n @property({ type: Boolean }) closable: boolean;\n\n /**\n * Determines if a drawer should have a modal backdrop that visually overlays the UI.\n */\n @property({ type: Boolean, reflect: true }) modal: boolean;\n\n /**\n * (optional) By default the popover will automatically anchor itself relative to the trigger element.\n * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n */\n @property({ type: String }) anchor: string | HTMLElement = globalThis.document?.body;\n\n /**\n * @deprecated Use the popover API instead.\n * The trigger defines what element triggers an `open` interaction event.\n * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n */\n @property({ type: String }) trigger: string | HTMLElement;\n\n /**\n * Create a inline layout effect while retaining the a11y characteristics and top layer behavior (light dismiss, focus trap, non interactive background)\n * https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n */\n @property({ type: Boolean, reflect: true }) inline: boolean;\n\n /**\n * @deprecated Use the popover API instead.\n * Determines if popover visibility behavior should be automatically controlled by the trigger.\n */\n @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /**\n * Enables internal string values to update for internationalization.\n */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n /** @private */\n get popoverType(): PopoverType {\n return this.modal ? 'auto' : 'manual';\n }\n\n /** @private */\n get popoverDismissible() {\n return !!this.closable;\n }\n\n protected typeNativePopoverController = new TypeNativePopoverController<Drawer>(this);\n\n static styles = useStyles([popoverStyles, styles]);\n\n static readonly metadata = {\n tag: 'nve-drawer',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [IconButton.metadata.tag]: IconButton\n };\n\n render() {\n return html`\n <div internal-host>\n <div class=\"header\">\n <nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" .hidden=${!this.closable} @click=${this.hidePopover} icon-name=\"cancel\" .ariaLabel=${this.i18n.close} container=\"flat\"></nve-icon-button>\n <slot name=\"header\"></slot>\n </div>\n <div class=\"content\">\n <slot></slot>\n </div>\n <div>\n <slot name=\"footer\"></slot>\n </div>\n </div>\n `;\n }\n\n #inlineElement?: HTMLElement;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('toggle', this.#onToggle);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('toggle', this.#onToggle);\n this.#inlineElement?.remove();\n this.#inlineElement = undefined;\n }\n\n #onToggle = (toggleEvent: ToggleEvent) => {\n if (this.inline) {\n if (this.#inlineElement && toggleEvent.newState === 'closed') {\n this.#inlineElement.remove();\n } else {\n this.#inlineElement = createGhostElement(this);\n this.after(this.#inlineElement);\n }\n }\n };\n}\n"],"mappings":";;;;;;;;;;;;;AA4CO,IAAA,IAAA,cAAqB,EAAW;;+BAKsD,sBAsBhC,WAAW,UAAU,gBAqBxC,IAAI,EAAqB,IAAI,eAKlC,KAAKA,GAAgB,yCAYhB,IAAI,EAAoC,IAAI,cA4CvE,MAA6B;GACxC,AAAI,KAAK,WACH,KAAKC,MAAkB,EAAY,aAAa,WAClD,KAAKA,GAAe,OAAO,KAE3B,KAAKA,KAAiB,EAAmB,IAAI,GAC7C,KAAK,MAAM,KAAKA,EAAc;EAGpC;;CAtEA;CAQA,IAAI,cAA2B;EAC7B,OAAO,KAAK,QAAQ,SAAS;CAC/B;CAGA,IAAI,qBAAqB;EACvB,OAAO,CAAC,CAAC,KAAK;CAChB;;gBAIgB,EAAU,CAAC,GAAe,CAAM,CAAC;;;kBAEtB;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAEA,SAAS;EACP,OAAO,CAAI,2HAG2E,CAAC,KAAK,SAAS,YAAU,KAAK,YAAY,mCAAiC,KAAK,KAAK,MAAM;CAWnL;CAEA;CAEA,oBAA0B;EAExB,AADA,MAAM,kBAAkB,GACxB,KAAK,iBAAiB,UAAU,KAAKC,EAAS;CAChD;CAEA,uBAA6B;EAI3B,AAHA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,UAAU,KAAKA,EAAS,GACjD,KAAKD,IAAgB,OAAO,GAC5B,KAAKA,KAAiB,KAAA;CACxB;CAEA;AAUF;GAlHG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAMxC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAK1B,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAMzC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAOzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAMzB,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAMzC,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,MAOxE,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAvD3B,EAAQ,GACR,EAAe,CAAA,GAAA,CAAA"}
|
|
@@ -75,6 +75,7 @@ export declare class Dropdown extends LitElement {
|
|
|
75
75
|
modal: boolean;
|
|
76
76
|
/** @private */
|
|
77
77
|
popoverType: PopoverType;
|
|
78
|
+
/** @private */
|
|
78
79
|
popoverArrow: HTMLElement;
|
|
79
80
|
protected typeNativePopoverController: TypeNativePopoverController<Dropdown>;
|
|
80
81
|
/** @private */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown2.js","names":["#i18nController"],"sources":["../../src/dropdown/dropdown.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 { query } from 'lit/decorators/query.js';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { PopoverAlign, PopoverPosition, PopoverType } from '@nvidia-elements/core/internal';\nimport {\n audit,\n excessiveInstanceLimit,\n I18nController,\n popoverStyles,\n scopedRegistry,\n TypeNativePopoverController,\n useStyles\n} from '@nvidia-elements/core/internal';\nimport styles from './dropdown.css?inline';\n\n/**\n * @element nve-dropdown\n * @description Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n * @documentation https://nvidia.github.io/elements/docs/elements/dropdown/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/dropdown\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the dropdown opens.\n * @event close - Dispatched when the dropdown closes.\n * @slot - default slot for dropdown content\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --width\n * @cssprop --min-width\n * @cssprop --gap\n * @cssprop --arrow-transform - Transform applied to the popover arrow\n * @cssprop --animation-duration - Duration of dropdown open/close animations\n * @csspart icon-button - The close icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n */\n@audit({ excessiveInstanceLimit })\n@scopedRegistry()\nexport class Dropdown extends LitElement {\n static styles = useStyles([popoverStyles, styles]);\n\n static readonly metadata = {\n tag: 'nve-dropdown',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [IconButton.metadata.tag]: IconButton\n };\n\n /**\n * (optional) By default the popover will automatically anchor itself relative to the trigger element.\n * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n */\n @property({ type: String }) anchor: string | HTMLElement;\n\n /**\n * @deprecated Use the popover API instead.\n * The trigger defines what element triggers an `open` interaction event.\n * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n */\n @property({ type: String }) trigger: string | HTMLElement;\n\n /**\n * Sets the side position of the popover relative to the provided anchor element.\n */\n @property({ type: String, reflect: true }) position: PopoverPosition = 'bottom';\n\n /**\n * Sets the alignment of the popover relative to the provided anchor element.\n * If an arrow exists the alginment will be relative to the arrow against the anchor.\n */\n @property({ type: String, reflect: true }) alignment: PopoverAlign = 'start';\n\n /**\n * @deprecated Use the popover API instead.\n * Determines if popover visibility behavior should be automatically controlled by the trigger.\n */\n @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n /**\n * Determines if a close button should render within dropdown. Non-closable\n * dropdowns suit menu or selection patterns.\n */\n @property({ type: Boolean }) closable = false;\n\n /**\n * Determines if an arrow renders.\n */\n @property({ type: Boolean }) arrow = false;\n\n /** @private */\n @property({ type: Boolean, reflect: true }) modal = true;\n\n /** @private */\n @property({ type: String, attribute: 'popover-type' }) popoverType: PopoverType = 'auto';\n\n @query('.arrow') popoverArrow: HTMLElement;\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n protected typeNativePopoverController = new TypeNativePopoverController<Dropdown>(this);\n\n /** @private */\n get popoverDismissible() {\n return this.modal;\n }\n\n /**\n * Enables internal string values to update for internationalization.\n */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n render() {\n return html`\n <div internal-host>\n <slot name=\"header\"></slot>\n ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${this.hidePopover} icon-name=\"cancel\" container=\"flat\" size=\"sm\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n <slot></slot>\n <slot name=\"footer\"></slot>\n ${this.arrow ? html`<div class=\"arrow\"></div>` : ''}\n </div>\n `;\n }\n}\n"],"mappings":";;;;;;;;;;;;;AA8CO,IAAA,IAAA,cAAuB,EAAW;;+BA4BgC,2BAMF,yBAY7B,iBAKH,iBAGe,uBAG8B,
|
|
1
|
+
{"version":3,"file":"dropdown2.js","names":["#i18nController"],"sources":["../../src/dropdown/dropdown.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 { query } from 'lit/decorators/query.js';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { PopoverAlign, PopoverPosition, PopoverType } from '@nvidia-elements/core/internal';\nimport {\n audit,\n excessiveInstanceLimit,\n I18nController,\n popoverStyles,\n scopedRegistry,\n TypeNativePopoverController,\n useStyles\n} from '@nvidia-elements/core/internal';\nimport styles from './dropdown.css?inline';\n\n/**\n * @element nve-dropdown\n * @description Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n * @documentation https://nvidia.github.io/elements/docs/elements/dropdown/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/dropdown\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the dropdown opens.\n * @event close - Dispatched when the dropdown closes.\n * @slot - default slot for dropdown content\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --width\n * @cssprop --min-width\n * @cssprop --gap\n * @cssprop --arrow-transform - Transform applied to the popover arrow\n * @cssprop --animation-duration - Duration of dropdown open/close animations\n * @csspart icon-button - The close icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n */\n@audit({ excessiveInstanceLimit })\n@scopedRegistry()\nexport class Dropdown extends LitElement {\n static styles = useStyles([popoverStyles, styles]);\n\n static readonly metadata = {\n tag: 'nve-dropdown',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [IconButton.metadata.tag]: IconButton\n };\n\n /**\n * (optional) By default the popover will automatically anchor itself relative to the trigger element.\n * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n */\n @property({ type: String }) anchor: string | HTMLElement;\n\n /**\n * @deprecated Use the popover API instead.\n * The trigger defines what element triggers an `open` interaction event.\n * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n */\n @property({ type: String }) trigger: string | HTMLElement;\n\n /**\n * Sets the side position of the popover relative to the provided anchor element.\n */\n @property({ type: String, reflect: true }) position: PopoverPosition = 'bottom';\n\n /**\n * Sets the alignment of the popover relative to the provided anchor element.\n * If an arrow exists the alginment will be relative to the arrow against the anchor.\n */\n @property({ type: String, reflect: true }) alignment: PopoverAlign = 'start';\n\n /**\n * @deprecated Use the popover API instead.\n * Determines if popover visibility behavior should be automatically controlled by the trigger.\n */\n @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n /**\n * Determines if a close button should render within dropdown. Non-closable\n * dropdowns suit menu or selection patterns.\n */\n @property({ type: Boolean }) closable = false;\n\n /**\n * Determines if an arrow renders.\n */\n @property({ type: Boolean }) arrow = false;\n\n /** @private */\n @property({ type: Boolean, reflect: true }) modal = true;\n\n /** @private */\n @property({ type: String, attribute: 'popover-type' }) popoverType: PopoverType = 'auto';\n\n /** @private */\n @query('.arrow') popoverArrow: HTMLElement;\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n protected typeNativePopoverController = new TypeNativePopoverController<Dropdown>(this);\n\n /** @private */\n get popoverDismissible() {\n return this.modal;\n }\n\n /**\n * Enables internal string values to update for internationalization.\n */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n render() {\n return html`\n <div internal-host>\n <slot name=\"header\"></slot>\n ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${this.hidePopover} icon-name=\"cancel\" container=\"flat\" size=\"sm\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n <slot></slot>\n <slot name=\"footer\"></slot>\n ${this.arrow ? html`<div class=\"arrow\"></div>` : ''}\n </div>\n `;\n }\n}\n"],"mappings":";;;;;;;;;;;;;AA8CO,IAAA,IAAA,cAAuB,EAAW;;+BA4BgC,2BAMF,yBAY7B,iBAKH,iBAGe,uBAG8B,kBAK1C,IAAI,EAAqB,IAAI,sCAE7B,IAAI,EAAsC,IAAI,eAUnD,KAAKA,GAAgB;;;gBAzExC,EAAU,CAAC,GAAe,CAAM,CAAC;;;kBAEtB;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAoDA;CAKA,IAAI,qBAAqB;EACvB,OAAO,KAAK;CACd;CAOA,SAAS;EACP,OAAO,CAAI,iDAGP,KAAK,WAAW,CAAI,mFAAkF,KAAK,YAAY,8DAA4D,KAAK,KAAK,MAAM,wBAAuB,GAAG,0CAG7N,KAAK,QAAQ,CAAI,8BAA8B,GAAG;CAGxD;AACF;GAvEG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAOzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAKzB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAMxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAMxC,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,MAMxE,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAK1B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAG1B,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAGzC,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAe,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,MAGpD,EAAM,QAAQ,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,MAcd,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UA5E3B,EAAM,EAAE,wBAAA,GAAuB,CAAC,GAChC,EAAe,CAAA,GAAA,CAAA"}
|
|
@@ -9,8 +9,6 @@ import type { Dropdown } from '@nvidia-elements/core/dropdown';
|
|
|
9
9
|
* @slot - default slot for dropdown content
|
|
10
10
|
* @event open - Dispatched when a dropdown in the group opens
|
|
11
11
|
* @event close - Dispatched when a dropdown in the group closes
|
|
12
|
-
* @cssprop --nve-dropdown-group-spacing
|
|
13
|
-
* @cssprop --nve-dropdown-group-transition
|
|
14
12
|
* @cssprop --arrow-transform - Transform applied to the popover arrow
|
|
15
13
|
* @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
|
|
16
14
|
*/
|
|
@@ -26,5 +24,6 @@ export declare class DropdownGroup extends LitElement {
|
|
|
26
24
|
render(): import("lit").TemplateResult<1>;
|
|
27
25
|
connectedCallback(): void;
|
|
28
26
|
disconnectedCallback(): void;
|
|
27
|
+
/** Closes every descendant dropdown in the group. */
|
|
29
28
|
close(): void;
|
|
30
29
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-group.js","names":["#syncDropdowns","#pointerup","#_pointerup","#keydown","#onOpen","#onClose"],"sources":["../../src/dropdown-group/dropdown-group.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 { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport {\n clickOutsideElementBounds,\n appendRootNodeStyle,\n getFlattenedFocusableItems,\n isSimpleFocusable,\n useStyles,\n audit\n} from '@nvidia-elements/core/internal';\nimport type { Dropdown } from '@nvidia-elements/core/dropdown';\nimport globalStyles from './dropdown-group.global.css?inline';\n\n/**\n * @element nve-dropdown-group\n * @description A Dropdown Group streamlines the management of linked dropdowns and supports nested dropdowns for a more organized and intuitive user experience\n * @documentation https://nvidia.github.io/elements/docs/elements/dropdown-group/\n * @since 1.30.1\n * @entrypoint \\@nvidia-elements/core/dropdown-group\n * @slot - default slot for dropdown content\n * @event open - Dispatched when a dropdown in the group opens\n * @event close - Dispatched when a dropdown in the group closes\n * @cssprop --
|
|
1
|
+
{"version":3,"file":"dropdown-group.js","names":["#syncDropdowns","#pointerup","#_pointerup","#keydown","#onOpen","#onClose"],"sources":["../../src/dropdown-group/dropdown-group.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 { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport {\n clickOutsideElementBounds,\n appendRootNodeStyle,\n getFlattenedFocusableItems,\n isSimpleFocusable,\n useStyles,\n audit\n} from '@nvidia-elements/core/internal';\nimport type { Dropdown } from '@nvidia-elements/core/dropdown';\nimport globalStyles from './dropdown-group.global.css?inline';\n\n/**\n * @element nve-dropdown-group\n * @description A Dropdown Group streamlines the management of linked dropdowns and supports nested dropdowns for a more organized and intuitive user experience\n * @documentation https://nvidia.github.io/elements/docs/elements/dropdown-group/\n * @since 1.30.1\n * @entrypoint \\@nvidia-elements/core/dropdown-group\n * @slot - default slot for dropdown content\n * @event open - Dispatched when a dropdown in the group opens\n * @event close - Dispatched when a dropdown in the group closes\n * @cssprop --arrow-transform - Transform applied to the popover arrow\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n */\n@audit()\nexport class DropdownGroup extends LitElement {\n static styles = useStyles([]);\n\n static readonly metadata = {\n tag: 'nve-dropdown-group',\n version: '0.0.0',\n children: ['nve-dropdown']\n };\n\n @queryAssignedElements() protected dropdowns!: Dropdown[];\n\n render() {\n return html`\n <div internal-host>\n <slot @slotchange=${this.#syncDropdowns}></slot>\n </div>\n `;\n }\n\n #_pointerup = (e: PointerEvent) => this.#pointerup(e);\n\n connectedCallback() {\n super.connectedCallback();\n appendRootNodeStyle(this, globalStyles);\n globalThis.document?.addEventListener('pointerup', this.#_pointerup);\n this.addEventListener('keydown', this.#keydown);\n this.addEventListener('open', this.#onOpen as EventListener);\n this.addEventListener('close', this.#onClose as EventListener);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n globalThis.document?.removeEventListener('pointerup', this.#_pointerup);\n this.removeEventListener('keydown', this.#keydown);\n this.removeEventListener('open', this.#onOpen as EventListener);\n this.removeEventListener('close', this.#onClose as EventListener);\n }\n\n #syncDropdowns() {\n this.dropdowns.forEach(dropdown => {\n dropdown.popoverType = 'manual';\n });\n }\n\n #pointerup(event: PointerEvent) {\n const multipleDropdownsOpen = this.dropdowns.some(dropdown => dropdown.matches(':popover-open'));\n const pointerIsOutsideGroup = this.dropdowns.every(dropdown => clickOutsideElementBounds(event, dropdown));\n if (multipleDropdownsOpen && pointerIsOutsideGroup) {\n this.close();\n }\n }\n\n #keydown(event: KeyboardEvent) {\n const target = event.target as HTMLElement;\n if (event.code === 'Escape') {\n this.close();\n }\n if (event.code === 'ArrowRight') {\n const targetId = target.getAttribute('popovertarget');\n const dropdown = this.dropdowns.find(d => d.id === targetId);\n dropdown?.showPopover();\n }\n if (event.code === 'ArrowLeft' && isSimpleFocusable(event.target as HTMLElement)) {\n target.closest('nve-dropdown')?.hidePopover();\n }\n }\n\n #onOpen(event: CustomEvent) {\n const dropdown = event.target as HTMLElement;\n const isLocalDropdown = dropdown.localName === 'nve-dropdown' && this.dropdowns.find(d => d === dropdown);\n if (isLocalDropdown) {\n getFlattenedFocusableItems(dropdown)[0]?.focus();\n }\n }\n\n #onClose(event: CustomEvent) {\n const element = event.target as HTMLElement;\n const isLocalDropdown = element.localName === 'nve-dropdown' && this.dropdowns.find(d => d === element);\n if (isLocalDropdown) {\n // _activeTrigger is a popover controller internal API\n const dropdown = element as Dropdown & { _activeTrigger?: HTMLElement };\n dropdown._activeTrigger?.focus();\n }\n }\n\n /** Closes every descendant dropdown in the group. */\n close() {\n this.querySelectorAll('nve-dropdown').forEach(d => d.hidePopover());\n }\n}\n"],"mappings":";;;;;;;;;AA6BO,IAAA,IAAA,cAA4B,EAAW;;gBAC5B,EAAU,CAAC,CAAC;;;kBAED;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,cAAc;EAC3B;;CAIA,SAAS;EACP,OAAO,CAAI,yCAEa,KAAKA,GAAe;CAG9C;CAEA,MAAe,MAAoB,KAAKC,GAAW,CAAC;CAEpD,oBAAoB;EAMlB,AALA,MAAM,kBAAkB,GACxB,EAAoB,MAAM,CAAY,GACtC,WAAW,UAAU,iBAAiB,aAAa,KAAKC,EAAW,GACnE,KAAK,iBAAiB,WAAW,KAAKC,EAAQ,GAC9C,KAAK,iBAAiB,QAAQ,KAAKC,EAAwB,GAC3D,KAAK,iBAAiB,SAAS,KAAKC,EAAyB;CAC/D;CAEA,uBAAuB;EAKrB,AAJA,MAAM,qBAAqB,GAC3B,WAAW,UAAU,oBAAoB,aAAa,KAAKH,EAAW,GACtE,KAAK,oBAAoB,WAAW,KAAKC,EAAQ,GACjD,KAAK,oBAAoB,QAAQ,KAAKC,EAAwB,GAC9D,KAAK,oBAAoB,SAAS,KAAKC,EAAyB;CAClE;CAEA,KAAiB;EACf,KAAK,UAAU,SAAQ,MAAY;GACjC,EAAS,cAAc;EACzB,CAAC;CACH;CAEA,GAAW,GAAqB;EAC9B,IAAM,IAAwB,KAAK,UAAU,MAAK,MAAY,EAAS,QAAQ,eAAe,CAAC,GACzF,IAAwB,KAAK,UAAU,OAAM,MAAY,EAA0B,GAAO,CAAQ,CAAC;EACzG,AAAI,KAAyB,KAC3B,KAAK,MAAM;CAEf;CAEA,GAAS,GAAsB;EAC7B,IAAM,IAAS,EAAM;EAIrB,IAHI,EAAM,SAAS,YACjB,KAAK,MAAM,GAET,EAAM,SAAS,cAAc;GAC/B,IAAM,IAAW,EAAO,aAAa,eAAe;GAEpD,KADsB,UAAU,MAAK,MAAK,EAAE,OAAO,CACnD,CAAA,EAAU,YAAY;EACxB;EACA,AAAI,EAAM,SAAS,eAAe,EAAkB,EAAM,MAAqB,KAC7E,EAAO,QAAQ,cAAc,CAAC,EAAE,YAAY;CAEhD;CAEA,GAAQ,GAAoB;EAC1B,IAAM,IAAW,EAAM;EAEvB,AADwB,EAAS,cAAc,kBAAkB,KAAK,UAAU,MAAK,MAAK,MAAM,CAAQ,KAEtG,EAA2B,CAAQ,CAAC,CAAC,EAAE,EAAE,MAAM;CAEnD;CAEA,GAAS,GAAoB;EAC3B,IAAM,IAAU,EAAM;EAEtB,AADwB,EAAQ,cAAc,kBAAkB,KAAK,UAAU,MAAK,MAAK,MAAM,CAAO,KAIpG,EAAS,gBAAgB,MAAM;CAEnC;CAGA,QAAQ;EACN,KAAK,iBAAiB,cAAc,CAAC,CAAC,SAAQ,MAAK,EAAE,YAAY,CAAC;CACpE;AACF;GAhFG,EAAsB,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,UAVxB,EAAM,CAAA,GAAA,CAAA"}
|
|
@@ -8,22 +8,24 @@ declare const Dropzone_base: import("@nvidia-elements/forms/mixins").FormControl
|
|
|
8
8
|
* @documentation https://nvidia.github.io/elements/docs/elements/dropzone/
|
|
9
9
|
* @since 1.29.0
|
|
10
10
|
* @entrypoint \@nvidia-elements/core/dropzone
|
|
11
|
+
* @property {File[]} value - Files selected or dropped by the user. Assign files through the JavaScript property; the HTML `value` attribute is not supported.
|
|
11
12
|
* @event change - Dispatched when the value has changed (files located in event.target)
|
|
12
|
-
* @slot -
|
|
13
|
+
* @slot - Custom messaging that replaces the default upload instructions.
|
|
13
14
|
* @cssprop --background
|
|
14
15
|
* @cssprop --border-color
|
|
15
16
|
* @cssprop --border-radius
|
|
16
17
|
* @cssprop --padding
|
|
17
18
|
* @cssprop --min-height
|
|
18
19
|
* @cssprop --color
|
|
19
|
-
* @slot icon - default
|
|
20
|
-
* @slot content - default slot for content
|
|
20
|
+
* @slot icon - Custom icon that replaces the default upload icon.
|
|
21
21
|
* @csspart icon - The upload icon element
|
|
22
22
|
* @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
|
|
23
23
|
*/
|
|
24
24
|
export declare class Dropzone extends Dropzone_base {
|
|
25
25
|
#private;
|
|
26
|
+
/** Comma-separated file extensions or MIME types accepted by the dropzone. */
|
|
26
27
|
accept: string;
|
|
28
|
+
/** File size limit in bytes. */
|
|
27
29
|
maxFileSize: number;
|
|
28
30
|
/**
|
|
29
31
|
* Enables internal string values to update for internationalization.
|
|
@@ -58,6 +60,7 @@ export declare class Dropzone extends Dropzone_base {
|
|
|
58
60
|
static elementDefinitions: {
|
|
59
61
|
[Icon.metadata.tag]: typeof Icon;
|
|
60
62
|
};
|
|
63
|
+
/** @protected */
|
|
61
64
|
formResetCallback(): void;
|
|
62
65
|
constructor();
|
|
63
66
|
connectedCallback(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropzone2.js","names":["#i18nController","#preventDefaults","#toggleHighlighted","#addFiles","#handleClick","#handleDragEnter","#handleDragOver","#handleDragLeave","#handleDrop","#removeEmptyNodes","#formatFileTypeSpecifiers","#handleFileInputChange"],"sources":["../../src/dropzone/dropzone.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 { query } from 'lit/decorators/query.js';\nimport {\n formatFileSize,\n useStyles,\n removeEmptyTextNode,\n I18nController,\n scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './dropzone.css?inline';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { fileTypeValidator, fileSizeValidator, getFileTypeSpecifiers } from './dropzone.util';\n\n/**\n * @element nve-dropzone\n * @description A dropzone form control that enables users to drag and drop files onto it.\n * @documentation https://nvidia.github.io/elements/docs/elements/dropzone/\n * @since 1.29.0\n * @entrypoint \\@nvidia-elements/core/dropzone\n * @event change - Dispatched when the value has changed (files located in event.target)\n * @slot -
|
|
1
|
+
{"version":3,"file":"dropzone2.js","names":["#i18nController","#preventDefaults","#toggleHighlighted","#addFiles","#handleClick","#handleDragEnter","#handleDragOver","#handleDragLeave","#handleDrop","#removeEmptyNodes","#formatFileTypeSpecifiers","#handleFileInputChange"],"sources":["../../src/dropzone/dropzone.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 { query } from 'lit/decorators/query.js';\nimport {\n formatFileSize,\n useStyles,\n removeEmptyTextNode,\n I18nController,\n scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './dropzone.css?inline';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { fileTypeValidator, fileSizeValidator, getFileTypeSpecifiers } from './dropzone.util';\n\n/* eslint-disable jsdoc/no-types */\n// Explicit JSDoc type because the CEM analyzer loses the inherited generic specialization.\n\n/**\n * @element nve-dropzone\n * @description A dropzone form control that enables users to drag and drop files onto it.\n * @documentation https://nvidia.github.io/elements/docs/elements/dropzone/\n * @since 1.29.0\n * @entrypoint \\@nvidia-elements/core/dropzone\n * @property {File[]} value - Files selected or dropped by the user. Assign files through the JavaScript property; the HTML `value` attribute is not supported.\n * @event change - Dispatched when the value has changed (files located in event.target)\n * @slot - Custom messaging that replaces the default upload instructions.\n * @cssprop --background\n * @cssprop --border-color\n * @cssprop --border-radius\n * @cssprop --padding\n * @cssprop --min-height\n * @cssprop --color\n * @slot icon - Custom icon that replaces the default upload icon.\n * @csspart icon - The upload icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file\n */\n@scopedRegistry()\nexport class Dropzone extends FormControlMixin<typeof LitElement, File[]>(LitElement) {\n /** Comma-separated file extensions or MIME types accepted by the dropzone. */\n @property()\n accept: string = `image/gif, image/jpeg, image/png, image/svg+xml`;\n\n /** File size limit in bytes. */\n @property({ attribute: 'max-file-size', type: Number })\n maxFileSize: number = 2 * 1024 ** 2;\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /**\n * Enables internal string values to update for internationalization.\n */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n @query('#dropzone-input')\n private fileInput: HTMLInputElement;\n\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-dropzone',\n version: '0.0.0',\n validators: [fileTypeValidator, fileSizeValidator],\n valueSchema: {\n type: 'array' as const,\n items: {\n type: 'object' as const,\n properties: {\n name: { type: 'string' as const },\n size: { type: 'number' as const },\n type: { type: 'string' as const }\n }\n }\n }\n };\n\n static elementDefinitions = {\n [Icon.metadata.tag]: Icon\n };\n\n /** @protected */\n formResetCallback() {\n this.value = [];\n this.requestUpdate();\n }\n\n constructor() {\n super();\n this.value = [];\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('nve-control', '');\n globalThis.document.addEventListener('dragover', this.#preventDefaults);\n globalThis.document.addEventListener('drop', this.#preventDefaults);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n globalThis.document.removeEventListener('dragover', this.#preventDefaults);\n globalThis.document.removeEventListener('drop', this.#preventDefaults);\n }\n\n #preventDefaults(event: Event) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n #handleClick() {\n this.fileInput.click();\n }\n\n #handleDragEnter(event: DragEvent) {\n this.#preventDefaults(event);\n this.#toggleHighlighted(true);\n }\n\n #handleDragOver(event: DragEvent) {\n this.#preventDefaults(event);\n this.#toggleHighlighted(true);\n }\n\n #handleDragLeave(event: DragEvent) {\n this.#preventDefaults(event);\n this.#toggleHighlighted(false);\n }\n\n #handleDrop(event: DragEvent) {\n this.#preventDefaults(event);\n this.#toggleHighlighted(false);\n\n const files = Array.from(event.dataTransfer!.files);\n this.#addFiles(files);\n }\n\n #handleFileInputChange(event: Event) {\n this.#preventDefaults(event);\n\n const files = Array.from(this.fileInput.files!);\n this.#addFiles(files);\n\n this.fileInput.value = '';\n }\n\n #addFiles(files: File[]) {\n this.value = [...(this.value ?? []), ...files];\n this.dispatchChangeEvent();\n }\n\n #formatFileTypeSpecifiers(acceptTypes: string) {\n const types = getFileTypeSpecifiers(acceptTypes);\n\n if (types.length === 1) {\n return types[0]!.toUpperCase();\n }\n\n const lastType = types.pop();\n return `${types.join(', ').toUpperCase()} or ${lastType!.toUpperCase()}`;\n }\n\n #toggleHighlighted(highlighted: boolean) {\n this.toggleAttribute('highlighted', highlighted);\n }\n\n #removeEmptyNodes(e: Event) {\n (e.target as HTMLSlotElement).assignedNodes().forEach((node: Node) => removeEmptyTextNode(node));\n }\n\n render() {\n return html`<div internal-host>\n <div class=\"container\"\n @click=${this.#handleClick} \n @dragenter=${this.#handleDragEnter}\n @dragover=${this.#handleDragOver}\n @dragleave=${this.#handleDragLeave}\n @drop=${this.#handleDrop}>\n <svg class=\"border\" width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"100%\" height=\"100%\" fill=\"none\" rx=\"4\" ry=\"4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-dasharray=\"6,6\" stroke-dashoffset=\"0\" stroke-linecap=\"square\" />\n </svg>\n <slot name=\"icon\"><nve-icon part=\"icon\" class=\"icon\" name=\"upload\"></nve-icon></slot>\n <slot @slotchange=${this.#removeEmptyNodes}>\n <div class=\"text-center\">\n <div class=\"text-bold\">${this.i18n.dragAndDrop} ${this.i18n.files} ${this.i18n.or} <span class=\"text-emphasized\">${this.i18n.browseFiles}</span></div>\n <div class=\"text-muted\">${this.#formatFileTypeSpecifiers(this.accept)} — ${this.i18n.maxFileSize} ${formatFileSize(this.maxFileSize)}</div>\n </div>\n </slot>\n <input id=\"dropzone-input\" type=\"file\" accept=${this.accept} @change=${this.#handleFileInputChange} multiple hidden></input>\n </div>\n </div>`;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;AAyCO,IAAA,IAAA,cAAuB,EAA4C,CAAU,CAAC,CAAC;CASpF;;gBAUgB,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;GACT,YAAY,CAAC,GAAmB,CAAiB;GACjD,aAAa;IACX,MAAM;IACN,OAAO;KACL,MAAM;KACN,YAAY;MACV,MAAM,EAAE,MAAM,SAAkB;MAChC,MAAM,EAAE,MAAM,SAAkB;MAChC,MAAM,EAAE,MAAM,SAAkB;KAClC;IACF;GACF;EACF;;;4BAE4B,GACzB,EAAK,SAAS,MAAM,EACvB;;CAGA,oBAAoB;EAElB,AADA,KAAK,QAAQ,CAAC,GACd,KAAK,cAAc;CACrB;CAEA,cAAc;EAEZ,AADA,MAAM,iBA9CS,sEAIK,IAAI,QAAQ,aAEM,IAAI,EAAqB,IAAI,eAKlC,KAAKA,GAAgB,MAoCtD,KAAK,QAAQ,CAAC;CAChB;CAEA,oBAA0B;EAIxB,AAHA,MAAM,kBAAkB,GACxB,KAAK,aAAa,eAAe,EAAE,GACnC,WAAW,SAAS,iBAAiB,YAAY,KAAKC,EAAgB,GACtE,WAAW,SAAS,iBAAiB,QAAQ,KAAKA,EAAgB;CACpE;CAEA,uBAA6B;EAG3B,AAFA,MAAM,qBAAqB,GAC3B,WAAW,SAAS,oBAAoB,YAAY,KAAKA,EAAgB,GACzE,WAAW,SAAS,oBAAoB,QAAQ,KAAKA,EAAgB;CACvE;CAEA,GAAiB,GAAc;EAE7B,AADA,EAAM,eAAe,GACrB,EAAM,gBAAgB;CACxB;CAEA,KAAe;EACb,KAAK,UAAU,MAAM;CACvB;CAEA,GAAiB,GAAkB;EAEjC,AADA,KAAKA,GAAiB,CAAK,GAC3B,KAAKC,GAAmB,EAAI;CAC9B;CAEA,GAAgB,GAAkB;EAEhC,AADA,KAAKD,GAAiB,CAAK,GAC3B,KAAKC,GAAmB,EAAI;CAC9B;CAEA,GAAiB,GAAkB;EAEjC,AADA,KAAKD,GAAiB,CAAK,GAC3B,KAAKC,GAAmB,EAAK;CAC/B;CAEA,GAAY,GAAkB;EAE5B,AADA,KAAKD,GAAiB,CAAK,GAC3B,KAAKC,GAAmB,EAAK;EAE7B,IAAM,IAAQ,MAAM,KAAK,EAAM,aAAc,KAAK;EAClD,KAAKC,GAAU,CAAK;CACtB;CAEA,GAAuB,GAAc;EACnC,KAAKF,GAAiB,CAAK;EAE3B,IAAM,IAAQ,MAAM,KAAK,KAAK,UAAU,KAAM;EAG9C,AAFA,KAAKE,GAAU,CAAK,GAEpB,KAAK,UAAU,QAAQ;CACzB;CAEA,GAAU,GAAe;EAEvB,AADA,KAAK,QAAQ,CAAC,GAAI,KAAK,SAAS,CAAC,GAAI,GAAG,CAAK,GAC7C,KAAK,oBAAoB;CAC3B;CAEA,GAA0B,GAAqB;EAC7C,IAAM,IAAQ,EAAsB,CAAW;EAE/C,IAAI,EAAM,WAAW,GACnB,OAAO,EAAM,EAAE,CAAE,YAAY;EAG/B,IAAM,IAAW,EAAM,IAAI;EAC3B,OAAO,GAAG,EAAM,KAAK,IAAI,CAAC,CAAC,YAAY,EAAE,MAAM,EAAU,YAAY;CACvE;CAEA,GAAmB,GAAsB;EACvC,KAAK,gBAAgB,eAAe,CAAW;CACjD;CAEA,GAAkB,GAAU;EAC1B,EAAG,OAA2B,cAAc,CAAC,CAAC,SAAS,MAAe,EAAoB,CAAI,CAAC;CACjG;CAEA,SAAS;EACP,OAAO,CAAI,qDAEE,KAAKC,GAAa,gBACd,KAAKC,GAAiB,eACvB,KAAKC,GAAgB,gBACpB,KAAKC,GAAiB,WAC3B,KAAKC,GAAY,4WAKL,KAAKC,GAAkB,oDAEd,KAAK,KAAK,YAAY,GAAG,KAAK,KAAK,MAAM,GAAG,KAAK,KAAK,GAAG,iCAAiC,KAAK,KAAK,YAAY,uCAC/G,KAAKC,GAA0B,KAAK,MAAM,EAAE,KAAW,KAAK,KAAK,YAAY,GAAG,EAAe,KAAK,WAAW,EAAE,oEAG/F,KAAK,OAAO,aAAW,KAAKC,GAAuB;CAGzG;AACF;GAvJG,EAAS,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAIT,EAAS;CAAE,WAAW;CAAiB,MAAM;AAAO,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,MAQrD,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAEzB,EAAM,iBAAiB,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,UAjBzB,EAAe,CAAA,GAAA,CAAA"}
|
package/dist/file/file2.js
CHANGED
|
@@ -72,7 +72,7 @@ export declare class FormatNumber extends LitElement {
|
|
|
72
72
|
/**
|
|
73
73
|
* Grouping separators: 'auto' | 'always' | 'min2' | 'true' | 'false'.
|
|
74
74
|
*/
|
|
75
|
-
useGrouping?:
|
|
75
|
+
useGrouping?: 'auto' | 'always' | 'min2' | 'true' | 'false' | boolean;
|
|
76
76
|
/**
|
|
77
77
|
* Pad fraction output to at least this many digits (0-20).
|
|
78
78
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"format-number2.js","names":["#rawValue","#resolvedLocale","#parsedNumber","#formatOptions","#formattedNumber","#onSlotChange"],"sources":["../../src/format-number/format-number.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-number.css?inline';\n\nexport type FormatNumberStyle = 'decimal' | 'currency' | 'percent' | 'unit';\nexport type CurrencyDisplayOption = 'symbol' | 'code' | 'name' | 'narrowSymbol';\nexport type CurrencySignOption = 'standard' | 'accounting';\nexport type NotationOption = 'standard' | 'scientific' | 'engineering' | 'compact';\nexport type CompactDisplayOption = 'short' | 'long';\nexport type UnitDisplayOption = 'short' | 'long' | 'narrow';\nexport type SignDisplayOption = 'auto' | 'never' | 'always' | 'exceptZero';\n\nconst STRING_KEYS: [keyof FormatNumber, string][] = [\n ['currency', 'currency'],\n ['currencyDisplay', 'currencyDisplay'],\n ['currencySign', 'currencySign'],\n ['notation', 'notation'],\n ['compactDisplay', 'compactDisplay'],\n ['unit', 'unit'],\n ['unitDisplay', 'unitDisplay'],\n ['signDisplay', 'signDisplay']\n];\n\nconst NUMBER_KEYS: [keyof FormatNumber, string][] = [\n ['minimumFractionDigits', 'minimumFractionDigits'],\n ['maximumFractionDigits', 'maximumFractionDigits'],\n ['minimumIntegerDigits', 'minimumIntegerDigits']\n];\n\n/**\n * @element nve-format-number\n * @description A localized number formatter for currencies, percentages, units, and compact notation, backed by Intl.NumberFormat.\n * Provide a `currency` attribute when `formatStyle` is `currency`, and a `unit` attribute when `formatStyle` is `unit`.\n * @documentation https://nvidia.github.io/elements/docs/elements/format-number/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/format-number\n * @slot - Numeric string to format (such as 1234567 or 1234.56). Serves as fallback before hydration.\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data\n */\n@typeSSR()\nexport class FormatNumber extends LitElement {\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-format-number',\n version: '0.0.0'\n };\n\n /**\n * Optional numeric 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 }) number?: 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 * Formatting style: 'decimal' | 'currency' | 'percent' | 'unit'.\n */\n @property({ type: String, attribute: 'format-style' }) formatStyle: FormatNumberStyle = 'decimal';\n\n /**\n * ISO 4217 currency code (such as USD or EUR). Required when formatStyle is currency.\n */\n @property({ type: String }) currency?: string;\n\n /**\n * Currency sign style: 'standard' | 'accounting'.\n */\n @property({ type: String, attribute: 'currency-sign' }) currencySign?: CurrencySignOption;\n\n /**\n * Currency display style: 'symbol' | 'code' | 'name' | 'narrowSymbol'.\n */\n @property({ type: String, attribute: 'currency-display' }) currencyDisplay?: CurrencyDisplayOption;\n\n /**\n * Unit identifier (such as kilometer or byte). Required when formatStyle is unit.\n */\n @property({ type: String }) unit?: string;\n\n /**\n * Unit display style: 'short' | 'long' | 'narrow'.\n */\n @property({ type: String, attribute: 'unit-display' }) unitDisplay?: UnitDisplayOption;\n\n /**\n * Number notation: 'standard' | 'scientific' | 'engineering' | 'compact'.\n */\n @property({ type: String }) notation?: NotationOption;\n\n /**\n * Compact notation display: 'short' | 'long'. Only applies when notation is compact.\n */\n @property({ type: String, attribute: 'compact-display' }) compactDisplay?: CompactDisplayOption;\n\n /**\n * Sign display: 'auto' | 'never' | 'always' | 'exceptZero'.\n */\n @property({ type: String, attribute: 'sign-display' }) signDisplay?: SignDisplayOption;\n\n /**\n * Grouping separators: 'auto' | 'always' | 'min2' | 'true' | 'false'.\n */\n @property({ type: String, attribute: 'use-grouping' })
|
|
1
|
+
{"version":3,"file":"format-number2.js","names":["#rawValue","#resolvedLocale","#parsedNumber","#formatOptions","#formattedNumber","#onSlotChange"],"sources":["../../src/format-number/format-number.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-number.css?inline';\n\nexport type FormatNumberStyle = 'decimal' | 'currency' | 'percent' | 'unit';\nexport type CurrencyDisplayOption = 'symbol' | 'code' | 'name' | 'narrowSymbol';\nexport type CurrencySignOption = 'standard' | 'accounting';\nexport type NotationOption = 'standard' | 'scientific' | 'engineering' | 'compact';\nexport type CompactDisplayOption = 'short' | 'long';\nexport type UnitDisplayOption = 'short' | 'long' | 'narrow';\nexport type SignDisplayOption = 'auto' | 'never' | 'always' | 'exceptZero';\n\nconst STRING_KEYS: [keyof FormatNumber, string][] = [\n ['currency', 'currency'],\n ['currencyDisplay', 'currencyDisplay'],\n ['currencySign', 'currencySign'],\n ['notation', 'notation'],\n ['compactDisplay', 'compactDisplay'],\n ['unit', 'unit'],\n ['unitDisplay', 'unitDisplay'],\n ['signDisplay', 'signDisplay']\n];\n\nconst NUMBER_KEYS: [keyof FormatNumber, string][] = [\n ['minimumFractionDigits', 'minimumFractionDigits'],\n ['maximumFractionDigits', 'maximumFractionDigits'],\n ['minimumIntegerDigits', 'minimumIntegerDigits']\n];\n\n/**\n * @element nve-format-number\n * @description A localized number formatter for currencies, percentages, units, and compact notation, backed by Intl.NumberFormat.\n * Provide a `currency` attribute when `formatStyle` is `currency`, and a `unit` attribute when `formatStyle` is `unit`.\n * @documentation https://nvidia.github.io/elements/docs/elements/format-number/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/format-number\n * @slot - Numeric string to format (such as 1234567 or 1234.56). Serves as fallback before hydration.\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data\n */\n@typeSSR()\nexport class FormatNumber extends LitElement {\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-format-number',\n version: '0.0.0'\n };\n\n /**\n * Optional numeric 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 }) number?: 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 * Formatting style: 'decimal' | 'currency' | 'percent' | 'unit'.\n */\n @property({ type: String, attribute: 'format-style' }) formatStyle: FormatNumberStyle = 'decimal';\n\n /**\n * ISO 4217 currency code (such as USD or EUR). Required when formatStyle is currency.\n */\n @property({ type: String }) currency?: string;\n\n /**\n * Currency sign style: 'standard' | 'accounting'.\n */\n @property({ type: String, attribute: 'currency-sign' }) currencySign?: CurrencySignOption;\n\n /**\n * Currency display style: 'symbol' | 'code' | 'name' | 'narrowSymbol'.\n */\n @property({ type: String, attribute: 'currency-display' }) currencyDisplay?: CurrencyDisplayOption;\n\n /**\n * Unit identifier (such as kilometer or byte). Required when formatStyle is unit.\n */\n @property({ type: String }) unit?: string;\n\n /**\n * Unit display style: 'short' | 'long' | 'narrow'.\n */\n @property({ type: String, attribute: 'unit-display' }) unitDisplay?: UnitDisplayOption;\n\n /**\n * Number notation: 'standard' | 'scientific' | 'engineering' | 'compact'.\n */\n @property({ type: String }) notation?: NotationOption;\n\n /**\n * Compact notation display: 'short' | 'long'. Only applies when notation is compact.\n */\n @property({ type: String, attribute: 'compact-display' }) compactDisplay?: CompactDisplayOption;\n\n /**\n * Sign display: 'auto' | 'never' | 'always' | 'exceptZero'.\n */\n @property({ type: String, attribute: 'sign-display' }) signDisplay?: SignDisplayOption;\n\n /**\n * Grouping separators: 'auto' | 'always' | 'min2' | 'true' | 'false'.\n */\n @property({ type: String, attribute: 'use-grouping' })\n useGrouping?: 'auto' | 'always' | 'min2' | 'true' | 'false' | boolean;\n\n /**\n * Pad fraction output to at least this many digits (0-20).\n */\n @property({ type: Number, attribute: 'minimum-fraction-digits' }) minimumFractionDigits?: number;\n\n /**\n * Round fraction output to at most this many digits (0-20).\n */\n @property({ type: Number, attribute: 'maximum-fraction-digits' }) maximumFractionDigits?: number;\n\n /**\n * Pad integer output to at least this many digits (1-21).\n */\n @property({ type: Number, attribute: 'minimum-integer-digits' }) minimumIntegerDigits?: number;\n\n get #rawValue(): string {\n return this.number ?? this.textContent?.trim() ?? '';\n }\n\n get #resolvedLocale(): string | undefined {\n return this.locale ?? (globalThis.document?.documentElement?.lang || undefined);\n }\n\n get #parsedNumber(): number | null {\n const raw = this.#rawValue;\n if (!raw) return null;\n\n const numericValue = Number(raw);\n if (Number.isFinite(numericValue)) return numericValue;\n\n LogService.warn(`format-number: invalid numeric value \"${raw}\"`);\n return null;\n }\n\n get #formatOptions(): Intl.NumberFormatOptions {\n const options: Intl.NumberFormatOptions = { style: this.formatStyle };\n\n for (const [prop, key] of STRING_KEYS) {\n const value = this[prop] as string | undefined;\n if (value !== undefined) (options as Record<string, unknown>)[key] = value;\n }\n\n for (const [prop, key] of NUMBER_KEYS) {\n const value = this[prop] as number | undefined;\n if (value !== undefined) (options as Record<string, unknown>)[key] = value;\n }\n\n if (this.useGrouping !== undefined) {\n const grouping = this.useGrouping === 'false' ? false : this.useGrouping === 'true' ? true : this.useGrouping;\n (options as Record<string, unknown>).useGrouping = grouping;\n }\n\n return options;\n }\n\n get #formattedNumber(): string {\n const raw = this.#rawValue;\n if (!raw) return '';\n\n const numericValue = this.#parsedNumber;\n if (numericValue === null) return raw;\n\n try {\n return new Intl.NumberFormat(this.#resolvedLocale, this.#formatOptions).format(numericValue);\n } catch (e) {\n LogService.warn(`format-number: ${(e as Error).message}`);\n return raw;\n }\n }\n\n render() {\n return html`<data internal-host value=${this.#rawValue}>${this.#formattedNumber}<slot @slotchange=${this.#onSlotChange} hidden></slot></data>`;\n }\n\n #onSlotChange() {\n this.requestUpdate();\n }\n}\n"],"mappings":"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"}
|