@fundamental-ngx/core 0.46.0-rc.0 → 0.46.0-rc.2

package/calendar/calendar-directives.d.ts

@@ -11,5 +11,5 @@ export declare class CalendarCloseButtonDirective {
     /** @hidden */
     constructor(_originalAriaLabel: string, _originalTitle: string, _calendarI18nLabels: CalendarI18nLabels);
     static ɵfac: i0.ɵɵFactoryDeclaration<CalendarCloseButtonDirective, [{ attribute: "aria-label"; }, { attribute: "title"; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CalendarCloseButtonDirective, "[fd-calendar-close-button]", never, {}, {}, never, never, false, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CalendarCloseButtonDirective, "[fd-calendar-close-button]", never, {}, {}, never, never, true, never, false>;
 }

package/calendar/calendar-header/calendar-header.component.d.ts

@@ -29,7 +29,7 @@ export declare class CalendarHeaderComponent<D> implements OnDestroy, OnInit, On
     set calendarYearGrid(yearGrid: CalendarYearGrid);
     /** Calendar ID */
     id: string;
-    /** Whether close button should be shown */
+    /** Whether calendar should be rendered in mobile landscape mode. */
     mobileLandscape: boolean;
     /** Event emitted when the active view should change. */
     readonly activeViewChange: EventEmitter<FdCalendarView>;
@@ -37,8 +37,6 @@ export declare class CalendarHeaderComponent<D> implements OnDestroy, OnInit, On
     readonly previousClicked: EventEmitter<void>;
     /** Event emitted when the next button is clicked. */
     readonly nextClicked: EventEmitter<void>;
-    /** Event thrown, when the close button is clicked */
-    readonly closeClicked: EventEmitter<void>;
     /** Aria label for the previous button. Depends on the active view. */
     previousAriaLabel: string;
     /** Aria label for the next button. Depends on the active view. */
@@ -130,8 +128,6 @@ export declare class CalendarHeaderComponent<D> implements OnDestroy, OnInit, On
     /** @hidden */
     _processViewChange(type: FdCalendarView, event?: MouseEvent): void;
     /** @hidden */
-    _emitClose(): void;
-    /** @hidden */
     private _listenToLocaleChanges;
     /** @hidden */
     private _listenToCalendarLabelsChanges;
@@ -160,5 +156,5 @@ export declare class CalendarHeaderComponent<D> implements OnDestroy, OnInit, On
     /** @hidden */
     private _getYearName;
     static ɵfac: i0.ɵɵFactoryDeclaration<CalendarHeaderComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarHeaderComponent<any>, "fd-calendar-header", never, { "activeView": { "alias": "activeView"; "required": false; }; "currentlyDisplayed": { "alias": "currentlyDisplayed"; "required": false; }; "previousButtonDisabled": { "alias": "previousButtonDisabled"; "required": false; }; "nextButtonDisabled": { "alias": "nextButtonDisabled"; "required": false; }; "calendarYearGrid": { "alias": "calendarYearGrid"; "required": false; }; "id": { "alias": "id"; "required": false; }; "mobileLandscape": { "alias": "mobileLandscape"; "required": false; }; }, { "activeViewChange": "activeViewChange"; "previousClicked": "previousClicked"; "nextClicked": "nextClicked"; "closeClicked": "closeClicked"; }, never, never, false, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarHeaderComponent<any>, "fd-calendar-header", never, { "activeView": { "alias": "activeView"; "required": false; }; "currentlyDisplayed": { "alias": "currentlyDisplayed"; "required": false; }; "previousButtonDisabled": { "alias": "previousButtonDisabled"; "required": false; }; "nextButtonDisabled": { "alias": "nextButtonDisabled"; "required": false; }; "calendarYearGrid": { "alias": "calendarYearGrid"; "required": false; }; "id": { "alias": "id"; "required": false; }; "mobileLandscape": { "alias": "mobileLandscape"; "required": false; }; }, { "activeViewChange": "activeViewChange"; "previousClicked": "previousClicked"; "nextClicked": "nextClicked"; }, never, never, true, never, false>;
 }

package/calendar/calendar-views/calendar-aggregated-year-view/calendar-aggregated-year-view.component.d.ts

@@ -181,5 +181,5 @@ export declare class CalendarAggregatedYearViewComponent<D> implements OnInit, O
     /** @hidden */
     private _focusOnCellByIndex;
     static ɵfac: i0.ɵɵFactoryDeclaration<CalendarAggregatedYearViewComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarAggregatedYearViewComponent<any>, "fd-calendar-aggregated-year-view", never, { "id": { "alias": "id"; "required": false; }; "focusEscapeFunction": { "alias": "focusEscapeFunction"; "required": false; }; "yearSelected": { "alias": "yearSelected"; "required": false; }; "aggregatedYearsViewGrid": { "alias": "aggregatedYearsViewGrid"; "required": false; }; "yearViewGrid": { "alias": "yearViewGrid"; "required": false; }; }, { "yearsClicked": "yearsClicked"; }, never, never, false, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarAggregatedYearViewComponent<any>, "fd-calendar-aggregated-year-view", never, { "id": { "alias": "id"; "required": false; }; "focusEscapeFunction": { "alias": "focusEscapeFunction"; "required": false; }; "yearSelected": { "alias": "yearSelected"; "required": false; }; "aggregatedYearsViewGrid": { "alias": "aggregatedYearsViewGrid"; "required": false; }; "yearViewGrid": { "alias": "yearViewGrid"; "required": false; }; }, { "yearsClicked": "yearsClicked"; }, never, never, true, never, false>;
 }

package/calendar/calendar-views/calendar-day-view/calendar-day-view.component.d.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { DateTimeFormats, DatetimeAdapter } from '@fundamental-ngx/core/datetime';
 import { SpecialDayRule } from '@fundamental-ngx/core/shared';
 import { DateRange } from '../../models/date-range';
@@ -11,28 +11,37 @@ import { DisableDateFunction, EscapeFocusFunction, FocusableCalendarView } from
 import { Nullable } from '@fundamental-ngx/cdk/utils';
 import * as i0 from "@angular/core";
 /** Component representing the day view of the calendar. */
-export declare class CalendarDayViewComponent<D> implements OnInit, OnChanges, OnDestroy, FocusableCalendarView {
+export declare class CalendarDayViewComponent<D> implements OnInit, OnChanges, FocusableCalendarView {
     private eRef;
     private changeDetRef;
     private calendarService;
     private _dateTimeFormats;
     _dateTimeAdapter: DatetimeAdapter<D>;
     private _calendarI18nLabels;
+    /**
+     * Function used to disable certain dates in the calendar.
+     * @param date date type
+     */
+    disableFunction: DisableDateFunction<D>;
+    /**
+     * Function used to disable certain dates in the calendar for the range start selection.
+     * @param date date representation
+     */
+    disableRangeStartFunction: DisableDateFunction<D>;
+    /**
+     * Function used to disable certain dates in the calendar for the range end selection.
+     * @param date date representation
+     */
+    disableRangeEndFunction: DisableDateFunction<D>;
     /** Currently displayed month and year for days */
     set currentlyDisplayed(currentlyDisplayed: CalendarCurrent);
     get currentlyDisplayed(): CalendarCurrent;
-    /** @hidden */
-    private _currentlyDisplayed;
     /** The currently selected date model in single mode. */
     set selectedDate(date: Nullable<D>);
     get selectedDate(): Nullable<D>;
-    /** @hidden */
-    private _selectedDate;
     /** The currently selected FdDates model start and end in range mode. */
     set selectedRangeDate(dateRange: DateRange<D>);
     get selectedRangeDate(): DateRange<D>;
-    /** @hidden */
-    private _selectedRangeDate;
     /** The day of the week the calendar should start on. 1 represents Sunday, 2 is Monday, 3 is Tuesday, and so on. */
     startingDayOfWeek: DaysOfWeek;
     /** The type of calendar, 'single' for single date selection or 'range' for a range of dates. */
@@ -56,7 +65,7 @@ export declare class CalendarDayViewComponent<D> implements OnInit, OnChanges, O
     focusEscapeFunction: EscapeFocusFunction;
     /**
      * Special days mark, it can be used by passing array of object with
-     * Special day number, list 1-20 [class:`fd-calendar__special-day--{{number}}`] is available there:
+     * Special day number, list 1-20 [class:`fd-calendar__item--legend-{{number}}`] is available there:
      * https://sap.github.io/fundamental-styles/components/calendar.html calendar special days section
      * Rule accepts method with date object as a parameter. ex:
      * `rule: (date: D) => this.dateAdapter.getDay(date) === 1`, which will mark all sundays as special day.
@@ -80,11 +89,12 @@ export declare class CalendarDayViewComponent<D> implements OnInit, OnChanges, O
      * Array of week numbers displayed for current month/year
      */
     _weeks: string[];
-    /**
-     * @hidden
-     * An RxJS Subject that will kill the data stream upon component’s destruction (for unsubscribing)
-     */
-    private readonly _onDestroy$;
+    /** @hidden */
+    private _selectedRangeDate;
+    /** @hidden */
+    private _selectedDate;
+    /** @hidden */
+    private readonly _destroyRef;
     /**
      * @hidden
      * Days per week
@@ -94,6 +104,8 @@ export declare class CalendarDayViewComponent<D> implements OnInit, OnChanges, O
     private _isOnRangePick;
     /** @hidden */
     private _isInitiated;
+    /** @hidden */
+    private _currentlyDisplayed;
     /**
      * @hidden
      * Variable that contains short weekday names.
@@ -104,29 +116,12 @@ export declare class CalendarDayViewComponent<D> implements OnInit, OnChanges, O
      * Variable that contains short weekday names.
      */
     private _longWeekDays;
-    /**
-     * Function used to disable certain dates in the calendar.
-     * @param date date type
-     */
-    disableFunction: DisableDateFunction<D>;
-    /**
-     * Function used to disable certain dates in the calendar for the range start selection.
-     * @param date date representation
-     */
-    disableRangeStartFunction: DisableDateFunction<D>;
-    /**
-     * Function used to disable certain dates in the calendar for the range end selection.
-     * @param date date representation
-     */
-    disableRangeEndFunction: DisableDateFunction<D>;
     /** @hidden */
     constructor(eRef: ElementRef, changeDetRef: ChangeDetectorRef, calendarService: CalendarService, _dateTimeFormats: DateTimeFormats, _dateTimeAdapter: DatetimeAdapter<D>, _calendarI18nLabels: CalendarI18nLabels);
     /** @hidden */
     ngOnInit(): void;
     /** @hidden */
     ngOnChanges(changes: SimpleChanges): void;
-    /** @hidden */
-    ngOnDestroy(): void;
     /**
      * Function for selecting a date on the calendar. Typically called when a date is clicked, but can also be called programmatically.
      * @param day CalendarDay object to be selected.
@@ -364,5 +359,5 @@ export declare class CalendarDayViewComponent<D> implements OnInit, OnChanges, O
     /** @hidden */
     private focusOnCellByIndex;
     static ɵfac: i0.ɵɵFactoryDeclaration<CalendarDayViewComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarDayViewComponent<any>, "fd-calendar-day-view", never, { "currentlyDisplayed": { "alias": "currentlyDisplayed"; "required": false; }; "selectedDate": { "alias": "selectedDate"; "required": false; }; "selectedRangeDate": { "alias": "selectedRangeDate"; "required": false; }; "startingDayOfWeek": { "alias": "startingDayOfWeek"; "required": false; }; "calType": { "alias": "calType"; "required": false; }; "id": { "alias": "id"; "required": false; }; "rangeHoverEffect": { "alias": "rangeHoverEffect"; "required": false; }; "markWeekends": { "alias": "markWeekends"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "focusEscapeFunction": { "alias": "focusEscapeFunction"; "required": false; }; "specialDaysRules": { "alias": "specialDaysRules"; "required": false; }; "disableFunction": { "alias": "disableFunction"; "required": false; }; "disableRangeStartFunction": { "alias": "disableRangeStartFunction"; "required": false; }; "disableRangeEndFunction": { "alias": "disableRangeEndFunction"; "required": false; }; }, { "selectedRangeDateChange": "selectedRangeDateChange"; "nextMonthSelect": "nextMonthSelect"; "previousMonthSelect": "previousMonthSelect"; "selectedDateChange": "selectedDateChange"; }, never, never, false, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarDayViewComponent<any>, "fd-calendar-day-view", never, { "disableFunction": { "alias": "disableFunction"; "required": false; }; "disableRangeStartFunction": { "alias": "disableRangeStartFunction"; "required": false; }; "disableRangeEndFunction": { "alias": "disableRangeEndFunction"; "required": false; }; "currentlyDisplayed": { "alias": "currentlyDisplayed"; "required": false; }; "selectedDate": { "alias": "selectedDate"; "required": false; }; "selectedRangeDate": { "alias": "selectedRangeDate"; "required": false; }; "startingDayOfWeek": { "alias": "startingDayOfWeek"; "required": false; }; "calType": { "alias": "calType"; "required": false; }; "id": { "alias": "id"; "required": false; }; "rangeHoverEffect": { "alias": "rangeHoverEffect"; "required": false; }; "markWeekends": { "alias": "markWeekends"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "focusEscapeFunction": { "alias": "focusEscapeFunction"; "required": false; }; "specialDaysRules": { "alias": "specialDaysRules"; "required": false; }; }, { "selectedRangeDateChange": "selectedRangeDateChange"; "nextMonthSelect": "nextMonthSelect"; "previousMonthSelect": "previousMonthSelect"; "selectedDateChange": "selectedDateChange"; }, never, never, true, never, false>;
 }

package/calendar/calendar-views/calendar-month-view/calendar-month-view.component.d.ts

@@ -140,5 +140,5 @@ export declare class CalendarMonthViewComponent<D> implements OnInit, OnDestroy,
     /** @hidden */
     private _focusOnCellByIndex;
     static ɵfac: i0.ɵɵFactoryDeclaration<CalendarMonthViewComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarMonthViewComponent<any>, "fd-calendar-month-view", never, { "id": { "alias": "id"; "required": false; }; "monthSelected": { "alias": "monthSelected"; "required": false; }; "focusEscapeFunction": { "alias": "focusEscapeFunction"; "required": false; }; "year": { "alias": "year"; "required": false; }; }, { "monthClicked": "monthClicked"; }, never, never, false, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarMonthViewComponent<any>, "fd-calendar-month-view", never, { "id": { "alias": "id"; "required": false; }; "monthSelected": { "alias": "monthSelected"; "required": false; }; "focusEscapeFunction": { "alias": "focusEscapeFunction"; "required": false; }; "year": { "alias": "year"; "required": false; }; }, { "monthClicked": "monthClicked"; }, never, never, true, never, false>;
 }

package/calendar/calendar-views/calendar-year-view/calendar-year-view.component.d.ts

@@ -164,5 +164,5 @@ export declare class CalendarYearViewComponent<D> implements OnInit, OnChanges,
     /** @hidden */
     private _focusOnCellByIndex;
     static ɵfac: i0.ɵɵFactoryDeclaration<CalendarYearViewComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarYearViewComponent<any>, "fd-calendar-year-view", never, { "id": { "alias": "id"; "required": false; }; "focusEscapeFunction": { "alias": "focusEscapeFunction"; "required": false; }; "yearSelected": { "alias": "yearSelected"; "required": false; }; "yearViewGrid": { "alias": "yearViewGrid"; "required": false; }; }, { "yearClicked": "yearClicked"; }, never, never, false, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarYearViewComponent<any>, "fd-calendar-year-view", never, { "id": { "alias": "id"; "required": false; }; "focusEscapeFunction": { "alias": "focusEscapeFunction"; "required": false; }; "yearSelected": { "alias": "yearSelected"; "required": false; }; "yearViewGrid": { "alias": "yearViewGrid"; "required": false; }; }, { "yearClicked": "yearClicked"; }, never, never, true, never, false>;
 }

package/calendar/calendar.component.d.ts

@@ -30,7 +30,6 @@ import * as i0 from "@angular/core";
 export declare class CalendarComponent<D> implements OnInit, OnChanges, ControlValueAccessor, Validator, OnDestroy {
     private _elementRef;
     private _changeDetectorRef;
-    private _contentDensityObserver;
     private _dateTimeAdapter;
     private _dateTimeFormats;
     /** The currently selected date model in single mode. */
@@ -59,7 +58,7 @@ export declare class CalendarComponent<D> implements OnInit, OnChanges, ControlV
     id: string;
     /**
      * Special days mark, it can be used by passing array of object with
-     * Special day number, list 1-20 [class:`fd-calendar__special-day--{{number}}`] is available there:
+     * Special day number, list 1-20 [class:`fd-calendar__item--legend-{{number}}`] is available there:
      * https://sap.github.io/fundamental-styles/components/calendar.html calendar special days section
      * Rule accepts method with D object as a parameter. ex:
      * `rule: (fdDate: D) => fdDate.getDay() === 1`, which will mark all sundays as special day.
@@ -122,13 +121,15 @@ export declare class CalendarComponent<D> implements OnInit, OnChanges, ControlV
      */
     _currentlyDisplayed: CalendarCurrent;
     /** @hidden */
+    previousButtonDisabled: boolean;
+    /** @hidden */
+    nextButtonDisabled: boolean;
+    /** @hidden */
     private _subscriptions;
     /** @hidden */
     private _adapterStartingDayOfWeek;
     /** @hidden */
-    previousButtonDisabled: boolean;
-    /** @hidden */
-    nextButtonDisabled: boolean;
+    constructor(_elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _contentDensityObserver: ContentDensityObserver, _dateTimeAdapter: DatetimeAdapter<D>, _dateTimeFormats: DateTimeFormats);
     /** That allows to define function that should happen, when focus should normally escape of component */
     escapeFocusFunction: EscapeFocusFunction;
     /**
@@ -151,8 +152,6 @@ export declare class CalendarComponent<D> implements OnInit, OnChanges, ControlV
     /** @hidden */
     onTouched: () => void;
     /** @hidden */
-    constructor(_elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _contentDensityObserver: ContentDensityObserver, _dateTimeAdapter: DatetimeAdapter<D>, _dateTimeFormats: DateTimeFormats);
-    /** @hidden */
     ngOnInit(): void;
     /** @hidden */
     ngOnChanges(changes: SimpleChanges): void;
@@ -255,5 +254,5 @@ export declare class CalendarComponent<D> implements OnInit, OnChanges, ControlV
     /** @hidden */
     private _focusOut;
     static ɵfac: i0.ɵɵFactoryDeclaration<CalendarComponent<any>, [null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarComponent<any>, "fd-calendar", never, { "selectedDate": { "alias": "selectedDate"; "required": false; }; "markWeekends": { "alias": "markWeekends"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "mobileLandscape": { "alias": "mobileLandscape"; "required": false; }; "mobilePortrait": { "alias": "mobilePortrait"; "required": false; }; "selectedRangeDate": { "alias": "selectedRangeDate"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "startingDayOfWeek": { "alias": "startingDayOfWeek"; "required": false; }; "calType": { "alias": "calType"; "required": false; }; "id": { "alias": "id"; "required": false; }; "specialDaysRules": { "alias": "specialDaysRules"; "required": false; }; "yearGrid": { "alias": "yearGrid"; "required": false; }; "aggregatedYearGrid": { "alias": "aggregatedYearGrid"; "required": false; }; "rangeHoverEffect": { "alias": "rangeHoverEffect"; "required": false; }; "previousButtonDisableFunction": { "alias": "previousButtonDisableFunction"; "required": false; }; "nextButtonDisableFunction": { "alias": "nextButtonDisableFunction"; "required": false; }; "escapeFocusFunction": { "alias": "escapeFocusFunction"; "required": false; }; "disableFunction": { "alias": "disableFunction"; "required": false; }; "disableRangeStartFunction": { "alias": "disableRangeStartFunction"; "required": false; }; "disableRangeEndFunction": { "alias": "disableRangeEndFunction"; "required": false; }; }, { "activeViewChange": "activeViewChange"; "selectedDateChange": "selectedDateChange"; "selectedRangeDateChange": "selectedRangeDateChange"; "isValidDateChange": "isValidDateChange"; "closeCalendar": "closeCalendar"; "closeClicked": "closeClicked"; }, never, never, false, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarComponent<any>, "fd-calendar", never, { "selectedDate": { "alias": "selectedDate"; "required": false; }; "markWeekends": { "alias": "markWeekends"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "mobileLandscape": { "alias": "mobileLandscape"; "required": false; }; "mobilePortrait": { "alias": "mobilePortrait"; "required": false; }; "selectedRangeDate": { "alias": "selectedRangeDate"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "startingDayOfWeek": { "alias": "startingDayOfWeek"; "required": false; }; "calType": { "alias": "calType"; "required": false; }; "id": { "alias": "id"; "required": false; }; "specialDaysRules": { "alias": "specialDaysRules"; "required": false; }; "yearGrid": { "alias": "yearGrid"; "required": false; }; "aggregatedYearGrid": { "alias": "aggregatedYearGrid"; "required": false; }; "rangeHoverEffect": { "alias": "rangeHoverEffect"; "required": false; }; "previousButtonDisableFunction": { "alias": "previousButtonDisableFunction"; "required": false; }; "nextButtonDisableFunction": { "alias": "nextButtonDisableFunction"; "required": false; }; "escapeFocusFunction": { "alias": "escapeFocusFunction"; "required": false; }; "disableFunction": { "alias": "disableFunction"; "required": false; }; "disableRangeStartFunction": { "alias": "disableRangeStartFunction"; "required": false; }; "disableRangeEndFunction": { "alias": "disableRangeEndFunction"; "required": false; }; }, { "activeViewChange": "activeViewChange"; "selectedDateChange": "selectedDateChange"; "selectedRangeDateChange": "selectedRangeDateChange"; "isValidDateChange": "isValidDateChange"; "closeCalendar": "closeCalendar"; "closeClicked": "closeClicked"; }, never, never, true, never, false>;
 }

package/calendar/calendar.module.d.ts

@@ -6,12 +6,9 @@ import * as i4 from "./calendar-views/calendar-month-view/calendar-month-view.co
 import * as i5 from "./calendar-views/calendar-year-view/calendar-year-view.component";
 import * as i6 from "./calendar-views/calendar-aggregated-year-view/calendar-aggregated-year-view.component";
 import * as i7 from "./calendar-directives";
-import * as i8 from "@angular/common";
-import * as i9 from "@fundamental-ngx/core/icon";
-import * as i10 from "@fundamental-ngx/core/button";
-import * as i11 from "@fundamental-ngx/core/content-density";
+import * as i8 from "@fundamental-ngx/core/content-density";
 export declare class CalendarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<CalendarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<CalendarModule, [typeof i1.CalendarComponent, typeof i2.CalendarHeaderComponent, typeof i3.CalendarDayViewComponent, typeof i4.CalendarMonthViewComponent, typeof i5.CalendarYearViewComponent, typeof i6.CalendarAggregatedYearViewComponent, typeof i7.CalendarCloseButtonDirective], [typeof i8.CommonModule, typeof i9.IconModule, typeof i10.ButtonModule, typeof i11.ContentDensityModule], [typeof i1.CalendarComponent, typeof i3.CalendarDayViewComponent, typeof i2.CalendarHeaderComponent, typeof i5.CalendarYearViewComponent, typeof i4.CalendarMonthViewComponent, typeof i6.CalendarAggregatedYearViewComponent, typeof i7.CalendarCloseButtonDirective, typeof i11.ContentDensityModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CalendarModule, never, [typeof i1.CalendarComponent, typeof i2.CalendarHeaderComponent, typeof i3.CalendarDayViewComponent, typeof i4.CalendarMonthViewComponent, typeof i5.CalendarYearViewComponent, typeof i6.CalendarAggregatedYearViewComponent, typeof i7.CalendarCloseButtonDirective], [typeof i1.CalendarComponent, typeof i3.CalendarDayViewComponent, typeof i2.CalendarHeaderComponent, typeof i5.CalendarYearViewComponent, typeof i4.CalendarMonthViewComponent, typeof i6.CalendarAggregatedYearViewComponent, typeof i7.CalendarCloseButtonDirective, typeof i8.ContentDensityModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<CalendarModule>;
 }

package/combobox/combobox-mobile/combobox-mobile.component.d.ts

@@ -6,7 +6,8 @@ import * as i0 from "@angular/core";
 export declare class ComboboxMobileComponent extends MobileModeBase<ComboboxInterface> implements OnInit, OnDestroy {
     /** @hidden */
     dialogTemplate: TemplateRef<any>;
-    /** @hidden
+    /**
+     * @hidden
      * For internal usage
      * Control element, which will be rendered inside dialog.
      * List element, which will be rendered inside dialog.

package/date-picker/date-picker-mobile/date-picker-mobile.component.d.ts

@@ -0,0 +1,31 @@
+import { DestroyRef, ElementRef, TemplateRef } from '@angular/core';
+import { MobileModeBase, MobileModeConfigToken } from '@fundamental-ngx/core/mobile-mode';
+import { DialogService } from '@fundamental-ngx/core/dialog';
+import { DatePicker } from '../date-picker.model';
+import * as i0 from "@angular/core";
+export declare class DatePickerMobileComponent<D> extends MobileModeBase<DatePicker<D>> {
+    private readonly _destroyRef;
+    datePickerConfig: {
+        calendarTemplate: TemplateRef<any>;
+        controlTemplate: TemplateRef<any>;
+    };
+    /** @hidden */
+    dialogTemplate: TemplateRef<any>;
+    /** @hidden */
+    private _selectedBackup;
+    /** @hidden */
+    constructor(elementRef: ElementRef, dialogService: DialogService, _destroyRef: DestroyRef, datePickerConfig: {
+        calendarTemplate: TemplateRef<any>;
+        controlTemplate: TemplateRef<any>;
+    }, datePickerComponent: DatePicker<D>, mobileModes: MobileModeConfigToken[]);
+    /** @hidden */
+    handleApprove(): void;
+    /** @hidden */
+    handleDismiss(): void;
+    /** @hidden */
+    private _toggleDialog;
+    /** @hidden */
+    private _open;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatePickerMobileComponent<any>, [null, null, null, null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatePickerMobileComponent<any>, "fd-date-picker-mobile", never, {}, {}, never, never, true, never, false>;
+}

package/date-picker/date-picker.component.d.ts

@@ -6,6 +6,8 @@ import { DatetimeAdapter, DateTimeFormats } from '@fundamental-ngx/core/datetime
 import { FormItemControl, PopoverFormMessageService } from '@fundamental-ngx/core/form';
 import { Nullable } from '@fundamental-ngx/cdk/utils';
 import { FormStates } from '@fundamental-ngx/cdk/forms';
+import { MobileModeConfig } from '@fundamental-ngx/core/mobile-mode';
+import { DatePicker } from './date-picker.model';
 import * as i0 from "@angular/core";
 /**
  * The datetime picker component is an opinionated composition of the fd-popover and
@@ -17,7 +19,7 @@ import * as i0 from "@angular/core";
  * ```
  *
  */
-export declare class DatePickerComponent<D> implements OnInit, OnDestroy, AfterViewInit, ControlValueAccessor, Validator, FormItemControl {
+export declare class DatePickerComponent<D> implements DatePicker<D>, OnInit, OnDestroy, AfterViewInit, ControlValueAccessor, Validator, FormItemControl {
     private _changeDetectionRef;
     private _dateTimeAdapter;
     private _dateTimeFormats;
@@ -32,13 +34,9 @@ export declare class DatePickerComponent<D> implements OnInit, OnDestroy, AfterV
     required: boolean;
     /** Text displayed in message */
     set message(message: string);
-    /** @hidden */
-    _message: string | null;
     /** The trigger events that will open/close the message box.
      *  Accepts any [HTML DOM Events](https://www.w3schools.com/jsref/dom_obj_event.asp). */
     set messageTriggers(triggers: string[]);
-    /** @hidden */
-    _messageTriggers: string[];
     /** The currently selected CalendarDay model */
     selectedDate: Nullable<D>;
     /** The currently selected FdDates model start and end in range mode. */
@@ -94,7 +92,7 @@ export declare class DatePickerComponent<D> implements OnInit, OnDestroy, AfterV
     buttonFocusable: boolean;
     /**
      * Special days mark, it can be used by passing array of object with
-     * Special day number, list 1-20 [class:`fd-calendar__special-day--{{number}}`] is available there:
+     * Special day number, list 1-20 [class:`fd-calendar__item--legend-{{number}}`] is available there:
      * https://sap.github.io/fundamental-styles/components/calendar.html calendar special days section
      * Rule accepts method with FdDate object as a parameter. ex:
      * `rule: (fdDate: FdDate) => fdDate.getDay() === 1`, which will mark all sundays as special day.
@@ -138,8 +136,14 @@ export declare class DatePickerComponent<D> implements OnInit, OnDestroy, AfterV
      * Whether to prevent page scrolling when focusing date picker input field after calendar has been closed.
      */
     preventScrollOnFocus: boolean;
-    /** @hidden */
-    _processInputOnBlur: boolean;
+    /** Whether date picker should rendered in mobile mode. */
+    mobile: boolean;
+    /** Mobile mode configuration. */
+    mobileConfig: MobileModeConfig;
+    /** Whether calendar is used inside mobile in landscape mode, it also adds close button on right side */
+    mobileLandscape: boolean;
+    /** Whether calendar is used inside mobile in portrait mode */
+    mobilePortrait: boolean;
     /** Event emitted when the state of the isOpen property changes. */
     readonly isOpenChange: EventEmitter<boolean>;
     /** Fired when a new date is selected. */
@@ -156,6 +160,16 @@ export declare class DatePickerComponent<D> implements OnInit, OnDestroy, AfterV
     _inputGroupElement: ElementRef;
     /** @hidden */
     _inputElement: ElementRef<HTMLInputElement>;
+    /** @hidden */
+    private readonly _controlTemplate;
+    /** @hidden */
+    private readonly _calendarTemplate;
+    /** @hidden */
+    _message: string | null;
+    /** @hidden */
+    _processInputOnBlur: boolean;
+    /** @hidden */
+    _messageTriggers: string[];
     /** @hidden The value of the input */
     _inputFieldDate: string | null;
     /** @hidden Whether the date input is invalid */
@@ -172,6 +186,21 @@ export declare class DatePickerComponent<D> implements OnInit, OnDestroy, AfterV
     private _subscriptions;
     /** @hidden */
     private _state;
+    /** @hidden */
+    private readonly _injector;
+    /** @hidden */
+    private readonly _dynamicComponentService;
+    /** @hidden */
+    private _mobileComponentRef;
+    /** @hidden */
+    get _rangeDelimiter(): string;
+    /**
+     * Date input aria label key based on type
+     * @hidden
+     */
+    get _dateInputArialLabelKey(): string;
+    /** @hidden */
+    constructor(_changeDetectionRef: ChangeDetectorRef, _dateTimeAdapter: DatetimeAdapter<D>, _dateTimeFormats: DateTimeFormats, _popoverFormMessage: PopoverFormMessageService);
     /**
      * Function used to disable certain dates in the calendar.
      * @param date date representation
@@ -192,14 +221,9 @@ export declare class DatePickerComponent<D> implements OnInit, OnDestroy, AfterV
     /** @hidden */
     onTouched: any;
     /** @hidden */
-    get _rangeDelimiter(): string;
-    /**
-     * Date input aria label key based on type
-     * @hidden
-     */
-    get _dateInputArialLabelKey(): string;
+    dialogApprove(): void;
     /** @hidden */
-    constructor(_changeDetectionRef: ChangeDetectorRef, _dateTimeAdapter: DatetimeAdapter<D>, _dateTimeFormats: DateTimeFormats, _popoverFormMessage: PopoverFormMessageService);
+    dialogDismiss(prevValue: D | DateRange<D>): void;
     /** @hidden */
     ngOnInit(): void;
     /** @hidden */
@@ -273,6 +297,8 @@ export declare class DatePickerComponent<D> implements OnInit, OnDestroy, AfterV
     dateStringUpdate(dateStr: string): void;
     /** Method that provides information if model selected date/dates have properly types and are valid */
     isModelValid(): boolean;
+    /** Returns current selected date. */
+    getSelectedDate(): D | DateRange<D>;
     /** @hidden */
     _changeMessageVisibility(): void;
     /** @hidden */
@@ -301,6 +327,10 @@ export declare class DatePickerComponent<D> implements OnInit, OnDestroy, AfterV
     private _InitialiseVariablesInMessageService;
     /** @hidden */
     private _setOpenState;
+    /** @hidden */
+    private _setUpMobileMode;
+    /** @hidden */
+    private _isDateRange;
     static ɵfac: i0.ɵɵFactoryDeclaration<DatePickerComponent<any>, [null, { optional: true; }, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DatePickerComponent<any>, "fd-date-picker", never, { "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "required": { "alias": "required"; "required": false; }; "message": { "alias": "message"; "required": false; }; "messageTriggers": { "alias": "messageTriggers"; "required": false; }; "selectedDate": { "alias": "selectedDate"; "required": false; }; "selectedRangeDate": { "alias": "selectedRangeDate"; "required": false; }; "startingDayOfWeek": { "alias": "startingDayOfWeek"; "required": false; }; "rangeHoverEffect": { "alias": "rangeHoverEffect"; "required": false; }; "useValidation": { "alias": "useValidation"; "required": false; }; "allowNull": { "alias": "allowNull"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "closeOnDateChoose": { "alias": "closeOnDateChoose"; "required": false; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; }; "todayButtonLabel": { "alias": "todayButtonLabel"; "required": false; }; "previousButtonDisableFunction": { "alias": "previousButtonDisableFunction"; "required": false; }; "nextButtonDisableFunction": { "alias": "nextButtonDisableFunction"; "required": false; }; "state": { "alias": "state"; "required": false; }; "buttonFocusable": { "alias": "buttonFocusable"; "required": false; }; "specialDaysRules": { "alias": "specialDaysRules"; "required": false; }; "yearGrid": { "alias": "yearGrid"; "required": false; }; "aggregatedYearGrid": { "alias": "aggregatedYearGrid"; "required": false; }; "markWeekends": { "alias": "markWeekends"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "processInputOnBlur": { "alias": "processInputOnBlur"; "required": false; }; "preventScrollOnFocus": { "alias": "preventScrollOnFocus"; "required": false; }; "disableFunction": { "alias": "disableFunction"; "required": false; }; "disableRangeStartFunction": { "alias": "disableRangeStartFunction"; "required": false; }; "disableRangeEndFunction": { "alias": "disableRangeEndFunction"; "required": false; }; }, { "isOpenChange": "isOpenChange"; "selectedDateChange": "selectedDateChange"; "selectedRangeDateChange": "selectedRangeDateChange"; "activeViewChange": "activeViewChange"; }, never, ["*"], false, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatePickerComponent<any>, "fd-date-picker", never, { "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "required": { "alias": "required"; "required": false; }; "message": { "alias": "message"; "required": false; }; "messageTriggers": { "alias": "messageTriggers"; "required": false; }; "selectedDate": { "alias": "selectedDate"; "required": false; }; "selectedRangeDate": { "alias": "selectedRangeDate"; "required": false; }; "startingDayOfWeek": { "alias": "startingDayOfWeek"; "required": false; }; "rangeHoverEffect": { "alias": "rangeHoverEffect"; "required": false; }; "useValidation": { "alias": "useValidation"; "required": false; }; "allowNull": { "alias": "allowNull"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "closeOnDateChoose": { "alias": "closeOnDateChoose"; "required": false; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; }; "todayButtonLabel": { "alias": "todayButtonLabel"; "required": false; }; "previousButtonDisableFunction": { "alias": "previousButtonDisableFunction"; "required": false; }; "nextButtonDisableFunction": { "alias": "nextButtonDisableFunction"; "required": false; }; "state": { "alias": "state"; "required": false; }; "buttonFocusable": { "alias": "buttonFocusable"; "required": false; }; "specialDaysRules": { "alias": "specialDaysRules"; "required": false; }; "yearGrid": { "alias": "yearGrid"; "required": false; }; "aggregatedYearGrid": { "alias": "aggregatedYearGrid"; "required": false; }; "markWeekends": { "alias": "markWeekends"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "processInputOnBlur": { "alias": "processInputOnBlur"; "required": false; }; "preventScrollOnFocus": { "alias": "preventScrollOnFocus"; "required": false; }; "mobile": { "alias": "mobile"; "required": false; }; "mobileConfig": { "alias": "mobileConfig"; "required": false; }; "mobileLandscape": { "alias": "mobileLandscape"; "required": false; }; "mobilePortrait": { "alias": "mobilePortrait"; "required": false; }; "disableFunction": { "alias": "disableFunction"; "required": false; }; "disableRangeStartFunction": { "alias": "disableRangeStartFunction"; "required": false; }; "disableRangeEndFunction": { "alias": "disableRangeEndFunction"; "required": false; }; }, { "isOpenChange": "isOpenChange"; "selectedDateChange": "selectedDateChange"; "selectedRangeDateChange": "selectedRangeDateChange"; "activeViewChange": "activeViewChange"; }, never, ["*"], true, never, false>;
 }

package/date-picker/date-picker.model.d.ts

@@ -0,0 +1,11 @@
+import { EventEmitter } from '@angular/core';
+import { Nullable } from '@fundamental-ngx/cdk/utils';
+import { DateRange } from '@fundamental-ngx/core/calendar';
+import { MobileMode } from '@fundamental-ngx/core/mobile-mode';
+export interface DatePicker<D> extends MobileMode {
+    selectedDate: Nullable<D>;
+    isOpenChange: EventEmitter<boolean>;
+    dialogApprove(): void;
+    dialogDismiss(value: D | DateRange<D>): void;
+    getSelectedDate(): D | DateRange<D>;
+}

package/date-picker/date-picker.module.d.ts

@@ -1,18 +1,8 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./date-picker.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@fundamental-ngx/core/icon";
-import * as i4 from "@fundamental-ngx/core/popover";
-import * as i5 from "@fundamental-ngx/i18n";
-import * as i6 from "@fundamental-ngx/core/calendar";
-import * as i7 from "@angular/forms";
-import * as i8 from "@fundamental-ngx/core/input-group";
-import * as i9 from "@fundamental-ngx/core/button";
-import * as i10 from "@fundamental-ngx/core/form";
-import * as i11 from "@fundamental-ngx/core/bar";
-import * as i12 from "@fundamental-ngx/core/content-density";
+import * as i2 from "./date-picker-mobile/date-picker-mobile.component";
 export declare class DatePickerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DatePickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DatePickerModule, [typeof i1.DatePickerComponent], [typeof i2.CommonModule, typeof i3.IconModule, typeof i4.PopoverModule, typeof i5.I18nModule, typeof i6.CalendarModule, typeof i7.FormsModule, typeof i8.InputGroupModule, typeof i9.ButtonModule, typeof i10.FormMessageModule, typeof i11.BarModule, typeof i12.ContentDensityModule], [typeof i1.DatePickerComponent, typeof i12.ContentDensityModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DatePickerModule, never, [typeof i1.DatePickerComponent, typeof i2.DatePickerMobileComponent], [typeof i1.DatePickerComponent, typeof i2.DatePickerMobileComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DatePickerModule>;
 }

package/date-picker/index.d.ts

@@ -1,2 +1,4 @@
 export * from './date-picker.module';
 export * from './date-picker.component';
+export * from './date-picker-mobile/date-picker-mobile.component';
+export * from './date-picker.model';

package/date-picker/tokens.d.ts

@@ -0,0 +1,5 @@
+import { InjectionToken } from '@angular/core';
+import { MobileModeConfig } from '@fundamental-ngx/core/mobile-mode';
+import { DatePicker } from './date-picker.model';
+export declare const FD_DATE_PICKER_COMPONENT: InjectionToken<DatePicker<any>>;
+export declare const FD_DATE_PICKER_MOBILE_CONFIG: InjectionToken<MobileModeConfig>;

package/datetime-picker/datetime-picker-mobile/datetime-picker-mobile.component.d.ts

@@ -0,0 +1,29 @@
+import { DestroyRef, ElementRef, TemplateRef } from '@angular/core';
+import { MobileModeBase, MobileModeConfigToken } from '@fundamental-ngx/core/mobile-mode';
+import { DateTimePicker } from '../datetime-picker.model';
+import { DialogService } from '@fundamental-ngx/core/dialog';
+import * as i0 from "@angular/core";
+export declare class DatetimePickerMobileComponent<D> extends MobileModeBase<DateTimePicker<D>> {
+    private readonly _destroyRef;
+    dateTimePickerConfig: {
+        pickerTemplate: TemplateRef<any>;
+    };
+    /** @hidden */
+    dialogTemplate: TemplateRef<any>;
+    /** @hidden */
+    private _selectedBackup;
+    /** @hidden */
+    constructor(elementRef: ElementRef, dialogService: DialogService, _destroyRef: DestroyRef, dateTimePickerConfig: {
+        pickerTemplate: TemplateRef<any>;
+    }, datePickerComponent: DateTimePicker<D>, mobileModes: MobileModeConfigToken[]);
+    /** @hidden */
+    handleApprove(): void;
+    /** @hidden */
+    handleDismiss(): void;
+    /** @hidden */
+    private _toggleDialog;
+    /** @hidden */
+    private _open;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatetimePickerMobileComponent<any>, [null, null, null, null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatetimePickerMobileComponent<any>, "fd-datetime-picker-mobile", never, {}, {}, never, never, true, never, false>;
+}