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

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

@@ -14,6 +14,7 @@ import { v4 as uuidv4 } from "uuid";
 export class NvDialog {
     constructor() {
         this.eventsAttached = false;
+        this.pointerDownTarget = null;
         this.triggerClickEvents = [
             ['click', this.show],
             [
@@ -73,8 +74,18 @@ export class NvDialog {
                 this.close();
             }
         };
+        /**
+         * Records the pointer down target to distinguish intentional outside clicks
+         * from drag-out gestures (press inside, release outside).
+         * @param {PointerEvent} event - The pointerdown event.
+         */
+        this.handleDialogPointerDown = (event) => {
+            this.pointerDownTarget = event.target;
+        };
         /**
          * Handles the click event to close the dialog when clickOutside is true.
+         * Only closes if both pointerdown and click originated on the backdrop,
+         * preventing accidental closes from drag-out gestures.
          * @param {MouseEvent} event - The click event.
          */
         this.handleDialogClick = (event) => {
@@ -82,11 +93,13 @@ export class NvDialog {
                 return;
             if (this.checkForOpenPopovers())
                 return;
-            if (event.target === this.backdropElement) {
+            if (event.target === this.backdropElement &&
+                this.pointerDownTarget === this.backdropElement) {
                 this.close();
                 event.preventDefault();
                 event.stopPropagation();
             }
+            this.pointerDownTarget = null;
         };
         this.checkForOpenPopovers = () => {
             let hasOpenPopover = false;
@@ -278,7 +291,7 @@ export class NvDialog {
     //#region RENDER
     render() {
         const hasForm = this.form || this.el.querySelector('form');
-        return (h(Host, { key: 'd8d44a128d01fd7a9b62d42f08f7eb5b85e4e5b2' }, h("slot", { key: '7157a6121fea5e8828dd2c0c3db4998c0cb5d0d2', name: "trigger" }), h("dialog", { key: '22674ade1de7b50439ffe77ad2a20e6473929c34', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, onClick: this.handleDialogClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx({ full: this.full }) }, h("div", { key: '4f851e286f94be5972ebb417bef891e29714cb44', class: "backdrop", ref: el => (this.backdropElement = el) }, h("div", { key: '881171acec6e40b627a544b716302d576b836487', class: "content", ref: el => (this.contentElement = el) }, !this.undismissable && (h("nv-button", { key: '9691520158952a35da536f94073e8ff5fd6041f0', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDialogClose, "aria-label": "Close dialog" }, h("nv-icon", { key: '8392a7d6ec89d08391904c94f10296223c4d6012', name: "x", size: "sm" }))), this.headerElement ? (h("slot", { name: "header" })) : (h("nv-dialogheader", { id: "dialog-header" })), h("div", { key: '7fa62a9d5e8f1fe3f42872af3fc753e2fb175a9a', class: "content-body", id: "dialog-content" }, h("slot", { key: '5ec44365b70f6ec2762896ce242a264fb4ffb05a' })), 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() {

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

@@ -1,5 +1,13 @@
+import { h } from "@stencil/core";
 const NvDialogfooterDocs = {
     component: 'nv-dialogfooter',
-    skip: true,
+    parentGroup: 'Dialog/nv-dialog',
+    subcomponents: ['nv-dialog', 'nv-button', 'nv-dialogheader'],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-dialog", { open: true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("nv-dialogheader", null, "Dialog Header"), h("p", null, "Dialog content"), h("nv-dialogfooter", { "data-storybook-args": true }, h("nv-button", null, "Cancel"), h("nv-button", null, "Confirm")))),
+        },
+    ],
 };
 export default NvDialogfooterDocs;

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

@@ -71,7 +71,7 @@ export class NvDialogfooter {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'a5148c3e41ad6d7c5e54e2b29b8452707d5c2b2b' }, h("slot", { key: 'e5fcf66789eac1c6b0118403c33e7e80fb974c71' }, h(Fragment, { key: '9255d264f559322bebbcc874d91802bbaaeac2d6' }, !this.undismissable && (h("nv-button", { key: 'e8d6085fbbcf5bbdbad7b23d65660debb296a332', onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), h("nv-button", { key: '8a6963f12e89860c3bb1e17eeed60cf9b6d81bc3', ref: el => (this.primaryButtonRef = el), onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (h("nv-icon", { key: '59dc3f909f7366a0d0e05ab089d34b9d222f43ed', slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (h("nv-icon", { key: 'e2be736da129cf7720dad6e1a443eb55a182b2dd', slot: "trailing-icon", name: this.trailingIcon, size: "sm" })))))));
+        return (h(Host, { key: '38542bde042483b52b17ff43fb31de4e8c304e1f' }, h("slot", { key: 'ccb01a71be38ac68d77cfa408fd982fee291f683' }, h(Fragment, { key: '223bb06266eca959f83859119a7ec3393f2b0c33' }, !this.undismissable && (h("nv-button", { key: '01866629e7dfbfb480982c86b07fa9b3db7ceb36', onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), h("nv-button", { key: '7d6bddb1681dc733ace5aac42b15b8b2d6fbc20e', ref: el => (this.primaryButtonRef = el), onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (h("nv-icon", { key: '5dcdb4a2b88f2b776ae37782101d011a0c9012b9', slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (h("nv-icon", { key: 'd386d6a393cb9f6771f0e2dd282a6f8b76e30047', slot: "trailing-icon", name: this.trailingIcon, size: "sm" })))))));
     }
     static get is() { return "nv-dialogfooter"; }
     static get formAssociated() { return true; }

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

@@ -1,5 +1,13 @@
+import { h } from "@stencil/core";
 const NvDialogheaderDocs = {
     component: 'nv-dialogheader',
-    skip: true,
+    parentGroup: 'Dialog/nv-dialog',
+    subcomponents: ['nv-dialog', 'nv-button', 'nv-icon'],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-dialog", { open: true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("nv-dialogheader", { "data-storybook-args": true }, "Dialog Header"), h("p", null, "Dialog content"))),
+        },
+    ],
 };
 export default NvDialogheaderDocs;

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

@@ -15,7 +15,7 @@ export class NvDialogheader {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '8577fd5a719adf8764d85f667495701cb1514df2' }, h("slot", { key: '5858bd8fff71db135f69a76cb298343f0590f853' }, h(Fragment, { key: '81ac703e205f1b8587144213c7f57c9fd7ba9657' }, h("div", { key: '5a12e1facef605d96338b31468c8d8109379e2d1', class: "heading" }, this.heading), h("div", { key: '1a559041968e2b2b92a987c014e41380fe6f8616', class: "subheading" }, this.subheading)))));
+        return (h(Host, { key: '791850365cf2de9d1a5395083e01ee927e9fcfac' }, h("slot", { key: '2641c425dc10b7d748365fa0fa3d86a6784e129b' }, h(Fragment, { key: '7c8ef96b9c7e0ba03e374cc7e74d1f8f24d94c5b' }, h("div", { key: '53d09670dc9779101b3e79adea03bc34870df028', class: "heading" }, this.heading), h("div", { key: '624861c0ecac1de23ac1a4b558dea9de6acf5706', class: "subheading" }, this.subheading)))));
     }
     static get is() { return "nv-dialogheader"; }
     static get originalStyleUrls() {

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvDrawerDocs = {
     component: 'nv-drawer',
+    parentGroup: 'Dialog/nv-drawer',
     subcomponents: [
         'nv-drawerheader',
         'nv-drawerfooter',

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

@@ -424,7 +424,7 @@ export class NvDrawer {
     render() {
         const hasForm = this.form || this.el.querySelector('form');
         const state = this.open ? 'open' : 'closed';
-        return (h(Host, { key: 'e8ae3c1b5adcd23622f97d0f405fd8607e51b3e4' }, h("slot", { key: 'c94efef46482ef65c9a907d5f23e2306cc88c9af', name: "trigger" }), h("dialog", { key: '8b12d8885f4a7f987985b4be49aace1f48b66949', ref: el => (this.dialogElement = el), onClose: this.handleDrawerClose, onClick: this.handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "drawer-header", "aria-describedby": "drawer-content", class: clsx({ [`side-${this.side}`]: true }), "data-state": state }, h("div", { key: '5fc00bd8e28cf26c92e3c3888941e6209e03fb65', class: "backdrop", ref: el => (this.backdropElement = el) }, h("div", { key: '7eb5e3335a15a3821fa4c62160a313bddf34e3b2', class: clsx('content', `size-${this.size}`), ref: el => (this.contentElement = el), "data-state": state, "data-side": this.side, style: this.width ? { width: this.width } : {} }, !this.undismissable && (h("nv-button", { key: 'c284d6cea03806890603d71d27d642961eab4423', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDrawerClose, "aria-label": "Close drawer" }, h("nv-icon", { key: 'daf2c3af54c3eaede4835b100200632e644b7cc6', name: "x", size: "sm" }))), this.headerElement ? (h("slot", { name: "header" })) : (h("nv-drawerheader", { id: "drawer-header" })), h("div", { key: '90ffef76d60a3522ae5daf10554a3f8a487c5f76', class: "content-body", id: "drawer-content" }, h("slot", { key: 'd66e675a68c27819f7ca146afc27e63d05ad5603' })), this.footerElement ? (h("slot", { name: "footer" })) : (h("nv-drawerfooter", { form: this.form, primaryButtonType: hasForm ? ButtonType.Submit : ButtonType.Button, onDrawerCanceled: this.handleDrawerClose, undismissable: this.undismissable })))))));
+        return (h(Host, { key: '6ca026b67705704b891c9bca8293dde501c0dc7d' }, h("slot", { key: 'ce9a79e0fe385b774aeac0106929343d6a053394', name: "trigger" }), h("dialog", { key: '49f9c71fd04de256f05d82d671b7664cf1ab3563', ref: el => (this.dialogElement = el), onClose: this.handleDrawerClose, onClick: this.handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "drawer-header", "aria-describedby": "drawer-content", class: clsx({ [`side-${this.side}`]: true }), "data-state": state }, h("div", { key: '9c113486255925e4c7520c1f040b95ec253625d8', class: "backdrop", ref: el => (this.backdropElement = el) }, h("div", { key: 'e5b32ffe6785c27eef326f37b23478b9993f451a', class: clsx('content', `size-${this.size}`), ref: el => (this.contentElement = el), "data-state": state, "data-side": this.side, style: this.width ? { width: this.width } : {} }, !this.undismissable && (h("nv-button", { key: 'ac89f7d87b1f307fd809e518cfb88ceb82a074af', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDrawerClose, "aria-label": "Close drawer" }, h("nv-icon", { key: '47d0888ea54efdf3f82cfd0b39bda5c1141074ba', name: "x", size: "sm" }))), this.headerElement ? (h("slot", { name: "header" })) : (h("nv-drawerheader", { id: "drawer-header" })), h("div", { key: '77a08ee8fcda500d45c9426de8d0b6fb9e960142', class: "content-body", id: "drawer-content" }, h("slot", { key: 'fc40bc3ecb66c95c188b1984431788e8d3bb66e2' })), this.footerElement ? (h("slot", { name: "footer" })) : (h("nv-drawerfooter", { form: this.form, primaryButtonType: hasForm ? ButtonType.Submit : ButtonType.Button, onDrawerCanceled: this.handleDrawerClose, undismissable: this.undismissable })))))));
     }
     static get is() { return "nv-drawer"; }
     static get originalStyleUrls() {

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

@@ -1,5 +1,13 @@
+import { h } from "@stencil/core";
 const NvDrawerfooterDocs = {
     component: 'nv-drawerfooter',
-    skip: true,
+    parentGroup: 'Dialog/nv-drawer',
+    subcomponents: ['nv-drawer', 'nv-button', 'nv-drawerheader'],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-drawer", { open: true }, h("nv-button", { slot: "trigger" }, "Open Drawer"), h("nv-drawerheader", null, "Drawer Header"), h("p", null, "Drawer content"), h("nv-drawerfooter", { "data-storybook-args": true }, h("nv-button", null, "Cancel"), h("nv-button", null, "Save")))),
+        },
+    ],
 };
 export default NvDrawerfooterDocs;

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

@@ -76,7 +76,7 @@ export class NvDrawerfooter {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'c83bba64c28cf284847c2b726e2d1bb9deb86152' }, h("slot", { key: '89e9a548f3cee3c45b8e7874e9d8618b469ce94a' }, h(Fragment, { key: 'ef18a333ef7c5de05891a265a8ccb85b6913237a' }, !this.undismissable && (h("nv-button", { key: 'd69eab0d344bdfb9f2454cc18d953f50b9d65aa2', onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), h("nv-button", { key: '8329da9bcbb41cb972c2b2527334086c47a10f93', ref: el => (this.primaryButtonRef = el), onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (h("nv-icon", { key: '86ac92ef44afe20e540422d3cd0ee45c04c233bc', slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (h("nv-icon", { key: '3a48543e903d060ff77d1100df4984db04c0d2cb', slot: "trailing-icon", name: this.trailingIcon, size: "sm" })))))));
+        return (h(Host, { key: '34d1e6674af648693843a7ac721dbdbcd72b51c0' }, h("slot", { key: '1f4a4e543545e160f6adae62eb4313352c4792cc' }, h(Fragment, { key: '250ca124fa3b898eb4f60f44718dacbc182372e4' }, !this.undismissable && (h("nv-button", { key: 'd26c422a3b7912140ee92ac1d2fb6401a980f8f8', onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), h("nv-button", { key: '8c77da0f29d18e68288b4e74f1050bc80ddb8e8d', ref: el => (this.primaryButtonRef = el), onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (h("nv-icon", { key: 'ef09488fa5a8ca561f0c03973cb7b4fe3a6669d3', slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (h("nv-icon", { key: '56a7a5e6fab648c67a69a309128195d047f3b5a8', slot: "trailing-icon", name: this.trailingIcon, size: "sm" })))))));
     }
     static get is() { return "nv-drawerfooter"; }
     static get formAssociated() { return true; }

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

@@ -1,5 +1,13 @@
+import { h } from "@stencil/core";
 const NvDrawerheaderDocs = {
     component: 'nv-drawerheader',
-    skip: true,
+    parentGroup: 'Dialog/nv-drawer',
+    subcomponents: ['nv-drawer', 'nv-button', 'nv-icon'],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-drawer", { open: true }, h("nv-button", { slot: "trigger" }, "Open Drawer"), h("nv-drawerheader", { "data-storybook-args": true }, "Drawer Header"), h("p", null, "Drawer content"))),
+        },
+    ],
 };
 export default NvDrawerheaderDocs;