@fundamental-ngx/core 0.44.1-rc.3 → 0.45.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, ElementRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Inject, Input, Output, ViewChild, Directive, NgModule } from '@angular/core';
+import { EventEmitter, forwardRef, ElementRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Inject, Input, Output, ViewChild, NgModule } from '@angular/core';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { IconModule } from '@fundamental-ngx/core/icon';
@@ -18,14 +18,13 @@ 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 { InputGroupInputDirective, InputGroupModule } from '@fundamental-ngx/core/input-group';
-import { warnOnce } from '@fundamental-ngx/cdk/utils';
 import * as i8 from '@fundamental-ngx/core/button';
 import { ButtonModule } from '@fundamental-ngx/core/button';
 import * as i9 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 { DeprecatedCompactDirective, CONTENT_DENSITY_DIRECTIVE, ContentDensityModule } from '@fundamental-ngx/core/content-density';
+import { ContentDensityModule } from '@fundamental-ngx/core/content-density';
 
 /** Creates an error to be thrown when attempting to use an invalid date implementation. */
 function createMissingDateImplementationError(provider) {
@@ -57,83 +56,6 @@ class DatePickerComponent {
         this._messageTriggers = triggers;
         this._popoverFormMessage.triggers = triggers;
     }
-    /**
-     * @deprecated use i18n capabilities instead
-     * Aria-label for the datepicker input.
-     */
-    set dateInputLabel(value) {
-        warnOnce("Property dateInputLabel is deprecated. Use i18n capabilities 'coreDatePicker.dateInputLabel' key instead.");
-        this._dateInputLabel = value;
-    }
-    get dateInputLabel() {
-        return this._dateInputLabel;
-    }
-    /**
-     * @deprecated use i18n capabilities instead
-     * Aria-label for the datepicker input.
-     */
-    set dateRangeInputLabel(value) {
-        warnOnce("Property dateRangeInputLabel is deprecated. Use i18n capabilities 'coreDatePicker.dateRangeInputLabel' key instead.");
-        this._dateRangeInputLabel = value;
-    }
-    get dateRangeInputLabel() {
-        return this._dateRangeInputLabel;
-    }
-    /**
-     * @deprecated use i18n capabilities instead
-     * Aria-label for the button to show/hide the calendar.
-     */
-    set displayCalendarToggleLabel(value) {
-        warnOnce("Property displayCalendarToggleLabel is deprecated. Use i18n capabilities 'coreDatePicker.displayCalendarToggleLabel' key instead.");
-        this._displayCalendarToggleLabel = value;
-    }
-    get displayCalendarToggleLabel() {
-        return this._displayCalendarToggleLabel;
-    }
-    /**
-     * @deprecated use i18n capabilities instead
-     * Value state "success" aria message.
-     */
-    set valueStateSuccessMessage(value) {
-        warnOnce("Property valueStateSuccessMessage is deprecated. Use i18n capabilities 'coreDatePicker.valueStateSuccessMessage' key instead.");
-        this._valueStateSuccessMessage = value;
-    }
-    get valueStateSuccessMessage() {
-        return this._valueStateSuccessMessage;
-    }
-    /**
-     * @deprecated use i18n capabilities instead
-     * Value state "information" aria message.
-     */
-    set valueStateInformationMessage(value) {
-        warnOnce("Property valueStateInformationMessage is deprecated. Use i18n capabilities 'coreDatePicker.valueStateInformationMessage' key instead.");
-        this._valueStateInformationMessage = value;
-    }
-    get valueStateInformationMessage() {
-        return this._valueStateInformationMessage;
-    }
-    /**
-     * @deprecated use i18n capabilities instead
-     * Value state "warning" aria message.
-     */
-    set valueStateWarningMessage(value) {
-        warnOnce("Property valueStateWarningMessage is deprecated. Use i18n capabilities 'coreDatePicker.valueStateWarningMessage' key instead.");
-        this._valueStateWarningMessage = value;
-    }
-    get valueStateWarningMessage() {
-        return this._valueStateWarningMessage;
-    }
-    /**
-     * @deprecated use i18n capabilities instead
-     * Value state "error" aria message.
-     */
-    set valueStateErrorMessage(value) {
-        warnOnce("Property valueStateErrorMessage is deprecated. Use i18n capabilities 'coreDatePicker.valueStateErrorMessage' key instead.");
-        this._valueStateErrorMessage = value;
-    }
-    get valueStateErrorMessage() {
-        return this._valueStateErrorMessage;
-    }
     /**
      *  The state of the form control - applies css classes.
      *  Also, this is applied to message.
@@ -165,14 +87,6 @@ class DatePickerComponent {
     get _rangeDelimiter() {
         return this._dateTimeFormats.rangeDelimiter;
     }
-    /**
-     * Date input aria label based on type
-     * @hidden
-     */
-    get _dateInputArialLabel() {
-        // return either input value or a key for "fdTranslate" pipe
-        return this.type === 'range' ? this.dateRangeInputLabel : this.dateInputLabel;
-    }
     /**
      * Date input aria label key based on type
      * @hidden
@@ -685,7 +599,7 @@ class DatePickerComponent {
         this._popoverFormMessage.messageType = this._state;
     }
     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", dateInputLabel: "dateInputLabel", dateRangeInputLabel: "dateRangeInputLabel", displayCalendarToggleLabel: "displayCalendarToggleLabel", valueStateSuccessMessage: "valueStateSuccessMessage", valueStateInformationMessage: "valueStateInformationMessage", valueStateWarningMessage: "valueStateWarningMessage", valueStateErrorMessage: "valueStateErrorMessage", 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: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DatePickerComponent),
@@ -699,7 +613,7 @@ class DatePickerComponent {
             registerFormItemControl(DatePickerComponent),
             PopoverFormMessageService,
             PopoverService
-        ], viewQueries: [{ propertyName: "_calendarComponent", first: true, predicate: CalendarComponent, descendants: true }, { propertyName: "_inputGroupElement", first: true, predicate: ["inputGroupComponent"], descendants: true, read: ElementRef }, { propertyName: "_inputElement", first: true, predicate: InputGroupInputDirective, descendants: true, read: ElementRef }], 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]=\"displayCalendarToggleLabel || ('coreDatePicker.displayCalendarToggleLabel' | fdTranslate)\"\n            [iconTitle]=\"displayCalendarToggleLabel || ('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]=\"_dateInputArialLabel || (_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        <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    </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                valueStateSuccessMessage || ('coreDatePicker.valueStateSuccessMessage' | fdTranslate)\n            }}</ng-container>\n            <ng-container *ngSwitchCase=\"'information'\">{{\n                valueStateInformationMessage || ('coreDatePicker.valueStateInformationMessage' | fdTranslate)\n            }}</ng-container>\n            <ng-container *ngSwitchCase=\"'warning'\">{{\n                valueStateWarningMessage || ('coreDatePicker.valueStateWarningMessage' | fdTranslate)\n            }}</ng-container>\n            <ng-container *ngSwitchCase=\"'error'\">{{\n                valueStateErrorMessage || ('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: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "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: ["isTitle", "fullWidth"] }, { kind: "pipe", type: i10.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "_calendarComponent", first: true, predicate: CalendarComponent, descendants: true }, { propertyName: "_inputGroupElement", first: true, predicate: ["inputGroupComponent"], descendants: true, read: ElementRef }, { propertyName: "_inputElement", first: true, predicate: InputGroupInputDirective, descendants: true, read: ElementRef }], 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        <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    </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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -721,7 +635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                         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]=\"displayCalendarToggleLabel || ('coreDatePicker.displayCalendarToggleLabel' | fdTranslate)\"\n            [iconTitle]=\"displayCalendarToggleLabel || ('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]=\"_dateInputArialLabel || (_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        <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    </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                valueStateSuccessMessage || ('coreDatePicker.valueStateSuccessMessage' | fdTranslate)\n            }}</ng-container>\n            <ng-container *ngSwitchCase=\"'information'\">{{\n                valueStateInformationMessage || ('coreDatePicker.valueStateInformationMessage' | fdTranslate)\n            }}</ng-container>\n            <ng-container *ngSwitchCase=\"'warning'\">{{\n                valueStateWarningMessage || ('coreDatePicker.valueStateWarningMessage' | fdTranslate)\n            }}</ng-container>\n            <ng-container *ngSwitchCase=\"'error'\">{{\n                valueStateErrorMessage || ('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"] }]
+                    ], 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        <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    </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: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -751,20 +665,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 type: Input
             }], useValidation: [{
                 type: Input
-            }], dateInputLabel: [{
-                type: Input
-            }], dateRangeInputLabel: [{
-                type: Input
-            }], displayCalendarToggleLabel: [{
-                type: Input
-            }], valueStateSuccessMessage: [{
-                type: Input
-            }], valueStateInformationMessage: [{
-                type: Input
-            }], valueStateWarningMessage: [{
-                type: Input
-            }], valueStateErrorMessage: [{
-                type: Input
             }], allowNull: [{
                 type: Input
             }], activeView: [{
@@ -838,36 +738,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 type: Input
             }] } });
 
-class DeprecatedDatePickerCompactDirective extends DeprecatedCompactDirective {
-    /** @hidden */
-    constructor() {
-        super('fd-date-picker');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DeprecatedDatePickerCompactDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: DeprecatedDatePickerCompactDirective, selector: "fd-date-picker[compact]", providers: [
-            {
-                provide: CONTENT_DENSITY_DIRECTIVE,
-                useExisting: forwardRef(() => DeprecatedDatePickerCompactDirective)
-            }
-        ], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DeprecatedDatePickerCompactDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'fd-date-picker[compact]',
-                    providers: [
-                        {
-                            provide: CONTENT_DENSITY_DIRECTIVE,
-                            useExisting: forwardRef(() => DeprecatedDatePickerCompactDirective)
-                        }
-                    ]
-                }]
-        }], ctorParameters: function () { return []; } });
-
 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, DeprecatedDatePickerCompactDirective], imports: [CommonModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.0", ngImport: i0, type: DatePickerModule, declarations: [DatePickerComponent], imports: [CommonModule,
             IconModule,
             PopoverModule,
             I18nModule,
@@ -877,7 +750,7 @@ class DatePickerModule {
             ButtonModule,
             FormMessageModule,
             BarModule,
-            ContentDensityModule], exports: [DatePickerComponent, DeprecatedDatePickerCompactDirective, ContentDensityModule] }); }
+            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,
@@ -893,7 +766,7 @@ class DatePickerModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DatePickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [DatePickerComponent, DeprecatedDatePickerCompactDirective],
+                    declarations: [DatePickerComponent],
                     imports: [
                         CommonModule,
                         IconModule,
@@ -907,7 +780,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                         BarModule,
                         ContentDensityModule
                     ],
-                    exports: [DatePickerComponent, DeprecatedDatePickerCompactDirective, ContentDensityModule]
+                    exports: [DatePickerComponent, ContentDensityModule]
                 }]
         }] });
 
@@ -915,5 +788,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DatePickerComponent, DatePickerModule, DeprecatedDatePickerCompactDirective };
+export { DatePickerComponent, DatePickerModule };
 //# sourceMappingURL=fundamental-ngx-core-date-picker.mjs.map