@nova-design-system/nova-webcomponents 3.0.0-beta.39 → 3.0.0-beta.40

package/dist/components/nv-table.js

@@ -1,36 +1,38 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-77d0fedc.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-77d0fedc.js';
+import { d as deepCopyElement, e as excludedProps } from './p-cb34aa4f.js';
 
-const nvTableCss = "nv-table table{border-collapse:collapse;border-color:inherit;text-indent:0}";
+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-border-header);height:var(--spacing-12);padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-md);font-weight:700;color:var(--components-datagrid-content-header)}nv-table td{border-bottom:1px solid var(--components-datagrid-border-body);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-content-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$1 = /*@__PURE__*/ proxyCustomElement(class NvTable extends H {
     constructor() {
         super();
         this.__registerHost();
+        this.action = createEvent(this, "action", 7);
+        this.templateCache = new Map();
+        this.headerTemplateCache = new Map();
         /****************************************************************************/
         //#region STATES
-        this.parsedColumns = []; // Parsed array of column headers
-        this.parsedData = []; // Parsed array of data rows
-        this.hasSlotHead = false;
-        this.hasSlotBody = false;
+        this.parsedColumns = [];
+        this.parsedData = [];
+        this.table = null;
         //#endregion STATES
         /****************************************************************************/
         //#region PROPERTIES
         /**
-         * Defines the table columns.
-         * @example ['Name', 'Age', 'Email']
-         * @default []
+         * Data to be displayed in the table
          */
-        this.columns = [];
+        this.data = [];
         /**
-         * Defines the table data.
-         * @example [{ name: 'Alice', age: 25, email: 'alice@mail.com' }, { name: 'Bob', age: 30, email: 'bob@mail.com' }]
-         * @default []
+         * Configuration of the columns of the table
          */
-        this.data = [];
+        this.columnsConfig = [];
         /**
-         * The message to display when there is no data available.
-         * @default 'No data available'
+         * 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';
         /**
@@ -41,17 +43,239 @@ const NvTable$1 = /*@__PURE__*/ proxyCustomElement(class NvTable extends H {
     }
     //#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 !== H.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) {
+    parseJsonColumns(newValue, oldValue) {
         try {
             const newItems = newValue ? JSON.parse(newValue) : [];
-            this.parseColumnsArray(newItems, this.parsedColumns);
+            this.parseColumnsArray(newItems, oldValue);
         }
         catch (e) {
-            console.error('Invalid JSON format for columnsJson:', e.message);
+            console.error('Invalid JSON format for columnsConfigJson:', e.message);
             this.parsedColumns = [];
         }
     }
@@ -68,99 +292,63 @@ const NvTable$1 = /*@__PURE__*/ proxyCustomElement(class NvTable extends H {
             this.parsedData = [];
         }
     }
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region METHODS
-    /**
-     * Parses the columns array.
-     * @param {string[]} newValue - The new value of the columns array.
-     * @param {string[]} oldValue - The old value of the columns array.
-     */
-    parseColumnsArray(newValue, oldValue) {
-        if (JSON.stringify(newValue) === JSON.stringify(oldValue))
-            return; // Deep comparison
-        this.parsedColumns = Array.isArray(newValue) ? newValue : [];
-    }
-    /**
-     * Parses the data array.
-     * @param {any[]} newValue - The new value of the data array.
-     * @param {any[]} oldValue - The old value of the data array.
-     */
-    parseDataArray(newValue, oldValue) {
-        if (JSON.stringify(newValue) === JSON.stringify(oldValue))
-            return; // Deep comparison
-        this.parsedData = Array.isArray(newValue) ? newValue : [];
+    handleParsedChange() {
+        this.initializeTable();
     }
-    //#endregion METHODS
+    //#endregion WATCHERS
     /****************************************************************************/
     //#region LIFECYCLE
     componentWillLoad() {
-        this.hasSlotHead = !!this.el.querySelector('[slot="head"]');
-        this.hasSlotBody = !!this.el.querySelector('[slot="body"]');
-        if (this.columnsJson) {
-            this.parseJsonColumns(this.columnsJson);
-        }
-        else {
-            this.parseColumns(this.columns, this.parsedColumns);
-        }
-        if (this.dataJson) {
-            this.parseJsonData(this.dataJson);
-        }
-        else {
-            this.parseData(this.data, this.parsedData);
-        }
+        this.cacheTemplates();
+        this.parseDataAndColumns();
     }
-    //#endregion LIFECYCLE
+    //#endregion EVENTS
     /****************************************************************************/
     //#region RENDER
     render() {
-        const headerRows = this.hasSlotHead
-            ? Array.from(this.el
-                .querySelector('[slot="head"]')
-                .querySelectorAll('nv-tablerow'))
-            : [];
-        const bodyRows = this.hasSlotBody
-            ? Array.from(this.el
-                .querySelector('[slot="body"]')
-                .querySelectorAll('nv-tablerow'))
-            : [];
-        return (h(Host, { key: 'b445be90862bb95df560d26215d0a175b2c5f02d' }, h("div", { key: 'fc50c87d2b4e9d233bc90ef16c9c6701fbca0467', class: "hidden" }, h("slot", { key: '03429a816585ffa3e36066bfd06d2d320714b9b5' }), h("slot", { key: '06d30f5c55e34f0be4212c3153874475fc93be2c', name: "head" }), h("slot", { key: '64d73c406a6d72187ab0cb7434ed8c5894564076', name: "body" })), h("slot", { key: '038d7e7f5fd6125b101c286558e61afb3b493d88', name: "before" }), this.parsedColumns.length === 0 &&
-            this.parsedData.length === 0 &&
-            headerRows.length === 0 &&
-            bodyRows.length === 0 ? (h("p", null, this.noColumnsNoDataMessage)) : (h("table", null, this.parsedColumns.length > 0 ? (h("thead", null, h("tr", null, this.parsedColumns.map(column => (h("th", null, column)))))) : headerRows.length > 0 ? (h("thead", null, headerRows.map(row => {
-            const cells = Array.from(row.querySelectorAll('nv-tablecolumn'));
-            return (h("tr", null, cells.map(cell => (h("th", { colSpan: cell.colspan, rowSpan: cell.rowspan, headers: cell.headers, scope: cell.scope, innerHTML: cell.innerHTML })))));
-        }))) : null, h("tbody", null, this.parsedData.length === 0 && bodyRows.length === 0 ? (h("tr", null, h("td", { colSpan: this.parsedColumns.length || 12 }, this.noDataMessage))) : this.parsedData.length > 0 ? (this.parsedData.map(row => (h("tr", null, this.parsedColumns.length > 0
-            ? this.parsedColumns.map(column => (h("td", null, row[column.toLowerCase()] || '')))
-            : Object.values(row).map(value => h("td", null, value)))))) : bodyRows.length > 0 ? (bodyRows.map(row => {
-            const cells = Array.from(row.querySelectorAll('nv-tabledatacell'));
-            return (h("tr", null, cells.map(cell => (h("td", { colSpan: cell.colspan, rowSpan: cell.rowspan, headers: cell.headers, innerHTML: cell.innerHTML })))));
-        })) : null))), h("slot", { key: 'd24abb3236e2d1019d2316da1d1cc2f19d33902b', name: "after" })));
+        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: 'b740dfd8e0db88881f7ca062eaab5b3373b236c2' }, h("div", { key: '784d4b910c00ce5dc6b91768f457d0e649b70431', class: "hidden" }, h("slot", { key: '0891b88350c4f4e50634870ae5bafab7f8bdb46a' })), h("slot", { key: 'bc895b4327694ba7b660fce776e6ce1c1817c5dc', 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: 'b4b5a8442f3a6982fb6d268c8b076a4d361b933c', name: "after" })));
     }
     get el() { return this; }
     static get watchers() { return {
-        "columns": ["parseColumns"],
-        "columnsJson": ["parseJsonColumns"],
+        "columnsConfig": ["parseColumns"],
+        "columnsConfigJson": ["parseJsonColumns"],
         "data": ["parseData"],
-        "dataJson": ["parseJsonData"]
+        "dataJson": ["parseJsonData"],
+        "parsedColumns": ["handleParsedChange"],
+        "parsedData": ["handleParsedChange"]
     }; }
     static get style() { return NvTableStyle0; }
 }, [4, "nv-table", {
-        "columns": [16],
-        "columnsJson": [513, "columns-json"],
         "data": [16],
+        "columnsConfig": [16],
         "dataJson": [513, "data-json"],
-        "noDataMessage": [1, "no-data-message"],
-        "noColumnsNoDataMessage": [1, "no-columns-no-data-message"],
+        "columnsConfigJson": [513, "columns-config-json"],
+        "fallbackValue": [513, "fallback-value"],
+        "noDataMessage": [513, "no-data-message"],
+        "noColumnsNoDataMessage": [513, "no-columns-no-data-message"],
         "parsedColumns": [32],
         "parsedData": [32],
-        "hasSlotHead": [32],
-        "hasSlotBody": [32]
+        "table": [32]
     }, undefined, {
-        "columns": ["parseColumns"],
-        "columnsJson": ["parseJsonColumns"],
+        "columnsConfig": ["parseColumns"],
+        "columnsConfigJson": ["parseJsonColumns"],
         "data": ["parseData"],
-        "dataJson": ["parseJsonData"]
+        "dataJson": ["parseJsonData"],
+        "parsedColumns": ["handleParsedChange"],
+        "parsedData": ["handleParsedChange"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/nv-table.js.map

@@ -1 +1 @@
-{"file":"nv-table.js","mappings":"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","names":["NvTable"],"sources":["src/components/nv-table/nv-table.scss?tag=nv-table","src/components/nv-table/nv-table.tsx"],"sourcesContent":["nv-table {\n  table {\n    border-collapse: collapse;\n    border-color: inherit;\n    text-indent: 0;\n  }\n}\n\n// https://tailwindcss.com/docs/table-layout\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Host, Prop, State, Watch, h, Element } from '@stencil/core';\n\n/**\n * @slot default - Use this slot to insert HTML into the table content.\n * @slot head - Use this slot to insert HTML into the table header.\n * @slot before - Use this slot to insert HTML before the table.\n * @slot after - Use this slot to insert HTML after the table.\n * @slot body - Use this slot to insert HTML into the table body.\n *\n * @deprecated [EXPERIMENTAL]\n * @experimental - This component is still under development and is not ready for use.\n */\n@Component({\n  tag: 'nv-table',\n  styleUrl: './nv-table.scss',\n  shadow: false,\n})\nexport class NvTable {\n  @Element() el: HTMLNvTableElement;\n\n  /****************************************************************************/\n  //#region STATES\n\n  @State()\n  parsedColumns: string[] = []; // Parsed array of column headers\n\n  @State()\n  parsedData: any[] = []; // Parsed array of data rows\n\n  @State()\n  hasSlotHead: boolean = false;\n\n  @State()\n  hasSlotBody: boolean = false;\n\n  //#endregion STATES\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Defines the table columns.\n   * @example ['Name', 'Age', 'Email']\n   * @default []\n   */\n  @Prop()\n  readonly columns: string[] = [];\n\n  /**\n   * Defines the table columns.\n   * It can be passed directly as an array of strings or as a JSON string.\n   * @example '[\"Name\", \"Age\", \"Email\"]'\n   */\n  @Prop({ reflect: true })\n  readonly columnsJson?: string;\n\n  /**\n   * Defines the table data.\n   * @example [{ name: 'Alice', age: 25, email: 'alice@mail.com' }, { name: 'Bob', age: 30, email: 'bob@mail.com' }]\n   * @default []\n   */\n  @Prop()\n  readonly data: any[] = [];\n\n  /**\n   * Defines the table data.\n   * It can be passed directly as an array of objects or as a JSON string.\n   * @example '[{ \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },{ \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }]'\n   */\n  @Prop({ reflect: true })\n  readonly dataJson?: string;\n\n  /**\n   * The message to display when there is no data available.\n   * @default 'No data available'\n   */\n  @Prop()\n  readonly noDataMessage: string = 'No data available';\n\n  /**\n   * The message to display when there are no columns or data available.\n   * @default 'No data or columns available to display.'\n   */\n  @Prop()\n  readonly noColumnsNoDataMessage: string =\n    'No data or columns available to display.';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('columns')\n  parseColumns(newValue: string[], oldValue: string[]) {\n    this.parseColumnsArray(newValue, oldValue);\n  }\n\n  @Watch('columnsJson')\n  parseJsonColumns(newValue: string | undefined) {\n    try {\n      const newItems = newValue ? JSON.parse(newValue) : [];\n\n      this.parseColumnsArray(newItems, this.parsedColumns);\n    } catch (e) {\n      console.error('Invalid JSON format for columnsJson:', e.message);\n      this.parsedColumns = [];\n    }\n  }\n\n  @Watch('data')\n  parseData(newValue: any[], oldValue: any[]) {\n    this.parseDataArray(newValue, oldValue);\n  }\n\n  @Watch('dataJson')\n  parseJsonData(newValue: string | undefined) {\n    try {\n      const newItems = newValue ? JSON.parse(newValue) : [];\n\n      this.parseDataArray(newItems, this.parsedData);\n    } catch (e) {\n      console.error('Invalid JSON format for dataJson:', e.message);\n      this.parsedData = [];\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Parses the columns array.\n   * @param {string[]} newValue - The new value of the columns array.\n   * @param {string[]} oldValue - The old value of the columns array.\n   */\n  private parseColumnsArray(newValue: string[], oldValue: string[]) {\n    if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n    this.parsedColumns = Array.isArray(newValue) ? newValue : [];\n  }\n\n  /**\n   * Parses the data array.\n   * @param {any[]} newValue - The new value of the data array.\n   * @param {any[]} oldValue - The old value of the data array.\n   */\n  private parseDataArray(newValue: any[], oldValue: any[]) {\n    if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n    this.parsedData = Array.isArray(newValue) ? newValue : [];\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.hasSlotHead = !!this.el.querySelector('[slot=\"head\"]');\n    this.hasSlotBody = !!this.el.querySelector('[slot=\"body\"]');\n\n    if (this.columnsJson) {\n      this.parseJsonColumns(this.columnsJson);\n    } else {\n      this.parseColumns(this.columns, this.parsedColumns);\n    }\n\n    if (this.dataJson) {\n      this.parseJsonData(this.dataJson);\n    } else {\n      this.parseData(this.data, this.parsedData);\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    const headerRows = this.hasSlotHead\n      ? Array.from(\n          this.el\n            .querySelector('[slot=\"head\"]')\n            .querySelectorAll('nv-tablerow'),\n        )\n      : [];\n    const bodyRows = this.hasSlotBody\n      ? Array.from(\n          this.el\n            .querySelector('[slot=\"body\"]')\n            .querySelectorAll('nv-tablerow'),\n        )\n      : [];\n\n    return (\n      <Host>\n        <div class=\"hidden\">\n          <slot></slot>\n          <slot name=\"head\"></slot>\n          <slot name=\"body\"></slot>\n        </div>\n\n        <slot name=\"before\"></slot>\n\n        {this.parsedColumns.length === 0 &&\n        this.parsedData.length === 0 &&\n        headerRows.length === 0 &&\n        bodyRows.length === 0 ? (\n          <p>{this.noColumnsNoDataMessage}</p>\n        ) : (\n          <table>\n            {this.parsedColumns.length > 0 ? (\n              <thead>\n                <tr>\n                  {this.parsedColumns.map(column => (\n                    <th>{column}</th>\n                  ))}\n                </tr>\n              </thead>\n            ) : headerRows.length > 0 ? (\n              <thead>\n                {headerRows.map(row => {\n                  const cells = Array.from(\n                    row.querySelectorAll('nv-tablecolumn'),\n                  );\n                  return (\n                    <tr>\n                      {cells.map(cell => (\n                        <th\n                          colSpan={cell.colspan}\n                          rowSpan={cell.rowspan}\n                          headers={cell.headers}\n                          scope={cell.scope}\n                          innerHTML={cell.innerHTML}\n                        ></th>\n                      ))}\n                    </tr>\n                  );\n                })}\n              </thead>\n            ) : null}\n\n            <tbody>\n              {this.parsedData.length === 0 && bodyRows.length === 0 ? (\n                <tr>\n                  <td colSpan={this.parsedColumns.length || 12}>\n                    {this.noDataMessage}\n                  </td>\n                </tr>\n              ) : this.parsedData.length > 0 ? (\n                this.parsedData.map(row => (\n                  <tr>\n                    {this.parsedColumns.length > 0\n                      ? this.parsedColumns.map(column => (\n                          <td>{row[column.toLowerCase()] || ''}</td>\n                        ))\n                      : Object.values(row).map(value => <td>{value}</td>)}\n                  </tr>\n                ))\n              ) : bodyRows.length > 0 ? (\n                bodyRows.map(row => {\n                  const cells = Array.from(\n                    row.querySelectorAll('nv-tabledatacell'),\n                  );\n                  return (\n                    <tr>\n                      {cells.map(cell => (\n                        <td\n                          colSpan={cell.colspan}\n                          rowSpan={cell.rowspan}\n                          headers={cell.headers}\n                          innerHTML={cell.innerHTML}\n                        ></td>\n                      ))}\n                    </tr>\n                  );\n                })\n              ) : null}\n            </tbody>\n          </table>\n        )}\n\n        <slot name=\"after\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"version":3}
+{"file":"nv-table.js","mappings":"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","names":["NvTable","HTMLElement"],"sources":["src/components/nv-table/nv-table.scss?tag=nv-table","src/components/nv-table/nv-table.tsx"],"sourcesContent":["@mixin root-styles() {\n  display: block;\n}\n\nnv-table {\n  @include root-styles();\n\n  .hidden {\n    display: none;\n  }\n\n  table {\n    border-collapse: collapse;\n    border-color: inherit;\n    text-indent: 0;\n    width: 100%;\n  }\n  th {\n    text-align: left;\n    border-bottom: 1px solid var(--components-datagrid-border-header);\n    height: var(--spacing-12);\n    padding: var(--spacing-3) var(--spacing-4);\n    font-size: var(--font-size-md);\n    font-weight: 700;\n    color: var(--components-datagrid-content-header);\n  }\n  td {\n    border-bottom: 1px solid var(--components-datagrid-border-body);\n    height: var(--spacing-12);\n    max-height: var(--spacing-14);\n    padding: var(--spacing-2) var(--spacing-4);\n    font-size: var(--font-size-md);\n    font-weight: 400;\n    color: var(--components-datagrid-content-text);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n  tbody > tr:hover {\n    background: var(--color-interaction-container-neutral-background-hover);\n  }\n}\n\n// https://tailwindcss.com/docs/table-layout","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {\n  Component,\n  Host,\n  Prop,\n  State,\n  h,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { ColumnConfig } from '../../interfaces/ColumnConfig';\nimport { ActionEvent } from '../../interfaces/actionEvent';\nimport { deepCopyElement, excludedProps } from '../../utils/dom.utils';\n\n/**\n * Helper interface to define the table structure\n */\ninterface Table {\n  /**\n   * Configuration of the columns of the table\n   */\n  columns: ColumnConfig[];\n\n  /**\n   * Data to be displayed in the table\n   */\n  data: any[];\n}\n\n/**\n * @slot default - Slot for the composed table columns\n * @slot before - Use this slot to insert HTML before the table.\n * @slot after - Use this slot to insert HTML after the table.\n */\n@Component({\n  tag: 'nv-table',\n  styleUrl: 'nv-table.scss',\n  shadow: false,\n})\nexport class NvTable {\n  @Element() el: HTMLNvTableElement;\n\n  private readonly templateCache = new Map<string, Element>();\n  private readonly headerTemplateCache = new Map<string, Element>();\n\n  /****************************************************************************/\n  //#region STATES\n\n  @State()\n  parsedColumns: ColumnConfig[] = [];\n\n  @State()\n  parsedData: any[] = [];\n\n  @State()\n  private table: Table = null;\n\n  //#endregion STATES\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Data to be displayed in the table\n   */\n  @Prop({ reflect: true })\n  readonly data: any[] = [];\n\n  /**\n   * Configuration of the columns of the table\n   */\n  @Prop({ reflect: true })\n  readonly columnsConfig: ColumnConfig[] = [];\n\n  /**\n   * Data to be displayed in the table\n   */\n  @Prop({ reflect: true })\n  readonly dataJson?: string;\n\n  /**\n   * Configuration of the columns of the table\n   */\n  @Prop({ reflect: true })\n  readonly columnsConfigJson?: string;\n\n  /**\n   * Fallback value to be displayed when data is not available\n   */\n  @Prop({ reflect: true })\n  readonly fallbackValue: string = 'N/A';\n\n  /**\n   * Message to be displayed when no data is available\n   */\n  @Prop({ reflect: true })\n  readonly noDataMessage: string = 'No data available';\n\n  /**\n   * The message to display when there are no columns or data available.\n   * @default 'No data or columns available to display.'\n   */\n  @Prop({ reflect: true })\n  readonly noColumnsNoDataMessage: string =\n    'No data or columns available to display.';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Caches templates for cells and headers upfront to improve performance.\n   */\n  private cacheTemplates() {\n    const columns = Array.from(this.el.querySelectorAll('nv-tablecolumn'));\n\n    columns.forEach((col: HTMLNvTablecolumnElement) => {\n      const key = col.name;\n      const cellSlot = col.querySelector('[slot=\"cell\"]');\n\n      if (cellSlot) {\n        const element = deepCopyElement(cellSlot as HTMLElement);\n        this.templateCache.set(key, element);\n      }\n\n      const headerSlot = col.querySelector('[slot=\"header\"]');\n\n      if (headerSlot) {\n        const element = deepCopyElement(headerSlot as HTMLElement);\n        this.headerTemplateCache.set(key, element);\n      } else {\n        const header = col.header;\n\n        if (header) {\n          const headerDiv = document.createElement('div');\n          headerDiv.textContent = header;\n          this.headerTemplateCache.set(key, headerDiv);\n        }\n      }\n    });\n  }\n\n  private parseDataAndColumns() {\n    if (this.dataJson) {\n      this.parseJsonData(this.dataJson);\n    } else if (this.data && this.data.length > 0) {\n      this.parseDataArray(this.data, this.parsedData);\n    }\n\n    if (this.columnsConfigJson) {\n      this.parseJsonColumns(this.columnsConfigJson, this.parsedColumns);\n    } else if (this.columnsConfig && this.columnsConfig.length > 0) {\n      this.parseColumnsArray(this.columnsConfig, this.parsedColumns);\n    } else if (this.headerTemplateCache.size > 0) {\n      const headerKeys = Array.from(this.headerTemplateCache.keys());\n      const arrayColumnsConfig = headerKeys.map<ColumnConfig>(key => ({\n        ...{}, // Ensure no prototype inheritance\n        name: key,\n        header: key ? key.charAt(0).toUpperCase() + key.slice(1) : '',\n      }));\n\n      this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);\n    } else if (this.parsedData.length > 0) {\n      const firstRow = this.parsedData[0];\n      const arrayColumnsConfig = Object.keys(firstRow).map<ColumnConfig>(\n        key => ({\n          name: key,\n          header: key.charAt(0).toUpperCase() + key.slice(1),\n        }),\n      );\n\n      this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);\n    }\n  }\n\n  private deepEqual(a: any, b: any): boolean {\n    return JSON.stringify(a) === JSON.stringify(b);\n  }\n\n  /**\n   * Parses the data array and sets the state accordingly\n   * @param {any[]} newValue - New value of the data array\n   * @param {any[]} oldValue - Old value of the data array\n   * @returns {void}\n   */\n  private parseDataArray(newValue: any[], oldValue: any[]) {\n    // Ensure both are arrays for proper comparison\n    const safeNewValue = Array.isArray(newValue) ? newValue : [];\n    const safeOldValue = Array.isArray(oldValue) ? oldValue : [];\n\n    if (this.deepEqual(safeNewValue, safeOldValue)) {\n      return; // Deep comparison\n    }\n\n    this.parsedData = Array.isArray(newValue) ? newValue : [];\n  }\n\n  /**\n   * Parses the columns array and sets the state accordingly\n   * @param {ColumnConfig[]} newValue - New value of the columns array\n   * @param {ColumnConfig[]} oldValue - Old value of the columns array\n   * @returns {void}\n   */\n  private parseColumnsArray(\n    newValue: ColumnConfig[] | null | undefined,\n    oldValue: ColumnConfig[] | null | undefined,\n  ) {\n    // Ensure both are arrays for proper comparison\n    const safeNewValue = Array.isArray(newValue) ? newValue : [];\n    const safeOldValue = Array.isArray(oldValue) ? oldValue : [];\n\n    // Use a proper deep comparison function (e.g., Lodash's isEqual)\n    if (this.deepEqual(safeNewValue, safeOldValue)) {\n      return;\n    }\n\n    // Assign only after confirming changes\n    this.parsedColumns = safeNewValue;\n  }\n\n  private initializeTable() {\n    // Clear the previous table instance (if any)\n    this.table = null;\n\n    if (this.parsedColumns.length > 0) {\n      this.table = {\n        columns: this.parsedColumns,\n        data: this.getTableData(),\n      };\n    } else {\n      this.table = null;\n    }\n  }\n\n  private getTableData(): any[] {\n    if (\n      this.parsedData &&\n      Array.isArray(this.parsedData) &&\n      this.parsedData.length > 0\n    ) {\n      return [...this.parsedData];\n    } else {\n      return [];\n    }\n  }\n\n  // Helper function to get nested property value\n  private replaceKeyWithValue(obj: any, path: string) {\n    return (\n      path\n        .split('.')\n        .reduce(\n          (acc, key) => (acc && acc[key] !== undefined ? acc[key] : undefined),\n          obj,\n        ) ?? this.fallbackValue\n    );\n  }\n\n  private renderTemplate(template: Element | undefined, row: any) {\n    if (!template) {\n      return null;\n    }\n\n    // Handle <template> elements correctly\n    const templateContent =\n      template instanceof HTMLTemplateElement ? template.content : template;\n    const element = deepCopyElement(templateContent as HTMLElement);\n\n    // Replace placeholders in text content, attributes, and properties\n    element.querySelectorAll('*').forEach(el => {\n      // Replace placeholders in text content\n      this.replacePlaceholdersTextContent(el, row);\n\n      // Replace placeholders in attributes\n      this.replacePlaceholdersAttributes(el, row);\n\n      // Replace placeholders in properties\n      this.replacePlaceholdersProperties(el, row);\n    });\n\n    // Handle `data-bind-event`\n    element.querySelectorAll('[data-bind-event]').forEach(el => {\n      const bindEvent = el.getAttribute('data-bind-event') || '';\n      const splitted = bindEvent.split(':');\n\n      if (!bindEvent.includes(':') || splitted.length < 2) {\n        console.warn('Invalid data-bind-event format:', bindEvent);\n        return;\n      }\n\n      const eventType = splitted[0];\n      const keyAction = splitted[1];\n      const details = splitted.length > 2 ? splitted[2] : null;\n\n      el.addEventListener(eventType, () => {\n        const keys = details?.split(',') ?? [];\n\n        // Convert keys into a single object instead of an array of objects\n        const keyValue = keys.reduce((acc, key) => {\n          acc[key] = row?.[key];\n          return acc;\n        }, {} as Record<string, any>);\n\n        const action: ActionEvent = { keyAction, details: keyValue };\n\n        this.action.emit(action);\n      });\n    });\n\n    // Ensure Web Components are properly connected\n    setTimeout(() => {\n      element.querySelectorAll('*').forEach(child => {\n        if (typeof (child as any).connectedCallback === 'function') {\n          (child as any).connectedCallback();\n        }\n      });\n    }, 0);\n\n    return (\n      <div\n        ref={el => {\n          if (el) {\n            el.innerHTML = ''; // Remove existing content\n            el.appendChild(element); // Append new element\n          }\n        }}\n      ></div>\n    );\n  }\n\n  private replacePlaceholdersTextContent(element: Element, row: any) {\n    // ✅ Replace placeholders in text content\n    element.childNodes.forEach(node => {\n      if (node.nodeType === Node.TEXT_NODE) {\n        node.textContent = node.textContent.replace(/__([\\w.]+)__/g, (_, key) =>\n          this.replaceKeyWithValue(row, key),\n        );\n      }\n    });\n  }\n\n  private replacePlaceholdersAttributes(element: Element, row: any) {\n    // ✅ Replace placeholders in attributes\n    Array.from(element.attributes).forEach(attr => {\n      if (attr.value.includes('__')) {\n        attr.value = attr.value.replace(/__([\\w.]+)__/g, (_, key) =>\n          this.replaceKeyWithValue(row, key),\n        );\n      }\n    });\n  }\n\n  private replacePlaceholdersProperties(element: Element, row: any) {\n    // ✅ Dynamically extract relevant properties\n    const properties = new Set<string>();\n\n    // Collect only own enumerable properties\n    Object.keys(element).forEach(key => properties.add(key));\n\n    // Collect inherited properties from prototypes (HTMLElement -> Element -> Node)\n    let proto = Object.getPrototypeOf(element);\n    while (proto && proto !== HTMLElement.prototype) {\n      Object.keys(proto).forEach(key => properties.add(key));\n      proto = Object.getPrototypeOf(proto);\n    }\n\n    // ✅ Filter and copy only non-function properties and exclude irrelevant ones\n    properties.forEach(prop => {\n      if (\n        typeof (element as any)[prop] !== 'function' && // Ignore methods\n        !prop.startsWith('on') && // Ignore event listeners (onclick, oninput, etc.)\n        !excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props\n      ) {\n        try {\n          const value = element[prop];\n\n          // ✅ Replace placeholders only if the value is a string\n          if (typeof value === 'string' && value.includes('__')) {\n            element[prop] = value.replace(/__([\\w.]+)__/g, (_, key: string) =>\n              this.replaceKeyWithValue(row, key),\n            ) as any; // ✅ TypeScript safe\n          }\n        } catch (error) {\n          console.warn(`Could not assign property ${prop}:`, error.message);\n        }\n      }\n    });\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('columnsConfig')\n  parseColumns(newValue: ColumnConfig[], oldValue: ColumnConfig[]) {\n    this.parseColumnsArray(newValue, oldValue);\n  }\n\n  @Watch('columnsConfigJson')\n  parseJsonColumns(newValue: string | undefined, oldValue: ColumnConfig[]) {\n    try {\n      const newItems = newValue ? JSON.parse(newValue) : [];\n\n      this.parseColumnsArray(newItems, oldValue);\n    } catch (e) {\n      console.error('Invalid JSON format for columnsConfigJson:', e.message);\n      this.parsedColumns = [];\n    }\n  }\n\n  @Watch('data')\n  parseData(newValue: any[], oldValue: any[]) {\n    this.parseDataArray(newValue, oldValue);\n  }\n\n  @Watch('dataJson')\n  parseJsonData(newValue: string | undefined) {\n    try {\n      const newItems = newValue ? JSON.parse(newValue) : [];\n\n      this.parseDataArray(newItems, this.parsedData);\n    } catch (e) {\n      console.error('Invalid JSON format for dataJson:', e.message);\n      this.parsedData = [];\n    }\n  }\n\n  @Watch('parsedColumns')\n  @Watch('parsedData')\n  handleParsedChange() {\n    this.initializeTable();\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.cacheTemplates();\n\n    this.parseDataAndColumns();\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  @Event()\n  action: EventEmitter<ActionEvent>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    const headerGroups =\n      !this.table || this.table === undefined || this.parsedColumns.length === 0\n        ? []\n        : this.table.columns;\n\n    const rows =\n      !this.table || this.table === undefined || this.parsedData.length === 0\n        ? []\n        : this.table.data;\n\n    return (\n      <Host>\n        <div class=\"hidden\">\n          <slot></slot>\n        </div>\n\n        <slot name=\"before\"></slot>\n\n        {this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (\n          <div class=\"no-data\">{this.noColumnsNoDataMessage}</div>\n        ) : (\n          <table class=\"table\">\n            {this.parsedColumns.length > 0 && headerGroups.length > 0 && (\n              <thead class=\"table-header\">\n                <tr>\n                  {headerGroups &&\n                    headerGroups.map(col => {\n                      return (\n                        <th key={col.name}>\n                          {this.renderTemplate(\n                            this.headerTemplateCache.get(col.name),\n                            {},\n                          ) || col.header}\n                        </th>\n                      );\n                    })}\n                </tr>\n              </thead>\n            )}\n            <tbody class=\"table-body\">\n              {!rows || rows.length === 0 ? (\n                <tr>\n                  <td colSpan={headerGroups.length || 12} class=\"no-data\">\n                    {this.noDataMessage}\n                  </td>\n                </tr>\n              ) : (\n                rows.map(row => (\n                  <tr key={JSON.stringify(row)}>\n                    {headerGroups.map(col => (\n                      <td>\n                        {this.renderTemplate(\n                          this.templateCache.get(col.name),\n                          row,\n                        ) ||\n                          (row[col.name] ?? this.fallbackValue)}\n                      </td>\n                    ))}\n                  </tr>\n                ))\n              )}\n            </tbody>\n          </table>\n        )}\n\n        <slot name=\"after\"></slot>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-tablecolumn.js

@@ -1,42 +1,19 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-77d0fedc.js';
-
-const nvTablecolumnCss = "";
-const NvTablecolumnStyle0 = nvTablecolumnCss;
+import { p as proxyCustomElement, H } from './p-77d0fedc.js';
 
 const NvTablecolumn$1 = /*@__PURE__*/ proxyCustomElement(class NvTablecolumn extends H {
     constructor() {
         super();
         this.__registerHost();
-        /**
-         * A non-negative integer value indicating how many columns the header cell spans
-         * or extends. The default value is 1. User agents dismiss values higher than 1000
-         * as incorrect, defaulting such values to 1.
-         * @default 1
-         */
-        this.colspan = 1;
-        /**
-         * A non-negative integer value indicating how many rows the header cell spans or
-         * extends. The default value is 1; if its value is set to 0, the header cell will
-         * extends to the end of the table grouping section (`<thead>`, `<tbody>`, `<tfoot>`,
-         * even if implicitly defined), that the `<th>` belongs to. Values higher than 65534
-         * are clipped at 65534.
-         * @default 1
-         */
-        this.rowspan = 1;
     }
     //#endregion PROPERTIES
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'b915edf73d123698dda7b09dff8338ab6e7996bc' }, h("th", { key: 'dc055106d9bcd20c962515477d6d6abd570b36b6', abbr: this.abbr, colSpan: this.colspan, headers: this.headers, rowSpan: this.rowspan, scope: this.scope }, h("slot", { key: '2b760e4a3a0a796724300cce8437d886b9c26deb' }))));
+        return null;
     }
-    static get style() { return NvTablecolumnStyle0; }
-}, [4, "nv-tablecolumn", {
-        "abbr": [1],
-        "colspan": [2],
-        "rowspan": [2],
-        "headers": [1],
-        "scope": [1]
+}, [0, "nv-tablecolumn", {
+        "name": [513],
+        "header": [513]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/nv-tablecolumn.js.map

@@ -1 +1 @@
-{"file":"nv-tablecolumn.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAC5B,4BAAe,gBAAgB;;MCSlBA,eAAa;IAL1B;;;;;;;;;QAyBW,YAAO,GAAW,CAAC,CAAC;;;;;;;;;QAWpB,YAAO,GAAW,CAAC,CAAC;KAgD9B;;;;IAlBC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,2DACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,IAEjB,8DAAa,CACV,CACA,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvTablecolumn"],"sources":["src/components/nv-tablecolumn/nv-tablecolumn.scss?tag=nv-tablecolumn","src/components/nv-tablecolumn/nv-tablecolumn.tsx"],"sourcesContent":["// No need for the moment\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * @slot default - Use this slot to insert HTML into the table column.\n */\n@Component({\n  tag: 'nv-tablecolumn',\n  styleUrl: 'nv-tablecolumn.scss',\n  shadow: false,\n})\nexport class NvTablecolumn {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * A short, abbreviated description of the header cell's content provided as an\n   * alternative label to use for the header cell when referencing the cell in other\n   * contexts. Some user-agents, such as speech readers, may present this description\n   * before the content itself.\n   */\n  @Prop()\n  readonly abbr: string;\n\n  /**\n   * A non-negative integer value indicating how many columns the header cell spans\n   * or extends. The default value is 1. User agents dismiss values higher than 1000\n   * as incorrect, defaulting such values to 1.\n   * @default 1\n   */\n  @Prop()\n  readonly colspan: number = 1;\n\n  /**\n   * A non-negative integer value indicating how many rows the header cell spans or\n   * extends. The default value is 1; if its value is set to 0, the header cell will\n   * extends to the end of the table grouping section (`<thead>`, `<tbody>`, `<tfoot>`,\n   * even if implicitly defined), that the `<th>` belongs to. Values higher than 65534\n   * are clipped at 65534.\n   * @default 1\n   */\n  @Prop()\n  readonly rowspan: number = 1;\n\n  /**\n   * A list of space-separated strings corresponding to the id attributes of the `<th>`\n   * elements that provide the headers for this header cell.\n   * @example 'col1 col2'\n   */\n  @Prop()\n  readonly headers: string;\n\n  /**\n   * Defines the cells that the header (defined in the `<th>`) element relates to.\n   * Possible enumerated values are:\n   *\n   * - `col`: The header relates to all cells of the column it belongs to.\n   * - `row`: The header relates to all cells of the row it belongs to.\n   * - `colgroup`: The header relates to all cells of the column group it belongs to.\n   * - `rowgroup`: The header relates to all cells of the row group it belongs to.\n   *\n   * If the `scope` attribute is not specified, or its value is not `row`, `col`,\n   * `rowgroup`, or `colgroup`, then browsers automatically select the set of cells to\n   * which the header cell applies.\n   */\n  @Prop()\n  readonly scope: 'col' | 'row' | 'colgroup' | 'rowgroup';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <th\n          abbr={this.abbr}\n          colSpan={this.colspan}\n          headers={this.headers}\n          rowSpan={this.rowspan}\n          scope={this.scope}\n        >\n          <slot></slot>\n        </th>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"version":3}
+{"file":"nv-tablecolumn.js","mappings":";;MAMaA,eAAa;;;;;;;;IAoBxB,MAAM;QACJ,OAAO,IAAI,CAAC;KACb;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvTablecolumn"],"sources":["src/components/nv-tablecolumn/nv-tablecolumn.tsx"],"sourcesContent":["import { Component, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'nv-tablecolumn',\n  shadow: false,\n})\nexport class NvTablecolumn {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Name of the column and data accessor\n   */\n  @Prop({ reflect: true })\n  readonly name!: string;\n\n  /**\n   * Header of the column to be displayed\n   */\n  @Prop({ reflect: true })\n  readonly header?: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return null;\n  }\n\n  // #endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-toggle.js

@@ -63,8 +63,8 @@ const NvToggle$1 = /*@__PURE__*/ proxyCustomElement(class NvToggle extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '75e37c699cfc3b0488dfb660ff7e1dc8bc4fcec7', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: 'a34755c8cfa921ffbc7e60cff93f89b2eb451007', class: "input-container" }, h("input", { key: 'dbfc3021614001f1fd2d2fb3dd1352fc33078fb2', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), h("div", { key: 'afac6bb640ba44af0d9fc3841dae90bfb3130c89', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'eac00ea14d7181b17cc06d48f69dcd46d891d9b9', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '52f3e6ee4c7fed8218a2c782b1cdedd4230ce8ac', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '861fc6d2e9abf58e43e45e91dfdd2da7705c5e1a', class: "description" }, h("slot", { key: 'cb218ac2d197f84202c668621ee9e56c936ca50f', name: "description" }, this.description))))));
+        return (h(Host, { key: '0ea7a73c5b656d0d7f9342a9526dc00a66a94f83', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: 'eb294c704b9f3568e03af1817a302d2edfe24486', class: "input-container" }, h("input", { key: '777b6e7172691aba435751364c5908f381390f23', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), h("div", { key: '92dbdb51e8c9fc231572009d37e274e070334292', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '9d50bac5932e25c3b3c8dd04fe44e2622e22b6ac', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: 'bf6cb8ff071c11d7809580a5dee61a1dfd89c112', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'db77b501162725dcf3b05b3d7c4b26d0f933ac8b', class: "description" }, h("slot", { key: 'a201c736b5237e88ee0d8caa3999874caa7f85f3', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }

package/dist/components/nv-tooltip.js

@@ -1,4 +1,4 @@
-import { N as NvTooltip$1, d as defineCustomElement$1 } from './p-83e1177b.js';
+import { N as NvTooltip$1, d as defineCustomElement$1 } from './p-fad78896.js';
 
 const NvTooltip = NvTooltip$1;
 const defineCustomElement = defineCustomElement$1;