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

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

@@ -1,59 +1,58 @@
 import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
 const NvTableDocs = {
     component: 'nv-table',
+    subcomponents: ['nv-tablecolumn', 'nv-iconbutton', 'nv-badge'],
+    composedComponents: ['nv-tablecolumn'],
     badge: 'beta',
-    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',
+            name: nameof(x => x.noColumnsNoDataMessage),
             args: {
                 noColumnsNoDataMessage: 'Nothing to display.',
             },
             template: h("nv-table", { "data-storybook-args": true }),
         },
         {
-            name: 'No Data Message',
+            name: nameof(x => x.noDataMessage),
             args: {
                 noDataMessage: 'No element available to display.',
-                columnsJson: `["Name", "Age", "Email"]`,
+                columnsConfigJson: `[
+              {"header":"Name","name":"name"},
+              {"header":"Age","name":"age"},
+              {"header":"Email","name":"email"}
+            ]`,
             },
             template: h("nv-table", { "data-storybook-args": true }),
         },
         {
-            name: 'Columns Array And Empty Data',
+            name: nameof(x => x.columnsConfig),
             args: {
-                columns: ['Name', 'Age', 'Email'],
+                columnsConfig: [
+                    { header: 'Name', name: 'name' },
+                    { header: 'Age', name: 'age' },
+                    { header: 'Email', name: 'email' },
+                ],
             },
             template: h("nv-table", { "data-storybook-args": true }),
         },
         {
-            name: 'Columns JSON And Empty Data',
+            name: nameof(x => x.columnsConfigJson),
             args: {
-                columnsJson: `["Name", "Age", "Email"]`,
+                columnsConfigJson: `[
+              {"header":"Name","name":"name"},
+              {"header":"Age","name":"age"},
+              {"header":"Email","name":"email"}
+            ]`,
             },
             template: h("nv-table", { "data-storybook-args": true }),
         },
         {
-            name: 'Data Array And Empty Columns',
+            name: nameof(x => x.data),
             args: {
                 data: [
                     { name: 'Alice', age: '25', email: 'alice@mail.com' },
@@ -63,19 +62,23 @@ const NvTableDocs = {
             template: h("nv-table", { "data-storybook-args": true }),
         },
         {
-            name: 'Data JSON And Empty Columns',
+            name: nameof(x => x.dataJson),
             args: {
                 dataJson: `[
-          { "name": "Alice", "age": "25", "email": "alice@mail.com" },
-          { "name": "Bob", "age": "30", "email": "bob@mail.com" }
-        ]`,
+              { "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',
+            name: 'ColumnsArrayAndDataArray',
             args: {
-                columns: ['Name', 'Age', 'Email'],
+                columnsConfig: [
+                    { header: 'Name', name: 'name' },
+                    { header: 'Age', name: 'age' },
+                    { header: 'Email', name: 'email' },
+                ],
                 data: [
                     { name: 'Alice', age: '25', email: 'alice@mail.com' },
                     { name: 'Bob', age: '30', email: 'bob@mail.com' },
@@ -84,9 +87,13 @@ const NvTableDocs = {
             template: h("nv-table", { "data-storybook-args": true }),
         },
         {
-            name: 'Columns JSON And Data JSON',
+            name: 'ColumnsJSONAndDataJSON',
             args: {
-                columnsJson: `["Name", "Age", "Email"]`,
+                columnsConfigJson: `[
+          {"header":"Name","name":"name"},
+          {"header":"Age","name":"age"},
+          {"header":"Email","name":"email"}
+        ]`,
                 dataJson: `[
           { "name": "Alice", "age": "25", "email": "alice@mail.com" },
           { "name": "Bob", "age": "30", "email": "bob@mail.com" }
@@ -95,55 +102,35 @@ const NvTableDocs = {
             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',
+            name: 'WithDataAndTemplate',
             args: {
                 dataJson: `[
-          { "name": "Alice", "age": "25", "email": "alice@mail.com" },
-          { "name": "Bob", "age": "30", "email": "bob@mail.com" }
+        {"id":1,"name":"John Doe","age":25,"email":"john.doe@mail.com"},
+        {"id":2,"name":"Jane Doe","age":30,"email":"jane.doe@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"))))),
+            template: (h("nv-table", { "data-storybook-args": true }, h("nv-tablecolumn", { name: "name", header: "Name" }, h("div", { slot: "header" }, h("strong", null, "Name")), h("div", { slot: "cell" }, h("strong", null, "__name__"))), h("nv-tablecolumn", { name: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-tablecolumn", { name: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-tablecolumn", { name: "actions" }, h("div", { slot: "header" }), h("div", { slot: "cell" }, h("nv-iconbutton", { size: "xs", name: "pencil", "data-bind-event": "click:edit:id" }), h("nv-iconbutton", { size: "xs", name: "trash", "data-bind-event": "click:delete:id" }), h("nv-iconbutton", { size: "xs", name: "mail", "data-bind-event": "click:sendEmail:id,email" }))))),
         },
         {
-            name: 'Data Decomposed And Columns JSON',
+            name: 'WithDataAndTemplateComplexData',
             args: {
-                columnsJson: `["Name", "Age", "Email"]`,
+                dataJson: `[
+        {"id":1,"name":"John Doe","age":25,"email":"john.doe@mail.com", "address": {"city": "New York", "country": "USA"}, "status": {"label": "success", "color": "1", "icon": "check"}},
+        {"id":2,"name":"Jane Doe","age":30,"email":"jane.doe@mail.com", "address": {"city": "Los Angeles", "country": "USA"}, "status": {"label": "warning", "color": "2", "icon": "alert-circle"}},
+        {"id":3,"name":"John Smith","age":35,"email":"john.smith@mail.com", "address": {"city": "London", "country": "UK"}, "status": {"label": "error", "color": "3", "icon": "loader"}},
+        {"id":4,"name":"Jane Smith","age":40,"email":"jane.smith@mail.com", "address": {"city": "Paris", "country": "France"}, "status": {"label": "info", "color": "5", "icon": "info-circle"}}
+        ]`,
             },
-            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"))))),
+            template: (h("nv-table", { "data-storybook-args": true }, h("nv-tablecolumn", { name: "name", header: "Name" }, h("div", { slot: "header" }, h("strong", null, "Name")), h("div", { slot: "cell" }, h("strong", null, "__name__"))), h("nv-tablecolumn", { name: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-tablecolumn", { name: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-tablecolumn", { name: "address", header: "Address" }, h("div", { slot: "cell" }, h("span", null, "__address.city__, __address.country__"))), h("nv-tablecolumn", { name: "status", header: "Status" }, h("div", { slot: "header" }, h("span", { class: "text-md font-bold text-low" }, "Status")), h("div", { slot: "cell" }, h("nv-badge", { color: "__status.color__", "lead-icon": "__status.icon__" }, "__status.label__"))), h("nv-tablecolumn", { name: "actions" }, h("div", { slot: "header" }), h("div", { slot: "cell" }, h("nv-iconbutton", { size: "xs", name: "pencil", "data-bind-event": "click:edit:id" }), h("nv-iconbutton", { size: "xs", name: "trash", "data-bind-event": "click:delete:id" }), h("nv-iconbutton", { size: "xs", name: "mail", "data-bind-event": "click:sendEmail:id,email" }))))),
         },
         {
-            name: 'Slot Before',
+            name: 'SlotBefore',
             args: {
-                columnsJson: `["Name", "Age", "Email"]`,
+                columnsConfigJson: `[
+          {"header":"Name","name":"name"},
+          {"header":"Age","name":"age"},
+          {"header":"Email","name":"email"}
+        ]`,
                 dataJson: `[
           { "name": "Alice", "age": "25", "email": "alice@mail.com" },
           { "name": "Bob", "age": "30", "email": "bob@mail.com" }
@@ -152,9 +139,13 @@ const NvTableDocs = {
             template: (h("nv-table", { "data-storybook-args": true }, h("div", { slot: "before" }, "Before"))),
         },
         {
-            name: 'Slot After',
+            name: 'SlotAfter',
             args: {
-                columnsJson: `["Name", "Age", "Email"]`,
+                columnsConfigJson: `[
+          {"header":"Name","name":"name"},
+          {"header":"Age","name":"age"},
+          {"header":"Email","name":"email"}
+        ]`,
                 dataJson: `[
           { "name": "Alice", "age": "25", "email": "alice@mail.com" },
           { "name": "Bob", "age": "30", "email": "bob@mail.com" }
@@ -163,9 +154,13 @@ const NvTableDocs = {
             template: (h("nv-table", { "data-storybook-args": true }, h("div", { slot: "after" }, "After"))),
         },
         {
-            name: 'Slot Before And After',
+            name: 'SlotBeforeAndAfter',
             args: {
-                columnsJson: `["Name", "Age", "Email"]`,
+                columnsConfigJson: `[
+          {"header":"Name","name":"name"},
+          {"header":"Age","name":"age"},
+          {"header":"Email","name":"email"}
+        ]`,
                 dataJson: `[
           { "name": "Alice", "age": "25", "email": "alice@mail.com" },
           { "name": "Bob", "age": "30", "email": "bob@mail.com" }

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

@@ -1 +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  badge: 'beta',\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"]}
+{"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';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvTableDocs: NovaDocs<Components.NvTable> = {\n  component: 'nv-table',\n  subcomponents: ['nv-tablecolumn', 'nv-iconbutton', 'nv-badge'],\n  composedComponents: ['nv-tablecolumn'],\n  badge: 'beta',\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: nameof<Components.NvTable>(x => x.noColumnsNoDataMessage),\n      args: {\n        noColumnsNoDataMessage: 'Nothing to display.',\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: nameof<Components.NvTable>(x => x.noDataMessage),\n      args: {\n        noDataMessage: 'No element available to display.',\n        columnsConfigJson: `[\n              {\"header\":\"Name\",\"name\":\"name\"},\n              {\"header\":\"Age\",\"name\":\"age\"},\n              {\"header\":\"Email\",\"name\":\"email\"}\n            ]`,\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: nameof<Components.NvTable>(x => x.columnsConfig),\n      args: {\n        columnsConfig: [\n          { header: 'Name', name: 'name' },\n          { header: 'Age', name: 'age' },\n          { header: 'Email', name: 'email' },\n        ],\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: nameof<Components.NvTable>(x => x.columnsConfigJson),\n      args: {\n        columnsConfigJson: `[\n              {\"header\":\"Name\",\"name\":\"name\"},\n              {\"header\":\"Age\",\"name\":\"age\"},\n              {\"header\":\"Email\",\"name\":\"email\"}\n            ]`,\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: nameof<Components.NvTable>(x => x.data),\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: nameof<Components.NvTable>(x => x.dataJson),\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: 'ColumnsArrayAndDataArray',\n      args: {\n        columnsConfig: [\n          { header: 'Name', name: 'name' },\n          { header: 'Age', name: 'age' },\n          { header: 'Email', name: 'email' },\n        ],\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: 'ColumnsJSONAndDataJSON',\n      args: {\n        columnsConfigJson: `[\n          {\"header\":\"Name\",\"name\":\"name\"},\n          {\"header\":\"Age\",\"name\":\"age\"},\n          {\"header\":\"Email\",\"name\":\"email\"}\n        ]`,\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: 'WithDataAndTemplate',\n      args: {\n        dataJson: `[\n        {\"id\":1,\"name\":\"John Doe\",\"age\":25,\"email\":\"john.doe@mail.com\"},\n        {\"id\":2,\"name\":\"Jane Doe\",\"age\":30,\"email\":\"jane.doe@mail.com\"}\n        ]`,\n      },\n      template: (\n        <nv-table data-storybook-args>\n          <nv-tablecolumn name=\"name\" header=\"Name\">\n            <div slot=\"header\">\n              <strong>Name</strong>\n            </div>\n            <div slot=\"cell\">\n              <strong>__name__</strong>\n            </div>\n          </nv-tablecolumn>\n\n          <nv-tablecolumn name=\"age\" header=\"Age\">\n            <div slot=\"header\">\n              <em>Age</em>\n            </div>\n            <div slot=\"cell\">\n              <span>__age__ years old</span>\n            </div>\n          </nv-tablecolumn>\n\n          <nv-tablecolumn name=\"email\" header=\"Mail Address\">\n            <div slot=\"cell\">\n              <a href=\"mailto:__email__\">__email__</a>\n            </div>\n          </nv-tablecolumn>\n\n          <nv-tablecolumn name=\"actions\">\n            <div slot=\"header\"></div>\n            <div slot=\"cell\">\n              <nv-iconbutton\n                size=\"xs\"\n                name=\"pencil\"\n                data-bind-event=\"click:edit:id\"\n              ></nv-iconbutton>\n              <nv-iconbutton\n                size=\"xs\"\n                name=\"trash\"\n                data-bind-event=\"click:delete:id\"\n              ></nv-iconbutton>\n              <nv-iconbutton\n                size=\"xs\"\n                name=\"mail\"\n                data-bind-event=\"click:sendEmail:id,email\"\n              ></nv-iconbutton>\n            </div>\n          </nv-tablecolumn>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'WithDataAndTemplateComplexData',\n      args: {\n        dataJson: `[\n        {\"id\":1,\"name\":\"John Doe\",\"age\":25,\"email\":\"john.doe@mail.com\", \"address\": {\"city\": \"New York\", \"country\": \"USA\"}, \"status\": {\"label\": \"success\", \"color\": \"1\", \"icon\": \"check\"}},\n        {\"id\":2,\"name\":\"Jane Doe\",\"age\":30,\"email\":\"jane.doe@mail.com\", \"address\": {\"city\": \"Los Angeles\", \"country\": \"USA\"}, \"status\": {\"label\": \"warning\", \"color\": \"2\", \"icon\": \"alert-circle\"}},\n        {\"id\":3,\"name\":\"John Smith\",\"age\":35,\"email\":\"john.smith@mail.com\", \"address\": {\"city\": \"London\", \"country\": \"UK\"}, \"status\": {\"label\": \"error\", \"color\": \"3\", \"icon\": \"loader\"}},\n        {\"id\":4,\"name\":\"Jane Smith\",\"age\":40,\"email\":\"jane.smith@mail.com\", \"address\": {\"city\": \"Paris\", \"country\": \"France\"}, \"status\": {\"label\": \"info\", \"color\": \"5\", \"icon\": \"info-circle\"}}\n        ]`,\n      },\n      template: (\n        <nv-table data-storybook-args>\n          <nv-tablecolumn name=\"name\" header=\"Name\">\n            <div slot=\"header\">\n              <strong>Name</strong>\n            </div>\n            <div slot=\"cell\">\n              <strong>__name__</strong>\n            </div>\n          </nv-tablecolumn>\n\n          <nv-tablecolumn name=\"age\" header=\"Age\">\n            <div slot=\"header\">\n              <em>Age</em>\n            </div>\n            <div slot=\"cell\">\n              <span>__age__ years old</span>\n            </div>\n          </nv-tablecolumn>\n\n          <nv-tablecolumn name=\"email\" header=\"Mail Address\">\n            <div slot=\"cell\">\n              <a href=\"mailto:__email__\">__email__</a>\n            </div>\n          </nv-tablecolumn>\n\n          <nv-tablecolumn name=\"address\" header=\"Address\">\n            <div slot=\"cell\">\n              <span>__address.city__, __address.country__</span>\n            </div>\n          </nv-tablecolumn>\n\n          <nv-tablecolumn name=\"status\" header=\"Status\">\n            <div slot=\"header\">\n              <span class=\"text-md font-bold text-low\">Status</span>\n            </div>\n            <div slot=\"cell\">\n              <nv-badge color=\"__status.color__\" lead-icon=\"__status.icon__\">\n                __status.label__\n              </nv-badge>\n            </div>\n          </nv-tablecolumn>\n\n          <nv-tablecolumn name=\"actions\">\n            <div slot=\"header\"></div>\n            <div slot=\"cell\">\n              <nv-iconbutton\n                size=\"xs\"\n                name=\"pencil\"\n                data-bind-event=\"click:edit:id\"\n              ></nv-iconbutton>\n              <nv-iconbutton\n                size=\"xs\"\n                name=\"trash\"\n                data-bind-event=\"click:delete:id\"\n              ></nv-iconbutton>\n              <nv-iconbutton\n                size=\"xs\"\n                name=\"mail\"\n                data-bind-event=\"click:sendEmail:id,email\"\n              ></nv-iconbutton>\n            </div>\n          </nv-tablecolumn>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'SlotBefore',\n      args: {\n        columnsConfigJson: `[\n          {\"header\":\"Name\",\"name\":\"name\"},\n          {\"header\":\"Age\",\"name\":\"age\"},\n          {\"header\":\"Email\",\"name\":\"email\"}\n        ]`,\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: 'SlotAfter',\n      args: {\n        columnsConfigJson: `[\n          {\"header\":\"Name\",\"name\":\"name\"},\n          {\"header\":\"Age\",\"name\":\"age\"},\n          {\"header\":\"Email\",\"name\":\"email\"}\n        ]`,\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: 'SlotBeforeAndAfter',\n      args: {\n        columnsConfigJson: `[\n          {\"header\":\"Name\",\"name\":\"name\"},\n          {\"header\":\"Age\",\"name\":\"age\"},\n          {\"header\":\"Email\",\"name\":\"email\"}\n        ]`,\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"]}