@fundamental-ngx/core 0.52.2-rc.4 → 0.52.2-rc.40

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

@@ -16,21 +16,6 @@ export declare class CalendarDayViewComponent<D> implements OnInit, OnChanges, F
     private calendarService;
     private _dateTimeFormats;
     _dateTimeAdapter: DatetimeAdapter<D>;
-    /**
-     * 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;
@@ -46,34 +31,61 @@ export declare class CalendarDayViewComponent<D> implements OnInit, OnChanges, F
     /** The currently selected FdDates model start and end in multiple range mode. */
     set selectedMultipleDateRanges(dateRanges: Array<DateRange<D>>);
     get selectedMultipleDateRanges(): Array<DateRange<D>>;
+    /** Event emitted always, when next month is selected, by focus */
+    readonly nextMonthSelect: EventEmitter<void>;
+    /** Event emitted always, when previous month is selected, by focus */
+    readonly previousMonthSelect: EventEmitter<void>;
+    /** Event thrown every time selected date in single mode is changed */
+    readonly selectedDateChange: EventEmitter<D>;
+    /** Event thrown every time the selected dates in multiple mode are changed. */
+    readonly selectedMultipleDatesChange: EventEmitter<Array<D>>;
+    /** Event thrown every time selected first or last date in range mode is changed */
+    readonly selectedRangeDateChange: EventEmitter<DateRange<D>>;
+    /** Event thrown every time the first or last date in multiple range mode is changed. */
+    readonly selectedMultipleDateRangesChange: EventEmitter<Array<DateRange<D>>>;
+    /**
+     * Function used to disable certain dates in the calendar.
+     * @param date date type
+     */
+    disableFunction: import("@angular/core").ModelSignal<DisableDateFunction<D>>;
+    /**
+     * Function used to disable certain dates in the calendar for the range start selection.
+     * @param date date representation
+     */
+    disableRangeStartFunction: import("@angular/core").ModelSignal<DisableDateFunction<D>>;
+    /**
+     * Function used to disable certain dates in the calendar for the range end selection.
+     * @param date date representation
+     */
+    disableRangeEndFunction: import("@angular/core").ModelSignal<DisableDateFunction<D>>;
     /** The day of the week the calendar should start on. 1 represents Sunday, 2 is Monday, 3 is Tuesday, and so on. */
-    startingDayOfWeek: DaysOfWeek;
+    startingDayOfWeek: import("@angular/core").ModelSignal<DaysOfWeek | undefined>;
     /** The type of calendar, 'single' for single date selection or 'range' for a range of dates. */
-    calType: CalendarType;
+    calType: import("@angular/core").ModelSignal<CalendarType>;
     /** Id of the calendar. If none is provided, one will be generated. */
-    id: string;
+    id: import("@angular/core").InputSignal<string | undefined>;
     /**
      * Whether user wants to mark day cells on hover.
      * Works only on range mode, when start date is selected.
      */
-    rangeHoverEffect: boolean;
+    rangeHoverEffect: import("@angular/core").ModelSignal<boolean>;
     /**
      * Whether user wants to mark sunday/saturday with `fd-calendar__item--weekend` class
      */
-    markWeekends: boolean;
+    markWeekends: import("@angular/core").InputSignal<boolean>;
     /**
      * Whether user wants to show week numbers next to days
      */
-    showWeekNumbers: boolean;
+    showWeekNumbers: import("@angular/core").InputSignal<boolean>;
     /**
      * Whether the user wants to select multiple days or multiple range dates.
      * If `displayWeekNumbers` is true, the user can click on the week number to mark the related row.
      * The user can click on week days to mark the related column.
      * Note: Clickable selection for week row or column does not work for range selections.
      */
-    allowMultipleSelection: boolean;
+    allowMultipleSelection: import("@angular/core").ModelSignal<boolean>;
     /** Function that allows to specify which function would be called, when focus wants to escape */
-    focusEscapeFunction: EscapeFocusFunction;
+    focusEscapeFunction: import("@angular/core").InputSignal<EscapeFocusFunction>;
     /**
      * Special days mark, it can be used by passing array of object with
      * Special day number, list 1-20 [class:`fd-calendar__item--legend-{{number}}`] is available there:
@@ -81,19 +93,7 @@ export declare class CalendarDayViewComponent<D> implements OnInit, OnChanges, F
      * 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.
      */
-    specialDaysRules: SpecialDayRule<D>[];
-    /** Event emitted always, when next month is selected, by focus */
-    readonly nextMonthSelect: EventEmitter<void>;
-    /** Event emitted always, when previous month is selected, by focus */
-    readonly previousMonthSelect: EventEmitter<void>;
-    /** Event thrown every time selected date in single mode is changed */
-    readonly selectedDateChange: EventEmitter<D>;
-    /** Event thrown every time the selected dates in multiple mode are changed. */
-    readonly selectedMultipleDatesChange: EventEmitter<Array<D>>;
-    /** Event thrown every time selected first or last date in range mode is changed */
-    readonly selectedRangeDateChange: EventEmitter<DateRange<D>>;
-    /** Event thrown every time the first or last date in multiple range mode is changed. */
-    readonly selectedMultipleDateRangesChange: EventEmitter<Array<DateRange<D>>>;
+    specialDaysRules: import("@angular/core").InputSignal<SpecialDayRule<D>[]>;
     /**
      * @hidden
      * Actual day grid with previous/current/next month days
@@ -159,7 +159,7 @@ export declare class CalendarDayViewComponent<D> implements OnInit, OnChanges, F
      * @param day The calendar day to be selected.
      * @param event Optional mouse event for handling event propagation.
      */
-    selectDate(day: CalendarDay<D>, event?: MouseEvent): void;
+    selectDate(day: CalendarDay<D>, event?: MouseEvent | KeyboardEvent): void;
     /**
      * Toggles the selection of a week on the calendar.
      * If the provided week is already fully selected, it will deselect it.
@@ -487,5 +487,5 @@ export declare class CalendarDayViewComponent<D> implements OnInit, OnChanges, F
      */
     private _handleMultiRangeHover;
     static ɵfac: i0.ɵɵFactoryDeclaration<CalendarDayViewComponent<any>, never>;
-    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; }; "selectedMultipleDates": { "alias": "selectedMultipleDates"; "required": false; }; "selectedRangeDate": { "alias": "selectedRangeDate"; "required": false; }; "selectedMultipleDateRanges": { "alias": "selectedMultipleDateRanges"; "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; }; "allowMultipleSelection": { "alias": "allowMultipleSelection"; "required": false; }; "focusEscapeFunction": { "alias": "focusEscapeFunction"; "required": false; }; "specialDaysRules": { "alias": "specialDaysRules"; "required": false; }; }, { "nextMonthSelect": "nextMonthSelect"; "previousMonthSelect": "previousMonthSelect"; "selectedDateChange": "selectedDateChange"; "selectedMultipleDatesChange": "selectedMultipleDatesChange"; "selectedRangeDateChange": "selectedRangeDateChange"; "selectedMultipleDateRangesChange": "selectedMultipleDateRangesChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarDayViewComponent<any>, "fd-calendar-day-view", never, { "currentlyDisplayed": { "alias": "currentlyDisplayed"; "required": false; }; "selectedDate": { "alias": "selectedDate"; "required": false; }; "selectedMultipleDates": { "alias": "selectedMultipleDates"; "required": false; }; "selectedRangeDate": { "alias": "selectedRangeDate"; "required": false; }; "selectedMultipleDateRanges": { "alias": "selectedMultipleDateRanges"; "required": false; }; "disableFunction": { "alias": "disableFunction"; "required": false; "isSignal": true; }; "disableRangeStartFunction": { "alias": "disableRangeStartFunction"; "required": false; "isSignal": true; }; "disableRangeEndFunction": { "alias": "disableRangeEndFunction"; "required": false; "isSignal": true; }; "startingDayOfWeek": { "alias": "startingDayOfWeek"; "required": false; "isSignal": true; }; "calType": { "alias": "calType"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "rangeHoverEffect": { "alias": "rangeHoverEffect"; "required": false; "isSignal": true; }; "markWeekends": { "alias": "markWeekends"; "required": false; "isSignal": true; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; "isSignal": true; }; "allowMultipleSelection": { "alias": "allowMultipleSelection"; "required": false; "isSignal": true; }; "focusEscapeFunction": { "alias": "focusEscapeFunction"; "required": false; "isSignal": true; }; "specialDaysRules": { "alias": "specialDaysRules"; "required": false; "isSignal": true; }; }, { "nextMonthSelect": "nextMonthSelect"; "previousMonthSelect": "previousMonthSelect"; "selectedDateChange": "selectedDateChange"; "selectedMultipleDatesChange": "selectedMultipleDatesChange"; "selectedRangeDateChange": "selectedRangeDateChange"; "selectedMultipleDateRangesChange": "selectedMultipleDateRangesChange"; "disableFunction": "disableFunctionChange"; "disableRangeStartFunction": "disableRangeStartFunctionChange"; "disableRangeEndFunction": "disableRangeEndFunctionChange"; "startingDayOfWeek": "startingDayOfWeekChange"; "calType": "calTypeChange"; "rangeHoverEffect": "rangeHoverEffectChange"; "allowMultipleSelection": "allowMultipleSelectionChange"; }, never, never, true, never>;
 }

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

@@ -3,6 +3,7 @@ import { DateTimeFormats, DatetimeAdapter } from '@fundamental-ngx/core/datetime
 import { CalendarService } from '../../calendar.service';
 import { CalendarMonth } from '../../models/calendar-month';
 import { EscapeFocusFunction, FocusableCalendarView } from '../../models/common';
+import { DateRange } from '../../models/date-range';
 import * as i0 from "@angular/core";
 /** Component representing the month view of the calendar. */
 export declare class CalendarMonthViewComponent<D> implements OnInit, OnChanges, FocusableCalendarView {
@@ -19,13 +20,22 @@ export declare class CalendarMonthViewComponent<D> implements OnInit, OnChanges,
     focusEscapeFunction: EscapeFocusFunction;
     /** A year the month view is referring to */
     year: number;
+    /** Whether to pick the date range in month year format without picking days */
+    isDateRangeMonthYearFormat: boolean;
     /** An event fired when a new month is selected */
     readonly monthClicked: EventEmitter<number>;
+    /** Event thrown every time selected first or last date in range mode is changed */
+    readonly selectedRangeDateChange: EventEmitter<DateRange<D>>;
+    /**
+     * Whether user wants to mark month cells on hover.
+     * Works only on range mode, when start month is selected.
+     */
+    rangeHoverEffect: boolean;
     /**
      * @hidden
      * Month grid table
      */
-    _calendarMonthListGrid: CalendarMonth[][];
+    _calendarMonthListGrid: CalendarMonth<D>[][];
     /**
      * @hidden
      * A number offset used to achieve the 1-12 representation of the calendar
@@ -42,6 +52,9 @@ export declare class CalendarMonthViewComponent<D> implements OnInit, OnChanges,
     /** @hidden */
     private _initiated;
     /** @hidden */
+    private _selectedRangeDate;
+    private _isOnRangePick;
+    /** @hidden */
     constructor(_eRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _calendarService: CalendarService, _dateTimeFormats: DateTimeFormats, _dateTimeAdapter: DatetimeAdapter<D>);
     /** @hidden */
     ngOnInit(): void;
@@ -63,13 +76,17 @@ export declare class CalendarMonthViewComponent<D> implements OnInit, OnChanges,
      * Selected date label ID
      */
     get _selectedDateLabelId(): string;
-    /** Method for handling the mouse click event when a month is selected  */
-    selectMonth(monthCell: CalendarMonth, event?: MouseEvent): void;
+    /** The currently selected FdDates model start and end in range mode. */
+    set selectedRangeDate(dateRange: DateRange<D>);
+    get selectedRangeDate(): DateRange<D>;
     /**
-     * Set focus on month cell.
-     * It can be a selected cell, current month cell or first cell in the list
+     * @hidden
+     *  Amount of selected months
+     *  0, when there is no month selected, or start month is invalid,
+     *  1, when there is only valid start month, or end month is same as start month,
+     *  2, when both dates are valid
      */
-    setFocusOnCell(): void;
+    get _selectCounter(): number;
     /**
      * @hidden
      * Method for handling the keyboard events (a11y)
@@ -100,6 +117,53 @@ export declare class CalendarMonthViewComponent<D> implements OnInit, OnChanges,
      * Method that check if this is selected month
      */
     _isSelected(id: number): boolean;
+    /** Method for handling the mouse click event when a month is selected  */
+    selectMonth(monthCell: CalendarMonth<D>, event?: MouseEvent | KeyboardEvent): void;
+    /**
+     * Set focus on month cell.
+     * It can be a selected cell, current month cell or first cell in the list
+     */
+    setFocusOnCell(): void;
+    /**
+     * @hidden
+     * Handles hover effect for range selection mode.
+     * @param month The calendar month that is hovered.
+     */
+    _handleRangeHover(month: CalendarMonth<D>): void;
+    /**
+     * @hidden
+     * Handles the hover effect for range selection.
+     * Toggles the hover effect based on the selection state and event.
+     * @param event Optional mouse event for handling hover effect.
+     */
+    private _handleRangeHoverEffect;
+    /**
+     * @hidden
+     * Selects or updates the range of dates in range mode.
+     * Handles the start and end dates and updates the selected range.
+     * @param month The calendar month to be selected or updated in the range.
+     */
+    private _selectRangeDate;
+    /**
+     * @hidden
+     * Orders the start and end dates for the range selection.
+     * Ensures the start date is before or equal to the end date.
+     * @param date1 The first date.
+     * @param date2 The second date.
+     * @returns An object containing the ordered start and end dates.
+     */
+    private _getOrderedRange;
+    /**
+     * @hidden
+     * Change properties of range months, this method is called, to not rebuild whole grid from scratch,
+     * it just changes properties of newly selected/unselected months.
+     */
+    private _changeSelectedRangeMonths;
+    /**
+     * @hidden
+     * Check if dates are equal
+     */
+    private _isSameDate;
     /**
      * @hidden
      * Method that create month grid with required meta data
@@ -118,5 +182,5 @@ export declare class CalendarMonthViewComponent<D> implements OnInit, OnChanges,
     /** @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, true, 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; }; "isDateRangeMonthYearFormat": { "alias": "isDateRangeMonthYearFormat"; "required": false; }; "rangeHoverEffect": { "alias": "rangeHoverEffect"; "required": false; }; "selectedRangeDate": { "alias": "selectedRangeDate"; "required": false; }; }, { "monthClicked": "monthClicked"; "selectedRangeDateChange": "selectedRangeDateChange"; }, never, never, true, never>;
 }

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

@@ -3,6 +3,7 @@ import { DateTimeFormats, DatetimeAdapter } from '@fundamental-ngx/core/datetime
 import { CalendarService } from '../../calendar.service';
 import { CalendarYear, CalendarYearGrid } from '../../models/calendar-year-grid';
 import { EscapeFocusFunction, FocusableCalendarView } from '../../models/common';
+import { DateRange } from '../../models/date-range';
 import * as i0 from "@angular/core";
 /** Component representing the YearView of the Calendar Component. */
 export declare class CalendarYearViewComponent<D> implements OnInit, OnChanges, FocusableCalendarView {
@@ -21,8 +22,17 @@ export declare class CalendarYearViewComponent<D> implements OnInit, OnChanges,
      * Object to customize year grid
      */
     yearViewGrid: CalendarYearGrid;
+    /** Whether the date range is year format only excluding month and day */
+    isDateRangeYearFormat: boolean;
+    /**
+     * Whether user wants to mark year cells on hover.
+     * Works only on range mode, when start year is selected.
+     */
+    rangeHoverEffect: boolean;
     /** Event fired when a year is selected. */
     readonly yearClicked: EventEmitter<number>;
+    /** Event thrown every time selected first or last date in range mode is changed */
+    readonly selectedRangeDateChange: EventEmitter<DateRange<D>>;
     /**
      * @hidden
      * This variable is used to define which year from calendarYearList should be focusable by tab key
@@ -32,7 +42,7 @@ export declare class CalendarYearViewComponent<D> implements OnInit, OnChanges,
      * @hidden
      * Parameter that stores the dozen of years that are currently being displayed.
      */
-    _calendarYearListGrid: CalendarYear[][];
+    _calendarYearListGrid: CalendarYear<D>[][];
     /**
      * @hidden
      * Parameter storing the year of the present day.
@@ -62,17 +72,32 @@ export declare class CalendarYearViewComponent<D> implements OnInit, OnChanges,
     /** @hidden */
     private _initiated;
     /** @hidden */
+    private _selectedRangeDate;
+    /** @hidden */
+    private _isOnRangePick;
+    /** @hidden */
     constructor(_eRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _calendarService: CalendarService, _dateTimeAdapter: DatetimeAdapter<D>, _dateTimeFormats: DateTimeFormats);
     /** @hidden */
     ngOnInit(): void;
     /** @hidden */
     ngOnChanges(changes: SimpleChanges): void;
+    /** The currently selected FdDates model start and end in range mode. */
+    set selectedRangeDate(dateRange: DateRange<D>);
+    get selectedRangeDate(): DateRange<D>;
+    /**
+     * @hidden
+     *  Amount of selected years
+     *  0, when there is no year selected, or start year is invalid,
+     *  1, when there is only valid start year, or end year is same as start year,
+     *  2, when both dates are valid
+     */
+    get _selectCounter(): number;
     /** Method used to load the previous {{col * row}} years to be displayed. */
     loadNextYearList(): void;
     /** Method used to load the next {{col * row}} years to be displayed. */
     loadPreviousYearList(): void;
     /** Method that sends the year to the parent component when it is clicked. */
-    selectYear(selectedYear: CalendarYear, event?: MouseEvent): void;
+    selectYear(selectedYear: CalendarYear<D>, event?: MouseEvent | KeyboardEvent): void;
     /**
      * Set focus on month cell.
      * It can be a selected cell, current month cell or first cell in the list
@@ -99,6 +124,12 @@ export declare class CalendarYearViewComponent<D> implements OnInit, OnChanges,
      * @param index
      */
     _getId(index: number): string;
+    /**
+     * @hidden
+     * Handles hover effect for range selection mode.
+     * @param year The calendar year that is hovered.
+     */
+    _handleRangeHover(year: CalendarYear<D>): void;
     /**
      * @hidden
      * Method that returns active cell, which means:
@@ -109,6 +140,40 @@ export declare class CalendarYearViewComponent<D> implements OnInit, OnChanges,
     private _getActiveYear;
     /** @hidden */
     private _constructYearGrid;
+    /**
+     * @hidden
+     * Handles the hover effect for range selection.
+     * Toggles the hover effect based on the selection state and event.
+     * @param event Optional mouse event for handling hover effect.
+     */
+    private _handleRangeHoverEffect;
+    /**
+     * @hidden
+     * Change properties of range years, this method is called, to not rebuild whole grid from scratch,
+     * it just changes properties of newly selected/unselected years.
+     */
+    private _changeSelectedRangeYears;
+    /**
+     * @hidden
+     * Check if dates are equal
+     */
+    private _isSameDate;
+    /**
+     * @hidden
+     * Selects or updates the range of years in range mode.
+     * Handles the start and end years and updates the selected range.
+     * @param year The calendar year to be selected or updated in the range.
+     */
+    private _selectRangeDate;
+    /**
+     * @hidden
+     * Orders the start and end dates for the range selection.
+     * Ensures the start date is before or equal to the end date.
+     * @param date1 The first date.
+     * @param date2 The second date.
+     * @returns An object containing the ordered start and end dates.
+     */
+    private _getOrderedRange;
     /**
      * @hidden
      * Returns year name as a string.
@@ -142,5 +207,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, true, 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; }; "isDateRangeYearFormat": { "alias": "isDateRangeYearFormat"; "required": false; }; "rangeHoverEffect": { "alias": "rangeHoverEffect"; "required": false; }; "selectedRangeDate": { "alias": "selectedRangeDate"; "required": false; }; }, { "yearClicked": "yearClicked"; "selectedRangeDateChange": "selectedRangeDateChange"; }, never, never, true, never>;
 }

package/calendar/calendar.component.d.ts

@@ -94,6 +94,13 @@ export declare class CalendarComponent<D> implements OnInit, OnChanges, ControlV
      * Works only on range mode, when start date is selected on Day View.
      */
     rangeHoverEffect: boolean;
+    /** Whether to pick the date range in month or year or days format
+     * Day format will have a month and year including day
+     * Month format will have year including month
+     * Year format will have just year
+     * Values can be 'month' for Month format, 'year' for Year format or nothing for day format
+     */
+    dateRangeFormat: string;
     /** Event thrown every time active view is changed */
     readonly activeViewChange: EventEmitter<FdCalendarView>;
     /** Event thrown every time selected date in single mode is changed */
@@ -267,6 +274,10 @@ export declare class CalendarComponent<D> implements OnInit, OnChanges, ControlV
     onYearsRangeViewSelected(): void;
     /** Method that provides information if model selected date/dates have properly types and are valid */
     isModelValid(): boolean;
+    /** Whether the date range format is month */
+    isDateRangeMonthFormat(): boolean;
+    /** Whether the date range format is year */
+    isDateRangeYearFormat(): boolean;
     /** @hidden */
     private _listenToLocaleChanges;
     /**
@@ -284,5 +295,5 @@ export declare class CalendarComponent<D> implements OnInit, OnChanges, ControlV
     /** @hidden */
     private _isNavigationButtonDisabled;
     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; }; "selectedMultipleDates": { "alias": "selectedMultipleDates"; "required": false; }; "selectedRangeDate": { "alias": "selectedRangeDate"; "required": false; }; "selectedMultipleDateRanges": { "alias": "selectedMultipleDateRanges"; "required": false; }; "markWeekends": { "alias": "markWeekends"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "allowMultipleSelection": { "alias": "allowMultipleSelection"; "required": false; }; "mobileLandscape": { "alias": "mobileLandscape"; "required": false; }; "mobilePortrait": { "alias": "mobilePortrait"; "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"; "selectedMultipleDatesChange": "selectedMultipleDatesChange"; "selectedRangeDateChange": "selectedRangeDateChange"; "selectedMultipleDateRangesChange": "selectedMultipleDateRangesChange"; "isValidDateChange": "isValidDateChange"; "closeCalendar": "closeCalendar"; "closeClicked": "closeClicked"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarComponent<any>, "fd-calendar", never, { "selectedDate": { "alias": "selectedDate"; "required": false; }; "selectedMultipleDates": { "alias": "selectedMultipleDates"; "required": false; }; "selectedRangeDate": { "alias": "selectedRangeDate"; "required": false; }; "selectedMultipleDateRanges": { "alias": "selectedMultipleDateRanges"; "required": false; }; "markWeekends": { "alias": "markWeekends"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "allowMultipleSelection": { "alias": "allowMultipleSelection"; "required": false; }; "mobileLandscape": { "alias": "mobileLandscape"; "required": false; }; "mobilePortrait": { "alias": "mobilePortrait"; "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; }; "dateRangeFormat": { "alias": "dateRangeFormat"; "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"; "selectedMultipleDatesChange": "selectedMultipleDatesChange"; "selectedRangeDateChange": "selectedRangeDateChange"; "selectedMultipleDateRangesChange": "selectedMultipleDateRangesChange"; "isValidDateChange": "isValidDateChange"; "closeCalendar": "closeCalendar"; "closeClicked": "closeClicked"; }, never, never, true, never>;
 }

package/calendar/calendar.service.d.ts

@@ -9,7 +9,10 @@ export declare class CalendarService {
     /** Column amount */
     colAmount: number;
     /** Event thrown, when the element is selected by space or enter keys */
-    onKeySelect: Subject<number>;
+    onKeySelect: Subject<{
+        index: number;
+        event: KeyboardEvent;
+    }>;
     /** Event thrown, when the focus goes after list of elements */
     onListEndApproach: Subject<number>;
     /** Event thrown, when the focus goes before list of elements */

package/calendar/models/calendar-month.d.ts

@@ -1,6 +1,11 @@
 import { BaseCalendarCell } from './common';
-export interface CalendarMonth extends BaseCalendarCell {
+export interface CalendarMonth<D> extends BaseCalendarCell {
     /** 1 - 12 */
     month: number;
     index: number;
+    date: D;
+    selectedFirst?: boolean;
+    selectedLast?: boolean;
+    selectedRange?: boolean;
+    hoverRange?: boolean;
 }

package/calendar/models/calendar-year-grid.d.ts

@@ -9,7 +9,12 @@ export interface CalendarYearGrid {
      */
     yearMapping?: (year: number) => string;
 }
-export interface CalendarYear extends BaseCalendarCell {
+export interface CalendarYear<D> extends BaseCalendarCell {
     year: number;
     index: number;
+    date: D;
+    selectedFirst?: boolean;
+    selectedLast?: boolean;
+    selectedRange?: boolean;
+    hoverRange?: boolean;
 }

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

@@ -155,6 +155,11 @@ export declare class DatePickerComponent<D> implements DatePicker<D>, OnInit, On
     mobileLandscape: boolean;
     /** Whether calendar is used inside mobile in portrait mode */
     mobilePortrait: boolean;
+    /** Whether to select and display the date range in MM/YYYY or YYYY format
+     * For month and year format value is 'month'
+     * For year format value is 'year'
+     */
+    dateRangeFormat: string;
     /** Event emitted when the state of the isOpen property changes. */
     readonly isOpenChange: EventEmitter<boolean>;
     /** Event thrown every time selected date in single mode is changed */
@@ -407,6 +412,6 @@ export declare class DatePickerComponent<D> implements DatePicker<D>, OnInit, On
     /** Helper method to compare two arrays of date ranges */
     private _areDateRangesEqual;
     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; }; "customDateTimeFormat": { "alias": "customDateTimeFormat"; "required": false; }; "message": { "alias": "message"; "required": false; }; "messageTriggers": { "alias": "messageTriggers"; "required": false; }; "selectedDate": { "alias": "selectedDate"; "required": false; }; "selectedMultipleDates": { "alias": "selectedMultipleDates"; "required": false; }; "selectedRangeDate": { "alias": "selectedRangeDate"; "required": false; }; "selectedMultipleDateRanges": { "alias": "selectedMultipleDateRanges"; "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; }; "allowMultipleSelection": { "alias": "allowMultipleSelection"; "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"; "selectedMultipleDatesChange": "selectedMultipleDatesChange"; "selectedRangeDateChange": "selectedRangeDateChange"; "selectedMultipleDateRangesChange": "selectedMultipleDateRangesChange"; "activeViewChange": "activeViewChange"; }, never, ["*"], true, never>;
+    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; }; "customDateTimeFormat": { "alias": "customDateTimeFormat"; "required": false; }; "message": { "alias": "message"; "required": false; }; "messageTriggers": { "alias": "messageTriggers"; "required": false; }; "selectedDate": { "alias": "selectedDate"; "required": false; }; "selectedMultipleDates": { "alias": "selectedMultipleDates"; "required": false; }; "selectedRangeDate": { "alias": "selectedRangeDate"; "required": false; }; "selectedMultipleDateRanges": { "alias": "selectedMultipleDateRanges"; "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; }; "allowMultipleSelection": { "alias": "allowMultipleSelection"; "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; }; "dateRangeFormat": { "alias": "dateRangeFormat"; "required": false; }; "disableFunction": { "alias": "disableFunction"; "required": false; }; "disableRangeStartFunction": { "alias": "disableRangeStartFunction"; "required": false; }; "disableRangeEndFunction": { "alias": "disableRangeEndFunction"; "required": false; }; }, { "isOpenChange": "isOpenChange"; "selectedDateChange": "selectedDateChange"; "selectedMultipleDatesChange": "selectedMultipleDatesChange"; "selectedRangeDateChange": "selectedRangeDateChange"; "selectedMultipleDateRangesChange": "selectedMultipleDateRangesChange"; "activeViewChange": "activeViewChange"; }, never, ["*"], true, never>;
     static ngAcceptInputType_processInputOnBlur: unknown;
 }

package/datetime/datetime-format.pipes.d.ts

@@ -1,4 +1,6 @@
 import { PipeTransform } from '@angular/core';
+import { FdLanguage } from '@fundamental-ngx/i18n';
+import { Observable } from 'rxjs';
 import { DatetimeAdapter } from './datetime-adapter';
 import { DateTimeFormats } from './datetime-formats';
 import * as i0 from "@angular/core";
@@ -31,3 +33,26 @@ export declare class DateFromNowPipe<D> implements PipeTransform {
     static ɵfac: i0.ɵɵFactoryDeclaration<DateFromNowPipe<any>, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<DateFromNowPipe<any>, "dateFromNow", true>;
 }
+export declare class DayPeriodFormatPipe<D> implements PipeTransform {
+    private _dateTimeAdapter;
+    private _dateTimeFormats;
+    /** @hidden */
+    constructor(_dateTimeAdapter: DatetimeAdapter<D>, _dateTimeFormats: DateTimeFormats);
+    /** Format date object for day period */
+    transform(date: D, customFormat?: any, noDateMessage?: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DayPeriodFormatPipe<any>, [null, { optional: true; }]>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<DayPeriodFormatPipe<any>, "dayPeriodFormat", true>;
+}
+export declare class TranslateDayPeriodPipe implements PipeTransform {
+    private _language$;
+    /** @hidden */
+    private readonly _translationResolver;
+    /** Signal that will hold the current language */
+    private readonly _currentLanguageSignal;
+    /** @hidden */
+    constructor(_language$: Observable<FdLanguage>);
+    /** Format date object for day period */
+    transform(value: string | null): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TranslateDayPeriodPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<TranslateDayPeriodPipe, "translateDayPeriod", true>;
+}

package/datetime/datetime-utils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Converts a given time string to a desired format.
+ *
+ * @param {string} inputStr - The input time string to be converted.
+ * @returns {string} - The converted time string in the desired format.
+ */
+export declare function convertToDesiredFormat(inputStr: string): string;

package/datetime/fd-datetime-adapter.d.ts

@@ -2,6 +2,9 @@ import { Platform } from '@angular/cdk/platform';
 import { DatetimeAdapter } from './datetime-adapter';
 import { FdDate } from './fd-date';
 import * as i0 from "@angular/core";
+type CustomDateTimeFormatOptions = Omit<Intl.DateTimeFormatOptions, 'dayPeriod'> & {
+    dayPeriod?: boolean;
+};
 /**
  * DatetimeAdapter implementation based on FdDate.
  *
@@ -76,7 +79,7 @@ export declare class FdDatetimeAdapter extends DatetimeAdapter<FdDate> {
     /** Parse any value to date object */
     parse(value: any, parseFormat?: Intl.DateTimeFormatOptions): FdDate | null;
     /** Format date object to string */
-    format(date: FdDate, displayFormat: Intl.DateTimeFormatOptions): string;
+    format(date: FdDate, displayFormat: CustomDateTimeFormatOptions): string;
     /** Add years to a date */
     addCalendarYears(date: FdDate, years: number): FdDate;
     /** Add months to a date */
@@ -96,13 +99,21 @@ export declare class FdDatetimeAdapter extends DatetimeAdapter<FdDate> {
     /** Format date object to ISO8601 string */
     toIso8601(fdDate: FdDate): string;
     /** Check if a time format includes a day period */
-    isTimeFormatIncludesDayPeriod(displayFormat: Intl.DateTimeFormatOptions): boolean;
+    isTimeFormatIncludesDayPeriod(displayFormat: CustomDateTimeFormatOptions): boolean;
     /** Check if a time format includes hours */
     isTimeFormatIncludesHours(displayFormat: Intl.DateTimeFormatOptions): boolean;
     /** Check if a time format includes minutes */
     isTimeFormatIncludesMinutes(displayFormat: Intl.DateTimeFormatOptions): boolean;
     /** Check if a time format includes seconds */
     isTimeFormatIncludesSeconds(displayFormat: Intl.DateTimeFormatOptions): boolean;
+    /** Format with custom pattern including day period names */
+    private _formatWithDayPeriod;
+    /** Insert day period into the formatted string */
+    private _insertDayPeriod;
+    /** Get day period name based on the hour */
+    private _getDayPeriodName;
+    /** Format date using Intl.DateTimeFormat */
+    private _formatWithIntl;
     /**
      * @hidden
      * Strip out unicode LTR and RTL characters. Edge and IE insert these into formatted dates while
@@ -150,3 +161,4 @@ export declare class FdDatetimeAdapter extends DatetimeAdapter<FdDate> {
     static ɵfac: i0.ɵɵFactoryDeclaration<FdDatetimeAdapter, [{ optional: true; }, null]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<FdDatetimeAdapter>;
 }
+export {};

package/datetime/fd-datetime-pipes.module.d.ts

@@ -6,6 +6,6 @@ import * as i1 from "./datetime-format.pipes";
  */
 export declare class FdDatetimePipesModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<FdDatetimePipesModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FdDatetimePipesModule, never, [typeof i1.DateFormatPipe, typeof i1.DateTimeFormatPipe, typeof i1.DateFromNowPipe], [typeof i1.DateFormatPipe, typeof i1.DateTimeFormatPipe, typeof i1.DateFromNowPipe]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FdDatetimePipesModule, never, [typeof i1.DateFormatPipe, typeof i1.DateTimeFormatPipe, typeof i1.DateFromNowPipe, typeof i1.DayPeriodFormatPipe, typeof i1.TranslateDayPeriodPipe], [typeof i1.DateFormatPipe, typeof i1.DateTimeFormatPipe, typeof i1.DateFromNowPipe, typeof i1.DayPeriodFormatPipe, typeof i1.TranslateDayPeriodPipe]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FdDatetimePipesModule>;
 }

package/datetime/index.d.ts

@@ -1,6 +1,7 @@
 export * from './datetime-adapter';
 export * from './datetime-format.pipes';
 export * from './datetime-formats';
+export * from './datetime-utils';
 export * from './fd-date';
 export * from './fd-date-formats';
 export * from './fd-date.utils';