@nova-design-system/nova-webcomponents 3.0.0-beta.35 → 3.0.0-beta.37

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

@@ -0,0 +1,510 @@
+import { Host, h, } from "@stencil/core";
+import { tabbable } from "tabbable";
+import { addEventListeners, removeEventListeners, } from "../../utils/events.utils";
+import clsx from "clsx";
+/**
+ * @slot default - Body of the dialog.
+ * @slot trigger - Content to be placed as the trigger, will override the trigger prop.
+ * @slot header - Content to be placed as the header, will override the header prop.
+ * @slot footer - Content to be placed as the footer, will override the footer prop.
+ */
+export class NvDialog {
+    constructor() {
+        this.eventsAttached = false;
+        /**
+         * Use this prop to toggle the visibility of the dialog. Set to true to show
+         * the dialog and false to hide it.
+         */
+        this.open = false;
+        /**
+         * If true, the dialog cannot be closed by the user.
+         */
+        this.undismissable = false;
+        /**
+         * If true, the dialog will be closed when the backdrop is clicked.
+         */
+        this.clickOutside = false;
+        /**
+         * Controls the dialog's autofocus behavior. When false (default), the dialog will
+         * automatically focus the first focusable element. When true, automatic focus is
+         * disabled and you must manually set focus on an element for accessibility compliance.
+         */
+        this.manualFocus = false;
+        /**
+         * If true, the dialog visibility is managed manually through methods or the open prop.
+         */
+        this.controlled = false;
+        /**
+         * If true, the dialog takes full width styling.
+         */
+        this.full = false;
+        /**
+         * Handles the close button click.
+         */
+        this.handleCloseButton = () => {
+            this.hide();
+        };
+        /**
+         * Handles the cancel button click.
+         */
+        this.handleCancelButton = () => {
+            this.hide();
+        };
+        /**
+         * Handles the dialog close event.
+         */
+        this.handleDialogClose = () => {
+            this.close.emit();
+        };
+        this.handleClickOutside = (event) => {
+            if (event.target === this.dialogElement) {
+                this.hide();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.triggerClickEvents = [
+            ['click', this.show],
+            ['touchstart', this.show],
+            [
+                'keydown',
+                (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this.show();
+                    }
+                },
+            ],
+        ];
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Call this method to show the dialog, making it visible on the screen.
+     */
+    async show() {
+        document.body.style.overflow = 'hidden'; // Prevent background scrolling
+        this.dialogElement.showModal();
+        this.open = true;
+    }
+    /**
+     * Call this method to hide the dialog, making it disappear from view.
+     */
+    async hide() {
+        document.body.style.overflow = ''; // Restore scrolling
+        this.dialogElement.close();
+        this.open = false;
+    }
+    /**
+     * Sets the autofocus on the first focusable element in the dialog.
+     */
+    setAutofocus() {
+        const focusableElements = tabbable(this.dialogElement, {
+            displayCheck: 'none',
+        });
+        if (focusableElements.length > 0) {
+            // Convert to array and find element with smallest top and left position
+            let topLeftElement = focusableElements[0];
+            let topLeftRect = topLeftElement.getBoundingClientRect();
+            focusableElements.forEach(element => {
+                const rect = element.getBoundingClientRect();
+                if (rect.top < topLeftRect.top || rect.left < topLeftRect.left) {
+                    topLeftElement = element;
+                    topLeftRect = rect;
+                }
+            });
+            // Set autofocus attribute on the found element
+            topLeftElement.setAttribute('autofocus', 'true');
+        }
+    }
+    /**
+     * Attaches event listeners to the dialog.
+     */
+    attachEventListeners() {
+        if (this.triggerElement && !this.eventsAttached && !this.controlled) {
+            addEventListeners(this.triggerClickEvents, this.triggerElement, this);
+            this.eventsAttached = true;
+        }
+    }
+    /**
+     * Handles the keydown event to optionally prevent the native dialog from closing when the escape key is pressed.
+  
+     * @param {KeyboardEvent} event - The keydown event.
+     */
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.undismissable) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    /**
+     * Handles the click event to close the dialog when clickOutside is true.
+     * @param {MouseEvent} event - The click event.
+     */
+    handleDocumentClick(event) {
+        if (!this.clickOutside || this.undismissable)
+            return;
+        this.handleClickOutside(event);
+    }
+    /**
+     * Handles the touchstart event to close the dialog when clickOutside is true.
+     * @param {TouchEvent} event - The touchstart event.
+     */
+    handleDocumentTouch(event) {
+        if (!this.clickOutside || this.undismissable)
+            return;
+        this.handleClickOutside(event);
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    async handleDialogOpenChange(open) {
+        if (open) {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    /**
+     * Lifecycle method that runs before the component loads.
+     * Initializes the trigger, header, and footer elements by finding them in the component's children.
+     * Elements are found either by their slot attribute or by their tag name (for dialog header/footer)
+     */
+    componentWillLoad() {
+        this.triggerElement = Array.from(this.el.children).find(child => {
+            return child.getAttribute('slot') === 'trigger';
+        });
+        this.headerElement = Array.from(this.el.children).find(child => {
+            return (child.getAttribute('slot') === 'header' ||
+                child.tagName.toLowerCase() === 'nv-dialogheader');
+        });
+        this.footerElement = Array.from(this.el.children).find(child => {
+            return (child.getAttribute('slot') === 'footer' ||
+                child.tagName.toLowerCase() === 'nv-dialogfooter');
+        });
+    }
+    componentWillUpdate() {
+        this.attachEventListeners();
+    }
+    componentDidLoad() {
+        if (this.open) {
+            this.show();
+        }
+        if (!this.manualFocus) {
+            this.setAutofocus();
+        }
+        this.attachEventListeners();
+    }
+    disconnectedCallback() {
+        removeEventListeners(this.triggerClickEvents, this.triggerElement, this);
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '41efdb06fd00cc61dc85f057404cfe53aaebc6cd' }, h("slot", { key: 'dc72af729ac4157a942aa8cc81f778e37fe18248', name: "trigger" }), h("dialog", { key: '2d06731d33b555bae300ac761275fcb2789d9225', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx({ full: this.full }) }, h("div", { key: 'be95c88ecc13b0772ce3532a23dc8b747b6a3305', class: "content" }, !this.undismissable && (h("nv-button", { key: '58d146e8343ebbc345185a53281bdd4856ff9cd6', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleCloseButton, "aria-label": "Close dialog" }, h("nv-icon", { key: '789e9783b08a5a5171b4f9173049a521d45947b3', name: "x", size: "sm" }))), this.headerElement ? (h("slot", { name: "header" })) : (h("nv-dialogheader", { id: "dialog-header" })), h("div", { key: '3c3e2f3200fd01df1290ec5ae987310bfeb1c3af', class: "content-body", id: "dialog-content" }, h("slot", { key: 'dd73f87ccf18439d744ce930e4c886bd29c9f2e8' })), this.footerElement ? (h("slot", { name: "footer" })) : (h("nv-dialogfooter", { onNvDialogCanceled: this.handleCancelButton, undismissable: this.undismissable }))))));
+    }
+    static get is() { return "nv-dialog"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-dialog.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-dialog.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "triggerElement": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Element",
+                    "resolved": "Element",
+                    "references": {
+                        "Element": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Accepts a reference to the DOM element acting as the popover trigger. This\nshould be used when the slot for the trigger is not defined."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "headerElement": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Element",
+                    "resolved": "Element",
+                    "references": {
+                        "Element": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Accepts a reference to the DOM element acting as the header. This should\nbe used when the slot for the header is not defined."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "footerElement": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Element",
+                    "resolved": "Element",
+                    "references": {
+                        "Element": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Accepts a reference to the DOM element acting as the footer. This should\nbe used when the slot for the footer is not defined."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this prop to toggle the visibility of the dialog. Set to true to show\nthe dialog and false to hide it."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "undismissable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the dialog cannot be closed by the user."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "undismissable",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "clickOutside": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the dialog will be closed when the backdrop is clicked."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "click-outside",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "manualFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the dialog's autofocus behavior. When false (default), the dialog will\nautomatically focus the first focusable element. When true, automatic focus is\ndisabled and you must manually set focus on an element for accessibility compliance."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "manual-focus",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "controlled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the dialog visibility is managed manually through methods or the open prop."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "controlled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "full": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the dialog takes full width styling."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "full",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dialog is closing in order to allow for cleanup, data-capture, etc."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Call this method to show the dialog, making it visible on the screen.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Call this method to hide the dialog, making it disappear from view.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleDialogOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "touchstart",
+                "method": "handleDocumentTouch",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=nv-dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-dialog.js","sourceRoot":"","sources":["../../../src/components/nv-dialog/nv-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element,\n  Method,\n  Event,\n  EventEmitter,\n  Watch,\n  Listen,\n} from '@stencil/core';\nimport { tabbable } from 'tabbable';\nimport {\n  addEventListeners,\n  removeEventListeners,\n  type EventsAndListeners,\n} from '../../utils/events.utils';\nimport clsx from 'clsx';\n\n/**\n * @slot default - Body of the dialog.\n * @slot trigger - Content to be placed as the trigger, will override the trigger prop.\n * @slot header - Content to be placed as the header, will override the header prop.\n * @slot footer - Content to be placed as the footer, will override the footer prop.\n */\n@Component({\n  tag: 'nv-dialog',\n  styleUrl: 'nv-dialog.scss',\n  shadow: false,\n})\nexport class NvDialog {\n  @Element() el: HTMLNvDialogElement;\n  private dialogElement!: HTMLDialogElement;\n  private eventsAttached = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * @internal\n   * Accepts a reference to the DOM element acting as the popover trigger. This\n   * should be used when the slot for the trigger is not defined.\n   */\n  @Prop({ mutable: true })\n  triggerElement: Element;\n\n  /**\n   * @internal\n   * Accepts a reference to the DOM element acting as the header. This should\n   * be used when the slot for the header is not defined.\n   */\n  @Prop({ mutable: true })\n  headerElement: Element;\n\n  /**\n   * @internal\n   * Accepts a reference to the DOM element acting as the footer. This should\n   * be used when the slot for the footer is not defined.\n   */\n  @Prop({ mutable: true })\n  footerElement: Element;\n\n  /**\n   * Use this prop to toggle the visibility of the dialog. Set to true to show\n   * the dialog and false to hide it.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * If true, the dialog cannot be closed by the user.\n   */\n  @Prop({ reflect: true })\n  readonly undismissable: boolean = false;\n\n  /**\n   * If true, the dialog will be closed when the backdrop is clicked.\n   */\n  @Prop({ reflect: true })\n  readonly clickOutside: boolean = false;\n\n  /**\n   * Controls the dialog's autofocus behavior. When false (default), the dialog will\n   * automatically focus the first focusable element. When true, automatic focus is\n   * disabled and you must manually set focus on an element for accessibility compliance.\n   */\n  @Prop({ reflect: true })\n  readonly manualFocus: boolean = false;\n\n  /**\n   * If true, the dialog visibility is managed manually through methods or the open prop.\n   */\n  @Prop({ reflect: true })\n  readonly controlled: boolean = false;\n\n  /**\n   * If true, the dialog takes full width styling.\n   */\n  @Prop({ reflect: true })\n  readonly full: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Call this method to show the dialog, making it visible on the screen.\n   */\n  @Method()\n  public async show() {\n    document.body.style.overflow = 'hidden'; // Prevent background scrolling\n    this.dialogElement.showModal();\n    this.open = true;\n  }\n\n  /**\n   * Call this method to hide the dialog, making it disappear from view.\n   */\n  @Method()\n  public async hide() {\n    document.body.style.overflow = ''; // Restore scrolling\n    this.dialogElement.close();\n    this.open = false;\n  }\n\n  /**\n   * Handles the close button click.\n   */\n  private handleCloseButton = () => {\n    this.hide();\n  };\n\n  /**\n   * Handles the cancel button click.\n   */\n  private handleCancelButton = () => {\n    this.hide();\n  };\n\n  /**\n   * Sets the autofocus on the first focusable element in the dialog.\n   */\n  private setAutofocus() {\n    const focusableElements = tabbable(this.dialogElement, {\n      displayCheck: 'none',\n    });\n\n    if (focusableElements.length > 0) {\n      // Convert to array and find element with smallest top and left position\n      let topLeftElement = focusableElements[0];\n      let topLeftRect = topLeftElement.getBoundingClientRect();\n\n      focusableElements.forEach(element => {\n        const rect = element.getBoundingClientRect();\n        if (rect.top < topLeftRect.top || rect.left < topLeftRect.left) {\n          topLeftElement = element;\n          topLeftRect = rect;\n        }\n      });\n\n      // Set autofocus attribute on the found element\n      topLeftElement.setAttribute('autofocus', 'true');\n    }\n  }\n\n  /**\n   * Attaches event listeners to the dialog.\n   */\n  private attachEventListeners() {\n    if (this.triggerElement && !this.eventsAttached && !this.controlled) {\n      addEventListeners(this.triggerClickEvents, this.triggerElement, this);\n      this.eventsAttached = true;\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the dialog is closing in order to allow for cleanup, data-capture, etc.\n   */\n  @Event()\n  close: EventEmitter<void>;\n\n  /**\n   * Handles the dialog close event.\n   */\n  private handleDialogClose = () => {\n    this.close.emit();\n  };\n\n  /**\n   * Handles the keydown event to optionally prevent the native dialog from closing when the escape key is pressed.\n\n   * @param {KeyboardEvent} event - The keydown event.\n   */\n  @Listen('keydown', { target: 'document' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.undismissable) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  /**\n   * Handles the click event to close the dialog when clickOutside is true.\n   * @param {MouseEvent} event - The click event.\n   */\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    if (!this.clickOutside || this.undismissable) return;\n    this.handleClickOutside(event);\n  }\n\n  /**\n   * Handles the touchstart event to close the dialog when clickOutside is true.\n   * @param {TouchEvent} event - The touchstart event.\n   */\n  @Listen('touchstart', { target: 'document' })\n  handleDocumentTouch(event: TouchEvent) {\n    if (!this.clickOutside || this.undismissable) return;\n    this.handleClickOutside(event);\n  }\n\n  private handleClickOutside = (event: MouseEvent | TouchEvent) => {\n    if (event.target === this.dialogElement) {\n      this.hide();\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  private triggerClickEvents: EventsAndListeners = [\n    ['click', this.show],\n    ['touchstart', this.show],\n    [\n      'keydown',\n      (e: KeyboardEvent) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          this.show();\n        }\n      },\n    ],\n  ];\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('open')\n  async handleDialogOpenChange(open: boolean) {\n    if (open) {\n      this.show();\n    } else {\n      this.hide();\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Lifecycle method that runs before the component loads.\n   * Initializes the trigger, header, and footer elements by finding them in the component's children.\n   * Elements are found either by their slot attribute or by their tag name (for dialog header/footer)\n   */\n  componentWillLoad() {\n    this.triggerElement = Array.from(this.el.children).find(child => {\n      return child.getAttribute('slot') === 'trigger';\n    }) as HTMLElement;\n\n    this.headerElement = Array.from(this.el.children).find(child => {\n      return (\n        child.getAttribute('slot') === 'header' ||\n        child.tagName.toLowerCase() === 'nv-dialogheader'\n      );\n    }) as HTMLElement;\n\n    this.footerElement = Array.from(this.el.children).find(child => {\n      return (\n        child.getAttribute('slot') === 'footer' ||\n        child.tagName.toLowerCase() === 'nv-dialogfooter'\n      );\n    }) as HTMLElement;\n  }\n\n  componentWillUpdate() {\n    this.attachEventListeners();\n  }\n\n  componentDidLoad() {\n    if (this.open) {\n      this.show();\n    }\n    if (!this.manualFocus) {\n      this.setAutofocus();\n    }\n    this.attachEventListeners();\n  }\n\n  disconnectedCallback() {\n    removeEventListeners(this.triggerClickEvents, this.triggerElement, this);\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"trigger\"></slot>\n\n        <dialog\n          ref={el => (this.dialogElement = el)}\n          onClose={this.handleDialogClose}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=\"dialog-header\"\n          aria-describedby=\"dialog-content\"\n          class={clsx({ full: this.full })}\n        >\n          <div class=\"content\">\n            {!this.undismissable && (\n              <nv-button\n                class=\"close-button\"\n                emphasis=\"lower\"\n                size=\"sm\"\n                onClick={this.handleCloseButton}\n                aria-label=\"Close dialog\"\n              >\n                <nv-icon name=\"x\" size=\"sm\" />\n              </nv-button>\n            )}\n\n            {this.headerElement ? (\n              <slot name=\"header\"></slot>\n            ) : (\n              <nv-dialogheader id=\"dialog-header\"></nv-dialogheader>\n            )}\n\n            <div class=\"content-body\" id=\"dialog-content\">\n              <slot></slot>\n            </div>\n\n            {this.footerElement ? (\n              <slot name=\"footer\"></slot>\n            ) : (\n              <nv-dialogfooter\n                onNvDialogCanceled={this.handleCancelButton}\n                undismissable={this.undismissable}\n              ></nv-dialogfooter>\n            )}\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,8 @@
+nv-dialogfooter {
+  display: flex;
+  padding: var(--dialog-footer-padding-top) var(--dialog-footer-padding-x) var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);
+  justify-content: flex-end;
+  align-items: flex-end;
+  gap: var(--dialog-footer-gap-y);
+  align-self: stretch;
+}

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

@@ -0,0 +1,6 @@
+const NvDialogfooterDocs = {
+    component: 'nv-dialogfooter',
+    skip: true,
+};
+export default NvDialogfooterDocs;
+//# sourceMappingURL=nv-dialogfooter.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-dialogfooter.docs.js","sourceRoot":"","sources":["../../../src/components/nv-dialogfooter/nv-dialogfooter.docs.tsx"],"names":[],"mappings":"AAGA,MAAM,kBAAkB,GAAwC;IAC9D,SAAS,EAAE,iBAAiB;IAC5B,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvDialogfooterDocs: NovaDocs<Components.NvDialogfooter> = {\n  component: 'nv-dialogfooter',\n  skip: true,\n};\n\nexport default NvDialogfooterDocs;\n"]}