@fundamental-ngx/core 0.45.1 → 0.46.0-rc.1

package/fesm2022/fundamental-ngx-core-datetime-picker.mjs

@@ -1,34 +1,39 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, ElementRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Inject, Input, Output, ViewChild, NgModule } from '@angular/core';
-import * as i3 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { IconModule } from '@fundamental-ngx/core/icon';
-import * as i4 from '@fundamental-ngx/core/popover';
-import { PopoverService, PopoverModule } from '@fundamental-ngx/core/popover';
-import * as i5 from '@fundamental-ngx/core/calendar';
-import { CalendarComponent, CalendarModule } from '@fundamental-ngx/core/calendar';
-import * as i6 from '@angular/forms';
+import { InjectionToken, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, Optional, ViewChild, EventEmitter, inject, Injector, forwardRef, ElementRef, Input, Output, NgModule } from '@angular/core';
+import * as i5 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
-import { Subject, Subscription } from 'rxjs';
-import { takeUntil, filter } from 'rxjs/operators';
-import * as i1 from '@fundamental-ngx/core/datetime';
+import { Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import * as i1$1 from '@fundamental-ngx/core/datetime';
 import { DATE_TIME_FORMATS } from '@fundamental-ngx/core/datetime';
+import { CalendarComponent } from '@fundamental-ngx/core/calendar';
 import * as i2 from '@fundamental-ngx/core/form';
 import { registerFormItemControl, PopoverFormMessageService, FormMessageModule } from '@fundamental-ngx/core/form';
-import * as i8 from '@fundamental-ngx/core/input-group';
+import * as i3$1 from '@fundamental-ngx/core/popover';
+import { PopoverService, PopoverModule } from '@fundamental-ngx/core/popover';
+import * as i4$1 from '@fundamental-ngx/core/input-group';
 import { InputGroupInputDirective, InputGroupModule } from '@fundamental-ngx/core/input-group';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i7 from '@fundamental-ngx/core/time';
+import * as i4 from '@fundamental-ngx/cdk/utils';
+import { InitialFocusDirective, DynamicComponentService } from '@fundamental-ngx/cdk/utils';
+import { MobileModeBase, MobileModeControl, MOBILE_MODE_CONFIG } from '@fundamental-ngx/core/mobile-mode';
+import * as i1 from '@fundamental-ngx/core/dialog';
+import { DialogModule } from '@fundamental-ngx/core/dialog';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i9 from '@fundamental-ngx/core/bar';
+import { BarModule } from '@fundamental-ngx/core/bar';
+import { ScrollbarDirective } from '@fundamental-ngx/core/scrollbar';
+import { CdkScrollable } from '@angular/cdk/overlay';
+import * as i3 from '@fundamental-ngx/core/title';
+import { TitleModule } from '@fundamental-ngx/core/title';
+import { NgIf, NgTemplateOutlet, NgClass } from '@angular/common';
+import { FdTranslatePipe } from '@fundamental-ngx/i18n';
+import * as i8 from '@fundamental-ngx/core/time';
 import { TimeModule } from '@fundamental-ngx/core/time';
-import * as i9 from '@fundamental-ngx/core/button';
+import * as i7 from '@fundamental-ngx/core/button';
 import { ButtonModule } from '@fundamental-ngx/core/button';
-import * as i10 from '@fundamental-ngx/core/bar';
-import { BarModule } from '@fundamental-ngx/core/bar';
-import * as i11 from '@fundamental-ngx/core/segmented-button';
+import * as i6 from '@fundamental-ngx/core/segmented-button';
 import { SegmentedButtonModule } from '@fundamental-ngx/core/segmented-button';
-import * as i12 from '@fundamental-ngx/i18n';
-import { I18nModule } from '@fundamental-ngx/i18n';
-import { ContentDensityModule } from '@fundamental-ngx/core/content-density';
 
 /** Creates an error to be thrown when attempting to use an invalid date implementation. */
 function createMissingDateImplementationError(provider) {
@@ -37,6 +42,88 @@ function createMissingDateImplementationError(provider) {
         `custom implementation.`);
 }
 
+const FD_DATETIME_PICKER_COMPONENT = new InjectionToken('FdDateTimePickerComponent');
+const FD_DATETIME_PICKER_MOBILE_CONFIG = new InjectionToken('FdDateTimePickerMobileConfig');
+
+class DatetimePickerMobileComponent extends MobileModeBase {
+    /** @hidden */
+    constructor(elementRef, dialogService, _destroyRef, dateTimePickerConfig, datePickerComponent, mobileModes) {
+        super(elementRef, dialogService, datePickerComponent, MobileModeControl.DATETIME_PICKER, mobileModes);
+        this._destroyRef = _destroyRef;
+        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: "16.1.0", ngImport: i0, type: DatetimePickerMobileComponent, deps: [{ token: i0.ElementRef }, { token: i1.DialogService }, { token: i0.DestroyRef }, { token: FD_DATETIME_PICKER_MOBILE_CONFIG }, { token: FD_DATETIME_PICKER_COMPONENT }, { token: MOBILE_MODE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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 let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 fd-title *ngIf=\"mobileConfig?.title\">{{ mobileConfig.title }}</h1>\n            <button\n                title=\"Close\"\n                fd-dialog-close-button\n                *ngIf=\"mobileConfig?.hasCloseButton\"\n                [mobile]=\"true\"\n                (click)=\"handleDismiss()\"\n            ></button>\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container *ngTemplateOutlet=\"dateTimePickerConfig?.pickerTemplate || null\"></ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.approveButtonText\"\n                fdType=\"emphasized\"\n                [label]=\"mobileConfig.approveButtonText!\"\n                (click)=\"handleApprove()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.cancelButtonText\"\n                fdkInitialFocus\n                [label]=\"mobileConfig.cancelButtonText!\"\n                (click)=\"handleDismiss()\"\n            >\n            </fd-button-bar>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "component", type: i9.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i3.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i4.InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TitleModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: BarModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DatetimePickerMobileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fd-datetime-picker-mobile', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        DialogModule,
+                        NgIf,
+                        TitleModule,
+                        CdkScrollable,
+                        ScrollbarDirective,
+                        NgTemplateOutlet,
+                        BarModule,
+                        InitialFocusDirective
+                    ], template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 fd-title *ngIf=\"mobileConfig?.title\">{{ mobileConfig.title }}</h1>\n            <button\n                title=\"Close\"\n                fd-dialog-close-button\n                *ngIf=\"mobileConfig?.hasCloseButton\"\n                [mobile]=\"true\"\n                (click)=\"handleDismiss()\"\n            ></button>\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container *ngTemplateOutlet=\"dateTimePickerConfig?.pickerTemplate || null\"></ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.approveButtonText\"\n                fdType=\"emphasized\"\n                [label]=\"mobileConfig.approveButtonText!\"\n                (click)=\"handleApprove()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.cancelButtonText\"\n                fdkInitialFocus\n                [label]=\"mobileConfig.cancelButtonText!\"\n                (click)=\"handleDismiss()\"\n            >\n            </fd-button-bar>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.DialogService }, { type: i0.DestroyRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FD_DATETIME_PICKER_MOBILE_CONFIG]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FD_DATETIME_PICKER_COMPONENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MOBILE_MODE_CONFIG]
+                }] }]; }, propDecorators: { dialogTemplate: [{
+                type: ViewChild,
+                args: ['dialogTemplate']
+            }] } });
+
 /**
  * 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.
@@ -114,10 +201,6 @@ class DatetimePickerComponent {
         this.placement = 'bottom-start';
         /** If it is mandatory field */
         this.required = false;
-        /** @hidden */
-        this._message = null;
-        /** @hidden */
-        this._messageTriggers = ['focusin', 'focusout'];
         /** Whether to perform visual validation on the picker input. */
         this.useValidation = true;
         /** Whether the popover is open. Two-way binding is supported. */
@@ -142,7 +225,7 @@ class DatetimePickerComponent {
         this.buttonFocusable = true;
         /**
          * Special days mark, it can be used by passing array of object with
-         * Special day number, list 1-20 [class:`fd-calendar__special-day--{{number}}`] is available there:
+         * 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.
@@ -180,6 +263,12 @@ class DatetimePickerComponent {
          * 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;
         /** Event emitted when the state of the isOpen property changes. */
         this.isOpenChange = new EventEmitter();
         /** Event thrown every time calendar active view is changed */
@@ -195,6 +284,10 @@ class DatetimePickerComponent {
         /** Event emitted when datepicker changes it's "touched" state. */
         this.touched = new EventEmitter();
         /** @hidden */
+        this._message = null;
+        /** @hidden */
+        this._messageTriggers = ['focusin', 'focusout'];
+        /** @hidden */
         this._processInputOnBlur = false;
         /**
          * @hidden
@@ -211,20 +304,22 @@ class DatetimePickerComponent {
         /** @hidden */
         this._state = 'default';
         /** @hidden */
-        this._onDestroy$ = new Subject();
+        this._injector = inject(Injector);
+        /** @hidden */
+        this._dynamicComponentService = inject(DynamicComponentService);
         /** @hidden */
         this._subscriptions = new Subscription();
         /** @hidden */
         this._touched = false;
-        /** @hidden */
-        this.onChange = () => { };
-        /** @hidden */
-        this.onTouched = () => { };
         /**
          * 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');
         }
@@ -253,23 +348,23 @@ class DatetimePickerComponent {
             this._setTempDateTime();
         }
         this._calculateTimeOptions();
-        this._dateTimeAdapter.localeChanges
-            .pipe(takeUntil(this._onDestroy$), filter(() => this._inputFieldDate !== ''))
-            .subscribe(() => {
+        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._onDestroy$.next();
-        this._onDestroy$.complete();
+        this._mobileComponentRef?.destroy();
     }
     /** @hidden */
     ngAfterViewInit() {
         this._InitialiseVariablesInMessageService();
+        if (this.mobile) {
+            this._setUpMobileMode();
+        }
         // update bindings after rendering
         // is needed to preperly reflect error state
         setTimeout(() => {
@@ -453,6 +548,18 @@ class DatetimePickerComponent {
         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();
@@ -533,8 +640,26 @@ class DatetimePickerComponent {
         this._displayHours =
             this.displayHours != null ? this.displayHours : this._dateTimeAdapter.isTimeFormatIncludesHours(format);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.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: "14.0.0", version: "16.1.0", type: DatetimePickerComponent, selector: "fd-datetime-picker", inputs: { placeholder: "placeholder", placement: "placement", appendTo: "appendTo", disabled: "disabled", inputId: "inputId", required: "required", meridian: "meridian", displaySeconds: "displaySeconds", ariaLabelledBy: "ariaLabelledBy", message: "message", messageTriggers: "messageTriggers", displayMinutes: "displayMinutes", displayHours: "displayHours", useValidation: "useValidation", date: "date", isOpen: "isOpen", startingDayOfWeek: "startingDayOfWeek", activeView: "activeView", allowNull: "allowNull", keepTwoDigitsTime: "keepTwoDigitsTime", state: "state", buttonFocusable: "buttonFocusable", specialDaysRules: "specialDaysRules", yearGrid: "yearGrid", aggregatedYearGrid: "aggregatedYearGrid", markWeekends: "markWeekends", spinnerButtons: "spinnerButtons", showWeekNumbers: "showWeekNumbers", showFooter: "showFooter", processInputOnBlur: "processInputOnBlur", preventScrollOnFocus: "preventScrollOnFocus", disableFunction: "disableFunction" }, outputs: { isOpenChange: "isOpenChange", activeViewChange: "activeViewChange", dateChange: "dateChange", calendarChange: "calendarChange", timeChange: "timeChange", onClose: "onClose", touched: "touched" }, providers: [
+    /** @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: "16.1.0", ngImport: i0, type: DatetimePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.DatetimeAdapter, optional: true }, { token: DATE_TIME_FORMATS, optional: true }, { token: i2.PopoverFormMessageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: DatetimePickerComponent, isStandalone: true, selector: "fd-datetime-picker", inputs: { placeholder: "placeholder", placement: "placement", appendTo: "appendTo", disabled: "disabled", inputId: "inputId", required: "required", meridian: "meridian", displaySeconds: "displaySeconds", ariaLabelledBy: "ariaLabelledBy", message: "message", messageTriggers: "messageTriggers", displayMinutes: "displayMinutes", displayHours: "displayHours", useValidation: "useValidation", date: "date", isOpen: "isOpen", startingDayOfWeek: "startingDayOfWeek", activeView: "activeView", allowNull: "allowNull", keepTwoDigitsTime: "keepTwoDigitsTime", state: "state", buttonFocusable: "buttonFocusable", specialDaysRules: "specialDaysRules", yearGrid: "yearGrid", aggregatedYearGrid: "aggregatedYearGrid", markWeekends: "markWeekends", spinnerButtons: "spinnerButtons", showWeekNumbers: "showWeekNumbers", showFooter: "showFooter", processInputOnBlur: "processInputOnBlur", preventScrollOnFocus: "preventScrollOnFocus", mobile: "mobile", mobileConfig: "mobileConfig", mobileLandscape: "mobileLandscape", mobilePortrait: "mobilePortrait", disableFunction: "disableFunction" }, 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),
@@ -545,10 +670,15 @@ class DatetimePickerComponent {
                 useExisting: forwardRef(() => DatetimePickerComponent),
                 multi: true
             },
+            {
+                provide: FD_DATETIME_PICKER_COMPONENT,
+                useExisting: DatetimePickerComponent
+            },
             registerFormItemControl(DatetimePickerComponent),
             PopoverFormMessageService,
-            PopoverService
-        ], viewQueries: [{ propertyName: "_calendarCmp", first: true, predicate: CalendarComponent, descendants: true }, { propertyName: "_inputGroupElement", first: true, predicate: ["inputGroupComponent"], descendants: true, read: ElementRef }, { propertyName: "_inputElement", first: true, predicate: InputGroupInputDirective, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fd-datetime\">\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    >\n        <fd-popover-control>\n            <fd-input-group\n                #inputGroupComponent\n                [state]=\"state\"\n                [disabled]=\"disabled\"\n                [isControl]=\"true\"\n                [button]=\"true\"\n                [buttonFocusable]=\"buttonFocusable\"\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\"\n                    (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n                    (ngModelChange)=\"handleInputChange($event, true)\"\n                    (blur)=\"handleOnTouched($event)\"\n                />\n            </fd-input-group>\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            <ng-container *ngIf=\"_showPopoverContents\">\n                <div class=\"fd-datetime__wrapper\">\n                    <fd-form-message id=\"fd-form-message\" [embedded]=\"true\" *ngIf=\"_message\" [type]=\"state\">\n                        {{ _message }}\n                    </fd-form-message>\n                    <div class=\"fd-datetime__display-type-switcher\">\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\">\n                        <fd-calendar\n                            [class.fd-datetime__active-display-type]=\"_displayType === 'date'\"\n                            calType=\"single\"\n                            [activeView]=\"activeView\"\n                            [disableFunction]=\"disableFunction || null\"\n                            [selectedDate]=\"_tempDate\"\n                            [escapeFocusFunction]=\"null\"\n                            [markWeekends]=\"markWeekends\"\n                            [specialDaysRules]=\"specialDaysRules\"\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                        <div class=\"fd-datetime__separator\"></div>\n                        <fd-time\n                            *ngIf=\"isOpen\"\n                            [class.fd-datetime__active-display-type]=\"_displayType === 'time'\"\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                    </div>\n                    <div fd-popover-body-footer *ngIf=\"showFooter\">\n                        <div 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                </div>\n            </ng-container>\n        </fd-popover-body>\n    </fd-popover>\n</div>\n", styles: [".fd-datetime{display:block}.fd-datetime__wrapper{max-height:80vh;max-width:80vw}.fd-datetime__container{display:flex;align-items:center;justify-content:center;margin:0 16px}.fd-datetime__separator{background-color:#d3d3d3;width:1px;margin:42px 28px;align-self:stretch}.fd-datetime fd-time{width:auto}.fd-datetime__display-type-switcher{margin-top:1rem;display:none;width:100%;justify-content:center}@media (max-width: 960px){.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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i4.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "directive", type: i4.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i4.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i5.CalendarComponent, selector: "fd-calendar", inputs: ["selectedDate", "markWeekends", "showWeekNumbers", "mobileLandscape", "mobilePortrait", "selectedRangeDate", "activeView", "startingDayOfWeek", "calType", "id", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "rangeHoverEffect", "previousButtonDisableFunction", "nextButtonDisableFunction", "escapeFocusFunction", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["activeViewChange", "selectedDateChange", "selectedRangeDateChange", "isValidDateChange", "closeCalendar", "closeClicked"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.TimeComponent, selector: "fd-time", inputs: ["meridian", "validate", "keepTwoDigits", "disabled", "displaySeconds", "displayMinutes", "displayHours", "tablet", "elementsAtOnce", "time", "spinnerButtons"] }, { kind: "component", type: i8.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i8.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i10.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i10.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i10.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i11.SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle"] }, { kind: "component", type: i2.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "pipe", type: i12.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+            PopoverService,
+            DynamicComponentService
+        ], viewQueries: [{ propertyName: "_calendarCmp", first: true, predicate: CalendarComponent, descendants: true }, { propertyName: "_inputGroupElement", first: true, predicate: ["inputGroupComponent"], descendants: true, read: ElementRef }, { propertyName: "_inputElement", first: true, predicate: InputGroupInputDirective, descendants: true, read: ElementRef }, { propertyName: "_pickerTemplate", first: true, predicate: ["pickerTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\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    >\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            <ng-template [ngTemplateOutlet]=\"pickerTemplate\"></ng-template>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\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\"\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\n<ng-template #pickerTemplate>\n    <ng-container *ngIf=\"_showPopoverContents\">\n        <div class=\"fd-datetime__wrapper\">\n            <fd-form-message id=\"fd-form-message\" [embedded]=\"true\" *ngIf=\"_message\" [type]=\"state\">\n                {{ _message }}\n            </fd-form-message>\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\n                class=\"fd-datetime__container\"\n                [class.fd-datetime__container--mobile-portrait]=\"mobile && mobilePortrait\"\n            >\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                    [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                <div class=\"fd-datetime__separator\" *ngIf=\"!mobilePortrait\"></div>\n                <fd-time\n                    *ngIf=\"isOpen\"\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            </div>\n            <div fd-popover-body-footer *ngIf=\"!mobile && showFooter\">\n                <div 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        </div>\n    </ng-container>\n</ng-template>\n", styles: [".fd-datetime{display:block}.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}@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: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$1.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i3$1.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "directive", type: i3$1.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i3$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i4$1.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i4$1.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormMessageModule }, { kind: "component", type: i2.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "ngmodule", type: SegmentedButtonModule }, { kind: "component", type: i6.SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i7.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: CalendarComponent, selector: "fd-calendar", inputs: ["selectedDate", "markWeekends", "showWeekNumbers", "mobileLandscape", "mobilePortrait", "selectedRangeDate", "activeView", "startingDayOfWeek", "calType", "id", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "rangeHoverEffect", "previousButtonDisableFunction", "nextButtonDisableFunction", "escapeFocusFunction", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["activeViewChange", "selectedDateChange", "selectedRangeDateChange", "isValidDateChange", "closeCalendar", "closeClicked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TimeModule }, { kind: "component", type: i8.TimeComponent, selector: "fd-time", inputs: ["meridian", "validate", "keepTwoDigits", "disabled", "displaySeconds", "displayMinutes", "displayHours", "tablet", "elementsAtOnce", "time", "spinnerButtons"] }, { kind: "ngmodule", type: BarModule }, { kind: "component", type: i9.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i9.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i9.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DatetimePickerComponent, decorators: [{
             type: Component,
@@ -563,11 +693,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                             useExisting: forwardRef(() => DatetimePickerComponent),
                             multi: true
                         },
+                        {
+                            provide: FD_DATETIME_PICKER_COMPONENT,
+                            useExisting: DatetimePickerComponent
+                        },
                         registerFormItemControl(DatetimePickerComponent),
                         PopoverFormMessageService,
-                        PopoverService
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fd-datetime\">\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    >\n        <fd-popover-control>\n            <fd-input-group\n                #inputGroupComponent\n                [state]=\"state\"\n                [disabled]=\"disabled\"\n                [isControl]=\"true\"\n                [button]=\"true\"\n                [buttonFocusable]=\"buttonFocusable\"\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\"\n                    (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n                    (ngModelChange)=\"handleInputChange($event, true)\"\n                    (blur)=\"handleOnTouched($event)\"\n                />\n            </fd-input-group>\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            <ng-container *ngIf=\"_showPopoverContents\">\n                <div class=\"fd-datetime__wrapper\">\n                    <fd-form-message id=\"fd-form-message\" [embedded]=\"true\" *ngIf=\"_message\" [type]=\"state\">\n                        {{ _message }}\n                    </fd-form-message>\n                    <div class=\"fd-datetime__display-type-switcher\">\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\">\n                        <fd-calendar\n                            [class.fd-datetime__active-display-type]=\"_displayType === 'date'\"\n                            calType=\"single\"\n                            [activeView]=\"activeView\"\n                            [disableFunction]=\"disableFunction || null\"\n                            [selectedDate]=\"_tempDate\"\n                            [escapeFocusFunction]=\"null\"\n                            [markWeekends]=\"markWeekends\"\n                            [specialDaysRules]=\"specialDaysRules\"\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                        <div class=\"fd-datetime__separator\"></div>\n                        <fd-time\n                            *ngIf=\"isOpen\"\n                            [class.fd-datetime__active-display-type]=\"_displayType === 'time'\"\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                    </div>\n                    <div fd-popover-body-footer *ngIf=\"showFooter\">\n                        <div 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                </div>\n            </ng-container>\n        </fd-popover-body>\n    </fd-popover>\n</div>\n", styles: [".fd-datetime{display:block}.fd-datetime__wrapper{max-height:80vh;max-width:80vw}.fd-datetime__container{display:flex;align-items:center;justify-content:center;margin:0 16px}.fd-datetime__separator{background-color:#d3d3d3;width:1px;margin:42px 28px;align-self:stretch}.fd-datetime fd-time{width:auto}.fd-datetime__display-type-switcher{margin-top:1rem;display:none;width:100%;justify-content:center}@media (max-width: 960px){.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: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.DatetimeAdapter, decorators: [{
+                        PopoverService,
+                        DynamicComponentService
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'fd-datetime'
+                    }, standalone: true, imports: [
+                        NgTemplateOutlet,
+                        PopoverModule,
+                        InputGroupModule,
+                        FormsModule,
+                        NgIf,
+                        FormMessageModule,
+                        SegmentedButtonModule,
+                        ButtonModule,
+                        CalendarComponent,
+                        NgClass,
+                        TimeModule,
+                        BarModule,
+                        FdTranslatePipe
+                    ], template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\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    >\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            <ng-template [ngTemplateOutlet]=\"pickerTemplate\"></ng-template>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\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\"\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\n<ng-template #pickerTemplate>\n    <ng-container *ngIf=\"_showPopoverContents\">\n        <div class=\"fd-datetime__wrapper\">\n            <fd-form-message id=\"fd-form-message\" [embedded]=\"true\" *ngIf=\"_message\" [type]=\"state\">\n                {{ _message }}\n            </fd-form-message>\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\n                class=\"fd-datetime__container\"\n                [class.fd-datetime__container--mobile-portrait]=\"mobile && mobilePortrait\"\n            >\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                    [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                <div class=\"fd-datetime__separator\" *ngIf=\"!mobilePortrait\"></div>\n                <fd-time\n                    *ngIf=\"isOpen\"\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            </div>\n            <div fd-popover-body-footer *ngIf=\"!mobile && showFooter\">\n                <div 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        </div>\n    </ng-container>\n</ng-template>\n", styles: [".fd-datetime{display:block}.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}@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: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.DatetimeAdapter, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Optional
@@ -636,6 +787,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 type: Input
             }], preventScrollOnFocus: [{
                 type: Input
+            }], mobile: [{
+                type: Input
+            }], mobileConfig: [{
+                type: Input
+            }], mobileLandscape: [{
+                type: Input
+            }], mobilePortrait: [{
+                type: Input
             }], isOpenChange: [{
                 type: Output
             }], activeViewChange: [{
@@ -663,59 +822,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 args: [InputGroupInputDirective, {
                         read: ElementRef
                     }]
+            }], _pickerTemplate: [{
+                type: ViewChild,
+                args: ['pickerTemplate']
             }], disableFunction: [{
                 type: Input
             }] } });
 
 class DatetimePickerModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DatetimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.0", ngImport: i0, type: DatetimePickerModule, declarations: [DatetimePickerComponent], imports: [CommonModule,
-            IconModule,
-            PopoverModule,
-            CalendarModule,
-            FormsModule,
-            TimeModule,
-            InputGroupModule,
-            ButtonModule,
-            I18nModule,
-            BarModule,
-            SegmentedButtonModule,
-            FormMessageModule,
-            ContentDensityModule], exports: [DatetimePickerComponent, ContentDensityModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DatetimePickerModule, imports: [CommonModule,
-            IconModule,
-            PopoverModule,
-            CalendarModule,
-            FormsModule,
-            TimeModule,
-            InputGroupModule,
-            ButtonModule,
-            I18nModule,
-            BarModule,
-            SegmentedButtonModule,
-            FormMessageModule,
-            ContentDensityModule, ContentDensityModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.0", ngImport: i0, type: DatetimePickerModule, imports: [DatetimePickerComponent, DatetimePickerMobileComponent], exports: [DatetimePickerComponent, DatetimePickerMobileComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DatetimePickerModule, imports: [DatetimePickerComponent, DatetimePickerMobileComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DatetimePickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [DatetimePickerComponent],
-                    imports: [
-                        CommonModule,
-                        IconModule,
-                        PopoverModule,
-                        CalendarModule,
-                        FormsModule,
-                        TimeModule,
-                        InputGroupModule,
-                        ButtonModule,
-                        I18nModule,
-                        BarModule,
-                        SegmentedButtonModule,
-                        FormMessageModule,
-                        ContentDensityModule
-                    ],
-                    exports: [DatetimePickerComponent, ContentDensityModule]
+                    imports: [DatetimePickerComponent, DatetimePickerMobileComponent],
+                    exports: [DatetimePickerComponent, DatetimePickerMobileComponent]
                 }]
         }] });
 
@@ -723,5 +846,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DatetimePickerComponent, DatetimePickerModule };
+export { DatetimePickerComponent, DatetimePickerMobileComponent, DatetimePickerModule };
 //# sourceMappingURL=fundamental-ngx-core-datetime-picker.mjs.map