@nova-design-system/nova-webcomponents 3.0.0-beta.41 → 3.0.0-beta.42

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

@@ -0,0 +1,988 @@
+import { h, Host, } from "@stencil/core";
+import Inputmask from "inputmask";
+import { v4 as uuidv4 } from "uuid";
+/**
+ * @slot default - Child content of the component.
+ * @slot leading-input - Content to be placed before the input text, within the input container.
+ * @slot before-input - Content to be placed before the input text, outside the input container.
+ * @slot after-input - Content to be placed after the input text, outside the input container.
+ * @slot label - Content to be placed as the label, will override the label prop.
+ * @slot description - Content to be placed as the description, will override the description prop.
+ * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.
+ */
+export class NvFielddaterange {
+    constructor() {
+        this.popoverId = uuidv4();
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the start input element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated.
+         */
+        this.startInputId = uuidv4();
+        /**
+         * Sets the ID for the end input element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated.
+         */
+        this.endInputId = uuidv4();
+        /**
+         * Disables both input fields.
+         */
+        this.disabled = false;
+        /**
+         * Sets both input fields as read-only.
+         */
+        this.readonly = false;
+        /**
+         * Marks both input fields as required.
+         */
+        this.required = false;
+        /**
+         * Indicates an error state.
+         */
+        this.error = false;
+        /**
+         * Indicates a success state.
+         */
+        this.success = false;
+        /**
+         * Autofocus the start input when the component is mounted.
+         */
+        this.shouldAutoFocus = false;
+        /**
+         * The initial value of the date range (in string format).
+         */
+        this.value = '';
+        /**
+         * The current value of the start date in string format.
+         */
+        this.startValue = '';
+        /**
+         * The current value of the end date in string format.
+         */
+        this.endValue = '';
+        /**
+         * 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 2
+         */
+        this.numberOfCalendars = 2;
+        /**
+         * 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'
+         */
+        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 = '[]';
+        /**
+         * Show week numbers
+         * @default true
+         */
+        // eslint-disable-next-line @stencil-community/ban-default-true
+        this.showWeekNumbers = true;
+        /**
+         * Disabled dates ISO string array
+         * @default '[]'
+         */
+        this.disabledDates = '[]';
+        /**
+         * Closes the popover when a click is detected outside the component.
+         * @param {MouseEvent} event - The mouse event
+         */
+        this.handleClickOutside = (event) => {
+            if (this.open && this.el && !this.el.contains(event.target)) {
+                this.open = false;
+            }
+        };
+        /**
+         * Handles the input event on the start input element.
+         * @param {Event} event - The input event
+         */
+        this.handleStartInput = (event) => {
+            if (this.readonly || this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            const input = event.target;
+            this.startValue = input.value;
+            this.dateRangeChange.emit({ start: input.value, end: this.endValue });
+        };
+        /**
+         * Handles the input event on the end input element.
+         * @param {Event} event - The input event
+         */
+        this.handleEndInput = (event) => {
+            if (this.readonly || this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            const input = event.target;
+            this.endValue = input.value;
+            this.dateRangeChange.emit({ start: this.startValue, end: input.value });
+        };
+        /**
+         * Handles focus events on the input elements.
+         * @param {FocusEvent} event - The focus event
+         */
+        this.handleFocus = (event) => {
+            if (this.readonly || this.disabled) {
+                event.preventDefault();
+                event.target.blur();
+                return;
+            }
+            // Open the popover when an input is focused
+            this.open = true;
+        };
+        /**
+         * Toggles the opening/closing of the popover.
+         */
+        this.toggleCalendar = () => {
+            if (this.readonly || this.disabled) {
+                return;
+            }
+            this.open = !this.open;
+        };
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Converts the nv-calendar date format to the format expected by Inputmask.
+     * @param {string} format - The date format to convert
+     * @returns {string} The converted format for Inputmask
+     */
+    convertToInputmaskFormat(format) {
+        // Si le format n'est pas spécifié, utiliser le format par défaut YYYY-MM-DD
+        if (!format) {
+            return 'dd/mm/yyyy';
+        }
+        // Conversion des formats
+        const formatMap = {
+            'YYYY-MM-DD': 'yyyy-mm-dd',
+            'DD/MM/YYYY': 'dd/mm/yyyy',
+            'MM/DD/YYYY': 'mm/dd/yyyy',
+            'DD.MM.YYYY': 'dd.mm.yyyy',
+            'YYYYMMDD': 'yyyymmdd',
+        };
+        return formatMap[format] || 'dd/mm/yyyy';
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    connectedCallback() {
+        document.addEventListener('click', this.handleClickOutside);
+    }
+    componentWillLoad() {
+        if (this.value) {
+            try {
+                const range = JSON.parse(this.value);
+                this.startValue = range.start || '';
+                this.endValue = range.end || '';
+            }
+            catch (error) {
+                console.error('Invalid JSON for value:');
+                console.error(error);
+            }
+        }
+    }
+    componentDidLoad() {
+        const inputs = this.el.querySelectorAll('.input-wrapper input');
+        inputs.forEach((input) => {
+            const inputMask = new Inputmask({
+                alias: 'datetime',
+                inputFormat: this.convertToInputmaskFormat(this.dateFormat),
+                placeholder: '_',
+                clearIncomplete: false,
+                showMaskOnHover: false,
+                showMaskOnFocus: false,
+                clearMaskOnLostFocus: false,
+                insertMode: true,
+                rightAlign: false,
+                oncomplete: function (e) {
+                    const input = e.target;
+                    const event = new CustomEvent('input', { bubbles: true });
+                    input.dispatchEvent(event);
+                },
+            });
+            inputMask.mask(input);
+            // Set the value after applying the mask
+            if (input.name === this.startName && this.startValue) {
+                requestAnimationFrame(() => {
+                    input.value = this.startValue;
+                    const event = new CustomEvent('input', { bubbles: true });
+                    input.dispatchEvent(event);
+                });
+            }
+            else if (input.name === this.endName && this.endValue) {
+                requestAnimationFrame(() => {
+                    input.value = this.endValue;
+                    const event = new CustomEvent('input', { bubbles: true });
+                    input.dispatchEvent(event);
+                });
+            }
+        });
+    }
+    componentDidRender() {
+        const inputs = this.el.querySelectorAll('.input-wrapper input');
+        inputs.forEach((input) => {
+            const value = input.name === this.startName
+                ? this.startValue
+                : this.endName
+                    ? this.endValue
+                    : '';
+            if (value) {
+                // Make sure the value is defined both as a property and attribute
+                requestAnimationFrame(() => {
+                    input.value = value;
+                    input.setAttribute('value', value);
+                });
+            }
+        });
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleClickOutside);
+    }
+    /**
+     * Handles the range date selection event from nv-calendar.
+     * @param {CustomEvent<DateRange>} event - The custom event
+     */
+    handleRangeDateChange(event) {
+        const { start, end } = event.detail || {};
+        // Check that both dates are defined
+        if (start && end) {
+            this.startValue = start;
+            this.endValue = end;
+            this.dateRangeChange.emit({
+                start: this.startValue,
+                end: this.endValue,
+            });
+            if (!this.showActions) {
+                this.open = false;
+            }
+        }
+    }
+    handleClosePopover() {
+        this.open = false;
+    }
+    handleApplyDateRange() {
+        this.open = false;
+    }
+    /**
+     * Handles keyboard events.
+     * @param {KeyboardEvent} event - The keyboard event
+     */
+    handleKeyDown(event) {
+        if (!this.open) {
+            if (event.key === 'ArrowDown') {
+                this.open = true;
+                event.preventDefault();
+                return;
+            }
+            return;
+        }
+        if (!this.popoverElement) {
+            console.warn('nv-fielddaterange -> Popover element is not defined');
+            return;
+        }
+    }
+    handleValueChange(newValue) {
+        try {
+            const range = JSON.parse(newValue);
+            this.startValue = range.start || '';
+            this.endValue = range.end || '';
+        }
+        catch (error) {
+            console.error('Invalid JSON for value:', error);
+        }
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '47a61852ed7771a2248727193570aa2c4654b3bc' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (h("label", { key: 'a32f8796a15c40712bc0b751ab89fcf84c81dfa3', htmlFor: this.startInputId }, h("slot", { key: '549420faa870d7e8f37c4c864de00aae1682f1f9', name: "label" }, this.label))), h("nv-popover", { key: 'c93290824f1e7179f7777ef2d9d42146015ec10a', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '67d798f2c57bf7cd979386fa2c3d0eb836253af6', slot: "trigger", class: "input-wrapper" }, h("slot", { key: '53f700e97f16b40cb3e077460d41ab955cf4e86e', name: "before-input" }), h("div", { key: '5829a9716c09fc65b8300b0fe5d590a3e4d1af40', class: "input-container" }, h("slot", { key: '401508780bbac13d792d62d8368c47b4fe9fb0c1', name: "leading-input" }), h("div", { key: '2e29bd53c161d7bdf5a20e17f7b114f421bf2684', class: "range-inputs" }, h("input", { key: 'd1fed6969b96a950e6c73779ac31e7f197cdf122', id: this.startInputId, type: "text", placeholder: this.startPlaceholder, name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.shouldAutoFocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus }), h("svg", { key: '04aefcadb20a07f023c973a8ee0ce1c90e2eecd4', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon icon-tabler icons-tabler-outline icon-tabler-arrows-move-horizontal" }, h("path", { key: '372bb4b2ea27cf6aba7d9753dc25b3c9217a05c0', stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: 'ae5d178f8d00efc52317b8e44df3225c48f50571', d: "M18 9l3 3l-3 3" }), h("path", { key: '2669cb7bca3c10769fa8b7907d722e6892744dce', d: "M15 12h6" }), h("path", { key: '835d2de77d676af9806d93f9ec0e9a4a451b2463', d: "M6 9l-3 3l3 3" }), h("path", { key: '8aef1d99e102825729c4466bf57166529e927c09', d: "M3 12h6" })), h("input", { key: 'e40d1202015132524aa3d485641b9cd34d8a20a6', id: this.endInputId, type: "text", placeholder: this.endPlaceholder, name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus })), h("nv-iconbutton", { key: '8ec3ebfb4647e5fb9d89ea9f1e6a60eaa5bb1214', class: "toggle-calendar-icon", name: "calendar", 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 })), h("slot", { key: 'e6ff4ed90757947d58dfde04c7063d123a3fd9e2', name: "after-input" })), h("div", { key: 'cf7a11988d84dac287b2c524e6005aee29f05ca3', slot: "content" }, h("nv-calendar", { key: '3c896e58ba52b0dd82f73f37beb8f70b6ac3f426', dateFormat: this.dateFormat, rangeValue: this.startValue && this.endValue
+                ? JSON.stringify({
+                    start: this.startValue,
+                    end: this.endValue,
+                })
+                : '', 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" }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'f3a968ed2314ec6b0b8f1f5fed8e901e3df10402', class: "description" }, h("slot", { key: 'bdfb89b5f462046c1bcbcffdbe46b067868bb077', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'b7a01679e7d1315e3040c8b166f79affbe74d409', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (h("slot", { name: "error-description" })) : (this.errorDescription))), h("slot", { key: 'b318420f0dba209ec8dcebc06f37d94ade46ccea' })));
+    }
+    static get is() { return "nv-fielddaterange"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles/nv-fielddaterange.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles/nv-fielddaterange.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "startInputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the ID for the start input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "start-input-id",
+                "reflect": true,
+                "defaultValue": "uuidv4()"
+            },
+            "endInputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the ID for the end input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "end-input-id",
+                "reflect": true,
+                "defaultValue": "uuidv4()"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text displayed as label. A slot label can override this prop."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": true
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Description displayed below the input. A slot description can override this prop."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "description",
+                "reflect": true
+            },
+            "startPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder for the start input field."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "start-placeholder",
+                "reflect": true
+            },
+            "endPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder for the end input field."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "end-placeholder",
+                "reflect": true
+            },
+            "startName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute for the start input."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "start-name",
+                "reflect": true
+            },
+            "endName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute for the end input."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "end-name",
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables both input fields."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets both input fields as read-only."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "readonly",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks both input fields as required."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates an error state."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "errorDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error description. A slot error-description can override this prop."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error-description",
+                "reflect": true
+            },
+            "success": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates a success state."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "success",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "shouldAutoFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Autofocus the start input when the component is mounted."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "should-auto-focus",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The initial value of the date range (in string format)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "firstDayOfWeek": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "1"
+                        }],
+                    "text": "First day of the week 0 = Sunday, 1 = Monday, etc."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "first-day-of-week",
+                "reflect": true,
+                "defaultValue": "1"
+            },
+            "numberOfCalendars": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "2"
+                        }],
+                    "text": "Number of calendars to display"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "number-of-calendars",
+                "reflect": true,
+                "defaultValue": "2"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum date for selection ISO string format, ex: 2025-01-01"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum date for selection ISO string format, ex: 2025-12-31"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'en-BE'"
+                        }],
+                    "text": "Locale for date formatting"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "locale",
+                "reflect": true,
+                "defaultValue": "'en-BE'"
+            },
+            "dateFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'YYYY-MM-DD'"
+                        }],
+                    "text": "Date format ex: YYYY-MM-DD, DD-MM-YYYY, etc."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "date-format",
+                "reflect": true,
+                "defaultValue": "'YYYY-MM-DD'"
+            },
+            "shortcutsPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'bottom' | 'left' | 'right'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'bottom'"
+                        }],
+                    "text": "Footer placement"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "shortcuts-placement",
+                "reflect": true,
+                "defaultValue": "'bottom'"
+            },
+            "showActions": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Show action buttons"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-actions",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "shortcuts": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'[]'"
+                        }],
+                    "text": "Custom actions to display in the footer\nJSON array of objects with the following properties:\n- label: string\n- onClick: function"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "shortcuts",
+                "reflect": true,
+                "defaultValue": "'[]'"
+            },
+            "showWeekNumbers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Show week numbers"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-week-numbers",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "disabledDates": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'[]'"
+                        }],
+                    "text": "Disabled dates ISO string array"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled-dates",
+                "reflect": true,
+                "defaultValue": "'[]'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "startValue": {},
+            "endValue": {},
+            "open": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dateRangeChange",
+                "name": "dateRangeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits an event when the date range changes."
+                },
+                "complexType": {
+                    "original": "DateRange",
+                    "resolved": "DateRange",
+                    "references": {
+                        "DateRange": {
+                            "location": "import",
+                            "path": "../../interfaces/dateRange",
+                            "id": "src/interfaces/dateRange.tsx::DateRange"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "rangeDateChange",
+                "method": "handleRangeDateChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "closePopover",
+                "method": "handleClosePopover",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "applyDateRange",
+                "method": "handleApplyDateRange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=nv-fielddaterange.js.map