@nova-design-system/nova-react 3.0.0-beta.42 → 3.0.0-beta.44

package/dist/cjs/nv-table.entry-COwgRxqz.js

@@ -0,0 +1,338 @@
+'use strict';
+
+var index = require('./index-CEWbQ5nh.js');
+var dom_utilsAc71e0ef = require('./dom.utils-ac71e0ef-CmIwRr6O.js');
+require('react');
+
+const nvTableCss = "nv-table{display:block}nv-table .hidden{display:none}nv-table table{border-collapse:collapse;border-color:inherit;text-indent:0;width:100%}nv-table th{text-align:left;border-bottom:1px solid var(--components-datagrid-header-border);height:var(--spacing-12);padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-md);font-weight:700;color:var(--components-datagrid-header-text)}nv-table td{border-bottom:1px solid var(--components-datagrid-body-border);height:var(--spacing-12);max-height:var(--spacing-14);padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-md);font-weight:400;color:var(--components-datagrid-body-text);white-space:nowrap;text-overflow:ellipsis}nv-table tbody>tr:hover{background:var(--color-interaction-container-neutral-background-hover)}";
+const NvTableStyle0 = nvTableCss;
+
+const NvTable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.action = index.createEvent(this, "action");
+        this.templateCache = new Map();
+        this.headerTemplateCache = new Map();
+        /****************************************************************************/
+        //#region STATES
+        this.parsedColumns = [];
+        this.parsedData = [];
+        this.table = null;
+        //#endregion STATES
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Data to be displayed in the table
+         */
+        this.data = [];
+        /**
+         * Configuration of the columns of the table
+         */
+        this.columnsConfig = [];
+        /**
+         * Fallback value to be displayed when data is not available
+         */
+        this.fallbackValue = 'N/A';
+        /**
+         * Message to be displayed when no data is available
+         */
+        this.noDataMessage = 'No data available';
+        /**
+         * The message to display when there are no columns or data available.
+         * @default 'No data or columns available to display.'
+         */
+        this.noColumnsNoDataMessage = 'No data or columns available to display.';
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Caches templates for cells and headers upfront to improve performance.
+     */
+    cacheTemplates() {
+        const columns = Array.from(this.el.querySelectorAll('nv-tablecolumn'));
+        columns.forEach((col) => {
+            const key = col.name;
+            const cellSlot = col.querySelector('[slot="cell"]');
+            if (cellSlot) {
+                const element = dom_utilsAc71e0ef.deepCopyElement(cellSlot);
+                this.templateCache.set(key, element);
+            }
+            const headerSlot = col.querySelector('[slot="header"]');
+            if (headerSlot) {
+                const element = dom_utilsAc71e0ef.deepCopyElement(headerSlot);
+                this.headerTemplateCache.set(key, element);
+            }
+            else {
+                const header = col.header;
+                if (header) {
+                    const headerDiv = document.createElement('div');
+                    headerDiv.textContent = header;
+                    this.headerTemplateCache.set(key, headerDiv);
+                }
+            }
+        });
+    }
+    parseDataAndColumns() {
+        if (this.dataJson) {
+            this.parseJsonData(this.dataJson);
+        }
+        else if (this.data && this.data.length > 0) {
+            this.parseDataArray(this.data, this.parsedData);
+        }
+        if (this.columnsConfigJson) {
+            this.parseJsonColumns(this.columnsConfigJson, this.parsedColumns);
+        }
+        else if (this.columnsConfig && this.columnsConfig.length > 0) {
+            this.parseColumnsArray(this.columnsConfig, this.parsedColumns);
+        }
+        else if (this.headerTemplateCache.size > 0) {
+            const headerKeys = Array.from(this.headerTemplateCache.keys());
+            const arrayColumnsConfig = headerKeys.map(key => (Object.assign({}, { name: key, header: key ? key.charAt(0).toUpperCase() + key.slice(1) : '' })));
+            this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
+        }
+        else if (this.parsedData.length > 0) {
+            const firstRow = this.parsedData[0];
+            const arrayColumnsConfig = Object.keys(firstRow).map(key => ({
+                name: key,
+                header: key.charAt(0).toUpperCase() + key.slice(1),
+            }));
+            this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
+        }
+    }
+    deepEqual(a, b) {
+        return JSON.stringify(a) === JSON.stringify(b);
+    }
+    /**
+     * Parses the data array and sets the state accordingly
+     * @param {any[]} newValue - New value of the data array
+     * @param {any[]} oldValue - Old value of the data array
+     * @returns {void}
+     */
+    parseDataArray(newValue, oldValue) {
+        // Ensure both are arrays for proper comparison
+        const safeNewValue = Array.isArray(newValue) ? newValue : [];
+        const safeOldValue = Array.isArray(oldValue) ? oldValue : [];
+        if (this.deepEqual(safeNewValue, safeOldValue)) {
+            return; // Deep comparison
+        }
+        this.parsedData = Array.isArray(newValue) ? newValue : [];
+    }
+    /**
+     * Parses the columns array and sets the state accordingly
+     * @param {ColumnConfig[]} newValue - New value of the columns array
+     * @param {ColumnConfig[]} oldValue - Old value of the columns array
+     * @returns {void}
+     */
+    parseColumnsArray(newValue, oldValue) {
+        // Ensure both are arrays for proper comparison
+        const safeNewValue = Array.isArray(newValue) ? newValue : [];
+        const safeOldValue = Array.isArray(oldValue) ? oldValue : [];
+        // Use a proper deep comparison function (e.g., Lodash's isEqual)
+        if (this.deepEqual(safeNewValue, safeOldValue)) {
+            return;
+        }
+        // Assign only after confirming changes
+        this.parsedColumns = safeNewValue;
+    }
+    initializeTable() {
+        // Clear the previous table instance (if any)
+        this.table = null;
+        if (this.parsedColumns.length > 0) {
+            this.table = {
+                columns: this.parsedColumns,
+                data: this.getTableData(),
+            };
+        }
+        else {
+            this.table = null;
+        }
+    }
+    getTableData() {
+        if (this.parsedData &&
+            Array.isArray(this.parsedData) &&
+            this.parsedData.length > 0) {
+            return [...this.parsedData];
+        }
+        else {
+            return [];
+        }
+    }
+    // Helper function to get nested property value
+    replaceKeyWithValue(obj, path) {
+        var _a;
+        return ((_a = path
+            .split('.')
+            .reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : undefined), obj)) !== null && _a !== void 0 ? _a : this.fallbackValue);
+    }
+    renderTemplate(template, row) {
+        if (!template) {
+            return null;
+        }
+        // Handle <template> elements correctly
+        const templateContent = template instanceof HTMLTemplateElement ? template.content : template;
+        const element = dom_utilsAc71e0ef.deepCopyElement(templateContent);
+        // Replace placeholders in text content, attributes, and properties
+        element.querySelectorAll('*').forEach(el => {
+            // Replace placeholders in text content
+            this.replacePlaceholdersTextContent(el, row);
+            // Replace placeholders in attributes
+            this.replacePlaceholdersAttributes(el, row);
+            // Replace placeholders in properties
+            this.replacePlaceholdersProperties(el, row);
+        });
+        // Handle `data-bind-event`
+        element.querySelectorAll('[data-bind-event]').forEach(el => {
+            const bindEvent = el.getAttribute('data-bind-event') || '';
+            const splitted = bindEvent.split(':');
+            if (!bindEvent.includes(':') || splitted.length < 2) {
+                console.warn('Invalid data-bind-event format:', bindEvent);
+                return;
+            }
+            const eventType = splitted[0];
+            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 : [];
+                // Convert keys into a single object instead of an array of objects
+                const keyValue = keys.reduce((acc, key) => {
+                    acc[key] = row === null || row === void 0 ? void 0 : row[key];
+                    return acc;
+                }, {});
+                const action = { keyAction, details: keyValue };
+                this.action.emit(action);
+            });
+        });
+        // Ensure Web Components are properly connected
+        setTimeout(() => {
+            element.querySelectorAll('*').forEach(child => {
+                if (typeof child.connectedCallback === 'function') {
+                    child.connectedCallback();
+                }
+            });
+        }, 0);
+        return (index.h("div", { ref: el => {
+                if (el) {
+                    el.innerHTML = ''; // Remove existing content
+                    el.appendChild(element); // Append new element
+                }
+            } }));
+    }
+    replacePlaceholdersTextContent(element, row) {
+        // ✅ Replace placeholders in text content
+        element.childNodes.forEach(node => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                node.textContent = node.textContent.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(row, key));
+            }
+        });
+    }
+    replacePlaceholdersAttributes(element, row) {
+        // ✅ Replace placeholders in attributes
+        Array.from(element.attributes).forEach(attr => {
+            if (attr.value.includes('__')) {
+                attr.value = attr.value.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(row, key));
+            }
+        });
+    }
+    replacePlaceholdersProperties(element, row) {
+        // ✅ 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 and exclude irrelevant ones
+        properties.forEach(prop => {
+            if (typeof element[prop] !== 'function' && // Ignore methods
+                !prop.startsWith('on') && // Ignore event listeners (onclick, oninput, etc.)
+                !dom_utilsAc71e0ef.excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
+            ) {
+                try {
+                    const value = element[prop];
+                    // ✅ Replace placeholders only if the value is a string
+                    if (typeof value === 'string' && value.includes('__')) {
+                        element[prop] = value.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(row, key)); // ✅ TypeScript safe
+                    }
+                }
+                catch (error) {
+                    console.warn(`Could not assign property ${prop}:`, error.message);
+                }
+            }
+        });
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    parseColumns(newValue, oldValue) {
+        this.parseColumnsArray(newValue, oldValue);
+    }
+    parseJsonColumns(newValue, oldValue) {
+        try {
+            const newItems = newValue ? JSON.parse(newValue) : [];
+            this.parseColumnsArray(newItems, oldValue);
+        }
+        catch (e) {
+            console.error('Invalid JSON format for columnsConfigJson:', e.message);
+            this.parsedColumns = [];
+        }
+    }
+    parseData(newValue, oldValue) {
+        this.parseDataArray(newValue, oldValue);
+    }
+    parseJsonData(newValue) {
+        try {
+            const newItems = newValue ? JSON.parse(newValue) : [];
+            this.parseDataArray(newItems, this.parsedData);
+        }
+        catch (e) {
+            console.error('Invalid JSON format for dataJson:', e.message);
+            this.parsedData = [];
+        }
+    }
+    handleParsedChange() {
+        this.initializeTable();
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.cacheTemplates();
+        this.parseDataAndColumns();
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const headerGroups = !this.table || this.table === undefined || this.parsedColumns.length === 0
+            ? []
+            : this.table.columns;
+        const rows = !this.table || this.table === undefined || this.parsedData.length === 0
+            ? []
+            : this.table.data;
+        return (index.h(index.Host, { key: '89d230b38e5f853a9d8246b3634d25f3add88bb0' }, index.h("div", { key: '130f44d0833635aec8eb1ff5db6f92f5342e39b4', class: "hidden" }, index.h("slot", { key: 'e68523ead80fd187bfb0fc6710aaea42e1d9c4e7' })), index.h("slot", { key: '087164f8a817d99091d54ed841b4faa5f01b215e', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", { class: "table-header" }, index.h("tr", null, headerGroups &&
+            headerGroups.map(col => {
+                return (index.h("th", { key: col.name }, this.renderTemplate(this.headerTemplateCache.get(col.name), {}) || col.header));
+            })))), index.h("tbody", { class: "table-body" }, !rows || rows.length === 0 ? (index.h("tr", null, index.h("td", { colSpan: headerGroups.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => (index.h("tr", { key: JSON.stringify(row) }, headerGroups.map(col => {
+            var _a;
+            return (index.h("td", null, this.renderTemplate(this.templateCache.get(col.name), row) ||
+                ((_a = row[col.name]) !== null && _a !== void 0 ? _a : this.fallbackValue)));
+        })))))))), index.h("slot", { key: '046b1b705c5885eb2685a0e8780e6eec2f1ca50e', name: "after" })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "columnsConfig": ["parseColumns"],
+        "columnsConfigJson": ["parseJsonColumns"],
+        "data": ["parseData"],
+        "dataJson": ["parseJsonData"],
+        "parsedColumns": ["handleParsedChange"],
+        "parsedData": ["handleParsedChange"]
+    }; }
+};
+NvTable.style = NvTableStyle0;
+
+exports.nv_table = NvTable;

package/dist/cjs/nv-table.entry-CTo8cqCN.js

@@ -0,0 +1,338 @@
+'use strict';
+
+var index = require('./index-CtI3SivD.js');
+var dom_utilsAc71e0ef = require('./dom.utils-ac71e0ef-CmIwRr6O.js');
+require('react');
+
+const nvTableCss = "nv-table{display:block}nv-table .hidden{display:none}nv-table table{border-collapse:collapse;border-color:inherit;text-indent:0;width:100%}nv-table th{text-align:left;border-bottom:1px solid var(--components-datagrid-header-border);height:var(--spacing-12);padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-md);font-weight:700;color:var(--components-datagrid-header-text)}nv-table td{border-bottom:1px solid var(--components-datagrid-body-border);height:var(--spacing-12);max-height:var(--spacing-14);padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-md);font-weight:400;color:var(--components-datagrid-body-text);white-space:nowrap;text-overflow:ellipsis}nv-table tbody>tr:hover{background:var(--color-interaction-container-neutral-background-hover)}";
+const NvTableStyle0 = nvTableCss;
+
+const NvTable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.action = index.createEvent(this, "action");
+        this.templateCache = new Map();
+        this.headerTemplateCache = new Map();
+        /****************************************************************************/
+        //#region STATES
+        this.parsedColumns = [];
+        this.parsedData = [];
+        this.table = null;
+        //#endregion STATES
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Data to be displayed in the table
+         */
+        this.data = [];
+        /**
+         * Configuration of the columns of the table
+         */
+        this.columnsConfig = [];
+        /**
+         * Fallback value to be displayed when data is not available
+         */
+        this.fallbackValue = 'N/A';
+        /**
+         * Message to be displayed when no data is available
+         */
+        this.noDataMessage = 'No data available';
+        /**
+         * The message to display when there are no columns or data available.
+         * @default 'No data or columns available to display.'
+         */
+        this.noColumnsNoDataMessage = 'No data or columns available to display.';
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Caches templates for cells and headers upfront to improve performance.
+     */
+    cacheTemplates() {
+        const columns = Array.from(this.el.querySelectorAll('nv-tablecolumn'));
+        columns.forEach((col) => {
+            const key = col.name;
+            const cellSlot = col.querySelector('[slot="cell"]');
+            if (cellSlot) {
+                const element = dom_utilsAc71e0ef.deepCopyElement(cellSlot);
+                this.templateCache.set(key, element);
+            }
+            const headerSlot = col.querySelector('[slot="header"]');
+            if (headerSlot) {
+                const element = dom_utilsAc71e0ef.deepCopyElement(headerSlot);
+                this.headerTemplateCache.set(key, element);
+            }
+            else {
+                const header = col.header;
+                if (header) {
+                    const headerDiv = document.createElement('div');
+                    headerDiv.textContent = header;
+                    this.headerTemplateCache.set(key, headerDiv);
+                }
+            }
+        });
+    }
+    parseDataAndColumns() {
+        if (this.dataJson) {
+            this.parseJsonData(this.dataJson);
+        }
+        else if (this.data && this.data.length > 0) {
+            this.parseDataArray(this.data, this.parsedData);
+        }
+        if (this.columnsConfigJson) {
+            this.parseJsonColumns(this.columnsConfigJson, this.parsedColumns);
+        }
+        else if (this.columnsConfig && this.columnsConfig.length > 0) {
+            this.parseColumnsArray(this.columnsConfig, this.parsedColumns);
+        }
+        else if (this.headerTemplateCache.size > 0) {
+            const headerKeys = Array.from(this.headerTemplateCache.keys());
+            const arrayColumnsConfig = headerKeys.map(key => (Object.assign({}, { name: key, header: key ? key.charAt(0).toUpperCase() + key.slice(1) : '' })));
+            this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
+        }
+        else if (this.parsedData.length > 0) {
+            const firstRow = this.parsedData[0];
+            const arrayColumnsConfig = Object.keys(firstRow).map(key => ({
+                name: key,
+                header: key.charAt(0).toUpperCase() + key.slice(1),
+            }));
+            this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
+        }
+    }
+    deepEqual(a, b) {
+        return JSON.stringify(a) === JSON.stringify(b);
+    }
+    /**
+     * Parses the data array and sets the state accordingly
+     * @param {any[]} newValue - New value of the data array
+     * @param {any[]} oldValue - Old value of the data array
+     * @returns {void}
+     */
+    parseDataArray(newValue, oldValue) {
+        // Ensure both are arrays for proper comparison
+        const safeNewValue = Array.isArray(newValue) ? newValue : [];
+        const safeOldValue = Array.isArray(oldValue) ? oldValue : [];
+        if (this.deepEqual(safeNewValue, safeOldValue)) {
+            return; // Deep comparison
+        }
+        this.parsedData = Array.isArray(newValue) ? newValue : [];
+    }
+    /**
+     * Parses the columns array and sets the state accordingly
+     * @param {ColumnConfig[]} newValue - New value of the columns array
+     * @param {ColumnConfig[]} oldValue - Old value of the columns array
+     * @returns {void}
+     */
+    parseColumnsArray(newValue, oldValue) {
+        // Ensure both are arrays for proper comparison
+        const safeNewValue = Array.isArray(newValue) ? newValue : [];
+        const safeOldValue = Array.isArray(oldValue) ? oldValue : [];
+        // Use a proper deep comparison function (e.g., Lodash's isEqual)
+        if (this.deepEqual(safeNewValue, safeOldValue)) {
+            return;
+        }
+        // Assign only after confirming changes
+        this.parsedColumns = safeNewValue;
+    }
+    initializeTable() {
+        // Clear the previous table instance (if any)
+        this.table = null;
+        if (this.parsedColumns.length > 0) {
+            this.table = {
+                columns: this.parsedColumns,
+                data: this.getTableData(),
+            };
+        }
+        else {
+            this.table = null;
+        }
+    }
+    getTableData() {
+        if (this.parsedData &&
+            Array.isArray(this.parsedData) &&
+            this.parsedData.length > 0) {
+            return [...this.parsedData];
+        }
+        else {
+            return [];
+        }
+    }
+    // Helper function to get nested property value
+    replaceKeyWithValue(obj, path) {
+        var _a;
+        return ((_a = path
+            .split('.')
+            .reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : undefined), obj)) !== null && _a !== void 0 ? _a : this.fallbackValue);
+    }
+    renderTemplate(template, row) {
+        if (!template) {
+            return null;
+        }
+        // Handle <template> elements correctly
+        const templateContent = template instanceof HTMLTemplateElement ? template.content : template;
+        const element = dom_utilsAc71e0ef.deepCopyElement(templateContent);
+        // Replace placeholders in text content, attributes, and properties
+        element.querySelectorAll('*').forEach(el => {
+            // Replace placeholders in text content
+            this.replacePlaceholdersTextContent(el, row);
+            // Replace placeholders in attributes
+            this.replacePlaceholdersAttributes(el, row);
+            // Replace placeholders in properties
+            this.replacePlaceholdersProperties(el, row);
+        });
+        // Handle `data-bind-event`
+        element.querySelectorAll('[data-bind-event]').forEach(el => {
+            const bindEvent = el.getAttribute('data-bind-event') || '';
+            const splitted = bindEvent.split(':');
+            if (!bindEvent.includes(':') || splitted.length < 2) {
+                console.warn('Invalid data-bind-event format:', bindEvent);
+                return;
+            }
+            const eventType = splitted[0];
+            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 : [];
+                // Convert keys into a single object instead of an array of objects
+                const keyValue = keys.reduce((acc, key) => {
+                    acc[key] = row === null || row === void 0 ? void 0 : row[key];
+                    return acc;
+                }, {});
+                const action = { keyAction, details: keyValue };
+                this.action.emit(action);
+            });
+        });
+        // Ensure Web Components are properly connected
+        setTimeout(() => {
+            element.querySelectorAll('*').forEach(child => {
+                if (typeof child.connectedCallback === 'function') {
+                    child.connectedCallback();
+                }
+            });
+        }, 0);
+        return (index.h("div", { ref: el => {
+                if (el) {
+                    el.innerHTML = ''; // Remove existing content
+                    el.appendChild(element); // Append new element
+                }
+            } }));
+    }
+    replacePlaceholdersTextContent(element, row) {
+        // ✅ Replace placeholders in text content
+        element.childNodes.forEach(node => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                node.textContent = node.textContent.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(row, key));
+            }
+        });
+    }
+    replacePlaceholdersAttributes(element, row) {
+        // ✅ Replace placeholders in attributes
+        Array.from(element.attributes).forEach(attr => {
+            if (attr.value.includes('__')) {
+                attr.value = attr.value.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(row, key));
+            }
+        });
+    }
+    replacePlaceholdersProperties(element, row) {
+        // ✅ 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 and exclude irrelevant ones
+        properties.forEach(prop => {
+            if (typeof element[prop] !== 'function' && // Ignore methods
+                !prop.startsWith('on') && // Ignore event listeners (onclick, oninput, etc.)
+                !dom_utilsAc71e0ef.excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
+            ) {
+                try {
+                    const value = element[prop];
+                    // ✅ Replace placeholders only if the value is a string
+                    if (typeof value === 'string' && value.includes('__')) {
+                        element[prop] = value.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(row, key)); // ✅ TypeScript safe
+                    }
+                }
+                catch (error) {
+                    console.warn(`Could not assign property ${prop}:`, error.message);
+                }
+            }
+        });
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    parseColumns(newValue, oldValue) {
+        this.parseColumnsArray(newValue, oldValue);
+    }
+    parseJsonColumns(newValue, oldValue) {
+        try {
+            const newItems = newValue ? JSON.parse(newValue) : [];
+            this.parseColumnsArray(newItems, oldValue);
+        }
+        catch (e) {
+            console.error('Invalid JSON format for columnsConfigJson:', e.message);
+            this.parsedColumns = [];
+        }
+    }
+    parseData(newValue, oldValue) {
+        this.parseDataArray(newValue, oldValue);
+    }
+    parseJsonData(newValue) {
+        try {
+            const newItems = newValue ? JSON.parse(newValue) : [];
+            this.parseDataArray(newItems, this.parsedData);
+        }
+        catch (e) {
+            console.error('Invalid JSON format for dataJson:', e.message);
+            this.parsedData = [];
+        }
+    }
+    handleParsedChange() {
+        this.initializeTable();
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.cacheTemplates();
+        this.parseDataAndColumns();
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const headerGroups = !this.table || this.table === undefined || this.parsedColumns.length === 0
+            ? []
+            : this.table.columns;
+        const rows = !this.table || this.table === undefined || this.parsedData.length === 0
+            ? []
+            : this.table.data;
+        return (index.h(index.Host, { key: '89d230b38e5f853a9d8246b3634d25f3add88bb0' }, index.h("div", { key: '130f44d0833635aec8eb1ff5db6f92f5342e39b4', class: "hidden" }, index.h("slot", { key: 'e68523ead80fd187bfb0fc6710aaea42e1d9c4e7' })), index.h("slot", { key: '087164f8a817d99091d54ed841b4faa5f01b215e', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", { class: "table-header" }, index.h("tr", null, headerGroups &&
+            headerGroups.map(col => {
+                return (index.h("th", { key: col.name }, this.renderTemplate(this.headerTemplateCache.get(col.name), {}) || col.header));
+            })))), index.h("tbody", { class: "table-body" }, !rows || rows.length === 0 ? (index.h("tr", null, index.h("td", { colSpan: headerGroups.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => (index.h("tr", { key: JSON.stringify(row) }, headerGroups.map(col => {
+            var _a;
+            return (index.h("td", null, this.renderTemplate(this.templateCache.get(col.name), row) ||
+                ((_a = row[col.name]) !== null && _a !== void 0 ? _a : this.fallbackValue)));
+        })))))))), index.h("slot", { key: '046b1b705c5885eb2685a0e8780e6eec2f1ca50e', name: "after" })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "columnsConfig": ["parseColumns"],
+        "columnsConfigJson": ["parseJsonColumns"],
+        "data": ["parseData"],
+        "dataJson": ["parseJsonData"],
+        "parsedColumns": ["handleParsedChange"],
+        "parsedData": ["handleParsedChange"]
+    }; }
+};
+NvTable.style = NvTableStyle0;
+
+exports.nv_table = NvTable;