@nova-design-system/nova-webcomponents 3.27.0 → 3.29.0

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvButtonDocs = {
     component: 'nv-button',
+    parentGroup: 'Button',
     subcomponents: ['nv-icon'],
     stories: [
         // Default

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvButtongroupDocs = {
     component: 'nv-buttongroup',
+    parentGroup: 'Button',
     subcomponents: ['nv-button', 'nv-iconbutton', 'nv-menu', 'nv-menuitem'],
     badge: 'new',
     stories: [

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

@@ -120,6 +120,7 @@ const rangeStories = formats.map(format => ({
 }));
 const NvCalendarDocs = {
     component: 'nv-calendar',
+    parentGroup: 'Calendar',
     badge: 'beta',
     subcomponents: ['nv-button', 'nv-fieldtime'],
     stories: [

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

@@ -2,7 +2,9 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvColDocs = {
     component: 'nv-col',
+    parentGroup: 'Grid/Row',
     subcomponents: ['nv-row'],
+    badge: 'deprecated',
     stories: [
         // Default
         {

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

@@ -2,6 +2,7 @@ import { Host, h } from "@stencil/core";
 import clsx from "clsx";
 /**
  * @slot default - The column content.
+ * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities.
  */
 export class NvCol {
     //#endregion PROPERTIES
@@ -22,7 +23,7 @@ export class NvCol {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '4fe90a1d020de9e85d32a52ccb39c8b6d8c1fc25', class: clsx(this.getColSize()) }, h("slot", { key: '5a6ad624fd7c6251b2f555c0e3bc828c0e048761' })));
+        return (h(Host, { key: '8170490b65da46794b207e150175c0627ab57b94', class: clsx(this.getColSize()) }, h("slot", { key: '7c4cdb29efdd597af059f7942a6baf89d7d53b34' })));
     }
     static get is() { return "nv-col"; }
     static get originalStyleUrls() {

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

@@ -3,6 +3,7 @@ import { nameof } from "../../utils/class.utils";
 const NvDatagridDocs = {
     component: 'nv-datagrid',
     badge: 'deprecated',
+    parentGroup: 'Table/nv-datagrid',
     subcomponents: ['nv-datagridcolumn', 'nv-iconbutton', 'nv-badge'],
     composedComponents: ['nv-datagridcolumn'],
     stories: [
@@ -782,7 +783,7 @@ const NvDatagridDocs = {
                     },
                 ],
             },
-            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "name", header: "Name" }, h("div", { slot: "header" }, h("strong", null, "Name")), h("div", { slot: "cell" }, h("strong", null, "__name__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "address", header: "Address" }, h("div", { slot: "cell" }, h("span", null, "__address.city__, __address.country__"))), h("nv-datagridcolumn", { accessor: "status", header: "Status" }, h("div", { slot: "header" }, h("span", { "data-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-datagridcolumn", { accessor: "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" }))))),
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "name", header: "Name" }, h("div", { slot: "header" }, h("strong", null, "Name")), h("div", { slot: "cell" }, h("strong", null, "__name__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "address", header: "Address" }, h("div", { slot: "cell" }, h("span", null, "__address.city__, __address.country__"))), h("nv-datagridcolumn", { accessor: "status", header: "Status" }, h("div", { slot: "header" }, h("span", { "data-class": "text-md font-bold text-low" }, "Status")), h("div", { slot: "cell" }, h("nv-badge", { color: "__status.color__" }, "__status.label__"))), h("nv-datagridcolumn", { accessor: "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" }))))),
         },
         // WithDataAndTemplateComplexDataAndColumnGroup
         {
@@ -827,7 +828,7 @@ const NvDatagridDocs = {
                     },
                 ],
             },
-            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "firstName", header: "FirstName", group: "Name" }, h("div", { slot: "header" }, h("strong", null, "FirstName")), h("div", { slot: "cell" }, h("strong", null, "__firstName__"))), h("nv-datagridcolumn", { accessor: "lastName", header: "LastName", group: "Name" }, h("div", { slot: "header" }, h("strong", null, "LastName")), h("div", { slot: "cell" }, h("strong", null, "__lastName__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address", group: "Contact" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "address", header: "Address", group: "Contact" }, h("div", { slot: "cell" }, h("span", null, "__address.city__, __address.country__"))), h("nv-datagridcolumn", { accessor: "status", header: "Status" }, h("div", { slot: "header" }, h("span", { "data-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-datagridcolumn", { accessor: "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" }))))),
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "firstName", header: "FirstName", group: "Name" }, h("div", { slot: "header" }, h("strong", null, "FirstName")), h("div", { slot: "cell" }, h("strong", null, "__firstName__"))), h("nv-datagridcolumn", { accessor: "lastName", header: "LastName", group: "Name" }, h("div", { slot: "header" }, h("strong", null, "LastName")), h("div", { slot: "cell" }, h("strong", null, "__lastName__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address", group: "Contact" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "address", header: "Address", group: "Contact" }, h("div", { slot: "cell" }, h("span", null, "__address.city__, __address.country__"))), h("nv-datagridcolumn", { accessor: "status", header: "Status" }, h("div", { slot: "header" }, h("span", { "data-class": "text-md font-bold text-low" }, "Status")), h("div", { slot: "cell" }, h("nv-badge", { color: "__status.color__" }, "__status.label__"))), h("nv-datagridcolumn", { accessor: "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" }))))),
         },
         // WithDataAndTemplateAndMultipleElements
         {

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

@@ -1,5 +1,29 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
 const NvDatagridcolumnDocs = {
     component: 'nv-datagridcolumn',
-    skip: true,
+    badge: 'deprecated',
+    parentGroup: 'Table/nv-datagrid',
+    subcomponents: ['nv-datagrid'],
+    stories: [
+        // Default
+        {
+            name: 'Default',
+            description: 'Basic column definition for nv-datagrid (deprecated - use nv-datatable instead)',
+            template: (h("nv-datagrid", null, h("nv-datagridcolumn", { "data-storybook-args": true, accessor: "name", header: "Name" }, h("div", { slot: "cell" }, "Sample Name")), h("nv-datagridcolumn", { accessor: "email", header: "Email" }, h("div", { slot: "cell" }, "email@example.com")))),
+        },
+        // accessor
+        {
+            name: nameof(x => x.accessor),
+            description: 'The data accessor this column uses',
+            template: (h("nv-datagrid", null, h("nv-datagridcolumn", { accessor: "name", header: "Product" }, h("div", { slot: "cell" }, "Product Name")), h("nv-datagridcolumn", { "data-storybook-args": true, accessor: "price", header: "Price" }, h("div", { slot: "cell" }, "$99.99")))),
+        },
+        // header
+        {
+            name: nameof(x => x.header),
+            description: 'Column header text',
+            template: (h("nv-datagrid", null, h("nv-datagridcolumn", { accessor: "firstName", header: "First Name" }, h("div", { slot: "cell" }, "John")), h("nv-datagridcolumn", { "data-storybook-args": true, accessor: "lastName", header: "Last Name" }, h("div", { slot: "cell" }, "Doe")))),
+        },
+    ],
 };
 export default NvDatagridcolumnDocs;

package/dist/collection/components/nv-datetest/nv-datetest.css

@@ -0,0 +1,15 @@
+nv-datetest {
+  display: flex;
+}
+nv-datetest label {
+  display: flex;
+  flex-direction: column;
+  margin-right: 10px;
+  font-weight: bold;
+}
+nv-datetest input {
+  font-weight: normal;
+  padding: var(--spacing-2);
+  border-radius: var(--spacing-1);
+  border: 1px solid #ccc;
+}

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

@@ -0,0 +1,12 @@
+import { h } from "@stencil/core";
+const NvDatetestDocs = {
+    component: 'nv-datetest',
+    badge: 'beta',
+    stories: [
+        {
+            name: 'Default',
+            template: h("nv-datetest", { "data-storybook-args": true }, "Child Content"),
+        },
+    ],
+};
+export default NvDatetestDocs;

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

@@ -0,0 +1,242 @@
+/* eslint-disable jsdoc/require-jsdoc */
+import { Host, h } from "@stencil/core";
+import { parseDateOnly, formatDateOnly } from "../../utils/nova-datetime";
+/**
+ * This is a test component for the new DateOnly type
+ * @slot default - Child content of the component.
+ *
+ * @deprecated [EXPERIMENTAL]
+ * @experimental This component is still in development and subject to change in future releases.
+ */
+export class NvDatetest {
+    constructor() {
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region METHODS
+        this.handleStartChange = (event) => {
+            const input = event.target;
+            const parsed = parseDateOnly(input.value);
+            if (!parsed)
+                return;
+            const newStart = formatDateOnly(parsed);
+            this.value = { start: newStart, end: this.value?.end };
+            this.lastChange = newStart;
+            this.history = [...(this.history ?? []), newStart];
+            this.valueChanged.emit(this.value);
+            this.lastChanged.emit({ date: this.lastChange });
+            this.historyChanged.emit({ dates: this.history });
+            this.valueDateChanged.emit({
+                start: this.value?.start
+                    ? new Date(this.value.start + 'T00:00:00')
+                    : undefined,
+                end: this.value?.end ? new Date(this.value.end + 'T00:00:00') : undefined,
+            });
+        };
+        this.handleEndChange = (event) => {
+            const input = event.target;
+            const parsed = parseDateOnly(input.value);
+            if (!parsed)
+                return;
+            const newEnd = formatDateOnly(parsed);
+            this.value = { start: this.value?.start, end: newEnd };
+            this.lastChange = newEnd;
+            this.history = [...(this.history ?? []), newEnd];
+            this.valueChanged.emit(this.value);
+            this.lastChanged.emit({ date: this.lastChange });
+            this.historyChanged.emit({ dates: this.history });
+            this.valueDateChanged.emit({
+                start: this.value?.start
+                    ? new Date(this.value.start + 'T00:00:00')
+                    : undefined,
+                end: this.value?.end ? new Date(this.value.end + 'T00:00:00') : undefined,
+            });
+        };
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '44e383a31e357a45c8ebe011c4ec14641ce43d74' }, h("label", { key: '9be748d4fcbe74b81a7aa03f2a14c806c472f118' }, "Start:", h("input", { key: '262ffa195b8dc8ecaaea00d12b6debe48b375cd1', type: "date", value: this.value?.start ?? '', onInput: this.handleStartChange })), h("label", { key: 'd8934398264595a08eb75f241fd2c5bc50e9f0d2' }, "End:", h("input", { key: '3fdb5b2e410706c6cfedf5244e674fd1dab361a9', type: "date", value: this.value?.end ?? '', onInput: this.handleEndChange })), h("slot", { key: 'bb828cffcff4e2c69a48a314636470644c55d2cc' })));
+    }
+    static get is() { return "nv-datetest"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-datetest.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-datetest.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "{ start?: DateOnly; end?: DateOnly }",
+                    "resolved": "{ start?: `${number}-${number}-${number}`; end?: `${number}-${number}-${number}`; }",
+                    "references": {
+                        "DateOnly": {
+                            "location": "import",
+                            "path": "../../interfaces/dates",
+                            "id": "src/interfaces/dates.ts::DateOnly",
+                            "referenceLocation": "DateOnly"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The date range value with start and end dates."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "history": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "DateOnly[]",
+                    "resolved": "`${number}-${number}-${number}`[]",
+                    "references": {
+                        "DateOnly": {
+                            "location": "import",
+                            "path": "../../interfaces/dates",
+                            "id": "src/interfaces/dates.ts::DateOnly",
+                            "referenceLocation": "DateOnly"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of historical date changes."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "lastChange": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DateOnly",
+                    "resolved": "`${number}-${number}-${number}`",
+                    "references": {
+                        "DateOnly": {
+                            "location": "import",
+                            "path": "../../interfaces/dates",
+                            "id": "src/interfaces/dates.ts::DateOnly",
+                            "referenceLocation": "DateOnly"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The last change."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "last-change"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "bind",
+                            "text": "value"
+                        }],
+                    "text": "Emitted when the date range value changes."
+                },
+                "complexType": {
+                    "original": "{ start?: DateOnly; end?: DateOnly }",
+                    "resolved": "{ start?: `${number}-${number}-${number}`; end?: `${number}-${number}-${number}`; }",
+                    "references": {
+                        "DateOnly": {
+                            "location": "import",
+                            "path": "../../interfaces/dates",
+                            "id": "src/interfaces/dates.ts::DateOnly",
+                            "referenceLocation": "DateOnly"
+                        }
+                    }
+                }
+            }, {
+                "method": "lastChanged",
+                "name": "lastChanged",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the last change date updates."
+                },
+                "complexType": {
+                    "original": "{ date: DateOnly }",
+                    "resolved": "{ date: `${number}-${number}-${number}`; }",
+                    "references": {
+                        "DateOnly": {
+                            "location": "import",
+                            "path": "../../interfaces/dates",
+                            "id": "src/interfaces/dates.ts::DateOnly",
+                            "referenceLocation": "DateOnly"
+                        }
+                    }
+                }
+            }, {
+                "method": "historyChanged",
+                "name": "historyChanged",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the history array changes."
+                },
+                "complexType": {
+                    "original": "{ dates: DateOnly[] }",
+                    "resolved": "{ dates: `${number}-${number}-${number}`[]; }",
+                    "references": {
+                        "DateOnly": {
+                            "location": "import",
+                            "path": "../../interfaces/dates",
+                            "id": "src/interfaces/dates.ts::DateOnly",
+                            "referenceLocation": "DateOnly"
+                        }
+                    }
+                }
+            }, {
+                "method": "valueDateChanged",
+                "name": "valueDateChanged",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the date range value changes as Date objects (local time)."
+                },
+                "complexType": {
+                    "original": "{ start?: Date; end?: Date }",
+                    "resolved": "{ start?: Date; end?: Date; }",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/nv-datetimetest/nv-datetimetest.css

@@ -0,0 +1,15 @@
+nv-datetimetest {
+  display: flex;
+}
+nv-datetimetest label {
+  display: flex;
+  flex-direction: column;
+  margin-right: 10px;
+  font-weight: bold;
+}
+nv-datetimetest input {
+  font-weight: normal;
+  padding: var(--spacing-2);
+  border-radius: var(--spacing-1);
+  border: 1px solid #ccc;
+}

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

@@ -0,0 +1,5 @@
+const NvDatetimetestDocs = {
+    component: 'nv-datetimetest',
+    skip: true,
+};
+export default NvDatetimetestDocs;

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

@@ -0,0 +1,197 @@
+/* eslint-disable jsdoc/require-jsdoc */
+import { Host, h } from "@stencil/core";
+/**
+ * This is a test component for the new DateTimeObject type
+ * @slot default - Child content of the component.
+ *
+ * @deprecated [EXPERIMENTAL]
+ * @experimental This component is still in development and subject to change in future releases.
+ */
+export class NvDatetimetest {
+    constructor() {
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region METHODS
+        this.handleStartChange = (event) => {
+            const input = event.target;
+            const newStart = new Date(input.value);
+            this.value = { start: newStart, end: this.value?.end };
+            this.lastChange = newStart;
+            this.history = [...(this.history ?? []), newStart];
+            this.valueChanged.emit(this.value);
+            this.lastChanged.emit({ date: this.lastChange });
+            this.historyChanged.emit({ dates: this.history });
+        };
+        this.handleEndChange = (event) => {
+            const input = event.target;
+            const newEnd = new Date(input.value);
+            this.value = { start: this.value?.start, end: newEnd };
+            this.lastChange = newEnd;
+            this.history = [...(this.history ?? []), newEnd];
+            this.valueChanged.emit(this.value);
+            this.lastChanged.emit({ date: this.lastChange });
+            this.historyChanged.emit({ dates: this.history });
+        };
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const formatDate = (date) => {
+            if (!date)
+                return '';
+            const d = new Date(date);
+            if (isNaN(d.getTime()))
+                return '';
+            return d.toISOString().slice(0, 16);
+        };
+        return (h(Host, null, h("label", null, "Start:", h("input", { type: "datetime-local", value: formatDate(this.value?.start), onInput: this.handleStartChange })), h("label", null, "End:", h("input", { type: "datetime-local", value: formatDate(this.value?.end), onInput: this.handleEndChange })), h("slot", null)));
+    }
+    static get is() { return "nv-datetimetest"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-datetimetest.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-datetimetest.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "{ start?: Date; end?: Date }",
+                    "resolved": "{ start?: Date; end?: Date; }",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The date range value with start and end dates."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "history": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Date[]",
+                    "resolved": "Date[]",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of historical date changes."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "lastChange": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The the last change."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "bind",
+                            "text": "value"
+                        }],
+                    "text": "Emitted when the date range value changes."
+                },
+                "complexType": {
+                    "original": "{ start?: Date; end?: Date }",
+                    "resolved": "{ start?: Date; end?: Date; }",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }, {
+                "method": "lastChanged",
+                "name": "lastChanged",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the last change timestamp updates."
+                },
+                "complexType": {
+                    "original": "{ date: Date }",
+                    "resolved": "{ date: Date; }",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }, {
+                "method": "historyChanged",
+                "name": "historyChanged",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the history array changes."
+                },
+                "complexType": {
+                    "original": "{ dates: Date[] }",
+                    "resolved": "{ dates: Date[]; }",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }];
+    }
+}

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvDialogDocs = {
     component: 'nv-dialog',
+    parentGroup: 'Dialog/nv-dialog',
     subcomponents: [
         'nv-dialogheader',
         'nv-dialogfooter',

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

@@ -291,7 +291,7 @@ export class NvDialog {
     //#region RENDER
     render() {
         const hasForm = this.form || this.el.querySelector('form');
-        return (h(Host, { key: '402dda24aab32637cbfd4a2967297fab760e6389' }, h("slot", { key: '3744313bc37f3bbf4fabe235004d1e99a6d82ffd', name: "trigger" }), h("dialog", { key: '8d34a090d52e729c8dbed18270900d8ef46c6a7a', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, onPointerDown: this.handleDialogPointerDown, onClick: this.handleDialogClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx({ full: this.full }) }, h("div", { key: '9539f8682b25f4cf52f4a6fc554d1c314f015655', class: "backdrop", ref: el => (this.backdropElement = el) }, h("div", { key: '3d74eb9b30bd5d39afd76a20d229adc0f3343f8c', class: "content", ref: el => (this.contentElement = el) }, !this.undismissable && (h("nv-button", { key: 'd061699ef943f1178e985cfca832918b05e914be', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDialogClose, "aria-label": "Close dialog" }, h("nv-icon", { key: 'f60991a49b800d6a5f3af15ddc27fcbf77310a0d', name: "x", size: "sm" }))), this.headerElement ? (h("slot", { name: "header" })) : (h("nv-dialogheader", { id: "dialog-header" })), h("div", { key: 'b3e76c96245728cd574d7d357ec0507525ba9ed5', class: "content-body", id: "dialog-content" }, h("slot", { key: 'be5a36d7e816f5be9c624c13d5ee03126e1d97cf' })), this.footerElement ? (h("slot", { name: "footer" })) : (h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? ButtonType.Submit : ButtonType.Button, onDialogCanceled: this.handleDialogClose, undismissable: this.undismissable })))))));
+        return (h(Host, { key: '8a7bd6c255e68d2950802190764221263eedc794' }, h("slot", { key: '3194aed7aa3e70ca0c7d3a9aa310a5ae12a8c55f', name: "trigger" }), h("dialog", { key: '2eb801ffa547e5159e125631de4973c4072228e6', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, onPointerDown: this.handleDialogPointerDown, onClick: this.handleDialogClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx({ full: this.full }) }, h("div", { key: 'be4754c9b659de5186ceca7a038cfe048e36f7e6', class: "backdrop", ref: el => (this.backdropElement = el) }, h("div", { key: '6dc502fe058efde6220c15fff444a16c5920e524', class: "content", ref: el => (this.contentElement = el) }, !this.undismissable && (h("nv-button", { key: 'b9bbc39d6553e268aaabd8a394209302b4c3129d', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDialogClose, "aria-label": "Close dialog" }, h("nv-icon", { key: 'aa8eb0f8ce6d2d5480b8522c470c61e902fb05fd', name: "x", size: "sm" }))), this.headerElement ? (h("slot", { name: "header" })) : (h("nv-dialogheader", { id: "dialog-header" })), h("div", { key: '9e53461c4ff39eb272dfc1042047f43aa9afa4cc', class: "content-body", id: "dialog-content" }, h("slot", { key: '26f5bbe3d31dc0a341cf444dd4116f7ffd51f469' })), this.footerElement ? (h("slot", { name: "footer" })) : (h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? ButtonType.Submit : ButtonType.Button, onDialogCanceled: this.handleDialogClose, undismissable: this.undismissable })))))));
     }
     static get is() { return "nv-dialog"; }
     static get originalStyleUrls() {