@fundamental-ngx/core 0.65.0 → 0.65.1-rc.1

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

@@ -88,10 +88,10 @@ class DatePickerMobileComponent extends MobileModeBase {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatePickerMobileComponent, deps: [{ token: FD_DATE_PICKER_MOBILE_CONFIG }, { token: FD_DATE_PICKER_COMPONENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            @if (mobileConfig.title) {\n                <h1 fd-title>{{ mobileConfig.title }}</h1>\n            }\n            @if (mobileConfig.hasCloseButton) {\n                <button title=\"Close\" fd-dialog-close-button [mobile]=\"true\" (click)=\"handleDismiss()\"></button>\n            }\n        </fd-dialog-header>\n        <fd-dialog-body>\n            <ng-template [ngTemplateOutlet]=\"datePickerConfig.calendarTemplate || null\"></ng-template>\n        </fd-dialog-body>\n        <fd-dialog-footer>\n            @if (mobileConfig.approveButtonText) {\n                <fd-button-bar fdType=\"emphasized\" [label]=\"mobileConfig.approveButtonText!\" (click)=\"handleApprove()\">\n                </fd-button-bar>\n            }\n            @if (mobileConfig.cancelButtonText) {\n                <fd-button-bar fdkInitialFocus [label]=\"mobileConfig.cancelButtonText!\" (click)=\"handleDismiss()\">\n                </fd-button-bar>\n            }\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["twoLineClamp", "headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header", inputs: ["inShellbar"] }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: DatePickerMobileComponent, deps: [{ token: FD_DATE_PICKER_MOBILE_CONFIG }, { token: FD_DATE_PICKER_COMPONENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", 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 [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            @if (mobileConfig.title) {\n                <h1 fd-title>{{ mobileConfig.title }}</h1>\n            }\n            @if (mobileConfig.hasCloseButton) {\n                <button title=\"Close\" fd-dialog-close-button [mobile]=\"true\" (click)=\"handleDismiss()\"></button>\n            }\n        </fd-dialog-header>\n        <fd-dialog-body>\n            <ng-template [ngTemplateOutlet]=\"datePickerConfig.calendarTemplate || null\"></ng-template>\n        </fd-dialog-body>\n        <fd-dialog-footer>\n            @if (mobileConfig.approveButtonText) {\n                <fd-button-bar fdType=\"emphasized\" [label]=\"mobileConfig.approveButtonText!\" (click)=\"handleApprove()\">\n                </fd-button-bar>\n            }\n            @if (mobileConfig.cancelButtonText) {\n                <fd-button-bar fdkInitialFocus [label]=\"mobileConfig.cancelButtonText!\" (click)=\"handleDismiss()\">\n                </fd-button-bar>\n            }\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["twoLineClamp", "headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header", inputs: ["inShellbar"] }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatePickerMobileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: DatePickerMobileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-date-picker-mobile', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         TitleComponent,
@@ -1068,8 +1068,8 @@ class DatePickerComponent {
         return ranges1.every((range, index) => this._dateTimeAdapter.datesEqual(range.start, ranges2[index].start) &&
             this._dateTimeAdapter.datesEqual(range.end, ranges2[index].end));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", 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: "17.0.0", version: "22.0.5", type: DatePickerComponent, isStandalone: true, selector: "fd-date-picker", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, customDateTimeFormat: { classPropertyName: "customDateTimeFormat", publicName: "customDateTimeFormat", isSignal: false, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: false, isRequired: false, transformFunction: null }, messageTriggers: { classPropertyName: "messageTriggers", publicName: "messageTriggers", isSignal: false, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: false, isRequired: false, transformFunction: null }, selectedMultipleDates: { classPropertyName: "selectedMultipleDates", publicName: "selectedMultipleDates", isSignal: false, isRequired: false, transformFunction: null }, selectedRangeDate: { classPropertyName: "selectedRangeDate", publicName: "selectedRangeDate", isSignal: false, isRequired: false, transformFunction: null }, selectedMultipleDateRanges: { classPropertyName: "selectedMultipleDateRanges", publicName: "selectedMultipleDateRanges", isSignal: false, isRequired: false, transformFunction: null }, startingDayOfWeek: { classPropertyName: "startingDayOfWeek", publicName: "startingDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, rangeHoverEffect: { classPropertyName: "rangeHoverEffect", publicName: "rangeHoverEffect", isSignal: false, isRequired: false, transformFunction: null }, useValidation: { classPropertyName: "useValidation", publicName: "useValidation", isSignal: false, isRequired: false, transformFunction: null }, allowNull: { classPropertyName: "allowNull", publicName: "allowNull", isSignal: false, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: false, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, closeOnDateChoose: { classPropertyName: "closeOnDateChoose", publicName: "closeOnDateChoose", isSignal: false, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: false, isRequired: false, transformFunction: null }, todayButtonLabel: { classPropertyName: "todayButtonLabel", publicName: "todayButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, previousButtonDisableFunction: { classPropertyName: "previousButtonDisableFunction", publicName: "previousButtonDisableFunction", isSignal: false, isRequired: false, transformFunction: null }, nextButtonDisableFunction: { classPropertyName: "nextButtonDisableFunction", publicName: "nextButtonDisableFunction", isSignal: false, isRequired: false, transformFunction: null }, buttonFocusable: { classPropertyName: "buttonFocusable", publicName: "buttonFocusable", isSignal: false, isRequired: false, transformFunction: null }, specialDaysRules: { classPropertyName: "specialDaysRules", publicName: "specialDaysRules", isSignal: false, isRequired: false, transformFunction: null }, yearGrid: { classPropertyName: "yearGrid", publicName: "yearGrid", isSignal: false, isRequired: false, transformFunction: null }, aggregatedYearGrid: { classPropertyName: "aggregatedYearGrid", publicName: "aggregatedYearGrid", isSignal: false, isRequired: false, transformFunction: null }, markWeekends: { classPropertyName: "markWeekends", publicName: "markWeekends", isSignal: false, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: false, isRequired: false, transformFunction: null }, allowMultipleSelection: { classPropertyName: "allowMultipleSelection", publicName: "allowMultipleSelection", isSignal: false, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, processInputOnBlur: { classPropertyName: "processInputOnBlur", publicName: "processInputOnBlur", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, preventScrollOnFocus: { classPropertyName: "preventScrollOnFocus", publicName: "preventScrollOnFocus", isSignal: false, isRequired: false, transformFunction: null }, mobile: { classPropertyName: "mobile", publicName: "mobile", isSignal: false, isRequired: false, transformFunction: null }, mobileConfig: { classPropertyName: "mobileConfig", publicName: "mobileConfig", isSignal: false, isRequired: false, transformFunction: null }, mobileLandscape: { classPropertyName: "mobileLandscape", publicName: "mobileLandscape", isSignal: false, isRequired: false, transformFunction: null }, mobilePortrait: { classPropertyName: "mobilePortrait", publicName: "mobilePortrait", isSignal: false, isRequired: false, transformFunction: null }, dateRangeFormat: { classPropertyName: "dateRangeFormat", publicName: "dateRangeFormat", isSignal: false, isRequired: false, transformFunction: null }, showCalendarLegend: { classPropertyName: "showCalendarLegend", publicName: "showCalendarLegend", isSignal: true, isRequired: false, transformFunction: null }, legendCol: { classPropertyName: "legendCol", publicName: "legendCol", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: false, isRequired: false, transformFunction: null }, disableFunction: { classPropertyName: "disableFunction", publicName: "disableFunction", isSignal: false, isRequired: false, transformFunction: null }, disableRangeStartFunction: { classPropertyName: "disableRangeStartFunction", publicName: "disableRangeStartFunction", isSignal: false, isRequired: false, transformFunction: null }, disableRangeEndFunction: { classPropertyName: "disableRangeEndFunction", publicName: "disableRangeEndFunction", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { isOpenChange: "isOpenChange", selectedDateChange: "selectedDateChange", selectedMultipleDatesChange: "selectedMultipleDatesChange", selectedRangeDateChange: "selectedRangeDateChange", selectedMultipleDateRangesChange: "selectedMultipleDateRangesChange", activeViewChange: "activeViewChange" }, host: { listeners: { "blur": "onTouched()" }, properties: { "class.fd-date-picker": "true", "class.fd-date-picker-custom": "inline" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", 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: "17.0.0", version: "22.2.1", type: DatePickerComponent, isStandalone: true, selector: "fd-date-picker", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, customDateTimeFormat: { classPropertyName: "customDateTimeFormat", publicName: "customDateTimeFormat", isSignal: false, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: false, isRequired: false, transformFunction: null }, messageTriggers: { classPropertyName: "messageTriggers", publicName: "messageTriggers", isSignal: false, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: false, isRequired: false, transformFunction: null }, selectedMultipleDates: { classPropertyName: "selectedMultipleDates", publicName: "selectedMultipleDates", isSignal: false, isRequired: false, transformFunction: null }, selectedRangeDate: { classPropertyName: "selectedRangeDate", publicName: "selectedRangeDate", isSignal: false, isRequired: false, transformFunction: null }, selectedMultipleDateRanges: { classPropertyName: "selectedMultipleDateRanges", publicName: "selectedMultipleDateRanges", isSignal: false, isRequired: false, transformFunction: null }, startingDayOfWeek: { classPropertyName: "startingDayOfWeek", publicName: "startingDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, rangeHoverEffect: { classPropertyName: "rangeHoverEffect", publicName: "rangeHoverEffect", isSignal: false, isRequired: false, transformFunction: null }, useValidation: { classPropertyName: "useValidation", publicName: "useValidation", isSignal: false, isRequired: false, transformFunction: null }, allowNull: { classPropertyName: "allowNull", publicName: "allowNull", isSignal: false, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: false, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, closeOnDateChoose: { classPropertyName: "closeOnDateChoose", publicName: "closeOnDateChoose", isSignal: false, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: false, isRequired: false, transformFunction: null }, todayButtonLabel: { classPropertyName: "todayButtonLabel", publicName: "todayButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, previousButtonDisableFunction: { classPropertyName: "previousButtonDisableFunction", publicName: "previousButtonDisableFunction", isSignal: false, isRequired: false, transformFunction: null }, nextButtonDisableFunction: { classPropertyName: "nextButtonDisableFunction", publicName: "nextButtonDisableFunction", isSignal: false, isRequired: false, transformFunction: null }, buttonFocusable: { classPropertyName: "buttonFocusable", publicName: "buttonFocusable", isSignal: false, isRequired: false, transformFunction: null }, specialDaysRules: { classPropertyName: "specialDaysRules", publicName: "specialDaysRules", isSignal: false, isRequired: false, transformFunction: null }, yearGrid: { classPropertyName: "yearGrid", publicName: "yearGrid", isSignal: false, isRequired: false, transformFunction: null }, aggregatedYearGrid: { classPropertyName: "aggregatedYearGrid", publicName: "aggregatedYearGrid", isSignal: false, isRequired: false, transformFunction: null }, markWeekends: { classPropertyName: "markWeekends", publicName: "markWeekends", isSignal: false, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: false, isRequired: false, transformFunction: null }, allowMultipleSelection: { classPropertyName: "allowMultipleSelection", publicName: "allowMultipleSelection", isSignal: false, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, processInputOnBlur: { classPropertyName: "processInputOnBlur", publicName: "processInputOnBlur", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, preventScrollOnFocus: { classPropertyName: "preventScrollOnFocus", publicName: "preventScrollOnFocus", isSignal: false, isRequired: false, transformFunction: null }, mobile: { classPropertyName: "mobile", publicName: "mobile", isSignal: false, isRequired: false, transformFunction: null }, mobileConfig: { classPropertyName: "mobileConfig", publicName: "mobileConfig", isSignal: false, isRequired: false, transformFunction: null }, mobileLandscape: { classPropertyName: "mobileLandscape", publicName: "mobileLandscape", isSignal: false, isRequired: false, transformFunction: null }, mobilePortrait: { classPropertyName: "mobilePortrait", publicName: "mobilePortrait", isSignal: false, isRequired: false, transformFunction: null }, dateRangeFormat: { classPropertyName: "dateRangeFormat", publicName: "dateRangeFormat", isSignal: false, isRequired: false, transformFunction: null }, showCalendarLegend: { classPropertyName: "showCalendarLegend", publicName: "showCalendarLegend", isSignal: true, isRequired: false, transformFunction: null }, legendCol: { classPropertyName: "legendCol", publicName: "legendCol", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: false, isRequired: false, transformFunction: null }, disableFunction: { classPropertyName: "disableFunction", publicName: "disableFunction", isSignal: false, isRequired: false, transformFunction: null }, disableRangeStartFunction: { classPropertyName: "disableRangeStartFunction", publicName: "disableRangeStartFunction", isSignal: false, isRequired: false, transformFunction: null }, disableRangeEndFunction: { classPropertyName: "disableRangeEndFunction", publicName: "disableRangeEndFunction", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { isOpenChange: "isOpenChange", selectedDateChange: "selectedDateChange", selectedMultipleDatesChange: "selectedMultipleDatesChange", selectedRangeDateChange: "selectedRangeDateChange", selectedMultipleDateRangesChange: "selectedMultipleDateRangesChange", 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),
@@ -1089,9 +1089,9 @@ class DatePickerComponent {
             PopoverService,
             DynamicComponentService,
             CalendarLegendFocusingService
-        ], 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: "_messagePopoverTemplate", first: true, predicate: ["popoverMessageTemplate"], descendants: true }, { propertyName: "_calendars", predicate: CalendarComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #popoverMessageTemplate>\n    @if (_message) {\n        <fd-form-message [embedded]=\"true\" [type]=\"state\">\n            {{ _message }}\n        </fd-form-message>\n    }\n</ng-template>\n<ng-template #desktopTemplate>\n    <fd-popover\n        [(isOpen)]=\"isOpen\"\n        (beforeOpen)=\"_beforePopoverOpen()\"\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            @if (_showPopoverContents) {\n                <ng-template [ngTemplateOutlet]=\"popoverMessageTemplate\"></ng-template>\n                <ng-content></ng-content>\n                <ng-template [ngTemplateOutlet]=\"calendarTemplate\"></ng-template>\n            }\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-input-group\n        #inputGroupComponent\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        [isControl]=\"true\"\n        [button]=\"true\"\n        [buttonFocusable]=\"buttonFocusable\"\n        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            (keydown.f4)=\"toggleCalendar()\"\n            (ngModelChange)=\"handleInputChange($event, true)\"\n            (click)=\"mobile && openCalendar()\"\n            (blur)=\"_onBlur($event)\"\n        />\n    </fd-input-group>\n</ng-template>\n<ng-template #calendarTemplate>\n    <fd-calendar\n        [activeView]=\"activeView\"\n        [markWeekends]=\"markWeekends\"\n        [specialDaysRules]=\"specialDaysRules\"\n        [showWeekNumbers]=\"showWeekNumbers\"\n        [allowMultipleSelection]=\"allowMultipleSelection\"\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        [selectedMultipleDates]=\"selectedMultipleDates\"\n        [selectedRangeDate]=\"selectedRangeDate\"\n        [selectedMultipleDateRanges]=\"selectedMultipleDateRanges\"\n        [startingDayOfWeek]=\"startingDayOfWeek\"\n        [previousButtonDisableFunction]=\"previousButtonDisableFunction\"\n        [nextButtonDisableFunction]=\"nextButtonDisableFunction\"\n        [showCalendarLegend]=\"showCalendarLegend()\"\n        [legendCol]=\"legendCol()\"\n        [mobileLandscape]=\"mobile && mobileLandscape\"\n        [mobilePortrait]=\"mobile && mobilePortrait\"\n        [dateRangeFormat]=\"dateRangeFormat\"\n        (selectedDateChange)=\"handleSingleDateChange($event)\"\n        (selectedMultipleDatesChange)=\"handleMultipleDatesChange($event)\"\n        (selectedRangeDateChange)=\"handleRangeDateChange($event)\"\n        (selectedMultipleDateRangesChange)=\"handleMultipleDateRangesChange($event)\"\n        (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n        (closeCalendar)=\"closeFromCalendar()\"\n    ></fd-calendar>\n    @if (showTodayButton) {\n        <div fd-bar barDesign=\"footer\" class=\"fd-date-picker__bar\">\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <button\n                        fd-button\n                        [label]=\"('coreCalendar.todayLabel' | fdTranslate)()\"\n                        (click)=\"onTodayButtonClick()\"\n                    ></button>\n                </fd-bar-element>\n            </div>\n        </div>\n    }\n</ng-template>\n<div [style.display]=\"'none'\" aria-hidden=\"true\">\n    <div [attr.id]=\"_formValueStateMessageId\" aria-atomic=\"true\" aria-live=\"assertive\">\n        @switch (state) {\n            @case ('success') {\n                {{ ('coreDatePicker.valueStateSuccessMessage' | fdTranslate)() }}\n            }\n            @case ('information') {\n                {{ ('coreDatePicker.valueStateInformationMessage' | fdTranslate)() }}\n            }\n            @case ('warning') {\n                {{ ('coreDatePicker.valueStateWarningMessage' | fdTranslate)() }}\n            }\n            @case ('error') {\n                {{ ('coreDatePicker.valueStateErrorMessage' | fdTranslate)() }}\n            }\n        }\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)}.fd-date-picker__bar{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i3.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight", "ariaModal"], outputs: ["onClose"] }, { kind: "component", type: i3.PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "bodyAriaLabel", "bodyRole", "bodyAriaLabelledBy", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["id", "type", "static", "valueStateMessage", "embedded"] }, { kind: "component", type: InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy", "ariaLabel"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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", "selectedMultipleDates", "selectedRangeDate", "selectedMultipleDateRanges", "markWeekends", "showWeekNumbers", "allowMultipleSelection", "mobileLandscape", "mobilePortrait", "activeView", "startingDayOfWeek", "calType", "id", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "rangeHoverEffect", "dateRangeFormat", "previousButtonDisableFunction", "nextButtonDisableFunction", "showCalendarLegend", "legendCol", "escapeFocusFunction", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["activeViewChange", "selectedDateChange", "selectedMultipleDatesChange", "selectedRangeDateChange", "selectedMultipleDateRangesChange", "isValidDateChange", "closeCalendar", "closeClicked"] }, { kind: "component", type: BarComponent, selector: "[fd-bar]", inputs: ["barDesign", "inPage", "inHomePage", "clear", "size", "initialSuggestionTitle", "initialSuggestionSubline", "role"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]", inputs: ["stackContentsVertically"] }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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: "_messagePopoverTemplate", first: true, predicate: ["popoverMessageTemplate"], descendants: true }, { propertyName: "_calendars", predicate: CalendarComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #popoverMessageTemplate>\n    @if (_message) {\n        <fd-form-message [embedded]=\"true\" [type]=\"state\">\n            {{ _message }}\n        </fd-form-message>\n    }\n</ng-template>\n<ng-template #desktopTemplate>\n    <fd-popover\n        [(isOpen)]=\"isOpen\"\n        (beforeOpen)=\"_beforePopoverOpen()\"\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            @if (_showPopoverContents) {\n                <ng-template [ngTemplateOutlet]=\"popoverMessageTemplate\"></ng-template>\n                <ng-content></ng-content>\n                <ng-template [ngTemplateOutlet]=\"calendarTemplate\"></ng-template>\n            }\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-input-group\n        #inputGroupComponent\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        [isControl]=\"true\"\n        [button]=\"true\"\n        [buttonFocusable]=\"buttonFocusable\"\n        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            [ngModelOptions]=\"{ standalone: true }\"\n            [ngModel]=\"_inputFieldDate\"\n            (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n            (keydown.f4)=\"toggleCalendar()\"\n            (ngModelChange)=\"handleInputChange($event, true)\"\n            (click)=\"mobile && openCalendar()\"\n            (blur)=\"_onBlur($event)\"\n        />\n    </fd-input-group>\n</ng-template>\n<ng-template #calendarTemplate>\n    <fd-calendar\n        [activeView]=\"activeView\"\n        [markWeekends]=\"markWeekends\"\n        [specialDaysRules]=\"specialDaysRules\"\n        [showWeekNumbers]=\"showWeekNumbers\"\n        [allowMultipleSelection]=\"allowMultipleSelection\"\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        [selectedMultipleDates]=\"selectedMultipleDates\"\n        [selectedRangeDate]=\"selectedRangeDate\"\n        [selectedMultipleDateRanges]=\"selectedMultipleDateRanges\"\n        [startingDayOfWeek]=\"startingDayOfWeek\"\n        [previousButtonDisableFunction]=\"previousButtonDisableFunction\"\n        [nextButtonDisableFunction]=\"nextButtonDisableFunction\"\n        [showCalendarLegend]=\"showCalendarLegend()\"\n        [legendCol]=\"legendCol()\"\n        [mobileLandscape]=\"mobile && mobileLandscape\"\n        [mobilePortrait]=\"mobile && mobilePortrait\"\n        [dateRangeFormat]=\"dateRangeFormat\"\n        (selectedDateChange)=\"handleSingleDateChange($event)\"\n        (selectedMultipleDatesChange)=\"handleMultipleDatesChange($event)\"\n        (selectedRangeDateChange)=\"handleRangeDateChange($event)\"\n        (selectedMultipleDateRangesChange)=\"handleMultipleDateRangesChange($event)\"\n        (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n        (closeCalendar)=\"closeFromCalendar()\"\n    ></fd-calendar>\n    @if (showTodayButton) {\n        <div fd-bar barDesign=\"footer\" class=\"fd-date-picker__bar\">\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <button\n                        fd-button\n                        [label]=\"('coreCalendar.todayLabel' | fdTranslate)()\"\n                        (click)=\"onTodayButtonClick()\"\n                    ></button>\n                </fd-bar-element>\n            </div>\n        </div>\n    }\n</ng-template>\n<div [style.display]=\"'none'\" aria-hidden=\"true\">\n    <div [attr.id]=\"_formValueStateMessageId\" aria-atomic=\"true\" aria-live=\"assertive\">\n        @switch (state) {\n            @case ('success') {\n                {{ ('coreDatePicker.valueStateSuccessMessage' | fdTranslate)() }}\n            }\n            @case ('information') {\n                {{ ('coreDatePicker.valueStateInformationMessage' | fdTranslate)() }}\n            }\n            @case ('warning') {\n                {{ ('coreDatePicker.valueStateWarningMessage' | fdTranslate)() }}\n            }\n            @case ('error') {\n                {{ ('coreDatePicker.valueStateErrorMessage' | fdTranslate)() }}\n            }\n        }\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)}.fd-date-picker__bar{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i3.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight", "ariaModal"], outputs: ["onClose"] }, { kind: "component", type: i3.PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "bodyAriaLabel", "bodyRole", "bodyAriaLabelledBy", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["id", "type", "static", "valueStateMessage", "embedded"] }, { kind: "component", type: InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy", "ariaLabel"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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", "selectedMultipleDates", "selectedRangeDate", "selectedMultipleDateRanges", "markWeekends", "showWeekNumbers", "allowMultipleSelection", "mobileLandscape", "mobilePortrait", "activeView", "startingDayOfWeek", "calType", "id", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "rangeHoverEffect", "dateRangeFormat", "previousButtonDisableFunction", "nextButtonDisableFunction", "showCalendarLegend", "legendCol", "escapeFocusFunction", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["activeViewChange", "selectedDateChange", "selectedMultipleDatesChange", "selectedRangeDateChange", "selectedMultipleDateRangesChange", "isValidDateChange", "closeCalendar", "closeClicked"] }, { kind: "component", type: BarComponent, selector: "[fd-bar]", inputs: ["barDesign", "inPage", "inHomePage", "clear", "size", "initialSuggestionTitle", "initialSuggestionSubline", "role"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]", inputs: ["stackContentsVertically"] }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-date-picker', host: {
                         '(blur)': 'onTouched()',
@@ -1130,7 +1130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         BarElementDirective,
                         ButtonComponent,
                         FdTranslatePipe
-                    ], template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #popoverMessageTemplate>\n    @if (_message) {\n        <fd-form-message [embedded]=\"true\" [type]=\"state\">\n            {{ _message }}\n        </fd-form-message>\n    }\n</ng-template>\n<ng-template #desktopTemplate>\n    <fd-popover\n        [(isOpen)]=\"isOpen\"\n        (beforeOpen)=\"_beforePopoverOpen()\"\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            @if (_showPopoverContents) {\n                <ng-template [ngTemplateOutlet]=\"popoverMessageTemplate\"></ng-template>\n                <ng-content></ng-content>\n                <ng-template [ngTemplateOutlet]=\"calendarTemplate\"></ng-template>\n            }\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-input-group\n        #inputGroupComponent\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        [isControl]=\"true\"\n        [button]=\"true\"\n        [buttonFocusable]=\"buttonFocusable\"\n        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            (keydown.f4)=\"toggleCalendar()\"\n            (ngModelChange)=\"handleInputChange($event, true)\"\n            (click)=\"mobile && openCalendar()\"\n            (blur)=\"_onBlur($event)\"\n        />\n    </fd-input-group>\n</ng-template>\n<ng-template #calendarTemplate>\n    <fd-calendar\n        [activeView]=\"activeView\"\n        [markWeekends]=\"markWeekends\"\n        [specialDaysRules]=\"specialDaysRules\"\n        [showWeekNumbers]=\"showWeekNumbers\"\n        [allowMultipleSelection]=\"allowMultipleSelection\"\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        [selectedMultipleDates]=\"selectedMultipleDates\"\n        [selectedRangeDate]=\"selectedRangeDate\"\n        [selectedMultipleDateRanges]=\"selectedMultipleDateRanges\"\n        [startingDayOfWeek]=\"startingDayOfWeek\"\n        [previousButtonDisableFunction]=\"previousButtonDisableFunction\"\n        [nextButtonDisableFunction]=\"nextButtonDisableFunction\"\n        [showCalendarLegend]=\"showCalendarLegend()\"\n        [legendCol]=\"legendCol()\"\n        [mobileLandscape]=\"mobile && mobileLandscape\"\n        [mobilePortrait]=\"mobile && mobilePortrait\"\n        [dateRangeFormat]=\"dateRangeFormat\"\n        (selectedDateChange)=\"handleSingleDateChange($event)\"\n        (selectedMultipleDatesChange)=\"handleMultipleDatesChange($event)\"\n        (selectedRangeDateChange)=\"handleRangeDateChange($event)\"\n        (selectedMultipleDateRangesChange)=\"handleMultipleDateRangesChange($event)\"\n        (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n        (closeCalendar)=\"closeFromCalendar()\"\n    ></fd-calendar>\n    @if (showTodayButton) {\n        <div fd-bar barDesign=\"footer\" class=\"fd-date-picker__bar\">\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <button\n                        fd-button\n                        [label]=\"('coreCalendar.todayLabel' | fdTranslate)()\"\n                        (click)=\"onTodayButtonClick()\"\n                    ></button>\n                </fd-bar-element>\n            </div>\n        </div>\n    }\n</ng-template>\n<div [style.display]=\"'none'\" aria-hidden=\"true\">\n    <div [attr.id]=\"_formValueStateMessageId\" aria-atomic=\"true\" aria-live=\"assertive\">\n        @switch (state) {\n            @case ('success') {\n                {{ ('coreDatePicker.valueStateSuccessMessage' | fdTranslate)() }}\n            }\n            @case ('information') {\n                {{ ('coreDatePicker.valueStateInformationMessage' | fdTranslate)() }}\n            }\n            @case ('warning') {\n                {{ ('coreDatePicker.valueStateWarningMessage' | fdTranslate)() }}\n            }\n            @case ('error') {\n                {{ ('coreDatePicker.valueStateErrorMessage' | fdTranslate)() }}\n            }\n        }\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)}.fd-date-picker__bar{overflow:hidden}\n"] }]
+                    ], template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #popoverMessageTemplate>\n    @if (_message) {\n        <fd-form-message [embedded]=\"true\" [type]=\"state\">\n            {{ _message }}\n        </fd-form-message>\n    }\n</ng-template>\n<ng-template #desktopTemplate>\n    <fd-popover\n        [(isOpen)]=\"isOpen\"\n        (beforeOpen)=\"_beforePopoverOpen()\"\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            @if (_showPopoverContents) {\n                <ng-template [ngTemplateOutlet]=\"popoverMessageTemplate\"></ng-template>\n                <ng-content></ng-content>\n                <ng-template [ngTemplateOutlet]=\"calendarTemplate\"></ng-template>\n            }\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-input-group\n        #inputGroupComponent\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        [isControl]=\"true\"\n        [button]=\"true\"\n        [buttonFocusable]=\"buttonFocusable\"\n        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            [ngModelOptions]=\"{ standalone: true }\"\n            [ngModel]=\"_inputFieldDate\"\n            (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n            (keydown.f4)=\"toggleCalendar()\"\n            (ngModelChange)=\"handleInputChange($event, true)\"\n            (click)=\"mobile && openCalendar()\"\n            (blur)=\"_onBlur($event)\"\n        />\n    </fd-input-group>\n</ng-template>\n<ng-template #calendarTemplate>\n    <fd-calendar\n        [activeView]=\"activeView\"\n        [markWeekends]=\"markWeekends\"\n        [specialDaysRules]=\"specialDaysRules\"\n        [showWeekNumbers]=\"showWeekNumbers\"\n        [allowMultipleSelection]=\"allowMultipleSelection\"\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        [selectedMultipleDates]=\"selectedMultipleDates\"\n        [selectedRangeDate]=\"selectedRangeDate\"\n        [selectedMultipleDateRanges]=\"selectedMultipleDateRanges\"\n        [startingDayOfWeek]=\"startingDayOfWeek\"\n        [previousButtonDisableFunction]=\"previousButtonDisableFunction\"\n        [nextButtonDisableFunction]=\"nextButtonDisableFunction\"\n        [showCalendarLegend]=\"showCalendarLegend()\"\n        [legendCol]=\"legendCol()\"\n        [mobileLandscape]=\"mobile && mobileLandscape\"\n        [mobilePortrait]=\"mobile && mobilePortrait\"\n        [dateRangeFormat]=\"dateRangeFormat\"\n        (selectedDateChange)=\"handleSingleDateChange($event)\"\n        (selectedMultipleDatesChange)=\"handleMultipleDatesChange($event)\"\n        (selectedRangeDateChange)=\"handleRangeDateChange($event)\"\n        (selectedMultipleDateRangesChange)=\"handleMultipleDateRangesChange($event)\"\n        (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n        (closeCalendar)=\"closeFromCalendar()\"\n    ></fd-calendar>\n    @if (showTodayButton) {\n        <div fd-bar barDesign=\"footer\" class=\"fd-date-picker__bar\">\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <button\n                        fd-button\n                        [label]=\"('coreCalendar.todayLabel' | fdTranslate)()\"\n                        (click)=\"onTodayButtonClick()\"\n                    ></button>\n                </fd-bar-element>\n            </div>\n        </div>\n    }\n</ng-template>\n<div [style.display]=\"'none'\" aria-hidden=\"true\">\n    <div [attr.id]=\"_formValueStateMessageId\" aria-atomic=\"true\" aria-live=\"assertive\">\n        @switch (state) {\n            @case ('success') {\n                {{ ('coreDatePicker.valueStateSuccessMessage' | fdTranslate)() }}\n            }\n            @case ('information') {\n                {{ ('coreDatePicker.valueStateInformationMessage' | fdTranslate)() }}\n            }\n            @case ('warning') {\n                {{ ('coreDatePicker.valueStateWarningMessage' | fdTranslate)() }}\n            }\n            @case ('error') {\n                {{ ('coreDatePicker.valueStateErrorMessage' | fdTranslate)() }}\n            }\n        }\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)}.fd-date-picker__bar{overflow:hidden}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DatetimeAdapter, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -1270,11 +1270,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * Use direct imports of components and directives.
  */
 class DatePickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: DatePickerModule, imports: [DatePickerComponent, DatePickerMobileComponent], exports: [DatePickerComponent, DatePickerMobileComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatePickerModule, imports: [DatePickerComponent, DatePickerMobileComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: DatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.1", ngImport: i0, type: DatePickerModule, imports: [DatePickerComponent, DatePickerMobileComponent], exports: [DatePickerComponent, DatePickerMobileComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: DatePickerModule, imports: [DatePickerComponent, DatePickerMobileComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: DatePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DatePickerComponent, DatePickerMobileComponent],