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

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

@@ -1,6 +1,7 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-DUlunl9a.js');
+var dom_utilsCuXVGECR = require('./dom.utils-CuXVGECR-8VY5SfMZ.js');
 var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
 require('@stencil/react-output-target/runtime');
 require('react');
@@ -3294,170 +3295,6 @@ function getSortedRowModel() {
   }, getMemoOptions(table.options, 'debugTable', 'getSortedRowModel', () => table._autoResetPageIndex()));
 }
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/**
- * All properties that should be excluded from the deep copy of an HTML element.
- */
-const excludedProps = new Set([
-    // Text and content-related properties
-    'textContent',
-    'innerText',
-    'outerText',
-    'innerHTML',
-    'outerHTML',
-    'text',
-    // Form element properties
-    'value',
-    'defaultValue',
-    'checked',
-    'defaultChecked',
-    'selectionStart',
-    'selectionEnd',
-    'selectionDirection',
-    'form',
-    'willValidate',
-    'validity',
-    'validationMessage',
-    'labels',
-    'list',
-    'maxLength',
-    'minLength',
-    'valueAsDate',
-    'valueAsNumber',
-    // Editability and namespaces
-    'contentEditable',
-    'isContentEditable',
-    'namespaceURI',
-    // Child-related properties (handled recursively)
-    'attributes',
-    'children',
-    'childNodes',
-    'firstChild',
-    'lastChild',
-    // Blazor-related properties
-    'origin',
-    'dataset',
-    'attributeStyleMap',
-    'prefix',
-    'localName',
-    'tagName',
-    'shadowRoot',
-    'assignedSlot',
-    'scrollWidth',
-    'scrollHeight',
-    'clientTop',
-    'clientLeft',
-    'clientWidth',
-    'clientHeight',
-    'firstElementChild',
-    'lastElementChild',
-    'childElementCount',
-    'previousElementSibling',
-    'nextElementSibling',
-    'currentCSSZoom',
-    'nodeType',
-    'nodeName',
-    'baseURI',
-    'isConnected',
-    'ownerDocument',
-    'parentNode',
-    'parentElement',
-    'previousSibling',
-    'nextSibling',
-    'ELEMENT_NODE',
-    'ATTRIBUTE_NODE',
-    'TEXT_NODE',
-    'CDATA_SECTION_NODE',
-    'ENTITY_REFERENCE_NODE',
-    'ENTITY_NODE',
-    'PROCESSING_INSTRUCTION_NODE',
-    'COMMENT_NODE',
-    'DOCUMENT_NODE',
-    'DOCUMENT_TYPE_NODE',
-    'DOCUMENT_FRAGMENT_NODE',
-    'NOTATION_NODE',
-    'DOCUMENT_POSITION_DISCONNECTED',
-    'DOCUMENT_POSITION_PRECEDING',
-    'DOCUMENT_POSITION_FOLLOWING',
-    'DOCUMENT_POSITION_CONTAINS',
-    'DOCUMENT_POSITION_CONTAINED_BY',
-    'DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC',
-]);
-/**
- * Deep copy an HTML element with all its attributes, properties, and child nodes.
- * This method is useful for creating a clone of an element that can be safely modified without affecting the original.
- * @param {HTMLElement} element - The HTML element to copy.
- * @returns {HTMLElement} - A deep copy of the HTML element.
- * @example const copy = deepCopyElement(document.getElementById('myElement'));
- */
-function deepCopyElement(element) {
-    const copy = document.createElement(element.tagName);
-    // ✅ Copy attributes
-    Array.from(element.attributes).forEach(attr => {
-        copy.setAttribute(attr.name, attr.value);
-    });
-    // ✅ Dynamically extract relevant properties
-    const properties = new Set();
-    // Collect only own enumerable properties
-    Object.keys(element).forEach(key => properties.add(key));
-    // Collect inherited properties from prototypes (HTMLElement -> Element -> Node)
-    let proto = Object.getPrototypeOf(element);
-    while (proto && proto !== HTMLElement.prototype) {
-        Object.keys(proto).forEach(key => properties.add(key));
-        proto = Object.getPrototypeOf(proto);
-    }
-    // ✅ Filter and copy only non-function properties (methods are excluded) and non-event listeners
-    properties.forEach(prop => {
-        if (typeof element[prop] !== 'function' && // Ignore methods
-            !prop.startsWith('on') && // Ignore event listeners (onclick, oninput, etc.)
-            !excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
-        ) {
-            try {
-                copy[prop] = element[prop];
-            }
-            catch (error) {
-                console.warn(`Could not copy property ${prop}:`, error.message);
-            }
-        }
-    });
-    // ✅ Copy dataset separately
-    Object.assign(copy.dataset, element.dataset);
-    // ✅ Handle form elements specifically
-    if (element instanceof HTMLInputElement) {
-        copy.value = element.value;
-        copy.checked = element.checked;
-        copy.defaultValue = element.defaultValue;
-        copy.defaultChecked = element.defaultChecked;
-        copy.selectionStart = element.selectionStart;
-        copy.selectionEnd = element.selectionEnd;
-        copy.selectionDirection = element.selectionDirection;
-    }
-    else if (element instanceof HTMLTextAreaElement) {
-        copy.value = element.value;
-        copy.defaultValue = element.defaultValue;
-        copy.selectionStart = element.selectionStart;
-        copy.selectionEnd = element.selectionEnd;
-        copy.selectionDirection =
-            element.selectionDirection;
-    }
-    else if (element instanceof HTMLSelectElement) {
-        copy.value = element.value;
-        copy.selectedIndex = element.selectedIndex;
-    }
-    // ✅ Recursively copy child nodes (prevent duplicates)
-    element.childNodes.forEach(child => {
-        let childCopy;
-        if (child.nodeType === Node.ELEMENT_NODE) {
-            childCopy = deepCopyElement(child);
-        }
-        else {
-            childCopy = child.cloneNode(true);
-        }
-        copy.appendChild(childCopy);
-    });
-    return copy;
-}
-
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Debounce function to prevent multiple calls in a short
@@ -3478,7 +3315,7 @@ function debounce(func, wait) {
     };
 }
 
-const nvDatagridCss = "nv-datagrid{--nv-datagrid-border-default:var(\n    --components-form-field-border-default\n  );--nv-datagrid-border-hover:var(--components-form-field-border-hover);--nv-datagrid-border-focus:var(--components-form-field-border-default);--nv-datagrid-background-default:var(\n    --components-form-field-background-default\n  );--nv-datagrid-background-checked:var(\n    --components-form-field-background-checked\n  );--nv-datagrid-background-disabled:var(\n    --components-form-field-background-disabled\n  );--nv-datagrid-color-checked:var(\n    --components-form-shape-foreground-default\n  );--nv-datagrid-color-disabled:var(\n    --components-form-shape-foreground-disabled\n  );--nv-datagrid-outline-color:var(--color-focus-brand);display:block}nv-datagrid .hidden{display:none}nv-datagrid table{border-collapse:collapse;border-color:inherit;text-indent:0;width:100%}nv-datagrid th{text-align:left;border-bottom:1px solid var(--components-datagrid-header-border);min-height:var(--spacing-12);padding:var(--datagrid-cell-header-padding-y) var(--datagrid-cell-header-padding-x);font-size:var(--font-size-md);font-weight:var(--font-weight-high-emphasis);color:var(--components-datagrid-header-text)}nv-datagrid td{border-bottom:1px solid var(--components-datagrid-body-border);min-height:var(--spacing-12);max-height:var(--spacing-14);padding:var(--datagrid-cell-body-padding-y) var(--datagrid-cell-body-padding-x);font-size:var(--font-size-md);font-weight:var(--font-weight-low-emphasis);color:var(--components-datagrid-body-text);white-space:nowrap;text-overflow:ellipsis}nv-datagrid tbody>tr:hover{background:var(--color-interaction-container-neutral-background-hover)}nv-datagrid .cursor-pointer{cursor:pointer}nv-datagrid .select-none{-webkit-user-select:none;user-select:none}nv-datagrid .search-container{display:flex}nv-datagrid .checkbox-container{position:relative;color:var(--nv-datagrid-color-checked)}nv-datagrid .checkbox-container input[type=checkbox][readonly]{opacity:0.5}nv-datagrid .checkbox-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-datagrid-color-disabled)}nv-datagrid .checkbox-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-datagrid-border-default);background:var(--nv-datagrid-background-default)}nv-datagrid .checkbox-container input[type=checkbox]:hover{border-color:var(--nv-datagrid-border-hover)}nv-datagrid .checkbox-container input[type=checkbox]:focus{border-color:var(--nv-datagrid-border-focus)}nv-datagrid .checkbox-container input[type=checkbox]:focus,nv-datagrid .checkbox-container input[type=checkbox]:focus-within{outline:none}nv-datagrid .checkbox-container input[type=checkbox]:focus-visible,nv-datagrid .checkbox-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-datagrid-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-datagrid .checkbox-container input[type=checkbox]:checked,nv-datagrid .checkbox-container input[type=checkbox]:indeterminate{background:var(--nv-datagrid-background-checked);border-color:var(--nv-datagrid-background-checked)}nv-datagrid .checkbox-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-datagrid-background-disabled);border-color:var(--nv-datagrid-border-default)}nv-datagrid .checkbox-container input[type=checkbox][readonly]{opacity:0.5}nv-datagrid .checkbox-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-datagrid .checkbox-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}";
+const nvDatagridCss = () => `nv-datagrid{--nv-datagrid-border-default:var(     --components-form-field-border-default   );--nv-datagrid-border-hover:var(--components-form-field-border-hover);--nv-datagrid-border-focus:var(--components-form-field-border-default);--nv-datagrid-background-default:var(     --components-form-field-background-default   );--nv-datagrid-background-checked:var(     --components-form-field-background-checked   );--nv-datagrid-background-disabled:var(     --components-form-field-background-disabled   );--nv-datagrid-color-checked:var(     --components-form-shape-foreground-default   );--nv-datagrid-color-disabled:var(     --components-form-shape-foreground-disabled   );--nv-datagrid-outline-color:var(--color-focus-brand);display:block}nv-datagrid .hidden{display:none}nv-datagrid table{border-collapse:collapse;border-color:inherit;text-indent:0;width:100%}nv-datagrid th{text-align:left;border-bottom:1px solid var(--components-datagrid-header-border);min-height:var(--spacing-12);padding:var(--datagrid-cell-header-padding-y) var(--datagrid-cell-header-padding-x);font-size:var(--font-size-md);font-weight:var(--font-weight-high-emphasis);color:var(--components-datagrid-header-text)}nv-datagrid td{border-bottom:1px solid var(--components-datagrid-body-border);min-height:var(--spacing-12);max-height:var(--spacing-14);padding:var(--datagrid-cell-body-padding-y) var(--datagrid-cell-body-padding-x);font-size:var(--font-size-md);font-weight:var(--font-weight-low-emphasis);color:var(--components-datagrid-body-text);white-space:nowrap;text-overflow:ellipsis}nv-datagrid tbody>tr:hover{background:var(--color-interaction-container-neutral-background-hover)}nv-datagrid .cursor-pointer{cursor:pointer}nv-datagrid .select-none{-webkit-user-select:none;user-select:none}nv-datagrid .search-container{display:flex}nv-datagrid .checkbox-container{position:relative;color:var(--nv-datagrid-color-checked)}nv-datagrid .checkbox-container input[type=checkbox][readonly]{opacity:0.5}nv-datagrid .checkbox-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-datagrid-color-disabled)}nv-datagrid .checkbox-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-datagrid-border-default);background:var(--nv-datagrid-background-default)}nv-datagrid .checkbox-container input[type=checkbox]:hover{border-color:var(--nv-datagrid-border-hover)}nv-datagrid .checkbox-container input[type=checkbox]:focus{border-color:var(--nv-datagrid-border-focus)}nv-datagrid .checkbox-container input[type=checkbox]:focus,nv-datagrid .checkbox-container input[type=checkbox]:focus-within{outline:none}nv-datagrid .checkbox-container input[type=checkbox]:focus-visible,nv-datagrid .checkbox-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-datagrid-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-datagrid .checkbox-container input[type=checkbox]:checked,nv-datagrid .checkbox-container input[type=checkbox]:indeterminate{background:var(--nv-datagrid-background-checked);border-color:var(--nv-datagrid-background-checked)}nv-datagrid .checkbox-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-datagrid-background-disabled);border-color:var(--nv-datagrid-border-default)}nv-datagrid .checkbox-container input[type=checkbox][readonly]{opacity:0.5}nv-datagrid .checkbox-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-datagrid .checkbox-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}`;
 
 const NvDatagrid = class {
     constructor(hostRef) {
@@ -3582,8 +3419,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 +3445,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 +3454,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())
@@ -3654,12 +3492,12 @@ const NvDatagrid = class {
             const key = col.accessor;
             const cellSlot = col.querySelector('[slot="cell"]');
             if (cellSlot) {
-                const element = deepCopyElement(cellSlot);
+                const element = dom_utilsCuXVGECR.deepCopyElement(cellSlot);
                 this.templateCache.set(key, element);
             }
             const headerSlot = col.querySelector('[slot="header"]');
             if (headerSlot) {
-                const element = deepCopyElement(headerSlot);
+                const element = dom_utilsCuXVGECR.deepCopyElement(headerSlot);
                 this.headerTemplateCache.set(key, element);
             }
             else {
@@ -3689,22 +3527,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 +3581,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 +3617,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 +3642,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 +3670,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 +3813,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 +3835,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 +3878,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 +3891,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
@@ -4092,7 +3925,7 @@ const NvDatagrid = class {
         }
         // Handle <template> elements correctly
         const templateContent = template instanceof HTMLTemplateElement ? template.content : template;
-        const element = deepCopyElement(templateContent);
+        const element = dom_utilsCuXVGECR.deepCopyElement(templateContent);
         // Replace placeholders in text content, attributes, and properties
         element.querySelectorAll('*').forEach(el => {
             // Replace placeholders in text content
@@ -4114,14 +3947,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 +3977,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 +4027,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) {
@@ -4274,7 +4104,7 @@ const NvDatagrid = class {
             properties.forEach(prop => {
                 if (typeof element[prop] !== 'function' && // Ignore methods
                     !prop.startsWith('on') && // Ignore event listeners (onclick, oninput, etc.)
-                    !excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
+                    !dom_utilsCuXVGECR.excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
                 ) {
                     const propValue = element[prop];
                     if (typeof propValue === 'string' && propValue.includes('__')) {
@@ -4306,7 +4136,7 @@ const NvDatagrid = class {
             properties.forEach(prop => {
                 if (typeof element[prop] !== 'function' && // Ignore methods
                     !prop.startsWith('on') && // Ignore event listeners (onclick, oninput, etc.)
-                    !excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
+                    !dom_utilsCuXVGECR.excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
                 ) {
                     try {
                         const propValue = element[prop];
@@ -4359,8 +4189,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 +4245,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,40 +4314,66 @@ 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;
-        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 => {
+            : this.table?.getRowModel()?.rows;
+        return (index.h(index.Host, { key: '08593ceb15e31184e76c7ab641f5e2db635527e2' }, index.h("div", { key: '092f351ba6b5683b798651e5fb4eb1a40015684e', class: "hidden" }, index.h("slot", { key: 'c24d531e1e48dfc7db7bae7d6453994f70487f7b' })), index.h("slot", { key: 'e0d2aa2dd23eac36c5b735ea7640937cce649987', name: "before" }), this.enableGlobalFilter && this.table && (index.h("div", { key: 'beb373f14fad14c50b2c92b6c5542dec797750b3', class: `search-container justify-${this.globalFilterPosition}` }, index.h("nv-fieldtext", { key: '943dc6d3b0663e15846682ede0f9ea5cb3f1c56e', 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?.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: '9d016c03102ff36aeaf8ff5364086902b129f2ce', name: "after" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "columns": ["parseColumns"],
-        "data": ["parseData"],
-        "parsedColumns": ["handleParsedChange"],
-        "parsedData": ["handleParsedChange"],
-        "globalFilterSearchTerm": ["handleGlobalFilterSearchTerm", "handleInternalStateChange"],
-        "paginationState": ["handlePaginationState", "handleInternalStateChange"],
-        "sortingState": ["handleSortingState", "handleInternalStateChange"],
-        "pageSize": ["handlePageSize"],
-        "rowSelectionState": ["handleRowSelectionState"],
-        "state": ["handleStateChange"]
+        "columns": [{
+                "parseColumns": 0
+            }],
+        "data": [{
+                "parseData": 0
+            }],
+        "parsedColumns": [{
+                "handleParsedChange": 0
+            }],
+        "parsedData": [{
+                "handleParsedChange": 0
+            }],
+        "globalFilterSearchTerm": [{
+                "handleGlobalFilterSearchTerm": 0
+            }, {
+                "handleInternalStateChange": 0
+            }],
+        "paginationState": [{
+                "handlePaginationState": 0
+            }, {
+                "handleInternalStateChange": 0
+            }],
+        "sortingState": [{
+                "handleSortingState": 0
+            }, {
+                "handleInternalStateChange": 0
+            }],
+        "pageSize": [{
+                "handlePageSize": 0
+            }],
+        "rowSelectionState": [{
+                "handleRowSelectionState": 0
+            }],
+        "state": [{
+                "handleStateChange": 0
+            }]
     }; }
 };
-NvDatagrid.style = nvDatagridCss;
+NvDatagrid.style = nvDatagridCss();
 
 exports.nv_datagrid = NvDatagrid;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-DUlunl9a.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -17,7 +17,7 @@ const NvDatagridcolumn = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'd93cf7234c22d08319d2e4157945ece0b9e5f7b1' }, index.h("slot", { key: 'd4530c7f6854773716e7494e0379bc21f446ca53', name: "header" }), index.h("slot", { key: '60e2933f219f48c0567fd0e01a137a694ae1c1c9', name: "cell" })));
+        return (index.h(index.Host, { key: '413044aa941d307aa9a2e96faad28e5c78e20b71' }, index.h("slot", { key: 'c32dedbda74aa8204222b797e92a633eb7246c33', name: "header" }), index.h("slot", { key: '1412fae3228b4f9583a07395411da3fe264da449', name: "cell" })));
     }
 };