@nova-design-system/nova-react 3.23.0 → 3.25.0

package/dist/cjs/nv-dialog.entry-Bi2ZVSe2.js

@@ -0,0 +1,299 @@
+'use strict';
+
+var index = require('./index-DUlunl9a.js');
+var index_esmD3eWMME9 = require('./index.esm-D3eWMME9-CG1TVKfu.js');
+var events_utilsB6GgGra_ = require('./events.utils-B6GgGra--01N__3wY.js');
+var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.js');
+var grow_animationD7ep_aVl = require('./grow.animation-D7ep_aVl-BuXEDSK-.js');
+require('./style-value-types.es-xlgmw4x8-B1vLqX9m.js');
+var timeline_animationCgHCo_Ho = require('./timeline.animation-CgHCo_Ho-KteJaZPb.js');
+var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
+var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
+var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvDialogCss = () => `nv-dialog dialog{width:100vw;height:100svh;margin:0;max-height:unset;max-width:unset;padding:0;background:color-mix(in srgb, var(--components-overlay-background) 70%, transparent);backdrop-filter:blur(4px)}nv-dialog dialog.full .content{min-width:90vw;width:90vw;max-width:90vw}nv-dialog .backdrop{display:flex;min-height:100%;padding:var(--spacing-3);box-shadow:0px var(--shadow-y-axis-2xl) var(--shadow-blur-2xl) var(--shadow-spread-2xl) var(--shadow-color-opacity-3) var(--shadow-color-opacity-3)}nv-dialog .backdrop .content{border-radius:var(--radius-rounded-2xl);background:var(--color-level-00-background);min-width:min(90vw, 400px);width:fit-content;max-width:clamp(90vw, min(90vw, 960px), 960px);margin:auto;display:flex;flex-direction:column;align-items:flex-start;height:fit-content;position:relative}nv-dialog .backdrop .content nv-button.close-button{position:absolute;top:var(--dialog-dismissible-position-top);right:var(--dialog-dismissible-position-right);display:flex;padding:var(--button-sm-icon-button-padding);justify-content:flex-end;align-items:flex-start;gap:10px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar{width:6px;height:6px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-dialog .backdrop .content .content-body{box-sizing:border-box;padding:var(--dialog-body-padding-y) var(--dialog-body-padding-x);scrollbar-gutter:stable both-edges;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-base);color:var(--color-content-medium-text);width:100%}`;
+
+const NvDialog = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.openChanged = index.createEvent(this, "openChanged", 3);
+        this.eventsAttached = false;
+        this.triggerClickEvents = [
+            ['click', this.show],
+            [
+                'keydown',
+                (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this.show();
+                    }
+                },
+            ],
+        ];
+        /**
+         * 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;
+        /**
+         * 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;
+        /**
+         * Controls whether the dialog should automatically focus the first focusable
+         * element when opened. When disabled, prevents unwanted tooltip triggers on
+         * dialog open.
+         */
+        this.autofocus = false;
+        /**
+         * Checks for and sets up form ID if a form is present
+         */
+        this.checkForForm = () => {
+            if (!this.form) {
+                const formElement = this.el.querySelector('form');
+                if (formElement) {
+                    this.form = this.ensureFormId(formElement);
+                }
+            }
+        };
+        /**
+         * Handles the native dialog close event.
+         */
+        this.handleDialogClose = () => {
+            if (this.open) {
+                this.close();
+            }
+        };
+        /**
+         * Handles the click event to close the dialog when clickOutside is true.
+         * @param {MouseEvent} event - The click event.
+         */
+        this.handleDialogClick = (event) => {
+            if (!this.clickOutside || this.undismissable)
+                return;
+            if (this.checkForOpenPopovers())
+                return;
+            if (event.target === this.backdropElement) {
+                this.close();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.checkForOpenPopovers = () => {
+            let hasOpenPopover = false;
+            this.el.querySelectorAll('nv-popover').forEach(popover => {
+                if (popover.hasAttribute('open')) {
+                    hasOpenPopover = true;
+                }
+            });
+            return hasOpenPopover;
+        };
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Call this method to show the dialog, making it visible on the screen.
+     */
+    async show() {
+        this.open = true;
+        this.preventScroll();
+        /** It is recommended to use the .show() or .showModal() method to render
+         * dialogs, rather than the open attribute. If a <dialog> is opened using
+         * the open attribute, it is non-modal. */
+        const { setFadeOut } = fade_animationDcRL9lcm.useFade(this.dialogElement);
+        setFadeOut();
+        this.dialogElement.showModal();
+        const { setGrowIn, growIn } = grow_animationD7ep_aVl.useGrow(this.contentElement, {
+            duration: 100,
+            amount: 0.9,
+        });
+        const { fadeIn } = fade_animationDcRL9lcm.useFade(this.dialogElement, {
+            duration: 100,
+        });
+        setGrowIn();
+        await timeline_animationCgHCo_Ho.parallel(fadeIn, growIn).start();
+    }
+    /**
+     * Call this method to hide the dialog, making it disappear from view.
+     */
+    async close() {
+        this.open = false;
+        this.allowScroll();
+        const { growOut } = grow_animationD7ep_aVl.useGrow(this.contentElement, {
+            duration: 150,
+            amount: 0.85,
+        });
+        const { fadeOut } = fade_animationDcRL9lcm.useFade(this.dialogElement, {
+            duration: 150,
+        });
+        await timeline_animationCgHCo_Ho.parallel(growOut, fadeOut).start();
+        this.dialogElement.close();
+    }
+    /**
+     * Sets the autofocus on the first focusable element in the dialog.
+     */
+    setAutofocus() {
+        const focusableElements = index_esmD3eWMME9.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) {
+            events_utilsB6GgGra_.addEventListeners(this.triggerClickEvents, this.triggerElement, this);
+            this.eventsAttached = true;
+        }
+    }
+    /**
+     * Prevents the body from scrolling when the dialog is open.
+     * Compensates for scrollbar width to prevent layout shift.
+     */
+    preventScroll() {
+        // Calculate scrollbar width
+        const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+        // Apply overflow hidden and padding compensation
+        document.documentElement.style.overflow = 'hidden';
+        document.documentElement.style.paddingRight = `${scrollBarWidth}px`;
+    }
+    /**
+     * Allows the body to scroll when the dialog is closed.
+     * Removes the applied overflow and padding styles.
+     */
+    allowScroll() {
+        // Remove the applied styles
+        document.documentElement.style.removeProperty('overflow');
+        document.documentElement.style.removeProperty('padding-right');
+    }
+    ensureFormId(formElement) {
+        if (!formElement.id) {
+            formElement.id = `dialog-form-${v4BdYh22OP.v4()}`;
+        }
+        return formElement.id;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    async handleDialogOpenChange(isOpen) {
+        if (isOpen) {
+            this.show();
+            this.openChanged.emit(isOpen);
+        }
+        else {
+            this.close();
+            this.openChanged.emit(isOpen);
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LISTENERS
+    /**
+     * 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')
+            return;
+        if (!this.open)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const hasOpenPopover = this.checkForOpenPopovers();
+        if (!this.undismissable && !hasOpenPopover) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.close();
+        }
+    }
+    //#endregion LISTENERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    /**
+     * Lifecycle method that runs before the component loads.
+     * Looks for passed header, and footer elements, either by their slot
+     * attribute or by their tag name (for dialog header/footer)
+     */
+    componentWillLoad() {
+        if (!this.headerElement)
+            this.headerElement =
+                this.el.querySelector('[slot="header"]') ??
+                    this.el.querySelector('nv-dialogheader');
+        if (!this.footerElement)
+            this.footerElement =
+                this.el.querySelector('[slot="footer"]') ??
+                    this.el.querySelector('nv-dialogfooter');
+        // Initial form check
+        this.checkForForm();
+    }
+    componentDidRender() {
+        this.triggerElement = this.el.querySelector('[slot="trigger"]');
+        this.attachEventListeners();
+    }
+    componentDidLoad() {
+        if (this.open) {
+            this.show();
+        }
+        // Only set autofocus if the prop is true and no element already has autofocus
+        if (this.autofocus && !this.dialogElement.querySelector('[autofocus]')) {
+            this.setAutofocus();
+        }
+        // Additional form check in case form was added after initial load
+        this.checkForForm();
+        // this.setupContentBodyListeners();
+    }
+    disconnectedCallback() {
+        if (this.triggerElement && !this.eventsAttached && !this.controlled) {
+            events_utilsB6GgGra_.removeEventListeners(this.triggerClickEvents, this.triggerElement, this);
+            this.eventsAttached = false;
+        }
+        this.allowScroll();
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const hasForm = this.form || this.el.querySelector('form');
+        return (index.h(index.Host, { key: '3117cc6be5dfcdb0fd561bb7b8cc0179233adca5' }, index.h("slot", { key: '3462bbebcb37fe65ef192b47562ee554263d8e3d', name: "trigger" }), index.h("dialog", { key: '2baee57bc9924ac6a7f0e5511228877283c67b7e', 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: clsxChV9xqsO.clsx({ full: this.full }) }, index.h("div", { key: '6083efe9e58d402c6df91f57bf45ca2ea77acb3b', class: "backdrop", ref: el => (this.backdropElement = el) }, index.h("div", { key: 'e133552c05d709d9fb95ca97d4fae1fbba135585', class: "content", ref: el => (this.contentElement = el) }, !this.undismissable && (index.h("nv-button", { key: '81830f0546f280cf2401f765252fee0a464fca2e', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDialogClose, "aria-label": "Close dialog" }, index.h("nv-icon", { key: '95a5eff054aad7385c440c1c1833d994b21c0583', name: "x", size: "sm" }))), this.headerElement ? (index.h("slot", { name: "header" })) : (index.h("nv-dialogheader", { id: "dialog-header" })), index.h("div", { key: '8ec787b70862976f09f8bbaa2f2acbd743abd9c5', class: "content-body", id: "dialog-content" }, index.h("slot", { key: '6939345af1fa362fe9575948f099cf19dee54590' })), this.footerElement ? (index.h("slot", { name: "footer" })) : (index.h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? constantsBReL3Lsa.ButtonType.Submit : constantsBReL3Lsa.ButtonType.Button, onDialogCanceled: this.handleDialogClose, undismissable: this.undismissable })))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "handleDialogOpenChange": 0
+            }]
+    }; }
+};
+NvDialog.style = nvDialogCss();
+
+exports.nv_dialog = NvDialog;

package/dist/cjs/{nv-dialogfooter_2.entry-Dn16bI8a.js → nv-dialogfooter_2.entry-D6lzC-3S.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-DUlunl9a.js');
 var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
-const nvDialogfooterCss = "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}";
+const nvDialogfooterCss = () => `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}`;
 
 const NvDialogfooter = class {
     constructor(hostRef) {
@@ -20,7 +20,6 @@ const NvDialogfooter = class {
             this.internals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
-        this.hasSlot = false;
         /****************************************************************************/
         //#region PROPERTIES
         /**
@@ -75,37 +74,30 @@ const NvDialogfooter = class {
     //#endregion METHODS
     /****************************************************************************/
     //#region LIFECYCLE
-    componentWillLoad() {
-        // Check if there are any child elements that don't have a slot attribute
-        this.hasSlot = Array.from(this.el.childNodes).some(node => {
-            return (node.nodeType === Node.ELEMENT_NODE &&
-                !node.hasAttribute('slot'));
-        });
-    }
-    componentDidLoad() {
+    componentDidRender() {
         // Set the default button type based on the form property
-        this.primaryButtonType =
-            this.primaryButtonType || this.form
+        if (!this.primaryButtonType) {
+            this.primaryButtonRef.type = this.form
                 ? constantsBReL3Lsa.ButtonType.Submit
                 : constantsBReL3Lsa.ButtonType.Button;
+        }
     }
     //#endregion LIFECYCLE
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '0048aeb5ba7d8919e94f3dff06dddd1bdff813bb' }, !this.hasSlot ? (index.h(index.Fragment, null, !this.undismissable && (index.h("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), index.h("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (index.h("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (index.h("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (index.h("slot", null))));
+        return (index.h(index.Host, { key: '31d3490d2a966b28d3f23bf7409186c10463f765' }, index.h("slot", { key: '21c8a3431ad6ec95d7d8467d3a273f730a10984b' }, index.h(index.Fragment, { key: '6400d911813010cc012d1b982f5ebdcb9f589b87' }, !this.undismissable && (index.h("nv-button", { key: '29d8b79619aa6a225b3fe9eb123e166646cb910b', onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), index.h("nv-button", { key: '76cd9d05c3830a7d9d8bd040aa4ecb38da190644', 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 && (index.h("nv-icon", { key: '5ff1d8988d480dff0c12be00962a0470ef8adccf', slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (index.h("nv-icon", { key: 'b1330826bcc205529a301378685ff72d7d3c53f6', slot: "trailing-icon", name: this.trailingIcon, size: "sm" })))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
 };
-NvDialogfooter.style = nvDialogfooterCss;
+NvDialogfooter.style = nvDialogfooterCss();
 
-const nvDialogheaderCss = "nv-dialogheader{padding:var(--dialog-header-padding-top) var(--dialog-header-padding-x) var(--dialog-header-padding-bottom) var(--dialog-header-padding-x);justify-content:space-between;align-items:flex-start;align-self:stretch}nv-dialogheader .heading{color:var(--color-content-high-text);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-lg);font-style:normal;font-weight:var(--font-weight-medium-emphasis);padding-right:var(--spacing-7);line-height:var(--leading-px-6);letter-spacing:var(--letter-spacing-heading-xs)}nv-dialogheader .subheading{color:var(--color-content-low-text);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-sm);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-sm);}";
+const nvDialogheaderCss = () => `nv-dialogheader{padding:var(--dialog-header-padding-top) var(--dialog-header-padding-x) var(--dialog-header-padding-bottom) var(--dialog-header-padding-x);justify-content:space-between;align-items:flex-start;align-self:stretch}nv-dialogheader .heading{color:var(--color-content-high-text);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-lg);font-style:normal;font-weight:var(--font-weight-medium-emphasis);padding-right:var(--spacing-7);line-height:var(--leading-px-6);letter-spacing:var(--letter-spacing-heading-xs)}nv-dialogheader .subheading{color:var(--color-content-low-text);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-sm);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-sm);}`;
 
 const NvDialogheader = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.hasSlot = false;
         /****************************************************************************/
         //#region PROPERTIES
         /**
@@ -115,23 +107,13 @@ const NvDialogheader = class {
     }
     //#endregion PROPERTIES
     /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillLoad() {
-        // Check if there are any child elements that don't have a slot attribute
-        this.hasSlot = Array.from(this.el.childNodes).some(node => {
-            return (node.nodeType === Node.ELEMENT_NODE &&
-                !node.hasAttribute('slot'));
-        });
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'e3390a18cd40f00dd70f71b436d3603fdcb2b337' }, !this.hasSlot ? (index.h(index.Fragment, null, index.h("div", { class: "heading" }, this.heading), index.h("div", { class: "subheading" }, this.subheading))) : (index.h("slot", null))));
+        return (index.h(index.Host, { key: 'a608cbe8b942b1444d973a5f3d8c97183e76fd0a' }, index.h("slot", { key: '525dd320304a01682926208674db6210e4e2dd2a' }, index.h(index.Fragment, { key: '14f7f8e787941dbf2d9e00f8a8a5d2e25d82d056' }, index.h("div", { key: '00131448954f8390e145e458c71705850b19ec48', class: "heading" }, this.heading), index.h("div", { key: '8cd3ee3d6aacb5f54499ea59b9e915efe4c5e33c', class: "subheading" }, this.subheading)))));
     }
     get el() { return index.getElement(this); }
 };
-NvDialogheader.style = nvDialogheaderCss;
+NvDialogheader.style = nvDialogheaderCss();
 
 exports.nv_dialogfooter = NvDialogfooter;
 exports.nv_dialogheader = NvDialogheader;