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

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

@@ -1,30 +1,35 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, ElementRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Inject, Input, Output, ViewChildren, 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, ViewChildren, 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, startWith } from 'rxjs/operators';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i1 from '@fundamental-ngx/core/datetime';
+import { CalendarComponent } from '@fundamental-ngx/core/calendar';
+import * as i1$1 from '@fundamental-ngx/core/datetime';
 import { DATE_TIME_FORMATS } from '@fundamental-ngx/core/datetime';
 import * as i2 from '@fundamental-ngx/core/form';
 import { registerFormItemControl, PopoverFormMessageService, FormMessageModule } from '@fundamental-ngx/core/form';
-import * as i7 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 * as i8 from '@fundamental-ngx/core/button';
-import { ButtonModule } from '@fundamental-ngx/core/button';
-import * as i9 from '@fundamental-ngx/core/bar';
+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 i6 from '@fundamental-ngx/core/bar';
 import { BarModule } from '@fundamental-ngx/core/bar';
-import * as i10 from '@fundamental-ngx/i18n';
-import { I18nModule } from '@fundamental-ngx/i18n';
-import { ContentDensityModule } from '@fundamental-ngx/core/content-density';
+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, NgSwitch, NgSwitchCase } from '@angular/common';
+import { FdTranslatePipe } from '@fundamental-ngx/i18n';
+import * as i7 from '@fundamental-ngx/core/button';
+import { ButtonModule } from '@fundamental-ngx/core/button';
 
 /** Creates an error to be thrown when attempting to use an invalid date implementation. */
 function createMissingDateImplementationError(provider) {
@@ -33,6 +38,88 @@ function createMissingDateImplementationError(provider) {
         `custom implementation.`);
 }
 
+const FD_DATE_PICKER_COMPONENT = new InjectionToken('FdDatePickerComponent');
+const FD_DATE_PICKER_MOBILE_CONFIG = new InjectionToken('FdDatePickerMobileConfig');
+
+class DatePickerMobileComponent extends MobileModeBase {
+    /** @hidden */
+    constructor(elementRef, dialogService, _destroyRef, datePickerConfig, datePickerComponent, mobileModes) {
+        super(elementRef, dialogService, datePickerComponent, MobileModeControl.DATE_PICKER, mobileModes);
+        this._destroyRef = _destroyRef;
+        this.datePickerConfig = datePickerConfig;
+        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.selectedDate;
+            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.getSelectedDate();
+        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: DatePickerMobileComponent, deps: [{ token: i0.ElementRef }, { token: i1.DialogService }, { token: i0.DestroyRef }, { token: FD_DATE_PICKER_MOBILE_CONFIG }, { token: FD_DATE_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: DatePickerMobileComponent, isStandalone: true, selector: "fd-date-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=\"datePickerConfig?.calendarTemplate || 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: i6.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: DatePickerMobileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fd-date-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=\"datePickerConfig?.calendarTemplate || 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_DATE_PICKER_MOBILE_CONFIG]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FD_DATE_PICKER_COMPONENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MOBILE_MODE_CONFIG]
+                }] }]; }, propDecorators: { dialogTemplate: [{
+                type: ViewChild,
+                args: ['dialogTemplate']
+            }] } });
+
 let datePickerCounter = 0;
 /**
  * The datetime picker component is an opinionated composition of the fd-popover and
@@ -121,10 +208,6 @@ class DatePickerComponent {
         this.placeholder = '';
         /** If it is mandatory field */
         this.required = false;
-        /** @hidden */
-        this._message = null;
-        /** @hidden */
-        this._messageTriggers = ['focusin', 'focusout'];
         /** The currently selected FdDates model start and end in range mode. */
         this.selectedRangeDate = { start: null, end: null };
         /**
@@ -156,7 +239,7 @@ class DatePickerComponent {
         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.
@@ -194,8 +277,12 @@ class DatePickerComponent {
          * Whether to prevent page scrolling when focusing date picker input field after calendar has been closed.
          */
         this.preventScrollOnFocus = false;
-        /** @hidden */
-        this._processInputOnBlur = false;
+        /** Whether date picker should rendered 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();
         /** Fired when a new date is selected. */
@@ -204,6 +291,12 @@ class DatePickerComponent {
         this.selectedRangeDateChange = new EventEmitter();
         /** Event thrown every time calendar active view is changed */
         this.activeViewChange = new EventEmitter();
+        /** @hidden */
+        this._message = null;
+        /** @hidden */
+        this._processInputOnBlur = false;
+        /** @hidden */
+        this._messageTriggers = ['focusin', 'focusout'];
         /** @hidden The value of the input */
         this._inputFieldDate = null;
         /** @hidden Whether the date input is invalid */
@@ -218,6 +311,10 @@ class DatePickerComponent {
         this._subscriptions = new Subscription();
         /** @hidden */
         this._state = 'default';
+        /** @hidden */
+        this._injector = inject(Injector);
+        /** @hidden */
+        this._dynamicComponentService = inject(DynamicComponentService);
         /**
          * Function used to disable certain dates in the calendar.
          * @param date date representation
@@ -245,6 +342,17 @@ class DatePickerComponent {
         }
     }
     /** @hidden */
+    dialogApprove() { }
+    /** @hidden */
+    dialogDismiss(prevValue) {
+        if (this._isDateRange(prevValue)) {
+            this.handleRangeDateChange(prevValue);
+        }
+        else {
+            this.handleSingleDateChange(prevValue);
+        }
+    }
+    /** @hidden */
     ngOnInit() {
         this._dateTimeAdapter.localeChanges.pipe(takeUntil(this._onDestroy$)).subscribe(() => {
             this.formatInputDate(this.selectedDate);
@@ -269,12 +377,16 @@ class DatePickerComponent {
                 calendar?.initialFocus();
             });
         });
+        if (this.mobile) {
+            this._setUpMobileMode();
+        }
     }
     /** @hidden */
     ngOnDestroy() {
         this._subscriptions.unsubscribe();
         this._onDestroy$.next();
         this._onDestroy$.complete();
+        this._mobileComponentRef?.destroy();
     }
     /**
      * Method that handle calendar active view change and throws event.
@@ -291,13 +403,17 @@ class DatePickerComponent {
     }
     /** Opens the calendar */
     openCalendar() {
-        if (!this.disabled) {
-            this._setOpenState(true);
-            this._changeMessageVisibility();
+        if (this.disabled) {
+            return;
         }
+        this._setOpenState(true);
+        this._changeMessageVisibility();
     }
     /** Toggles the calendar open or closed */
     toggleCalendar() {
+        if (this.disabled) {
+            return;
+        }
         this._setOpenState(!this.isOpen);
         if (!this.isOpen) {
             this.onTouched();
@@ -306,25 +422,27 @@ class DatePickerComponent {
     }
     /** Closes the calendar if it is open */
     closeCalendar() {
-        if (this.isOpen) {
-            this._setOpenState(false);
-            this._changeMessageVisibility();
+        if (!this.isOpen) {
+            return;
         }
+        this._setOpenState(false);
+        this._changeMessageVisibility();
     }
     /**
      * @hidden
      * Method that is triggered by events from calendar component, when there is selected single date changed
      */
     handleSingleDateChange(date) {
-        if (date) {
-            this.selectedDate = date;
-            this.selectedDateChange.emit(date);
-            this.onChange(date);
-            this.formatInputDate(date);
-            this._isInvalidDateInput = !this.isModelValid();
-            if (this.closeOnDateChoose && this.type === 'single') {
-                this.closeCalendar();
-            }
+        if (!date) {
+            return;
+        }
+        this.selectedDate = date;
+        this.selectedDateChange.emit(date);
+        this.onChange(date);
+        this.formatInputDate(date);
+        this._isInvalidDateInput = !this.isModelValid();
+        if (this.closeOnDateChoose && this.type === 'single') {
+            this.closeCalendar();
         }
     }
     /**
@@ -332,9 +450,10 @@ class DatePickerComponent {
      * Method that is triggered date formatting in the date control
      */
     formatInputDate(date) {
-        if (date) {
-            this._inputFieldDate = this._formatDate(date);
+        if (!date) {
+            return;
         }
+        this._inputFieldDate = this._formatDate(date);
     }
     /**
      * @hidden
@@ -547,6 +666,10 @@ class DatePickerComponent {
             return this._isRangeModelValid(this.selectedRangeDate);
         }
     }
+    /** Returns current selected date. */
+    getSelectedDate() {
+        return this.selectedDate || this.selectedRangeDate;
+    }
     /** @hidden */
     _changeMessageVisibility() {
         if (this.isOpen) {
@@ -627,8 +750,30 @@ class DatePickerComponent {
         this.isOpenChange.emit(this.isOpen);
         this._changeDetectionRef.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DatePickerComponent, deps: [{ 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: DatePickerComponent, selector: "fd-date-picker", inputs: { type: "type", placeholder: "placeholder", inputId: "inputId", required: "required", message: "message", messageTriggers: "messageTriggers", selectedDate: "selectedDate", selectedRangeDate: "selectedRangeDate", startingDayOfWeek: "startingDayOfWeek", rangeHoverEffect: "rangeHoverEffect", useValidation: "useValidation", allowNull: "allowNull", activeView: "activeView", placement: "placement", appendTo: "appendTo", disabled: "disabled", closeOnDateChoose: "closeOnDateChoose", showTodayButton: "showTodayButton", todayButtonLabel: "todayButtonLabel", previousButtonDisableFunction: "previousButtonDisableFunction", nextButtonDisableFunction: "nextButtonDisableFunction", state: "state", buttonFocusable: "buttonFocusable", specialDaysRules: "specialDaysRules", yearGrid: "yearGrid", aggregatedYearGrid: "aggregatedYearGrid", markWeekends: "markWeekends", showWeekNumbers: "showWeekNumbers", isOpen: "isOpen", inline: "inline", ariaLabelledBy: "ariaLabelledBy", processInputOnBlur: "processInputOnBlur", preventScrollOnFocus: "preventScrollOnFocus", disableFunction: "disableFunction", disableRangeStartFunction: "disableRangeStartFunction", disableRangeEndFunction: "disableRangeEndFunction" }, outputs: { isOpenChange: "isOpenChange", selectedDateChange: "selectedDateChange", selectedRangeDateChange: "selectedRangeDateChange", activeViewChange: "activeViewChange" }, host: { listeners: { "blur": "onTouched()" }, properties: { "class.fd-date-picker": "true", "class.fd-date-picker-custom": "inline" } }, providers: [
+    /** @hidden */
+    _setUpMobileMode() {
+        const injector = Injector.create({
+            providers: [
+                { provide: FD_DATE_PICKER_COMPONENT, useValue: this },
+                {
+                    provide: FD_DATE_PICKER_MOBILE_CONFIG,
+                    useValue: { calendarTemplate: this._calendarTemplate, controlTemplate: this._controlTemplate }
+                }
+            ],
+            parent: this._injector
+        });
+        this._mobileComponentRef = this._dynamicComponentService.createDynamicComponent({}, (DatePickerMobileComponent), {
+            container: 'body'
+        }, {
+            injector
+        });
+    }
+    /** @hidden */
+    _isDateRange(value) {
+        return !!value && value.start && value.end;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DatePickerComponent, deps: [{ 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: DatePickerComponent, isStandalone: true, selector: "fd-date-picker", inputs: { type: "type", placeholder: "placeholder", inputId: "inputId", required: "required", message: "message", messageTriggers: "messageTriggers", selectedDate: "selectedDate", selectedRangeDate: "selectedRangeDate", startingDayOfWeek: "startingDayOfWeek", rangeHoverEffect: "rangeHoverEffect", useValidation: "useValidation", allowNull: "allowNull", activeView: "activeView", placement: "placement", appendTo: "appendTo", disabled: "disabled", closeOnDateChoose: "closeOnDateChoose", showTodayButton: "showTodayButton", todayButtonLabel: "todayButtonLabel", previousButtonDisableFunction: "previousButtonDisableFunction", nextButtonDisableFunction: "nextButtonDisableFunction", state: "state", buttonFocusable: "buttonFocusable", specialDaysRules: "specialDaysRules", yearGrid: "yearGrid", aggregatedYearGrid: "aggregatedYearGrid", markWeekends: "markWeekends", showWeekNumbers: "showWeekNumbers", isOpen: "isOpen", inline: "inline", ariaLabelledBy: "ariaLabelledBy", processInputOnBlur: "processInputOnBlur", preventScrollOnFocus: "preventScrollOnFocus", mobile: "mobile", mobileConfig: "mobileConfig", mobileLandscape: "mobileLandscape", mobilePortrait: "mobilePortrait", disableFunction: "disableFunction", disableRangeStartFunction: "disableRangeStartFunction", disableRangeEndFunction: "disableRangeEndFunction" }, outputs: { isOpenChange: "isOpenChange", selectedDateChange: "selectedDateChange", selectedRangeDateChange: "selectedRangeDateChange", activeViewChange: "activeViewChange" }, host: { listeners: { "blur": "onTouched()" }, properties: { "class.fd-date-picker": "true", "class.fd-date-picker-custom": "inline" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DatePickerComponent),
@@ -639,10 +784,15 @@ class DatePickerComponent {
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: true
             },
+            {
+                provide: FD_DATE_PICKER_COMPONENT,
+                useExisting: DatePickerComponent
+            },
             registerFormItemControl(DatePickerComponent),
             PopoverFormMessageService,
-            PopoverService
-        ], viewQueries: [{ propertyName: "_inputGroupElement", first: true, predicate: ["inputGroupComponent"], descendants: true, read: ElementRef }, { propertyName: "_inputElement", first: true, predicate: InputGroupInputDirective, descendants: true, read: ElementRef }, { propertyName: "_calendars", predicate: CalendarComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<fd-popover\n    [(isOpen)]=\"isOpen\"\n    (isOpenChange)=\"_onOpenStateChanged($event)\"\n    [triggers]=\"[]\"\n    [placement]=\"placement\"\n    [disabled]=\"disabled\"\n    [focusTrapped]=\"true\"\n    [focusAutoCapture]=\"false\"\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=\"appointment-2\"\n            [isExpanded]=\"isOpen\"\n            [glyphAriaLabel]=\"'coreDatePicker.displayCalendarToggleLabel' | fdTranslate\"\n            [iconTitle]=\"'coreDatePicker.displayCalendarToggleLabel' | fdTranslate\"\n            (addOnButtonClicked)=\"toggleCalendar()\"\n        >\n            <input\n                type=\"text\"\n                class=\"fd-input\"\n                fd-input-group-input\n                [disabled]=\"disabled\"\n                [placeholder]=\"placeholder\"\n                [attr.id]=\"inputId\"\n                aria-haspopup=\"grid\"\n                aria-autocomplete=\"none\"\n                [attr.aria-expanded]=\"isOpen\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.aria-label]=\"_dateInputArialLabelKey | fdTranslate\"\n                [attr.aria-required]=\"required\"\n                [attr.aria-describedby]=\"_formValueStateMessageId\"\n                [ngModel]=\"_inputFieldDate\"\n                (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n                (ngModelChange)=\"handleInputChange($event, true)\"\n                (blur)=\"_onBlur($event)\"\n            />\n        </fd-input-group>\n    </fd-popover-control>\n    <fd-popover-body [attr.aria-expanded]=\"isOpen\" [attr.aria-hidden]=\"!isOpen\">\n        <ng-container *ngIf=\"_showPopoverContents\">\n            <fd-form-message [embedded]=\"true\" *ngIf=\"_message\" [type]=\"state\">\n                {{ _message }}\n            </fd-form-message>\n            <ng-content></ng-content>\n\n            <fd-calendar\n                (closeCalendar)=\"closeFromCalendar()\"\n                [activeView]=\"activeView\"\n                [markWeekends]=\"markWeekends\"\n                [specialDaysRules]=\"specialDaysRules\"\n                [showWeekNumbers]=\"showWeekNumbers\"\n                [aggregatedYearGrid]=\"aggregatedYearGrid\"\n                [yearGrid]=\"yearGrid\"\n                (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n                [calType]=\"type\"\n                [rangeHoverEffect]=\"rangeHoverEffect\"\n                [disableFunction]=\"disableFunction\"\n                [disableRangeStartFunction]=\"disableRangeStartFunction\"\n                [disableRangeEndFunction]=\"disableRangeEndFunction\"\n                [selectedDate]=\"selectedDate\"\n                [selectedRangeDate]=\"selectedRangeDate\"\n                (selectedRangeDateChange)=\"handleRangeDateChange($event)\"\n                (selectedDateChange)=\"handleSingleDateChange($event)\"\n                [startingDayOfWeek]=\"startingDayOfWeek\"\n                [previousButtonDisableFunction]=\"previousButtonDisableFunction\"\n                [nextButtonDisableFunction]=\"nextButtonDisableFunction\"\n            ></fd-calendar>\n\n            <div *ngIf=\"showTodayButton\" fd-bar barDesign=\"footer\">\n                <div fd-bar-right>\n                    <fd-bar-element>\n                        <button fd-button [label]=\"todayButtonLabel\" (click)=\"onTodayButtonClick()\"></button>\n                    </fd-bar-element>\n                </div>\n            </div>\n        </ng-container>\n    </fd-popover-body>\n</fd-popover>\n\n<div style=\"display: none\" aria-hidden=\"true\">\n    <div [attr.id]=\"_formValueStateMessageId\" aria-atomic=\"true\" aria-live=\"assertive\">\n        <ng-container [ngSwitch]=\"state\">\n            <ng-container *ngSwitchCase=\"'success'\">\n                {{ 'coreDatePicker.valueStateSuccessMessage' | fdTranslate }}</ng-container\n            >\n            <ng-container *ngSwitchCase=\"'information'\">\n                {{ 'coreDatePicker.valueStateInformationMessage' | fdTranslate }}</ng-container\n            >\n            <ng-container *ngSwitchCase=\"'warning'\">\n                {{ 'coreDatePicker.valueStateWarningMessage' | fdTranslate }}</ng-container\n            >\n            <ng-container *ngSwitchCase=\"'error'\">\n                {{ 'coreDatePicker.valueStateErrorMessage' | fdTranslate }}\n            </ng-container>\n        </ng-container>\n        {{ _message }}\n    </div>\n</div>\n", styles: [".fd-date-picker-custom{display:inline-block}.fd-date-picker-custom fd-popover{display:block}.fd-date-picker-custom fd-calendar{border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i4.PopoverBodyComponent, selector: "fd-popover-body" }, { 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.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: i7.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i8.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { 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: i10.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+            PopoverService,
+            DynamicComponentService
+        ], viewQueries: [{ propertyName: "_inputGroupElement", first: true, predicate: ["inputGroupComponent"], descendants: true, read: ElementRef }, { propertyName: "_inputElement", first: true, predicate: InputGroupInputDirective, descendants: true, read: ElementRef }, { propertyName: "_controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "_calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true }, { propertyName: "_calendars", predicate: CalendarComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #mobileTemplate>\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #desktopTemplate>\n    <fd-popover\n        [(isOpen)]=\"isOpen\"\n        (isOpenChange)=\"_onOpenStateChanged($event)\"\n        [triggers]=\"[]\"\n        [placement]=\"placement\"\n        [disabled]=\"disabled\"\n        [focusTrapped]=\"true\"\n        [focusAutoCapture]=\"false\"\n        [appendTo]=\"appendTo\"\n    >\n        <fd-popover-control>\n            <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n        </fd-popover-control>\n        <fd-popover-body [attr.aria-expanded]=\"isOpen\" [attr.aria-hidden]=\"!isOpen\">\n            <ng-container *ngIf=\"_showPopoverContents\">\n                <fd-form-message [embedded]=\"true\" *ngIf=\"_message\" [type]=\"state\">\n                    {{ _message }}\n                </fd-form-message>\n                <ng-content></ng-content>\n                <ng-template [ngTemplateOutlet]=\"calendarTemplate\"></ng-template>\n            </ng-container>\n        </fd-popover-body>\n    </fd-popover>\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        glyph=\"appointment-2\"\n        [isExpanded]=\"isOpen\"\n        [glyphAriaLabel]=\"'coreDatePicker.displayCalendarToggleLabel' | fdTranslate\"\n        [iconTitle]=\"'coreDatePicker.displayCalendarToggleLabel' | fdTranslate\"\n        (addOnButtonClicked)=\"toggleCalendar()\"\n    >\n        <input\n            type=\"text\"\n            class=\"fd-input\"\n            fd-input-group-input\n            [disabled]=\"disabled\"\n            [placeholder]=\"placeholder\"\n            [attr.id]=\"inputId\"\n            aria-haspopup=\"grid\"\n            aria-autocomplete=\"none\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-label]=\"_dateInputArialLabelKey | fdTranslate\"\n            [attr.aria-required]=\"required\"\n            [attr.aria-describedby]=\"_formValueStateMessageId\"\n            [ngModel]=\"_inputFieldDate\"\n            (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n            (ngModelChange)=\"handleInputChange($event, true)\"\n            (click)=\"mobile && openCalendar()\"\n            (blur)=\"_onBlur($event)\"\n        />\n    </fd-input-group>\n</ng-template>\n\n<ng-template #calendarTemplate>\n    <fd-calendar\n        [activeView]=\"activeView\"\n        [markWeekends]=\"markWeekends\"\n        [specialDaysRules]=\"specialDaysRules\"\n        [showWeekNumbers]=\"showWeekNumbers\"\n        [aggregatedYearGrid]=\"aggregatedYearGrid\"\n        [yearGrid]=\"yearGrid\"\n        [calType]=\"type\"\n        [rangeHoverEffect]=\"rangeHoverEffect\"\n        [disableFunction]=\"disableFunction\"\n        [disableRangeStartFunction]=\"disableRangeStartFunction\"\n        [disableRangeEndFunction]=\"disableRangeEndFunction\"\n        [selectedDate]=\"selectedDate\"\n        [selectedRangeDate]=\"selectedRangeDate\"\n        [startingDayOfWeek]=\"startingDayOfWeek\"\n        [previousButtonDisableFunction]=\"previousButtonDisableFunction\"\n        [nextButtonDisableFunction]=\"nextButtonDisableFunction\"\n        [mobileLandscape]=\"mobile && mobileLandscape\"\n        [mobilePortrait]=\"mobile && mobilePortrait\"\n        (selectedRangeDateChange)=\"handleRangeDateChange($event)\"\n        (selectedDateChange)=\"handleSingleDateChange($event)\"\n        (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n        (closeCalendar)=\"closeFromCalendar()\"\n    ></fd-calendar>\n\n    <div *ngIf=\"showTodayButton\" fd-bar barDesign=\"footer\">\n        <div fd-bar-right>\n            <fd-bar-element>\n                <button fd-button [label]=\"todayButtonLabel\" (click)=\"onTodayButtonClick()\"></button>\n            </fd-bar-element>\n        </div>\n    </div>\n</ng-template>\n\n<div style=\"display: none\" aria-hidden=\"true\">\n    <div [attr.id]=\"_formValueStateMessageId\" aria-atomic=\"true\" aria-live=\"assertive\">\n        <ng-container [ngSwitch]=\"state\">\n            <ng-container *ngSwitchCase=\"'success'\">\n                {{ 'coreDatePicker.valueStateSuccessMessage' | fdTranslate }}</ng-container\n            >\n            <ng-container *ngSwitchCase=\"'information'\">\n                {{ 'coreDatePicker.valueStateInformationMessage' | fdTranslate }}</ng-container\n            >\n            <ng-container *ngSwitchCase=\"'warning'\">\n                {{ 'coreDatePicker.valueStateWarningMessage' | fdTranslate }}</ng-container\n            >\n            <ng-container *ngSwitchCase=\"'error'\">\n                {{ 'coreDatePicker.valueStateErrorMessage' | fdTranslate }}\n            </ng-container>\n        </ng-container>\n        {{ _message }}\n    </div>\n</div>\n", styles: [".fd-date-picker-custom{display:inline-block}.fd-date-picker-custom fd-popover{display:block}.fd-date-picker-custom fd-calendar{border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem)}\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: "component", type: i3$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { 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: 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: "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: "ngmodule", type: BarModule }, { kind: "component", type: i6.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i6.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i6.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i7.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: DatePickerComponent, decorators: [{
             type: Component,
@@ -661,11 +811,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                             useExisting: forwardRef(() => DatePickerComponent),
                             multi: true
                         },
+                        {
+                            provide: FD_DATE_PICKER_COMPONENT,
+                            useExisting: DatePickerComponent
+                        },
                         registerFormItemControl(DatePickerComponent),
                         PopoverFormMessageService,
-                        PopoverService
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-popover\n    [(isOpen)]=\"isOpen\"\n    (isOpenChange)=\"_onOpenStateChanged($event)\"\n    [triggers]=\"[]\"\n    [placement]=\"placement\"\n    [disabled]=\"disabled\"\n    [focusTrapped]=\"true\"\n    [focusAutoCapture]=\"false\"\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=\"appointment-2\"\n            [isExpanded]=\"isOpen\"\n            [glyphAriaLabel]=\"'coreDatePicker.displayCalendarToggleLabel' | fdTranslate\"\n            [iconTitle]=\"'coreDatePicker.displayCalendarToggleLabel' | fdTranslate\"\n            (addOnButtonClicked)=\"toggleCalendar()\"\n        >\n            <input\n                type=\"text\"\n                class=\"fd-input\"\n                fd-input-group-input\n                [disabled]=\"disabled\"\n                [placeholder]=\"placeholder\"\n                [attr.id]=\"inputId\"\n                aria-haspopup=\"grid\"\n                aria-autocomplete=\"none\"\n                [attr.aria-expanded]=\"isOpen\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.aria-label]=\"_dateInputArialLabelKey | fdTranslate\"\n                [attr.aria-required]=\"required\"\n                [attr.aria-describedby]=\"_formValueStateMessageId\"\n                [ngModel]=\"_inputFieldDate\"\n                (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n                (ngModelChange)=\"handleInputChange($event, true)\"\n                (blur)=\"_onBlur($event)\"\n            />\n        </fd-input-group>\n    </fd-popover-control>\n    <fd-popover-body [attr.aria-expanded]=\"isOpen\" [attr.aria-hidden]=\"!isOpen\">\n        <ng-container *ngIf=\"_showPopoverContents\">\n            <fd-form-message [embedded]=\"true\" *ngIf=\"_message\" [type]=\"state\">\n                {{ _message }}\n            </fd-form-message>\n            <ng-content></ng-content>\n\n            <fd-calendar\n                (closeCalendar)=\"closeFromCalendar()\"\n                [activeView]=\"activeView\"\n                [markWeekends]=\"markWeekends\"\n                [specialDaysRules]=\"specialDaysRules\"\n                [showWeekNumbers]=\"showWeekNumbers\"\n                [aggregatedYearGrid]=\"aggregatedYearGrid\"\n                [yearGrid]=\"yearGrid\"\n                (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n                [calType]=\"type\"\n                [rangeHoverEffect]=\"rangeHoverEffect\"\n                [disableFunction]=\"disableFunction\"\n                [disableRangeStartFunction]=\"disableRangeStartFunction\"\n                [disableRangeEndFunction]=\"disableRangeEndFunction\"\n                [selectedDate]=\"selectedDate\"\n                [selectedRangeDate]=\"selectedRangeDate\"\n                (selectedRangeDateChange)=\"handleRangeDateChange($event)\"\n                (selectedDateChange)=\"handleSingleDateChange($event)\"\n                [startingDayOfWeek]=\"startingDayOfWeek\"\n                [previousButtonDisableFunction]=\"previousButtonDisableFunction\"\n                [nextButtonDisableFunction]=\"nextButtonDisableFunction\"\n            ></fd-calendar>\n\n            <div *ngIf=\"showTodayButton\" fd-bar barDesign=\"footer\">\n                <div fd-bar-right>\n                    <fd-bar-element>\n                        <button fd-button [label]=\"todayButtonLabel\" (click)=\"onTodayButtonClick()\"></button>\n                    </fd-bar-element>\n                </div>\n            </div>\n        </ng-container>\n    </fd-popover-body>\n</fd-popover>\n\n<div style=\"display: none\" aria-hidden=\"true\">\n    <div [attr.id]=\"_formValueStateMessageId\" aria-atomic=\"true\" aria-live=\"assertive\">\n        <ng-container [ngSwitch]=\"state\">\n            <ng-container *ngSwitchCase=\"'success'\">\n                {{ 'coreDatePicker.valueStateSuccessMessage' | fdTranslate }}</ng-container\n            >\n            <ng-container *ngSwitchCase=\"'information'\">\n                {{ 'coreDatePicker.valueStateInformationMessage' | fdTranslate }}</ng-container\n            >\n            <ng-container *ngSwitchCase=\"'warning'\">\n                {{ 'coreDatePicker.valueStateWarningMessage' | fdTranslate }}</ng-container\n            >\n            <ng-container *ngSwitchCase=\"'error'\">\n                {{ 'coreDatePicker.valueStateErrorMessage' | fdTranslate }}\n            </ng-container>\n        </ng-container>\n        {{ _message }}\n    </div>\n</div>\n", styles: [".fd-date-picker-custom{display:inline-block}.fd-date-picker-custom fd-popover{display:block}.fd-date-picker-custom fd-calendar{border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.DatetimeAdapter, decorators: [{
+                        PopoverService,
+                        DynamicComponentService
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgTemplateOutlet,
+                        PopoverModule,
+                        NgIf,
+                        FormMessageModule,
+                        InputGroupModule,
+                        FormsModule,
+                        CalendarComponent,
+                        BarModule,
+                        ButtonModule,
+                        NgSwitch,
+                        NgSwitchCase,
+                        FdTranslatePipe
+                    ], template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #mobileTemplate>\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #desktopTemplate>\n    <fd-popover\n        [(isOpen)]=\"isOpen\"\n        (isOpenChange)=\"_onOpenStateChanged($event)\"\n        [triggers]=\"[]\"\n        [placement]=\"placement\"\n        [disabled]=\"disabled\"\n        [focusTrapped]=\"true\"\n        [focusAutoCapture]=\"false\"\n        [appendTo]=\"appendTo\"\n    >\n        <fd-popover-control>\n            <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n        </fd-popover-control>\n        <fd-popover-body [attr.aria-expanded]=\"isOpen\" [attr.aria-hidden]=\"!isOpen\">\n            <ng-container *ngIf=\"_showPopoverContents\">\n                <fd-form-message [embedded]=\"true\" *ngIf=\"_message\" [type]=\"state\">\n                    {{ _message }}\n                </fd-form-message>\n                <ng-content></ng-content>\n                <ng-template [ngTemplateOutlet]=\"calendarTemplate\"></ng-template>\n            </ng-container>\n        </fd-popover-body>\n    </fd-popover>\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        glyph=\"appointment-2\"\n        [isExpanded]=\"isOpen\"\n        [glyphAriaLabel]=\"'coreDatePicker.displayCalendarToggleLabel' | fdTranslate\"\n        [iconTitle]=\"'coreDatePicker.displayCalendarToggleLabel' | fdTranslate\"\n        (addOnButtonClicked)=\"toggleCalendar()\"\n    >\n        <input\n            type=\"text\"\n            class=\"fd-input\"\n            fd-input-group-input\n            [disabled]=\"disabled\"\n            [placeholder]=\"placeholder\"\n            [attr.id]=\"inputId\"\n            aria-haspopup=\"grid\"\n            aria-autocomplete=\"none\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-label]=\"_dateInputArialLabelKey | fdTranslate\"\n            [attr.aria-required]=\"required\"\n            [attr.aria-describedby]=\"_formValueStateMessageId\"\n            [ngModel]=\"_inputFieldDate\"\n            (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n            (ngModelChange)=\"handleInputChange($event, true)\"\n            (click)=\"mobile && openCalendar()\"\n            (blur)=\"_onBlur($event)\"\n        />\n    </fd-input-group>\n</ng-template>\n\n<ng-template #calendarTemplate>\n    <fd-calendar\n        [activeView]=\"activeView\"\n        [markWeekends]=\"markWeekends\"\n        [specialDaysRules]=\"specialDaysRules\"\n        [showWeekNumbers]=\"showWeekNumbers\"\n        [aggregatedYearGrid]=\"aggregatedYearGrid\"\n        [yearGrid]=\"yearGrid\"\n        [calType]=\"type\"\n        [rangeHoverEffect]=\"rangeHoverEffect\"\n        [disableFunction]=\"disableFunction\"\n        [disableRangeStartFunction]=\"disableRangeStartFunction\"\n        [disableRangeEndFunction]=\"disableRangeEndFunction\"\n        [selectedDate]=\"selectedDate\"\n        [selectedRangeDate]=\"selectedRangeDate\"\n        [startingDayOfWeek]=\"startingDayOfWeek\"\n        [previousButtonDisableFunction]=\"previousButtonDisableFunction\"\n        [nextButtonDisableFunction]=\"nextButtonDisableFunction\"\n        [mobileLandscape]=\"mobile && mobileLandscape\"\n        [mobilePortrait]=\"mobile && mobilePortrait\"\n        (selectedRangeDateChange)=\"handleRangeDateChange($event)\"\n        (selectedDateChange)=\"handleSingleDateChange($event)\"\n        (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n        (closeCalendar)=\"closeFromCalendar()\"\n    ></fd-calendar>\n\n    <div *ngIf=\"showTodayButton\" fd-bar barDesign=\"footer\">\n        <div fd-bar-right>\n            <fd-bar-element>\n                <button fd-button [label]=\"todayButtonLabel\" (click)=\"onTodayButtonClick()\"></button>\n            </fd-bar-element>\n        </div>\n    </div>\n</ng-template>\n\n<div style=\"display: none\" aria-hidden=\"true\">\n    <div [attr.id]=\"_formValueStateMessageId\" aria-atomic=\"true\" aria-live=\"assertive\">\n        <ng-container [ngSwitch]=\"state\">\n            <ng-container *ngSwitchCase=\"'success'\">\n                {{ 'coreDatePicker.valueStateSuccessMessage' | fdTranslate }}</ng-container\n            >\n            <ng-container *ngSwitchCase=\"'information'\">\n                {{ 'coreDatePicker.valueStateInformationMessage' | fdTranslate }}</ng-container\n            >\n            <ng-container *ngSwitchCase=\"'warning'\">\n                {{ 'coreDatePicker.valueStateWarningMessage' | fdTranslate }}</ng-container\n            >\n            <ng-container *ngSwitchCase=\"'error'\">\n                {{ 'coreDatePicker.valueStateErrorMessage' | fdTranslate }}\n            </ng-container>\n        </ng-container>\n        {{ _message }}\n    </div>\n</div>\n", styles: [".fd-date-picker-custom{display:inline-block}.fd-date-picker-custom fd-popover{display:block}.fd-date-picker-custom fd-calendar{border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.DatetimeAdapter, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Optional
@@ -738,6 +906,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
             }], selectedDateChange: [{
@@ -759,6 +935,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 args: [InputGroupInputDirective, {
                         read: ElementRef
                     }]
+            }], _controlTemplate: [{
+                type: ViewChild,
+                args: ['controlTemplate']
+            }], _calendarTemplate: [{
+                type: ViewChild,
+                args: ['calendarTemplate']
             }], disableFunction: [{
                 type: Input
             }], disableRangeStartFunction: [{
@@ -769,47 +951,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
 
 class DatePickerModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.0", ngImport: i0, type: DatePickerModule, declarations: [DatePickerComponent], imports: [CommonModule,
-            IconModule,
-            PopoverModule,
-            I18nModule,
-            CalendarModule,
-            FormsModule,
-            InputGroupModule,
-            ButtonModule,
-            FormMessageModule,
-            BarModule,
-            ContentDensityModule], exports: [DatePickerComponent, ContentDensityModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DatePickerModule, imports: [CommonModule,
-            IconModule,
-            PopoverModule,
-            I18nModule,
-            CalendarModule,
-            FormsModule,
-            InputGroupModule,
-            ButtonModule,
-            FormMessageModule,
-            BarModule,
-            ContentDensityModule, ContentDensityModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.0", ngImport: i0, type: DatePickerModule, imports: [DatePickerComponent, DatePickerMobileComponent], exports: [DatePickerComponent, DatePickerMobileComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DatePickerModule, imports: [DatePickerComponent, DatePickerMobileComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DatePickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [DatePickerComponent],
-                    imports: [
-                        CommonModule,
-                        IconModule,
-                        PopoverModule,
-                        I18nModule,
-                        CalendarModule,
-                        FormsModule,
-                        InputGroupModule,
-                        ButtonModule,
-                        FormMessageModule,
-                        BarModule,
-                        ContentDensityModule
-                    ],
-                    exports: [DatePickerComponent, ContentDensityModule]
+                    imports: [DatePickerComponent, DatePickerMobileComponent],
+                    exports: [DatePickerComponent, DatePickerMobileComponent]
                 }]
         }] });
 
@@ -817,5 +966,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DatePickerComponent, DatePickerModule };
+export { DatePickerComponent, DatePickerMobileComponent, DatePickerModule };
 //# sourceMappingURL=fundamental-ngx-core-date-picker.mjs.map