@nova-design-system/nova-react 3.0.0-beta.40 → 3.0.0-beta.42

package/dist/cjs/nv-fielddaterange.entry-BrC5jKLp.js

@@ -0,0 +1,355 @@
+'use strict';
+
+var index = require('./index-C8UfzrMI.js');
+var inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+require('./_commonjsHelpers-1789f0cf-BJu3ubxk.js');
+
+const nvFielddaterangeCss = "nv-fielddaterange{--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-fielddaterange[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-fielddaterange[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-fielddaterange[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-fielddaterange[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddaterange 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-fielddaterange nv-popover{width:100%;display:block}nv-fielddaterange 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-fielddaterange nv-popover [slot=content]{display:block;width:100%}nv-fielddaterange .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-fielddaterange .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;position:relative;flex:1;min-width:0;padding-right:32px}nv-fielddaterange .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .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-fielddaterange .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-fielddaterange .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-fielddaterange .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-fielddaterange .input-wrapper .input-container input:focus{outline:none}nv-fielddaterange .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-fielddaterange .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddaterange .input-wrapper .input-container .toggle-calendar-icon{position:absolute;right:0;top:50%;transform:translateY(-50%)}nv-fielddaterange .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-fielddaterange .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)}nv-fielddaterange .range-inputs{display:flex;align-items:center;gap:8px;flex:1}nv-fielddaterange .range-inputs input{flex:1;border:none;outline:none;padding:0;font-size:var(--form-field-font-size);color:var(--components-form-field-content-text);background:transparent;min-width:0;text-align:center}nv-fielddaterange .range-inputs input::placeholder{color:var(--components-form-field-content-placeholder)}nv-fielddaterange .range-inputs input:disabled{cursor:not-allowed;color:var(--components-form-field-content-text);background-color:var(--components-form-field-background-disabled)}";
+const NvFielddaterangeStyle0 = nvFielddaterangeCss;
+
+const NvFielddaterange = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dateRangeChange = index.createEvent(this, "dateRangeChange");
+        this.popoverId = v4A79185f4.v4();
+        /****************************************************************************/
+        //#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 = v4A79185f4.v4();
+        /**
+         * 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 = v4A79185f4.v4();
+        /**
+         * 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 inputmaskEdcad3c1.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 (index.h(index.Host, { key: '0e64fcd77e6cfb3a11d3c28432fc9cb12a8da1e7' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'ebc0b92c9aa9812817a71214afee0e2a00e6be47', htmlFor: this.startInputId }, index.h("slot", { key: 'b5721d946c9cf260120655b2971f78cb5beb5fd5', name: "label" }, this.label))), index.h("nv-popover", { key: '0d1e8a5ce08389707897a73c212525bea1cc8bc9', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '9e4e152ce55c41b503527385e945f49b533e16dc', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: 'f648540676bc99b2df12df0c901614cfa983cf2a', name: "before-input" }), index.h("div", { key: 'fd70962dd876960e730baa0af34195927a6c9ee0', class: "input-container" }, index.h("slot", { key: '2d6cf5842840dd2ab73e949af26584c82766d3b4', name: "leading-input" }), index.h("div", { key: '4a2544f563e0eb534f1a4552ad4e22fdefba172b', class: "range-inputs" }, index.h("input", { key: '52f1d8e718e2c820dd234f458ca2f78f0fb9a181', 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 }), index.h("svg", { key: 'd680cf8432942f8de1287dc96ac9b94440d86bfb', 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" }, index.h("path", { key: 'f9a2df172086624f71dc6c7aa024e26a57a970af', stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: '16d177a36debb1bb82b07e9bb110525a87ca9534', d: "M18 9l3 3l-3 3" }), index.h("path", { key: 'acfc88eabefe9c0e5841e908efc29811f790552e', d: "M15 12h6" }), index.h("path", { key: '1a128f7219d3b39ad93fa339f515aad646917fb9', d: "M6 9l-3 3l3 3" }), index.h("path", { key: '9f6fac656f0c8236f741ce7aa1bfcb7dfe01d9ef', d: "M3 12h6" })), index.h("input", { key: '4eac74f0738ee2a95e17e44151737f2174e1eed7', 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 })), index.h("nv-iconbutton", { key: '34c064a11f99001a928e13f002ef6dc60f289c39', 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 })), index.h("slot", { key: 'f780257305c4603a6c03afac4da3097fe5615506', name: "after-input" })), index.h("div", { key: '875bbdcb2613bbed5ee559917600f345914e9d36', slot: "content" }, index.h("nv-calendar", { key: '6b472ec330bb30fde5a5f57206df07e9aff05872', 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"]')) && (index.h("div", { key: '13bafe11799c83978b30f504a7a3bc9955d429a3', class: "description" }, index.h("slot", { key: '40162db7374eb3fd82a402eff2666feb3458d1a4', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'bb0fcfb2220f3c471162ad685015889f10f94deb', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '5f2797db38630277b4053cb69b089af09ff108bd' })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+};
+NvFielddaterange.style = NvFielddaterangeStyle0;
+
+exports.nv_fielddaterange = NvFielddaterange;