@nova-design-system/nova-webcomponents 3.15.0 → 3.16.0

package/dist/esm/nv-row.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-a1936cd0.js';
+import { r as registerInstance, h, H as Host } from './index-dc2723f3.js';
 
 const nvRowCss = "nv-row{display:flex;flex-wrap:wrap;margin-right:calc(var(--spacing-4) * -1);margin-left:calc(var(--spacing-4) * -1);row-gap:var(--spacing-4)}";
 const NvRowStyle0 = nvRowCss;

package/dist/esm/nv-stack.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-a1936cd0.js';
+import { r as registerInstance, h, H as Host } from './index-dc2723f3.js';
 import { c as clsx } from './clsx-297c1ffe.js';
 
 const nvStackCss = "nv-stack{display:flex;align-items:center;justify-content:flex-start;flex-direction:row}nv-stack nv-col{display:flex}nv-stack:not(nv-row){flex-wrap:nowrap}nv-stack>.nv-stack-item-flex{flex-shrink:1;flex-grow:1}nv-stack>.nv-stack-item-lead{margin-right:auto}nv-stack>.nv-stack-item-lead+*{margin-left:0}nv-stack>.nv-stack-item-center{margin-right:auto;margin-left:auto}nv-stack>.nv-stack-item-tail{margin-left:auto}nv-stack>.nv-stack-nowrap{white-space:nowrap}nv-stack.nv-stack-vertical{align-items:stretch;flex-direction:column}nv-stack.nv-stack-vertical>.nv-stack-item-lead{margin-right:0;margin-bottom:auto}nv-stack.nv-stack-vertical>.nv-stack-item-lead+*{margin-top:0}nv-stack.nv-stack-vertical>.nv-stack-item-tail{margin-left:0;margin-top:auto}nv-stack.nv-stack-vertical>.nv-stack-item-center{margin:auto 0}nv-stack.nv-stack-flex>*{flex-shrink:1;flex-grow:1}nv-stack.nv-stack-fill>*{height:100%}nv-stack.nv-stack-fill.nv-stack-vertical>*{height:auto;width:100%}";

package/dist/esm/nv-table.entry.js

@@ -1,334 +1,240 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a1936cd0.js';
-import { d as deepCopyElement, e as excludedProps } from './dom.utils-ac71e0ef.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-dc2723f3.js';
 
-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)}";
+/**
+ * Table utility functions and constants for nv-table component
+ *
+ * This module contains pure utility functions for table column resizing logic,
+ * pointer event handling calculations, and related helper functions.
+ */
+/**
+ * Constants for table column resizing behavior
+ */
+const TABLE_CONSTANTS = Object.freeze({
+    /** Handle width for fine pointers (mouse) in pixels */
+    HANDLE_W: 12,
+    /** Handle width for coarse pointers (touch) in pixels */
+    HANDLE_W_TOUCH: 24,
+    /** Minimum column width in pixels */
+    MIN_W: 40,
+});
+/**
+ * Determines the appropriate handle width based on the current pointer type
+ * @returns {number} Handle width in pixels (10px for fine pointers, 24px for coarse/touch)
+ */
+function getHandleWidthForCurrentPointer() {
+    // Match the CSS media query: wider handle on coarse pointers (touch)
+    return matchMedia('(pointer: coarse)').matches
+        ? TABLE_CONSTANTS.HANDLE_W_TOUCH
+        : TABLE_CONSTANTS.HANDLE_W;
+}
+/**
+ * Calculates the pointer's horizontal offset within a table cell
+ * @param {PointerEvent} event - The pointer event
+ * @param {HTMLTableCellElement} cell - The table cell element
+ * @returns {number} The horizontal offset from the left edge of the cell
+ */
+function getPointerOffsetInCell(event, cell) {
+    const rect = cell.getBoundingClientRect();
+    return event.clientX - rect.left;
+}
+/**
+ * Determines if the pointer is within the resize handle area of a table cell
+ * @param {number} offsetX - Horizontal offset within the cell
+ * @param {number} cellWidth - Total width of the cell
+ * @param {number} handleWidth - Width of the resize handle area
+ * @returns {boolean} True if the pointer is in the resize handle area
+ */
+function isInResizeHandle(offsetX, cellWidth, handleWidth) {
+    return offsetX >= cellWidth - handleWidth;
+}
+/**
+ * Calculates the new column width based on resize delta and constraints
+ * @param {number} startWidth - Original width of the column
+ * @param {number} delta - Change in pixels from the start position
+ * @param {number} minWidth - Minimum allowed width for the column
+ * @returns {number} The calculated new width, constrained by minimum
+ */
+function calculateNewWidth(startWidth, delta, minWidth = TABLE_CONSTANTS.MIN_W) {
+    return Math.max(minWidth, startWidth + delta);
+}
+/**
+ * Validates that a table cell element is suitable for resizing
+ * @param {HTMLElement | null} element - The element to check
+ * @returns {element is HTMLTableCellElement} Type guard for table cell elements
+ */
+function isValidTableCell(element) {
+    return (element === null || element === void 0 ? void 0 : element.tagName) === 'TH' || (element === null || element === void 0 ? void 0 : element.tagName) === 'TD';
+}
+/**
+ * Finds the closest table cell element from an event target
+ * @param {EventTarget | null} target - The event target
+ * @returns {HTMLTableCellElement | null} The closest table cell or null
+ */
+function getClosestTableCell(target) {
+    if (!(target instanceof HTMLElement))
+        return null;
+    const cell = target.closest('th, td');
+    return isValidTableCell(cell) ? cell : null;
+}
+/**
+ * Sets up pointer capture for consistent drag behavior across browsers
+ * @param {HTMLTableCellElement} cell - The table cell element
+ * @param {number} pointerId - The pointer ID from the pointer event
+ * @returns {boolean} True if capture was successfully set
+ */
+function setPointerCapture(cell, pointerId) {
+    var _a;
+    try {
+        (_a = cell.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(cell, pointerId);
+        return true;
+    }
+    catch (_b) {
+        return false;
+    }
+}
+/**
+ * Releases pointer capture
+ * @param {HTMLTableCellElement} cell - The table cell element
+ * @param {number} pointerId - The pointer ID from the pointer event
+ * @returns {boolean} True if release was successful
+ */
+function releasePointerCapture(cell, pointerId) {
+    var _a;
+    try {
+        (_a = cell.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(cell, pointerId);
+        return true;
+    }
+    catch (_b) {
+        return false;
+    }
+}
+/**
+ * Prevents text selection during drag operations
+ * @param {boolean} prevent - Whether to prevent selection
+ */
+function setUserSelectPrevention(prevent) {
+    document.body.style.userSelect = prevent ? 'none' : '';
+}
+/**
+ * Gets the current width of a table cell element
+ * @param {HTMLTableCellElement} cell - The table cell element
+ * @returns {number} The current width in pixels
+ */
+function getCellWidth(cell) {
+    return cell.offsetWidth;
+}
+/**
+ * Applies a width to a table cell element
+ * @param {HTMLTableCellElement} cell - The table cell element
+ * @param {number} width - The width to apply in pixels
+ */
+function setCellWidth(cell, width) {
+    cell.style.width = `${width}px`;
+}
+/**
+ * Calculates the delta (change) in horizontal position between two pointer events
+ * @param {number} currentX - Current clientX position
+ * @param {number} startX - Starting clientX position
+ * @returns {number} The horizontal delta
+ */
+function calculatePointerDelta(currentX, startX) {
+    return currentX - startX;
+}
+/**
+ * Creates a new resize state object
+ * @param {HTMLTableCellElement} cell - The cell being resized
+ * @param {PointerEvent} event - The initiating pointer event
+ * @returns {ResizeState} A new resize state object
+ */
+function createResizeState(cell, event) {
+    return {
+        resizingCell: cell,
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startWidth: getCellWidth(cell),
+    };
+}
+/**
+ * Validates that a resize state is active and matches the given pointer event
+ * @param {ResizeState | null} state - The current resize state
+ * @param {PointerEvent} event - The pointer event to validate against
+ * @returns {boolean} True if the state is valid for this event
+ */
+function isValidResizeState(state, event) {
+    return state !== null && state.pointerId === event.pointerId;
+}
+/**
+ * Updates the width of a cell during a resize operation
+ * @param {ResizeState} state - The current resize state
+ * @param {PointerEvent} event - The current pointer event
+ * @param {number} minWidth - Minimum width constraint
+ */
+function updateCellWidthFromResize(state, event, minWidth = TABLE_CONSTANTS.MIN_W) {
+    const delta = calculatePointerDelta(event.clientX, state.startX);
+    const newWidth = calculateNewWidth(state.startWidth, delta, minWidth);
+    setCellWidth(state.resizingCell, newWidth);
+}
+
+const nvTableCss = "nv-table table{border-collapse:separate;border-spacing:0;table-layout:fixed;width:max-content;min-width:100%;background:var(--color-level-00-background)}nv-table table thead{background:var(--components-datagrid-header-background)}nv-table table tbody tr:hover td{background:var(--components-datagrid-body-background-hover)}nv-table table tbody tr[data-selected]{background:var(--components-datagrid-body-background-active)}nv-table table td{height:var(--spacing-16);padding:var(--datagrid-cell-body-padding-y) var(--datagrid-cell-body-padding-x) var(--spacing-2) var(--datagrid-cell-body-padding-x);font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-base);background:var(--components-datagrid-body-background-default);border-bottom:1px solid var(--components-datagrid-body-border)}nv-table table th{position:relative;text-align:left;padding:var(--datagrid-cell-header-padding-y) var(--datagrid-cell-header-padding-right) var(--datagrid-cell-header-padding-y) var(--datagrid-cell-header-padding-x);padding-right:calc(var(--datagrid-cell-header-padding-right) + 12px);color:var(--color-content-low-text);font-variant-numeric:lining-nums tabular-nums slashed-zero;font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-high-emphasis);line-height:var(--line-height-base);min-width:40px;border-bottom:1px solid var(--components-datagrid-header-border);background:var(--components-datagrid-header-background)}nv-table table th::after{content:\"\";position:absolute;top:0;right:0;width:12px;height:50%;transform:translateY(50%);cursor:col-resize;background:linear-gradient(90deg, transparent 0%, transparent calc(50% - 1px), var(--components-datagrid-header-border), calc(50% - 1px), var(--components-datagrid-header-border) calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);opacity:0;transition:opacity 0.05s ease-in-out}nv-table table th[data-grow]{width:unset}nv-table table th:hover::after{opacity:1}nv-table table th[data-no-resize]::after{display:none}nv-table [data-sticky-left]{position:sticky;z-index:1;background:var(--color-level-00-background);left:0;top:0}nv-table [data-sticky-right]{position:sticky;z-index:1;background:var(--color-level-00-background);right:0;top:0}nv-table [data-sticky-top] th{position:sticky;z-index:1;background:var(--color-level-00-background);top:0}";
 const NvTableStyle0 = nvTableCss;
 
 const NvTable = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.action = createEvent(this, "action", 7);
-        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.';
+        this.resizeState = null;
     }
+    /****************************************************************************/
+    //#region PROPERTIES
     //#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 = deepCopyElement(cellSlot);
-                this.templateCache.set(key, element);
-            }
-            const headerSlot = col.querySelector('[slot="header"]');
-            if (headerSlot) {
-                const element = 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 = 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 (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.)
-                !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 = [];
-        }
+    //#region LISTENERS
+    onPointerDown(ev) {
+        const th = getClosestTableCell(ev.target);
+        if (!th)
+            return;
+        // Skip resize if the cell has data-no-resize attribute
+        if (th.hasAttribute('data-no-resize'))
+            return;
+        const offsetX = getPointerOffsetInCell(ev, th);
+        const handleWidth = getHandleWidthForCurrentPointer();
+        const cellWidth = getCellWidth(th);
+        // Start only if we're in the resize handle area
+        if (!isInResizeHandle(offsetX, cellWidth, handleWidth))
+            return;
+        this.resizeState = createResizeState(th, ev);
+        // Capture so move/up still fire even if the finger leaves the th
+        setPointerCapture(th, ev.pointerId);
+        // Prevent scrolling/selection during drag
+        setUserSelectPrevention(true);
+    }
+    onPointerMove(ev) {
+        if (!isValidResizeState(this.resizeState, ev))
+            return;
+        updateCellWidthFromResize(this.resizeState, ev, TABLE_CONSTANTS.MIN_W);
     }
-    handleParsedChange() {
-        this.initializeTable();
+    onPointerUp(ev) {
+        if (!isValidResizeState(this.resizeState, ev))
+            return;
+        releasePointerCapture(this.resizeState.resizingCell, this.resizeState.pointerId);
+        this.resizeState = null;
+        setUserSelectPrevention(false);
     }
-    //#endregion WATCHERS
+    //#endregion LISTENERS
     /****************************************************************************/
     //#region LIFECYCLE
-    componentWillLoad() {
-        this.cacheTemplates();
-        this.parseDataAndColumns();
-    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region EVENTS
     //#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 (h(Host, { key: '08082f0800c32a59606968aa2a80cfa3c2f07960' }, h("div", { key: 'f55f5409f45d90ef072abb09006ef6366e7e8c95', class: "hidden" }, h("slot", { key: '0b5326e8c7c6f97f419819744a132335d4435bb4' })), h("slot", { key: '07d4538957b466ed332cd598e2c132d85a801979', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (h("thead", { class: "table-header" }, h("tr", null, headerGroups &&
-            headerGroups.map(col => {
-                return (h("th", { key: col.name }, this.renderTemplate(this.headerTemplateCache.get(col.name), {}) || col.header));
-            })))), h("tbody", { class: "table-body" }, !rows || rows.length === 0 ? (h("tr", null, h("td", { colSpan: headerGroups.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => (h("tr", { key: JSON.stringify(row) }, headerGroups.map(col => {
-            var _a;
-            return (h("td", null, this.renderTemplate(this.templateCache.get(col.name), row) ||
-                ((_a = row[col.name]) !== null && _a !== void 0 ? _a : this.fallbackValue)));
-        })))))))), h("slot", { key: '1f505261da2c2e05511940ec90f7375981cb0823', name: "after" })));
+        return (h(Host, { key: 'b63510e2da93a1b98eb3813ba7ac9bed97b81c1f' }, h("slot", { key: '14fb76c397db4da5dfba94bce599d1e4d8992a6b' })));
     }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "columnsConfig": ["parseColumns"],
-        "columnsConfigJson": ["parseJsonColumns"],
-        "data": ["parseData"],
-        "dataJson": ["parseJsonData"],
-        "parsedColumns": ["handleParsedChange"],
-        "parsedData": ["handleParsedChange"]
-    }; }
+    get host() { return getElement(this); }
 };
 NvTable.style = NvTableStyle0;