@nova-design-system/nova-react 3.23.0 → 3.24.0

package/dist/cjs/{nv-datagrid.entry-DcB5q2oC.js → nv-datagrid.entry-CGCEhO8C.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
 require('@stencil/react-output-target/runtime');
 require('react');
@@ -3582,8 +3582,7 @@ const NvDatagrid = class {
          */
         this.state = null;
         this.debouncedFilter = debounce((value) => {
-            var _a;
-            (_a = this.table) === null || _a === void 0 ? void 0 : _a.setGlobalFilter(value);
+            this.table?.setGlobalFilter(value);
         }, 300);
         /**
          * Handles global filtering on input event for the search input.
@@ -3609,7 +3608,7 @@ const NvDatagrid = class {
             const target = event.target;
             const page = target.value ? Number(target.value) - 1 : 0;
             // Simply use `setPageIndex` to update the page index directly
-            this.paginationState = Object.assign(Object.assign({}, this.paginationState), { pageIndex: page }); // This triggers the paginationState watcher
+            this.paginationState = { ...this.paginationState, pageIndex: page }; // This triggers the paginationState watcher
         };
         this.handlePageSizeChange = (event) => {
             const target = event.target;
@@ -3618,14 +3617,16 @@ const NvDatagrid = class {
                 effectivePageSize = this.pageSizes[0];
             }
             // Simply use `setPageSize` to update the page size directly
-            this.paginationState = Object.assign(Object.assign({}, this.paginationState), { pageSize: effectivePageSize }); // This triggers the paginationState watcher
+            this.paginationState = {
+                ...this.paginationState,
+                pageSize: effectivePageSize,
+            }; // This triggers the paginationState watcher
         };
         this.handleSortingClick = (event, header) => {
-            var _a;
             if (!header.column.getCanSort()) {
                 return;
             }
-            (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(event);
+            header.column.getToggleSortingHandler()?.(event);
         };
         this.getSortTitle = (header) => {
             if (!header.column.getCanSort())
@@ -3689,22 +3690,21 @@ const NvDatagrid = class {
         }
         else if (this.headerTemplateCache.size > 0) {
             const headerKeys = Array.from(this.headerTemplateCache.keys());
-            const arrayColumnsConfig = headerKeys.map(key => {
-                var _a, _b;
-                return (Object.assign({}, { accessor: key, header: key ? key.charAt(0).toUpperCase() + key.slice(1) : '', group: (_b = (_a = this.columnData.find(x => x.accessor === key)) === null || _a === void 0 ? void 0 : _a.group) !== null && _b !== void 0 ? _b : 'ungrouped' }));
-            });
+            const arrayColumnsConfig = headerKeys.map(key => ({
+                ...{}, // Ensure no prototype inheritance
+                accessor: key,
+                header: key ? key.charAt(0).toUpperCase() + key.slice(1) : '',
+                group: this.columnData.find(x => x.accessor === key)?.group ?? 'ungrouped',
+            }));
             this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
         }
         else if (this.parsedData.length > 0) {
             const firstRow = this.parsedData[0];
-            const arrayColumnsConfig = Object.keys(firstRow).map(key => {
-                var _a, _b;
-                return ({
-                    accessor: key,
-                    header: key.charAt(0).toUpperCase() + key.slice(1),
-                    group: (_b = (_a = this.columnData.find(x => x.accessor === key)) === null || _a === void 0 ? void 0 : _a.group) !== null && _b !== void 0 ? _b : 'ungrouped',
-                });
-            });
+            const arrayColumnsConfig = Object.keys(firstRow).map(key => ({
+                accessor: key,
+                header: key.charAt(0).toUpperCase() + key.slice(1),
+                group: this.columnData.find(x => x.accessor === key)?.group ?? 'ungrouped',
+            }));
             if (this.autoGenerateColumns) {
                 this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
             }
@@ -3744,7 +3744,6 @@ const NvDatagrid = class {
         this.parsedColumns = safeNewValue;
     }
     initializeTable() {
-        var _a, _b, _c, _d;
         // Clear the previous table instance (if any)
         this.table = null;
         console.info('initializeTable this.columnData:', this.columnData);
@@ -3781,7 +3780,7 @@ const NvDatagrid = class {
         };
         if (this.parsedColumns.length > 0) {
             // Validate and generate column definitions
-            const validColumns = this.parsedColumns.filter(column => column === null || column === void 0 ? void 0 : column.accessor);
+            const validColumns = this.parsedColumns.filter(column => column?.accessor);
             // Update tableOptions based on parsed data and columns
             const hasColumns = validColumns && Array.isArray(validColumns) && validColumns.length > 0;
             const hasData = this.parsedData &&
@@ -3806,14 +3805,11 @@ const NvDatagrid = class {
             if (hasData) {
                 // No parsed columns and data is available
                 const firstRow = this.parsedData[0];
-                const arrayColumnsConfig = Object.keys(firstRow).map(key => {
-                    var _a, _b;
-                    return ({
-                        accessor: key,
-                        header: key.charAt(0).toUpperCase() + key.slice(1),
-                        group: (_b = (_a = this.columnData.find(x => x.accessor === key)) === null || _a === void 0 ? void 0 : _a.group) !== null && _b !== void 0 ? _b : 'ungrouped',
-                    });
-                });
+                const arrayColumnsConfig = Object.keys(firstRow).map(key => ({
+                    accessor: key,
+                    header: key.charAt(0).toUpperCase() + key.slice(1),
+                    group: this.columnData.find(x => x.accessor === key)?.group ?? 'ungrouped',
+                }));
                 if (this.autoGenerateColumns) {
                     this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
                 }
@@ -3837,8 +3833,8 @@ const NvDatagrid = class {
         }
         if (this.enablePagination) {
             tableOptions.getPaginationRowModel = getPaginationRowModel();
-            const pageIndex = (_b = (_a = this.paginationState) === null || _a === void 0 ? void 0 : _a.pageIndex) !== null && _b !== void 0 ? _b : 0;
-            let effectivePageSize = (_d = (_c = this.paginationState) === null || _c === void 0 ? void 0 : _c.pageSize) !== null && _d !== void 0 ? _d : 10;
+            const pageIndex = this.paginationState?.pageIndex ?? 0;
+            let effectivePageSize = this.paginationState?.pageSize ?? 10;
             if (!this.pageSizes.includes(effectivePageSize) && this.pageSizes) {
                 effectivePageSize = this.pageSizes[0];
             }
@@ -3980,16 +3976,13 @@ const NvDatagrid = class {
                 tableOptions.data &&
                 tableOptions.data.length > 0)) {
             const sampleRow = tableOptions.data[0];
-            processedColumns = Object.keys(sampleRow).map(key => {
-                var _a, _b;
-                return ({
-                    header: key.charAt(0).toUpperCase() + key.slice(1),
-                    accessor: key,
-                    group: (_b = (_a = this.columnData.find(x => x.accessor === key)) === null || _a === void 0 ? void 0 : _a.group) !== null && _b !== void 0 ? _b : 'ungrouped',
-                    headerSlot: null,
-                    cellSlot: null,
-                });
-            });
+            processedColumns = Object.keys(sampleRow).map(key => ({
+                header: key.charAt(0).toUpperCase() + key.slice(1),
+                accessor: key,
+                group: this.columnData.find(x => x.accessor === key)?.group ?? 'ungrouped',
+                headerSlot: null,
+                cellSlot: null,
+            }));
         }
         // Group columns by their group property
         const groupedColumns = processedColumns.reduce((acc, column) => {
@@ -4005,19 +3998,22 @@ const NvDatagrid = class {
         }, {});
         // Transform each column into a ColumnDef
         const createColumnDef = (column) => {
-            var _a, _b, _c;
             return columnHelper.accessor(column.accessor, {
-                header: (_c = (_b = this.renderTemplate(this.headerTemplateCache.get(column.accessor), (_a = column.header) !== null && _a !== void 0 ? _a : column.accessor, null)) !== null && _b !== void 0 ? _b : column.header) !== null && _c !== void 0 ? _c : column.accessor,
+                header: this.renderTemplate(this.headerTemplateCache.get(column.accessor), column.header ?? column.accessor, null) ??
+                    column.header ??
+                    column.accessor,
                 cell: (info) => {
-                    var _a, _b, _c;
                     const value = info.getValue();
                     const row = info.row;
-                    return ((_a = this.columnData.find(x => x.accessor === column.accessor)) === null || _a === void 0 ? void 0 : _a.repeatTemplate) && Array.isArray(value)
-                        ? value.map((item) => {
-                            var _a, _b, _c;
-                            return (_c = (_b = (_a = this.renderTemplate(this.templateCache.get(column.accessor), item, row)) !== null && _a !== void 0 ? _a : item) !== null && _b !== void 0 ? _b : value) !== null && _c !== void 0 ? _c : this.fallbackValue;
-                        })
-                        : (_c = (_b = this.renderTemplate(this.templateCache.get(column.accessor), value, row)) !== null && _b !== void 0 ? _b : value) !== null && _c !== void 0 ? _c : this.fallbackValue;
+                    return this.columnData.find(x => x.accessor === column.accessor)
+                        ?.repeatTemplate && Array.isArray(value)
+                        ? value.map((item) => this.renderTemplate(this.templateCache.get(column.accessor), item, row) ??
+                            item ??
+                            value ??
+                            this.fallbackValue)
+                        : this.renderTemplate(this.templateCache.get(column.accessor), value, row) ??
+                            value ??
+                            this.fallbackValue;
                 },
                 sortUndefined: 'last',
                 sortDescFirst: false,
@@ -4045,9 +4041,9 @@ const NvDatagrid = class {
                 header: ({ table }) => {
                     return (index.h("div", { class: "flex px-1", ref: el => {
                             const checkbox = this.createIndeterminateCheckbox({
-                                checked: table === null || table === void 0 ? void 0 : table.getIsAllRowsSelected(),
-                                indeterminate: table === null || table === void 0 ? void 0 : table.getIsSomeRowsSelected(),
-                                onChange: table === null || table === void 0 ? void 0 : table.getToggleAllRowsSelectedHandler(),
+                                checked: table?.getIsAllRowsSelected(),
+                                indeterminate: table?.getIsSomeRowsSelected(),
+                                onChange: table?.getToggleAllRowsSelectedHandler(),
                             });
                             if (el) {
                                 el.innerHTML = ''; // Remove existing content
@@ -4058,10 +4054,10 @@ const NvDatagrid = class {
                 cell: ({ row }) => {
                     return (index.h("div", { class: "flex px-1", ref: el => {
                             const checkbox = this.createIndeterminateCheckbox({
-                                checked: row === null || row === void 0 ? void 0 : row.getIsSelected(),
-                                disabled: !(row === null || row === void 0 ? void 0 : row.getCanSelect()),
-                                indeterminate: row === null || row === void 0 ? void 0 : row.getIsSomeSelected(),
-                                onChange: row === null || row === void 0 ? void 0 : row.getToggleSelectedHandler(),
+                                checked: row?.getIsSelected(),
+                                disabled: !row?.getCanSelect(),
+                                indeterminate: row?.getIsSomeSelected(),
+                                onChange: row?.getToggleSelectedHandler(),
                             });
                             if (el) {
                                 el.innerHTML = ''; // Remove existing content
@@ -4114,14 +4110,12 @@ const NvDatagrid = class {
             const keyAction = splitted[1];
             const details = splitted.length > 2 ? splitted[2] : null;
             el.addEventListener(eventType, () => {
-                var _a;
-                const keys = (_a = details === null || details === void 0 ? void 0 : details.split(',')) !== null && _a !== void 0 ? _a : [];
+                const keys = details?.split(',') ?? [];
                 // Convert keys into a single object instead of an array of objects
                 const keyValue = keys.reduce((acc, key) => {
-                    var _a;
-                    if (row === null || row === void 0 ? void 0 : row.original) {
+                    if (row?.original) {
                         if (key in row.original) {
-                            acc[key] = (_a = row.original) === null || _a === void 0 ? void 0 : _a[key];
+                            acc[key] = row.original?.[key];
                         }
                     }
                     return acc;
@@ -4146,7 +4140,6 @@ const NvDatagrid = class {
             } }));
     }
     replaceKeyWithValue(key, cellValue) {
-        var _a;
         // Handle undefined or null values by returning the fallback
         if (cellValue === undefined || cellValue === null) {
             return this.fallbackValue;
@@ -4197,7 +4190,7 @@ const NvDatagrid = class {
             return this.fallbackValue;
         }
         // If cellValue is a primitive (string, number, boolean, etc.), return it as a string
-        return (_a = cellValue === null || cellValue === void 0 ? void 0 : cellValue.toString()) !== null && _a !== void 0 ? _a : this.fallbackValue;
+        return cellValue?.toString() ?? this.fallbackValue;
     }
     replacePlaceholdersTextContent(element, cellValue, row) {
         if (!cellValue) {
@@ -4359,8 +4352,7 @@ const NvDatagrid = class {
         };
     }
     getPagination() {
-        var _a;
-        return (this.enablePagination && (index.h("div", { class: "flex items-center gap-2" }, index.h("button", { class: "border rounded p-1", disabled: !this.table.getCanPreviousPage(), onClick: this.table.firstPage }, "<<"), index.h("button", { class: "border rounded p-1", disabled: !this.table.getCanPreviousPage(), onClick: this.table.previousPage }, "<"), index.h("button", { class: "border rounded p-1", disabled: !this.table.getCanNextPage(), onClick: this.table.nextPage }, ">"), index.h("button", { class: "border rounded p-1", disabled: !this.table.getCanNextPage(), onClick: this.table.lastPage }, ">>"), index.h("span", { class: "flex items-center gap-1" }, index.h("div", null, "Page"), index.h("strong", null, this.table.getState().pagination.pageIndex + 1, " of", ' ', this.table.getPageCount().toLocaleString())), index.h("span", { class: "flex items-center gap-1" }, "| Go to page:", ' ', index.h("input", { type: "number", min: this.minPageIndex, max: this.table.getPageCount(), value: this.table.getState().pagination.pageIndex + 1, class: "border p-1 rounded w-16", "aria-label": "Go to page", onInput: this.handlePageIndexChange })), ((_a = this.pageSizes) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("select", { "aria-label": "Rows per page", onChange: this.handlePageSizeChange }, this.pageSizes.map(pageSize => (index.h("option", { value: String(pageSize), selected: this.table.getState().pagination.pageSize === pageSize }, "Show ", pageSize))))))));
+        return (this.enablePagination && (index.h("div", { class: "flex items-center gap-2" }, index.h("button", { class: "border rounded p-1", disabled: !this.table.getCanPreviousPage(), onClick: this.table.firstPage }, "<<"), index.h("button", { class: "border rounded p-1", disabled: !this.table.getCanPreviousPage(), onClick: this.table.previousPage }, "<"), index.h("button", { class: "border rounded p-1", disabled: !this.table.getCanNextPage(), onClick: this.table.nextPage }, ">"), index.h("button", { class: "border rounded p-1", disabled: !this.table.getCanNextPage(), onClick: this.table.lastPage }, ">>"), index.h("span", { class: "flex items-center gap-1" }, index.h("div", null, "Page"), index.h("strong", null, this.table.getState().pagination.pageIndex + 1, " of", ' ', this.table.getPageCount().toLocaleString())), index.h("span", { class: "flex items-center gap-1" }, "| Go to page:", ' ', index.h("input", { type: "number", min: this.minPageIndex, max: this.table.getPageCount(), value: this.table.getState().pagination.pageIndex + 1, class: "border p-1 rounded w-16", "aria-label": "Go to page", onInput: this.handlePageIndexChange })), this.pageSizes?.length > 0 && (index.h("select", { "aria-label": "Rows per page", onChange: this.handlePageSizeChange }, this.pageSizes.map(pageSize => (index.h("option", { value: String(pageSize), selected: this.table.getState().pagination.pageSize === pageSize }, "Show ", pageSize))))))));
     }
     //#endregion METHODS
     /****************************************************************************/
@@ -4416,7 +4408,10 @@ const NvDatagrid = class {
             effectivePageSize = this.pageSizes[0];
         }
         // Simply use `setPageSize` to update the page size directly
-        this.paginationState = Object.assign(Object.assign({}, this.paginationState), { pageSize: effectivePageSize }); // This triggers the paginationState watcher
+        this.paginationState = {
+            ...this.paginationState,
+            pageSize: effectivePageSize,
+        }; // This triggers the paginationState watcher
     }
     handleRowSelectionState(newValue, oldValue) {
         if (!this.table) {
@@ -4482,25 +4477,25 @@ const NvDatagrid = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        var _a, _b, _c, _d, _e;
         const headerGroups = !this.table || this.table === undefined || this.parsedColumns.length === 0
             ? []
-            : (_a = this.table) === null || _a === void 0 ? void 0 : _a.getHeaderGroups();
+            : this.table?.getHeaderGroups();
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
-            : (_c = (_b = this.table) === null || _b === void 0 ? void 0 : _b.getRowModel()) === null || _c === void 0 ? void 0 : _c.rows;
+            : this.table?.getRowModel()?.rows;
         return (index.h(index.Host, { key: 'd1ca320f75940993840349a4f33afb0a8dc10788' }, index.h("div", { key: 'd07f038bfa0d4c0092f0ad9e6f13c95a47331f75', class: "hidden" }, index.h("slot", { key: 'be8e292240da78d055cce83fb5700111d371d0db' })), index.h("slot", { key: 'af921e34986bf67afa14190e2d01e866af7ab7ae', name: "before" }), this.enableGlobalFilter && this.table && (index.h("div", { key: 'f3ffe4bdfee63e86ad470923e4faf62be821b5fa', class: `search-container justify-${this.globalFilterPosition}` }, index.h("nv-fieldtext", { key: 'a5ab10f4e088b106368bd5d98d99e3cef2b59955', value: this.globalFilterSearchTerm, onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns..." }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("div", null, index.h("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", null, this.parsedColumns.length > 0 && headerGroups
-            ? headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map(headerGroup => (index.h("tr", { key: headerGroup.id }, headerGroup.headers.map(header => {
+            ? headerGroups?.map(headerGroup => (index.h("tr", { key: headerGroup.id }, headerGroup.headers.map(header => {
                 return this.getHeaderCell(header);
             }))))
             : null)), index.h("tbody", null, !rows || rows.length === 0 || this.parsedData.length === 0 ? (index.h("tr", null, index.h("td", { colSpan: this.parsedColumns.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => {
             const rowId = row.id;
-            const visibleCells = row === null || row === void 0 ? void 0 : row.getVisibleCells();
+            const visibleCells = row?.getVisibleCells();
             return (index.h("tr", { key: rowId }, visibleCells.map(cell => {
                 return (index.h("td", { key: cell.id, "data-row-id": rowId }, this.flexRender(cell.column.columnDef.cell, cell.getContext())));
             })));
         }))), this.table && this.enableRowSelection ? (index.h("tfoot", null, index.h("tr", null, index.h("td", { colSpan: 20 }, this.enableRowSelection && this.table ? (index.h("div", null, this.rowSelectionState &&
-            Object.keys(this.rowSelectionState).length > 0 ? (index.h("span", null, Object.keys(this.rowSelectionState).length, " of", ' ', ((_e = (_d = this.table.getPreFilteredRowModel()) === null || _d === void 0 ? void 0 : _d.rows) === null || _e === void 0 ? void 0 : _e.length) || 0, ' ', "Total Rows Selected")) : (index.h("span", null, "No rows selected")))) : null)))) : null), this.getPagination())), index.h("slot", { key: '8941adaa686dec6b3f09e0434bdf9df3d273e930', name: "after" })));
+            Object.keys(this.rowSelectionState).length > 0 ? (index.h("span", null, Object.keys(this.rowSelectionState).length, " of", ' ', this.table.getPreFilteredRowModel()?.rows
+            ?.length || 0, ' ', "Total Rows Selected")) : (index.h("span", null, "No rows selected")))) : null)))) : null), this.getPagination())), index.h("slot", { key: '8941adaa686dec6b3f09e0434bdf9df3d273e930', name: "after" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-datagridcolumn.entry-BhKOzXA6.js → nv-datagridcolumn.entry-Fsqc7CT_.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');

package/dist/cjs/nv-dialog.entry-B6OYcZxQ.js

@@ -0,0 +1,300 @@
+'use strict';
+
+var index = require('./index-kU2nW5aN.js');
+var index_esmD3eWMME9 = require('./index.esm-D3eWMME9-CG1TVKfu.js');
+var events_utilsB6GgGra_ = require('./events.utils-B6GgGra--01N__3wY.js');
+var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.js');
+var grow_animationD7ep_aVl = require('./grow.animation-D7ep_aVl-BuXEDSK-.js');
+require('./style-value-types.es-xlgmw4x8-B1vLqX9m.js');
+var timeline_animationCgHCo_Ho = require('./timeline.animation-CgHCo_Ho-KteJaZPb.js');
+var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
+var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
+var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvDialogCss = "nv-dialog dialog{width:100vw;height:100svh;margin:0;max-height:unset;max-width:unset;padding:0;background:color-mix(in srgb, var(--components-overlay-background) 70%, transparent);backdrop-filter:blur(4px)}nv-dialog dialog.full .content{min-width:90vw;width:90vw;max-width:90vw}nv-dialog .backdrop{display:flex;min-height:100%;padding:var(--spacing-3);box-shadow:0px var(--shadow-y-axis-2xl) var(--shadow-blur-2xl) var(--shadow-spread-2xl) var(--shadow-color-opacity-3) var(--shadow-color-opacity-3)}nv-dialog .backdrop .content{border-radius:var(--radius-rounded-2xl);background:var(--color-level-00-background);min-width:min(90vw, 400px);width:fit-content;max-width:clamp(90vw, min(90vw, 960px), 960px);margin:auto;display:flex;flex-direction:column;align-items:flex-start;height:fit-content;position:relative}nv-dialog .backdrop .content nv-button.close-button{position:absolute;top:var(--dialog-dismissible-position-top);right:var(--dialog-dismissible-position-right);display:flex;padding:var(--button-sm-icon-button-padding);justify-content:flex-end;align-items:flex-start;gap:10px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar{width:6px;height:6px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-dialog .backdrop .content .content-body{box-sizing:border-box;padding:var(--dialog-body-padding-y) var(--dialog-body-padding-x);scrollbar-gutter:stable both-edges;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-base);color:var(--color-content-medium-text);width:100%}";
+
+const NvDialog = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.openChanged = index.createEvent(this, "openChanged", 3);
+        this.eventsAttached = false;
+        this.triggerClickEvents = [
+            ['click', this.show],
+            [
+                'keydown',
+                (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this.show();
+                    }
+                },
+            ],
+        ];
+        /**
+         * Use this prop to toggle the visibility of the dialog. Set to true to show
+         * the dialog and false to hide it.
+         */
+        this.open = false;
+        /**
+         * If true, the dialog cannot be closed by the user.
+         */
+        this.undismissable = false;
+        /**
+         * If true, the dialog will be closed when the backdrop is clicked.
+         */
+        this.clickOutside = false;
+        /**
+         * If true, the dialog visibility is managed manually through methods or the
+         * open prop.
+         */
+        this.controlled = false;
+        /**
+         * If true, the dialog takes full width styling.
+         */
+        this.full = false;
+        /**
+         * Controls whether the dialog should automatically focus the first focusable
+         * element when opened. When disabled, prevents unwanted tooltip triggers on
+         * dialog open.
+         */
+        this.autofocus = false;
+        /**
+         * Checks for and sets up form ID if a form is present
+         */
+        this.checkForForm = () => {
+            if (!this.form) {
+                const formElement = this.el.querySelector('form');
+                if (formElement) {
+                    this.form = this.ensureFormId(formElement);
+                }
+            }
+        };
+        /**
+         * Handles the native dialog close event.
+         */
+        this.handleDialogClose = () => {
+            if (this.open) {
+                this.close();
+            }
+        };
+        /**
+         * Handles the click event to close the dialog when clickOutside is true.
+         * @param {MouseEvent} event - The click event.
+         */
+        this.handleDialogClick = (event) => {
+            if (!this.clickOutside || this.undismissable)
+                return;
+            if (this.checkForOpenPopovers())
+                return;
+            if (event.target === this.backdropElement) {
+                this.close();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.checkForOpenPopovers = () => {
+            let hasOpenPopover = false;
+            this.el.querySelectorAll('nv-popover').forEach(popover => {
+                if (popover.hasAttribute('open')) {
+                    hasOpenPopover = true;
+                }
+            });
+            return hasOpenPopover;
+        };
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Call this method to show the dialog, making it visible on the screen.
+     */
+    async show() {
+        this.open = true;
+        this.preventScroll();
+        /** It is recommended to use the .show() or .showModal() method to render
+         * dialogs, rather than the open attribute. If a <dialog> is opened using
+         * the open attribute, it is non-modal. */
+        const { setFadeOut } = fade_animationDcRL9lcm.useFade(this.dialogElement);
+        setFadeOut();
+        this.dialogElement.showModal();
+        const { setGrowIn, growIn } = grow_animationD7ep_aVl.useGrow(this.contentElement, {
+            duration: 100,
+            amount: 0.9,
+        });
+        const { fadeIn } = fade_animationDcRL9lcm.useFade(this.dialogElement, {
+            duration: 100,
+        });
+        setGrowIn();
+        await timeline_animationCgHCo_Ho.parallel(fadeIn, growIn).start();
+    }
+    /**
+     * Call this method to hide the dialog, making it disappear from view.
+     */
+    async close() {
+        this.open = false;
+        this.allowScroll();
+        const { growOut } = grow_animationD7ep_aVl.useGrow(this.contentElement, {
+            duration: 150,
+            amount: 0.85,
+        });
+        const { fadeOut } = fade_animationDcRL9lcm.useFade(this.dialogElement, {
+            duration: 150,
+        });
+        await timeline_animationCgHCo_Ho.parallel(growOut, fadeOut).start();
+        this.dialogElement.close();
+    }
+    /**
+     * Sets the autofocus on the first focusable element in the dialog.
+     */
+    setAutofocus() {
+        const focusableElements = index_esmD3eWMME9.tabbable(this.dialogElement, {
+            displayCheck: 'none',
+        });
+        if (focusableElements.length > 0) {
+            // Convert to array and find element with smallest top and left position
+            let topLeftElement = focusableElements[0];
+            let topLeftRect = topLeftElement.getBoundingClientRect();
+            focusableElements.forEach(element => {
+                const rect = element.getBoundingClientRect();
+                if (rect.top < topLeftRect.top || rect.left < topLeftRect.left) {
+                    topLeftElement = element;
+                    topLeftRect = rect;
+                }
+            });
+            // Set autofocus attribute on the found element
+            topLeftElement.setAttribute('autofocus', 'true');
+        }
+    }
+    /**
+     * Attaches event listeners to the dialog.
+     */
+    attachEventListeners() {
+        if (this.triggerElement && !this.eventsAttached && !this.controlled) {
+            events_utilsB6GgGra_.addEventListeners(this.triggerClickEvents, this.triggerElement, this);
+            this.eventsAttached = true;
+        }
+    }
+    /**
+     * Prevents the body from scrolling when the dialog is open.
+     * Compensates for scrollbar width to prevent layout shift.
+     */
+    preventScroll() {
+        // Calculate scrollbar width
+        const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+        // Apply overflow hidden and padding compensation
+        document.documentElement.style.overflow = 'hidden';
+        document.documentElement.style.paddingRight = `${scrollBarWidth}px`;
+    }
+    /**
+     * Allows the body to scroll when the dialog is closed.
+     * Removes the applied overflow and padding styles.
+     */
+    allowScroll() {
+        // Remove the applied styles
+        document.documentElement.style.removeProperty('overflow');
+        document.documentElement.style.removeProperty('padding-right');
+    }
+    ensureFormId(formElement) {
+        if (!formElement.id) {
+            formElement.id = `dialog-form-${v4BdYh22OP.v4()}`;
+        }
+        return formElement.id;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    async handleDialogOpenChange(isOpen) {
+        if (isOpen) {
+            this.show();
+            this.openChanged.emit(isOpen);
+        }
+        else {
+            this.close();
+            this.openChanged.emit(isOpen);
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LISTENERS
+    /**
+     * Handles the keydown event to optionally prevent the native dialog from closing when the escape key is pressed.
+     * @param {KeyboardEvent} event - The keydown event.
+     */
+    handleKeyDown(event) {
+        if (event.key !== 'Escape')
+            return;
+        if (!this.open)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const hasOpenPopover = this.checkForOpenPopovers();
+        if (!this.undismissable && !hasOpenPopover) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.close();
+        }
+    }
+    //#endregion LISTENERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    /**
+     * Lifecycle method that runs before the component loads.
+     * Initializes the trigger, header, and footer elements by finding them in the component's children.
+     * Elements are found either by their slot attribute or by their tag name (for dialog header/footer)
+     */
+    componentWillLoad() {
+        this.triggerElement = Array.from(this.el.children).find(child => {
+            return child.getAttribute('slot') === 'trigger';
+        });
+        this.headerElement = Array.from(this.el.children).find(child => {
+            return (child.getAttribute('slot') === 'header' ||
+                child.tagName.toLowerCase() === 'nv-dialogheader');
+        });
+        this.footerElement = Array.from(this.el.children).find(child => {
+            return (child.getAttribute('slot') === 'footer' ||
+                child.tagName.toLowerCase() === 'nv-dialogfooter');
+        });
+        // Initial form check
+        this.checkForForm();
+    }
+    componentWillUpdate() {
+        this.attachEventListeners();
+    }
+    componentDidLoad() {
+        if (this.open) {
+            this.show();
+        }
+        // Only set autofocus if the prop is true and no element already has autofocus
+        if (this.autofocus && !this.dialogElement.querySelector('[autofocus]')) {
+            this.setAutofocus();
+        }
+        this.attachEventListeners();
+        // Additional form check in case form was added after initial load
+        this.checkForForm();
+        // this.setupContentBodyListeners();
+    }
+    disconnectedCallback() {
+        if (this.triggerElement && !this.eventsAttached && !this.controlled) {
+            events_utilsB6GgGra_.removeEventListeners(this.triggerClickEvents, this.triggerElement, this);
+            this.eventsAttached = false;
+        }
+        this.allowScroll();
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const hasForm = this.form || this.el.querySelector('form');
+        return (index.h(index.Host, { key: 'e1837ebe65fcf0e56880438b59a5e8c4b5873926' }, index.h("slot", { key: '543e69780f3dad15a91b4bcb1f4199153bbce1b3', name: "trigger" }), index.h("dialog", { key: 'ef1600f73c8d25744b3b69356e1c4a98e605be1e', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, onClick: this.handleDialogClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsxChV9xqsO.clsx({ full: this.full }) }, index.h("div", { key: '894e91291a5ee2a1c26a658e1ca7aaf237d71069', class: "backdrop", ref: el => (this.backdropElement = el) }, index.h("div", { key: '78700c26d1ec553d67a8e62f3f3628fab8deb49a', class: "content", ref: el => (this.contentElement = el) }, !this.undismissable && (index.h("nv-button", { key: 'd042c828bc6886091128425ea3e5c73035a0cea1', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDialogClose, "aria-label": "Close dialog" }, index.h("nv-icon", { key: '035273dd23255883a7a5feb354d230242683e00e', name: "x", size: "sm" }))), this.headerElement ? (index.h("slot", { name: "header" })) : (index.h("nv-dialogheader", { id: "dialog-header" })), index.h("div", { key: 'd86417aae675f8611312495d31ca8d0b58c2caaf', class: "content-body", id: "dialog-content" }, index.h("slot", { key: 'cb48b94b846097d04ffd98c6689cd4116e8cd9f9' })), this.footerElement ? (index.h("slot", { name: "footer" })) : (index.h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? constantsBReL3Lsa.ButtonType.Submit : constantsBReL3Lsa.ButtonType.Button, onDialogCanceled: this.handleDialogClose, undismissable: this.undismissable })))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": ["handleDialogOpenChange"]
+    }; }
+};
+NvDialog.style = nvDialogCss;
+
+exports.nv_dialog = NvDialog;

package/dist/cjs/{nv-dialogfooter_2.entry-Dn16bI8a.js → nv-dialogfooter_2.entry-C4fP_n2-.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
 require('@stencil/react-output-target/runtime');
 require('react');