import * as i0 from '@angular/core';
import { inject, EventEmitter, Injector, ApplicationRef, ViewContainerRef, ElementRef, booleanAttribute, Input, Output, forwardRef, ContentChild, ViewChild, HostBinding, ViewEncapsulation, Component, Directive } from '@angular/core';
import * as i3 from '@angular/forms';
import { FormControl, NgControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MAT_DATE_FORMATS, DateAdapter } from '@angular/material/core';
import * as i2 from '@angular/material/datepicker';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { TemplatePortal, DomPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
import { TranslateService, TranslateModule } from '@ngx-translate/core';
import { Subject, takeUntil, fromEvent } from 'rxjs';
import _rollupMoment from 'moment';
import 'moment/min/locales.js';
import { MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
import { EuiTimepickerComponent } from '@eui/components/eui-timepicker';
import { uniqueId, injectOptional, LocaleService, EuiAppShellService, DYNAMIC_COMPONENT_CONFIG } from '@eui/core';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import * as i4 from '@eui/components/eui-input-text';
import { EUI_INPUT_TEXT } from '@eui/components/eui-input-text';
import * as i5 from '@eui/components/eui-input-group';
import { EUI_INPUT_GROUP } from '@eui/components/eui-input-group';
import * as i6 from '@eui/components/eui-button';
import { EUI_BUTTON } from '@eui/components/eui-button';
import * as i7 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';

/* eslint-disable @typescript-eslint/no-explicit-any */
const moment = _rollupMoment || _rollupMoment;
const DEFAULT_FORMATS = {
    parse: {
        dateInput: 'L',
    },
    display: {
        dateInput: 'L',
        monthYearLabel: 'MM/YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'LL',
    },
};
/**
 * A comprehensive date and datetime picker component that wraps Angular Material's datepicker with enhanced functionality.
 * Supports date-only, month, year, and datetime selection modes with optional timepicker integration.
 * Implements ControlValueAccessor for seamless integration with Angular reactive and template-driven forms.
 *
 * Use cases:
 * - Standard date selection with calendar popup
 * - Month or year-only selection for period-based inputs
 * - Combined date and time selection with integrated timepicker
 * - Date range validation with min/max constraints
 * - Custom date filtering and styling
 * - Responsive layouts with block-level display option
 * - Read-only and disabled states for display-only scenarios
 *
 * @usageNotes
 * ### Basic Date Picker
 * ```html
 * <eui-datepicker
 *   [placeholder]="'Select date'"
 *   [(ngModel)]="selectedDate">
 * </eui-datepicker>
 * ```
 *
 * ### DateTime Picker
 * ```html
 * <eui-datepicker
 *   [isDatetimepicker]="true"
 *   [hasSeconds]="true"
 *   [(ngModel)]="selectedDateTime">
 * </eui-datepicker>
 * ```
 *
 * ### Month/Year Picker
 * ```html
 * <eui-datepicker
 *   type="month"
 *   [startView]="'year'"
 *   [(ngModel)]="selectedMonth">
 * </eui-datepicker>
 * ```
 *
 * ### With Validation
 * ```typescript
 * // Component
 * dateControl = new FormControl(null, Validators.required);
 * minDate = new Date(2024, 0, 1);
 * maxDate = new Date(2024, 11, 31);
 *
 * // Template
 * <eui-datepicker
 *   [formControl]="dateControl"
 *   [minDate]="minDate"
 *   [maxDate]="maxDate"
 *   [isClearable]="true">
 * </eui-datepicker>
 * ```
 *
 * ### Accessibility
 * - Provides proper ARIA labels and roles for calendar navigation
 * - Keyboard navigation: Arrow keys for date selection, Enter to confirm, Escape to close
 * - Clear button is keyboard accessible when enabled
 * - Required state communicated via `aria-required` attribute
 * - Date format is announced to screen readers via placeholder
 * - Toggle button has accessible label via `togglerLabel` input
 *
 * ### Notes
 * - Use `dateOutputFormat` to control the format of emitted values (e.g., 'YYYY-MM-DD')
 * - `restrictToRegex` can limit input characters for format enforcement
 * - `datepickerFilter` enables custom date validation (e.g., disable weekends)
 * - `dateClass` allows styling specific dates (holidays, events)
 * - Time picker integrates seamlessly when `isDatetimepicker` is true
 * - `isDatepickerBlock` makes component responsive for mobile layouts
 * - `isReadOnly` allows calendar selection but prevents manual typing
 */
class EuiDatepickerComponent {
    get cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-datepicker'),
            this.isDatepickerBlock ? 'eui-datepicker--responsive' : '',
        ].join(' ').trim();
    }
    /**
     * Displays a clear button in the input field to reset the value to null.
     * Automatically disabled when isReadOnly is true.
     * Clicking the clear button emits null through inputChange and dateSelect events.
     */
    get isClearable() {
        return this._isClearable && !this.isReadOnly;
    }
    set isClearable(value) {
        this._isClearable = coerceBooleanProperty(value);
    }
    /**
     * Regular expression pattern to restrict which characters can be typed in the input field.
     * Accepts a RegExp object or a string that will be converted to RegExp.
     * Each keypress is validated against this pattern; non-matching keys are blocked.
     * Useful for enforcing numeric-only input or specific date format characters.
     */
    get restrictToRegex() {
        return this._restrictToRegex;
    }
    set restrictToRegex(value) {
        try {
            if (value instanceof RegExp) {
                this._restrictToRegex = value;
            }
            else if (typeof value === 'string') {
                this._restrictToRegex = new RegExp(value);
            }
            else {
                throw new Error(`restrictToRegex can only be string or RegExp, it cannot be ${typeof value}`);
            }
        }
        catch (e) {
            console.error(e);
        }
    }
    /**
     * Returns an array of CSS classes to apply to the mat-datepicker panel.
     * Combines internal classes with user-provided customPanelClass.
     */
    get mergedPanelClass() {
        const classes = [`mat-calendar-${this.type}`];
        if (this.isDatetimepicker) {
            classes.push('eui-datepicker--container-height-large');
        }
        if (this.customPanelClass) {
            if (Array.isArray(this.customPanelClass)) {
                classes.push(...this.customPanelClass);
            }
            else {
                classes.push(this.customPanelClass);
            }
        }
        return classes;
    }
    constructor() {
        this.baseStatesDirective = inject(BaseStatesDirective);
        this.euiLetterFormat = inject(EuiLetterFormatDirective, { optional: true });
        this.e2eAttr = 'eui-datepicker';
        this.inputFormControl = new FormControl();
        this.breakpointsValue = {
            isMobile: false,
            isTablet: false,
            isLtDesktop: false,
            isDesktop: false,
            isXL: false,
            isXXL: false,
        };
        this.showDateButton = true;
        /**
         * Emitted when the input field value changes through user typing or programmatic updates.
         * Payload contains the formatted date string (if dateOutputFormat is set) or Moment object, or null if cleared.
         * Triggers on every input change, including manual text entry and clear actions.
         */
        this.inputChange = new EventEmitter();
        /**
         * Emitted when a date is selected from the calendar popup or through date/time adjustments.
         * Payload contains the formatted date string (if dateOutputFormat is set) or Moment object, or null if cleared.
         * Does not trigger on manual text input, only on calendar interactions and programmatic selections.
         */
        this.dateSelect = new EventEmitter();
        /**
         * The SVG icon name displayed on the calendar toggle button.
         * Must be a valid eui-icon identifier.
         */
        this.togglerIconSvg = 'eui-calendar';
        /**
         * Determines the selection granularity and calendar behavior.
         * 'regular' allows full date selection, 'month' selects month/year only, 'year' selects year only.
         * Affects the calendar view, input format, and selection behavior.
         */
        this.type = 'regular';
        /**
         * Custom filter function to enable or disable specific dates in the calendar.
         * Receives each date as a parameter and should return true to enable the date, false to disable it.
         * Useful for implementing business rules like disabling weekends or holidays.
         */
        this.datepickerFilter = this.datepickerFiltering;
        /**
         * Increment/decrement step for hour adjustments in the timepicker.
         * Only applicable when isDatetimepicker is true.
         * Determines how many hours are added or subtracted with each button click.
         */
        this.stepHours = 1;
        /**
         * Increment/decrement step for minute adjustments in the timepicker.
         * Only applicable when isDatetimepicker is true.
         * Determines how many minutes are added or subtracted with each button click.
         */
        this.stepMinutes = 1;
        /**
         * Increment/decrement step for second adjustments in the timepicker.
         * Only applicable when isDatetimepicker is true and hasSeconds is true.
         * Determines how many seconds are added or subtracted with each button click.
         */
        this.stepSeconds = 1;
        /**
         * Unique identifier for the input element.
         * Used for label association, form integration, and testing selectors.
         * Auto-generated if not provided.
         */
        this.inputId = `eui-datepicker-${uniqueId()}`;
        /**
         * Custom CSS class or classes applied to the calendar popup panel.
         * Accepts a single class name string or an array of class names.
         * Useful for theme customization or specific styling requirements.
         */
        this.customPanelClass = null;
        /**
         * Enables datetime selection mode with an integrated timepicker in the calendar popup.
         * When true, displays hour, minute, and optionally second selectors below the calendar.
         * Changes the component behavior to handle both date and time values.
         */
        this.isDatetimepicker = false;
        /**
         * Displays seconds selector in the timepicker.
         * Only applicable when isDatetimepicker is true.
         * When false, only hours and minutes are selectable.
         */
        this.hasSeconds = false;
        /**
         * Renders the timepicker with a single combined input field instead of separate hour/minute/second inputs.
         * Only applicable when isDatetimepicker is true.
         * Provides a more compact timepicker interface.
         */
        this.isOneInputField = false;
        /**
         * Hides the calendar toggle button, leaving only the input field visible.
         * Users can still open the calendar by clicking the input field if isShownOnInputClick is true.
         * Useful for minimalist layouts or when calendar access should be input-driven only.
         */
        this.hasNoButton = false;
        /**
         * Applies block-level display styling to make the component fill its container width.
         * Enables responsive behavior for mobile and tablet layouts.
         * When true, the input and button stretch to 100% width.
         */
        this.isDatepickerBlock = false;
        /**
         * Makes the input field read-only, preventing manual text entry.
         * Users can still select dates from the calendar popup.
         * Automatically disables the clear button when true.
         */
        this.isReadOnly = false;
        /**
         * Disables the entire component including input field, toggle button, and calendar popup.
         * When true, no user interaction is possible and the component appears visually disabled.
         * Integrates with Angular forms disabled state.
         */
        this.isDisabled = false;
        /**
         * Disables only the input field while keeping the calendar toggle button enabled.
         * Users can select dates from the calendar but cannot type manually.
         * Useful for enforcing calendar-only date selection.
         */
        this.isInputDisabled = false;
        /**
         * Disables only the calendar toggle button while keeping the input field enabled.
         * Users can type dates manually but cannot open the calendar popup.
         * Useful for keyboard-only or text-based date entry scenarios.
         */
        this.isButtonDisabled = false;
        /**
         * Disables the calendar popup functionality while keeping the input field enabled.
         * Prevents the calendar from opening through any interaction method.
         * Similar to isButtonDisabled but also blocks input-click calendar opening.
         */
        this.isPickerDisabled = false;
        /**
         * Controls whether clicking the input field opens the calendar popup.
         * When false, the calendar only opens via the toggle button.
         * Useful when the input should be primarily for manual text entry.
         */
        this.isShownOnInputClick = true;
        this._isClearable = false;
        this.destroy$ = new Subject();
        this.format = inject(MAT_DATE_FORMATS, { optional: true });
        this.isNull = false;
        this.adapter = inject(DateAdapter);
        this.translateService = inject(TranslateService);
        this.localeService = injectOptional(LocaleService);
        this.EuiAppShellService = inject(EuiAppShellService);
        this.injector = inject(Injector);
        this.appRef = inject(ApplicationRef);
        this.viewContainerRef = inject(ViewContainerRef);
        this.control = inject(NgControl, { self: true, optional: true });
        this.momentAdapterOptions = injectOptional(MAT_MOMENT_DATE_ADAPTER_OPTIONS);
        this.propagateChange = (_) => { };
        this.propagateTouched = () => { };
        /**
         * Converts a date from any adapter format to Moment formats used with dateOutputFormat property.
         * @private
         * @param date - The date to convert, can be of any type supported by the adapter.
         * @returns The converted date as a Moment object.
         */
        this.adapterToMoment = (date) => moment({
            year: this.adapter.getYear(date),
            month: this.adapter.getMonth(date),
            date: this.adapter.getDate(date),
        });
        if (this.control) {
            this.control.valueAccessor = this;
        }
    }
    ngOnInit() {
        this.inputFormControl.setValue(this.value);
        // eslint-disable-next-line
        this.isInputDisabled ? this.inputFormControl.disable() : this.inputFormControl.enable();
        this.localeService
            ?.getState()
            .pipe(takeUntil(this.destroy$))
            .subscribe((state) => {
            this.adapter.setLocale(state.id);
        });
        if (this.isDatetimepicker && (this.minDate || this.maxDate)) {
            this.inputFormControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
                setTimeout(() => {
                    this.checkTimePickerValidity();
                });
            });
        }
        if (!this.placeholder) {
            if (this.type === 'regular' && !this.isDatetimepicker) {
                this.translateService
                    .stream('eui.datepicker.PLACEHOLDER')
                    .pipe(takeUntil(this.destroy$))
                    .subscribe((result) => {
                    this.placeholder = result;
                });
            }
            else if (this.type === 'regular' && this.isDatetimepicker) {
                this.translateService
                    .stream('eui.datepicker.ISDATETIMEPICKER')
                    .pipe(takeUntil(this.destroy$))
                    .subscribe((result) => {
                    this.placeholder = result;
                });
            }
            else if (this.type === 'year') {
                this.translateService
                    .stream('eui.datepicker.YEAR-PLACEHOLDER')
                    .pipe(takeUntil(this.destroy$))
                    .subscribe((result) => {
                    this.placeholder = result;
                });
            }
            else if (this.type === 'month') {
                this.translateService
                    .stream('eui.datepicker.MONTH-PLACEHOLDER')
                    .pipe(takeUntil(this.destroy$))
                    .subscribe((result) => {
                    this.placeholder = result;
                });
            }
        }
        this.EuiAppShellService.breakpoints$.pipe(takeUntil(this.destroy$)).subscribe((bkps) => (this.breakpointsValue = bkps));
        this.updateInputAriaRequiredAttribute(this.control);
        this.control?.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
            this.updateInputAriaRequiredAttribute(this.control);
        });
    }
    ngAfterViewInit() {
        if (this.euiActionButtons) {
            this.templatePortal = new TemplatePortal(this.templatePortalRef, this.viewContainerRef);
        }
        if (this.isDatetimepicker || this.euiActionButtons) {
            this.calendar['closeCalendar'] = this.calendar.close;
            this.calendar.close = () => false;
        }
        // Store input reference in control for validator access
        if (this.control?.control) {
            this.control.control._inputRef = this.inputRef;
        }
        // Listen to native input event to trigger validation on every keystroke
        if (this.inputRef) {
            fromEvent(this.inputRef.nativeElement, 'input')
                .pipe(takeUntil(this.destroy$))
                .subscribe(() => {
                this.control?.control?.updateValueAndValidity({ emitEvent: false });
            });
        }
    }
    ngDoCheck() {
        if (this.control) {
            // marks the input control as touched/invalid if the form control is touched/invalid
            // eslint-disable-next-line
            this.control?.touched ? this.inputFormControl.markAsTouched() : this.inputFormControl.markAsUntouched();
            // eslint-disable-next-line
            this.control?.invalid ? this.inputFormControl.setErrors(this.control.errors) : this.inputFormControl.setErrors(null);
        }
    }
    ngOnChanges(changes) {
        if (changes && changes['isReadOnly']) {
            if (this.isReadOnly) {
                this.showDateButton = false;
            }
            else {
                this.showDateButton = true;
            }
        }
        if (changes && changes['isDisabled']) {
            this.setDisabledState(this.isDisabled);
        }
        if (changes && changes['value']) {
            this.inputFormControl.setValue(this.value);
        }
        else {
            if (this.dateOutputFormat && (this.value && this.value.value !== null)) {
                this.propagateChange(moment(this.value).format(this.dateOutputFormat));
            }
        }
        if (changes && changes['isClearable']) {
            // when is clearable is used listen if onclear is fired and update the value
            if (this.isClearable) {
                this.inputChange.pipe(takeUntil(this.destroy$)).subscribe((event) => {
                    if (event === null) {
                        this.value = event;
                        this.propagateChange(event);
                    }
                });
            }
        }
    }
    /**
     * Creates an injector for the timepicker component.
     * @param data - The data to be passed to the timepicker component.
     * @return {Injector} - The created injector.
     */
    createInjector(data) {
        const injectorTokens = [{ provide: DYNAMIC_COMPONENT_CONFIG, useValue: data }];
        return Injector.create({
            parent: this.injector,
            providers: injectorTokens,
        });
    }
    /**
     * Opens the calendar if read-only is false, listens to the keydown event when isDatetimepicker or euiActionButtons used
     * and creates the time config passed to the timepicker component.
     */
    openCalendar() {
        if (!this.isReadOnly) {
            this.calendar.open();
            if (this.isDatetimepicker || this.euiActionButtons) {
                this.calendar.opened = true;
                // listens to the keydown event once the calendar opened
                fromEvent(document, 'keydown')
                    .pipe(takeUntil(this.destroy$))
                    .subscribe((event) => {
                    switch (event.key) {
                        case 'Escape': //closes the calendar on Escape
                            this.closeCalendar();
                            break;
                        case 'Enter': {
                            //closes the calendar if pressing Enter on the close calendar button only
                            this.getEventPath(event).forEach((p) => {
                                if (p.className && p.className.indexOf('mat-datepicker-close-button') !== -1) {
                                    this.closeCalendar();
                                }
                            });
                            break;
                        }
                    }
                });
            }
            if (this.isDatetimepicker) {
                this.portalHost = new DomPortalOutlet(document.querySelector('mat-calendar'), this.appRef, this.injector);
                const timeConfig = {
                    hours: this.value ? (this.momentAdapterOptions?.useUtc ? moment(this.value).utc().hours() : this.adapter.getHours(this.adapter.deserialize(this.value))) : 0,
                    mins: this.value ? (this.momentAdapterOptions?.useUtc ? moment(this.value).utc().minutes() : this.adapter.getMinutes(this.adapter.deserialize(this.value))) : 0,
                    secs: this.value ? (this.momentAdapterOptions?.useUtc ? moment(this.value).utc().seconds() : this.adapter.getSeconds(this.adapter.deserialize(this.value))) : 0,
                    isDatetimepicker: this.isDatetimepicker,
                    hasSeconds: this.hasSeconds,
                    isOneInputField: this.isOneInputField,
                    stepHours: this.stepHours,
                    stepMinutes: this.stepMinutes,
                    stepSeconds: this.stepSeconds,
                    isDisabled: !this.value || this.value === '',
                    callbackFn: (hours, mins, secs) => {
                        // Don't allow time changes when no date is selected
                        if (!this.value || this.value === '') {
                            return;
                        }
                        this.value = this.adapter.setTime(this.adapter.deserialize(this.value), hours || 0, mins || 0, secs || 0);
                        this.inputFormControl.setValue(this.value);
                        if (this.dateOutputFormat) {
                            const formatted = moment(this.value).format(this.dateOutputFormat);
                            this.propagateChange(formatted);
                            this.dateSelect.emit(formatted);
                        }
                        else {
                            this.propagateChange(this.value);
                            this.dateSelect.emit(this.value);
                        }
                    },
                };
                this.portal = new ComponentPortal(EuiTimepickerComponent, null, this.createInjector(timeConfig));
                const componentRef = this.portalHost.attachComponentPortal(this.portal);
                this.timePickerInstance = componentRef.instance;
                this.timePickerComponentRef = componentRef;
            }
        }
    }
    ngOnDestroy() {
        this.destroy$.next(true);
        this.destroy$.unsubscribe();
        this.portalHost?.detach();
    }
    /**
     * When calendar opens and isDatetimepicker or eui-action-buttons directive used, it closes the calendar when clicking outside of the
     * overlay. If eui-action-buttons directive is used it registers the template portal where the user can add projected content as a
     * footer.
     */
    onOpened() {
        if (this.isDatetimepicker || this.euiActionButtons) {
            if (this.euiActionButtons) {
                this.calendar.registerActions(this.templatePortal);
            }
            this.calendar['_overlayRef']['_pane'].classList.add('eui-21');
            this.calendar['_overlayRef']['_backdropClick'].pipe(takeUntil(this.destroy$)).subscribe(() => {
                this.closeCalendar();
            });
        }
    }
    /**
     * Retrieves the event path for a given event. This method provides a fallback
     * for browsers that do not support the `event.path` property by constructing
     * the path manually.
     *
     * @param event - The event object of type `KeyboardEvent`.
     * @returns An array representing the event path, starting from the event target
     *          and traversing up through its ancestors, ending with the `document`
     *          and `window` objects.
     */
    getEventPath(event) {
        if (event.composedPath) {
            return event.composedPath();
        }
        // Fallback for browsers that do not support composedPath()
        const path = [];
        let target = event.target;
        while (target) {
            path.push(target);
            target = target.parentNode;
        }
        path.push(document, window);
        return path;
    }
    /**
     * Fires when the type of the calendar is either month or year,
     * formats the date if dateOutputFormat used
     * emits and propagates the selected date value
     * and closes the calendar.
     * @param normalizedDate - The selected date in the calendar.
     * @param calendar - The MatDatepicker instance.
     */
    chosenDateHandler(normalizedDate, calendar) {
        if (this.dateOutputFormat) {
            const formattedValue = moment(normalizedDate, this.dateOutputFormat);
            this.value = formattedValue;
            this.inputFormControl.setValue(formattedValue);
            this.propagateChange(formattedValue.format(this.dateOutputFormat));
            this.inputChange.emit(formattedValue.format(this.dateOutputFormat));
            this.dateSelect.emit(formattedValue.format(this.dateOutputFormat));
        }
        else {
            this.value = normalizedDate;
            this.inputFormControl.setValue(this.value);
            this.propagateChange(this.value);
            this.dateSelect.emit(this.value ? this.value : null);
            this.inputChange.emit(this.value ? this.value : null);
        }
        calendar.close();
    }
    /**
     * Method which returns true in order to mark the date as valid.
     * @returns {boolean} - Returns true if the date is valid.
     */
    datepickerFiltering() {
        return true;
    }
    /**
     * Method which fires when the datepicker input value changes and applies logic when isDatetimepicker is false.
     * @param e - The MatDatepickerInputEvent object containing the new value.
     */
    onDateInput(e) {
        if (!this.isDatetimepicker) {
            if (e.value === null) {
                this.propagateChange(null);
                this.inputChange.emit(null);
            }
            else {
                const correctedDate = this.validateDateRange(e.value);
                this.value = correctedDate;
                if (this.dateOutputFormat) {
                    const formatted = this.adapterToMoment(correctedDate).format(this.dateOutputFormat);
                    this.propagateChange(formatted);
                    this.inputChange.emit(formatted);
                }
                else {
                    this.propagateChange(correctedDate);
                    this.inputChange.emit(correctedDate);
                }
            }
            this.propagateTouched();
        }
    }
    /**
     * Method which fires when there is a date change from the calendar popup,
     * formats, emits and propagates the new value also when isDatetimepicker true.
     * @param e - The MatDatepickerInputEvent object containing the new value.
     */
    onDateChange(e) {
        if (e.value === null) {
            this.propagateChange(null);
            this.dateSelect.emit(null);
            this.isNull = true;
        }
        else {
            this.isNull = false;
            if (this.isDatetimepicker) {
                const hours = this.value ? (this.momentAdapterOptions?.useUtc ? moment(this.value).utc().hours() : this.adapter.getHours(this.adapter.deserialize(this.value))) : 0;
                const mins = this.value ? (this.momentAdapterOptions?.useUtc ? moment(this.value).utc().minutes() : this.adapter.getMinutes(this.adapter.deserialize(this.value))) : 0;
                const secs = this.value ? (this.momentAdapterOptions?.useUtc ? moment(this.value).utc().seconds() : this.adapter.getSeconds(this.adapter.deserialize(this.value))) : 0;
                this.value = this.adapter.setTime(this.adapter.deserialize(e.value), hours || 0, mins || 0, secs || 0);
                if (this.calendar.opened) {
                    // Enable timepicker when date is selected
                    setTimeout(() => this.updateTimePickerDisabledState());
                    this.inputFormControl.setValue(this.value);
                }
                if (this.dateOutputFormat && this.value != null) {
                    const formatted = moment(this.value).format(this.dateOutputFormat);
                    this.propagateChange(formatted);
                    this.dateSelect.emit(formatted);
                }
                else {
                    this.propagateChange(this.value);
                    this.dateSelect.emit(this.value);
                }
            }
            else {
                if (this.dateOutputFormat) {
                    const formatted = this.adapterToMoment(e.value).format(this.dateOutputFormat);
                    this.value = e.value;
                    this.dateSelect.emit(formatted);
                }
                else {
                    this.dateSelect.emit(e?.value ? e.value : null);
                }
            }
        }
    }
    /**
     * Method which fires when the input value changes and applies logic when isDatetimepicker true.
     * @param e - The new value of the input field.
     */
    changedInput(e) {
        const value = typeof e === 'string' ? e : e.target.value;
        if (!this.isNull) {
            const parsedDate = this.momentAdapterOptions?.useUtc ? moment(value, this.format.parse.dateInput).utcOffset(0, true) : moment(value, this.format.parse.dateInput);
            const correctedDate = this.validateDateRange(parsedDate);
            this.value = correctedDate;
            this.inputFormControl.setValue(this.value);
            if (this.dateOutputFormat && this.value != null) {
                this.propagateChange(moment(this.value).format(this.dateOutputFormat));
                this.inputChange.emit(moment(this.value).format(this.dateOutputFormat));
            }
            else {
                this.propagateChange(moment(this.value));
                this.inputChange.emit(this.value);
            }
        }
    }
    /**
     * Method which fires when clearing the input field and emits/propagates the null value.
     */
    onClear() {
        this.dateSelect.emit(null);
        this.inputChange.emit(null);
        this.propagateChange(null);
    }
    /**
     * Method which fires upon keypress and opens the calendar if isShownOnInputClick is true and the Enter key is pressed.
     * Also if there is a restrictToRegex, it prevents the default action if the key is not matching the regex.
     * @param e - The KeyboardEvent object.
     */
    onKeypress(e) {
        if (e.key === 'Enter' && this.isShownOnInputClick) {
            this.openCalendar();
            e.preventDefault();
        }
        if (this._restrictToRegex) {
            if (!this._restrictToRegex.test(e.key)) {
                e.preventDefault();
            }
        }
    }
    /**
     * Selects today's date
     */
    selectToday() {
        this.inputFormControl.setValue(moment());
    }
    /**
     * Closes the calendar when isDatetimepicker or eui-action-buttons used and removes the applied footer when eui-action-buttons used
     */
    closeCalendar() {
        this.calendar['closeCalendar']();
        if (this.euiActionButtons) {
            this.calendar.removeActions(this.templatePortal);
        }
    }
    /**
     * When eui-action-buttons used, it applies the date selection and closes the calendar
     */
    onDateSelectApply() {
        this.calendar._applyPendingSelection();
        this.closeCalendar();
    }
    writeValue(value) {
        this.value = value || '';
        this.inputFormControl.setValue(value, { emitEvent: false });
    }
    registerOnChange(fn) {
        this.propagateChange = fn;
    }
    registerOnTouched(fn) {
        this.propagateTouched = fn;
    }
    /**
     * Converts the type of the calendar to the corresponding start view.
     * @param type - The type of the calendar.
     * @returns {('year' | 'month' | 'multi-year')} - The start view of the calendar.
     */
    convTypeToStartView(type) {
        switch (type) {
            case 'month':
                return 'year';
            case 'year':
                return 'multi-year';
            case 'regular':
                return 'month';
        }
    }
    /**
     * 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 (isDisabled) {
            // disables only the input through reactive forms
            if (this.isInputDisabled && !this.isPickerDisabled) {
                this.isInputDisabled = true;
                this.isButtonDisabled = this.isPickerDisabled = false;
                // disables only the button through reactive forms
            }
            else if (this.isButtonDisabled && !this.isInputDisabled) {
                this.isInputDisabled = false;
                this.isButtonDisabled = this.isPickerDisabled = true;
            }
            else {
                this.isInputDisabled = this.isPickerDisabled = this.isButtonDisabled = true;
            }
        }
        else {
            this.isInputDisabled = this.isPickerDisabled = this.isButtonDisabled = false;
        }
        // eslint-disable-next-line
        this.isInputDisabled ? this.inputFormControl.disable() : this.inputFormControl.enable();
    }
    /**
     * Marks the form field as touched when focusing out to trigger validation
     */
    onFocusOut() {
        this.propagateTouched();
    }
    /**
     * Checks the validity of the time picker based on the minDate and maxDate properties.
     * If the value is outside the range, it adjusts the time picker values accordingly.
     */
    checkTimePickerValidity() {
        const getTime = (d) => {
            const deserialized = this.adapter.deserialize(d);
            return moment(new Date(this.adapter.getYear(deserialized), this.adapter.getMonth(deserialized), this.adapter.getDate(deserialized)));
        };
        if (this.minDate && (!moment(this.minDate).isBefore(this.value) || this.areSameDates(this.value, this.minDate))) {
            this.timePickerInstance.hoursDownDisable(true);
            this.timePickerInstance.minutesDownDisable(true);
            this.timePickerInstance.secondsDownDisable(true);
            if (!moment(this.minDate).isBefore(this.value)) {
                const minMoment = getTime(this.minDate);
                const hours = minMoment.hours();
                const minutes = minMoment.minutes();
                const seconds = minMoment.seconds();
                setTimeout(() => {
                    this.timePickerInstance.hours = hours;
                    this.timePickerInstance.mins = minutes;
                    this.timePickerInstance.secs = seconds;
                });
                this.value = typeof this.value === 'string' ? moment(this.value, moment.ISO_8601) : moment(this.value, this.format.parse.dateInput);
                this.value.set({ hour: hours || 0, minute: minutes || 0, second: seconds || 0 });
            }
        }
        else {
            this.timePickerInstance?.hoursDownDisable(false);
            this.timePickerInstance?.minutesDownDisable(false);
            this.timePickerInstance?.secondsDownDisable(false);
        }
        if (this.maxDate && this.adapter.compareDate(this.adapter.deserialize(this.value), this.adapter.deserialize(this.maxDate)) >= 0) {
            this.timePickerInstance.hoursUpDisable(true);
            this.timePickerInstance.minutesUpDisable(true);
            this.timePickerInstance.secondsUpDisable(true);
            if (this.adapter.compareDate(this.adapter.deserialize(this.value), this.adapter.deserialize(this.maxDate)) > 0) {
                const maxMoment = getTime(this.maxDate);
                const hours = maxMoment.hours();
                const minutes = maxMoment.minutes();
                const seconds = maxMoment.seconds();
                setTimeout(() => {
                    this.timePickerInstance.hours = hours;
                    this.timePickerInstance.mins = minutes;
                    this.timePickerInstance.secs = seconds;
                });
                this.value = typeof this.value === 'string' ? moment(this.value, moment.ISO_8601) : moment(this.value, this.format.parse.dateInput);
                this.value.set({ hour: hours || 0, minute: minutes || 0, second: seconds || 0 });
            }
            if (this.value.hour() === 0 && this.value.minute() === 0 && this.value.second() === 0 &&
                getTime(this.maxDate).hour() === 0 && getTime(this.maxDate).minute() === 0 && getTime(this.maxDate).second() === 0 &&
                this.minDate && this.areSameDates(this.value, this.minDate)) {
                this.timePickerInstance.hoursDownDisable(true);
                this.timePickerInstance.minutesDownDisable(true);
                this.timePickerInstance.secondsDownDisable(true);
            }
            else {
                this.timePickerInstance.hoursDownDisable(false);
                this.timePickerInstance.minutesDownDisable(false);
                this.timePickerInstance.secondsDownDisable(false);
            }
        }
        else {
            this.timePickerInstance.hoursUpDisable(false);
            this.timePickerInstance.minutesUpDisable(false);
            this.timePickerInstance.secondsUpDisable(false);
        }
    }
    /**
     * Compares two dates and checks if they are the same.
     * @param date1 - The first date to compare.
     * @param date2 - The second date to compare.
     * @returns {boolean} - Returns true if the dates are the same, otherwise false.
     */
    areSameDates(date1, date2) {
        const d1 = this.adapter.deserialize(date1);
        const d2 = this.adapter.deserialize(date2);
        return this.adapter.compareDate(d1, d2) === 0;
    }
    /**
     * Updates the `aria-required` attribute on the input element.
     * @private
     */
    updateInputAriaRequiredAttribute(control) {
        this.hasAriaRequiredAttribute = control?.control?.hasValidator(Validators.required);
    }
    /**
     * Validates and corrects the date to ensure it falls within the specified minDate and maxDate range.
     * If the date is before minDate, returns minDate. If the date is after maxDate, returns maxDate.
     * Otherwise, returns the original date unchanged.
     *
     * @param date - The date to validate (can be Moment, Date, or string)
     * @returns The validated date as a Moment object within the allowed range
     */
    validateDateRange(date) {
        const minDate = this.minDate ? this.adapter.deserialize(this.minDate) : null;
        const maxDate = this.maxDate ? this.adapter.deserialize(this.maxDate) : null;
        if (minDate && this.adapter.compareDate(date, minDate) < 0) {
            return minDate;
        }
        if (maxDate && this.adapter.compareDate(date, maxDate) > 0) {
            return maxDate;
        }
        return date;
    }
    /**
     * Updates the disabled state of the timepicker based on whether a date is selected.
     * @private
     */
    updateTimePickerDisabledState() {
        if (this.timePickerInstance) {
            const hasDate = this.value && this.value !== '';
            this.timePickerInstance.isDisabled = !hasDate;
            this.timePickerComponentRef?.changeDetectorRef.markForCheck();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: EuiDatepickerComponent, isStandalone: true, selector: "eui-datepicker", inputs: { e2eAttr: "e2eAttr", value: "value", togglerIconSvg: "togglerIconSvg", togglerLabel: "togglerLabel", placeholder: "placeholder", type: "type", startView: "startView", minDate: "minDate", maxDate: "maxDate", datepickerFilter: "datepickerFilter", dateOutputFormat: "dateOutputFormat", customHeader: "customHeader", dateClass: "dateClass", stepHours: "stepHours", stepMinutes: "stepMinutes", stepSeconds: "stepSeconds", inputId: "inputId", customPanelClass: "customPanelClass", isDatetimepicker: ["isDatetimepicker", "isDatetimepicker", booleanAttribute], hasSeconds: ["hasSeconds", "hasSeconds", booleanAttribute], isOneInputField: ["isOneInputField", "isOneInputField", booleanAttribute], hasNoButton: ["hasNoButton", "hasNoButton", booleanAttribute], isDatepickerBlock: ["isDatepickerBlock", "isDatepickerBlock", booleanAttribute], isReadOnly: ["isReadOnly", "isReadOnly", booleanAttribute], isDisabled: ["isDisabled", "isDisabled", booleanAttribute], isInputDisabled: ["isInputDisabled", "isInputDisabled", booleanAttribute], isButtonDisabled: ["isButtonDisabled", "isButtonDisabled", booleanAttribute], isPickerDisabled: ["isPickerDisabled", "isPickerDisabled", booleanAttribute], isShownOnInputClick: ["isShownOnInputClick", "isShownOnInputClick", booleanAttribute], isClearable: "isClearable", restrictToRegex: "restrictToRegex" }, outputs: { inputChange: "inputChange", dateSelect: "dateSelect" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "euiActionButtons", first: true, predicate: i0.forwardRef(() => EuiActionButtonsDirective), descendants: true }], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, static: true }, { propertyName: "templatePortalRef", first: true, predicate: ["templatePortalRef"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, read: ElementRef }], usesOnChanges: true, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiVariant", "euiVariant"] }], ngImport: i0, template: "<div euiInputGroup>\n    <div euiInputGroupAddOn>\n        <input\n            #input\n            euiInputText\n            [id]=\"inputId\"\n            [readonly]=\"isReadOnly\"\n            [euiClearable]=\"isClearable\"\n            (clear)=\"onClear()\"\n            [class.eui-datepicker--no-button]=\"hasNoButton\"\n            [class.eui-datepicker--long-format]=\"!isDatepickerBlock && (isDatetimepicker || euiLetterFormat)\"\n            [class.eui-datepicker--block]=\"isDatepickerBlock\"\n            [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n            [formControl]=\"inputFormControl\"\n            [matDatepicker]=\"calendar\"\n            placeholder=\"{{ placeholder }}\"\n            (dateInput)=\"onDateInput($event)\"\n            (dateChange)=\"onDateChange($event)\"\n            [min]=\"minDate\"\n            [max]=\"maxDate\"\n            [matDatepickerFilter]=\"datepickerFilter\"\n            (click)=\"isShownOnInputClick? openCalendar(): null\"\n            autocomplete=\"off\"\n            aria-label=\"Date Input Field\"\n            (keypress)=\"onKeypress($event)\"\n            (focusout)=\"onFocusOut()\"\n            (change)=\"isDatetimepicker ? changedInput($event) : null\" />\n        <mat-datepicker\n            #calendar\n            [panelClass]=\"mergedPanelClass\"\n            [startView]=\"type === 'regular' ? (startView ? startView : convTypeToStartView(type)) : convTypeToStartView(type)\"\n            (yearSelected)=\"type === 'year' ? chosenDateHandler($event, calendar) : null\"\n            (monthSelected)=\"type === 'month' ? chosenDateHandler($event, calendar) : null\"\n            [touchUi]=\"breakpointsValue.isTablet || breakpointsValue.isMobile\"\n            [disabled]=\"isPickerDisabled\"\n            [calendarHeaderComponent]=\"customHeader\"\n            [dateClass]=\"dateClass\"\n            (opened)=\"onOpened()\">\n        </mat-datepicker>\n        @if (!hasNoButton && showDateButton) {\n            <button\n                (click)=\"openCalendar()\"\n                euiButton\n                type=\"button\"\n                euiSecondary\n                [euiIconButton]=\"!togglerLabel\"\n                [euiDisabled]=\"isButtonDisabled\"\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    </div>\n</div>\n\n\n<ng-template #templatePortalRef>\n    <ng-content select=\"eui-action-buttons\" />\n</ng-template>\n", styles: [".eui-21 .eui-datepicker{display:flex}.eui-21 .eui-datepicker:not(.eui-datepicker--responsive) .eui-input-group-addon{width:unset!important}.eui-21 .eui-datepicker:not(.eui-datepicker--responsive) input{border-bottom-right-radius:0;border-top-right-radius:0;width:calc(8.5 * var(--eui-s-m))}.eui-21 .eui-datepicker:not(.eui-datepicker--responsive) input.eui-input-text--clearable{width:calc(9 * var(--eui-s-m));padding-right:unset}.eui-21 .eui-datepicker:not(.eui-datepicker--responsive) input.eui-datepicker--long-format{width:calc(13.5 * var(--eui-s-m))}.eui-21 .eui-datepicker:not(.eui-datepicker--responsive) input.eui-datepicker--block{width:100%}.eui-21 .eui-datepicker:not(.eui-datepicker--responsive) input.eui-datepicker--no-button{border-bottom-right-radius:var(--eui-br-s);border-top-right-radius:var(--eui-br-s)}.eui-21 .eui-datepicker .eui-input-group{margin-bottom:0!important}.eui-21 .eui-datepicker--responsive{width:100%}.eui-21 .eui-datepicker--responsive .eui-input-group-addon{width:100%!important}.eui-21 .eui-datepicker--responsive .eui-input-group-addon input{border-bottom-right-radius:var(--eui-br-none);border-top-right-radius:var(--eui-br-none)}.eui-21 .eui-datepicker--container-height-large{height:auto!important}.eui-21 .eui-datepicker__action-buttons{display:flex;justify-content:flex-end;align-items:center;padding:0 var(--eui-s-xs) var(--eui-s-xs) var(--eui-s-xs)}.eui-21 .eui-datepicker__actions-cancel-button{margin-right:var(--eui-s-m)}.eui-21 .mat-calendar.mat-calendar-year .mat-calendar-period-button{display:none}.eui-21 .mat-datepicker-dialog .mat-datepicker-content-touch{max-height:none}.eui-21 .mat-datepicker-content-touch .mat-datepicker-content-container{height:auto!important;max-height:fit-content!important}.eui-21 .mat-mdc-icon-button:disabled{color:var(--eui-c-disabled)!important}.eui-21 .eui-datepicker--primary input{background-color:var(--eui-c-primary-surface-light)}.eui-21 .eui-datepicker--secondary input{background-color:var(--eui-c-secondary)}.eui-21 .eui-datepicker--info input{background-color:var(--eui-c-info-surface-light)}.eui-21 .eui-datepicker--success input{background-color:var(--eui-c-success-surface-light)}.eui-21 .eui-datepicker--warning input{background-color:var(--eui-c-warning-surface-light)}.eui-21 .eui-datepicker--danger input{background-color:var(--eui-c-danger-surface-light)}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: i4.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { kind: "component", type: i5.EuiInputGroupComponent, selector: "div[euiInputGroup]", inputs: ["e2eAttr"] }, { kind: "component", type: i5.EuiInputGroupAddOnComponent, selector: "div[euiInputGroupAddOn], eui-input-group-addon", inputs: ["e2eAttr"] }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiDatepickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-datepicker', encapsulation: ViewEncapsulation.None, imports: [
                        MatDatepickerModule,
                        FormsModule,
                        ReactiveFormsModule,
                        TranslateModule,
                        ...EUI_INPUT_TEXT,
                        ...EUI_INPUT_GROUP,
                        ...EUI_BUTTON,
                        ...EUI_ICON,
                    ], hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiSuccess',
                                'euiInfo',
                                'euiWarning',
                                'euiDanger',
                                'euiVariant',
                            ],
                        },
                    ], template: "<div euiInputGroup>\n    <div euiInputGroupAddOn>\n        <input\n            #input\n            euiInputText\n            [id]=\"inputId\"\n            [readonly]=\"isReadOnly\"\n            [euiClearable]=\"isClearable\"\n            (clear)=\"onClear()\"\n            [class.eui-datepicker--no-button]=\"hasNoButton\"\n            [class.eui-datepicker--long-format]=\"!isDatepickerBlock && (isDatetimepicker || euiLetterFormat)\"\n            [class.eui-datepicker--block]=\"isDatepickerBlock\"\n            [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n            [formControl]=\"inputFormControl\"\n            [matDatepicker]=\"calendar\"\n            placeholder=\"{{ placeholder }}\"\n            (dateInput)=\"onDateInput($event)\"\n            (dateChange)=\"onDateChange($event)\"\n            [min]=\"minDate\"\n            [max]=\"maxDate\"\n            [matDatepickerFilter]=\"datepickerFilter\"\n            (click)=\"isShownOnInputClick? openCalendar(): null\"\n            autocomplete=\"off\"\n            aria-label=\"Date Input Field\"\n            (keypress)=\"onKeypress($event)\"\n            (focusout)=\"onFocusOut()\"\n            (change)=\"isDatetimepicker ? changedInput($event) : null\" />\n        <mat-datepicker\n            #calendar\n            [panelClass]=\"mergedPanelClass\"\n            [startView]=\"type === 'regular' ? (startView ? startView : convTypeToStartView(type)) : convTypeToStartView(type)\"\n            (yearSelected)=\"type === 'year' ? chosenDateHandler($event, calendar) : null\"\n            (monthSelected)=\"type === 'month' ? chosenDateHandler($event, calendar) : null\"\n            [touchUi]=\"breakpointsValue.isTablet || breakpointsValue.isMobile\"\n            [disabled]=\"isPickerDisabled\"\n            [calendarHeaderComponent]=\"customHeader\"\n            [dateClass]=\"dateClass\"\n            (opened)=\"onOpened()\">\n        </mat-datepicker>\n        @if (!hasNoButton && showDateButton) {\n            <button\n                (click)=\"openCalendar()\"\n                euiButton\n                type=\"button\"\n                euiSecondary\n                [euiIconButton]=\"!togglerLabel\"\n                [euiDisabled]=\"isButtonDisabled\"\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    </div>\n</div>\n\n\n<ng-template #templatePortalRef>\n    <ng-content select=\"eui-action-buttons\" />\n</ng-template>\n", styles: [".eui-21 .eui-datepicker{display:flex}.eui-21 .eui-datepicker:not(.eui-datepicker--responsive) .eui-input-group-addon{width:unset!important}.eui-21 .eui-datepicker:not(.eui-datepicker--responsive) input{border-bottom-right-radius:0;border-top-right-radius:0;width:calc(8.5 * var(--eui-s-m))}.eui-21 .eui-datepicker:not(.eui-datepicker--responsive) input.eui-input-text--clearable{width:calc(9 * var(--eui-s-m));padding-right:unset}.eui-21 .eui-datepicker:not(.eui-datepicker--responsive) input.eui-datepicker--long-format{width:calc(13.5 * var(--eui-s-m))}.eui-21 .eui-datepicker:not(.eui-datepicker--responsive) input.eui-datepicker--block{width:100%}.eui-21 .eui-datepicker:not(.eui-datepicker--responsive) input.eui-datepicker--no-button{border-bottom-right-radius:var(--eui-br-s);border-top-right-radius:var(--eui-br-s)}.eui-21 .eui-datepicker .eui-input-group{margin-bottom:0!important}.eui-21 .eui-datepicker--responsive{width:100%}.eui-21 .eui-datepicker--responsive .eui-input-group-addon{width:100%!important}.eui-21 .eui-datepicker--responsive .eui-input-group-addon input{border-bottom-right-radius:var(--eui-br-none);border-top-right-radius:var(--eui-br-none)}.eui-21 .eui-datepicker--container-height-large{height:auto!important}.eui-21 .eui-datepicker__action-buttons{display:flex;justify-content:flex-end;align-items:center;padding:0 var(--eui-s-xs) var(--eui-s-xs) var(--eui-s-xs)}.eui-21 .eui-datepicker__actions-cancel-button{margin-right:var(--eui-s-m)}.eui-21 .mat-calendar.mat-calendar-year .mat-calendar-period-button{display:none}.eui-21 .mat-datepicker-dialog .mat-datepicker-content-touch{max-height:none}.eui-21 .mat-datepicker-content-touch .mat-datepicker-content-container{height:auto!important;max-height:fit-content!important}.eui-21 .mat-mdc-icon-button:disabled{color:var(--eui-c-disabled)!important}.eui-21 .eui-datepicker--primary input{background-color:var(--eui-c-primary-surface-light)}.eui-21 .eui-datepicker--secondary input{background-color:var(--eui-c-secondary)}.eui-21 .eui-datepicker--info input{background-color:var(--eui-c-info-surface-light)}.eui-21 .eui-datepicker--success input{background-color:var(--eui-c-success-surface-light)}.eui-21 .eui-datepicker--warning input{background-color:var(--eui-c-warning-surface-light)}.eui-21 .eui-datepicker--danger input{background-color:var(--eui-c-danger-surface-light)}\n"] }]
        }], ctorParameters: () => [], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }], calendar: [{
                type: ViewChild,
                args: ['calendar', { static: true }]
            }], templatePortalRef: [{
                type: ViewChild,
                args: ['templatePortalRef']
            }], inputRef: [{
                type: ViewChild,
                args: ['input', { read: ElementRef }]
            }], euiActionButtons: [{
                type: ContentChild,
                args: [forwardRef(() => EuiActionButtonsDirective)]
            }], inputChange: [{
                type: Output
            }], dateSelect: [{
                type: Output
            }], value: [{
                type: Input
            }], togglerIconSvg: [{
                type: Input
            }], togglerLabel: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], type: [{
                type: Input
            }], startView: [{
                type: Input
            }], minDate: [{
                type: Input
            }], maxDate: [{
                type: Input
            }], datepickerFilter: [{
                type: Input
            }], dateOutputFormat: [{
                type: Input
            }], customHeader: [{
                type: Input
            }], dateClass: [{
                type: Input
            }], stepHours: [{
                type: Input
            }], stepMinutes: [{
                type: Input
            }], stepSeconds: [{
                type: Input
            }], inputId: [{
                type: Input
            }], customPanelClass: [{
                type: Input
            }], isDatetimepicker: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasSeconds: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isOneInputField: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasNoButton: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isDatepickerBlock: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isReadOnly: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isDisabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isInputDisabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isButtonDisabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isPickerDisabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isShownOnInputClick: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isClearable: [{
                type: Input
            }], restrictToRegex: [{
                type: Input
            }] } });
const LETTER_FORMAT = {
    parse: {
        dateInput: 'LL',
    },
    display: {
        dateInput: 'LL',
        monthYearLabel: 'LL',
    },
};
const YEAR_FORMAT = {
    parse: {
        dateInput: 'YYYY',
    },
    display: {
        dateInput: 'YYYY',
        monthYearLabel: 'YYYY',
        dateA11yLabel: 'YYYY',
        monthYearA11yLabel: 'YYYY',
    },
};
const MONTH_YEAR_FORMAT = {
    parse: {
        dateInput: 'MM/YYYY',
    },
    display: {
        dateInput: 'MM/YYYY',
        monthYearLabel: 'MMM YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'MMMM YYYY',
    },
};
class EuiLetterFormatDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiLetterFormatDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: EuiLetterFormatDirective, isStandalone: true, selector: "[euiLetterFormat]", providers: [{ provide: MAT_DATE_FORMATS, useValue: LETTER_FORMAT }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiLetterFormatDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[euiLetterFormat]',
                    providers: [{ provide: MAT_DATE_FORMATS, useValue: LETTER_FORMAT }],
                }]
        }] });
class EuiYearFormatDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiYearFormatDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: EuiYearFormatDirective, isStandalone: true, selector: "[euiYearFormat]", providers: [{ provide: MAT_DATE_FORMATS, useValue: YEAR_FORMAT }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiYearFormatDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[euiYearFormat]',
                    providers: [{ provide: MAT_DATE_FORMATS, useValue: YEAR_FORMAT }],
                }]
        }] });
class EuiMonthYearFormatDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiMonthYearFormatDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: EuiMonthYearFormatDirective, isStandalone: true, selector: "[euiMonthYearFormat]", providers: [{ provide: MAT_DATE_FORMATS, useValue: MONTH_YEAR_FORMAT }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiMonthYearFormatDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[euiMonthYearFormat]',
                    providers: [{ provide: MAT_DATE_FORMATS, useValue: MONTH_YEAR_FORMAT }],
                }]
        }] });
/* eslint-disable */
class EuiActionButtonsDirective {
    constructor() {
        this.class = 'eui-datepicker__action-buttons';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiActionButtonsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: EuiActionButtonsDirective, isStandalone: true, selector: "eui-action-buttons", host: { properties: { "class": "this.class" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiActionButtonsDirective, decorators: [{
            type: Directive,
            args: [{ selector: 'eui-action-buttons' }]
        }], propDecorators: { class: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Validator that validates the date based on the provided format.
 *
 * @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
 * `invalidDate` if the validation check fails, otherwise `null`.
 */
const dateInputValidator = (control) => {
    // Access the stored input reference from the control
    // eslint-disable-next-line
    const inputElement = control._inputRef?.nativeElement;
    if (inputElement) {
        const rawValue = inputElement.value || '';
        // if the control value is null(malformed date) but the raw input value is not empty, return an error
        return control.value === null && rawValue.trim() !== '' ? { invalidDate: true } : null;
    }
    // return null if no input reference is found
    return null;
};

const EUI_DATEPICKER = [
    EuiDatepickerComponent,
    EuiLetterFormatDirective,
    EuiYearFormatDirective,
    EuiMonthYearFormatDirective,
    EuiActionButtonsDirective,
];

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

export { DEFAULT_FORMATS, EUI_DATEPICKER, EuiActionButtonsDirective, EuiDatepickerComponent, EuiLetterFormatDirective, EuiMonthYearFormatDirective, EuiYearFormatDirective, LETTER_FORMAT, MONTH_YEAR_FORMAT, YEAR_FORMAT, dateInputValidator };
//# sourceMappingURL=eui-components-eui-datepicker.mjs.map
