@nova-design-system/nova-webcomponents 3.0.0-beta.25 → 3.0.0-beta.28

package/dist/collection/components/nv-table/nv-table.docs.js

@@ -0,0 +1,178 @@
+import { h } from "@stencil/core";
+const NvTableDocs = {
+    component: 'nv-table',
+    subcomponents: [
+        'nv-tablehead',
+        'nv-tablebody',
+        'nv-tablerow',
+        'nv-tablecolumn',
+        'nv-tabledatacell',
+        'nv-icon',
+    ],
+    composedComponents: [
+        'nv-tablehead',
+        'nv-tablebody',
+        'nv-tablerow',
+        'nv-tablecolumn',
+        'nv-tabledatacell',
+        'nv-icon',
+    ],
+    stories: [
+        {
+            name: 'Default',
+            template: h("nv-table", { "data-storybook-args": true }),
+        },
+        {
+            name: 'No Columns No Data Message',
+            args: {
+                noColumnsNoDataMessage: 'Nothing to display.',
+            },
+            template: h("nv-table", { "data-storybook-args": true }),
+        },
+        {
+            name: 'No Data Message',
+            args: {
+                noDataMessage: 'No element available to display.',
+                columnsJson: `["Name", "Age", "Email"]`,
+            },
+            template: h("nv-table", { "data-storybook-args": true }),
+        },
+        {
+            name: 'Columns Array And Empty Data',
+            args: {
+                columns: ['Name', 'Age', 'Email'],
+            },
+            template: h("nv-table", { "data-storybook-args": true }),
+        },
+        {
+            name: 'Columns JSON And Empty Data',
+            args: {
+                columnsJson: `["Name", "Age", "Email"]`,
+            },
+            template: h("nv-table", { "data-storybook-args": true }),
+        },
+        {
+            name: 'Data Array And Empty Columns',
+            args: {
+                data: [
+                    { name: 'Alice', age: '25', email: 'alice@mail.com' },
+                    { name: 'Bob', age: '30', email: 'bob@mail.com' },
+                ],
+            },
+            template: h("nv-table", { "data-storybook-args": true }),
+        },
+        {
+            name: 'Data JSON And Empty Columns',
+            args: {
+                dataJson: `[
+          { "name": "Alice", "age": "25", "email": "alice@mail.com" },
+          { "name": "Bob", "age": "30", "email": "bob@mail.com" }
+        ]`,
+            },
+            template: h("nv-table", { "data-storybook-args": true }),
+        },
+        {
+            name: 'Columns Array And Data Array',
+            args: {
+                columns: ['Name', 'Age', 'Email'],
+                data: [
+                    { name: 'Alice', age: '25', email: 'alice@mail.com' },
+                    { name: 'Bob', age: '30', email: 'bob@mail.com' },
+                ],
+            },
+            template: h("nv-table", { "data-storybook-args": true }),
+        },
+        {
+            name: 'Columns JSON And Data JSON',
+            args: {
+                columnsJson: `["Name", "Age", "Email"]`,
+                dataJson: `[
+          { "name": "Alice", "age": "25", "email": "alice@mail.com" },
+          { "name": "Bob", "age": "30", "email": "bob@mail.com" }
+        ]`,
+            },
+            template: h("nv-table", { "data-storybook-args": true }),
+        },
+        {
+            name: 'Columns Decomposed And Empty Data',
+            template: (h("nv-table", { "data-storybook-args": true }, h("nv-tablehead", { slot: "head" }, h("nv-tablerow", null, h("nv-tablecolumn", null, "Name"), h("nv-tablecolumn", null, "Age"), h("nv-tablecolumn", null, "Email"))))),
+        },
+        {
+            name: 'Columns Decomposed And Data Array',
+            args: {
+                data: [
+                    { name: 'Alice', age: '25', email: 'alice@mail.com' },
+                    { name: 'Bob', age: '30', email: 'bob@mail.com' },
+                ],
+            },
+            template: (h("nv-table", { "data-storybook-args": true }, h("nv-tablehead", { slot: "head" }, h("nv-tablerow", null, h("nv-tablecolumn", null, "Name"), h("nv-tablecolumn", null, "Age"), h("nv-tablecolumn", null, "Email"))))),
+        },
+        {
+            name: 'Columns Decomposed And Data JSON',
+            args: {
+                dataJson: `[
+          { "name": "Alice", "age": "25", "email": "alice@mail.com" },
+          { "name": "Bob", "age": "30", "email": "bob@mail.com" }
+        ]`,
+            },
+            template: (h("nv-table", { "data-storybook-args": true }, h("nv-tablehead", { slot: "head" }, h("nv-tablerow", null, h("nv-tablecolumn", null, "Name"), h("nv-tablecolumn", null, "Age"), h("nv-tablecolumn", null, "Email"))))),
+        },
+        {
+            name: 'Data Decomposed And Empty Columns',
+            template: (h("nv-table", { "data-storybook-args": true }, h("nv-tablebody", { slot: "body" }, h("nv-tablerow", null, h("nv-tabledatacell", null, "Alice"), h("nv-tabledatacell", null, "25"), h("nv-tabledatacell", null, "alice@mail.com")), h("nv-tablerow", null, h("nv-tabledatacell", null, "Bob"), h("nv-tabledatacell", null, "30"), h("nv-tabledatacell", null, "bob@mail.com"))))),
+        },
+        {
+            name: 'Data Decomposed And Columns Array',
+            args: {
+                columns: ['Name', 'Age', 'Email'],
+            },
+            template: (h("nv-table", { "data-storybook-args": true }, h("nv-tablebody", { slot: "body" }, h("nv-tablerow", null, h("nv-tabledatacell", null, "Alice"), h("nv-tabledatacell", null, "25"), h("nv-tabledatacell", null, "alice@mail.com")), h("nv-tablerow", null, h("nv-tabledatacell", null, "Bob"), h("nv-tabledatacell", null, "30"), h("nv-tabledatacell", null, "bob@mail.com"))))),
+        },
+        {
+            name: 'Data Decomposed And Columns JSON',
+            args: {
+                columnsJson: `["Name", "Age", "Email"]`,
+            },
+            template: (h("nv-table", { "data-storybook-args": true }, h("nv-tablebody", { slot: "body" }, h("nv-tablerow", null, h("nv-tabledatacell", null, "Alice"), h("nv-tabledatacell", null, "25"), h("nv-tabledatacell", null, "alice@mail.com")), h("nv-tablerow", null, h("nv-tabledatacell", null, "Bob"), h("nv-tabledatacell", null, "30"), h("nv-tabledatacell", null, "bob@mail.com"))))),
+        },
+        {
+            name: 'Columns Decomposed And Data Decomposed',
+            template: (h("nv-table", { "data-storybook-args": true }, h("nv-tablehead", { slot: "head" }, h("nv-tablerow", null, h("nv-tablecolumn", null, "Name"), h("nv-tablecolumn", null, "Age"), h("nv-tablecolumn", null, "Email"))), h("nv-tablebody", { slot: "body" }, h("nv-tablerow", null, h("nv-tabledatacell", null, "Alice"), h("nv-tabledatacell", null, "25"), h("nv-tabledatacell", null, h("nv-icon", { name: "mail" }), h("a", { href: "mailto:alice@mail.com", class: "text-amber-500" }, "alice@mail.com"))), h("nv-tablerow", null, h("nv-tabledatacell", null, "Bob"), h("nv-tabledatacell", null, "30"), h("nv-tabledatacell", null, "bob@mail.com"))))),
+        },
+        {
+            name: 'Slot Before',
+            args: {
+                columnsJson: `["Name", "Age", "Email"]`,
+                dataJson: `[
+          { "name": "Alice", "age": "25", "email": "alice@mail.com" },
+          { "name": "Bob", "age": "30", "email": "bob@mail.com" }
+        ]`,
+            },
+            template: (h("nv-table", { "data-storybook-args": true }, h("div", { slot: "before" }, "Before"))),
+        },
+        {
+            name: 'Slot After',
+            args: {
+                columnsJson: `["Name", "Age", "Email"]`,
+                dataJson: `[
+          { "name": "Alice", "age": "25", "email": "alice@mail.com" },
+          { "name": "Bob", "age": "30", "email": "bob@mail.com" }
+        ]`,
+            },
+            template: (h("nv-table", { "data-storybook-args": true }, h("div", { slot: "after" }, "After"))),
+        },
+        {
+            name: 'Slot Before And After',
+            args: {
+                columnsJson: `["Name", "Age", "Email"]`,
+                dataJson: `[
+          { "name": "Alice", "age": "25", "email": "alice@mail.com" },
+          { "name": "Bob", "age": "30", "email": "bob@mail.com" }
+        ]`,
+            },
+            template: (h("nv-table", { "data-storybook-args": true }, h("div", { slot: "before" }, "Before"), h("div", { slot: "after" }, "After"))),
+        },
+    ],
+};
+export default NvTableDocs;
+//# sourceMappingURL=nv-table.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-table.docs.js","sourceRoot":"","sources":["../../../src/components/nv-table/nv-table.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvTableDocs: NovaDocs<Components.NvTable> = {\n  component: 'nv-table',\n  subcomponents: [\n    'nv-tablehead',\n    'nv-tablebody',\n    'nv-tablerow',\n    'nv-tablecolumn',\n    'nv-tabledatacell',\n    'nv-icon',\n  ],\n  composedComponents: [\n    'nv-tablehead',\n    'nv-tablebody',\n    'nv-tablerow',\n    'nv-tablecolumn',\n    'nv-tabledatacell',\n    'nv-icon',\n  ],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: 'No Columns No Data Message',\n      args: {\n        noColumnsNoDataMessage: 'Nothing to display.',\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: 'No Data Message',\n      args: {\n        noDataMessage: 'No element available to display.',\n        columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: 'Columns Array And Empty Data',\n      args: {\n        columns: ['Name', 'Age', 'Email'],\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: 'Columns JSON And Empty Data',\n      args: {\n        columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: 'Data Array And Empty Columns',\n      args: {\n        data: [\n          { name: 'Alice', age: '25', email: 'alice@mail.com' },\n          { name: 'Bob', age: '30', email: 'bob@mail.com' },\n        ],\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: 'Data JSON And Empty Columns',\n      args: {\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: 'Columns Array And Data Array',\n      args: {\n        columns: ['Name', 'Age', 'Email'],\n        data: [\n          { name: 'Alice', age: '25', email: 'alice@mail.com' },\n          { name: 'Bob', age: '30', email: 'bob@mail.com' },\n        ],\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: 'Columns JSON And Data JSON',\n      args: {\n        columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: 'Columns Decomposed And Empty Data',\n      template: (\n        <nv-table data-storybook-args>\n          <nv-tablehead slot=\"head\">\n            <nv-tablerow>\n              <nv-tablecolumn>Name</nv-tablecolumn>\n              <nv-tablecolumn>Age</nv-tablecolumn>\n              <nv-tablecolumn>Email</nv-tablecolumn>\n            </nv-tablerow>\n          </nv-tablehead>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'Columns Decomposed And Data Array',\n      args: {\n        data: [\n          { name: 'Alice', age: '25', email: 'alice@mail.com' },\n          { name: 'Bob', age: '30', email: 'bob@mail.com' },\n        ],\n      },\n      template: (\n        <nv-table data-storybook-args>\n          <nv-tablehead slot=\"head\">\n            <nv-tablerow>\n              <nv-tablecolumn>Name</nv-tablecolumn>\n              <nv-tablecolumn>Age</nv-tablecolumn>\n              <nv-tablecolumn>Email</nv-tablecolumn>\n            </nv-tablerow>\n          </nv-tablehead>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'Columns Decomposed And Data JSON',\n      args: {\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-table data-storybook-args>\n          <nv-tablehead slot=\"head\">\n            <nv-tablerow>\n              <nv-tablecolumn>Name</nv-tablecolumn>\n              <nv-tablecolumn>Age</nv-tablecolumn>\n              <nv-tablecolumn>Email</nv-tablecolumn>\n            </nv-tablerow>\n          </nv-tablehead>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'Data Decomposed And Empty Columns',\n      template: (\n        <nv-table data-storybook-args>\n          <nv-tablebody slot=\"body\">\n            <nv-tablerow>\n              <nv-tabledatacell>Alice</nv-tabledatacell>\n              <nv-tabledatacell>25</nv-tabledatacell>\n              <nv-tabledatacell>alice@mail.com</nv-tabledatacell>\n            </nv-tablerow>\n            <nv-tablerow>\n              <nv-tabledatacell>Bob</nv-tabledatacell>\n              <nv-tabledatacell>30</nv-tabledatacell>\n              <nv-tabledatacell>bob@mail.com</nv-tabledatacell>\n            </nv-tablerow>\n          </nv-tablebody>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'Data Decomposed And Columns Array',\n      args: {\n        columns: ['Name', 'Age', 'Email'],\n      },\n      template: (\n        <nv-table data-storybook-args>\n          <nv-tablebody slot=\"body\">\n            <nv-tablerow>\n              <nv-tabledatacell>Alice</nv-tabledatacell>\n              <nv-tabledatacell>25</nv-tabledatacell>\n              <nv-tabledatacell>alice@mail.com</nv-tabledatacell>\n            </nv-tablerow>\n            <nv-tablerow>\n              <nv-tabledatacell>Bob</nv-tabledatacell>\n              <nv-tabledatacell>30</nv-tabledatacell>\n              <nv-tabledatacell>bob@mail.com</nv-tabledatacell>\n            </nv-tablerow>\n          </nv-tablebody>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'Data Decomposed And Columns JSON',\n      args: {\n        columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n      },\n      template: (\n        <nv-table data-storybook-args>\n          <nv-tablebody slot=\"body\">\n            <nv-tablerow>\n              <nv-tabledatacell>Alice</nv-tabledatacell>\n              <nv-tabledatacell>25</nv-tabledatacell>\n              <nv-tabledatacell>alice@mail.com</nv-tabledatacell>\n            </nv-tablerow>\n            <nv-tablerow>\n              <nv-tabledatacell>Bob</nv-tabledatacell>\n              <nv-tabledatacell>30</nv-tabledatacell>\n              <nv-tabledatacell>bob@mail.com</nv-tabledatacell>\n            </nv-tablerow>\n          </nv-tablebody>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'Columns Decomposed And Data Decomposed',\n      template: (\n        <nv-table data-storybook-args>\n          <nv-tablehead slot=\"head\">\n            <nv-tablerow>\n              <nv-tablecolumn>Name</nv-tablecolumn>\n              <nv-tablecolumn>Age</nv-tablecolumn>\n              <nv-tablecolumn>Email</nv-tablecolumn>\n            </nv-tablerow>\n          </nv-tablehead>\n          <nv-tablebody slot=\"body\">\n            <nv-tablerow>\n              <nv-tabledatacell>Alice</nv-tabledatacell>\n              <nv-tabledatacell>25</nv-tabledatacell>\n              <nv-tabledatacell>\n                <nv-icon name=\"mail\"></nv-icon>\n                <a href=\"mailto:alice@mail.com\" class=\"text-amber-500\">\n                  alice@mail.com\n                </a>\n              </nv-tabledatacell>\n            </nv-tablerow>\n            <nv-tablerow>\n              <nv-tabledatacell>Bob</nv-tabledatacell>\n              <nv-tabledatacell>30</nv-tabledatacell>\n              <nv-tabledatacell>bob@mail.com</nv-tabledatacell>\n            </nv-tablerow>\n          </nv-tablebody>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'Slot Before',\n      args: {\n        columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-table data-storybook-args>\n          <div slot=\"before\">Before</div>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'Slot After',\n      args: {\n        columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-table data-storybook-args>\n          <div slot=\"after\">After</div>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'Slot Before And After',\n      args: {\n        columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-table data-storybook-args>\n          <div slot=\"before\">Before</div>\n          <div slot=\"after\">After</div>\n        </nv-table>\n      ),\n    },\n  ],\n};\n\nexport default NvTableDocs;\n"]}

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

@@ -0,0 +1,287 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Host, h } from "@stencil/core";
+/**
+ * @slot default - Use this slot to insert HTML into the table content.
+ * @slot head - Use this slot to insert HTML into the table header.
+ * @slot before - Use this slot to insert HTML before the table.
+ * @slot after - Use this slot to insert HTML after the table.
+ * @slot body - Use this slot to insert HTML into the table body.
+ */
+export class NvTable {
+    constructor() {
+        this.parsedColumns = [];
+        this.parsedData = [];
+        this.hasSlotHead = false;
+        this.hasSlotBody = false;
+        this.columns = [];
+        this.columnsJson = undefined;
+        this.data = [];
+        this.dataJson = undefined;
+        this.noDataMessage = 'No data available';
+        this.noColumnsNoDataMessage = 'No data or columns available to display.';
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region WATCHERS
+    parseColumns(newValue, oldValue) {
+        this.parseColumnsArray(newValue, oldValue);
+    }
+    parseJsonColumns(newValue) {
+        try {
+            const newItems = newValue ? JSON.parse(newValue) : [];
+            this.parseColumnsArray(newItems, this.parsedColumns);
+        }
+        catch (e) {
+            console.error('Invalid JSON format for columnsJson:', 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 = [];
+        }
+    }
+    //#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 : [];
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#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);
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#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: 'ab2f459ea80c9f134a537b62298ffd55ad7b719f' }, h("div", { key: '081211573d87749e8b133b89e9da2a201b9e8bf3', class: "hidden" }, h("slot", { key: '7dd2c168d379818e1456eb2117e14cf79e44f33e' }), h("slot", { key: '7c8e1b4cf0b223257148459d753c2eb325a7cd17', name: "head" }), h("slot", { key: 'd107814f31a82e3fd6e22dbccff319c5baf2b3db', name: "body" })), h("slot", { key: 'd704c43a322b073ed459947f23950bc719402656', 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: '727d2040bec14d6632d062637b86b3a79e30b88d', name: "after" })));
+    }
+    static get is() { return "nv-table"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./nv-table.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "['Name', 'Age', 'Email']"
+                        }, {
+                            "name": "default",
+                            "text": "[]"
+                        }],
+                    "text": "Defines the table columns."
+                },
+                "defaultValue": "[]"
+            },
+            "columnsJson": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "'[\"Name\", \"Age\", \"Email\"]'"
+                        }],
+                    "text": "Defines the table columns.\nIt can be passed directly as an array of strings or as a JSON string."
+                },
+                "attribute": "columns-json",
+                "reflect": true
+            },
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "[{ name: 'Alice', age: 25, email: 'alice@mail.com' }, { name: 'Bob', age: 30, email: 'bob@mail.com' }]"
+                        }, {
+                            "name": "default",
+                            "text": "[]"
+                        }],
+                    "text": "Defines the table data."
+                },
+                "defaultValue": "[]"
+            },
+            "dataJson": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "'[{ \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },{ \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }]'"
+                        }],
+                    "text": "Defines the table data.\nIt can be passed directly as an array of objects or as a JSON string."
+                },
+                "attribute": "data-json",
+                "reflect": true
+            },
+            "noDataMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'No data available'"
+                        }],
+                    "text": "The message to display when there is no data available."
+                },
+                "attribute": "no-data-message",
+                "reflect": false,
+                "defaultValue": "'No data available'"
+            },
+            "noColumnsNoDataMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'No data or columns available to display.'"
+                        }],
+                    "text": "The message to display when there are no columns or data available."
+                },
+                "attribute": "no-columns-no-data-message",
+                "reflect": false,
+                "defaultValue": "'No data or columns available to display.'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedColumns": {},
+            "parsedData": {},
+            "hasSlotHead": {},
+            "hasSlotBody": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "columns",
+                "methodName": "parseColumns"
+            }, {
+                "propName": "columnsJson",
+                "methodName": "parseJsonColumns"
+            }, {
+                "propName": "data",
+                "methodName": "parseData"
+            }, {
+                "propName": "dataJson",
+                "methodName": "parseJsonData"
+            }];
+    }
+}
+//# sourceMappingURL=nv-table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-table.js","sourceRoot":"","sources":["../../../src/components/nv-table/nv-table.tsx"],"names":[],"mappings":"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","sourcesContent":["/* 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@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"]}

package/dist/collection/components/nv-tablebody/nv-tablebody.docs.js

@@ -0,0 +1,8 @@
+const NvTablebodyDocs = {
+    component: 'nv-tablebody',
+    subcomponents: ['nv-tablerow', 'nv-tabledatacell'],
+    composedComponents: ['nv-tablerow', 'nv-tabledatacell'],
+    skip: true,
+};
+export default NvTablebodyDocs;
+//# sourceMappingURL=nv-tablebody.docs.js.map

package/dist/collection/components/nv-tablebody/nv-tablebody.docs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-tablebody.docs.js","sourceRoot":"","sources":["../../../src/components/nv-tablebody/nv-tablebody.docs.tsx"],"names":[],"mappings":"AAGA,MAAM,eAAe,GAAqC;IACxD,SAAS,EAAE,cAAc;IACzB,aAAa,EAAE,CAAC,aAAa,EAAE,kBAAkB,CAAC;IAClD,kBAAkB,EAAE,CAAC,aAAa,EAAE,kBAAkB,CAAC;IACvD,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvTablebodyDocs: NovaDocs<Components.NvTablebody> = {\n  component: 'nv-tablebody',\n  subcomponents: ['nv-tablerow', 'nv-tabledatacell'],\n  composedComponents: ['nv-tablerow', 'nv-tabledatacell'],\n  skip: true,\n};\n\nexport default NvTablebodyDocs;\n"]}

package/dist/collection/components/nv-tablebody/nv-tablebody.js

@@ -0,0 +1,23 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot default - Use this slot to insert HTML into the table body.
+ */
+export class NvTablebody {
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '033046403a927a4e738ee0b17491436872845375' }, h("tbody", { key: 'e9dd64ba4c4463b64f7c48ea01aa8d577d1abddd' }, h("slot", { key: '3790e34a3f1c0c870e41f5259edf956253cf031d' }))));
+    }
+    static get is() { return "nv-tablebody"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-tablebody.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-tablebody.css"]
+        };
+    }
+}
+//# sourceMappingURL=nv-tablebody.js.map

package/dist/collection/components/nv-tablebody/nv-tablebody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-tablebody.js","sourceRoot":"","sources":["../../../src/components/nv-tablebody/nv-tablebody.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,WAAW;IACtB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH;gBACE,8DAAa,CACP,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;CAIF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot default - Use this slot to insert HTML into the table body.\n */\n@Component({\n  tag: 'nv-tablebody',\n  styleUrl: 'nv-tablebody.scss',\n  shadow: false,\n})\nexport class NvTablebody {\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <tbody>\n          <slot></slot>\n        </tbody>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"]}

package/dist/collection/components/nv-tablecolumn/nv-tablecolumn.docs.js

@@ -0,0 +1,6 @@
+const NvTablecolumnDocs = {
+    component: 'nv-tablecolumn',
+    skip: true,
+};
+export default NvTablecolumnDocs;
+//# sourceMappingURL=nv-tablecolumn.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-tablecolumn.docs.js","sourceRoot":"","sources":["../../../src/components/nv-tablecolumn/nv-tablecolumn.docs.tsx"],"names":[],"mappings":"AAGA,MAAM,iBAAiB,GAAuC;IAC5D,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvTablecolumnDocs: NovaDocs<Components.NvTablecolumn> = {\n  component: 'nv-tablecolumn',\n  skip: true,\n};\n\nexport default NvTablecolumnDocs;\n"]}