@nova-design-system/nova-webcomponents 3.24.0 → 3.26.0

package/dist/components/nv-fielddaterange.js

@@ -1,670 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C63Xpg9a.js';
-import { I as Inputmask } from './p-DZJHk4fr.js';
-import { d as defineCustomElement$6 } from './p-B7VlEQVW.js';
-import { d as defineCustomElement$5 } from './p-nfYynlVq.js';
-import { d as defineCustomElement$4 } from './p-DvapDVBj.js';
-import { d as defineCustomElement$3 } from './p-COnt5ux_.js';
-import { d as defineCustomElement$2 } from './p-B9i3m6rk.js';
-import { v as v4 } from './p-BdYh22OP.js';
-
-const nvFielddaterangeCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-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;max-width:480px}nv-fielddaterange[fluid]:not([fluid=false]){max-width:unset}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-in-field)}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,nv-fielddaterange[aria-required=true] label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);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;z-index:2}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}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){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: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{box-shadow:none;border-color:var(--nv-field-border-default)}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:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fielddaterange .input-wrapper .input-container input{}nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-clear,nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddaterange .input-wrapper .input-container input{width:100%}nv-fielddaterange .input-wrapper .input-container input:focus-within,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover,nv-fielddaterange .input-wrapper .input-container input:focus,nv-fielddaterange .input-wrapper .input-container input:focus:hover{outline:var(--focus-outline-stroke) solid var(--nv-field-border-focus);outline-offset:0px}nv-fielddaterange .input-wrapper .input-container input:focus-within~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus:hover~.range-separator{background-color:transparent}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fielddaterange .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddaterange .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddaterange .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), 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:0;width:100%}nv-fielddaterange .range-inputs:focus-within{z-index: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}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)}nv-fielddaterange .range-inputs .range-separator{width:1px;height:1.5rem;background-color:var(--color-content-medium-border)}";
-
-const NvFielddaterange$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddaterange extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.dateRangeChange = createEvent(this, "dateRangeChange", 3);
-        this.valueChanged = createEvent(this, "valueChanged", 3);
-        this.popoverId = 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 = 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 = v4();
-        /**
-         * Disables both input fields.
-         */
-        this.disabled = false;
-        /**
-         * Sets both input fields as read-only.
-         */
-        this.readonly = false;
-        /**
-         * Marks both input fields as required.
-         * @note This uses the native HTML `required` attribute, which triggers browser validation.
-         */
-        this.required = false;
-        /**
-         * Marks both input fields as required for accessibility purposes without triggering
-         * native HTML validation. Use this when implementing custom validation logic.
-         * @note When set, this uses `aria-required` instead of the native `required` attribute.
-         * This allows developers to implement custom validation while maintaining accessibility.
-         * @note If this prop is not explicitly set, the component will check for the HTML attribute
-         * 'aria-required' directly to determine if it should be applied.
-         */
-        this.ariaRequiredAttr = 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.autofocus = false;
-        /**
-         * The initial value of the date range (in string format).
-         */
-        // eslint-disable-next-line @stencil-community/strict-mutable
-        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;
-        /**
-         * Allows the field to stretch and fill the entire width of its container.
-         */
-        this.fluid = false;
-        //#endregion PROPERTIES
-        /****************************************************************************/
-        //#region METHODS
-        /**
-         * Parses the unified value prop and synchronizes with internal state
-         * @param {string} value - Value to parse
-         */
-        this.parseUnifiedValue = (value) => {
-            if (!value) {
-                // Reset all selections
-                this.startValue = '';
-                this.endValue = '';
-                return;
-            }
-            const values = value
-                .split(',')
-                .map(v => v.trim())
-                .filter(Boolean);
-            if (values.length >= 2) {
-                this.startValue = values[0];
-                this.endValue = values[1];
-            }
-        };
-        /**
-         * 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.
-         * Updates internal state and calendar navigation without emitting events.
-         * @param {Event} event - The input event
-         */
-        this.handleStartInput = (event) => {
-            if (this.readonly || this.disabled) {
-                event.preventDefault();
-                return;
-            }
-            const input = event.target;
-            // Always update startValue to keep state in sync
-            this.startValue = input.value;
-            // Update calendar value for navigation (without triggering events)
-            if (this.calendarElement && input.value) {
-                // Temporarily enable navigation for keyboard input
-                this.calendarElement.removeAttribute('data-prevent-navigation');
-                // Update calendar's rangeValue to allow navigation
-                const currentValue = `${input.value},${this.endValue}`;
-                if (this.calendarElement.value !== currentValue) {
-                    this.calendarElement.value = currentValue;
-                }
-                // Restore navigation prevention after update
-                setTimeout(() => {
-                    if (this.calendarElement) {
-                        this.calendarElement.setAttribute('data-prevent-navigation', 'true');
-                    }
-                }, 100);
-            }
-        };
-        /**
-         * Handles the input event on the end input element.
-         * Updates internal state and calendar navigation without emitting events.
-         * @param {Event} event - The input event
-         */
-        this.handleEndInput = (event) => {
-            if (this.readonly || this.disabled) {
-                event.preventDefault();
-                return;
-            }
-            const input = event.target;
-            // Always update endValue to keep state in sync
-            this.endValue = input.value;
-            // Update calendar value for navigation (without triggering events)
-            if (this.calendarElement && input.value) {
-                // Temporarily enable navigation for keyboard input
-                this.calendarElement.removeAttribute('data-prevent-navigation');
-                // Update calendar's rangeValue to allow navigation
-                const currentValue = `${this.startValue},${input.value}`;
-                if (this.calendarElement.value !== currentValue) {
-                    this.calendarElement.value = currentValue;
-                }
-                // Restore navigation prevention after update
-                setTimeout(() => {
-                    if (this.calendarElement) {
-                        this.calendarElement.setAttribute('data-prevent-navigation', 'true');
-                    }
-                }, 100);
-            }
-        };
-        /**
-         * 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;
-            }
-            // Enable navigation on focus
-            if (this.calendarElement) {
-                this.calendarElement.removeAttribute('data-prevent-navigation');
-            }
-            this.open = true;
-            // Restore navigation prevention after opening
-            setTimeout(() => {
-                if (this.calendarElement) {
-                    this.calendarElement.setAttribute('data-prevent-navigation', 'true');
-                }
-            }, 300);
-        };
-        /**
-         * Toggles the opening/closing of the popover.
-         * @param {MouseEvent} event - The click event.
-         */
-        this.toggleCalendar = () => {
-            if (this.readonly || this.disabled) {
-                return;
-            }
-            this.open = !this.open;
-        };
-    }
-    /**
-     * 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) {
-        // If the format is not specified, use the default format YYYY-MM-DD
-        if (!format) {
-            return 'dd/mm/yyyy';
-        }
-        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';
-    }
-    /**
-     * Clears the current selection and resets the date range field to its initial state.
-     * This method can be called programmatically to reset the field.
-     */
-    async clear() {
-        // Reset internal state
-        this.startValue = '';
-        this.endValue = '';
-        this.value = '';
-        // Reset both input elements
-        const inputs = this.el.querySelectorAll('.input-wrapper input');
-        inputs.forEach((input) => {
-            input.value = '';
-            // Remove input mask if exists
-            if (input.inputmask) {
-                input.inputmask.remove();
-            }
-        });
-        // Emit events to notify about the change
-        this.valueChanged.emit('');
-        this.dateRangeChange.emit({ start: '', end: '' });
-        // Close the popover if open
-        this.open = false;
-        // Clear the calendar if it exists
-        if (this.calendarElement) {
-            this.calendarElement.clear();
-        }
-    }
-    updateMask() {
-        const inputs = this.el.querySelectorAll('.input-wrapper input');
-        inputs.forEach((input) => {
-            input.inputmask?.remove?.();
-            const inputMask = new Inputmask({
-                alias: 'datetime',
-                inputFormat: this.convertToInputmaskFormat(this.dateFormat),
-                placeholder: this.convertToInputmaskFormat(this.dateFormat),
-                clearIncomplete: false,
-                showMaskOnHover: false,
-                showMaskOnFocus: true,
-                clearMaskOnLostFocus: !this.open,
-                postValidation: true,
-                oncleared: (e) => {
-                    const input = e.target;
-                    if (input.id === this.startInputId) {
-                        this.startValue = '';
-                    }
-                    if (input.id === this.endInputId) {
-                        this.endValue = '';
-                    }
-                },
-                oncomplete: (e) => {
-                    const input = e.target;
-                    // Update the corresponding state based on which input completed
-                    if (input.id === this.startInputId) {
-                        this.startValue = input.value;
-                    }
-                    else if (input.id === this.endInputId) {
-                        this.endValue = input.value;
-                    }
-                    // Update unified value
-                    const newValue = `${this.startValue},${this.endValue}`;
-                    // Only emit if both dates are filled and value changed
-                    if (this.startValue && this.endValue && this.value !== newValue) {
-                        this.value = newValue;
-                        this.valueChanged.emit(this.value);
-                        // Legacy support (deprecated)
-                        this.dateRangeChange.emit({
-                            start: this.startValue,
-                            end: this.endValue,
-                        });
-                    }
-                },
-            });
-            inputMask.mask(input);
-        });
-    }
-    /**
-     * Handles the reset event from the calendar's cancel button
-     * @param {CustomEvent} event - The event emitted by the calendar
-     */
-    handleCancelDateChange(event) {
-        let isResetSingle = false;
-        let isResetRange = false;
-        if (event.type === 'singleDateChange' && event.detail === '') {
-            isResetSingle = true;
-        }
-        if (event.type === 'rangeDateChange' &&
-            typeof event.detail === 'object' &&
-            event.detail.start === '' &&
-            event.detail.end === '') {
-            isResetRange = true;
-        }
-        if (isResetSingle || isResetRange) {
-            this.startValue = '';
-            this.endValue = '';
-            // Update unified value prop
-            this.value = '';
-            this.valueChanged.emit('');
-            const inputs = this.el.querySelectorAll('.input-wrapper input');
-            inputs.forEach((input) => {
-                input.value = '';
-            });
-            // Legacy support (deprecated)
-            this.dateRangeChange.emit({ start: '', end: '' });
-        }
-    }
-    /**
-     * Handles the range date selection event from nv-calendar.
-     * @param {CustomEvent} event - The custom event
-     */
-    handleRangeDateChange(event) {
-        // Check for cancel events
-        this.handleCancelDateChange(event);
-        // Check that both dates are defined
-        const { start, end } = event.detail || {};
-        if (start && end) {
-            this.startValue = start;
-            this.endValue = end;
-            // Update unified value prop (like nv-calendar)
-            const newValue = `${start},${end}`;
-            if (this.value !== newValue) {
-                this.value = newValue;
-                this.valueChanged.emit(this.value);
-            }
-            // Legacy support (deprecated)
-            this.dateRangeChange.emit({
-                start: this.startValue,
-                end: this.endValue,
-            });
-            if (!this.showActions) {
-                this.open = false;
-            }
-        }
-    }
-    /**
-     * Handles the unified value change event from nv-calendar
-     * @param {CustomEvent} event - The custom event
-     */
-    handleCalendarValueChanged(event) {
-        const newValue = event.detail || '';
-        if (newValue !== this.value) {
-            this.value = newValue;
-            this.valueChanged.emit(newValue);
-            // Parse and update internal state
-            this.parseUnifiedValue(newValue);
-            // Legacy support - emit dateRangeChange
-            this.dateRangeChange.emit({
-                start: this.startValue,
-                end: this.endValue,
-            });
-        }
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    connectedCallback() {
-        document.addEventListener('click', this.handleClickOutside);
-    }
-    componentWillLoad() {
-        if (this.value) {
-            // Use the unified parsing method
-            this.parseUnifiedValue(this.value);
-        }
-    }
-    componentDidLoad() {
-        this.updateMask();
-        const inputs = this.el.querySelectorAll('.input-wrapper input');
-        inputs.forEach((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);
-    }
-    /* eslint-disable nova/native-event-listener */
-    handleClosePopover(event) {
-        event.stopPropagation();
-        this.open = false;
-    }
-    /* eslint-enable nova/native-event-listener */
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region LISTENERS
-    /**
-     * Handles keyboard events.
-     * @param {KeyboardEvent} event - The keyboard event
-     */
-    handleKeyDown(event) {
-        if (event.key === 'Escape') {
-            this.open = false;
-            return;
-        }
-        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;
-        }
-    }
-    //#endregion LISTENERS
-    /****************************************************************************/
-    //#region WATCHERS
-    handleValueChange(newValue) {
-        // Use the unified parsing method instead of JSON.parse
-        this.parseUnifiedValue(newValue);
-    }
-    onOpenChanged(newValue) {
-        this.updateMask();
-        if (this.contentRef) {
-            if (newValue) {
-                this.contentRef.style.transition = 'none';
-                this.contentRef.style.maxHeight = '0px';
-                requestAnimationFrame(() => {
-                    this.contentRef.style.transition =
-                        'max-height 0.18s cubic-bezier(0.4,0,0.2,1)';
-                    this.contentRef.style.maxHeight = this.contentRef.scrollHeight + 'px';
-                });
-            }
-            else {
-                this.contentRef.style.transition = 'none';
-                this.contentRef.style.maxHeight = this.contentRef.scrollHeight + 'px';
-                requestAnimationFrame(() => {
-                    this.contentRef.style.transition =
-                        'max-height 0.18s cubic-bezier(0.4,0,0.2,1)';
-                    this.contentRef.style.maxHeight = '0px';
-                });
-            }
-        }
-    }
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        // Check aria-required from multiple sources:
-        // 1. JavaScript prop (most reliable)
-        // 2. HTML attribute 'aria-required' (direct HTML)
-        // 3. HTML attribute 'aria-required-attr' (from JSX kebab-case conversion)
-        // Check aria-required from multiple sources:
-        // 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set
-        // 2. JavaScript prop (when prop is explicitly set via JavaScript)
-        // We use hasAttribute to determine if the attribute was explicitly set by the user,
-        // since the prop now defaults to false (to maintain Blazor compatibility)
-        const hasAriaRequiredAttr = this.el.hasAttribute('aria-required') ||
-            this.el.hasAttribute('aria-required-attr');
-        const ariaRequiredFromAttr = hasAriaRequiredAttr
-            ? this.el.getAttribute('aria-required') ||
-                this.el.getAttribute('aria-required-attr')
-            : null;
-        // Use aria-required if the attribute was explicitly set
-        // With reflect: true, setting the prop will also set the attribute
-        const useAriaRequired = hasAriaRequiredAttr;
-        // Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)
-        // If attribute doesn't exist, the prop was never set and we don't use aria-required
-        const ariaRequiredAttrValue = hasAriaRequiredAttr
-            ? ariaRequiredFromAttr
-            : null;
-        // Determine which attributes to use
-        // If aria-required HTML attribute is present, use it (convert string to boolean)
-        // If required is set and aria-required is not "false", use native required
-        // If aria-required is "false", don't use native required even if required is set
-        const ariaRequiredValue = useAriaRequired
-            ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
-            : undefined;
-        const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '3004a1acb1036d810b35c04f0f5f5c7a34786bc9' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (h("label", { key: '769c2e122de1845cd58bae4d1b0a5c1a0739efb8', htmlFor: this.startInputId }, h("slot", { key: 'ba6fa47c165079b5353be7b3699f677c653ebcf6', name: "label" }, this.label))), h("nv-popover", { key: '133de2a9ca92b4980c981c86460f88e745ca8b7e', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '25ab7c35536efc98d906adba5ecfc7f569ddcac9', slot: "trigger", class: "input-wrapper" }, h("slot", { key: 'a86c1d1b9265b13129da7658b66b0ab5c114f468', name: "before-input" }), h("div", { key: 'b11baa21ee22943dd42d2a03cd9767dce6085c98', class: "input-container" }, h("slot", { key: 'b1eeda185b40a099e499f76865929a3c8ec547c1', name: "leading-input" }), h("div", { key: 'e88769dd154d6a471bf55875d8962368bbeab1a8', class: "range-inputs" }, h("input", { key: '4366cd2b411ab55c037a61c7314cb0368bd8ca51', id: this.startInputId, type: "text", placeholder: this.startPlaceholder ||
-                this.convertToInputmaskFormat(this.dateFormat), name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
-                'aria-required': String(ariaRequiredValue),
-            }), autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), h("div", { key: '93846c516610323c8468cb7c16cfaf8afa648cb8', class: "range-separator" }), h("input", { key: '98213e19d18bf051c89feb15e58db6106aabc6e7', id: this.endInputId, type: "text", placeholder: this.endPlaceholder ||
-                this.convertToInputmaskFormat(this.dateFormat), name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
-                'aria-required': String(ariaRequiredValue),
-            }), value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (h("nv-icon", { key: 'c79ff3377ce9c630957167de5808e02657fb9e32', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: 'aa473931945a55c0da9aef1261ca156f4fc4ce30', name: "circle-check", class: "validation", size: "md" })), h("nv-iconbutton", { key: '456d781e8593aa34140e69088fd2efd373c247ef', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: '28db0a3f5435573a3555a2160a5748756e82a1be', name: "after-input" })), h("div", { key: 'fffa1784d7977a8fedb88a9da7932060f974aade', slot: "content" }, h("nv-calendar", { key: '19a7dbe5ddd3a1f37a73931172361e9759a6fd02', ref: el => (this.calendarElement = el), onRangeDateChange: this.handleRangeDateChange.bind(this), onValueChanged: this.handleCalendarValueChanged.bind(this), onSingleDateChange: this.handleCancelDateChange.bind(this), dateFormat: this.dateFormat, value: this.value, 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", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'db1c250e43991dcf83f71ea8d374d4763dfd24b2', class: "description" }, h("slot", { key: 'a5e2ea1648fc65f74e483179a458b00033ec26ca', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'cd7011706c4be00420168b439185d561a794807b', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (h("slot", { name: "error-description" })) : (this.errorDescription))), h("slot", { key: '47f3a04830fb4a3f7626ea5bab88b7e2d532786a' })));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "value": ["handleValueChange"],
-        "open": ["onOpenChanged"]
-    }; }
-    static get style() { return nvFielddaterangeCss; }
-}, [260, "nv-fielddaterange", {
-        "startInputId": [513, "start-input-id"],
-        "endInputId": [513, "end-input-id"],
-        "label": [513],
-        "description": [513],
-        "startPlaceholder": [513, "start-placeholder"],
-        "endPlaceholder": [513, "end-placeholder"],
-        "startName": [513, "start-name"],
-        "endName": [513, "end-name"],
-        "disabled": [516],
-        "readonly": [516],
-        "required": [516],
-        "ariaRequiredAttr": [516, "aria-required"],
-        "error": [516],
-        "errorDescription": [513, "error-description"],
-        "success": [516],
-        "autofocus": [516],
-        "value": [1537],
-        "firstDayOfWeek": [514, "first-day-of-week"],
-        "numberOfCalendars": [514, "number-of-calendars"],
-        "min": [513],
-        "max": [513],
-        "locale": [513],
-        "dateFormat": [513, "date-format"],
-        "shortcutsPlacement": [513, "shortcuts-placement"],
-        "showActions": [516, "show-actions"],
-        "shortcuts": [16],
-        "showWeekNumbers": [516, "show-week-numbers"],
-        "disabledDates": [16],
-        "fluid": [516],
-        "startValue": [32],
-        "endValue": [32],
-        "open": [32],
-        "clear": [64]
-    }, [[0, "closePopover", "handleClosePopover"], [0, "keydown", "handleKeyDown"]], {
-        "value": ["handleValueChange"],
-        "open": ["onOpenChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["nv-fielddaterange", "nv-calendar", "nv-icon", "nv-iconbutton", "nv-loader", "nv-popover"];
-    components.forEach(tagName => { switch (tagName) {
-        case "nv-fielddaterange":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, NvFielddaterange$1);
-            }
-            break;
-        case "nv-calendar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "nv-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "nv-iconbutton":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "nv-loader":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "nv-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const NvFielddaterange = NvFielddaterange$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { NvFielddaterange, defineCustomElement };
-//# sourceMappingURL=nv-fielddaterange.js.map
-
-//# sourceMappingURL=nv-fielddaterange.js.map
+import{t as e,p as t,H as r,c as i,h as n,d as a}from"./p-iXsbKJzR.js";import{I as o}from"./p-BfaMgLx7.js";import{d as s}from"./p-CEI7jWvn.js";import{d}from"./p-jZF_Ggmx.js";import{d as l}from"./p-DDqZBSGn.js";import{d as c}from"./p-CAKTe96z.js";import{d as f}from"./p-DHNSuxz-.js";import{v as h}from"./p-BdYh22OP.js";const p=t(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.dateRangeChange=i(this,"dateRangeChange",3),this.valueChanged=i(this,"valueChanged",3),this.popoverId=h(),this.startInputId=h(),this.endInputId=h(),this.disabled=!1,this.readonly=!1,this.required=!1,this.ariaRequiredAttr=!1,this.error=!1,this.success=!1,this.autofocus=!1,this.value="",this.startValue="",this.endValue="",this.open=!1,this.firstDayOfWeek=1,this.numberOfCalendars=2,this.min="",this.max="",this.locale="en-BE",this.dateFormat="YYYY-MM-DD",this.shortcutsPlacement="bottom",this.showActions=!1,this.fluid=!1,this.parseUnifiedValue=e=>{if(!e)return this.startValue="",void(this.endValue="");const t=e.split(",").map((e=>e.trim())).filter(Boolean);t.length>=2&&(this.startValue=t[0],this.endValue=t[1])},this.handleClickOutside=e=>{this.open&&this.el&&!this.el.contains(e.target)&&(this.open=!1)},this.handleStartInput=e=>{if(this.readonly||this.disabled)return void e.preventDefault();const t=e.target;if(this.startValue=t.value,this.calendarElement&&t.value){this.calendarElement.removeAttribute("data-prevent-navigation");const e=`${t.value},${this.endValue}`;this.calendarElement.value!==e&&(this.calendarElement.value=e),setTimeout((()=>{this.calendarElement&&this.calendarElement.setAttribute("data-prevent-navigation","true")}),100)}},this.handleEndInput=e=>{if(this.readonly||this.disabled)return void e.preventDefault();const t=e.target;if(this.endValue=t.value,this.calendarElement&&t.value){this.calendarElement.removeAttribute("data-prevent-navigation");const e=`${this.startValue},${t.value}`;this.calendarElement.value!==e&&(this.calendarElement.value=e),setTimeout((()=>{this.calendarElement&&this.calendarElement.setAttribute("data-prevent-navigation","true")}),100)}},this.handleFocus=e=>{if(this.readonly||this.disabled)return e.preventDefault(),void e.target.blur();this.calendarElement&&this.calendarElement.removeAttribute("data-prevent-navigation"),this.open=!0,setTimeout((()=>{this.calendarElement&&this.calendarElement.setAttribute("data-prevent-navigation","true")}),300)},this.toggleCalendar=()=>{this.readonly||this.disabled||(this.open=!this.open)}}convertToInputmaskFormat(e){return e&&{"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"}[e]||"dd/mm/yyyy"}async clear(){this.startValue="",this.endValue="",this.value="",this.el.querySelectorAll(".input-wrapper input").forEach((e=>{e.value="",e.inputmask&&e.inputmask.remove()})),this.valueChanged.emit(""),this.dateRangeChange.emit({start:"",end:""}),this.open=!1,this.calendarElement&&this.calendarElement.clear()}updateMask(){this.el.querySelectorAll(".input-wrapper input").forEach((e=>{e.inputmask?.remove?.();const t=new o({alias:"datetime",inputFormat:this.convertToInputmaskFormat(this.dateFormat),placeholder:this.convertToInputmaskFormat(this.dateFormat),clearIncomplete:!1,showMaskOnHover:!1,showMaskOnFocus:!0,clearMaskOnLostFocus:!this.open,postValidation:!0,oncleared:e=>{const t=e.target;t.id===this.startInputId&&(this.startValue=""),t.id===this.endInputId&&(this.endValue="")},oncomplete:e=>{const t=e.target;t.id===this.startInputId?this.startValue=t.value:t.id===this.endInputId&&(this.endValue=t.value);const r=`${this.startValue},${this.endValue}`;this.startValue&&this.endValue&&this.value!==r&&(this.value=r,this.valueChanged.emit(this.value),this.dateRangeChange.emit({start:this.startValue,end:this.endValue}))}});t.mask(e)}))}handleCancelDateChange(e){let t=!1,r=!1;"singleDateChange"===e.type&&""===e.detail&&(t=!0),"rangeDateChange"===e.type&&"object"==typeof e.detail&&""===e.detail.start&&""===e.detail.end&&(r=!0),(t||r)&&(this.startValue="",this.endValue="",this.value="",this.valueChanged.emit(""),this.el.querySelectorAll(".input-wrapper input").forEach((e=>{e.value=""})),this.dateRangeChange.emit({start:"",end:""}))}handleRangeDateChange(e){this.handleCancelDateChange(e);const{start:t,end:r}=e.detail||{};if(t&&r){this.startValue=t,this.endValue=r;const e=`${t},${r}`;this.value!==e&&(this.value=e,this.valueChanged.emit(this.value)),this.dateRangeChange.emit({start:this.startValue,end:this.endValue}),this.showActions||(this.open=!1)}}handleCalendarValueChanged(e){const t=e.detail||"";t!==this.value&&(this.value=t,this.valueChanged.emit(t),this.parseUnifiedValue(t),this.dateRangeChange.emit({start:this.startValue,end:this.endValue}))}connectedCallback(){document.addEventListener("click",this.handleClickOutside)}componentWillLoad(){this.value&&this.parseUnifiedValue(this.value)}componentDidLoad(){this.updateMask(),this.el.querySelectorAll(".input-wrapper input").forEach((e=>{e.name===this.startName&&this.startValue?requestAnimationFrame((()=>{e.value=this.startValue;const t=new CustomEvent("input",{bubbles:!0});e.dispatchEvent(t)})):e.name===this.endName&&this.endValue&&requestAnimationFrame((()=>{e.value=this.endValue;const t=new CustomEvent("input",{bubbles:!0});e.dispatchEvent(t)}))}))}componentDidRender(){this.el.querySelectorAll(".input-wrapper input").forEach((e=>{const t=e.name===this.startName?this.startValue:this.endName?this.endValue:"";t&&requestAnimationFrame((()=>{e.value=t,e.setAttribute("value",t)}))}))}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside)}handleClosePopover(e){e.stopPropagation(),this.open=!1}handleKeyDown(e){if("Escape"!==e.key)return this.open?void(this.popoverElement||console.warn("nv-fielddaterange -> Popover element is not defined")):"ArrowDown"===e.key?(this.open=!0,void e.preventDefault()):void 0;this.open=!1}handleValueChange(e){this.parseUnifiedValue(e)}onOpenChanged(e){this.updateMask(),this.contentRef&&(e?(this.contentRef.style.transition="none",this.contentRef.style.maxHeight="0px",requestAnimationFrame((()=>{this.contentRef.style.transition="max-height 0.18s cubic-bezier(0.4,0,0.2,1)",this.contentRef.style.maxHeight=this.contentRef.scrollHeight+"px"}))):(this.contentRef.style.transition="none",this.contentRef.style.maxHeight=this.contentRef.scrollHeight+"px",requestAnimationFrame((()=>{this.contentRef.style.transition="max-height 0.18s cubic-bezier(0.4,0,0.2,1)",this.contentRef.style.maxHeight="0px"}))))}render(){const e=this.el.hasAttribute("aria-required")||this.el.hasAttribute("aria-required-attr"),t=e?this.el.getAttribute("aria-required")||this.el.getAttribute("aria-required-attr"):null,r=e?t:null,i=e?"true"===r||""===r:void 0,o=this.required&&(!e||!0===i);return n(a,{key:"ff398fcfbbe95e5665b774fe43350acbbc348fe9"},(this.label&&this.label.length>0||this.el.querySelector('[slot="label"]'))&&n("label",{key:"2b1909b93047611192bb66f574bdda3b206e2385",htmlFor:this.startInputId},n("slot",{key:"8195acf71bec4897fca7c4617eb0de096e88b191",name:"label"},this.label)),n("nv-popover",{key:"ba36048cf5a34974f4f4deb66fb0d735988e5b53",ref:e=>this.popoverElement=e,id:this.popoverId,triggerMode:"controlled",placement:"bottom-start",open:this.open},n("div",{key:"14b6d78ac81001bd174bad38172a8a1a1f347731",slot:"trigger",class:"input-wrapper"},n("slot",{key:"fb016c89c6f8f99ae3c67917fc623bd5ebfd55fc",name:"before-input"}),n("div",{key:"ba782a5e283e468467ccdb9b571046cd2f4852e9",class:"input-container"},n("slot",{key:"2adfa150e03b07b3fc68dcf58e8033b7945161a0",name:"leading-input"}),n("div",{key:"0276764deeb85f4211ac741f3eb5fef2f9fbcb43",class:"range-inputs"},n("input",{key:"b752bb09fefcd173403cb11db40d0aabd25e1388",id:this.startInputId,type:"text",placeholder:this.startPlaceholder||this.convertToInputmaskFormat(this.dateFormat),name:this.startName,disabled:this.disabled,readOnly:this.readonly,required:o?this.required:void 0,...void 0!==i&&{"aria-required":i+""},autofocus:this.autofocus,value:this.startValue,onInput:this.handleStartInput,onFocus:this.handleFocus,"data-scope":"date-range"}),n("div",{key:"d5be46903d09c3b189dc4e7ee8ddad170c0f6286",class:"range-separator"}),n("input",{key:"11b9a3838149854e68ae7c9d96aedbaaba84a90d",id:this.endInputId,type:"text",placeholder:this.endPlaceholder||this.convertToInputmaskFormat(this.dateFormat),name:this.endName,disabled:this.disabled,readOnly:this.readonly,required:o?this.required:void 0,...void 0!==i&&{"aria-required":i+""},value:this.endValue,onInput:this.handleEndInput,onFocus:this.handleFocus,"data-scope":"date-range"})),this.error&&n("nv-icon",{key:"26b42abdeafd75930a5ca607d24337b6b3c10ac2",name:"alert-circle",class:"validation",size:"md"}),this.success&&n("nv-icon",{key:"1af99ccf21b9f8089204e9e97c2453b2bdeffd29",name:"circle-check",class:"validation",size:"md"}),n("nv-iconbutton",{key:"38b70d2b9f4ec16ff1707dc2b05ceae806646541",class:"toggle-calendar-icon",name:"calendar",size:"md",emphasis:"lower","aria-label":this.open?"Hide calendar":"Show calendar",onClick:this.toggleCalendar,tabIndex:this.disabled?-1:0})),n("slot",{key:"2ab6a03f44f04595763f4a6cbb8bc142578e1b3a",name:"after-input"})),n("div",{key:"1fc0213d712a8560dee995c4d26c7d9944af650b",slot:"content"},n("nv-calendar",{key:"d883272405391bec569516321fd2eae93dac817a",ref:e=>this.calendarElement=e,onRangeDateChange:this.handleRangeDateChange.bind(this),onValueChanged:this.handleCalendarValueChanged.bind(this),onSingleDateChange:this.handleCancelDateChange.bind(this),dateFormat:this.dateFormat,value:this.value,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","data-prevent-navigation":"true"}))),(this.description&&this.description.length>0||this.el.querySelector('[slot="description"]'))&&n("div",{key:"d0f9852ccd37202db9653b338cf850ba44365ddf",class:"description"},n("slot",{key:"cff092ce15f1f90f246de859fea30d3714fd4520",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&n("div",{key:"c9dfd25d6784cca037337e7ffe28fc4ac1d33fd5",hidden:!this.error,class:"error-description"},this.el.querySelector('[slot="error-description"]')?n("slot",{name:"error-description"}):this.errorDescription),n("slot",{key:"8123f07bf03ae219917f2e9f8146142bd8781bd4"}))}get el(){return this}static get watchers(){return{value:[{handleValueChange:0}],open:[{onOpenChanged:0}]}}static get style(){return'nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-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;max-width:480px}nv-fielddaterange[fluid]:not([fluid=false]){max-width:unset}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-in-field)}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,nv-fielddaterange[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);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;z-index:2}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}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){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: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{box-shadow:none;border-color:var(--nv-field-border-default)}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:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fielddaterange .input-wrapper .input-container input{}nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-clear,nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddaterange .input-wrapper .input-container input{width:100%}nv-fielddaterange .input-wrapper .input-container input:focus-within,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover,nv-fielddaterange .input-wrapper .input-container input:focus,nv-fielddaterange .input-wrapper .input-container input:focus:hover{outline:var(--focus-outline-stroke) solid var(--nv-field-border-focus);outline-offset:0px}nv-fielddaterange .input-wrapper .input-container input:focus-within~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus:hover~.range-separator{background-color:transparent}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fielddaterange .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddaterange .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddaterange .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), 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:0;width:100%}nv-fielddaterange .range-inputs:focus-within{z-index: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}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)}nv-fielddaterange .range-inputs .range-separator{width:1px;height:1.5rem;background-color:var(--color-content-medium-border)}'}},[260,"nv-fielddaterange",{startInputId:[513,"start-input-id"],endInputId:[513,"end-input-id"],label:[513],description:[513],startPlaceholder:[513,"start-placeholder"],endPlaceholder:[513,"end-placeholder"],startName:[513,"start-name"],endName:[513,"end-name"],disabled:[516],readonly:[516],required:[516],ariaRequiredAttr:[516,"aria-required"],error:[516],errorDescription:[513,"error-description"],success:[516],autofocus:[516],value:[1537],firstDayOfWeek:[514,"first-day-of-week"],numberOfCalendars:[514,"number-of-calendars"],min:[513],max:[513],locale:[513],dateFormat:[513,"date-format"],shortcutsPlacement:[513,"shortcuts-placement"],showActions:[516,"show-actions"],shortcuts:[16],showWeekNumbers:[516,"show-week-numbers"],disabledDates:[16],fluid:[516],startValue:[32],endValue:[32],open:[32],clear:[64]},[[0,"closePopover","handleClosePopover"],[0,"keydown","handleKeyDown"]],{value:[{handleValueChange:0}],open:[{onOpenChanged:0}]}]);function u(){"undefined"!=typeof customElements&&["nv-fielddaterange","nv-calendar","nv-icon","nv-iconbutton","nv-loader","nv-popover"].forEach((t=>{switch(t){case"nv-fielddaterange":customElements.get(e(t))||customElements.define(e(t),p);break;case"nv-calendar":customElements.get(e(t))||s();break;case"nv-icon":customElements.get(e(t))||d();break;case"nv-iconbutton":customElements.get(e(t))||l();break;case"nv-loader":customElements.get(e(t))||c();break;case"nv-popover":customElements.get(e(t))||f()}}))}u();const v=p,b=u;export{v as NvFielddaterange,b as defineCustomElement}