@nova-design-system/nova-react 3.21.0 → 3.22.0

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-accordion-item.entry-5DF2ffDE.js → nv-accordion-item.entry-BuTvA6w9.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 var collapse_animation6e0b08df = require('./collapse.animation-6e0b08df-AHWzNGm_.js');
 require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
 require('react');

package/dist/cjs/{nv-accordion.entry-CPB1HBT1.js → nv-accordion.entry-Dtsfw6He.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-alert.entry-jPxt1obA.js → nv-alert.entry-TIdfdU7Y.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
 var collapse_animation6e0b08df = require('./collapse.animation-6e0b08df-AHWzNGm_.js');

package/dist/cjs/{nv-avatar.entry-zmnREEN-.js → nv-avatar.entry-CaxrhPuw.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
 require('react');

package/dist/cjs/{nv-badge_2.entry-DtkQx_M9.js → nv-badge_2.entry-CfYvTZxX.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var collapse_animation6e0b08df = require('./collapse.animation-6e0b08df-AHWzNGm_.js');
 var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');
@@ -203,7 +203,7 @@ const NvFielddropdownitemcheck = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '124db3918761db1f6e308ac3df5859a97b178085', onClick: this.handleClick }, index.h("nv-fieldcheckbox", { key: '6d76719952e26b0106a3e288731dd6a1d0b1fd1b', checked: this.checked, name: this.label || this.value, label: this.label || this.value, labelPlacement: "after", description: this.description, disabled: this.disabled, tabindex: "-1", onCheckedChanged: this.onFieldcheckboxChanged }, index.h("slot", { key: 'ce4c4617739a9c26c735a53480177402d5ce60ea' }), index.h("slot", { key: 'fed41bcc827d3621f41b9a9b309ad9a2eb6d26ab', name: "main" }), index.h("slot", { key: '69a21ab4968097afde6d4528dca6e8c6e47dc583', name: "label" }), index.h("slot", { key: '3693201bae40bc035bb3b6ca7fee97970953b5b5', name: "description" }))));
+        return (index.h(index.Host, { key: '1687dc92f82edea9c1da273c0bd3c45f788a1d82', onClick: this.handleClick }, index.h("nv-fieldcheckbox", { key: '78c36b53395398068513256f044a10cd44fc8d98', checked: this.checked, name: this.label || this.value, label: this.label || this.value, labelPlacement: "after", description: this.description, disabled: this.disabled, tabindex: "-1", onCheckedChanged: this.onFieldcheckboxChanged }, index.h("slot", { key: 'af95c41a46d57060b62098cc4735a8aef0326223' }), index.h("slot", { key: '0bf00132a35df36f3a4e8dc40610a107c1786eab', name: "main" }), index.h("slot", { key: '3ce40d59700f4e8b764aeac25e39976329422b67', name: "label" }), index.h("slot", { key: 'edf7025cebd62843b55f92014d12905574166dd7', name: "description" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/{nv-breadcrumb.entry-DHAe5FxQ.js → nv-breadcrumb.entry-BCZ4MmfD.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-breadcrumbs.entry-C7XepUqF.js → nv-breadcrumbs.entry-DwzCE7F6.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-button.entry-Dg1knj3Y.js → nv-button.entry-Cr_86bcZ.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-buttongroup.entry-Dlim9p8N.js → nv-buttongroup.entry-CWjRoHY1.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-calendar.entry-rL5_GdQg.js → nv-calendar.entry-CXfwNt6G.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
 var _commonjsHelpers1789f0cf = require('./_commonjsHelpers-1789f0cf-BJu3ubxk.js');
 require('react');

package/dist/cjs/{nv-col.entry-CnbFx7h1.js → nv-col.entry-CJLDS3LY.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-datagrid.entry-CjUfR4ha.js → nv-datagrid.entry-Cns8XSud.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-datagridcolumn.entry-BiuYIp4q.js → nv-datagridcolumn.entry-CFFAipHF.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-dialog.entry-fDywe5i2.js → nv-dialog.entry-CDSK9pUH.js}

@@ -1,7 +1,10 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
-var events_utilsFe1d907f = require('./events.utils-fe1d907f-01N__3wY.js');
+var index = require('./index-WPRkQD3O.js');
+var grow_animation24ad5cf8 = require('./grow.animation-24ad5cf8-LUp_ITEx.js');
+var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');
+require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
+var timeline_animation79215cd4 = require('./timeline.animation-79215cd4-KteJaZPb.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
@@ -542,7 +545,7 @@ var tabbable = function tabbable(container, options) {
   return sortByOrder(candidates);
 };
 
-const nvDialogCss = "dialog{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;max-height:90vh;overflow:hidden;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)}dialog.full{width:90vw}dialog::backdrop{opacity:var(--components-overlay-opacity);background:var(--components-overlay-background)}dialog .content{display:flex;flex-direction:column;align-items:flex-start;height:fit-content;max-height:90vh;overflow:hidden}dialog .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}dialog .content .content-body{overflow:auto;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%}dialog .content .content-body::-webkit-scrollbar{width:6px;height:6px}dialog .content .content-body::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}dialog .content .content-body::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}";
+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{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%}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}";
 const NvDialogStyle0 = nvDialogCss;
 
 const NvDialog = class {
@@ -609,13 +612,30 @@ const NvDialog = class {
                 this.close();
             }
         };
-        this.handleClickOutside = (event) => {
-            if (event.target === this.dialogElement) {
+        /**
+         * 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
     /****************************************************************************/
@@ -629,7 +649,18 @@ const NvDialog = class {
         /** 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_animation9b939939.useFade(this.dialogElement);
+        setFadeOut();
         this.dialogElement.showModal();
+        const { setGrowIn, growIn } = grow_animation24ad5cf8.useGrow(this.contentElement, {
+            duration: 100,
+            amount: 0.9,
+        });
+        const { fadeIn } = fade_animation9b939939.useFade(this.dialogElement, {
+            duration: 100,
+        });
+        setGrowIn();
+        await timeline_animation79215cd4.parallel(fadeIn, growIn).start();
     }
     /**
      * Call this method to hide the dialog, making it disappear from view.
@@ -637,6 +668,14 @@ const NvDialog = class {
     async close() {
         this.open = false;
         this.allowScroll();
+        const { growOut } = grow_animation24ad5cf8.useGrow(this.contentElement, {
+            duration: 150,
+            amount: 0.85,
+        });
+        const { fadeOut } = fade_animation9b939939.useFade(this.dialogElement, {
+            duration: 150,
+        });
+        await timeline_animation79215cd4.parallel(growOut, fadeOut).start();
         this.dialogElement.close();
     }
     /**
@@ -666,7 +705,7 @@ const NvDialog = class {
      */
     attachEventListeners() {
         if (this.triggerElement && !this.eventsAttached && !this.controlled) {
-            events_utilsFe1d907f.addEventListeners(this.triggerClickEvents, this.triggerElement, this);
+            grow_animation24ad5cf8.addEventListeners(this.triggerClickEvents, this.triggerElement, this);
             this.eventsAttached = true;
         }
     }
@@ -719,23 +758,17 @@ const NvDialog = class {
     handleKeyDown(event) {
         if (event.key !== 'Escape')
             return;
-        if (this.undismissable) {
+        if (!this.open)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const hasOpenPopover = this.checkForOpenPopovers();
+        if (!this.undismissable && !hasOpenPopover) {
             event.preventDefault();
             event.stopPropagation();
-        }
-        else {
             this.close();
         }
     }
-    /**
-     * 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);
-    }
     //#endregion LISTENERS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -773,10 +806,11 @@ const NvDialog = class {
         this.attachEventListeners();
         // Additional form check in case form was added after initial load
         this.checkForForm();
+        // this.setupContentBodyListeners();
     }
     disconnectedCallback() {
         if (this.triggerElement && !this.eventsAttached && !this.controlled) {
-            events_utilsFe1d907f.removeEventListeners(this.triggerClickEvents, this.triggerElement, this);
+            grow_animation24ad5cf8.removeEventListeners(this.triggerClickEvents, this.triggerElement, this);
             this.eventsAttached = false;
         }
         this.allowScroll();
@@ -786,7 +820,7 @@ const NvDialog = class {
     //#region RENDER
     render() {
         const hasForm = this.form || this.el.querySelector('form');
-        return (index.h(index.Host, { key: 'b32680019247cf7e39b5861a77dce61e08eadd7b' }, index.h("slot", { key: '104978b5cccd97997955a6c0db21f9549643f40a', name: "trigger" }), index.h("dialog", { key: '951a58755ac49f6c2b2f427599d5bc2540c65e2e', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx297c1ffe.clsx({ full: this.full }) }, index.h("div", { key: '96b727e70efe35991086ead905f925af28808cb8', class: "content" }, !this.undismissable && (index.h("nv-button", { key: '36f2214d2ed81d7b85c3c523f490e75ca2bffc68', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDialogClose, "aria-label": "Close dialog" }, index.h("nv-icon", { key: '7a50fc4e330e7ab67bba0fa429c5cd92630014bc', name: "x", size: "sm" }))), this.headerElement ? (index.h("slot", { name: "header" })) : (index.h("nv-dialogheader", { id: "dialog-header" })), index.h("div", { key: 'cf4269a73467794d0158a4e56f34e2a81edd6643', class: "content-body", id: "dialog-content" }, index.h("slot", { key: 'f91e72aafdd2f5de65ae78262f274b83bd37560d' })), this.footerElement ? (index.h("slot", { name: "footer" })) : (index.h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? constants69bafca2.ButtonType.Submit : constants69bafca2.ButtonType.Button, onDialogCanceled: this.handleDialogClose, undismissable: this.undismissable }))))));
+        return (index.h(index.Host, { key: '91b36e5daac0251997c7a6794166794f1e89087f' }, index.h("slot", { key: 'abeef317af74093c9b09fa6f2d300c23bbde54a6', name: "trigger" }), index.h("dialog", { key: '1eb417dc921bca7837aa05aad9c252fba7d9d920', 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: clsx297c1ffe.clsx({ full: this.full }) }, index.h("div", { key: '8ec55c461a747ebb4556fbf791ee1d66d3bcc51a', class: "backdrop", ref: el => (this.backdropElement = el) }, index.h("div", { key: '373beedad09464f3473935e0464b3f51133e0372', class: "content", ref: el => (this.contentElement = el) }, !this.undismissable && (index.h("nv-button", { key: '5e94d056687837b017991f54df6cf350159addcc', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDialogClose, "aria-label": "Close dialog" }, index.h("nv-icon", { key: '98db7848b9796589b9e7670c62a26417228a15d6', name: "x", size: "sm" }))), this.headerElement ? (index.h("slot", { name: "header" })) : (index.h("nv-dialogheader", { id: "dialog-header" })), index.h("div", { key: '611eb7914b65d5a27513f91eb458a578dbc63734', class: "content-body", id: "dialog-content" }, index.h("slot", { key: 'caf21876e6a33e997eccdc577fb43d6e63fcfc90' })), this.footerElement ? (index.h("slot", { name: "footer" })) : (index.h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? constants69bafca2.ButtonType.Submit : constants69bafca2.ButtonType.Button, onDialogCanceled: this.handleDialogClose, undismissable: this.undismissable })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-dialogfooter_2.entry-CckfZ_QW.js → nv-dialogfooter_2.entry-To_dGUn4.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
 require('react');
 require('react-dom');
@@ -93,7 +93,7 @@ const NvDialogfooter = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '0868c3af73f89219eee7c006b4ddca47c6da29b0' }, !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: '908abbe8e2e9aa215641dd056c70dc16f36c3ac3' }, !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))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
@@ -128,7 +128,7 @@ const NvDialogheader = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'f91a9aea8aa7116266f52bb356ef2ec493df6354' }, !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: '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))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/{nv-fieldcheckbox.entry-WmfLxGad.js → nv-fieldcheckbox.entry-fdonR07Z.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
@@ -119,13 +119,13 @@ const NvFieldcheckbox = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '62195333f84808381f19ca4017916380d20d493f', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("div", { key: '65f02aee06eacecf83c5297d87130bbe9f85b19c', class: "input-container" }, index.h("input", { key: 'c3e8fcb41c835f0eba254f9e77de749b7dc6349e', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
+        return (index.h(index.Host, { key: '4db161f34d188b5370f28a39ec9637d269719b04', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("div", { key: '7608f50840faf35c4da8dbfcc8240becece6f609', class: "input-container" }, index.h("input", { key: '733ad01f2cadd1e17d6bfc40022ef9ab1db93f0a', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
                 if (el) {
                     el.indeterminate = this.indeterminate;
                 }
-            } }), index.h("span", { key: '439a8c467373d734293012514cdb22c419b534ae', class: "icon" }, this.checked && !this.indeterminate && (index.h("slot", { key: '335a92ed1431fe96af3c7c6fac2f4245c0d4caaa', name: "checked-icon" }, index.h("svg", { key: '67d97efca27a97c7db77d9f8c182a21fbd21d13c', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '9cb6730b00813e8d4fe6fa14549de6f2a41ea068', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (index.h("slot", { key: 'e47b17269156f72ddaf7af1ecc818ae5b6b8c0d3', name: "indeterminate-icon" }, index.h("svg", { key: '4748acc27a70e74f9228cdb6e41eae4b1ae82559', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '40748b36b277c1ed6ea8fc8f82f4cd687b2f6e3a', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("slot", { key: '0fa9e559cefb8169c20b171fcbb6c1786fd6b3ae' }), index.h("div", { key: '44eef633025d1a7606979d4d8374c2a04081f45c', class: "text-container" }, index.h("slot", { key: 'b43251a02b15431f5399c3bced485b89741e069e', name: "main" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '7781451a357961ce1606b18c590baa344df4ff95', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: 'b420ad1dbdc05a5c57d0b45e62176866ec0527ca', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '67715bef879e0778b58648b83135edefdbdba53d', class: "description" }, index.h("slot", { key: 'b1d4d21e83130e19e94efa915abd6661c027bbce', name: "description" }, this.description)))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '157df3faf2cadb4014ba8475c99cf68d86da9f63', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '42aa95b2332618120d846fa481a1b30b7edeccca', name: "error-description" }, this.errorDescription))))));
+            } }), index.h("span", { key: '81da5960abee0aa2c74f10612d05388e427b3a1a', class: "icon" }, this.checked && !this.indeterminate && (index.h("slot", { key: 'e257ebad9a1c23bc77961645dabe6e0fc8c51440', name: "checked-icon" }, index.h("svg", { key: 'd4005dfd634169aa14140c7eba1e0ac63e28342d', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '1817c25edf09f09d4317d9e41b52484883c7a943', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (index.h("slot", { key: '043148db3518e99f2850ffa4b3622f7ae3c654a7', name: "indeterminate-icon" }, index.h("svg", { key: 'b8a67cfa8d0f880657b62b89ddae7a238b22bc26', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: 'd63f610ff5cca552d295de18dffeda84cbd370ac', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("slot", { key: 'e4befe30753cd2f76da4af10e648704068f7ce55' }), index.h("div", { key: '281b4046dbeb8b8dcb05fc154b65ed822fa45960', class: "text-container" }, index.h("slot", { key: '8e40b1e52c55fa45b38bec26e6b20da90c8553ed', name: "main" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'ad2e4a47d1d5a218835b410579e7e93febd08d15', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '815d03f2c69465e430178c29a885ad770e2c561f', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '22159e2cb8c4897507da91ebee09502922093ead', class: "description" }, index.h("slot", { key: '61b277015ecb4e0e3b813e45dbb6cd7ebe89506b', name: "description" }, this.description)))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '924d333e443c943b5fe37f31e3191d231b9d87e1', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '2469d3f6cf2121b489b637138642417d27556740', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/{nv-fielddate.entry-GLGb7tzu.js → nv-fielddate.entry-C3pXtMHL.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 var inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
@@ -106,17 +106,17 @@ const NvFielddate = class {
          * @param {MouseEvent} event - The click event.
          */
         this.handleClickOutside = (event) => {
-            if (this.open && this.el && !this.el.contains(event.target)) {
+            var _a;
+            if (!(event.target instanceof Node))
+                return;
+            if (!((_a = this.el) === null || _a === void 0 ? void 0 : _a.contains(event.target)))
                 this.open = false;
-            }
         };
         /**
          * Focuses the input when the input container is clicked.
          * @param {MouseEvent} event - The click event.
          */
         this.handleInputContainerClick = (event) => {
-            // Stop propagation to prevent closing parent dialogs
-            event.stopPropagation();
             if (this.readonly || this.disabled) {
                 event.preventDefault();
                 return;
@@ -179,12 +179,10 @@ const NvFielddate = class {
          * Toggles the opening/closing of the popover.
          * @param {MouseEvent} event - The click event.
          */
-        this.toggleCalendar = (event) => {
+        this.toggleCalendar = () => {
             if (this.readonly || this.disabled) {
                 return;
             }
-            // Stop propagation to prevent closing parent dialogs
-            event.stopPropagation();
             this.open = !this.open;
         };
     }
@@ -261,9 +259,6 @@ const NvFielddate = class {
     //#endregion METHODS
     /****************************************************************************/
     //#region LIFECYCLE
-    connectedCallback() {
-        document.addEventListener('click', this.handleClickOutside);
-    }
     componentWillLoad() {
         if (this.value) {
             this.singleValue = this.value;
@@ -290,7 +285,6 @@ const NvFielddate = class {
         }
     }
     disconnectedCallback() {
-        document.removeEventListener('click', this.handleClickOutside);
         if (this.inputElement &&
             this.inputElement.inputmask) {
             this.inputElement.inputmask.remove();
@@ -345,6 +339,9 @@ const NvFielddate = class {
     handleClosePopover() {
         this.open = false;
     }
+    handleDocumentClick(event) {
+        this.handleClickOutside(event);
+    }
     handleKeyDown(event) {
         if (event.key === 'Escape') {
             this.open = false;
@@ -368,13 +365,13 @@ const NvFielddate = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '0ec615c05a7f830586f21a6e26a62cbbec4902b0' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '1b1814a4ab2ccef80d2ee641d2624397f6b953d1', htmlFor: this.inputId }, index.h("slot", { key: '853d2f3ef6561dd05ccd438c717a866a62f4791a', name: "label" }, this.label))), index.h("nv-popover", { key: '3259f86dbb8051a9ca10fe3a63b5716dc24b356e', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", strategy: "fixed", open: this.open }, index.h("div", { key: 'd6f40610224724396ce6a1b5857f6baa6b308172', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '9736e07f75aff0c74d23198648f6266854c4f523', name: "before-input" }), index.h("div", { key: 'c7019e5f0c7a88458f3dc1759b4d7d1d5f098dc9', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '1c8fcc1f3cb6dfe5016f09780b5c4085eb53bf9b', name: "leading-input" }), index.h("input", { key: 'b1482ebabf4753dacb434774df3247c0ea9b885b', id: this.inputId, ref: this.setInputRef, placeholder: this.placeholder ||
-                this.convertToInputmaskFormat(this.dateFormat), name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" }), this.error && (index.h("nv-icon", { key: '7a9448bd1aef0dcf95183651b07621cebdeec467', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'c7329b1feaca5f1bcdaae5e8398a6357bb228333', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'd26593800bc0f65438906c576adbefabc841081a', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
+        return (index.h(index.Host, { key: 'c8b62c90ddfde96e12cb63aafba29d5b507286c6' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '761e06fd5d55b23946a87b86403105be049bbb4b', htmlFor: this.inputId }, index.h("slot", { key: '73676bbc15ddc90172e0d1a6da0c84bb21e433a1', name: "label" }, this.label))), index.h("nv-popover", { key: 'dddd5f5619c6696b1a7b9991c94fba01e3710199', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '28bcfe3c9a50b81b1c2565b1dbab0479cf0927c0', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '9ff4bfecd08b05c3425baa16f56da95584a33977', name: "before-input" }), index.h("div", { key: '8cfb31352d12b45d4450fabeb84328bfb9644ee4', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'ac99e0f250644eef55a24979f92890b04c03179e', name: "leading-input" }), index.h("input", { key: 'dd490963055df6295d6a04eda58d44857d827255', id: this.inputId, ref: this.setInputRef, placeholder: this.placeholder ||
+                this.convertToInputmaskFormat(this.dateFormat), name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" }), this.error && (index.h("nv-icon", { key: '16b6825561152e5157aca753082c7229d15e2c46', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '4780677cf8da9866d2fa4d40557b564b8920b065', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'c6bd82b770b28f35b6716abc8cba5a28aa13dd56', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
             ,
-            size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '7308a0126263ca8f0182bfbbc5305d0392fe6187', name: "after-input" })), index.h("div", { key: '25f181caaa5fa66d0245de5d050f41f603bae804', slot: "content" }, index.h("nv-calendar", { key: '0ade256f483d9c7d3c7a3af47790646510a59c2e', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, onValueChanged: this.handleCalendarValueChanged }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'a6b011fb140ed508a9681e9dd0635261db705c7c', class: "description" }, index.h("slot", { key: 'dfffc39d6fd525a359ff72f1ccf263f1f2a57274', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'd421e5bf8f9839ce636007864fddfb24bac43631', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: 'b8e8b003f1fca9a499ab276bf8717f018d33fbb5' })));
+            size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '85ed704fa118dc5087af5ce8e791e91a3c210093', name: "after-input" })), index.h("div", { key: 'ad9eaa9cedb72c56d8d5b201904259798a790aa4', slot: "content" }, index.h("nv-calendar", { key: '79abc83113d0a14bdfcb19e693b6f5d94adaa071', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, onValueChanged: this.handleCalendarValueChanged }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '8d3620b3ddb001c5ed1ba0557310a7bf4af4c5e0', class: "description" }, index.h("slot", { key: 'b80b706332d733476feec054737f35a4f008a078', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '976a1e236e6391ef7e8aeac0b56c1fd815bb9640', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: 'eb645c44cde2c175892ed31326d71897e3a5062c' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-fielddaterange.entry-C8gXNY2P.js → nv-fielddaterange.entry-CjVVPEK_.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 var inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
@@ -227,12 +227,10 @@ const NvFielddaterange = class {
          * Toggles the opening/closing of the popover.
          * @param {MouseEvent} event - The click event.
          */
-        this.toggleCalendar = (event) => {
+        this.toggleCalendar = () => {
             if (this.readonly || this.disabled) {
                 return;
             }
-            // Stop propagation to prevent closing parent dialogs
-            event.stopPropagation();
             this.open = !this.open;
         };
     }
@@ -522,12 +520,12 @@ const NvFielddaterange = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '091fcbf743d63bce095fe2f0dfe2c3b62eb27691' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '6566223deb5070b16724fdffa5223f3142abe8a8', htmlFor: this.startInputId }, index.h("slot", { key: 'e26f1c52a4c9326506752679a8cca1952a7a16cc', name: "label" }, this.label))), index.h("nv-popover", { key: 'f88e0162e05a5267fe79edfce881302959324d0c', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", strategy: "fixed", open: this.open }, index.h("div", { key: '9891bd8f655bb197937a4cb749ae6aab04dd7d03', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '501373a4a2cd17a8ff0e51f8bb6bd7812686d96f', name: "before-input" }), index.h("div", { key: '67586c4999a0f5eb7261486162be293ad3a7af88', class: "input-container" }, index.h("slot", { key: '6f47145fe7a8de22311e5bbf7dbda3f9ad3a7516', name: "leading-input" }), index.h("div", { key: 'e3d5a24a8874709ef4ee2075934824664817e23c', class: "range-inputs" }, index.h("input", { key: '15d3ff16f47fe17b72a697e9155cc448253fd9e2', id: this.startInputId, type: "text", placeholder: this.startPlaceholder ||
-                this.convertToInputmaskFormat(this.dateFormat), name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), index.h("div", { key: 'f5401156bcf4f3815bab6151446f0d610c15fdd4', class: "range-separator" }), index.h("input", { key: '0c00bf69390ff60d14cdbaea4bb50ef0b2bad4f6', id: this.endInputId, type: "text", placeholder: this.endPlaceholder ||
-                this.convertToInputmaskFormat(this.dateFormat), name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (index.h("nv-icon", { key: '12edaf5750b1859bcf2760a5879e2c95587d56fd', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'f5022132ee6771922e84d942764516c9e1beb539', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '8938c06c316d7fdae873d7ee0f967d56c70824a1', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '9915b8477bc690f3137b5a9aa6d1b05e7836a951', name: "after-input" })), index.h("div", { key: '6068c57cf56b056ff5420923864a94472dbac32a', slot: "content" }, index.h("nv-calendar", { key: '8dd945abd1a9f16f38474fa091dfb8d4919887a0', ref: el => (this.calendarElement = el), dateFormat: this.dateFormat, value: this.value, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '7ef39c67687d0bd02e3f7df90a3d219961074602', class: "description" }, index.h("slot", { key: '8d7a226adcf892da6851406d45c18dfcb2a7f9c7', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '23ed909597234f6dde3ace8de00b891e9b6ac862', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '34d6bf60a2dab0d3f167ae775e3a43997ae2fa42' })));
+        return (index.h(index.Host, { key: '9f0ce8b2e6579ea6225dfbac7cb75cf78ea0c5f5' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '9adfefaeda1116c4b3dfa297529aa77a48b66cfe', htmlFor: this.startInputId }, index.h("slot", { key: '819fcfcf8ee7b649e3271d9c8ae24a4b70a60c81', name: "label" }, this.label))), index.h("nv-popover", { key: 'f689f4796b739ca1651cb812c428663e5935fa64', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'c5f3174c497a74205a4ab5e289ededbc2ab6ca3f', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '08e0703992304fe911a2ff4eef74023c8832629b', name: "before-input" }), index.h("div", { key: '9bc9c65f34a2de1c9f8054ccc038258982033e1b', class: "input-container" }, index.h("slot", { key: '47dbf93940e9c452d20b67b81fb7abd9b807af0d', name: "leading-input" }), index.h("div", { key: 'ea4587f7c5013cbd8d7e093aa85532438c18b5ab', class: "range-inputs" }, index.h("input", { key: '544297b36fb3646178c663d6aaa22c2cd3e0616b', id: this.startInputId, type: "text", placeholder: this.startPlaceholder ||
+                this.convertToInputmaskFormat(this.dateFormat), name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), index.h("div", { key: '15862aa6acde78f9da8433ded18b5a9ca8508ff5', class: "range-separator" }), index.h("input", { key: 'f481feb34af3f5581f2d97bafaa126f306aae12b', id: this.endInputId, type: "text", placeholder: this.endPlaceholder ||
+                this.convertToInputmaskFormat(this.dateFormat), name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (index.h("nv-icon", { key: '9a4a155d4e6ab389406ad14cc29e8fa25e578ce9', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '19969e5286a666fceb583de8901191595329f380', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '76a17a3d44ce189128467997434e34e82d607363', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '53c374d1628c396015f7006ad63c294932d5e78e', name: "after-input" })), index.h("div", { key: 'f5d53344987a39a54ac933cc94c802212b98c651', slot: "content" }, index.h("nv-calendar", { key: '4992731905d118e806a9a22df0413bdfb350f61e', ref: el => (this.calendarElement = el), dateFormat: this.dateFormat, value: this.value, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '396e2f1e53b4e7cd6233993c10aac1b1001d6a3c', class: "description" }, index.h("slot", { key: 'fccf3a987ed03560d8eb8a3657ca3ce9f291493c', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'e76e336e460ed64a05fd1748859f159ce3b74120', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: 'be76d31f0eeaf50e589f0ab317e04bd3be3d9ba4' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {