@nova-design-system/nova-react 3.2.0 → 3.4.0

package/dist/cjs/{nv-col.entry-C6oEkSbI.js → nv-col.entry-PJML3P46.js}

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

package/dist/cjs/{nv-datagrid.entry-xhQP6JJP.js → nv-datagrid.entry-Bpwt9yDb.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-B2jv2KXv.js');
+var index = require('./index-CrgVjOZF.js');
 var dom_utilsAc71e0ef = require('./dom.utils-ac71e0ef-CmIwRr6O.js');
-var constantsB97e736d = require('./constants-b97e736d-BzFAKCkR.js');
+var constants4faa1fae = require('./constants-4faa1fae-BzFAKCkR.js');
 require('react');
 
 /**
@@ -3317,6 +3317,7 @@ const NvDatagrid = class {
         index.registerInstance(this, hostRef);
         this.action = index.createEvent(this, "action");
         this.selectedRows = index.createEvent(this, "selectedRows");
+        this.stateChanged = index.createEvent(this, "stateChanged");
         this.templateCache = new Map();
         this.headerTemplateCache = new Map();
         this.minPageIndex = 1;
@@ -3328,7 +3329,7 @@ const NvDatagrid = class {
         this.globalFilterSearchTerm = '';
         this.columnData = [];
         this.paginationState = null;
-        this.sorting = [];
+        this.sortingState = [];
         this.rowSelectionState = {};
         //#endregion STATES
         /****************************************************************************/
@@ -3408,6 +3409,10 @@ const NvDatagrid = class {
          * Whether to enable row selection for the data grid.
          */
         this.enableRowSelection = false;
+        /**
+         * The overall state
+         */
+        this.state = null;
         this.debouncedFilter = debounce((value) => {
             var _a;
             (_a = this.table) === null || _a === void 0 ? void 0 : _a.setGlobalFilter(value);
@@ -3459,9 +3464,9 @@ const NvDatagrid = class {
                 return;
             const nextOrder = header.column.getNextSortingOrder();
             switch (nextOrder) {
-                case constantsB97e736d.SortingPossibility.Asc:
+                case constants4faa1fae.SortingPossibility.Asc:
                     return 'Sort ascending';
-                case constantsB97e736d.SortingPossibility.Desc:
+                case constants4faa1fae.SortingPossibility.Desc:
                     return 'Sort descending';
                 default:
                     return 'Clear sort';
@@ -3685,10 +3690,10 @@ const NvDatagrid = class {
         if (this.enableSorting) {
             tableOptions.getSortedRowModel = getSortedRowModel();
             tableOptions.enableSorting = this.enableSorting;
-            tableOptions.state.sorting = this.sorting;
+            tableOptions.state.sorting = this.sortingState;
             tableOptions.onSortingChange = updater => {
-                const newSorting = typeof updater === 'function' ? updater(this.sorting) : updater;
-                this.sorting = newSorting; // Will automatically trigger the searchTerm watcher and update the table
+                const newSorting = typeof updater === 'function' ? updater(this.sortingState) : updater;
+                this.sortingState = newSorting; // Will automatically trigger the searchTerm watcher and update the table
             };
         }
         if (this.enableRowSelection) {
@@ -4153,10 +4158,10 @@ const NvDatagrid = class {
         if (!header.column.getCanSort())
             return null;
         const sortState = header.column.getIsSorted();
-        if (sortState === constantsB97e736d.SortingPossibility.Asc) {
+        if (sortState === constants4faa1fae.SortingPossibility.Asc) {
             return (index.h("div", { class: "inline-flex align-middle" }, index.h("nv-icon", { name: "arrow-up" })));
         }
-        if (sortState === constantsB97e736d.SortingPossibility.Desc) {
+        if (sortState === constants4faa1fae.SortingPossibility.Desc) {
             return (index.h("div", { class: "inline-flex align-middle" }, index.h("nv-icon", { name: "arrow-down" })));
         }
         return null;
@@ -4226,7 +4231,7 @@ const NvDatagrid = class {
             this.table.options.state.pagination = newValue;
         }
     }
-    handleSorting(newValue) {
+    handleSortingState(newValue) {
         if (!this.table) {
             console.warn('Table is not initialized yet.');
             return;
@@ -4259,6 +4264,33 @@ const NvDatagrid = class {
             this.table.options.state.rowSelection = newValue;
         }
     }
+    handleStateChange(newValue) {
+        if (newValue) {
+            // Only update internal state if values are different to avoid loops
+            if (this.globalFilterSearchTerm !== newValue.globalFilterSearchTerm) {
+                this.globalFilterSearchTerm = newValue.globalFilterSearchTerm;
+            }
+            if (JSON.stringify(this.paginationState) !==
+                JSON.stringify(newValue.paginationState)) {
+                this.paginationState = newValue.paginationState;
+            }
+            if (JSON.stringify(this.sortingState) !==
+                JSON.stringify(newValue.sortingState)) {
+                this.sortingState = newValue.sortingState;
+            }
+        }
+    }
+    // Add watchers for internal state to emit changes
+    handleInternalStateChange() {
+        // Only emit if the state has actually changed
+        const newState = {
+            globalFilterSearchTerm: this.globalFilterSearchTerm,
+            paginationState: this.paginationState,
+            sortingState: this.sortingState,
+        };
+        // Emit the new state and let the parent component update the prop
+        this.stateChanged.emit(newState);
+    }
     //#endregion WATCHERS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -4289,7 +4321,7 @@ const NvDatagrid = class {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : (_c = (_b = this.table) === null || _b === void 0 ? void 0 : _b.getRowModel()) === null || _c === void 0 ? void 0 : _c.rows;
-        return (index.h(index.Host, { key: '90be657fa9c7f8755391f8d91418399de742ae1f' }, index.h("div", { key: 'f28596438b7c9c22b34789236c5faa644938d1dc', class: "hidden" }, index.h("slot", { key: 'fdc1670cc6bafb5f1efa8c63d41acbfd15659de6' })), index.h("slot", { key: '65afa2282af4842bcb23f8baa592545fe3b74fa3', name: "before" }), this.enableGlobalFilter && this.table && (index.h("div", { key: '8628a23712471690b6a6239a289dd8263aed423c', class: `search-container justify-${this.globalFilterPosition}` }, index.h("nv-fieldtext", { key: '42c56dd6ba426e2045c02b3754fae3562632c49f', value: this.globalFilterSearchTerm, onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns..." }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("div", null, index.h("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", null, this.parsedColumns.length > 0 && headerGroups
+        return (index.h(index.Host, { key: '95d3cea67d17f1aab33e7bc054161760e6d6df54' }, index.h("div", { key: 'b6cbdf841ab4ba64d2ccbf49fc6caf9ef082c7ee', class: "hidden" }, index.h("slot", { key: '18dde7efeec5c1bc38a044a683910db41f70e22d' })), index.h("slot", { key: 'd3ffb496e938ee3c91c5a7422357cbee90100d84', name: "before" }), this.enableGlobalFilter && this.table && (index.h("div", { key: '0ab19e6c1c585d4e77004ec9238dba3baff83614', class: `search-container justify-${this.globalFilterPosition}` }, index.h("nv-fieldtext", { key: '76722d31da818102347278c7b62a93deaa9c29a1', value: this.globalFilterSearchTerm, onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns..." }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("div", null, index.h("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", null, this.parsedColumns.length > 0 && headerGroups
             ? headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map(headerGroup => (index.h("tr", { key: headerGroup.id }, headerGroup.headers.map(header => {
                 return this.getHeaderCell(header);
             }))))
@@ -4300,7 +4332,7 @@ const NvDatagrid = class {
                 return (index.h("td", { key: cell.id, "data-row-id": rowId }, this.flexRender(cell.column.columnDef.cell, cell.getContext())));
             })));
         }))), this.table && this.enableRowSelection ? (index.h("tfoot", null, index.h("tr", null, index.h("td", { colSpan: 20 }, this.enableRowSelection && this.table ? (index.h("div", null, this.rowSelectionState &&
-            Object.keys(this.rowSelectionState).length > 0 ? (index.h("span", null, Object.keys(this.rowSelectionState).length, " of", ' ', ((_e = (_d = this.table.getPreFilteredRowModel()) === null || _d === void 0 ? void 0 : _d.rows) === null || _e === void 0 ? void 0 : _e.length) || 0, ' ', "Total Rows Selected")) : (index.h("span", null, "No rows selected")))) : null)))) : null), this.getPagination())), index.h("slot", { key: 'e1641d8fd103b0802e1df4f0848f0de921260065', name: "after" })));
+            Object.keys(this.rowSelectionState).length > 0 ? (index.h("span", null, Object.keys(this.rowSelectionState).length, " of", ' ', ((_e = (_d = this.table.getPreFilteredRowModel()) === null || _d === void 0 ? void 0 : _d.rows) === null || _e === void 0 ? void 0 : _e.length) || 0, ' ', "Total Rows Selected")) : (index.h("span", null, "No rows selected")))) : null)))) : null), this.getPagination())), index.h("slot", { key: 'ee4cdbb4683a3da20154fd60580d694d8f78feb8', name: "after" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -4308,11 +4340,12 @@ const NvDatagrid = class {
         "data": ["parseData"],
         "parsedColumns": ["handleParsedChange"],
         "parsedData": ["handleParsedChange"],
-        "globalFilterSearchTerm": ["handleGlobalFilterSearchTerm"],
-        "paginationState": ["handlePaginationState"],
-        "sorting": ["handleSorting"],
+        "globalFilterSearchTerm": ["handleGlobalFilterSearchTerm", "handleInternalStateChange"],
+        "paginationState": ["handlePaginationState", "handleInternalStateChange"],
+        "sortingState": ["handleSortingState", "handleInternalStateChange"],
         "pageSize": ["handlePageSize"],
-        "rowSelectionState": ["handleRowSelectionState"]
+        "rowSelectionState": ["handleRowSelectionState"],
+        "state": ["handleStateChange"]
     }; }
 };
 NvDatagrid.style = NvDatagridStyle0;

package/dist/cjs/{nv-datagridcolumn.entry-CjYmo4fM.js → nv-datagridcolumn.entry-Dfifeiia.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2jv2KXv.js');
+var index = require('./index-CrgVjOZF.js');
 require('react');
 
 const NvDatagridcolumn = class {

package/dist/cjs/{nv-dialog.entry-mxETaZbc.js → nv-dialog.entry-eUEzDdrS.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-B2jv2KXv.js');
+var index = require('./index-CrgVjOZF.js');
 var events_utilsFe1d907f = require('./events.utils-fe1d907f-01N__3wY.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
-var constantsB97e736d = require('./constants-b97e736d-BzFAKCkR.js');
+var constants4faa1fae = require('./constants-4faa1fae-BzFAKCkR.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
 
@@ -782,7 +782,7 @@ const NvDialog = class {
     //#region RENDER
     render() {
         const hasForm = this.form || this.el.querySelector('form');
-        return (index.h(index.Host, { key: 'c1eb9b79f52028c3ef7a57bad99260a45b678eb5' }, index.h("slot", { key: '65a624853aa7242dc849a1196c6b5b8c331d426f', name: "trigger" }), index.h("dialog", { key: '17369b9be014e9136d77f99628b4bc8184d36370', 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: '8a17cd8deff162b333e2ac90c487454743d76f3d', class: "content" }, !this.undismissable && (index.h("nv-button", { key: 'd61a63785ce284ce2039be5c62d6e2bcce2a9b44', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleCloseButton, "aria-label": "Close dialog" }, index.h("nv-icon", { key: '5a0adb449785bc684c41d0e35aad08ccb725386a', name: "x", size: "sm" }))), this.headerElement ? (index.h("slot", { name: "header" })) : (index.h("nv-dialogheader", { id: "dialog-header" })), index.h("div", { key: '7c39e52d8fe6fc9ab2fdc2574a0c105d790bbfbe', class: "content-body", id: "dialog-content" }, index.h("slot", { key: '038d9f3623177af5d996631dd9ae25fec49fd778' })), this.footerElement ? (index.h("slot", { name: "footer" })) : (index.h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? constantsB97e736d.ButtonType.Submit : constantsB97e736d.ButtonType.Button, onDialogCanceled: this.handleCancelButton, undismissable: this.undismissable }))))));
+        return (index.h(index.Host, { key: 'c1eb9b79f52028c3ef7a57bad99260a45b678eb5' }, index.h("slot", { key: '65a624853aa7242dc849a1196c6b5b8c331d426f', name: "trigger" }), index.h("dialog", { key: '17369b9be014e9136d77f99628b4bc8184d36370', 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: '8a17cd8deff162b333e2ac90c487454743d76f3d', class: "content" }, !this.undismissable && (index.h("nv-button", { key: 'd61a63785ce284ce2039be5c62d6e2bcce2a9b44', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleCloseButton, "aria-label": "Close dialog" }, index.h("nv-icon", { key: '5a0adb449785bc684c41d0e35aad08ccb725386a', name: "x", size: "sm" }))), this.headerElement ? (index.h("slot", { name: "header" })) : (index.h("nv-dialogheader", { id: "dialog-header" })), index.h("div", { key: '7c39e52d8fe6fc9ab2fdc2574a0c105d790bbfbe', class: "content-body", id: "dialog-content" }, index.h("slot", { key: '038d9f3623177af5d996631dd9ae25fec49fd778' })), this.footerElement ? (index.h("slot", { name: "footer" })) : (index.h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? constants4faa1fae.ButtonType.Submit : constants4faa1fae.ButtonType.Button, onDialogCanceled: this.handleCancelButton, undismissable: this.undismissable }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-dialogfooter_2.entry-DnLg2DHy.js → nv-dialogfooter_2.entry-HQyyE6VN.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-B2jv2KXv.js');
-var constantsB97e736d = require('./constants-b97e736d-BzFAKCkR.js');
+var index = require('./index-CrgVjOZF.js');
+var constants4faa1fae = require('./constants-4faa1fae-BzFAKCkR.js');
 require('react');
 
 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}";
@@ -54,7 +54,7 @@ const NvDialogfooter = class {
         /**
          * Sets the type of the primary button.
          */
-        this.primaryButtonType = constantsB97e736d.ButtonType.Button;
+        this.primaryButtonType = constants4faa1fae.ButtonType.Button;
         //#endregion EVENTS
         /****************************************************************************/
         //#region METHODS

package/dist/cjs/{nv-fieldcheckbox.entry-Be9__i15.js → nv-fieldcheckbox.entry-C5AMgttR.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2jv2KXv.js');
+var index = require('./index-CrgVjOZF.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');

package/dist/cjs/nv-fielddate.entry-Dkqz-UqJ.js

@@ -0,0 +1,303 @@
+'use strict';
+
+var index = require('./index-CrgVjOZF.js');
+var inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+require('./_commonjsHelpers-1789f0cf-BJu3ubxk.js');
+
+const nvFielddateCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fielddate{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fielddate[fluid]:not([fluid=false]){max-width:unset}nv-fielddate[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddate[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fielddate[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fielddate[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddate label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddate nv-popover{width:100%;display:block}nv-fielddate nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto}nv-fielddate nv-popover [slot=content]{display:block;width:100%}nv-fielddate nv-popover .datepicker-container{border:none}nv-fielddate .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddate .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fielddate .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddate .input-wrapper .input-container:focus-within,nv-fielddate .input-wrapper .input-container:focus-within:hover,nv-fielddate .input-wrapper .input-container:focus,nv-fielddate .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddate .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddate .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddate .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;}nv-fielddate .input-wrapper .input-container input:focus{outline:none}nv-fielddate .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddate .input-wrapper .input-container input[type=password]::-ms-clear,nv-fielddate .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddate .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddate .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddate .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddate .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddate .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
+const NvFielddateStyle0 = nvFielddateCss;
+
+const NvFielddate = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChanged = index.createEvent(this, "valueChanged");
+        this.popoverId = v4A79185f4.v4();
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the input element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated.
+         */
+        this.inputId = v4A79185f4.v4();
+        /**
+         * Disables the input field.
+         */
+        this.disabled = false;
+        /**
+         * Sets the input field as read-only.
+         */
+        this.readonly = false;
+        /**
+         * Marks the input field as required.
+         */
+        this.required = false;
+        /**
+         * Indicates an error state.
+         */
+        this.error = false;
+        /**
+         * Indicates a success state.
+         */
+        this.success = false;
+        /**
+         * Autofocus the input when the component is mounted.
+         */
+        this.autofocus = false;
+        /**
+         * The initial value of the input (date in string format).
+         * @bind value
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        // eslint-disable-next-line @stencil-community/strict-mutable
+        this.value = '';
+        /**
+         * The current value of the input date in string format.
+         */
+        this.singleValue = '';
+        /**
+         * Controls the opening of the popover.
+         */
+        this.open = false;
+        /**
+         * First day of the week 0 = Sunday, 1 = Monday, etc.
+         * @default 1
+         */
+        this.firstDayOfWeek = 1;
+        /**
+         * Number of calendars to display
+         * @default 1
+         */
+        this.numberOfCalendars = 1;
+        /**
+         * Minimum date for selection ISO string format, ex: 2025-01-01
+         */
+        this.min = '';
+        /**
+         * Maximum date for selection ISO string format, ex: 2025-12-31
+         */
+        this.max = '';
+        /** Locale for date formatting
+         * @default 'en-BE'
+         */
+        this.locale = 'en-BE';
+        /** Date format ex: YYYY-MM-DD, DD-MM-YYYY, etc.
+         * @default 'YYYY-MM-DD'
+         * @note If the date format is in UTC mode, the date will be displayed in UTC time.
+         * @note If the date format is not in UTC mode, the date will be displayed in the local time.
+         */
+        this.dateFormat = 'YYYY-MM-DD';
+        /**
+         * Footer placement
+         * @default 'bottom'
+         */
+        this.shortcutsPlacement = 'bottom';
+        /**
+         * Show action buttons
+         * @default false
+         */
+        this.showActions = false;
+        /**
+         * Allows the field to stretch and fill the entire width of its container.
+         */
+        this.fluid = false;
+        /**
+         * Closes the popover when a click is detected outside the component.
+         * @param {MouseEvent} event - The click event.
+         */
+        this.handleClickOutside = (event) => {
+            if (this.open && this.el && !this.el.contains(event.target)) {
+                this.open = false;
+            }
+        };
+        /**
+         * Focuses the input when the input container is clicked.
+         * @param {MouseEvent} event - The click event.
+         */
+        this.handleInputContainerClick = (event) => {
+            if (this.readonly || this.disabled) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            this.inputElement.focus();
+            // Select the first characters based on the date format
+            const format = this.dateFormat;
+            if (format.startsWith('DD')) {
+                this.inputElement.setSelectionRange(0, 2);
+            }
+            else if (format.startsWith('MM')) {
+                this.inputElement.setSelectionRange(0, 2);
+            }
+            else if (format.startsWith('YYYY')) {
+                this.inputElement.setSelectionRange(0, 4);
+            }
+        };
+        /**
+         * Handles the input event on the input element.
+         * Updates the singleValue and emits the valueChanged event.
+         * @param {Event} event - The input event.
+         */
+        this.handleInput = (event) => {
+            if (this.readonly || this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            const input = event.target;
+            const previousValue = this.value;
+            this.singleValue = input.value;
+            this.value = input.value;
+            // Only emit valueChanged if the value actually changed
+            if (previousValue !== input.value) {
+                this.valueChanged.emit(input.value);
+            }
+        };
+        /**
+         * Toggles the opening/closing of the popover.
+         */
+        this.toggleCalendar = () => {
+            if (this.readonly || this.disabled) {
+                return;
+            }
+            this.open = !this.open;
+        };
+        /**
+         * Handles focus events on the input element.
+         * @param {FocusEvent} event - The focus event.
+         */
+        this.handleFocus = (event) => {
+            if (this.readonly || this.disabled) {
+                event.preventDefault();
+                event.target.blur();
+                return;
+            }
+        };
+        /**
+         * Prevents the valueChanged event from the calendar from propagating up.
+         * @param {CustomEvent} event - The valueChanged event from nv-calendar.
+         */
+        this.handleCalendarValueChanged = (event) => {
+            event.stopPropagation();
+        };
+        /**
+         * Sets the reference to the popover element.
+         * @param {HTMLNvPopoverElement} el - The popover element.
+         */
+        this.setPopoverRef = (el) => {
+            this.popoverElement = el;
+        };
+        /**
+         * Sets the reference to the input element.
+         * @param {HTMLInputElement} el - The input element.
+         */
+        this.setInputRef = (el) => {
+            this.inputElement = el;
+        };
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Converts the nv-calendar date format to the format expected by Inputmask.
+     * @param {string} format - The date format.
+     * @returns {string} Format adapted for Inputmask.
+     */
+    convertToInputmaskFormat(format) {
+        switch (format) {
+            case 'DD/MM/YYYY':
+                return 'dd/mm/yyyy';
+            case 'MM/DD/YYYY':
+                return 'mm/dd/yyyy';
+            case 'YYYY-MM-DD':
+                return 'yyyy-mm-dd';
+            case 'DD.MM.YYYY':
+                return 'dd.mm.yyyy';
+            case 'YYYYMMDD':
+                return 'yyyymmdd';
+            default:
+                return format;
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    connectedCallback() {
+        document.addEventListener('click', this.handleClickOutside);
+    }
+    componentWillLoad() {
+        if (this.value) {
+            this.singleValue = this.value;
+        }
+    }
+    componentDidLoad() {
+        const inputs = this.el.querySelectorAll('.input-wrapper input');
+        inputs.forEach((input) => {
+            inputmaskEdcad3c1.Inputmask({
+                alias: 'datetime',
+                inputFormat: this.convertToInputmaskFormat(this.dateFormat),
+                placeholder: '_'.repeat(this.dateFormat.length),
+            }).mask(input);
+        });
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleClickOutside);
+    }
+    /**
+     * Handles the single date selection event from nv-calendar.
+     * Updates the input value and closes the popover.
+     * @param {CustomEvent} event - The event from nv-calendar.
+     */
+    handleSingleDateChange(event) {
+        const value = event.detail;
+        const previousValue = this.value;
+        this.singleValue = value;
+        this.value = value;
+        // Only emit valueChanged if the value actually changed
+        if (previousValue !== value) {
+            this.valueChanged.emit(value);
+        }
+        if (!this.showActions) {
+            this.open = false;
+        }
+    }
+    handleClosePopover() {
+        this.open = false;
+    }
+    handleKeyDown(event) {
+        if (!this.open) {
+            if (event.key === 'ArrowDown') {
+                this.open = true;
+                event.preventDefault();
+                return;
+            }
+            return;
+        }
+        // Verify if the popover element is defined
+        if (!this.popoverElement) {
+            console.warn('nv-fielddate -> Popover element is not defined');
+            return;
+        }
+    }
+    handleValueChange(newValue) {
+        this.singleValue = newValue;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '4af4649cc8fdc95f2f12d1c495549a006c82c742' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'c4905c94c62c8eb01120b30e3b5c16c2dafec20d', htmlFor: this.inputId }, index.h("slot", { key: 'b8e952b9a6acb9f136d3461514b82a6767723c3c', name: "label" }, this.label))), index.h("nv-popover", { key: 'de6620c60eb3db3c6f0f435977f257636be81a80', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'e2189ad3476f3d088c07153bc4c1e63357317ded', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: 'a35e545f1379c479734719d8460d5031631f5730', name: "before-input" }), index.h("div", { key: '01338c24dfff69e019ff6d2344f176effb2dac06', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'f6552d188174e77e8f75a9b0554e3ea78c57056d', name: "leading-input" }), index.h("input", { key: '1b9ad6226166b6bf08afda41f0f6b789fe12dd27', id: this.inputId, ref: this.setInputRef, placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" }), this.error && (index.h("nv-icon", { key: '0527f051261672a8df205d26dcb253c20b3dfd4b', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'ed83a0a0b7a88f392f16bf97f20885261f88665d', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '6abf3dff6a1bcc0759bea91ab3674d61f4c016c2', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
+            ,
+            size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '76d584ac756b228e356a17ad36e4558f9a497ea3', name: "after-input" })), index.h("div", { key: '4914e6fa5046fb287bedb841f2a0b71f1f86e5a3', slot: "content" }, index.h("nv-calendar", { key: 'fcfb949ee9c378aac2d7c792ed79fcb3cbf8e987', 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: '52ffcb5f41161b9dc95c0fc18a252b6568817ffb', class: "description" }, index.h("slot", { key: '91c68f28fe31f5ecfa58d80e5decb018890f18fe', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '0c0b8c65f261c2439446dd05014d172e6b829244', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: 'cf9410ad858faf59d7ada7ce70b18aa768e30a65' })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+};
+NvFielddate.style = NvFielddateStyle0;
+
+exports.nv_fielddate = NvFielddate;