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

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

@@ -1,5 +1,40 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
 const NvBreadcrumbDocs = {
     component: 'nv-breadcrumb',
-    skip: true,
+    parentGroup: 'Breadcrumbs',
+    subcomponents: ['nv-breadcrumbs', 'nv-icon', 'nv-tooltip', 'nv-popover'],
+    stories: [
+        // Default
+        {
+            name: 'Default',
+            template: (h("nv-breadcrumbs", null, h("nv-breadcrumb", { "data-storybook-args": true }, h("a", { href: "#" }, "Breadcrumb Item")))),
+        },
+        // type
+        {
+            name: nameof(x => x.type),
+            description: 'The type of breadcrumb. Use "collapsed" to house multiple breadcrumbs in a dropdown.',
+            template: (h("div", null, h("nv-breadcrumbs", { "data-class": "mb-5" }, h("nv-breadcrumb", null, h("a", { href: "#" }, "Home")), h("nv-breadcrumb", { "data-storybook-args": true, type: "default" }, h("a", { href: "#" }, "Default")), h("nv-breadcrumb", null, h("a", { href: "#" }, "Current"))), h("nv-breadcrumbs", { "data-class": "mb-20" }, h("nv-breadcrumb", null, h("a", { href: "#" }, "Home")), h("nv-breadcrumb", { "data-storybook-args": true, type: "collapsed", tooltip: "Click to expand" }, h("li", null, h("nv-breadcrumb", null, h("a", { href: "#" }, "Products"))), h("li", null, h("nv-breadcrumb", null, h("a", { href: "#" }, "Electronics")))), h("nv-breadcrumb", null, h("a", { href: "#" }, "Laptops"))))),
+        },
+        // tooltip
+        {
+            name: nameof(x => x.tooltip),
+            args: { tooltip: 'Go to Home' },
+            template: (h("nv-breadcrumbs", null, h("nv-breadcrumb", { "data-storybook-args": true }, h("a", { href: "#" }, "Home")), h("nv-breadcrumb", null, h("a", { href: "#" }, "Products")))),
+        },
+        // current
+        {
+            name: nameof(x => x.current),
+            description: 'Highlights the breadcrumb as the current page. When true, the breadcrumb is visually hidden but remains accessible to screen readers with aria-current="location".',
+            args: { current: true },
+            template: (h("div", null, h("nv-breadcrumbs", { "data-class": "mb-2" }, h("nv-breadcrumb", null, h("a", { href: "#" }, "Home")), h("nv-breadcrumb", null, h("a", { href: "#" }, "User Account")), h("nv-breadcrumb", { "data-storybook-args": true }, h("a", { href: "#" }, "Authorization"))), h("h2", null, "Authorization"))),
+        },
+        // SlotDefault
+        {
+            name: 'SlotDefault',
+            description: 'Pass an icon, a link, or text to render the breadcrumb content.',
+            template: (h("div", null, h("nv-breadcrumbs", { "data-class": "mb-4" }, h("nv-breadcrumb", { "data-storybook-args": true }, h("a", { href: "#" }, h("nv-icon", { name: "home" }), h("span", null, "Home"))), h("nv-breadcrumb", null, h("a", { href: "#" }, "Products"))), h("nv-breadcrumbs", { "data-class": "mb-4" }, h("nv-breadcrumb", { "data-storybook-args": true }, h("a", { href: "#" }, "Simple Text")), h("nv-breadcrumb", null, h("a", { href: "#" }, "Another Item"))))),
+        },
+    ],
 };
 export default NvBreadcrumbDocs;

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 const NvBreadcrumbsDocs = {
     component: 'nv-breadcrumbs',
+    parentGroup: 'Breadcrumbs',
     subcomponents: ['nv-breadcrumb', 'nv-icon'],
     composedComponents: ['nv-breadcrumb'],
     stories: [

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,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvColDocs = {
     component: 'nv-col',
+    parentGroup: 'Grid/Row/nv-col',
     subcomponents: ['nv-row'],
     stories: [
         // Default

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: [

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() {