import { NgTemplateOutlet, NgClass } from '@angular/common';
import * as i0 from '@angular/core';
import { InjectionToken, ViewChild, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component, EventEmitter, input, booleanAttribute, inject, Injector, ElementRef, forwardRef, Input, Output, Optional, NgModule } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { InitialFocusDirective, DynamicComponentService, FocusTrapService } from '@fundamental-ngx/cdk/utils';
import { ButtonBarComponent, BarComponent, BarRightDirective, BarElementDirective } from '@fundamental-ngx/core/bar';
import { DialogComponent, DialogBodyComponent, DialogFooterComponent, DialogHeaderComponent, DialogCloseButtonComponent } from '@fundamental-ngx/core/dialog';
import { MobileModeBase, MobileModeControl } from '@fundamental-ngx/core/mobile-mode';
import { TitleComponent } from '@fundamental-ngx/core/title';
import * as i3 from '@angular/forms';
import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
import { Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
import { FdCalendarViewEnum, CalendarComponent } from '@fundamental-ngx/core/calendar';
import * as i1 from '@fundamental-ngx/core/datetime';
import { convertToDesiredFormat, DATE_TIME_FORMATS, TranslateDayPeriodPipe } from '@fundamental-ngx/core/datetime';
import * as i2 from '@fundamental-ngx/core/form';
import { FormMessageComponent, PopoverFormMessageService, registerFormItemControl } from '@fundamental-ngx/core/form';
import { InputGroupComponent, InputGroupInputDirective } from '@fundamental-ngx/core/input-group';
import { PopoverControlComponent, PopoverBodyComponent, PopoverBodyFooterDirective, PopoverComponent, PopoverService } from '@fundamental-ngx/core/popover';
import { ButtonComponent } from '@fundamental-ngx/core/button';
import { SegmentedButtonComponent } from '@fundamental-ngx/core/segmented-button';
import { TimeComponent } from '@fundamental-ngx/core/time';
import { FdTranslatePipe } from '@fundamental-ngx/i18n';

const FD_DATETIME_PICKER_COMPONENT = new InjectionToken('FdDateTimePickerComponent');
const FD_DATETIME_PICKER_MOBILE_CONFIG = new InjectionToken('FdDateTimePickerMobileConfig');

class DatetimePickerMobileComponent extends MobileModeBase {
    /** @hidden */
    constructor(dateTimePickerConfig, datePickerComponent) {
        super(datePickerComponent, MobileModeControl.DATETIME_PICKER);
        this.dateTimePickerConfig = dateTimePickerConfig;
        this._component.isOpenChange.subscribe((isOpen) => {
            this._toggleDialog(isOpen);
        });
    }
    /** @hidden */
    handleApprove() {
        this.dialogRef.close();
        this._component.dialogApprove();
    }
    /** @hidden */
    handleDismiss() {
        this.dialogRef.dismiss();
        this._component.dialogDismiss(this._selectedBackup);
    }
    /** @hidden */
    _toggleDialog(open) {
        if (open) {
            this._selectedBackup = this._component.date;
            if (!this._dialogService.hasOpenDialogs()) {
                this._open();
            }
        }
    }
    /** @hidden */
    _open() {
        this.dialogRef = this._dialogService.open(this.dialogTemplate, {
            mobile: true,
            backdropClickCloseable: false,
            disablePaddings: true,
            ...this.dialogConfig,
            container: this._elementRef.nativeElement
        });
        this._selectedBackup = this._component.date;
        const refSub = this.dialogRef.afterClosed.pipe(takeUntilDestroyed(this._destroyRef)).subscribe({
            error: (type) => {
                if (type === 'escape') {
                    this._component.dialogDismiss(this._selectedBackup);
                    refSub.unsubscribe();
                }
            }
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DatetimePickerMobileComponent, deps: [{ token: FD_DATETIME_PICKER_MOBILE_CONFIG }, { token: FD_DATETIME_PICKER_COMPONENT }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: DatetimePickerMobileComponent, isStandalone: true, selector: "fd-datetime-picker-mobile", viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            @if (mobileConfig.title) {\n                <h1 fd-title>{{ mobileConfig.title }}</h1>\n            }\n            @if (mobileConfig.hasCloseButton) {\n                <button title=\"Close\" fd-dialog-close-button [mobile]=\"true\" (click)=\"handleDismiss()\"></button>\n            }\n        </fd-dialog-header>\n        <fd-dialog-body>\n            <ng-template [ngTemplateOutlet]=\"dateTimePickerConfig.pickerTemplate || null\"></ng-template>\n        </fd-dialog-body>\n        <fd-dialog-footer>\n            @if (mobileConfig.approveButtonText) {\n                <fd-button-bar fdType=\"emphasized\" [label]=\"mobileConfig.approveButtonText!\" (click)=\"handleApprove()\">\n                </fd-button-bar>\n            }\n            @if (mobileConfig.cancelButtonText) {\n                <fd-button-bar fdkInitialFocus [label]=\"mobileConfig.cancelButtonText!\" (click)=\"handleDismiss()\">\n                </fd-button-bar>\n            }\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DatetimePickerMobileComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fd-datetime-picker-mobile', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        TitleComponent,
                        NgTemplateOutlet,
                        DialogComponent,
                        DialogBodyComponent,
                        DialogFooterComponent,
                        DialogHeaderComponent,
                        DialogCloseButtonComponent,
                        ButtonBarComponent,
                        InitialFocusDirective
                    ], template: "<ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            @if (mobileConfig.title) {\n                <h1 fd-title>{{ mobileConfig.title }}</h1>\n            }\n            @if (mobileConfig.hasCloseButton) {\n                <button title=\"Close\" fd-dialog-close-button [mobile]=\"true\" (click)=\"handleDismiss()\"></button>\n            }\n        </fd-dialog-header>\n        <fd-dialog-body>\n            <ng-template [ngTemplateOutlet]=\"dateTimePickerConfig.pickerTemplate || null\"></ng-template>\n        </fd-dialog-body>\n        <fd-dialog-footer>\n            @if (mobileConfig.approveButtonText) {\n                <fd-button-bar fdType=\"emphasized\" [label]=\"mobileConfig.approveButtonText!\" (click)=\"handleApprove()\">\n                </fd-button-bar>\n            }\n            @if (mobileConfig.cancelButtonText) {\n                <fd-button-bar fdkInitialFocus [label]=\"mobileConfig.cancelButtonText!\" (click)=\"handleDismiss()\">\n                </fd-button-bar>\n            }\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n" }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [FD_DATETIME_PICKER_MOBILE_CONFIG]
                }] }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [FD_DATETIME_PICKER_COMPONENT]
                }] }], propDecorators: { dialogTemplate: [{
                type: ViewChild,
                args: ['dialogTemplate']
            }] } });

/** Creates an error to be thrown when attempting to use an invalid date implementation. */
function createMissingDateImplementationError(provider) {
    return Error(`FdDatetimePicker: No provider found for ${provider}. You must import one of the following ` +
        `modules at your application root: FdDatetimeModule, or provide a ` +
        `custom implementation.`);
}

/**
 * The datetime picker component is an opinionated composition of the fd-popover,
 * fd-calendar and fd-time components to accomplish the UI pattern for picking a date and time.
 * Supports Angular Forms.
 * ```html
 * <fd-date-time-picker [(ngModel)]="dateTime"></fd-date-time-picker>
 * ```
 */
class DatetimePickerComponent {
    /** Text displayed in message */
    set message(message) {
        this._message = message;
    }
    /** The trigger events that will open/close the message box.
     *  Accepts any [HTML DOM Events](https://www.w3schools.com/jsref/dom_obj_event.asp). */
    set messageTriggers(triggers) {
        this._messageTriggers = triggers;
    }
    /**
     *  The state of the form control - applies css classes.
     *  Also this is applied to message.
     *  Can be `success`, `error`, `warning`, `information` or blank for default.
     */
    set state(state) {
        this._state = state;
    }
    get state() {
        if (this.useValidation && this.isInvalidDateInput) {
            return 'error';
        }
        return this._state;
    }
    /** Indicates when datetime input is in invalid state. */
    get isInvalidDateInput() {
        return this._isInvalidDateInput && this._touched;
    }
    /** @hidden Reference to the inner calendar component. */
    set _calendarCmp(calendar) {
        setTimeout(() => {
            calendar?.setCurrentlyDisplayed(this._calendarPendingDate);
            calendar?.initialFocus();
        });
        this._calendarComponent = calendar;
    }
    /** @hidden */
    constructor(_elRef, _changeDetRef, 
    // Use @Optional to avoid angular injection error message and throw our own which is more precise one
    _dateTimeAdapter, _dateTimeFormats, _popoverFormMessage) {
        this._elRef = _elRef;
        this._changeDetRef = _changeDetRef;
        this._dateTimeAdapter = _dateTimeAdapter;
        this._dateTimeFormats = _dateTimeFormats;
        this._popoverFormMessage = _popoverFormMessage;
        /** Placeholder for the inner input element. */
        this.placeholder = '';
        /**
         *  The placement of the popover. It can be one of: top, top-start, top-end, bottom,
         *  bottom-start, bottom-end, right, right-start, right-end, left, left-start, left-end.
         */
        this.placement = 'bottom-start';
        /** If it is mandatory field */
        this.required = false;
        /** Whether to perform visual validation on the picker input. */
        this.useValidation = true;
        /** Whether the popover is open. Two-way binding is supported. */
        this.isOpen = false;
        /** The disableFunction for the calendar. */
        this.startingDayOfWeek = 1;
        /** Actually shown active view one of 'day' | 'month' | 'year' in calendar component*/
        this.activeView = FdCalendarViewEnum.Day;
        /** Whether a null input is considered valid. */
        this.allowNull = true;
        /**
         * @Input when set to true time component will use 2 digits for each number.
         * For example 9 will become 09
         * but 12 will be kept as 12.
         * Only uses by time component and does not change input format
         */
        this.keepTwoDigitsTime = false;
        /**
         * @deprecated Popover is toggled with f4 key
         */
        this.buttonFocusable = false;
        /**
         * Object to customize year grid,
         * Row, Columns and method to display year can be modified
         */
        this.yearGrid = {
            rows: 4,
            cols: 5
        };
        /**
         * Object to customize aggregated year grid,
         * Row, Columns and method to display year can be modified
         */
        this.aggregatedYearGrid = {
            rows: 4,
            cols: 3
        };
        /**
         * Whether user wants to mark sunday/saturday with `fd-calendar__item--weekend` class
         */
        this.markWeekends = true;
        /** @Input Whether to show spinner buttons */
        this.spinnerButtons = true;
        /**
         * Whether user wants to show week numbers next to days
         */
        this.showWeekNumbers = true;
        /** Whether or not to show the datetime picker footer with OK/cancel buttons. */
        this.showFooter = true;
        /**
         * Whether to recalculate value from the input as user types or on blur.
         * By default, updates the value as user types.
         * @default false
         */
        this.processInputOnBlur = false;
        /**
         * Whether to prevent page scrolling when focusing date picker input field after calendar has been closed.
         */
        this.preventScrollOnFocus = false;
        /** Whether to render datetime picker in mobile mode. */
        this.mobile = false;
        /** Whether calendar is used inside mobile in landscape mode, it also adds close button on right side */
        this.mobileLandscape = false;
        /** Whether calendar is used inside mobile in portrait mode */
        this.mobilePortrait = false;
        /** To set input width 100% */
        this.isFullWidth = false;
        /** Event emitted when the state of the isOpen property changes. */
        this.isOpenChange = new EventEmitter();
        /** Event thrown every time calendar active view is changed */
        this.activeViewChange = new EventEmitter();
        /** Event emitted when the date changes. This can be a time or day change. */
        this.dateChange = new EventEmitter();
        /** Event emitted when the day changes from the calendar. */
        this.calendarChange = new EventEmitter();
        /** Event emitted when the time changes from the time component. */
        this.timeChange = new EventEmitter();
        /** Event emitted when popover closes. */
        this.onClose = new EventEmitter();
        /** Event emitted when datepicker changes it's "touched" state. */
        this.touched = new EventEmitter();
        /**
         * Special days mark, it can be used by passing array of object with
         * Special day number, list 1-20 [class:`fd-calendar__item--legend-{{number}}`] is available there:
         * https://sap.github.io/fundamental-styles/components/calendar.html calendar special days section
         * Rule accepts method with FdDate object as a parameter. ex:
         * `rule: (fdDate: FdDate) => fdDate.getDay() === 1`, which will mark all sundays as special day.
         */
        this.specialDaysRules = input([], ...(ngDevMode ? [{ debugName: "specialDaysRules" }] : []));
        /**
         * Whether to show the calendar legend below the calendar.
         * The legend displays explanations for special day markers.
         */
        this.showCalendarLegend = input(false, { ...(ngDevMode ? { debugName: "showCalendarLegend" } : {}), transform: booleanAttribute });
        /**
         * Whether the calendar legend should display in a single column layout.
         * When false (default), the legend items flow into multiple columns automatically.
         */
        this.legendCol = input(false, { ...(ngDevMode ? { debugName: "legendCol" } : {}), transform: booleanAttribute });
        /** @hidden */
        this._message = null;
        /** @hidden */
        this._messageTriggers = ['focusin', 'focusout'];
        /**
         * @hidden
         * Date of the input field. Internal use.
         * For programmatic selection, use two-way binding on the date input.
         */
        this._inputFieldDate = null;
        /** @hidden */
        this._isInvalidDateInput = false;
        /** @hidden whether to display date or time in mobile mode */
        this._displayType = 'date';
        /** @hidden */
        this._showPopoverContents = false;
        /** @hidden */
        this._state = 'default';
        /** @hidden */
        this._injector = inject(Injector);
        /** @hidden */
        this._dynamicComponentService = inject(DynamicComponentService);
        /** @hidden */
        this._focusTrapService = inject(FocusTrapService, {
            optional: true
        });
        /** @hidden */
        this._subscriptions = new Subscription();
        /** @hidden */
        this._touched = false;
        /**
         * Function used to disable certain dates in the calendar.
         * @param fdDate FdDate
         */
        this.disableFunction = () => false;
        /** @hidden */
        this.onChange = () => { };
        /** @hidden */
        this.onTouched = () => { };
        if (!this._dateTimeAdapter) {
            throw createMissingDateImplementationError('DateTimeAdapter');
        }
        if (!this._dateTimeFormats) {
            throw createMissingDateImplementationError('DATE_TIME_FORMATS');
        }
        // default model value
        this.date = _dateTimeAdapter.now();
    }
    /** @hidden */
    ngOnChanges(changes) {
        if (changes.date) {
            this._setTempDateTime();
        }
        if (['displayHours', 'displayMinutes', 'displaySeconds', 'meridian'].some((prop) => prop in changes)) {
            this._calculateTimeOptions();
        }
        if ('isOpen' in changes) {
            this._showPopoverContents = this.isOpen;
            this._changeDetRef.detectChanges();
        }
    }
    /** @hidden */
    ngOnInit() {
        if (this.date) {
            this._setTempDateTime();
        }
        this._calculateTimeOptions();
        this._subscriptions.add(this._dateTimeAdapter.localeChanges.pipe(filter(() => this._inputFieldDate !== '')).subscribe(() => {
            this._setInput(this.date);
            this._calculateTimeOptions();
            this._changeDetRef.detectChanges();
        }));
    }
    /** @hidden */
    ngOnDestroy() {
        this._subscriptions.unsubscribe();
        this._mobileComponentRef?.destroy();
    }
    /** @hidden */
    ngAfterViewInit() {
        this._InitialiseVariablesInMessageService();
        if (this.mobile) {
            this._setUpMobileMode();
        }
        // update bindings after rendering
        // is needed to preperly reflect error state
        setTimeout(() => {
            this._changeDetRef.markForCheck();
        });
    }
    /**
     * @hidden
     * Function that implements Validator Interface, adds validation support for forms
     */
    validate() {
        return this.isCurrentModelValid() && !this._isInvalidDateInput
            ? null
            : {
                dateValidation: {
                    valid: false
                }
            };
    }
    /** Toggles the popover. */
    togglePopover() {
        if (this.isOpen) {
            this.closePopover();
        }
        else {
            this.openPopover();
        }
    }
    /**
     * Method that handles calendar active view change and throws event.
     */
    handleCalendarActiveViewChange(activeView) {
        this.activeViewChange.emit(activeView);
    }
    /** Method that handles blur events on datetime picker input */
    handleOnTouched(event) {
        this._touched = true;
        this.onTouched();
        this.touched.next();
        if (event) {
            this.handleInputChange(event.target.value, false);
        }
    }
    /** Opens the popover. */
    openPopover() {
        if (!this.isOpen && !this.disabled) {
            this._focusTrapService?.pauseCurrentFocusTrap();
            this._showPopoverContents = true;
            this._changeDetRef.detectChanges();
            this.isOpen = true;
            this._onOpenStateChanged(this.isOpen);
        }
    }
    /** Closes the popover and refresh model */
    closePopover() {
        if (!this.isOpen) {
            return;
        }
        this.onClose.emit();
        this.isOpen = false;
        this._changeDetRef.detectChanges();
        this._onOpenStateChanged(this.isOpen);
        this._focusTrapService?.unpauseCurrentFocusTrap();
        this.handleOnTouched();
        this._showPopoverContents = false;
    }
    /** @hidden */
    setInvalidDateInputHandler(isInvalid) {
        this._isInvalidDateInput = isInvalid;
    }
    /** @hidden */
    registerOnChange(fn) {
        this.onChange = fn;
    }
    /** @hidden */
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    /** @hidden */
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
        this._changeDetRef.detectChanges();
    }
    /**
     * @hidden
     * Function that provides support for ControlValueAccessor that allows to use [(ngModel)] or forms
     */
    writeValue(selected) {
        this.date = this._parseDate(selected);
        this._isInvalidDateInput = !this._isModelValid(this.date);
        if (this.isCurrentModelValid()) {
            this._setTempDateTime();
            this._refreshCurrentlyDisplayedCalendarDate(this.date);
        }
        this._setInput(this.date);
    }
    /**
     * @hidden
     * Method that is triggered by events from calendar component, when there is selected date changed.
     * If invalid time model is detected, it takes time model data from TimeComponent.
     */
    handleDateChange(date) {
        this._tempDate = date;
        if (!this.showFooter) {
            this.submit();
        }
    }
    /**
     * @hidden
     * Method that is triggered by events from time component, when there is selected time changed
     */
    handleTimeChange(time) {
        this._tempTime = time;
        if (!this.showFooter) {
            this.submit();
        }
    }
    /**
     * @hidden
     * Method that is triggered when 'OK' button is pressed.
     */
    submit() {
        // Initialize date and time values, defaulting to the current date if invalid
        let currentDate = this._tempDate;
        let currentTime = this._tempTime;
        // Initialize date and time values, defaulting to the current date if invalid
        if (!this._tempDate || !this._dateTimeAdapter.isValid(this._tempDate)) {
            currentDate = this._dateTimeAdapter.today();
        }
        if (!this._tempTime || !this._dateTimeAdapter.isValid(this._tempTime)) {
            currentTime = this._dateTimeAdapter.today();
        }
        try {
            this.date = this._dateTimeAdapter.setTime(currentDate, this._dateTimeAdapter.getHours(currentTime), this._dateTimeAdapter.getMinutes(currentTime), this._dateTimeAdapter.getSeconds(currentTime));
        }
        catch {
            this.date = null;
        }
        this._isInvalidDateInput = !this.isCurrentModelValid();
        this._setInput(this.date);
        this.onChange(this.date);
        if (this.showFooter) {
            this.closePopover();
        }
    }
    /**
     * @hidden
     * Function that is called when 'Cancel' button is pressed.
     */
    cancel() {
        this._tempDate = this.date;
        this._tempTime = this.date;
        this.closePopover();
    }
    /**
     * @hidden
     * Looks like no one uses it. Should be removed?
     */
    focusArrowLeft() {
        if (this._elRef.nativeElement.querySelector('#' + this._calendarComponent.id + '-left-arrow')) {
            this._elRef.nativeElement.querySelector('#' + this._calendarComponent.id + '-left-arrow').focus();
        }
    }
    /**
     * @hidden
     * Method, which is responsible for transforming string to datetime, depending on type or
     * validation the results are different. It also changes to state of _isInvalidDateInput.
     */
    handleInputChange(inputStr, isTypeEvent) {
        if ((isTypeEvent && this.processInputOnBlur) || (!isTypeEvent && !this.processInputOnBlur)) {
            // if processInputOnBlur === true, ignore type event
            // if processInputOnBlur === false, ignore blur/enter event
            return;
        }
        this._inputFieldDate = inputStr ?? '';
        if (!inputStr) {
            this._isInvalidDateInput = !this.allowNull;
            this.date = null;
            this.onChange(null);
            return;
        }
        inputStr = convertToDesiredFormat(inputStr.toString());
        this.date = this._parseDate(inputStr);
        this._isInvalidDateInput = !this._isModelValid(this.date);
        if (!this._isInvalidDateInput) {
            this._setTempDateTime();
            this._refreshCurrentlyDisplayedCalendarDate(this.date);
        }
        this.onChange(this.date);
    }
    /** @hidden */
    dialogApprove() {
        this.isOpen = false;
        this.submit();
    }
    /** Method used to restore original value for mobile mode. */
    dialogDismiss(value) {
        this.date = value;
        this.isOpen = false;
        this._setInput(this.date);
        this.onChange(this.date);
    }
    /** @hidden */
    _changeMessageVisibility() {
        if (this.isOpen) {
            this._popoverFormMessage.hide();
        }
        else {
            this._popoverFormMessage.show();
        }
    }
    /** @hidden */
    _onOpenStateChanged(isOpen) {
        this.isOpenChange.emit(isOpen);
        this._changeMessageVisibility();
        // focus input control every time popup is closed
        if (!isOpen && this._inputElement) {
            this._inputElement.nativeElement.focus({
                preventScroll: this.preventScrollOnFocus
            });
        }
        if (!isOpen) {
            this._showPopoverContents = false;
            this._changeDetRef.detectChanges();
        }
    }
    /** Method that provides information if model selected date/dates have properly types and are valid */
    isCurrentModelValid() {
        return this._isModelValid(this.date);
    }
    /** Method that provides information if FdDateTime passed as arg has properly types and is valid */
    _isModelValid(date) {
        return (date === null && this.allowNull) || this._dateTimeAdapter.isValid(date);
    }
    /** @hidden */
    _setInput(dateTime) {
        this._inputFieldDate = dateTime ? this._formatDateTime(dateTime) : '';
        this._changeDetRef.detectChanges();
    }
    /** @hidden */
    _refreshCurrentlyDisplayedCalendarDate(date) {
        this._calendarPendingDate = date;
    }
    /**
     * @hidden
     * Format date time entity.
     */
    _formatDateTime(dateTime) {
        const formattedDate = this.customDateTimeFormat
            ? this._dateTimeAdapter.format(dateTime, this.customDateTimeFormat)
            : this._dateTimeAdapter.format(dateTime, this._dateTimeFormats.display.dateTimeInput);
        return formattedDate || '';
    }
    /** @hidden */
    _InitialiseVariablesInMessageService() {
        this._popoverFormMessage.init(this._inputGroupElement);
        this._popoverFormMessage.message = this._formMessageTemplate;
        this._popoverFormMessage.triggers = this._messageTriggers;
    }
    /** @hidden */
    _parseDate(date) {
        return this._dateTimeAdapter.parse(date, this._dateTimeFormats.parse.dateTimeInput);
    }
    /** @hidden */
    _setTempDateTime() {
        this._tempDate = this.date;
        this._tempTime = this.date;
    }
    /** @hidden */
    _calculateTimeOptions() {
        const format = this._dateTimeFormats.display.dateTimeInput;
        // default meridian option based on format option
        this._meridian =
            this.meridian != null ? this.meridian : this._dateTimeAdapter.isTimeFormatIncludesDayPeriod(format);
        // default seconds option based on format option
        this._displaySeconds =
            this.displaySeconds != null
                ? this.displaySeconds
                : this._dateTimeAdapter.isTimeFormatIncludesSeconds(format);
        // default minutes option based on format option
        this._displayMinutes =
            this.displayMinutes != null
                ? this.displayMinutes
                : this._dateTimeAdapter.isTimeFormatIncludesMinutes(format);
        // default hours option based on format option
        this._displayHours =
            this.displayHours != null ? this.displayHours : this._dateTimeAdapter.isTimeFormatIncludesHours(format);
    }
    /** @hidden */
    _setUpMobileMode() {
        const injector = Injector.create({
            providers: [
                { provide: FD_DATETIME_PICKER_COMPONENT, useValue: this },
                {
                    provide: FD_DATETIME_PICKER_MOBILE_CONFIG,
                    useValue: { pickerTemplate: this._pickerTemplate }
                }
            ],
            parent: this._injector
        });
        this._mobileComponentRef = this._dynamicComponentService.createDynamicComponent({}, (DatetimePickerMobileComponent), {
            container: 'body'
        }, {
            injector
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DatetimePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.DatetimeAdapter, optional: true }, { token: DATE_TIME_FORMATS, optional: true }, { token: i2.PopoverFormMessageService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: DatetimePickerComponent, isStandalone: true, selector: "fd-datetime-picker", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, customDateTimeFormat: { classPropertyName: "customDateTimeFormat", publicName: "customDateTimeFormat", isSignal: false, isRequired: false, transformFunction: null }, meridian: { classPropertyName: "meridian", publicName: "meridian", isSignal: false, isRequired: false, transformFunction: null }, displaySeconds: { classPropertyName: "displaySeconds", publicName: "displaySeconds", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: false, isRequired: false, transformFunction: null }, messageTriggers: { classPropertyName: "messageTriggers", publicName: "messageTriggers", isSignal: false, isRequired: false, transformFunction: null }, displayMinutes: { classPropertyName: "displayMinutes", publicName: "displayMinutes", isSignal: false, isRequired: false, transformFunction: null }, displayHours: { classPropertyName: "displayHours", publicName: "displayHours", isSignal: false, isRequired: false, transformFunction: null }, useValidation: { classPropertyName: "useValidation", publicName: "useValidation", isSignal: false, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: false, isRequired: false, transformFunction: null }, startingDayOfWeek: { classPropertyName: "startingDayOfWeek", publicName: "startingDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: false, isRequired: false, transformFunction: null }, allowNull: { classPropertyName: "allowNull", publicName: "allowNull", isSignal: false, isRequired: false, transformFunction: null }, keepTwoDigitsTime: { classPropertyName: "keepTwoDigitsTime", publicName: "keepTwoDigitsTime", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, buttonFocusable: { classPropertyName: "buttonFocusable", publicName: "buttonFocusable", isSignal: false, isRequired: false, transformFunction: null }, yearGrid: { classPropertyName: "yearGrid", publicName: "yearGrid", isSignal: false, isRequired: false, transformFunction: null }, aggregatedYearGrid: { classPropertyName: "aggregatedYearGrid", publicName: "aggregatedYearGrid", isSignal: false, isRequired: false, transformFunction: null }, markWeekends: { classPropertyName: "markWeekends", publicName: "markWeekends", isSignal: false, isRequired: false, transformFunction: null }, spinnerButtons: { classPropertyName: "spinnerButtons", publicName: "spinnerButtons", isSignal: false, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: false, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: false, isRequired: false, transformFunction: null }, processInputOnBlur: { classPropertyName: "processInputOnBlur", publicName: "processInputOnBlur", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, preventScrollOnFocus: { classPropertyName: "preventScrollOnFocus", publicName: "preventScrollOnFocus", isSignal: false, isRequired: false, transformFunction: null }, mobile: { classPropertyName: "mobile", publicName: "mobile", isSignal: false, isRequired: false, transformFunction: null }, mobileConfig: { classPropertyName: "mobileConfig", publicName: "mobileConfig", isSignal: false, isRequired: false, transformFunction: null }, mobileLandscape: { classPropertyName: "mobileLandscape", publicName: "mobileLandscape", isSignal: false, isRequired: false, transformFunction: null }, mobilePortrait: { classPropertyName: "mobilePortrait", publicName: "mobilePortrait", isSignal: false, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: false, isRequired: false, transformFunction: null }, specialDaysRules: { classPropertyName: "specialDaysRules", publicName: "specialDaysRules", isSignal: true, isRequired: false, transformFunction: null }, showCalendarLegend: { classPropertyName: "showCalendarLegend", publicName: "showCalendarLegend", isSignal: true, isRequired: false, transformFunction: null }, legendCol: { classPropertyName: "legendCol", publicName: "legendCol", isSignal: true, isRequired: false, transformFunction: null }, disableFunction: { classPropertyName: "disableFunction", publicName: "disableFunction", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { isOpenChange: "isOpenChange", activeViewChange: "activeViewChange", dateChange: "dateChange", calendarChange: "calendarChange", timeChange: "timeChange", onClose: "onClose", touched: "touched" }, host: { classAttribute: "fd-datetime" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => DatetimePickerComponent),
                multi: true
            },
            {
                provide: NG_VALIDATORS,
                useExisting: forwardRef(() => DatetimePickerComponent),
                multi: true
            },
            {
                provide: FD_DATETIME_PICKER_COMPONENT,
                useExisting: DatetimePickerComponent
            },
            registerFormItemControl(DatetimePickerComponent),
            PopoverFormMessageService,
            PopoverService,
            DynamicComponentService
        ], viewQueries: [{ propertyName: "_inputGroupElement", first: true, predicate: ["inputGroupComponent"], descendants: true, read: ElementRef }, { propertyName: "_inputElement", first: true, predicate: InputGroupInputDirective, descendants: true, read: ElementRef }, { propertyName: "_formMessageTemplate", first: true, predicate: ["formMessageTemplate"], descendants: true }, { propertyName: "_pickerTemplate", first: true, predicate: ["pickerTemplate"], descendants: true }, { propertyName: "_calendarCmp", first: true, predicate: CalendarComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n    <fd-popover\n        [(isOpen)]=\"isOpen\"\n        (isOpenChange)=\"_onOpenStateChanged($event)\"\n        [focusTrapped]=\"true\"\n        [focusAutoCapture]=\"false\"\n        [triggers]=\"[]\"\n        [disabled]=\"disabled\"\n        [placement]=\"placement\"\n        [appendTo]=\"appendTo\"\n        [class.fd-popover-full-width]=\"isFullWidth\"\n    >\n        <fd-popover-control>\n            <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n        </fd-popover-control>\n        <fd-popover-body\n            aria-labelledby=\"fd-form-message\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-hidden]=\"!isOpen\"\n            [style.display]=\"'block'\"\n        >\n            @if (_showPopoverContents) {\n                <ng-template [ngTemplateOutlet]=\"pickerTemplate\"></ng-template>\n            }\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-input-group\n        #inputGroupComponent\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        [isControl]=\"true\"\n        [button]=\"true\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [class.fd-datetime__mobile-control]=\"mobile\"\n        glyph=\"date-time\"\n        [isExpanded]=\"isOpen\"\n        [glyphAriaLabel]=\"'coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate\"\n        [iconTitle]=\"'coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate\"\n        (addOnButtonClicked)=\"togglePopover()\"\n    >\n        <input\n            type=\"text\"\n            class=\"fd-input\"\n            fd-input-group-input\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-label]=\"'coreDatetimePicker.datetimeInputLabel' | fdTranslate\"\n            [attr.id]=\"inputId\"\n            [attr.aria-required]=\"required\"\n            [placeholder]=\"placeholder\"\n            [disabled]=\"disabled\"\n            [ngModel]=\"_inputFieldDate | translateDayPeriod\"\n            (keydown.f4)=\"togglePopover()\"\n            (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n            (ngModelChange)=\"handleInputChange($event, true)\"\n            (blur)=\"handleOnTouched($event)\"\n            (click)=\"mobile && openPopover()\"\n        />\n    </fd-input-group>\n</ng-template>\n<ng-template #formMessageTemplate>\n    @if (_message) {\n        <fd-form-message id=\"fd-form-message\" [embedded]=\"true\" [type]=\"state\">\n            {{ _message }}\n        </fd-form-message>\n    }\n</ng-template>\n<ng-template #pickerTemplate>\n    <div class=\"fd-datetime__wrapper\">\n        <ng-template [ngTemplateOutlet]=\"formMessageTemplate\"></ng-template>\n        <div\n            class=\"fd-datetime__display-type-switcher\"\n            [class.fd-datetime__display-type-switcher--desktop]=\"!mobile || (mobile && mobileLandscape)\"\n            [class.fd-datetime__display-type-switcher--mobile]=\"mobile && mobilePortrait\"\n        >\n            <fd-segmented-button [(ngModel)]=\"_displayType\">\n                <button\n                    fd-button\n                    [label]=\"'coreDatetimePicker.displayTypeDateLabel' | fdTranslate\"\n                    value=\"date\"\n                ></button>\n                <button\n                    fd-button\n                    [label]=\"'coreDatetimePicker.displayTypeTimeLabel' | fdTranslate\"\n                    value=\"time\"\n                ></button>\n            </fd-segmented-button>\n        </div>\n        <ng-content></ng-content>\n        <div class=\"fd-datetime__container\" [class.fd-datetime__container--mobile-portrait]=\"mobile && mobilePortrait\">\n            <fd-calendar\n                [ngClass]=\"[\n                    !mobile && _displayType === 'date' ? 'fd-datetime__active-display-type' : '',\n                    mobile && mobilePortrait && _displayType === 'date' ? 'fd-datetime__mobile-display' : ''\n                ]\"\n                calType=\"single\"\n                [activeView]=\"activeView\"\n                [disableFunction]=\"disableFunction || null\"\n                [selectedDate]=\"_tempDate\"\n                [escapeFocusFunction]=\"null\"\n                [markWeekends]=\"markWeekends\"\n                [specialDaysRules]=\"specialDaysRules()\"\n                [showCalendarLegend]=\"showCalendarLegend()\"\n                [legendCol]=\"legendCol()\"\n                [showWeekNumbers]=\"showWeekNumbers\"\n                [aggregatedYearGrid]=\"aggregatedYearGrid\"\n                [yearGrid]=\"yearGrid\"\n                [startingDayOfWeek]=\"startingDayOfWeek\"\n                (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n                (selectedDateChange)=\"handleDateChange($event)\"\n                (isValidDateChange)=\"setInvalidDateInputHandler($event)\"\n            ></fd-calendar>\n            @if (!mobilePortrait) {\n                <div class=\"fd-datetime__separator\"></div>\n            }\n            @if (isOpen) {\n                <fd-time\n                    [ngClass]=\"[\n                        !mobile && _displayType === 'time' ? 'fd-datetime__active-display-type' : '',\n                        mobile && mobilePortrait && _displayType === 'time' ? 'fd-datetime__mobile-display' : ''\n                    ]\"\n                    [disabled]=\"disabled\"\n                    [elementsAtOnce]=\"5\"\n                    [keepTwoDigits]=\"keepTwoDigitsTime\"\n                    [ngModel]=\"_tempTime\"\n                    [spinnerButtons]=\"spinnerButtons\"\n                    [meridian]=\"_meridian\"\n                    [displaySeconds]=\"_displaySeconds\"\n                    [displayMinutes]=\"_displayMinutes\"\n                    [displayHours]=\"_displayHours\"\n                    (ngModelChange)=\"handleTimeChange($event)\"\n                ></fd-time>\n            }\n        </div>\n        @if (!mobile && showFooter) {\n            <div fd-popover-body-footer>\n                <div class=\"fd-datetime__bar\" fd-bar barDesign=\"footer\">\n                    <div fd-bar-right>\n                        <fd-bar-element>\n                            <button\n                                fd-button\n                                fdType=\"emphasized\"\n                                [disabled]=\"!_tempDate\"\n                                [label]=\"'coreDatetimePicker.datetimeOkLabel' | fdTranslate\"\n                                [ariaLabel]=\"'coreDatetimePicker.datetimeOkLabel' | fdTranslate\"\n                                (click)=\"submit()\"\n                            ></button>\n                        </fd-bar-element>\n                        <fd-bar-element>\n                            <button\n                                fd-button\n                                fdType=\"transparent\"\n                                [label]=\"'coreDatetimePicker.datetimeCancelLabel' | fdTranslate\"\n                                [ariaLabel]=\"'coreDatetimePicker.datetimeCancelLabel' | fdTranslate\"\n                                (click)=\"cancel()\"\n                            ></button>\n                        </fd-bar-element>\n                    </div>\n                </div>\n            </div>\n        }\n    </div>\n</ng-template>\n", styles: [".fd-datetime{display:block}.fd-datetime__bar{overflow:hidden}.fd-datetime__wrapper{max-height:80vh;max-width:80vw}.fd-datetime__mobile-control{display:inline-block;max-width:100%}.fd-datetime__container{display:flex;align-items:center;justify-content:center;margin:0 1rem}.fd-datetime__container--mobile-portrait>*:not(.fd-datetime__mobile-display){display:none!important}.fd-datetime__separator{background-color:#d3d3d3;width:.0625rem;margin:2.625rem 1.75rem;align-self:stretch}.fd-datetime fd-time{width:auto}.fd-datetime__display-type-switcher{margin-top:1rem;display:none;width:100%;justify-content:center}.fd-datetime__display-type-switcher--mobile{display:flex}.fd-popover-full-width{width:100%}@media(max-width:60rem){.fd-datetime__display-type-switcher{display:flex}.fd-datetime__wrapper{min-width:min(20rem,90vw)}.fd-datetime__container>*:not(.fd-datetime__active-display-type){display:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { kind: "directive", type: PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy", "ariaLabel"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { 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: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle", "vertical"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: CalendarComponent, selector: "fd-calendar", inputs: ["selectedDate", "selectedMultipleDates", "selectedRangeDate", "selectedMultipleDateRanges", "markWeekends", "showWeekNumbers", "allowMultipleSelection", "mobileLandscape", "mobilePortrait", "activeView", "startingDayOfWeek", "calType", "id", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "rangeHoverEffect", "dateRangeFormat", "previousButtonDisableFunction", "nextButtonDisableFunction", "showCalendarLegend", "legendCol", "escapeFocusFunction", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["activeViewChange", "selectedDateChange", "selectedMultipleDatesChange", "selectedRangeDateChange", "selectedMultipleDateRangesChange", "isValidDateChange", "closeCalendar", "closeClicked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TimeComponent, selector: "fd-time", inputs: ["meridian", "validate", "keepTwoDigits", "disabled", "displaySeconds", "displayMinutes", "displayHours", "tablet", "elementsAtOnce", "time", "spinnerButtons", "minuteStep"] }, { kind: "component", type: BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "clear", "size", "role"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: TranslateDayPeriodPipe, name: "translateDayPeriod" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DatetimePickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fd-datetime-picker', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => DatetimePickerComponent),
                            multi: true
                        },
                        {
                            provide: NG_VALIDATORS,
                            useExisting: forwardRef(() => DatetimePickerComponent),
                            multi: true
                        },
                        {
                            provide: FD_DATETIME_PICKER_COMPONENT,
                            useExisting: DatetimePickerComponent
                        },
                        registerFormItemControl(DatetimePickerComponent),
                        PopoverFormMessageService,
                        PopoverService,
                        DynamicComponentService
                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        class: 'fd-datetime'
                    }, imports: [
                        NgTemplateOutlet,
                        PopoverControlComponent,
                        PopoverBodyComponent,
                        PopoverBodyFooterDirective,
                        PopoverComponent,
                        InputGroupComponent,
                        InputGroupInputDirective,
                        FormsModule,
                        FormMessageComponent,
                        SegmentedButtonComponent,
                        ButtonComponent,
                        CalendarComponent,
                        NgClass,
                        TimeComponent,
                        BarComponent,
                        BarRightDirective,
                        BarElementDirective,
                        FdTranslatePipe,
                        TranslateDayPeriodPipe
                    ], template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n    <fd-popover\n        [(isOpen)]=\"isOpen\"\n        (isOpenChange)=\"_onOpenStateChanged($event)\"\n        [focusTrapped]=\"true\"\n        [focusAutoCapture]=\"false\"\n        [triggers]=\"[]\"\n        [disabled]=\"disabled\"\n        [placement]=\"placement\"\n        [appendTo]=\"appendTo\"\n        [class.fd-popover-full-width]=\"isFullWidth\"\n    >\n        <fd-popover-control>\n            <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n        </fd-popover-control>\n        <fd-popover-body\n            aria-labelledby=\"fd-form-message\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-hidden]=\"!isOpen\"\n            [style.display]=\"'block'\"\n        >\n            @if (_showPopoverContents) {\n                <ng-template [ngTemplateOutlet]=\"pickerTemplate\"></ng-template>\n            }\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-input-group\n        #inputGroupComponent\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        [isControl]=\"true\"\n        [button]=\"true\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [class.fd-datetime__mobile-control]=\"mobile\"\n        glyph=\"date-time\"\n        [isExpanded]=\"isOpen\"\n        [glyphAriaLabel]=\"'coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate\"\n        [iconTitle]=\"'coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate\"\n        (addOnButtonClicked)=\"togglePopover()\"\n    >\n        <input\n            type=\"text\"\n            class=\"fd-input\"\n            fd-input-group-input\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-label]=\"'coreDatetimePicker.datetimeInputLabel' | fdTranslate\"\n            [attr.id]=\"inputId\"\n            [attr.aria-required]=\"required\"\n            [placeholder]=\"placeholder\"\n            [disabled]=\"disabled\"\n            [ngModel]=\"_inputFieldDate | translateDayPeriod\"\n            (keydown.f4)=\"togglePopover()\"\n            (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n            (ngModelChange)=\"handleInputChange($event, true)\"\n            (blur)=\"handleOnTouched($event)\"\n            (click)=\"mobile && openPopover()\"\n        />\n    </fd-input-group>\n</ng-template>\n<ng-template #formMessageTemplate>\n    @if (_message) {\n        <fd-form-message id=\"fd-form-message\" [embedded]=\"true\" [type]=\"state\">\n            {{ _message }}\n        </fd-form-message>\n    }\n</ng-template>\n<ng-template #pickerTemplate>\n    <div class=\"fd-datetime__wrapper\">\n        <ng-template [ngTemplateOutlet]=\"formMessageTemplate\"></ng-template>\n        <div\n            class=\"fd-datetime__display-type-switcher\"\n            [class.fd-datetime__display-type-switcher--desktop]=\"!mobile || (mobile && mobileLandscape)\"\n            [class.fd-datetime__display-type-switcher--mobile]=\"mobile && mobilePortrait\"\n        >\n            <fd-segmented-button [(ngModel)]=\"_displayType\">\n                <button\n                    fd-button\n                    [label]=\"'coreDatetimePicker.displayTypeDateLabel' | fdTranslate\"\n                    value=\"date\"\n                ></button>\n                <button\n                    fd-button\n                    [label]=\"'coreDatetimePicker.displayTypeTimeLabel' | fdTranslate\"\n                    value=\"time\"\n                ></button>\n            </fd-segmented-button>\n        </div>\n        <ng-content></ng-content>\n        <div class=\"fd-datetime__container\" [class.fd-datetime__container--mobile-portrait]=\"mobile && mobilePortrait\">\n            <fd-calendar\n                [ngClass]=\"[\n                    !mobile && _displayType === 'date' ? 'fd-datetime__active-display-type' : '',\n                    mobile && mobilePortrait && _displayType === 'date' ? 'fd-datetime__mobile-display' : ''\n                ]\"\n                calType=\"single\"\n                [activeView]=\"activeView\"\n                [disableFunction]=\"disableFunction || null\"\n                [selectedDate]=\"_tempDate\"\n                [escapeFocusFunction]=\"null\"\n                [markWeekends]=\"markWeekends\"\n                [specialDaysRules]=\"specialDaysRules()\"\n                [showCalendarLegend]=\"showCalendarLegend()\"\n                [legendCol]=\"legendCol()\"\n                [showWeekNumbers]=\"showWeekNumbers\"\n                [aggregatedYearGrid]=\"aggregatedYearGrid\"\n                [yearGrid]=\"yearGrid\"\n                [startingDayOfWeek]=\"startingDayOfWeek\"\n                (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n                (selectedDateChange)=\"handleDateChange($event)\"\n                (isValidDateChange)=\"setInvalidDateInputHandler($event)\"\n            ></fd-calendar>\n            @if (!mobilePortrait) {\n                <div class=\"fd-datetime__separator\"></div>\n            }\n            @if (isOpen) {\n                <fd-time\n                    [ngClass]=\"[\n                        !mobile && _displayType === 'time' ? 'fd-datetime__active-display-type' : '',\n                        mobile && mobilePortrait && _displayType === 'time' ? 'fd-datetime__mobile-display' : ''\n                    ]\"\n                    [disabled]=\"disabled\"\n                    [elementsAtOnce]=\"5\"\n                    [keepTwoDigits]=\"keepTwoDigitsTime\"\n                    [ngModel]=\"_tempTime\"\n                    [spinnerButtons]=\"spinnerButtons\"\n                    [meridian]=\"_meridian\"\n                    [displaySeconds]=\"_displaySeconds\"\n                    [displayMinutes]=\"_displayMinutes\"\n                    [displayHours]=\"_displayHours\"\n                    (ngModelChange)=\"handleTimeChange($event)\"\n                ></fd-time>\n            }\n        </div>\n        @if (!mobile && showFooter) {\n            <div fd-popover-body-footer>\n                <div class=\"fd-datetime__bar\" fd-bar barDesign=\"footer\">\n                    <div fd-bar-right>\n                        <fd-bar-element>\n                            <button\n                                fd-button\n                                fdType=\"emphasized\"\n                                [disabled]=\"!_tempDate\"\n                                [label]=\"'coreDatetimePicker.datetimeOkLabel' | fdTranslate\"\n                                [ariaLabel]=\"'coreDatetimePicker.datetimeOkLabel' | fdTranslate\"\n                                (click)=\"submit()\"\n                            ></button>\n                        </fd-bar-element>\n                        <fd-bar-element>\n                            <button\n                                fd-button\n                                fdType=\"transparent\"\n                                [label]=\"'coreDatetimePicker.datetimeCancelLabel' | fdTranslate\"\n                                [ariaLabel]=\"'coreDatetimePicker.datetimeCancelLabel' | fdTranslate\"\n                                (click)=\"cancel()\"\n                            ></button>\n                        </fd-bar-element>\n                    </div>\n                </div>\n            </div>\n        }\n    </div>\n</ng-template>\n", styles: [".fd-datetime{display:block}.fd-datetime__bar{overflow:hidden}.fd-datetime__wrapper{max-height:80vh;max-width:80vw}.fd-datetime__mobile-control{display:inline-block;max-width:100%}.fd-datetime__container{display:flex;align-items:center;justify-content:center;margin:0 1rem}.fd-datetime__container--mobile-portrait>*:not(.fd-datetime__mobile-display){display:none!important}.fd-datetime__separator{background-color:#d3d3d3;width:.0625rem;margin:2.625rem 1.75rem;align-self:stretch}.fd-datetime fd-time{width:auto}.fd-datetime__display-type-switcher{margin-top:1rem;display:none;width:100%;justify-content:center}.fd-datetime__display-type-switcher--mobile{display:flex}.fd-popover-full-width{width:100%}@media(max-width:60rem){.fd-datetime__display-type-switcher{display:flex}.fd-datetime__wrapper{min-width:min(20rem,90vw)}.fd-datetime__container>*:not(.fd-datetime__active-display-type){display:none}}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.DatetimeAdapter, decorators: [{
                    type: Optional
                }] }, { type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [DATE_TIME_FORMATS]
                }] }, { type: i2.PopoverFormMessageService }], propDecorators: { placeholder: [{
                type: Input
            }], placement: [{
                type: Input
            }], appendTo: [{
                type: Input
            }], disabled: [{
                type: Input
            }], inputId: [{
                type: Input
            }], required: [{
                type: Input
            }], customDateTimeFormat: [{
                type: Input
            }], meridian: [{
                type: Input
            }], displaySeconds: [{
                type: Input
            }], ariaLabelledBy: [{
                type: Input
            }], message: [{
                type: Input
            }], messageTriggers: [{
                type: Input
            }], displayMinutes: [{
                type: Input
            }], displayHours: [{
                type: Input
            }], useValidation: [{
                type: Input
            }], date: [{
                type: Input
            }], isOpen: [{
                type: Input
            }], startingDayOfWeek: [{
                type: Input
            }], activeView: [{
                type: Input
            }], allowNull: [{
                type: Input
            }], keepTwoDigitsTime: [{
                type: Input
            }], state: [{
                type: Input
            }], buttonFocusable: [{
                type: Input
            }], yearGrid: [{
                type: Input
            }], aggregatedYearGrid: [{
                type: Input
            }], markWeekends: [{
                type: Input
            }], spinnerButtons: [{
                type: Input
            }], showWeekNumbers: [{
                type: Input
            }], showFooter: [{
                type: Input
            }], processInputOnBlur: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], preventScrollOnFocus: [{
                type: Input
            }], mobile: [{
                type: Input
            }], mobileConfig: [{
                type: Input
            }], mobileLandscape: [{
                type: Input
            }], mobilePortrait: [{
                type: Input
            }], isFullWidth: [{
                type: Input
            }], isOpenChange: [{
                type: Output
            }], activeViewChange: [{
                type: Output
            }], dateChange: [{
                type: Output
            }], calendarChange: [{
                type: Output
            }], timeChange: [{
                type: Output
            }], onClose: [{
                type: Output
            }], touched: [{
                type: Output
            }], _inputGroupElement: [{
                type: ViewChild,
                args: ['inputGroupComponent', {
                        read: ElementRef
                    }]
            }], _inputElement: [{
                type: ViewChild,
                args: [InputGroupInputDirective, {
                        read: ElementRef
                    }]
            }], _formMessageTemplate: [{
                type: ViewChild,
                args: ['formMessageTemplate']
            }], _pickerTemplate: [{
                type: ViewChild,
                args: ['pickerTemplate']
            }], specialDaysRules: [{ type: i0.Input, args: [{ isSignal: true, alias: "specialDaysRules", required: false }] }], showCalendarLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCalendarLegend", required: false }] }], legendCol: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendCol", required: false }] }], _calendarCmp: [{
                type: ViewChild,
                args: [CalendarComponent, { static: false }]
            }], disableFunction: [{
                type: Input
            }] } });

/**
 * @deprecated
 * Use direct imports of components and directives.
 */
class DatetimePickerModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DatetimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: DatetimePickerModule, imports: [DatetimePickerComponent, DatetimePickerMobileComponent], exports: [DatetimePickerComponent, DatetimePickerMobileComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DatetimePickerModule, imports: [DatetimePickerComponent, DatetimePickerMobileComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DatetimePickerModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [DatetimePickerComponent, DatetimePickerMobileComponent],
                    exports: [DatetimePickerComponent, DatetimePickerMobileComponent]
                }]
        }] });

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

export { DatetimePickerComponent, DatetimePickerMobileComponent, DatetimePickerModule };
//# sourceMappingURL=fundamental-ngx-core-datetime-picker.mjs.map
