@nova-design-system/nova-react 3.0.0-beta.43 → 3.0.0-beta.44

package/dist/cjs/nv-fielddate.entry-Bofdd2rE.js

@@ -0,0 +1,278 @@
+'use strict';
+
+var index = require('./index-wDACGzKb.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-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}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)}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 .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>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{align-self:stretch;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{align-self:stretch;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.dateChange = index.createEvent(this, "dateChange");
+        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).
+         */
+        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;
+        /**
+         * Custom actions to display in the footer
+         * JSON array of objects with the following properties:
+         * - label: string
+         * - onClick: function
+         * @default '[]'
+         */
+        this.shortcuts = '[]';
+        /**
+         * Disabled dates ISO string array
+         * @default '[]'
+         */
+        this.disabledDates = '[]';
+        /**
+         * 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 dateChange event.
+         * @param {Event} event - The input event.
+         */
+        this.handleInput = (event) => {
+            if (this.readonly || this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            const input = event.target;
+            this.singleValue = input.value;
+            this.dateChange.emit({ value: 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;
+            }
+        };
+    }
+    //#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;
+        this.singleValue = value;
+        this.dateChange.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: 'c7df11a97881887a55ebcedcb2b92aa1ac24097e' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'a1b973f2de3b2510e7ed9c4a02d38ebc96cf5261', htmlFor: this.inputId }, index.h("slot", { key: '8a236ef847c3c65994fa47fad12f7c1a84820859', name: "label" }, this.label))), index.h("nv-popover", { key: '76448ee54d85eeed56bc700b6cf5c92bfbad75b3', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '1e3610ab28f294d1075aa78a971ee80a2c5f67bc', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '1ddf6042b74ba760238a92a4bd76e1385ed5b964', name: "before-input" }), index.h("div", { key: 'ed60189f121928bc42fdf6f419a92fe2733ad2a3', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '27d9c9302a8cb2d9d803020e2bc7b86b8c2c673b', name: "leading-input" }), index.h("input", { key: 'c8edffba97c6c51ef545c218459a8ce80698b3c4', id: this.inputId, ref: e => (this.inputElement = e), 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 }), index.h("nv-iconbutton", { key: 'e69bf0edb9726c201659f5a4aa7453eb3f5067ac', 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: 'd8231b608d9d08abb88e261118f9dd02cf8f5c2c', name: "after-input" })), index.h("div", { key: 'c8bb3d4a753e8ad311db1947717f1dad109999c1', slot: "content" }, index.h("nv-calendar", { key: 'bd73bc48c48e708f3655c112b874135003f1a16f', 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 }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'dee7ad7eaa2854756e616ef033264c4a2cf8f96c', class: "description" }, index.h("slot", { key: '5556239ae6ed962cd2d51944d2f394f8d7741fb0', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '82ba5366e053563fe5fc9471493fb99c78bf078f', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '1fda22554d69a5998b99d3f8c95362a926b44fb3' })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+};
+NvFielddate.style = NvFielddateStyle0;
+
+exports.nv_fielddate = NvFielddate;

package/dist/cjs/nv-fielddate.entry-CIo_61Dc.js

@@ -0,0 +1,278 @@
+'use strict';
+
+var index = require('./index-CtI3SivD.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-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}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)}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 .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>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{align-self:stretch;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{align-self:stretch;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.dateChange = index.createEvent(this, "dateChange");
+        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).
+         */
+        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;
+        /**
+         * Custom actions to display in the footer
+         * JSON array of objects with the following properties:
+         * - label: string
+         * - onClick: function
+         * @default '[]'
+         */
+        this.shortcuts = '[]';
+        /**
+         * Disabled dates ISO string array
+         * @default '[]'
+         */
+        this.disabledDates = '[]';
+        /**
+         * 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 dateChange event.
+         * @param {Event} event - The input event.
+         */
+        this.handleInput = (event) => {
+            if (this.readonly || this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            const input = event.target;
+            this.singleValue = input.value;
+            this.dateChange.emit({ value: 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;
+            }
+        };
+    }
+    //#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;
+        this.singleValue = value;
+        this.dateChange.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: 'c7df11a97881887a55ebcedcb2b92aa1ac24097e' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'a1b973f2de3b2510e7ed9c4a02d38ebc96cf5261', htmlFor: this.inputId }, index.h("slot", { key: '8a236ef847c3c65994fa47fad12f7c1a84820859', name: "label" }, this.label))), index.h("nv-popover", { key: '76448ee54d85eeed56bc700b6cf5c92bfbad75b3', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '1e3610ab28f294d1075aa78a971ee80a2c5f67bc', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '1ddf6042b74ba760238a92a4bd76e1385ed5b964', name: "before-input" }), index.h("div", { key: 'ed60189f121928bc42fdf6f419a92fe2733ad2a3', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '27d9c9302a8cb2d9d803020e2bc7b86b8c2c673b', name: "leading-input" }), index.h("input", { key: 'c8edffba97c6c51ef545c218459a8ce80698b3c4', id: this.inputId, ref: e => (this.inputElement = e), 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 }), index.h("nv-iconbutton", { key: 'e69bf0edb9726c201659f5a4aa7453eb3f5067ac', 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: 'd8231b608d9d08abb88e261118f9dd02cf8f5c2c', name: "after-input" })), index.h("div", { key: 'c8bb3d4a753e8ad311db1947717f1dad109999c1', slot: "content" }, index.h("nv-calendar", { key: 'bd73bc48c48e708f3655c112b874135003f1a16f', 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 }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'dee7ad7eaa2854756e616ef033264c4a2cf8f96c', class: "description" }, index.h("slot", { key: '5556239ae6ed962cd2d51944d2f394f8d7741fb0', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '82ba5366e053563fe5fc9471493fb99c78bf078f', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '1fda22554d69a5998b99d3f8c95362a926b44fb3' })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+};
+NvFielddate.style = NvFielddateStyle0;
+
+exports.nv_fielddate = NvFielddate;