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

package/dist/collection/components/nv-split/styles/nv-split.css

@@ -0,0 +1,96 @@
+nv-split {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+nv-split[direction=horizontal] {
+  flex-direction: row;
+}
+nv-split[direction=vertical] {
+  flex-direction: column;
+}
+nv-split .nv-split-gutter {
+  position: absolute;
+  z-index: 10;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  transition: background-color 0.2s ease;
+}
+nv-split .nv-split-gutter::after {
+  content: "";
+  position: absolute;
+  background: var(--nv-color-neutral-400, #ccc);
+  border-radius: 2px;
+  transition: background-color 0.2s ease;
+}
+nv-split .nv-split-gutter:hover::after {
+  background: var(--nv-color-brand-primary, #0066cc);
+}
+nv-split .nv-split-gutter::before {
+  content: "";
+  position: absolute;
+  background-repeat: no-repeat;
+  background-position: center;
+  opacity: 0.4;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+}
+nv-split .nv-split-gutter:hover::before {
+  opacity: 0.7;
+}
+nv-split[direction=horizontal] > .nv-split-gutter {
+  width: var(--nv-split-gutter-size, 24px);
+  top: 0;
+  bottom: 0;
+  transform: translateX(-50%);
+  cursor: col-resize;
+}
+nv-split[direction=horizontal] > .nv-split-gutter::after {
+  width: 2px;
+  height: 60%;
+  left: 50%;
+  top: 20%;
+  transform: translateX(-50%);
+}
+nv-split[direction=horizontal] > .nv-split-gutter::before {
+  width: 16px;
+  height: 16px;
+}
+nv-split[direction=vertical] > .nv-split-gutter {
+  height: var(--nv-split-gutter-size, 24px);
+  left: 0;
+  right: 0;
+  transform: translateY(-50%);
+  cursor: row-resize;
+}
+nv-split[direction=vertical] > .nv-split-gutter::after {
+  height: 2px;
+  width: 60%;
+  top: 50%;
+  left: 20%;
+  transform: translateY(-50%);
+}
+nv-split[direction=vertical] > .nv-split-gutter::before {
+  width: 16px;
+  height: 16px;
+}
+nv-split[data-dragging=true] > .nv-split-gutter::after {
+  background: var(--nv-color-neutral-500, #9ca3af);
+}
+nv-split > [slot=pane] {
+  flex: 1 1 auto;
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+nv-split > [slot=pane] > nv-split {
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+}

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

@@ -18,7 +18,7 @@ export class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '8f771805224c769b5a87f5c550ddbcb8f888d002', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: '6fcd46cfd74415d2f07c762b065e3aa0f0194764' })));
+        return (h(Host, { key: '5922efd8652a14d73e812e85dd6770101e22fe46', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: '71daf4ee34bd57d785203f98799b6ea7c66ffa3b' })));
     }
     static get is() { return "nv-stack"; }
     static get originalStyleUrls() {

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

@@ -1,172 +1,33 @@
 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',
     stories: [
         {
             name: 'Default',
-            template: h("nv-table", { "data-storybook-args": true }),
+            description: 'The NvTable behaves just like a native HTML table element, but is enhanced with Nova styles and additional functionality. Use standard table elements (thead, tbody, tfoot, tr, th, td) as children.',
+            template: (h("nv-table", { "data-storybook-args": true }, h("table", null, h("thead", null, h("tr", null, h("th", null, "Name"), h("th", null, "Age"), h("th", null, "Email"))), h("tbody", null, h("tr", null, h("td", null, "Alice Johnson"), h("td", null, "25"), h("td", null, "alice.johnson@example.com")), h("tr", null, h("td", null, "Bob Smith"), h("td", null, "30"), h("td", null, "bob.smith@example.com")), h("tr", null, h("td", null, "Charlie Brown"), h("td", null, "35"), h("td", null, "charlie.brown@example.com")))))),
         },
         {
-            name: nameof(x => x.noColumnsNoDataMessage),
-            args: {
-                noColumnsNoDataMessage: 'Nothing to display.',
-            },
-            template: h("nv-table", { "data-storybook-args": true }),
+            name: 'ColumnResizingWidthClasses',
+            description: 'Columns can be resized by default. Use width classes (like w-10) to set initial column widths. Use data-no-resize attribute to prevent specific columns from being resized. Columns without fixed widths will grow to fill available space.',
+            template: (h("nv-table", { "data-storybook-args": true }, h("table", null, h("thead", null, h("tr", null, h("th", { "data-class": "w-10" }, "Name"), h("th", { "data-class": "w-10" }, "Age"), h("th", { "data-no-resize": true }, "Email (grows to fill space)"), h("th", { "data-class": "w-10", "data-no-resize": true }, "Actions"))), h("tbody", null, h("tr", null, h("td", null, "Alice Johnson"), h("td", null, "25"), h("td", null, "alice.johnson@company.example.com"), h("td", null, "Edit")), h("tr", null, h("td", null, "Bob Smith"), h("td", null, "30"), h("td", null, "bob.smith@company.example.com"), h("td", null, "Edit")), h("tr", null, h("td", null, "Charlie Brown"), h("td", null, "35"), h("td", null, "charlie.brown@company.example.com"), h("td", null, "Edit")))))),
         },
         {
-            name: nameof(x => x.noDataMessage),
-            args: {
-                noDataMessage: 'No element available to display.',
-                columnsConfigJson: `[
-              {"header":"Name","name":"name"},
-              {"header":"Age","name":"age"},
-              {"header":"Email","name":"email"}
-            ]`,
-            },
-            template: h("nv-table", { "data-storybook-args": true }),
+            name: 'RowSelection',
+            description: 'Use the data-selected attribute on table rows to apply selection styling and indicate the currently selected row.',
+            template: (h("nv-table", { "data-storybook-args": true }, h("table", null, h("thead", null, h("tr", null, h("th", null, "Name"), h("th", null, "Department"), h("th", null, "Status"))), h("tbody", null, h("tr", null, h("td", null, "Alice Johnson"), h("td", null, "Engineering"), h("td", null, "Active")), h("tr", { "data-selected": true }, h("td", null, "Bob Smith"), h("td", null, "Design"), h("td", null, "Active")), h("tr", null, h("td", null, "Charlie Brown"), h("td", null, "Product"), h("td", null, "Inactive")))))),
         },
         {
-            name: nameof(x => x.columnsConfig),
-            args: {
-                columnsConfig: [
-                    { header: 'Name', name: 'name' },
-                    { header: 'Age', name: 'age' },
-                    { header: 'Email', name: 'email' },
-                ],
-            },
-            template: h("nv-table", { "data-storybook-args": true }),
+            name: 'StickyHeader',
+            description: 'Use data-sticky-top on thead elements to make the header stick to the top during vertical scrolling. This is useful for long tables where you want to keep column headers visible.',
+            template: (h("div", { "data-class": "h-40 overflow-y-auto" }, h("nv-table", { "data-storybook-args": true }, h("table", null, h("thead", { "data-sticky-top": true }, h("tr", null, h("th", null, "Name"), h("th", null, "Position"), h("th", null, "Department"))), h("tbody", null, Array(10)
+                .fill(0)
+                .map((_, index) => (h("tr", { key: index }, h("td", null, "Employee ", index + 1), h("td", null, "Developer"), h("td", null, "Engineering"))))))))),
         },
         {
-            name: nameof(x => x.columnsConfigJson),
-            args: {
-                columnsConfigJson: `[
-              {"header":"Name","name":"name"},
-              {"header":"Age","name":"age"},
-              {"header":"Email","name":"email"}
-            ]`,
-            },
-            template: h("nv-table", { "data-storybook-args": true }),
-        },
-        {
-            name: nameof(x => x.data),
-            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: nameof(x => x.dataJson),
-            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: 'ColumnsArrayAndDataArray',
-            args: {
-                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' },
-                ],
-            },
-            template: h("nv-table", { "data-storybook-args": true }),
-        },
-        {
-            name: 'ColumnsJSONAndDataJSON',
-            args: {
-                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" }
-        ]`,
-            },
-            template: h("nv-table", { "data-storybook-args": true }),
-        },
-        {
-            name: 'WithDataAndTemplate',
-            args: {
-                dataJson: `[
-        {"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-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: 'WithDataAndTemplateComplexData',
-            args: {
-                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-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: 'SlotBefore',
-            args: {
-                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" }
-        ]`,
-            },
-            template: (h("nv-table", { "data-storybook-args": true }, h("div", { slot: "before" }, "Before"))),
-        },
-        {
-            name: 'SlotAfter',
-            args: {
-                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" }
-        ]`,
-            },
-            template: (h("nv-table", { "data-storybook-args": true }, h("div", { slot: "after" }, "After"))),
-        },
-        {
-            name: 'SlotBeforeAndAfter',
-            args: {
-                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" }
-        ]`,
-            },
-            template: (h("nv-table", { "data-storybook-args": true }, h("div", { slot: "before" }, "Before"), h("div", { slot: "after" }, "After"))),
+            name: 'StickyColumnsHorizontalScroll',
+            description: 'Use data-sticky-left and data-sticky-right on th/td elements to make columns stick during horizontal scrolling. Apply the same attribute to both header and data cells. Requires an overflow-x-auto container.',
+            template: (h("div", { "data-class": "overflow-x-auto" }, h("nv-table", { "data-storybook-args": true }, h("table", null, h("thead", null, h("tr", null, h("th", { "data-sticky-left": true }, "Name"), h("th", null, "Position"), h("th", null, "Department"), h("th", null, "Email"), h("th", null, "Phone"), h("th", null, "Address"), h("th", null, "Start Date"), h("th", null, "Salary"), h("th", null, "Manager"), h("th", null, "Skills"), h("th", null, "Notes"), h("th", null, "Website"), h("th", { "data-sticky-right": true }, "Actions"))), h("tbody", null, h("tr", null, h("td", { "data-sticky-left": true }, "John Doe"), h("td", null, "Senior Developer"), h("td", null, "Engineering"), h("td", null, "john.doe@company.com"), h("td", null, "+1-555-0123"), h("td", null, "123 Main St, NY 10001"), h("td", null, "2022-03-10"), h("td", null, "$95,000"), h("td", null, "Sarah Wilson"), h("td", null, "React, TypeScript, Node.js"), h("td", null, "Team lead with React expertise"), h("td", null, "johndoe.dev"), h("td", { "data-sticky-right": true }, "Edit | Delete")), h("tr", null, h("td", { "data-sticky-left": true }, "Jane Smith"), h("td", null, "UX Designer"), h("td", null, "Design"), h("td", null, "jane.smith@company.com"), h("td", null, "+1-555-0456"), h("td", null, "456 Oak Ave, LA 90210"), h("td", null, "2021-09-15"), h("td", null, "$87,000"), h("td", null, "Tom Anderson"), h("td", null, "Figma, Adobe CC, User Research"), h("td", null, "Creative designer with 8 years experience"), h("td", null, "janesmith.design"), h("td", { "data-sticky-right": true }, "Edit | Delete")), h("tr", null, h("td", { "data-sticky-left": true }, "Mike Johnson"), h("td", null, "Product Manager"), h("td", null, "Product"), h("td", null, "mike.johnson@company.com"), h("td", null, "+1-555-0789"), h("td", null, "789 Pine St, Chicago 60601"), h("td", null, "2020-01-08"), h("td", null, "$110,000"), h("td", null, "Lisa Chen"), h("td", null, "Agile, Scrum, Product Strategy"), h("td", null, "Experienced project manager and strategist"), h("td", null, "mikejohnson.biz"), h("td", { "data-sticky-right": true }, "Edit | Delete"))))))),
         },
     ],
 };

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';\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"]}
+{"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  stories: [\n    {\n      name: 'Default',\n      description:\n        'The NvTable behaves just like a native HTML table element, but is enhanced with Nova styles and additional functionality. Use standard table elements (thead, tbody, tfoot, tr, th, td) as children.',\n      template: (\n        <nv-table data-storybook-args>\n          <table>\n            <thead>\n              <tr>\n                <th>Name</th>\n                <th>Age</th>\n                <th>Email</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr>\n                <td>Alice Johnson</td>\n                <td>25</td>\n                <td>alice.johnson@example.com</td>\n              </tr>\n              <tr>\n                <td>Bob Smith</td>\n                <td>30</td>\n                <td>bob.smith@example.com</td>\n              </tr>\n              <tr>\n                <td>Charlie Brown</td>\n                <td>35</td>\n                <td>charlie.brown@example.com</td>\n              </tr>\n            </tbody>\n          </table>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'ColumnResizingWidthClasses',\n      description:\n        'Columns can be resized by default. Use width classes (like w-10) to set initial column widths. Use data-no-resize attribute to prevent specific columns from being resized. Columns without fixed widths will grow to fill available space.',\n      template: (\n        <nv-table data-storybook-args>\n          <table>\n            <thead>\n              <tr>\n                <th data-class=\"w-10\">Name</th>\n                <th data-class=\"w-10\">Age</th>\n                <th data-no-resize>Email (grows to fill space)</th>\n                <th data-class=\"w-10\" data-no-resize>\n                  Actions\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr>\n                <td>Alice Johnson</td>\n                <td>25</td>\n                <td>alice.johnson@company.example.com</td>\n                <td>Edit</td>\n              </tr>\n              <tr>\n                <td>Bob Smith</td>\n                <td>30</td>\n                <td>bob.smith@company.example.com</td>\n                <td>Edit</td>\n              </tr>\n              <tr>\n                <td>Charlie Brown</td>\n                <td>35</td>\n                <td>charlie.brown@company.example.com</td>\n                <td>Edit</td>\n              </tr>\n            </tbody>\n          </table>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'RowSelection',\n      description:\n        'Use the data-selected attribute on table rows to apply selection styling and indicate the currently selected row.',\n      template: (\n        <nv-table data-storybook-args>\n          <table>\n            <thead>\n              <tr>\n                <th>Name</th>\n                <th>Department</th>\n                <th>Status</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr>\n                <td>Alice Johnson</td>\n                <td>Engineering</td>\n                <td>Active</td>\n              </tr>\n              <tr data-selected>\n                <td>Bob Smith</td>\n                <td>Design</td>\n                <td>Active</td>\n              </tr>\n              <tr>\n                <td>Charlie Brown</td>\n                <td>Product</td>\n                <td>Inactive</td>\n              </tr>\n            </tbody>\n          </table>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'StickyHeader',\n      description:\n        'Use data-sticky-top on thead elements to make the header stick to the top during vertical scrolling. This is useful for long tables where you want to keep column headers visible.',\n      template: (\n        <div data-class=\"h-40 overflow-y-auto\">\n          <nv-table data-storybook-args>\n            <table>\n              <thead data-sticky-top>\n                <tr>\n                  <th>Name</th>\n                  <th>Position</th>\n                  <th>Department</th>\n                </tr>\n              </thead>\n              <tbody>\n                {Array(10)\n                  .fill(0)\n                  .map((_, index) => (\n                    <tr key={index}>\n                      <td>Employee {index + 1}</td>\n                      <td>Developer</td>\n                      <td>Engineering</td>\n                    </tr>\n                  ))}\n              </tbody>\n            </table>\n          </nv-table>\n        </div>\n      ),\n    },\n    {\n      name: 'StickyColumnsHorizontalScroll',\n      description:\n        'Use data-sticky-left and data-sticky-right on th/td elements to make columns stick during horizontal scrolling. Apply the same attribute to both header and data cells. Requires an overflow-x-auto container.',\n      template: (\n        <div data-class=\"overflow-x-auto\">\n          <nv-table data-storybook-args>\n            <table>\n              <thead>\n                <tr>\n                  <th data-sticky-left>Name</th>\n                  <th>Position</th>\n                  <th>Department</th>\n                  <th>Email</th>\n                  <th>Phone</th>\n                  <th>Address</th>\n                  <th>Start Date</th>\n                  <th>Salary</th>\n                  <th>Manager</th>\n                  <th>Skills</th>\n                  <th>Notes</th>\n                  <th>Website</th>\n                  <th data-sticky-right>Actions</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr>\n                  <td data-sticky-left>John Doe</td>\n                  <td>Senior Developer</td>\n                  <td>Engineering</td>\n                  <td>john.doe@company.com</td>\n                  <td>+1-555-0123</td>\n                  <td>123 Main St, NY 10001</td>\n                  <td>2022-03-10</td>\n                  <td>$95,000</td>\n                  <td>Sarah Wilson</td>\n                  <td>React, TypeScript, Node.js</td>\n                  <td>Team lead with React expertise</td>\n                  <td>johndoe.dev</td>\n                  <td data-sticky-right>Edit | Delete</td>\n                </tr>\n                <tr>\n                  <td data-sticky-left>Jane Smith</td>\n                  <td>UX Designer</td>\n                  <td>Design</td>\n                  <td>jane.smith@company.com</td>\n                  <td>+1-555-0456</td>\n                  <td>456 Oak Ave, LA 90210</td>\n                  <td>2021-09-15</td>\n                  <td>$87,000</td>\n                  <td>Tom Anderson</td>\n                  <td>Figma, Adobe CC, User Research</td>\n                  <td>Creative designer with 8 years experience</td>\n                  <td>janesmith.design</td>\n                  <td data-sticky-right>Edit | Delete</td>\n                </tr>\n                <tr>\n                  <td data-sticky-left>Mike Johnson</td>\n                  <td>Product Manager</td>\n                  <td>Product</td>\n                  <td>mike.johnson@company.com</td>\n                  <td>+1-555-0789</td>\n                  <td>789 Pine St, Chicago 60601</td>\n                  <td>2020-01-08</td>\n                  <td>$110,000</td>\n                  <td>Lisa Chen</td>\n                  <td>Agile, Scrum, Product Strategy</td>\n                  <td>Experienced project manager and strategist</td>\n                  <td>mikejohnson.biz</td>\n                  <td data-sticky-right>Edit | Delete</td>\n                </tr>\n              </tbody>\n            </table>\n          </nv-table>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvTableDocs;\n"]}