import * as i0 from '@angular/core';
import { inject, HostBinding, ViewEncapsulation, Component, EventEmitter, Injector, ApplicationRef, booleanAttribute, Input, Output } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormControl, FormsModule, ReactiveFormsModule, NgControl, Validators } from '@angular/forms';
import * as i2$1 from '@angular/material/datepicker';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { DateAdapter } from '@angular/material/core';
import { DomPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
import { TranslateService, TranslateModule } from '@ngx-translate/core';
import { Subject, takeUntil } from 'rxjs';
import { takeUntil as takeUntil$1 } from 'rxjs/operators';
import moment from 'moment';
import 'moment/min/locales';
import { injectOptional, DYNAMIC_COMPONENT_CONFIG, uniqueId, LocaleService } from '@eui/core';
import * as i2 from '@eui/components/eui-timepicker';
import { EUI_TIMEPICKER } from '@eui/components/eui-timepicker';
import * as i3 from '@eui/components/eui-button';
import { EUI_BUTTON } from '@eui/components/eui-button';
import * as i4 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';
import * as i5 from '@eui/components/eui-input-text';
import { EUI_INPUT_TEXT } from '@eui/components/eui-input-text';

/**
 * Provides a dual time picker interface for selecting start and end times within a time range.
 * Typically used within date range selection workflows where time precision is required.
 * Receives configuration via DYNAMIC_COMPONENT_CONFIG injection token and invokes a callback
 * whenever either time value changes.
 *
 * @usageNotes
 * ### Basic Usage (Internal Component)
 * This component is typically used internally by `eui-date-range-selector` when `isTimeRange` is enabled.
 * It's dynamically created and configured via the portal system.
 *
 * ```typescript
 * // Configuration passed to component
 * const config: EuiTimeRangePickerConfig = {
 *   hours: 9,
 *   mins: 0,
 *   secs: 0,
 *   endHours: 17,
 *   endMins: 30,
 *   endSecs: 0,
 *   hasSeconds: false,
 *   stepHours: 1,
 *   stepMinutes: 15,
 *   stepSeconds: 1,
 *   callback: (h, m, s, eh, em, es) => {
 *     console.log('Time range changed');
 *   }
 * };
 * ```
 *
 * ### Accessibility
 * - Each time picker has accessible labels for start and end times
 * - Keyboard navigation supported through underlying timepicker components
 * - Time values announced to screen readers on change
 * - Step increments help users select valid time values
 *
 * ### Notes
 * - Automatically created by `eui-date-range-selector` when time selection enabled
 * - Displays two timepickers side-by-side for start and end times
 * - Callback invoked on any time value change
 * - Supports hours, minutes, and optional seconds
 * - Step values control increment/decrement behavior
 * - Labels automatically translated via TranslateService
 */
class EuiTimeRangepickerComponent {
    get class() {
        return ['eui-timerange'].join(' ').trim();
    }
    constructor() {
        /** Form control managing the start time picker value */
        this.startTimeFormControl = new FormControl();
        /** Form control managing the end time picker value */
        this.endTimeFormControl = new FormControl();
        this.e2eAttr = 'eui-time-range-picker';
        this.translateService = injectOptional(TranslateService);
        this.destroy$ = new Subject();
        // eslint-disable-next-line @typescript-eslint/no-empty-function
        this.callback = () => { };
        const config = inject(DYNAMIC_COMPONENT_CONFIG, { optional: true });
        this.hours = config?.hours || 0;
        this.mins = config?.mins || 0;
        this.secs = config?.secs || 0;
        this.endHours = config?.endHours || 0;
        this.endMins = config?.endMins || 0;
        this.endSecs = config?.endSecs || 0;
        this.hasSeconds = config?.hasSeconds;
        this.stepHours = config ? config.stepHours : this.stepHours;
        this.stepMinutes = config ? config.stepMinutes : this.stepMinutes;
        this.stepSeconds = config ? config.stepSeconds : this.stepSeconds;
        this.callback = config?.callback || this.callback;
    }
    ngOnInit() {
        this.translateService
            ?.stream('eui.daterangeselector.FIRSTPICKERSLABEL')
            .pipe(takeUntil(this.destroy$))
            .subscribe((result) => {
            this.startDateLabel = result;
        });
        this.translateService
            ?.stream('eui.daterangeselector.SECONDPICKERSLABEL')
            .pipe(takeUntil(this.destroy$))
            .subscribe((result) => {
            this.endDateLabel = result;
        });
        this.startTimeFormControl = new FormControl({ value: { hours: this.hours, mins: this.mins, secs: this.secs }, disabled: false });
        this.endTimeFormControl = new FormControl({ value: { hours: this.endHours, mins: this.endMins, secs: this.endSecs }, disabled: false });
        this.startTimeFormControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
            this.hours = value.hours;
            this.mins = value.mins;
            this.secs = value.secs;
            this.callback(this.hours, this.mins, this.secs, this.endHours, this.endMins, this.endSecs);
        });
        this.endTimeFormControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
            this.endHours = value.hours;
            this.endMins = value.mins;
            this.endSecs = value.secs;
            this.callback(this.hours, this.mins, this.secs, this.endHours, this.endMins, this.endSecs);
        });
    }
    ngOnDestroy() {
        this.destroy$.next(true);
        this.destroy$.unsubscribe();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiTimeRangepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiTimeRangepickerComponent, isStandalone: true, selector: "eui-time-range-picker", host: { properties: { "class": "this.class", "attr.data-e2e": "this.e2eAttr" } }, ngImport: i0, template: "<div class=\"eui-timerange__time-container\">\n    <span class=\"eui-timerange__time-container-label\">{{ startDateLabel }}</span>\n    <eui-timepicker iconSize=\"m\" [hasSeconds]=\"hasSeconds\" [formControl]=\"startTimeFormControl\"></eui-timepicker>\n</div>\n\n<div class=\"eui-timerange__time-container\">\n    <span class=\"eui-timerange__time-container-label\">{{ endDateLabel }}</span>\n    <eui-timepicker iconSize=\"m\" [hasSeconds]=\"hasSeconds\" [formControl]=\"endTimeFormControl\"></eui-timepicker>\n</div>\n", styles: [".eui-21 .eui-timerange{display:flex;justify-content:center;border-top:1px solid var(--eui-c-divider);padding:var(--eui-s-m) var(--eui-s-m) 0 var(--eui-s-m);gap:var(--eui-s-l)}.eui-21 .eui-timerange .eui-timepicker__input-container{width:unset}.eui-21 .eui-timerange .eui-timepicker__input{padding:calc(var(--eui-s-3xs) - 1px) 0!important;width:var(--eui-s-5xl)!important}.eui-21 .eui-timerange__time-container{display:flex;flex-direction:column;text-align:center}.eui-21 .eui-timerange__time-container .eui-timepicker__spacer{margin:auto}.eui-21 .eui-timerange__time-container-label{font:var(--eui-f-s-semi-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.EuiTimepickerComponent, selector: "eui-timepicker", inputs: ["e2eAttr", "inputId", "timeMask", "placeholder", "stepHours", "stepMinutes", "stepSeconds", "iconSize", "isreadOnly", "isDisabled", "isOneInputField", "hasSeconds"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiTimeRangepickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-time-range-picker', encapsulation: ViewEncapsulation.None, imports: [
                        FormsModule,
                        ReactiveFormsModule,
                        ...EUI_TIMEPICKER,
                    ], template: "<div class=\"eui-timerange__time-container\">\n    <span class=\"eui-timerange__time-container-label\">{{ startDateLabel }}</span>\n    <eui-timepicker iconSize=\"m\" [hasSeconds]=\"hasSeconds\" [formControl]=\"startTimeFormControl\"></eui-timepicker>\n</div>\n\n<div class=\"eui-timerange__time-container\">\n    <span class=\"eui-timerange__time-container-label\">{{ endDateLabel }}</span>\n    <eui-timepicker iconSize=\"m\" [hasSeconds]=\"hasSeconds\" [formControl]=\"endTimeFormControl\"></eui-timepicker>\n</div>\n", styles: [".eui-21 .eui-timerange{display:flex;justify-content:center;border-top:1px solid var(--eui-c-divider);padding:var(--eui-s-m) var(--eui-s-m) 0 var(--eui-s-m);gap:var(--eui-s-l)}.eui-21 .eui-timerange .eui-timepicker__input-container{width:unset}.eui-21 .eui-timerange .eui-timepicker__input{padding:calc(var(--eui-s-3xs) - 1px) 0!important;width:var(--eui-s-5xl)!important}.eui-21 .eui-timerange__time-container{display:flex;flex-direction:column;text-align:center}.eui-21 .eui-timerange__time-container .eui-timepicker__spacer{margin:auto}.eui-21 .eui-timerange__time-container-label{font:var(--eui-f-s-semi-bold)}\n"] }]
        }], ctorParameters: () => [], propDecorators: { class: [{
                type: HostBinding,
                args: ['class']
            }], e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }] } });

/* eslint-disable @typescript-eslint/no-explicit-any */
/**
 * A date range selector component that allows users to select start and end dates with optional time selection.
 * Provides a dual-input interface with calendar picker integration and supports form validation.
 * Commonly used for filtering data by date ranges, booking systems, and reporting interfaces.
 * Implements ControlValueAccessor for seamless integration with Angular reactive forms.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-date-range-selector
 *   [firstInputPlaceholder]="'Start date'"
 *   [secondInputPlaceholder]="'End date'">
 * </eui-date-range-selector>
 * ```
 *
 * ### With Form Control
 * ```typescript
 * // Component
 * dateRange = new FormControl({ startRange: null, endRange: null });
 *
 * // Template
 * <eui-date-range-selector
 *   [formControl]="dateRange"
 *   [minDate]="minDate"
 *   [maxDate]="maxDate">
 * </eui-date-range-selector>
 * ```
 *
 * ### With Time Selection
 * ```html
 * <eui-date-range-selector
 *   [isTimeRange]="true"
 *   [hasSeconds]="true"
 *   [stepMinutes]="15">
 * </eui-date-range-selector>
 * ```
 *
 * ### Accessibility
 * - Provides `firstInputAriaLabel` and `secondInputAriaLabel` for screen readers
 * - Automatically announces date format to assistive technologies
 * - Supports keyboard navigation through calendar and time pickers
 * - Clear buttons are keyboard accessible when `isClearable` is enabled
 * - Required state is properly communicated via `aria-required` attribute
 *
 * ### Notes
 * - Model must be `EuiDateRangeSelectorDates` with `startRange` and `endRange` properties
 * - Use `islongDateFormat` for extended date display with time
 * - `isResponsive` enables mobile-friendly stacked layout
 * - Comparison ranges can be visualized with `comparisonStart` and `comparisonEnd`
 * - Time picker appears in calendar overlay when `isTimeRange` is true
 */
class EuiDateRangeSelectorComponent {
    get class() {
        return [
            'eui-date-range-selector',
            this.isClearable ? 'eui-date-range-selector--clearable' : '',
            this.islongDateFormat || this.isTimeRange ? 'eui-date-range-selector--long-date-format' : '',
            this.isResponsive ? 'eui-date-range-selector--responsive' : '',
        ].join(' ').trim();
    }
    constructor() {
        this.selectedDates = { startRange: null, endRange: null };
        this.startRangeFormControl = new FormControl();
        this.endRangeFormControl = new FormControl();
        /**
         * Emitted when the start date is selected or changed. Payload contains the selected date value.
         */
        this.firstSelectedDate = new EventEmitter();
        /**
         * Emitted when the end date is selected or changed. Payload contains the selected date value.
         */
        this.secondSelectedDate = new EventEmitter();
        /**
         * Data attribute for end-to-end testing identification.
         * @default 'eui-date-range-selector'
         */
        this.e2eAttr = 'eui-date-range-selector';
        /**
         * SVG icon name displayed on the calendar toggle button.
         * @default 'eui-calendar'
         */
        this.togglerIconSvg = 'eui-calendar';
        /**
         * Initial calendar view when the picker opens. Determines the granularity of date selection.
         * @default 'month'
         */
        this.startView = 'month';
        /**
         * Unique identifier for the start date input field. Used for form association and accessibility.
         * @default 'start-date-<uniqueId>'
         */
        this.startDateId = `start-date-${uniqueId()}`;
        /**
         * Hour increment step for the time picker. Controls the granularity of hour selection.
         * @default 1
         */
        this.stepHours = 1;
        /**
         * Minute increment step for the time picker. Controls the granularity of minute selection.
         * @default 1
         */
        this.stepMinutes = 1;
        /**
         * Second increment step for the time picker. Controls the granularity of second selection.
         * @default 1
         */
        this.stepSeconds = 1;
        /**
         * Enables extended date format display with additional date information. Affects input field width and layout.
         * @default false
         */
        this.islongDateFormat = false;
        /**
         * Shows clear buttons in the input fields allowing users to reset selected dates.
         * @default false
         */
        this.isClearable = false;
        /**
         * Makes the input fields read-only. Users can view but cannot modify the selected dates.
         * @default false
         */
        this.isReadOnly = false;
        /**
         * Disables the entire component. Prevents user interaction and applies disabled styling.
         * @default false
         */
        this.isDisabled = false;
        /**
         * Enables responsive layout behavior. Adjusts component layout for different screen sizes.
         * @default false
         */
        this.isResponsive = false;
        /**
         * Enables time selection in addition to date selection. Adds time picker controls to the interface.
         * @default false
         */
        this.isTimeRange = false;
        /**
         * Shows seconds selection in the time picker. Only effective when isTimeRange is enabled.
         * @default false
         */
        this.hasSeconds = false;
        this.destroy$ = new Subject();
        this.translateService = inject(TranslateService);
        this.localeService = injectOptional(LocaleService);
        this.adapter = inject(DateAdapter);
        this.control = inject(NgControl, { self: true, optional: true });
        this.injector = inject(Injector);
        this.appRef = inject(ApplicationRef);
        this.propagateChange = (_) => { };
        this.propagateTouched = () => { };
        if (this.control) {
            this.control.valueAccessor = this;
        }
    }
    ngOnInit() {
        this.localeService
            ?.getState()
            .pipe(takeUntil$1(this.destroy$))
            .subscribe((state) => {
            this.adapter.setLocale(state.id);
        });
        this.startRangeFormControl = new FormControl({ value: this.startDateDefaultValue, disabled: this.isDisabled });
        this.endRangeFormControl = new FormControl({ value: this.endDateDefaultValue, disabled: this.isDisabled });
        if (!this.firstInputPlaceholder) {
            this.translateService
                .stream('eui.daterangeselector.FIRSTPICKERSLABEL')
                .pipe(takeUntil$1(this.destroy$))
                .subscribe((result) => {
                this.firstInputPlaceholder = result;
            });
        }
        // by setting the firstInputAriaLabel to dd/mm/yyyy(or the desired format) the format can be announced to the screen reader users before the users start typing
        if (!this.firstInputAriaLabel) {
            this.translateService
                .stream('eui.daterangeselector.FIRSTPICKERSPLACEHOLDER')
                .pipe(takeUntil$1(this.destroy$))
                .subscribe((result) => {
                this.firstInputAriaLabel = result;
            });
        }
        if (!this.secondInputPlaceholder) {
            this.translateService
                .stream('eui.daterangeselector.SECONDPICKERSLABEL')
                .pipe(takeUntil$1(this.destroy$))
                .subscribe((result) => {
                this.secondInputPlaceholder = result;
            });
        }
        // by setting the secondInputAriaLabel to dd/mm/yyyy(or the desired format) the format can be announced to the screen reader users before the users start typing
        if (!this.secondInputAriaLabel) {
            this.translateService
                .stream('eui.daterangeselector.SECONDPICKERSPLACEHOLDER')
                .pipe(takeUntil$1(this.destroy$))
                .subscribe((result) => {
                this.secondInputAriaLabel = result;
            });
        }
        this.updateInputAriaRequiredAttribute(this.control);
        this.control?.valueChanges.pipe(takeUntil$1(this.destroy$)).subscribe((value) => {
            this.updateInputAriaRequiredAttribute(this.control);
        });
    }
    ngDoCheck() {
        if (this.control) {
            // marks the input controls as touched/invalid if the form control is touched/invalid
            // eslint-disable-next-line
            this.control?.touched ? this.startRangeFormControl?.markAsTouched() : this.startRangeFormControl.markAsUntouched();
            // eslint-disable-next-line
            this.control?.touched ? this.endRangeFormControl.markAsTouched() : this.endRangeFormControl?.markAsUntouched();
            // eslint-disable-next-line
            this.control?.touched ? (this.isTouched = true) : (this.isTouched = false);
            // eslint-disable-next-line
            this.control?.invalid ? this.startRangeFormControl.setErrors(this.control.errors) : this.startRangeFormControl.setErrors(null);
            // eslint-disable-next-line
            this.control?.invalid ? this.endRangeFormControl.setErrors(this.control.errors) : this.endRangeFormControl.setErrors(null);
            // eslint-disable-next-line
            this.control?.invalid ? (this.isInvalid = true) : (this.isInvalid = false);
        }
    }
    ngOnChanges(changes) {
        if (changes && changes['startDateDefaultValue']) {
            this.startRangeFormControl.setValue(this.startDateDefaultValue);
        }
        if (changes && changes['endDateDefaultValue']) {
            this.endRangeFormControl.setValue(this.endDateDefaultValue);
        }
        if (changes && changes['isDisabled']) {
            this.setDisabledState(this.isDisabled);
        }
    }
    ngOnDestroy() {
        this.destroy$.next(true);
        this.destroy$.unsubscribe();
    }
    /**
     * Method fired when the first date field changes.
     * @param e Event emitted when the first date changes.
     */
    onFirstDateChange(e) {
        this.startDateDefaultValue = e.value;
        this.selectedDates.startRange = e.value;
        this.firstSelectedDate.emit(e.value);
        this.propagateChange(this.selectedDates);
        this.propagateTouched();
    }
    /**
     * Method fired when the second date field changes.
     * @param e Event emitted when the second date changes.
     */
    onSecondDateChange(e) {
        this.endDateDefaultValue = e.value;
        this.selectedDates.endRange = e.value;
        this.secondSelectedDate.emit(e.value);
        this.propagateChange(this.selectedDates);
        this.propagateTouched();
    }
    /**
     * Method fired when the first date field is cleared.
     */
    onFirstDateClear() {
        this.startDateDefaultValue = null;
        this.selectedDates.startRange = null;
        this.firstSelectedDate.emit(null);
        this.propagateChange(this.selectedDates);
    }
    /**
     * Method fired when the second date field is cleared.
     */
    onSecondDateClear() {
        this.endDateDefaultValue = null;
        this.selectedDates.endRange = null;
        this.secondSelectedDate.emit(null);
        this.propagateChange(this.selectedDates);
    }
    writeValue(values) {
        if (values && values.startRange === undefined) {
            throw new Error('startRange of EuiDateRangeSelectorDates model must be defined');
        }
        if (values && values.endRange === undefined) {
            throw new Error('endRange of EuiDateRangeSelectorDates model must be defined');
        }
        this.startDateDefaultValue = values?.startRange;
        this.endDateDefaultValue = values?.endRange;
        this.startRangeFormControl.setValue(values?.startRange);
        this.endRangeFormControl.setValue(values?.endRange);
        this.selectedDates = values || { startRange: null, endRange: null };
    }
    /**
     * Sets the disabled state of the component based on the boolean value passed.
     * @param isDisabled - The boolean value indicating whether the component should be disabled or not.
     */
    setDisabledState(isDisabled) {
        this.isDisabled = isDisabled;
        if (this.isDisabled) {
            this.startRangeFormControl.disable();
            this.endRangeFormControl.disable();
        }
        else {
            this.startRangeFormControl.enable();
            this.endRangeFormControl.enable();
        }
    }
    registerOnChange(fn) {
        this.propagateChange = fn;
    }
    registerOnTouched(fn) {
        this.propagateTouched = fn;
    }
    /**
     * Creates an injector for the timepicker component.
     * @param data - The data to be passed to the timepicker component.
     * @return {Injector} - The created injector.
     * @protected
     */
    createInjector(data) {
        const injectorTokens = [{ provide: DYNAMIC_COMPONENT_CONFIG, useValue: data }];
        return Injector.create({
            parent: this.injector,
            providers: injectorTokens,
        });
    }
    /**
     * Fires when the picker opens.
     * @protected
     */
    onOpened() {
        if (this.isTimeRange) {
            this.portalHost = new DomPortalOutlet(document.querySelector('mat-calendar'), this.appRef, this.injector);
            const timeConfig = {
                hours: this.startDateDefaultValue ? moment(this.startDateDefaultValue).hours() : 0,
                mins: this.startDateDefaultValue ? moment(this.startDateDefaultValue).minutes() : 0,
                secs: this.startDateDefaultValue ? moment(this.startDateDefaultValue).seconds() : 0,
                endHours: this.endDateDefaultValue ? moment(this.endDateDefaultValue).hours() : 0,
                endMins: this.endDateDefaultValue ? moment(this.endDateDefaultValue).minutes() : 0,
                endSecs: this.endDateDefaultValue ? moment(this.endDateDefaultValue).seconds() : 0,
                hasSeconds: this.hasSeconds,
                stepHours: this.stepHours,
                stepMinutes: this.stepMinutes,
                stepSeconds: this.stepSeconds,
                callback: (hours, mins, secs, endHours, endMins, endSecs) => {
                    this.updateStartDateTime(hours, mins, secs);
                    this.updateEndDateTime(endHours, endMins, endSecs);
                },
            };
            this.portal = new ComponentPortal(EuiTimeRangepickerComponent, null, this.createInjector(timeConfig));
            const componentRef = this.portalHost.attachComponentPortal(this.portal);
            this.timeRangeInstance = componentRef.instance;
        }
    }
    /**
     * Fires then the time of the first date field changes.
     * @param e The event emitted when the time changes.
     * @protected
     */
    onStartTimeChange(e) {
        const time = this.extractTime(e);
        this.updateStartDateTime(time.hours, time.mins, time.secs);
    }
    /**
     * Fires then the time of the second date field changes.
     * @param e The event emitted when the time changes.
     * @protected
     */
    onEndTimeChange(e) {
        const time = this.extractTime(e);
        this.updateEndDateTime(time.hours, time.mins, time.secs);
    }
    /**
     * Extracts the time from the date input field.
     * @param e The event or string containing the time.
     * @return {hours: number, mins: number, secs: number} The extracted time.
     * @protected
     */
    extractTime(e) {
        const dateTimeString = typeof e === 'string' ? e : e.target.value;
        // Split the string by space to separate date and time components
        const [datePart, timePart] = dateTimeString.split(' ');
        // Ensure timePart exists to avoid errors
        if (!timePart) {
            return { hours: 0, mins: 0, secs: 0 };
        }
        const [hours, mins, secs] = timePart.split(':').map(part => parseInt(part, 10));
        return {
            hours: hours || 0,
            mins: mins || 0,
            secs: secs || 0,
        };
    }
    /**
     * Updates the start date time based on the provided hours, minutes, and seconds.
     * @param hours The hours to set.
     * @param mins The minutes to set.
     * @param secs The seconds to set.
     * @protected
     */
    updateStartDateTime(hours, mins, secs) {
        if (this.startDateDefaultValue) {
            this.startDateDefaultValue = moment(this.startDateDefaultValue).set({ hour: hours, minute: mins, second: secs });
            this.startRangeFormControl.setValue(this.startDateDefaultValue);
            this.selectedDates.startRange = this.startDateDefaultValue;
        }
        this.propagateChange(this.selectedDates);
    }
    /**
     * Updates the end date time based on the provided hours, minutes, and seconds.
     * @param hours The hours to set.
     * @param mins The minutes to set.
     * @param secs The seconds to set.
     * @protected
     */
    updateEndDateTime(hours, mins, secs) {
        if (this.endDateDefaultValue) {
            this.endDateDefaultValue = moment(this.endDateDefaultValue).set({ hour: hours, minute: mins, second: secs });
            this.endRangeFormControl.setValue(this.endDateDefaultValue);
            this.selectedDates.endRange = this.endDateDefaultValue;
        }
        this.propagateChange(this.selectedDates);
    }
    /**
     * Returns the class for the container based on the time range and hasSeconds conditions.
     * @return {string} The class for the container.
     * @protected
     */
    adaptContainerClasses() {
        if (this.isTimeRange && this.hasSeconds) {
            return 'eui-date-range-selector--container-large';
        }
        else if (this.isTimeRange) {
            return 'eui-date-range-selector--container-height-large';
        }
        else {
            return null;
        }
    }
    /**
     * Updates the `aria-required` attribute on the input element.
     * @param control The NgControl instance to check for required validators.
     * @private
     */
    updateInputAriaRequiredAttribute(control) {
        this.hasAriaRequiredAttribute = control?.control?.hasValidator(Validators.required);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiDateRangeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: EuiDateRangeSelectorComponent, isStandalone: true, selector: "eui-date-range-selector", inputs: { e2eAttr: "e2eAttr", minDate: "minDate", maxDate: "maxDate", togglerIconSvg: "togglerIconSvg", togglerLabel: "togglerLabel", firstInputPlaceholder: "firstInputPlaceholder", secondInputPlaceholder: "secondInputPlaceholder", firstInputAriaLabel: "firstInputAriaLabel", secondInputAriaLabel: "secondInputAriaLabel", startDateDefaultValue: "startDateDefaultValue", endDateDefaultValue: "endDateDefaultValue", comparisonStart: "comparisonStart", comparisonEnd: "comparisonEnd", startView: "startView", startDateId: "startDateId", stepHours: "stepHours", stepMinutes: "stepMinutes", stepSeconds: "stepSeconds", islongDateFormat: ["islongDateFormat", "islongDateFormat", booleanAttribute], isClearable: ["isClearable", "isClearable", booleanAttribute], isReadOnly: ["isReadOnly", "isReadOnly", booleanAttribute], isDisabled: ["isDisabled", "isDisabled", booleanAttribute], isResponsive: ["isResponsive", "isResponsive", booleanAttribute], isTimeRange: ["isTimeRange", "isTimeRange", booleanAttribute], hasSeconds: ["hasSeconds", "hasSeconds", booleanAttribute] }, outputs: { firstSelectedDate: "firstSelectedDate", secondSelectedDate: "secondSelectedDate" }, host: { properties: { "class": "this.class", "attr.data-e2e": "this.e2eAttr" } }, usesOnChanges: true, ngImport: i0, template: "<mat-date-range-input\n    [class.mat-date-range-input--read-only]=\"isReadOnly\"\n    [class.mat-date-range-input--disabled]=\"isDisabled\"\n    [class.mat-date-range-input--invalid]=\"isInvalid && isTouched\"\n    [rangePicker]=\"picker\"\n    [min]=\"minDate\"\n    [max]=\"maxDate\"\n    [comparisonStart]=\"comparisonStart\"\n    [comparisonEnd]=\"comparisonEnd\">\n    <input\n        #inputStartDate\n        class=\"eui-date-range-selector__start-date\"\n        euiInputText\n        [id]=\"startDateId\"\n        [readonly]=\"isReadOnly\"\n        matStartDate\n        placeholder=\"{{ firstInputPlaceholder }}\"\n        attr.aria-label=\"{{ firstInputAriaLabel }}\"\n        [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n        [formControl]=\"startRangeFormControl\"\n        (dateInput)=\"onFirstDateChange($event)\"\n        [euiClearable]=\"isClearable\"\n        (change)=\"isTimeRange ? onStartTimeChange($event) : null\"\n        (clear)=\"onFirstDateClear()\" />\n    <input\n        #inputEndDate\n        class=\"eui-date-range-selector__end-date\"\n        euiInputText\n        [readonly]=\"isReadOnly\"\n        matEndDate\n        placeholder=\"{{ secondInputPlaceholder }}\"\n        attr.aria-label=\"{{ secondInputAriaLabel }}\"\n        [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n        [formControl]=\"endRangeFormControl\"\n        (dateInput)=\"onSecondDateChange($event)\"\n        [euiClearable]=\"isClearable\"\n        (change)=\"isTimeRange ? onEndTimeChange($event) : null\"\n        (clear)=\"onSecondDateClear()\" />\n</mat-date-range-input>\n<mat-date-range-picker\n    #picker\n    [startView]=\"startView\"\n    (opened)=\"onOpened()\"\n    [panelClass]=\"adaptContainerClasses()\" />\n@if (!isReadOnly) {\n    <button\n        class=\"eui-date-range-selector__toggler eui-date-range-selector__toggler-{{ !togglerLabel ? 'icon' : 'label' }}\"\n        (click)=\"picker.open()\"\n        euiButton\n        euiSecondary\n        [euiIconButton]=\"!togglerLabel ? true : false\"\n        type=\"button\"\n        [euiDisabled]=\"isDisabled\"\n        aria-label=\"Open Calendar\"\n        aria-haspopup=\"dialog\">\n        @if (!togglerLabel) {\n            <eui-icon-svg icon=\"{{ togglerIconSvg }}\" size=\"s\"></eui-icon-svg>\n        } @else {\n            <span>{{ togglerLabel }}</span>\n        }\n    </button>\n}\n", styles: [".eui-21 .eui-date-range-selector{display:inline-flex}.eui-21 .eui-date-range-selector .mat-date-range-input,.eui-21 .eui-date-range-selector .mat-date-range-input .mat-date-range-input-container{align-items:center;display:flex}.eui-21 .eui-date-range-selector .mat-date-range-input .mat-date-range-input-container .mat-date-range-input-wrapper{display:flex;overflow:visible;position:relative;width:calc(7.5 * var(--eui-s-m))}.eui-21 .eui-date-range-selector .mat-date-range-input .mat-date-range-input-container .mat-date-range-input-wrapper .mat-date-range-input-mirror{display:none}.eui-21 .eui-date-range-selector--container-height-large{height:auto}.eui-21 .eui-date-range-selector--container-large{height:auto;width:100%}.eui-21 .eui-date-range-selector--responsive{display:flex;width:100%}.eui-21 .eui-date-range-selector--responsive .mat-date-range-input-container{width:100%}.eui-21 .eui-date-range-selector--responsive .mat-date-range-input-wrapper{width:100%!important}.eui-21 .eui-date-range-selector--clearable .mat-date-range-input-inner{position:relative}.eui-21 .eui-date-range-selector--clearable:not(.eui-date-range-selector--responsive):not(.eui-date-range-selector--long-date-format) .mat-date-range-input-wrapper{width:calc(9 * var(--eui-s-m))}.eui-21 .eui-date-range-selector--long-date-format .mat-date-range-input-wrapper{width:calc(13 * var(--eui-s-m))!important}.eui-21 .eui-date-range-selector .mat-date-range-input-separator.mat-date-range-input-separator-hidden{opacity:var(--eui-o-100)}.eui-21 .eui-date-range-selector__toggler{border-bottom-left-radius:0!important;border-top-left-radius:0!important;border-left:none!important;box-shadow:none!important}.eui-21 .eui-date-range-selector__toggler-label{width:auto}.eui-21 .eui-date-range-selector .mat-date-range-input{align-items:center;display:flex;box-sizing:border-box;background:var(--eui-c-surface-container);border:var(--eui-bw-xs) solid var(--eui-c-secondary-border);border-radius:var(--eui-br-s);border-bottom-right-radius:0;border-top-right-radius:0;max-height:var(--eui-s-5xl);text-align:center}.eui-21 .eui-date-range-selector .mat-date-range-input--read-only{background-color:transparent;border-color:transparent!important;box-shadow:none;height:inherit;padding:var(--eui-s-3xs) 0;pointer-events:none}.eui-21 .eui-date-range-selector .mat-date-range-input--read-only .eui-input-text{padding-left:var(--eui-s-s)!important}.eui-21 .eui-date-range-selector .mat-date-range-input--read-only .mat-date-range-input-separator.mat-date-range-input-separator-hidden{opacity:0}.eui-21 .eui-date-range-selector .mat-date-range-input--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-o-50);background-color:var(--eui-c-disabled-bg);border:var(--eui-bw-xs) solid var(--eui-c-secondary-border);max-height:unset}.eui-21 .eui-date-range-selector .mat-date-range-input--disabled input{border:none!important}.eui-21 .eui-date-range-selector .mat-date-range-input--invalid{border:var(--eui-bw-xs) solid var(--eui-c-danger)}.eui-21 .eui-date-range-selector .eui-date-range-selector__start-date.eui-input-text,.eui-21 .eui-date-range-selector .eui-date-range-selector__end-date.eui-input-text{background-color:transparent;border-color:transparent;height:inherit;padding:calc(var(--eui-s-xs) - 1px) calc(var(--eui-s-m) - 2px);position:relative;text-align:left;text-overflow:clip}.eui-21 .mat-datepicker-content .mat-calendar.eui-date-range-selector--container-height-large{height:auto}.eui-21 .mat-datepicker-content .mat-calendar.eui-date-range-selector--container-large{height:auto;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i4.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i5.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiDateRangeSelectorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-date-range-selector', encapsulation: ViewEncapsulation.None, imports: [
                        FormsModule,
                        ReactiveFormsModule,
                        TranslateModule,
                        MatDatepickerModule,
                        ...EUI_BUTTON,
                        ...EUI_ICON,
                        ...EUI_INPUT_TEXT,
                    ], template: "<mat-date-range-input\n    [class.mat-date-range-input--read-only]=\"isReadOnly\"\n    [class.mat-date-range-input--disabled]=\"isDisabled\"\n    [class.mat-date-range-input--invalid]=\"isInvalid && isTouched\"\n    [rangePicker]=\"picker\"\n    [min]=\"minDate\"\n    [max]=\"maxDate\"\n    [comparisonStart]=\"comparisonStart\"\n    [comparisonEnd]=\"comparisonEnd\">\n    <input\n        #inputStartDate\n        class=\"eui-date-range-selector__start-date\"\n        euiInputText\n        [id]=\"startDateId\"\n        [readonly]=\"isReadOnly\"\n        matStartDate\n        placeholder=\"{{ firstInputPlaceholder }}\"\n        attr.aria-label=\"{{ firstInputAriaLabel }}\"\n        [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n        [formControl]=\"startRangeFormControl\"\n        (dateInput)=\"onFirstDateChange($event)\"\n        [euiClearable]=\"isClearable\"\n        (change)=\"isTimeRange ? onStartTimeChange($event) : null\"\n        (clear)=\"onFirstDateClear()\" />\n    <input\n        #inputEndDate\n        class=\"eui-date-range-selector__end-date\"\n        euiInputText\n        [readonly]=\"isReadOnly\"\n        matEndDate\n        placeholder=\"{{ secondInputPlaceholder }}\"\n        attr.aria-label=\"{{ secondInputAriaLabel }}\"\n        [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n        [formControl]=\"endRangeFormControl\"\n        (dateInput)=\"onSecondDateChange($event)\"\n        [euiClearable]=\"isClearable\"\n        (change)=\"isTimeRange ? onEndTimeChange($event) : null\"\n        (clear)=\"onSecondDateClear()\" />\n</mat-date-range-input>\n<mat-date-range-picker\n    #picker\n    [startView]=\"startView\"\n    (opened)=\"onOpened()\"\n    [panelClass]=\"adaptContainerClasses()\" />\n@if (!isReadOnly) {\n    <button\n        class=\"eui-date-range-selector__toggler eui-date-range-selector__toggler-{{ !togglerLabel ? 'icon' : 'label' }}\"\n        (click)=\"picker.open()\"\n        euiButton\n        euiSecondary\n        [euiIconButton]=\"!togglerLabel ? true : false\"\n        type=\"button\"\n        [euiDisabled]=\"isDisabled\"\n        aria-label=\"Open Calendar\"\n        aria-haspopup=\"dialog\">\n        @if (!togglerLabel) {\n            <eui-icon-svg icon=\"{{ togglerIconSvg }}\" size=\"s\"></eui-icon-svg>\n        } @else {\n            <span>{{ togglerLabel }}</span>\n        }\n    </button>\n}\n", styles: [".eui-21 .eui-date-range-selector{display:inline-flex}.eui-21 .eui-date-range-selector .mat-date-range-input,.eui-21 .eui-date-range-selector .mat-date-range-input .mat-date-range-input-container{align-items:center;display:flex}.eui-21 .eui-date-range-selector .mat-date-range-input .mat-date-range-input-container .mat-date-range-input-wrapper{display:flex;overflow:visible;position:relative;width:calc(7.5 * var(--eui-s-m))}.eui-21 .eui-date-range-selector .mat-date-range-input .mat-date-range-input-container .mat-date-range-input-wrapper .mat-date-range-input-mirror{display:none}.eui-21 .eui-date-range-selector--container-height-large{height:auto}.eui-21 .eui-date-range-selector--container-large{height:auto;width:100%}.eui-21 .eui-date-range-selector--responsive{display:flex;width:100%}.eui-21 .eui-date-range-selector--responsive .mat-date-range-input-container{width:100%}.eui-21 .eui-date-range-selector--responsive .mat-date-range-input-wrapper{width:100%!important}.eui-21 .eui-date-range-selector--clearable .mat-date-range-input-inner{position:relative}.eui-21 .eui-date-range-selector--clearable:not(.eui-date-range-selector--responsive):not(.eui-date-range-selector--long-date-format) .mat-date-range-input-wrapper{width:calc(9 * var(--eui-s-m))}.eui-21 .eui-date-range-selector--long-date-format .mat-date-range-input-wrapper{width:calc(13 * var(--eui-s-m))!important}.eui-21 .eui-date-range-selector .mat-date-range-input-separator.mat-date-range-input-separator-hidden{opacity:var(--eui-o-100)}.eui-21 .eui-date-range-selector__toggler{border-bottom-left-radius:0!important;border-top-left-radius:0!important;border-left:none!important;box-shadow:none!important}.eui-21 .eui-date-range-selector__toggler-label{width:auto}.eui-21 .eui-date-range-selector .mat-date-range-input{align-items:center;display:flex;box-sizing:border-box;background:var(--eui-c-surface-container);border:var(--eui-bw-xs) solid var(--eui-c-secondary-border);border-radius:var(--eui-br-s);border-bottom-right-radius:0;border-top-right-radius:0;max-height:var(--eui-s-5xl);text-align:center}.eui-21 .eui-date-range-selector .mat-date-range-input--read-only{background-color:transparent;border-color:transparent!important;box-shadow:none;height:inherit;padding:var(--eui-s-3xs) 0;pointer-events:none}.eui-21 .eui-date-range-selector .mat-date-range-input--read-only .eui-input-text{padding-left:var(--eui-s-s)!important}.eui-21 .eui-date-range-selector .mat-date-range-input--read-only .mat-date-range-input-separator.mat-date-range-input-separator-hidden{opacity:0}.eui-21 .eui-date-range-selector .mat-date-range-input--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-o-50);background-color:var(--eui-c-disabled-bg);border:var(--eui-bw-xs) solid var(--eui-c-secondary-border);max-height:unset}.eui-21 .eui-date-range-selector .mat-date-range-input--disabled input{border:none!important}.eui-21 .eui-date-range-selector .mat-date-range-input--invalid{border:var(--eui-bw-xs) solid var(--eui-c-danger)}.eui-21 .eui-date-range-selector .eui-date-range-selector__start-date.eui-input-text,.eui-21 .eui-date-range-selector .eui-date-range-selector__end-date.eui-input-text{background-color:transparent;border-color:transparent;height:inherit;padding:calc(var(--eui-s-xs) - 1px) calc(var(--eui-s-m) - 2px);position:relative;text-align:left;text-overflow:clip}.eui-21 .mat-datepicker-content .mat-calendar.eui-date-range-selector--container-height-large{height:auto}.eui-21 .mat-datepicker-content .mat-calendar.eui-date-range-selector--container-large{height:auto;width:100%}\n"] }]
        }], ctorParameters: () => [], propDecorators: { firstSelectedDate: [{
                type: Output
            }], secondSelectedDate: [{
                type: Output
            }], class: [{
                type: HostBinding,
                args: ['class']
            }], e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }], minDate: [{
                type: Input
            }], maxDate: [{
                type: Input
            }], togglerIconSvg: [{
                type: Input
            }], togglerLabel: [{
                type: Input
            }], firstInputPlaceholder: [{
                type: Input
            }], secondInputPlaceholder: [{
                type: Input
            }], firstInputAriaLabel: [{
                type: Input
            }], secondInputAriaLabel: [{
                type: Input
            }], startDateDefaultValue: [{
                type: Input
            }], endDateDefaultValue: [{
                type: Input
            }], comparisonStart: [{
                type: Input
            }], comparisonEnd: [{
                type: Input
            }], startView: [{
                type: Input
            }], startDateId: [{
                type: Input
            }], stepHours: [{
                type: Input
            }], stepMinutes: [{
                type: Input
            }], stepSeconds: [{
                type: Input
            }], islongDateFormat: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isClearable: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isReadOnly: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isDisabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isResponsive: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isTimeRange: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasSeconds: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });

/**
 * @description
 * Validator that checks that the start date isn't after the end date.
 *
 * @usageNotes
 * If the user types a value in the input field that is not aligned with the provided format the component propagates a null value that
 * can be used to validate the input field.
 *
 * @returns An error map with the
 * `euiDateRangeInvalid` if the validation check fails, otherwise `null`.
 */
const euiStartEndDateValidator = 
// TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(adapter) => (control) => {
    const start = moment(adapter.getValidDateOrNull(adapter.deserialize(control.value?.startRange)));
    const end = moment(control.value?.endRange);
    return !start || !end || adapter.compareDate(start, end) <= 0 ? null : { euiDateRangeInvalid: { end, actual: start } };
};

const EUI_DATE_RANGE_SELECTOR = [
    EuiTimeRangepickerComponent,
    EuiDateRangeSelectorComponent,
];

/**
 * Generated bundle index. Do not edit.
 */

export { EUI_DATE_RANGE_SELECTOR, EuiDateRangeSelectorComponent, EuiTimeRangepickerComponent, euiStartEndDateValidator };
//# sourceMappingURL=eui-components-eui-date-range-selector.mjs.map
