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

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

@@ -0,0 +1,355 @@
+'use strict';
+
+var index = require('./index-B_VOAJzk.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: '093caee1d7944ccded9cd64f579057492e0d0493' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '423a473a9d996cc57efdf140440d9c8282c47552', htmlFor: this.startInputId }, index.h("slot", { key: '9c0e45cc247755fa4e01c2a1f47ed55ee26d5120', name: "label" }, this.label))), index.h("nv-popover", { key: '7c80be4f96c66bef3f06da587db9f316b2bc7a8b', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '84d7bb82e508521c80d5aa28e5738b95a6d88301', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '6e26220a3d633dd70a538cc1039db23518013eac', name: "before-input" }), index.h("div", { key: '6d4cc658e1aa63d62f55acc5cad858a5269f3629', class: "input-container" }, index.h("slot", { key: 'e71bbd1de9fb33b95ba0e71a8de19e9d0acfeb56', name: "leading-input" }), index.h("div", { key: '7f48156f1a9c18ff71a6a21aa5ddb8f3e72fa03c', class: "range-inputs" }, index.h("input", { key: '306a3feeeb8af8e340427a240f36cd38c5be8ee9', 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: 'b49d1c29dc4cc6c9fd2452212781a326bc673a93', 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: '39c7a7e3ab83f9231ffd2df9d31d451939868aff', stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: 'c3ad84053b33be954398f387ee58c680a8f11420', d: "M18 9l3 3l-3 3" }), index.h("path", { key: 'd2ec3d45a4b599ff12b054c8f027652f64da09f0', d: "M15 12h6" }), index.h("path", { key: '509aac76d4974dc4a522f6a37d20be6847f8fbc7', d: "M6 9l-3 3l3 3" }), index.h("path", { key: 'c3e97c1c2b42b66197ce1d7b0b4b09bad8780bea', d: "M3 12h6" })), index.h("input", { key: 'fa3c9a646a96a078a7e5b5360847f4ba4d5e132d', 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: 'e38df040bf7450f1aefe5f5d2d4e824935ddb2f9', 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: 'd60c491f4688d9e04888af97d027fa7e02492f6c', name: "after-input" })), index.h("div", { key: '2b54c1c5c19b6dff615850d151cb52bccbd322fc', slot: "content" }, index.h("nv-calendar", { key: '11d1c70f9e3e5ce1979f7127d828fc06f2b52078', 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: '609d5a80059699ffad7272459975ee4ac04fabd3', class: "description" }, index.h("slot", { key: '472e10256149d7729186152da03e356da1360ded', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'a2e3f0db10b38d4e37616ef0df0c28c31c1480c6', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '8ee594b994a8e86909bf47718f20b9d1f2a653db' })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+};
+NvFielddaterange.style = NvFielddaterangeStyle0;
+
+exports.nv_fielddaterange = NvFielddaterange;