@fundamental-ngx/core 0.61.2-rc.9 → 0.61.3

package/fesm2022/fundamental-ngx-core-calendar.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { Attribute, Directive, inject, Injectable, EventEmitter, DestroyRef, ElementRef, ViewChild, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, signal, input, computed, Inject, model, effect, forwardRef, HostListener, HostBinding, Optional, NgModule } from '@angular/core';
-import { resolveTranslationSignal, FdTranslatePipe, FD_LANGUAGE_ENGLISH, FD_LANGUAGE_SIGNAL } from '@fundamental-ngx/i18n';
+import { resolveTranslationSignal, FdTranslatePipe, FD_LANGUAGE_ENGLISH, FD_LANGUAGE } from '@fundamental-ngx/i18n';
 import * as i2 from '@fundamental-ngx/core/datetime';
 import { DATE_TIME_FORMATS } from '@fundamental-ngx/core/datetime';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ButtonComponent } from '@fundamental-ngx/core/button';
-import { Subject, Subscription } from 'rxjs';
+import { Subject, switchMap, startWith, map, Subscription } from 'rxjs';
 import { RtlService, FocusableListDirective, FocusableItemDirective } from '@fundamental-ngx/cdk/utils';
 import { NgClass } from '@angular/common';
 import { shallowEqual } from 'fast-equals';
@@ -393,13 +393,13 @@ class CalendarHeaderComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CalendarHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CalendarService }, { token: i2.DatetimeAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CalendarHeaderComponent, isStandalone: true, selector: "fd-calendar-header", inputs: { activeView: "activeView", currentlyDisplayed: "currentlyDisplayed", previousButtonDisabled: "previousButtonDisabled", nextButtonDisabled: "nextButtonDisabled", calendarYearGrid: "calendarYearGrid", id: "id", mobileLandscape: "mobileLandscape" }, outputs: { activeViewChange: "activeViewChange", previousClicked: "previousClicked", nextClicked: "nextClicked" }, host: { properties: { "attr.id": "viewId" } }, viewQueries: [{ propertyName: "_prevButtonComponent", first: true, predicate: ["prevButton"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<header class=\"fd-calendar__navigation\" [class.fd-calendar__navigation--main]=\"mobileLandscape\">\n    <div class=\"fd-calendar__action fd-calendar__action--arrow-left\">\n        <button\n            #prevButton\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"slim-arrow-left\"\n            [attr.id]=\"_prevButtonId\"\n            [disabled]=\"previousButtonDisabled\"\n            [attr.title]=\"(previousAriaLabel | fdTranslate)()\"\n            [ariaLabel]=\"(previousAriaLabel | fdTranslate)()\"\n            type=\"button\"\n            (click)=\"previousClicked.emit()\"\n        ></button>\n    </div>\n    @if (isOnDayView || isOnMonthView) {\n        @if (!isOnMonthView) {\n            <div class=\"fd-calendar__action\">\n                <!-- Select month button -->\n                <button\n                    fd-button\n                    type=\"button\"\n                    fdType=\"transparent\"\n                    [attr.aria-labelledby]=\"_monthButtonLabelId + ' ' + _selectMonthButtonAriaLabelId\"\n                    [attr.data-fd-calendar-month]=\"currentlyDisplayed.month\"\n                    (click)=\"_processViewChange('month', $event)\"\n                >\n                    <span [attr.id]=\"_monthButtonLabelId\">{{ selectMonthLabel }}</span>\n                </button>\n            </div>\n        }\n        <div class=\"fd-calendar__action\">\n            <!-- Select year button -->\n            <button\n                fd-button\n                type=\"button\"\n                fdType=\"transparent\"\n                [attr.aria-labelledby]=\"_yearButtonLabelId + ' ' + _selectYearButtonAriaLabelId\"\n                [attr.data-fd-calendar-year]=\"currentlyDisplayed.year\"\n                (click)=\"_processViewChange('year', $event)\"\n            >\n                <span [attr.id]=\"_yearButtonLabelId\">{{ selectYearLabel }}</span>\n            </button>\n        </div>\n    }\n    @if (isOnAggregatedYearsView || isOnYearView) {\n        <div class=\"fd-calendar__action\" aria-live=\"polite\">\n            <button\n                fd-button\n                fdType=\"transparent\"\n                [attr.aria-labelledby]=\"_yearsRangeButtonLabelId + ' ' + _selectYearsRangeButtonAriaLabelId\"\n                (click)=\"_processViewChange('aggregatedYear', $event)\"\n                type=\"button\"\n            >\n                <span [attr.id]=\"_yearsRangeButtonLabelId\">{{ selectAggregatedYearLabel }}</span>\n            </button>\n        </div>\n    }\n    <div class=\"fd-calendar__action fd-calendar__action--arrow-right\">\n        <button\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"slim-arrow-right\"\n            [attr.id]=\"_nextButtonId\"\n            [disabled]=\"nextButtonDisabled\"\n            [attr.title]=\"(nextAriaLabel | fdTranslate)()\"\n            [ariaLabel]=\"(nextAriaLabel | fdTranslate)()\"\n            (click)=\"nextClicked.emit()\"\n            type=\"button\"\n        ></button>\n    </div>\n</header>\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n    <div [attr.id]=\"_selectMonthButtonAriaLabelId\">{{ (selectMonthAriaLabel | fdTranslate)() }}</div>\n    <div [attr.id]=\"_selectYearButtonAriaLabelId\">{{ ('coreCalendar.yearSelectionLabel' | fdTranslate)() }}</div>\n    <div [attr.id]=\"_selectYearsRangeButtonAriaLabelId\">{{ (selectAggregatedYearAriaLabel | fdTranslate)() }}</div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CalendarHeaderComponent, isStandalone: true, selector: "fd-calendar-header", inputs: { activeView: "activeView", currentlyDisplayed: "currentlyDisplayed", previousButtonDisabled: "previousButtonDisabled", nextButtonDisabled: "nextButtonDisabled", calendarYearGrid: "calendarYearGrid", id: "id", mobileLandscape: "mobileLandscape" }, outputs: { activeViewChange: "activeViewChange", previousClicked: "previousClicked", nextClicked: "nextClicked" }, host: { properties: { "attr.id": "viewId" } }, viewQueries: [{ propertyName: "_prevButtonComponent", first: true, predicate: ["prevButton"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<header class=\"fd-calendar__navigation\" [class.fd-calendar__navigation--main]=\"mobileLandscape\">\n    <div class=\"fd-calendar__action fd-calendar__action--arrow-left\">\n        <button\n            #prevButton\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"slim-arrow-left\"\n            [attr.id]=\"_prevButtonId\"\n            [disabled]=\"previousButtonDisabled\"\n            [attr.title]=\"previousAriaLabel | fdTranslate\"\n            [ariaLabel]=\"previousAriaLabel | fdTranslate\"\n            type=\"button\"\n            (click)=\"previousClicked.emit()\"\n        ></button>\n    </div>\n    @if (isOnDayView || isOnMonthView) {\n        @if (!isOnMonthView) {\n            <div class=\"fd-calendar__action\">\n                <!-- Select month button -->\n                <button\n                    fd-button\n                    type=\"button\"\n                    fdType=\"transparent\"\n                    [attr.aria-labelledby]=\"_monthButtonLabelId + ' ' + _selectMonthButtonAriaLabelId\"\n                    [attr.data-fd-calendar-month]=\"currentlyDisplayed.month\"\n                    (click)=\"_processViewChange('month', $event)\"\n                >\n                    <span [attr.id]=\"_monthButtonLabelId\">{{ selectMonthLabel }}</span>\n                </button>\n            </div>\n        }\n        <div class=\"fd-calendar__action\">\n            <!-- Select year button -->\n            <button\n                fd-button\n                type=\"button\"\n                fdType=\"transparent\"\n                [attr.aria-labelledby]=\"_yearButtonLabelId + ' ' + _selectYearButtonAriaLabelId\"\n                [attr.data-fd-calendar-year]=\"currentlyDisplayed.year\"\n                (click)=\"_processViewChange('year', $event)\"\n            >\n                <span [attr.id]=\"_yearButtonLabelId\">{{ selectYearLabel }}</span>\n            </button>\n        </div>\n    }\n    @if (isOnAggregatedYearsView || isOnYearView) {\n        <div class=\"fd-calendar__action\" aria-live=\"polite\">\n            <button\n                fd-button\n                fdType=\"transparent\"\n                [attr.aria-labelledby]=\"_yearsRangeButtonLabelId + ' ' + _selectYearsRangeButtonAriaLabelId\"\n                (click)=\"_processViewChange('aggregatedYear', $event)\"\n                type=\"button\"\n            >\n                <span [attr.id]=\"_yearsRangeButtonLabelId\">{{ selectAggregatedYearLabel }}</span>\n            </button>\n        </div>\n    }\n    <div class=\"fd-calendar__action fd-calendar__action--arrow-right\">\n        <button\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"slim-arrow-right\"\n            [attr.id]=\"_nextButtonId\"\n            [disabled]=\"nextButtonDisabled\"\n            [attr.title]=\"nextAriaLabel | fdTranslate\"\n            [ariaLabel]=\"nextAriaLabel | fdTranslate\"\n            (click)=\"nextClicked.emit()\"\n            type=\"button\"\n        ></button>\n    </div>\n</header>\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n    <div [attr.id]=\"_selectMonthButtonAriaLabelId\">{{ selectMonthAriaLabel | fdTranslate }}</div>\n    <div [attr.id]=\"_selectYearButtonAriaLabelId\">{{ 'coreCalendar.yearSelectionLabel' | fdTranslate }}</div>\n    <div [attr.id]=\"_selectYearsRangeButtonAriaLabelId\">{{ selectAggregatedYearAriaLabel | fdTranslate }}</div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-calendar-header', encapsulation: ViewEncapsulation.None, host: {
                         '[attr.id]': 'viewId'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, FdTranslatePipe], template: "<header class=\"fd-calendar__navigation\" [class.fd-calendar__navigation--main]=\"mobileLandscape\">\n    <div class=\"fd-calendar__action fd-calendar__action--arrow-left\">\n        <button\n            #prevButton\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"slim-arrow-left\"\n            [attr.id]=\"_prevButtonId\"\n            [disabled]=\"previousButtonDisabled\"\n            [attr.title]=\"(previousAriaLabel | fdTranslate)()\"\n            [ariaLabel]=\"(previousAriaLabel | fdTranslate)()\"\n            type=\"button\"\n            (click)=\"previousClicked.emit()\"\n        ></button>\n    </div>\n    @if (isOnDayView || isOnMonthView) {\n        @if (!isOnMonthView) {\n            <div class=\"fd-calendar__action\">\n                <!-- Select month button -->\n                <button\n                    fd-button\n                    type=\"button\"\n                    fdType=\"transparent\"\n                    [attr.aria-labelledby]=\"_monthButtonLabelId + ' ' + _selectMonthButtonAriaLabelId\"\n                    [attr.data-fd-calendar-month]=\"currentlyDisplayed.month\"\n                    (click)=\"_processViewChange('month', $event)\"\n                >\n                    <span [attr.id]=\"_monthButtonLabelId\">{{ selectMonthLabel }}</span>\n                </button>\n            </div>\n        }\n        <div class=\"fd-calendar__action\">\n            <!-- Select year button -->\n            <button\n                fd-button\n                type=\"button\"\n                fdType=\"transparent\"\n                [attr.aria-labelledby]=\"_yearButtonLabelId + ' ' + _selectYearButtonAriaLabelId\"\n                [attr.data-fd-calendar-year]=\"currentlyDisplayed.year\"\n                (click)=\"_processViewChange('year', $event)\"\n            >\n                <span [attr.id]=\"_yearButtonLabelId\">{{ selectYearLabel }}</span>\n            </button>\n        </div>\n    }\n    @if (isOnAggregatedYearsView || isOnYearView) {\n        <div class=\"fd-calendar__action\" aria-live=\"polite\">\n            <button\n                fd-button\n                fdType=\"transparent\"\n                [attr.aria-labelledby]=\"_yearsRangeButtonLabelId + ' ' + _selectYearsRangeButtonAriaLabelId\"\n                (click)=\"_processViewChange('aggregatedYear', $event)\"\n                type=\"button\"\n            >\n                <span [attr.id]=\"_yearsRangeButtonLabelId\">{{ selectAggregatedYearLabel }}</span>\n            </button>\n        </div>\n    }\n    <div class=\"fd-calendar__action fd-calendar__action--arrow-right\">\n        <button\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"slim-arrow-right\"\n            [attr.id]=\"_nextButtonId\"\n            [disabled]=\"nextButtonDisabled\"\n            [attr.title]=\"(nextAriaLabel | fdTranslate)()\"\n            [ariaLabel]=\"(nextAriaLabel | fdTranslate)()\"\n            (click)=\"nextClicked.emit()\"\n            type=\"button\"\n        ></button>\n    </div>\n</header>\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n    <div [attr.id]=\"_selectMonthButtonAriaLabelId\">{{ (selectMonthAriaLabel | fdTranslate)() }}</div>\n    <div [attr.id]=\"_selectYearButtonAriaLabelId\">{{ ('coreCalendar.yearSelectionLabel' | fdTranslate)() }}</div>\n    <div [attr.id]=\"_selectYearsRangeButtonAriaLabelId\">{{ (selectAggregatedYearAriaLabel | fdTranslate)() }}</div>\n</div>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, FdTranslatePipe], template: "<header class=\"fd-calendar__navigation\" [class.fd-calendar__navigation--main]=\"mobileLandscape\">\n    <div class=\"fd-calendar__action fd-calendar__action--arrow-left\">\n        <button\n            #prevButton\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"slim-arrow-left\"\n            [attr.id]=\"_prevButtonId\"\n            [disabled]=\"previousButtonDisabled\"\n            [attr.title]=\"previousAriaLabel | fdTranslate\"\n            [ariaLabel]=\"previousAriaLabel | fdTranslate\"\n            type=\"button\"\n            (click)=\"previousClicked.emit()\"\n        ></button>\n    </div>\n    @if (isOnDayView || isOnMonthView) {\n        @if (!isOnMonthView) {\n            <div class=\"fd-calendar__action\">\n                <!-- Select month button -->\n                <button\n                    fd-button\n                    type=\"button\"\n                    fdType=\"transparent\"\n                    [attr.aria-labelledby]=\"_monthButtonLabelId + ' ' + _selectMonthButtonAriaLabelId\"\n                    [attr.data-fd-calendar-month]=\"currentlyDisplayed.month\"\n                    (click)=\"_processViewChange('month', $event)\"\n                >\n                    <span [attr.id]=\"_monthButtonLabelId\">{{ selectMonthLabel }}</span>\n                </button>\n            </div>\n        }\n        <div class=\"fd-calendar__action\">\n            <!-- Select year button -->\n            <button\n                fd-button\n                type=\"button\"\n                fdType=\"transparent\"\n                [attr.aria-labelledby]=\"_yearButtonLabelId + ' ' + _selectYearButtonAriaLabelId\"\n                [attr.data-fd-calendar-year]=\"currentlyDisplayed.year\"\n                (click)=\"_processViewChange('year', $event)\"\n            >\n                <span [attr.id]=\"_yearButtonLabelId\">{{ selectYearLabel }}</span>\n            </button>\n        </div>\n    }\n    @if (isOnAggregatedYearsView || isOnYearView) {\n        <div class=\"fd-calendar__action\" aria-live=\"polite\">\n            <button\n                fd-button\n                fdType=\"transparent\"\n                [attr.aria-labelledby]=\"_yearsRangeButtonLabelId + ' ' + _selectYearsRangeButtonAriaLabelId\"\n                (click)=\"_processViewChange('aggregatedYear', $event)\"\n                type=\"button\"\n            >\n                <span [attr.id]=\"_yearsRangeButtonLabelId\">{{ selectAggregatedYearLabel }}</span>\n            </button>\n        </div>\n    }\n    <div class=\"fd-calendar__action fd-calendar__action--arrow-right\">\n        <button\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"slim-arrow-right\"\n            [attr.id]=\"_nextButtonId\"\n            [disabled]=\"nextButtonDisabled\"\n            [attr.title]=\"nextAriaLabel | fdTranslate\"\n            [ariaLabel]=\"nextAriaLabel | fdTranslate\"\n            (click)=\"nextClicked.emit()\"\n            type=\"button\"\n        ></button>\n    </div>\n</header>\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n    <div [attr.id]=\"_selectMonthButtonAriaLabelId\">{{ selectMonthAriaLabel | fdTranslate }}</div>\n    <div [attr.id]=\"_selectYearButtonAriaLabelId\">{{ 'coreCalendar.yearSelectionLabel' | fdTranslate }}</div>\n    <div [attr.id]=\"_selectYearsRangeButtonAriaLabelId\">{{ selectAggregatedYearAriaLabel | fdTranslate }}</div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CalendarService }, { type: i2.DatetimeAdapter }], propDecorators: { activeView: [{
                 type: Input
             }], currentlyDisplayed: [{
@@ -533,7 +533,7 @@ class CalendarLegendComponent {
                     <fd-calendar-legend-item
                         fdkFocusableItem
                         class="fd-calendar-legend__item--today"
-                        [text]="('coreCalendar.todayLabel' | fdTranslate)()"
+                        [text]="'coreCalendar.todayLabel' | fdTranslate"
                         (focus)="_handleFocusedElementEvent(null)"
                         (blur)="_handleFocusedElementEvent(null)"
                     ></fd-calendar-legend-item>
@@ -542,7 +542,7 @@ class CalendarLegendComponent {
                     <fd-calendar-legend-item
                         fdkFocusableItem
                         class="fd-calendar-legend__item--selected"
-                        [text]="('coreCalendar.dateSelectedLabel' | fdTranslate)()"
+                        [text]="'coreCalendar.dateSelectedLabel' | fdTranslate"
                         (focus)="_handleFocusedElementEvent(null)"
                         (blur)="_handleFocusedElementEvent(null)"
                     ></fd-calendar-legend-item>
@@ -551,7 +551,7 @@ class CalendarLegendComponent {
                     <fd-calendar-legend-item
                         fdkFocusableItem
                         class="fd-calendar-legend__item--work"
-                        [text]="('coreCalendar.workDayLabel' | fdTranslate)()"
+                        [text]="'coreCalendar.workDayLabel' | fdTranslate"
                         (focus)="_handleFocusedElementEvent(null)"
                         (blur)="_handleFocusedElementEvent(null)"
                     ></fd-calendar-legend-item>
@@ -560,7 +560,7 @@ class CalendarLegendComponent {
                     <fd-calendar-legend-item
                         fdkFocusableItem
                         class="fd-calendar-legend__item--non-work"
-                        [text]="('coreCalendar.nonWorkDayLabel' | fdTranslate)()"
+                        [text]="'coreCalendar.nonWorkDayLabel' | fdTranslate"
                         (focus)="_handleFocusedElementEvent(null)"
                         (blur)="_handleFocusedElementEvent(null)"
                     ></fd-calendar-legend-item>
@@ -594,7 +594,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     <fd-calendar-legend-item
                         fdkFocusableItem
                         class="fd-calendar-legend__item--today"
-                        [text]="('coreCalendar.todayLabel' | fdTranslate)()"
+                        [text]="'coreCalendar.todayLabel' | fdTranslate"
                         (focus)="_handleFocusedElementEvent(null)"
                         (blur)="_handleFocusedElementEvent(null)"
                     ></fd-calendar-legend-item>
@@ -603,7 +603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     <fd-calendar-legend-item
                         fdkFocusableItem
                         class="fd-calendar-legend__item--selected"
-                        [text]="('coreCalendar.dateSelectedLabel' | fdTranslate)()"
+                        [text]="'coreCalendar.dateSelectedLabel' | fdTranslate"
                         (focus)="_handleFocusedElementEvent(null)"
                         (blur)="_handleFocusedElementEvent(null)"
                     ></fd-calendar-legend-item>
@@ -612,7 +612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     <fd-calendar-legend-item
                         fdkFocusableItem
                         class="fd-calendar-legend__item--work"
-                        [text]="('coreCalendar.workDayLabel' | fdTranslate)()"
+                        [text]="'coreCalendar.workDayLabel' | fdTranslate"
                         (focus)="_handleFocusedElementEvent(null)"
                         (blur)="_handleFocusedElementEvent(null)"
                     ></fd-calendar-legend-item>
@@ -621,7 +621,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     <fd-calendar-legend-item
                         fdkFocusableItem
                         class="fd-calendar-legend__item--non-work"
-                        [text]="('coreCalendar.nonWorkDayLabel' | fdTranslate)()"
+                        [text]="'coreCalendar.nonWorkDayLabel' | fdTranslate"
                         (focus)="_handleFocusedElementEvent(null)"
                         (blur)="_handleFocusedElementEvent(null)"
                     ></fd-calendar-legend-item>
@@ -934,13 +934,13 @@ class CalendarAggregatedYearViewComponent {
         this._focusElementBySelector(`#${this._getId(index)}`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CalendarAggregatedYearViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CalendarService }, { token: i2.DatetimeAdapter }, { token: DATE_TIME_FORMATS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CalendarAggregatedYearViewComponent, isStandalone: true, selector: "fd-calendar-aggregated-year-view", inputs: { id: "id", focusEscapeFunction: "focusEscapeFunction", yearSelected: "yearSelected", aggregatedYearsViewGrid: "aggregatedYearsViewGrid", yearViewGrid: "yearViewGrid" }, outputs: { yearsClicked: "yearsClicked" }, host: { properties: { "attr.id": "viewId" } }, usesOnChanges: true, ngImport: i0, template: "<table\n    class=\"fd-calendar__content fd-calendar__content--years\"\n    role=\"grid\"\n    [attr.aria-roledescription]=\"('coreCalendar.calendarYearsRangeViewDescription' | fdTranslate)()\"\n>\n    <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n        @for (colYears of _calendarYearListGrid; track colYears + '' + rowIndex; let rowIndex = $index) {\n            <tr class=\"fd-calendar__row\">\n                @for (cell of colYears; track cell + '' + colIndex; let colIndex = $index) {\n                    <td\n                        class=\"fd-calendar__my-item\"\n                        role=\"gridcell\"\n                        [class.fd-calendar__my-item--current]=\"cell.current\"\n                        [class.is-active]=\"cell.selected\"\n                        [attr.id]=\"cell.id\"\n                        [attr.tabindex]=\"cell.tabIndex\"\n                        [attr.data-fd-calendar-years]=\"cell.years.startYear + '-' + cell.years.endYear\"\n                        (keydown)=\"_onKeydownYearHandler($event, cell.index)\"\n                        (click)=\"selectYear(cell, $event)\"\n                    >\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            class=\"fd-calendar__my-item-button\"\n                            [class.is-active]=\"cell.current\"\n                            tabindex=\"-1\"\n                        >\n                            <span\n                                class=\"fd-calendar__text\"\n                                [attr.aria-labelledby]=\"\n                                    cell.id +\n                                    '-aria-label ' +\n                                    (cell.current ? _todayLabelId + ' ' : '') +\n                                    (cell.selected ? _selectedDateLabelId : '')\n                                \"\n                            >\n                                {{ cell.label }}\n                            </span>\n                        </button>\n                        <span hidden aria-hidden=\"true\" [attr.id]=\"cell.id + '-aria-label'\">\n                            {{ cell.ariaLabel }}\n                        </span>\n                    </td>\n                }\n            </tr>\n        }\n    </tbody>\n</table>\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n    <div [attr.id]=\"_todayLabelId\">{{ ('coreCalendar.todayLabel' | fdTranslate)() }}</div>\n    <div [attr.id]=\"_selectedDateLabelId\">{{ ('coreCalendar.dateSelectedLabel' | fdTranslate)() }}</div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CalendarAggregatedYearViewComponent, isStandalone: true, selector: "fd-calendar-aggregated-year-view", inputs: { id: "id", focusEscapeFunction: "focusEscapeFunction", yearSelected: "yearSelected", aggregatedYearsViewGrid: "aggregatedYearsViewGrid", yearViewGrid: "yearViewGrid" }, outputs: { yearsClicked: "yearsClicked" }, host: { properties: { "attr.id": "viewId" } }, usesOnChanges: true, ngImport: i0, template: "<table\n    class=\"fd-calendar__content fd-calendar__content--years\"\n    role=\"grid\"\n    [attr.aria-roledescription]=\"'coreCalendar.calendarYearsRangeViewDescription' | fdTranslate\"\n>\n    <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n        @for (colYears of _calendarYearListGrid; track colYears + '' + rowIndex; let rowIndex = $index) {\n            <tr class=\"fd-calendar__row\">\n                @for (cell of colYears; track cell + '' + colIndex; let colIndex = $index) {\n                    <td\n                        class=\"fd-calendar__my-item\"\n                        role=\"gridcell\"\n                        [class.fd-calendar__my-item--current]=\"cell.current\"\n                        [class.is-active]=\"cell.selected\"\n                        [attr.id]=\"cell.id\"\n                        [attr.tabindex]=\"cell.tabIndex\"\n                        [attr.data-fd-calendar-years]=\"cell.years.startYear + '-' + cell.years.endYear\"\n                        (keydown)=\"_onKeydownYearHandler($event, cell.index)\"\n                        (click)=\"selectYear(cell, $event)\"\n                    >\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            class=\"fd-calendar__my-item-button\"\n                            [class.is-active]=\"cell.current\"\n                            tabindex=\"-1\"\n                        >\n                            <span\n                                class=\"fd-calendar__text\"\n                                [attr.aria-labelledby]=\"\n                                    cell.id +\n                                    '-aria-label ' +\n                                    (cell.current ? _todayLabelId + ' ' : '') +\n                                    (cell.selected ? _selectedDateLabelId : '')\n                                \"\n                            >\n                                {{ cell.label }}\n                            </span>\n                        </button>\n                        <span hidden aria-hidden=\"true\" [attr.id]=\"cell.id + '-aria-label'\">\n                            {{ cell.ariaLabel }}\n                        </span>\n                    </td>\n                }\n            </tr>\n        }\n    </tbody>\n</table>\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n    <div [attr.id]=\"_todayLabelId\">{{ 'coreCalendar.todayLabel' | fdTranslate }}</div>\n    <div [attr.id]=\"_selectedDateLabelId\">{{ 'coreCalendar.dateSelectedLabel' | fdTranslate }}</div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CalendarAggregatedYearViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-calendar-aggregated-year-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.id]': 'viewId'
-                    }, imports: [ButtonComponent, FdTranslatePipe], template: "<table\n    class=\"fd-calendar__content fd-calendar__content--years\"\n    role=\"grid\"\n    [attr.aria-roledescription]=\"('coreCalendar.calendarYearsRangeViewDescription' | fdTranslate)()\"\n>\n    <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n        @for (colYears of _calendarYearListGrid; track colYears + '' + rowIndex; let rowIndex = $index) {\n            <tr class=\"fd-calendar__row\">\n                @for (cell of colYears; track cell + '' + colIndex; let colIndex = $index) {\n                    <td\n                        class=\"fd-calendar__my-item\"\n                        role=\"gridcell\"\n                        [class.fd-calendar__my-item--current]=\"cell.current\"\n                        [class.is-active]=\"cell.selected\"\n                        [attr.id]=\"cell.id\"\n                        [attr.tabindex]=\"cell.tabIndex\"\n                        [attr.data-fd-calendar-years]=\"cell.years.startYear + '-' + cell.years.endYear\"\n                        (keydown)=\"_onKeydownYearHandler($event, cell.index)\"\n                        (click)=\"selectYear(cell, $event)\"\n                    >\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            class=\"fd-calendar__my-item-button\"\n                            [class.is-active]=\"cell.current\"\n                            tabindex=\"-1\"\n                        >\n                            <span\n                                class=\"fd-calendar__text\"\n                                [attr.aria-labelledby]=\"\n                                    cell.id +\n                                    '-aria-label ' +\n                                    (cell.current ? _todayLabelId + ' ' : '') +\n                                    (cell.selected ? _selectedDateLabelId : '')\n                                \"\n                            >\n                                {{ cell.label }}\n                            </span>\n                        </button>\n                        <span hidden aria-hidden=\"true\" [attr.id]=\"cell.id + '-aria-label'\">\n                            {{ cell.ariaLabel }}\n                        </span>\n                    </td>\n                }\n            </tr>\n        }\n    </tbody>\n</table>\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n    <div [attr.id]=\"_todayLabelId\">{{ ('coreCalendar.todayLabel' | fdTranslate)() }}</div>\n    <div [attr.id]=\"_selectedDateLabelId\">{{ ('coreCalendar.dateSelectedLabel' | fdTranslate)() }}</div>\n</div>\n" }]
+                    }, imports: [ButtonComponent, FdTranslatePipe], template: "<table\n    class=\"fd-calendar__content fd-calendar__content--years\"\n    role=\"grid\"\n    [attr.aria-roledescription]=\"'coreCalendar.calendarYearsRangeViewDescription' | fdTranslate\"\n>\n    <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n        @for (colYears of _calendarYearListGrid; track colYears + '' + rowIndex; let rowIndex = $index) {\n            <tr class=\"fd-calendar__row\">\n                @for (cell of colYears; track cell + '' + colIndex; let colIndex = $index) {\n                    <td\n                        class=\"fd-calendar__my-item\"\n                        role=\"gridcell\"\n                        [class.fd-calendar__my-item--current]=\"cell.current\"\n                        [class.is-active]=\"cell.selected\"\n                        [attr.id]=\"cell.id\"\n                        [attr.tabindex]=\"cell.tabIndex\"\n                        [attr.data-fd-calendar-years]=\"cell.years.startYear + '-' + cell.years.endYear\"\n                        (keydown)=\"_onKeydownYearHandler($event, cell.index)\"\n                        (click)=\"selectYear(cell, $event)\"\n                    >\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            class=\"fd-calendar__my-item-button\"\n                            [class.is-active]=\"cell.current\"\n                            tabindex=\"-1\"\n                        >\n                            <span\n                                class=\"fd-calendar__text\"\n                                [attr.aria-labelledby]=\"\n                                    cell.id +\n                                    '-aria-label ' +\n                                    (cell.current ? _todayLabelId + ' ' : '') +\n                                    (cell.selected ? _selectedDateLabelId : '')\n                                \"\n                            >\n                                {{ cell.label }}\n                            </span>\n                        </button>\n                        <span hidden aria-hidden=\"true\" [attr.id]=\"cell.id + '-aria-label'\">\n                            {{ cell.ariaLabel }}\n                        </span>\n                    </td>\n                }\n            </tr>\n        }\n    </tbody>\n</table>\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n    <div [attr.id]=\"_todayLabelId\">{{ 'coreCalendar.todayLabel' | fdTranslate }}</div>\n    <div [attr.id]=\"_selectedDateLabelId\">{{ 'coreCalendar.dateSelectedLabel' | fdTranslate }}</div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CalendarService }, { type: i2.DatetimeAdapter }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DATE_TIME_FORMATS]
@@ -2234,14 +2234,14 @@ class CalendarDayViewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CalendarDayViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CalendarService }, { token: DATE_TIME_FORMATS }, { token: i2.DatetimeAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CalendarDayViewComponent, isStandalone: true, selector: "fd-calendar-day-view", inputs: { currentlyDisplayed: { classPropertyName: "currentlyDisplayed", publicName: "currentlyDisplayed", isSignal: false, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: false, isRequired: false, transformFunction: null }, selectedMultipleDates: { classPropertyName: "selectedMultipleDates", publicName: "selectedMultipleDates", isSignal: false, isRequired: false, transformFunction: null }, selectedRangeDate: { classPropertyName: "selectedRangeDate", publicName: "selectedRangeDate", isSignal: false, isRequired: false, transformFunction: null }, selectedMultipleDateRanges: { classPropertyName: "selectedMultipleDateRanges", publicName: "selectedMultipleDateRanges", isSignal: false, isRequired: false, transformFunction: null }, disableFunction: { classPropertyName: "disableFunction", publicName: "disableFunction", isSignal: true, isRequired: false, transformFunction: null }, disableRangeStartFunction: { classPropertyName: "disableRangeStartFunction", publicName: "disableRangeStartFunction", isSignal: true, isRequired: false, transformFunction: null }, disableRangeEndFunction: { classPropertyName: "disableRangeEndFunction", publicName: "disableRangeEndFunction", isSignal: true, isRequired: false, transformFunction: null }, startingDayOfWeek: { classPropertyName: "startingDayOfWeek", publicName: "startingDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, calType: { classPropertyName: "calType", publicName: "calType", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, rangeHoverEffect: { classPropertyName: "rangeHoverEffect", publicName: "rangeHoverEffect", isSignal: true, isRequired: false, transformFunction: null }, markWeekends: { classPropertyName: "markWeekends", publicName: "markWeekends", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, allowMultipleSelection: { classPropertyName: "allowMultipleSelection", publicName: "allowMultipleSelection", isSignal: true, isRequired: false, transformFunction: null }, focusEscapeFunction: { classPropertyName: "focusEscapeFunction", publicName: "focusEscapeFunction", isSignal: true, isRequired: false, transformFunction: null }, specialDaysRules: { classPropertyName: "specialDaysRules", publicName: "specialDaysRules", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { 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" }, host: { properties: { "attr.id": "viewId" }, classAttribute: "fd-calendar__dates" }, usesOnChanges: true, ngImport: i0, template: "<table\n    class=\"fd-calendar__content fd-calendar__content--dates\"\n    role=\"grid\"\n    [attr.aria-roledescription]=\"('coreCalendar.calendarDayViewDescription' | fdTranslate)()\"\n>\n    <thead class=\"fd-calendar__group\" role=\"rowgroup\">\n        <tr class=\"fd-calendar__row\" role=\"row\">\n            @if (showWeekNumbers()) {\n                <th\n                    class=\"fd-calendar__item fd-calendar__item--side-helper\"\n                    role=\"columnheader\"\n                    [attr.id]=\"_weekNumbersColumnHeaderId\"\n                    [attr.aria-label]=\"('coreCalendar.weekColumnLabel' | fdTranslate)()\"\n                ></th>\n            }\n            @for (day of shortWeekDays; track day + '' + i; let i = $index) {\n                <th\n                    class=\"fd-calendar__item fd-calendar__item--side-helper\"\n                    [ngClass]=\"_weekHeaderClasses[i]\"\n                    role=\"columnheader\"\n                    [attr.aria-label]=\"longWeekDays[i]\"\n                    (click)=\"handleWeekSelectionByIndex(i)\"\n                >\n                    <div class=\"fd-calendar__text-wrapper\">\n                        <span class=\"fd-calendar__text\">{{ day }}</span>\n                    </div>\n                </th>\n            }\n        </tr>\n    </thead>\n    <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n        @for (row of _dayViewGrid; track row + '' + rowIndex; let rowIndex = $index) {\n            <tr class=\"fd-calendar__row\" role=\"row\">\n                @if (showWeekNumbers()) {\n                    <th\n                        class=\"fd-calendar__item fd-calendar__item--side-helper\"\n                        [ngClass]=\"{ 'event-enabled': allowMultipleSelection() && calType() !== 'range' }\"\n                        role=\"rowheader\"\n                        scope=\"row\"\n                        [attr.data-fd-calendar-week]=\"_weeks[rowIndex]\"\n                        [attr.id]=\"viewId + '-week-' + _weeks[rowIndex]\"\n                        [attr.aria-labelledby]=\"\n                            _weekNumbersColumnHeaderId + ' ' + (viewId + '-week-' + _weeks[rowIndex])\n                        \"\n                        (click)=\"handleWeekSelectionByDays(row)\"\n                    >\n                        @if (_weeks && _weeks[rowIndex]) {\n                            <div class=\"fd-calendar__text-wrapper\">\n                                <span class=\"fd-calendar__text\">\n                                    {{ _weeks[rowIndex] }}\n                                </span>\n                            </div>\n                        }\n                    </th>\n                }\n                @for (cell of row; track cell + '' + cellIndex; let cellIndex = $index) {\n                    <td\n                        class=\"fd-calendar__item\"\n                        role=\"gridcell\"\n                        [class.fd-calendar__item--selected]=\"cell.selectedFirst || cell.selectedLast || cell.selected\"\n                        [class.fd-calendar__item--range]=\"\n                            (cell.selectedRange || cell.hoverRange) && !cell.selectedFirst && !cell.selectedLast\n                        \"\n                        [class.fd-calendar__item--today]=\"cell.current\"\n                        [class.fd-calendar__item--weekend]=\"\n                            cell.weekend && markWeekends() && cell.monthStatus === 'current'\n                        \"\n                        [class.fd-calendar__item--other]=\"cell.monthStatus !== 'current'\"\n                        [class.is-disabled]=\"cell.disabled\"\n                        [class]=\"\n                            cell.specialDayNumber && !cell.shouldHideSpecialDayMarker\n                                ? 'fd-calendar__item--legend-' + cell.specialDayNumber\n                                : ''\n                        \"\n                        [attr.id]=\"cell.id\"\n                        [attr.data-fd-calendar-date-day]=\"cell.label\"\n                        [attr.data-fd-calendar-day]=\"cell.index\"\n                        [attr.aria-selected]=\"cell.selected\"\n                        [attr.aria-disabled]=\"cell.disabled\"\n                        [attr.tabindex]=\"cell.isTabIndexed ? 0 : -1\"\n                        (click)=\"selectDate(cell, $event)\"\n                        (mouseenter)=\"_refreshHoverRange(cell)\"\n                        (keydown)=\"_onKeydownDayHandler($event, cell, _getIndex(rowIndex, cellIndex))\"\n                    >\n                        <div class=\"fd-calendar__text-wrapper\">\n                            <span\n                                class=\"fd-calendar__text\"\n                                role=\"button\"\n                                [attr.aria-labelledby]=\"\n                                    cell.id +\n                                    '-aria-label ' +\n                                    (cell.selectedFirst ? _dateRangeStartLabelId + ' ' : '') +\n                                    (cell.selectedLast ? _dateRangeEndLabelId + ' ' : '') +\n                                    (cell.current ? _todayLabelId + ' ' : '') +\n                                    (cell.selected && calType() === 'single' ? _selectedDateLabelId + ' ' : '') +\n                                    (cell.past ? _dateInPastLabelId : '')\n                                \"\n                                >{{ cell.label }}</span\n                            >\n                            <span hidden aria-hidden=\"true\" [attr.id]=\"cell.id + '-aria-label'\">\n                                {{ cell.ariaLabel }}\n                            </span>\n                        </div>\n                    </td>\n                }\n            </tr>\n        }\n        @if (_dayViewGrid.length <= 5) {\n            <tr class=\"fd-calendar__row\">\n                <td class=\"fd-calendar__item hidden-day\"></td>\n            </tr>\n        }\n        @if (_dayViewGrid.length === 4) {\n            <tr class=\"fd-calendar__row\">\n                <td class=\"fd-calendar__item hidden-day\"></td>\n            </tr>\n        }\n    </tbody>\n</table>\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n    <div [attr.id]=\"_todayLabelId\">{{ ('coreCalendar.todayLabel' | fdTranslate)() }}</div>\n    <div [attr.id]=\"_selectedDateLabelId\">{{ ('coreCalendar.dateSelectedLabel' | fdTranslate)() }}</div>\n    <div [attr.id]=\"_dateRangeStartLabelId\">{{ ('coreCalendar.rangeStartLabel' | fdTranslate)() }}</div>\n    <div [attr.id]=\"_dateRangeEndLabelId\">{{ ('coreCalendar.rangeEndLabel' | fdTranslate)() }}</div>\n    <div [attr.id]=\"_dateInPastLabelId\">{{ ('coreCalendar.dayInPastLabel' | fdTranslate)() }}</div>\n</div>\n", styles: [".hidden-day{visibility:hidden}.event-enabled{pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CalendarDayViewComponent, isStandalone: true, selector: "fd-calendar-day-view", inputs: { currentlyDisplayed: { classPropertyName: "currentlyDisplayed", publicName: "currentlyDisplayed", isSignal: false, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: false, isRequired: false, transformFunction: null }, selectedMultipleDates: { classPropertyName: "selectedMultipleDates", publicName: "selectedMultipleDates", isSignal: false, isRequired: false, transformFunction: null }, selectedRangeDate: { classPropertyName: "selectedRangeDate", publicName: "selectedRangeDate", isSignal: false, isRequired: false, transformFunction: null }, selectedMultipleDateRanges: { classPropertyName: "selectedMultipleDateRanges", publicName: "selectedMultipleDateRanges", isSignal: false, isRequired: false, transformFunction: null }, disableFunction: { classPropertyName: "disableFunction", publicName: "disableFunction", isSignal: true, isRequired: false, transformFunction: null }, disableRangeStartFunction: { classPropertyName: "disableRangeStartFunction", publicName: "disableRangeStartFunction", isSignal: true, isRequired: false, transformFunction: null }, disableRangeEndFunction: { classPropertyName: "disableRangeEndFunction", publicName: "disableRangeEndFunction", isSignal: true, isRequired: false, transformFunction: null }, startingDayOfWeek: { classPropertyName: "startingDayOfWeek", publicName: "startingDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, calType: { classPropertyName: "calType", publicName: "calType", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, rangeHoverEffect: { classPropertyName: "rangeHoverEffect", publicName: "rangeHoverEffect", isSignal: true, isRequired: false, transformFunction: null }, markWeekends: { classPropertyName: "markWeekends", publicName: "markWeekends", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, allowMultipleSelection: { classPropertyName: "allowMultipleSelection", publicName: "allowMultipleSelection", isSignal: true, isRequired: false, transformFunction: null }, focusEscapeFunction: { classPropertyName: "focusEscapeFunction", publicName: "focusEscapeFunction", isSignal: true, isRequired: false, transformFunction: null }, specialDaysRules: { classPropertyName: "specialDaysRules", publicName: "specialDaysRules", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { 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" }, host: { properties: { "attr.id": "viewId" }, classAttribute: "fd-calendar__dates" }, usesOnChanges: true, ngImport: i0, template: "<table\n    class=\"fd-calendar__content fd-calendar__content--dates\"\n    role=\"grid\"\n    [attr.aria-roledescription]=\"'coreCalendar.calendarDayViewDescription' | fdTranslate\"\n>\n    <thead class=\"fd-calendar__group\" role=\"rowgroup\">\n        <tr class=\"fd-calendar__row\" role=\"row\">\n            @if (showWeekNumbers()) {\n                <th\n                    class=\"fd-calendar__item fd-calendar__item--side-helper\"\n                    role=\"columnheader\"\n                    [attr.id]=\"_weekNumbersColumnHeaderId\"\n                    [attr.aria-label]=\"'coreCalendar.weekColumnLabel' | fdTranslate\"\n                ></th>\n            }\n            @for (day of shortWeekDays; track day + '' + i; let i = $index) {\n                <th\n                    class=\"fd-calendar__item fd-calendar__item--side-helper\"\n                    [ngClass]=\"_weekHeaderClasses[i]\"\n                    role=\"columnheader\"\n                    [attr.aria-label]=\"longWeekDays[i]\"\n                    (click)=\"handleWeekSelectionByIndex(i)\"\n                >\n                    <div class=\"fd-calendar__text-wrapper\">\n                        <span class=\"fd-calendar__text\">{{ day }}</span>\n                    </div>\n                </th>\n            }\n        </tr>\n    </thead>\n    <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n        @for (row of _dayViewGrid; track row + '' + rowIndex; let rowIndex = $index) {\n            <tr class=\"fd-calendar__row\" role=\"row\">\n                @if (showWeekNumbers()) {\n                    <th\n                        class=\"fd-calendar__item fd-calendar__item--side-helper\"\n                        [ngClass]=\"{ 'event-enabled': allowMultipleSelection() && calType() !== 'range' }\"\n                        role=\"rowheader\"\n                        scope=\"row\"\n                        [attr.data-fd-calendar-week]=\"_weeks[rowIndex]\"\n                        [attr.id]=\"viewId + '-week-' + _weeks[rowIndex]\"\n                        [attr.aria-labelledby]=\"\n                            _weekNumbersColumnHeaderId + ' ' + (viewId + '-week-' + _weeks[rowIndex])\n                        \"\n                        (click)=\"handleWeekSelectionByDays(row)\"\n                    >\n                        @if (_weeks && _weeks[rowIndex]) {\n                            <div class=\"fd-calendar__text-wrapper\">\n                                <span class=\"fd-calendar__text\">\n                                    {{ _weeks[rowIndex] }}\n                                </span>\n                            </div>\n                        }\n                    </th>\n                }\n                @for (cell of row; track cell + '' + cellIndex; let cellIndex = $index) {\n                    <td\n                        class=\"fd-calendar__item\"\n                        role=\"gridcell\"\n                        [class.fd-calendar__item--selected]=\"cell.selectedFirst || cell.selectedLast || cell.selected\"\n                        [class.fd-calendar__item--range]=\"\n                            (cell.selectedRange || cell.hoverRange) && !cell.selectedFirst && !cell.selectedLast\n                        \"\n                        [class.fd-calendar__item--today]=\"cell.current\"\n                        [class.fd-calendar__item--weekend]=\"\n                            cell.weekend && markWeekends() && cell.monthStatus === 'current'\n                        \"\n                        [class.fd-calendar__item--other]=\"cell.monthStatus !== 'current'\"\n                        [class.is-disabled]=\"cell.disabled\"\n                        [class]=\"\n                            cell.specialDayNumber && !cell.shouldHideSpecialDayMarker\n                                ? 'fd-calendar__item--legend-' + cell.specialDayNumber\n                                : ''\n                        \"\n                        [attr.id]=\"cell.id\"\n                        [attr.data-fd-calendar-date-day]=\"cell.label\"\n                        [attr.data-fd-calendar-day]=\"cell.index\"\n                        [attr.aria-selected]=\"cell.selected\"\n                        [attr.aria-disabled]=\"cell.disabled\"\n                        [attr.tabindex]=\"cell.isTabIndexed ? 0 : -1\"\n                        (click)=\"selectDate(cell, $event)\"\n                        (mouseenter)=\"_refreshHoverRange(cell)\"\n                        (keydown)=\"_onKeydownDayHandler($event, cell, _getIndex(rowIndex, cellIndex))\"\n                    >\n                        <div class=\"fd-calendar__text-wrapper\">\n                            <span\n                                class=\"fd-calendar__text\"\n                                role=\"button\"\n                                [attr.aria-labelledby]=\"\n                                    cell.id +\n                                    '-aria-label ' +\n                                    (cell.selectedFirst ? _dateRangeStartLabelId + ' ' : '') +\n                                    (cell.selectedLast ? _dateRangeEndLabelId + ' ' : '') +\n                                    (cell.current ? _todayLabelId + ' ' : '') +\n                                    (cell.selected && calType() === 'single' ? _selectedDateLabelId + ' ' : '') +\n                                    (cell.past ? _dateInPastLabelId : '')\n                                \"\n                                >{{ cell.label }}</span\n                            >\n                            <span hidden aria-hidden=\"true\" [attr.id]=\"cell.id + '-aria-label'\">\n                                {{ cell.ariaLabel }}\n                            </span>\n                        </div>\n                    </td>\n                }\n            </tr>\n        }\n        @if (_dayViewGrid.length <= 5) {\n            <tr class=\"fd-calendar__row\">\n                <td class=\"fd-calendar__item hidden-day\"></td>\n            </tr>\n        }\n        @if (_dayViewGrid.length === 4) {\n            <tr class=\"fd-calendar__row\">\n                <td class=\"fd-calendar__item hidden-day\"></td>\n            </tr>\n        }\n    </tbody>\n</table>\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n    <div [attr.id]=\"_todayLabelId\">{{ 'coreCalendar.todayLabel' | fdTranslate }}</div>\n    <div [attr.id]=\"_selectedDateLabelId\">{{ 'coreCalendar.dateSelectedLabel' | fdTranslate }}</div>\n    <div [attr.id]=\"_dateRangeStartLabelId\">{{ 'coreCalendar.rangeStartLabel' | fdTranslate }}</div>\n    <div [attr.id]=\"_dateRangeEndLabelId\">{{ 'coreCalendar.rangeEndLabel' | fdTranslate }}</div>\n    <div [attr.id]=\"_dateInPastLabelId\">{{ 'coreCalendar.dayInPastLabel' | fdTranslate }}</div>\n</div>\n", styles: [".hidden-day{visibility:hidden}.event-enabled{pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CalendarDayViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-calendar-day-view', encapsulation: ViewEncapsulation.None, host: {
                         '[attr.id]': 'viewId',
                         class: 'fd-calendar__dates'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FdTranslatePipe, NgClass], template: "<table\n    class=\"fd-calendar__content fd-calendar__content--dates\"\n    role=\"grid\"\n    [attr.aria-roledescription]=\"('coreCalendar.calendarDayViewDescription' | fdTranslate)()\"\n>\n    <thead class=\"fd-calendar__group\" role=\"rowgroup\">\n        <tr class=\"fd-calendar__row\" role=\"row\">\n            @if (showWeekNumbers()) {\n                <th\n                    class=\"fd-calendar__item fd-calendar__item--side-helper\"\n                    role=\"columnheader\"\n                    [attr.id]=\"_weekNumbersColumnHeaderId\"\n                    [attr.aria-label]=\"('coreCalendar.weekColumnLabel' | fdTranslate)()\"\n                ></th>\n            }\n            @for (day of shortWeekDays; track day + '' + i; let i = $index) {\n                <th\n                    class=\"fd-calendar__item fd-calendar__item--side-helper\"\n                    [ngClass]=\"_weekHeaderClasses[i]\"\n                    role=\"columnheader\"\n                    [attr.aria-label]=\"longWeekDays[i]\"\n                    (click)=\"handleWeekSelectionByIndex(i)\"\n                >\n                    <div class=\"fd-calendar__text-wrapper\">\n                        <span class=\"fd-calendar__text\">{{ day }}</span>\n                    </div>\n                </th>\n            }\n        </tr>\n    </thead>\n    <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n        @for (row of _dayViewGrid; track row + '' + rowIndex; let rowIndex = $index) {\n            <tr class=\"fd-calendar__row\" role=\"row\">\n                @if (showWeekNumbers()) {\n                    <th\n                        class=\"fd-calendar__item fd-calendar__item--side-helper\"\n                        [ngClass]=\"{ 'event-enabled': allowMultipleSelection() && calType() !== 'range' }\"\n                        role=\"rowheader\"\n                        scope=\"row\"\n                        [attr.data-fd-calendar-week]=\"_weeks[rowIndex]\"\n                        [attr.id]=\"viewId + '-week-' + _weeks[rowIndex]\"\n                        [attr.aria-labelledby]=\"\n                            _weekNumbersColumnHeaderId + ' ' + (viewId + '-week-' + _weeks[rowIndex])\n                        \"\n                        (click)=\"handleWeekSelectionByDays(row)\"\n                    >\n                        @if (_weeks && _weeks[rowIndex]) {\n                            <div class=\"fd-calendar__text-wrapper\">\n                                <span class=\"fd-calendar__text\">\n                                    {{ _weeks[rowIndex] }}\n                                </span>\n                            </div>\n                        }\n                    </th>\n                }\n                @for (cell of row; track cell + '' + cellIndex; let cellIndex = $index) {\n                    <td\n                        class=\"fd-calendar__item\"\n                        role=\"gridcell\"\n                        [class.fd-calendar__item--selected]=\"cell.selectedFirst || cell.selectedLast || cell.selected\"\n                        [class.fd-calendar__item--range]=\"\n                            (cell.selectedRange || cell.hoverRange) && !cell.selectedFirst && !cell.selectedLast\n                        \"\n                        [class.fd-calendar__item--today]=\"cell.current\"\n                        [class.fd-calendar__item--weekend]=\"\n                            cell.weekend && markWeekends() && cell.monthStatus === 'current'\n                        \"\n                        [class.fd-calendar__item--other]=\"cell.monthStatus !== 'current'\"\n                        [class.is-disabled]=\"cell.disabled\"\n                        [class]=\"\n                            cell.specialDayNumber && !cell.shouldHideSpecialDayMarker\n                                ? 'fd-calendar__item--legend-' + cell.specialDayNumber\n                                : ''\n                        \"\n                        [attr.id]=\"cell.id\"\n                        [attr.data-fd-calendar-date-day]=\"cell.label\"\n                        [attr.data-fd-calendar-day]=\"cell.index\"\n                        [attr.aria-selected]=\"cell.selected\"\n                        [attr.aria-disabled]=\"cell.disabled\"\n                        [attr.tabindex]=\"cell.isTabIndexed ? 0 : -1\"\n                        (click)=\"selectDate(cell, $event)\"\n                        (mouseenter)=\"_refreshHoverRange(cell)\"\n                        (keydown)=\"_onKeydownDayHandler($event, cell, _getIndex(rowIndex, cellIndex))\"\n                    >\n                        <div class=\"fd-calendar__text-wrapper\">\n                            <span\n                                class=\"fd-calendar__text\"\n                                role=\"button\"\n                                [attr.aria-labelledby]=\"\n                                    cell.id +\n                                    '-aria-label ' +\n                                    (cell.selectedFirst ? _dateRangeStartLabelId + ' ' : '') +\n                                    (cell.selectedLast ? _dateRangeEndLabelId + ' ' : '') +\n                                    (cell.current ? _todayLabelId + ' ' : '') +\n                                    (cell.selected && calType() === 'single' ? _selectedDateLabelId + ' ' : '') +\n                                    (cell.past ? _dateInPastLabelId : '')\n                                \"\n                                >{{ cell.label }}</span\n                            >\n                            <span hidden aria-hidden=\"true\" [attr.id]=\"cell.id + '-aria-label'\">\n                                {{ cell.ariaLabel }}\n                            </span>\n                        </div>\n                    </td>\n                }\n            </tr>\n        }\n        @if (_dayViewGrid.length <= 5) {\n            <tr class=\"fd-calendar__row\">\n                <td class=\"fd-calendar__item hidden-day\"></td>\n            </tr>\n        }\n        @if (_dayViewGrid.length === 4) {\n            <tr class=\"fd-calendar__row\">\n                <td class=\"fd-calendar__item hidden-day\"></td>\n            </tr>\n        }\n    </tbody>\n</table>\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n    <div [attr.id]=\"_todayLabelId\">{{ ('coreCalendar.todayLabel' | fdTranslate)() }}</div>\n    <div [attr.id]=\"_selectedDateLabelId\">{{ ('coreCalendar.dateSelectedLabel' | fdTranslate)() }}</div>\n    <div [attr.id]=\"_dateRangeStartLabelId\">{{ ('coreCalendar.rangeStartLabel' | fdTranslate)() }}</div>\n    <div [attr.id]=\"_dateRangeEndLabelId\">{{ ('coreCalendar.rangeEndLabel' | fdTranslate)() }}</div>\n    <div [attr.id]=\"_dateInPastLabelId\">{{ ('coreCalendar.dayInPastLabel' | fdTranslate)() }}</div>\n</div>\n", styles: [".hidden-day{visibility:hidden}.event-enabled{pointer-events:auto}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FdTranslatePipe, NgClass], template: "<table\n    class=\"fd-calendar__content fd-calendar__content--dates\"\n    role=\"grid\"\n    [attr.aria-roledescription]=\"'coreCalendar.calendarDayViewDescription' | fdTranslate\"\n>\n    <thead class=\"fd-calendar__group\" role=\"rowgroup\">\n        <tr class=\"fd-calendar__row\" role=\"row\">\n            @if (showWeekNumbers()) {\n                <th\n                    class=\"fd-calendar__item fd-calendar__item--side-helper\"\n                    role=\"columnheader\"\n                    [attr.id]=\"_weekNumbersColumnHeaderId\"\n                    [attr.aria-label]=\"'coreCalendar.weekColumnLabel' | fdTranslate\"\n                ></th>\n            }\n            @for (day of shortWeekDays; track day + '' + i; let i = $index) {\n                <th\n                    class=\"fd-calendar__item fd-calendar__item--side-helper\"\n                    [ngClass]=\"_weekHeaderClasses[i]\"\n                    role=\"columnheader\"\n                    [attr.aria-label]=\"longWeekDays[i]\"\n                    (click)=\"handleWeekSelectionByIndex(i)\"\n                >\n                    <div class=\"fd-calendar__text-wrapper\">\n                        <span class=\"fd-calendar__text\">{{ day }}</span>\n                    </div>\n                </th>\n            }\n        </tr>\n    </thead>\n    <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n        @for (row of _dayViewGrid; track row + '' + rowIndex; let rowIndex = $index) {\n            <tr class=\"fd-calendar__row\" role=\"row\">\n                @if (showWeekNumbers()) {\n                    <th\n                        class=\"fd-calendar__item fd-calendar__item--side-helper\"\n                        [ngClass]=\"{ 'event-enabled': allowMultipleSelection() && calType() !== 'range' }\"\n                        role=\"rowheader\"\n                        scope=\"row\"\n                        [attr.data-fd-calendar-week]=\"_weeks[rowIndex]\"\n                        [attr.id]=\"viewId + '-week-' + _weeks[rowIndex]\"\n                        [attr.aria-labelledby]=\"\n                            _weekNumbersColumnHeaderId + ' ' + (viewId + '-week-' + _weeks[rowIndex])\n                        \"\n                        (click)=\"handleWeekSelectionByDays(row)\"\n                    >\n                        @if (_weeks && _weeks[rowIndex]) {\n                            <div class=\"fd-calendar__text-wrapper\">\n                                <span class=\"fd-calendar__text\">\n                                    {{ _weeks[rowIndex] }}\n                                </span>\n                            </div>\n                        }\n                    </th>\n                }\n                @for (cell of row; track cell + '' + cellIndex; let cellIndex = $index) {\n                    <td\n                        class=\"fd-calendar__item\"\n                        role=\"gridcell\"\n                        [class.fd-calendar__item--selected]=\"cell.selectedFirst || cell.selectedLast || cell.selected\"\n                        [class.fd-calendar__item--range]=\"\n                            (cell.selectedRange || cell.hoverRange) && !cell.selectedFirst && !cell.selectedLast\n                        \"\n                        [class.fd-calendar__item--today]=\"cell.current\"\n                        [class.fd-calendar__item--weekend]=\"\n                            cell.weekend && markWeekends() && cell.monthStatus === 'current'\n                        \"\n                        [class.fd-calendar__item--other]=\"cell.monthStatus !== 'current'\"\n                        [class.is-disabled]=\"cell.disabled\"\n                        [class]=\"\n                            cell.specialDayNumber && !cell.shouldHideSpecialDayMarker\n                                ? 'fd-calendar__item--legend-' + cell.specialDayNumber\n                                : ''\n                        \"\n                        [attr.id]=\"cell.id\"\n                        [attr.data-fd-calendar-date-day]=\"cell.label\"\n                        [attr.data-fd-calendar-day]=\"cell.index\"\n                        [attr.aria-selected]=\"cell.selected\"\n                        [attr.aria-disabled]=\"cell.disabled\"\n                        [attr.tabindex]=\"cell.isTabIndexed ? 0 : -1\"\n                        (click)=\"selectDate(cell, $event)\"\n                        (mouseenter)=\"_refreshHoverRange(cell)\"\n                        (keydown)=\"_onKeydownDayHandler($event, cell, _getIndex(rowIndex, cellIndex))\"\n                    >\n                        <div class=\"fd-calendar__text-wrapper\">\n                            <span\n                                class=\"fd-calendar__text\"\n                                role=\"button\"\n                                [attr.aria-labelledby]=\"\n                                    cell.id +\n                                    '-aria-label ' +\n                                    (cell.selectedFirst ? _dateRangeStartLabelId + ' ' : '') +\n                                    (cell.selectedLast ? _dateRangeEndLabelId + ' ' : '') +\n                                    (cell.current ? _todayLabelId + ' ' : '') +\n                                    (cell.selected && calType() === 'single' ? _selectedDateLabelId + ' ' : '') +\n                                    (cell.past ? _dateInPastLabelId : '')\n                                \"\n                                >{{ cell.label }}</span\n                            >\n                            <span hidden aria-hidden=\"true\" [attr.id]=\"cell.id + '-aria-label'\">\n                                {{ cell.ariaLabel }}\n                            </span>\n                        </div>\n                    </td>\n                }\n            </tr>\n        }\n        @if (_dayViewGrid.length <= 5) {\n            <tr class=\"fd-calendar__row\">\n                <td class=\"fd-calendar__item hidden-day\"></td>\n            </tr>\n        }\n        @if (_dayViewGrid.length === 4) {\n            <tr class=\"fd-calendar__row\">\n                <td class=\"fd-calendar__item hidden-day\"></td>\n            </tr>\n        }\n    </tbody>\n</table>\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n    <div [attr.id]=\"_todayLabelId\">{{ 'coreCalendar.todayLabel' | fdTranslate }}</div>\n    <div [attr.id]=\"_selectedDateLabelId\">{{ 'coreCalendar.dateSelectedLabel' | fdTranslate }}</div>\n    <div [attr.id]=\"_dateRangeStartLabelId\">{{ 'coreCalendar.rangeStartLabel' | fdTranslate }}</div>\n    <div [attr.id]=\"_dateRangeEndLabelId\">{{ 'coreCalendar.rangeEndLabel' | fdTranslate }}</div>\n    <div [attr.id]=\"_dateInPastLabelId\">{{ 'coreCalendar.dayInPastLabel' | fdTranslate }}</div>\n</div>\n", styles: [".hidden-day{visibility:hidden}.event-enabled{pointer-events:auto}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CalendarService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DATE_TIME_FORMATS]
@@ -2639,13 +2639,13 @@ class CalendarMonthViewComponent {
         this._focusElementBySelector(`#${this._getId(index)}`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CalendarMonthViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CalendarService }, { token: DATE_TIME_FORMATS }, { token: i2.DatetimeAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CalendarMonthViewComponent, isStandalone: true, selector: "fd-calendar-month-view", inputs: { id: "id", monthSelected: "monthSelected", focusEscapeFunction: "focusEscapeFunction", year: "year", isDateRangeMonthYearFormat: "isDateRangeMonthYearFormat", rangeHoverEffect: "rangeHoverEffect", selectedRangeDate: "selectedRangeDate" }, outputs: { monthClicked: "monthClicked", selectedRangeDateChange: "selectedRangeDateChange" }, host: { properties: { "attr.id": "viewId" } }, usesOnChanges: true, ngImport: i0, template: "<table\n    class=\"fd-calendar__content fd-calendar__content--months\"\n    role=\"grid\"\n    [attr.aria-roledescription]=\"('coreCalendar.calendarMonthViewDescription' | fdTranslate)()\"\n>\n    <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n        @for (colMonths of _calendarMonthListGrid; track colMonths + '' + rowIndex; let rowIndex = $index) {\n            <tr class=\"fd-calendar__row\" role=\"row\">\n                @for (monthCell of colMonths; track monthCell + '' + colIndex; let colIndex = $index) {\n                    <td\n                        class=\"fd-calendar__my-item\"\n                        role=\"gridcell\"\n                        [class.fd-calendar__my-item--current]=\"monthCell.current\"\n                        [class.is-active]=\"monthCell.selected\"\n                        [attr.tabIndex]=\"monthCell.tabIndex\"\n                        [attr.id]=\"monthCell.id\"\n                        [attr.aria-selected]=\"monthCell.selected\"\n                        [attr.aria-disabled]=\"monthCell.disabled\"\n                        [attr.data-fd-calendar-month]=\"monthCell.month\"\n                        (keydown)=\"_onKeydownMonthHandler($event, monthCell.index)\"\n                        (mouseenter)=\"_handleRangeHover(monthCell)\"\n                        (click)=\"selectMonth(monthCell, $event)\"\n                    >\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            [class.fd-button--toggled]=\"\n                                monthCell.selectedRange ||\n                                monthCell.hoverRange ||\n                                monthCell.selectedFirst ||\n                                monthCell.selectedLast\n                            \"\n                            class=\"fd-calendar__my-item-button\"\n                            [class.is-active]=\"monthCell.current\"\n                            tabindex=\"-1\"\n                        >\n                            <span\n                                class=\"fd-calendar__text\"\n                                [attr.aria-labelledby]=\"\n                                    monthCell.id +\n                                    '-aria-label ' +\n                                    (monthCell.current ? _todayLabelId + ' ' : '') +\n                                    (monthCell.selected ? _selectedDateLabelId : '')\n                                \"\n                            >\n                                {{ monthCell.label }}\n                            </span>\n                        </button>\n                        <span hidden aria-hidden=\"true\" [attr.id]=\"monthCell.id + '-aria-label'\">\n                            {{ monthCell.ariaLabel }}\n                        </span>\n                    </td>\n                }\n            </tr>\n        }\n    </tbody>\n</table>\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n    <div [attr.id]=\"_todayLabelId\">{{ ('coreCalendar.todayLabel' | fdTranslate)() }}</div>\n    <div [attr.id]=\"_selectedDateLabelId\">{{ ('coreCalendar.dateSelectedLabel' | fdTranslate)() }}</div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CalendarMonthViewComponent, isStandalone: true, selector: "fd-calendar-month-view", inputs: { id: "id", monthSelected: "monthSelected", focusEscapeFunction: "focusEscapeFunction", year: "year", isDateRangeMonthYearFormat: "isDateRangeMonthYearFormat", rangeHoverEffect: "rangeHoverEffect", selectedRangeDate: "selectedRangeDate" }, outputs: { monthClicked: "monthClicked", selectedRangeDateChange: "selectedRangeDateChange" }, host: { properties: { "attr.id": "viewId" } }, usesOnChanges: true, ngImport: i0, template: "<table\n    class=\"fd-calendar__content fd-calendar__content--months\"\n    role=\"grid\"\n    [attr.aria-roledescription]=\"'coreCalendar.calendarMonthViewDescription' | fdTranslate\"\n>\n    <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n        @for (colMonths of _calendarMonthListGrid; track colMonths + '' + rowIndex; let rowIndex = $index) {\n            <tr class=\"fd-calendar__row\" role=\"row\">\n                @for (monthCell of colMonths; track monthCell + '' + colIndex; let colIndex = $index) {\n                    <td\n                        class=\"fd-calendar__my-item\"\n                        role=\"gridcell\"\n                        [class.fd-calendar__my-item--current]=\"monthCell.current\"\n                        [class.is-active]=\"monthCell.selected\"\n                        [attr.tabIndex]=\"monthCell.tabIndex\"\n                        [attr.id]=\"monthCell.id\"\n                        [attr.aria-selected]=\"monthCell.selected\"\n                        [attr.aria-disabled]=\"monthCell.disabled\"\n                        [attr.data-fd-calendar-month]=\"monthCell.month\"\n                        (keydown)=\"_onKeydownMonthHandler($event, monthCell.index)\"\n                        (mouseenter)=\"_handleRangeHover(monthCell)\"\n                        (click)=\"selectMonth(monthCell, $event)\"\n                    >\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            [class.fd-button--toggled]=\"\n                                monthCell.selectedRange ||\n                                monthCell.hoverRange ||\n                                monthCell.selectedFirst ||\n                                monthCell.selectedLast\n                            \"\n                            class=\"fd-calendar__my-item-button\"\n                            [class.is-active]=\"monthCell.current\"\n                            tabindex=\"-1\"\n                        >\n                            <span\n                                class=\"fd-calendar__text\"\n                                [attr.aria-labelledby]=\"\n                                    monthCell.id +\n                                    '-aria-label ' +\n                                    (monthCell.current ? _todayLabelId + ' ' : '') +\n                                    (monthCell.selected ? _selectedDateLabelId : '')\n                                \"\n                            >\n                                {{ monthCell.label }}\n                            </span>\n                        </button>\n                        <span hidden aria-hidden=\"true\" [attr.id]=\"monthCell.id + '-aria-label'\">\n                            {{ monthCell.ariaLabel }}\n                        </span>\n                    </td>\n                }\n            </tr>\n        }\n    </tbody>\n</table>\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n    <div [attr.id]=\"_todayLabelId\">{{ 'coreCalendar.todayLabel' | fdTranslate }}</div>\n    <div [attr.id]=\"_selectedDateLabelId\">{{ 'coreCalendar.dateSelectedLabel' | fdTranslate }}</div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CalendarMonthViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-calendar-month-view', encapsulation: ViewEncapsulation.None, host: {
                         '[attr.id]': 'viewId'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, FdTranslatePipe], template: "<table\n    class=\"fd-calendar__content fd-calendar__content--months\"\n    role=\"grid\"\n    [attr.aria-roledescription]=\"('coreCalendar.calendarMonthViewDescription' | fdTranslate)()\"\n>\n    <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n        @for (colMonths of _calendarMonthListGrid; track colMonths + '' + rowIndex; let rowIndex = $index) {\n            <tr class=\"fd-calendar__row\" role=\"row\">\n                @for (monthCell of colMonths; track monthCell + '' + colIndex; let colIndex = $index) {\n                    <td\n                        class=\"fd-calendar__my-item\"\n                        role=\"gridcell\"\n                        [class.fd-calendar__my-item--current]=\"monthCell.current\"\n                        [class.is-active]=\"monthCell.selected\"\n                        [attr.tabIndex]=\"monthCell.tabIndex\"\n                        [attr.id]=\"monthCell.id\"\n                        [attr.aria-selected]=\"monthCell.selected\"\n                        [attr.aria-disabled]=\"monthCell.disabled\"\n                        [attr.data-fd-calendar-month]=\"monthCell.month\"\n                        (keydown)=\"_onKeydownMonthHandler($event, monthCell.index)\"\n                        (mouseenter)=\"_handleRangeHover(monthCell)\"\n                        (click)=\"selectMonth(monthCell, $event)\"\n                    >\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            [class.fd-button--toggled]=\"\n                                monthCell.selectedRange ||\n                                monthCell.hoverRange ||\n                                monthCell.selectedFirst ||\n                                monthCell.selectedLast\n                            \"\n                            class=\"fd-calendar__my-item-button\"\n                            [class.is-active]=\"monthCell.current\"\n                            tabindex=\"-1\"\n                        >\n                            <span\n                                class=\"fd-calendar__text\"\n                                [attr.aria-labelledby]=\"\n                                    monthCell.id +\n                                    '-aria-label ' +\n                                    (monthCell.current ? _todayLabelId + ' ' : '') +\n                                    (monthCell.selected ? _selectedDateLabelId : '')\n                                \"\n                            >\n                                {{ monthCell.label }}\n                            </span>\n                        </button>\n                        <span hidden aria-hidden=\"true\" [attr.id]=\"monthCell.id + '-aria-label'\">\n                            {{ monthCell.ariaLabel }}\n                        </span>\n                    </td>\n                }\n            </tr>\n        }\n    </tbody>\n</table>\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n    <div [attr.id]=\"_todayLabelId\">{{ ('coreCalendar.todayLabel' | fdTranslate)() }}</div>\n    <div [attr.id]=\"_selectedDateLabelId\">{{ ('coreCalendar.dateSelectedLabel' | fdTranslate)() }}</div>\n</div>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, FdTranslatePipe], template: "<table\n    class=\"fd-calendar__content fd-calendar__content--months\"\n    role=\"grid\"\n    [attr.aria-roledescription]=\"'coreCalendar.calendarMonthViewDescription' | fdTranslate\"\n>\n    <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n        @for (colMonths of _calendarMonthListGrid; track colMonths + '' + rowIndex; let rowIndex = $index) {\n            <tr class=\"fd-calendar__row\" role=\"row\">\n                @for (monthCell of colMonths; track monthCell + '' + colIndex; let colIndex = $index) {\n                    <td\n                        class=\"fd-calendar__my-item\"\n                        role=\"gridcell\"\n                        [class.fd-calendar__my-item--current]=\"monthCell.current\"\n                        [class.is-active]=\"monthCell.selected\"\n                        [attr.tabIndex]=\"monthCell.tabIndex\"\n                        [attr.id]=\"monthCell.id\"\n                        [attr.aria-selected]=\"monthCell.selected\"\n                        [attr.aria-disabled]=\"monthCell.disabled\"\n                        [attr.data-fd-calendar-month]=\"monthCell.month\"\n                        (keydown)=\"_onKeydownMonthHandler($event, monthCell.index)\"\n                        (mouseenter)=\"_handleRangeHover(monthCell)\"\n                        (click)=\"selectMonth(monthCell, $event)\"\n                    >\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            [class.fd-button--toggled]=\"\n                                monthCell.selectedRange ||\n                                monthCell.hoverRange ||\n                                monthCell.selectedFirst ||\n                                monthCell.selectedLast\n                            \"\n                            class=\"fd-calendar__my-item-button\"\n                            [class.is-active]=\"monthCell.current\"\n                            tabindex=\"-1\"\n                        >\n                            <span\n                                class=\"fd-calendar__text\"\n                                [attr.aria-labelledby]=\"\n                                    monthCell.id +\n                                    '-aria-label ' +\n                                    (monthCell.current ? _todayLabelId + ' ' : '') +\n                                    (monthCell.selected ? _selectedDateLabelId : '')\n                                \"\n                            >\n                                {{ monthCell.label }}\n                            </span>\n                        </button>\n                        <span hidden aria-hidden=\"true\" [attr.id]=\"monthCell.id + '-aria-label'\">\n                            {{ monthCell.ariaLabel }}\n                        </span>\n                    </td>\n                }\n            </tr>\n        }\n    </tbody>\n</table>\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n    <div [attr.id]=\"_todayLabelId\">{{ 'coreCalendar.todayLabel' | fdTranslate }}</div>\n    <div [attr.id]=\"_selectedDateLabelId\">{{ 'coreCalendar.dateSelectedLabel' | fdTranslate }}</div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CalendarService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DATE_TIME_FORMATS]
@@ -3081,13 +3081,13 @@ class CalendarYearViewComponent {
         this._focusElementBySelector(`#${this._getId(index)}`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CalendarYearViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CalendarService }, { token: i2.DatetimeAdapter }, { token: DATE_TIME_FORMATS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CalendarYearViewComponent, isStandalone: true, selector: "fd-calendar-year-view", inputs: { id: "id", focusEscapeFunction: "focusEscapeFunction", yearSelected: "yearSelected", yearViewGrid: "yearViewGrid", isDateRangeYearFormat: "isDateRangeYearFormat", rangeHoverEffect: "rangeHoverEffect", selectedRangeDate: "selectedRangeDate" }, outputs: { yearClicked: "yearClicked", selectedRangeDateChange: "selectedRangeDateChange" }, host: { properties: { "attr.id": "viewId" } }, usesOnChanges: true, ngImport: i0, template: "<table\n    class=\"fd-calendar__content fd-calendar__content--years\"\n    role=\"grid\"\n    [attr.aria-roledescription]=\"('coreCalendar.calendarYearsViewDescription' | fdTranslate)()\"\n>\n    <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n        @for (colYears of _calendarYearListGrid; track colYears + '' + rowIndex; let rowIndex = $index) {\n            <tr class=\"fd-calendar__row\" role=\"row\">\n                @for (yearCell of colYears; track yearCell + '' + colIndex; let colIndex = $index) {\n                    <td\n                        class=\"fd-calendar__my-item\"\n                        role=\"gridcell\"\n                        [class.fd-calendar__my-item--current]=\"yearCell.current\"\n                        [class.is-active]=\"yearCell.selected\"\n                        [attr.id]=\"yearCell.id\"\n                        [attr.tabindex]=\"yearCell.tabIndex\"\n                        [attr.aria-selected]=\"yearCell.selected\"\n                        [attr.aria-disabled]=\"yearCell.disabled\"\n                        [attr.data-fd-calendar-year]=\"yearCell.year\"\n                        (keydown)=\"_onKeydownYearHandler($event, yearCell.index)\"\n                        (mouseenter)=\"_handleRangeHover(yearCell)\"\n                        (click)=\"selectYear(yearCell, $event)\"\n                    >\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            [class.fd-button--toggled]=\"\n                                yearCell.selectedRange ||\n                                yearCell.hoverRange ||\n                                yearCell.selectedFirst ||\n                                yearCell.selectedLast\n                            \"\n                            class=\"fd-calendar__my-item-button\"\n                            [class.is-active]=\"yearCell.current\"\n                            tabindex=\"-1\"\n                        >\n                            <span\n                                class=\"fd-calendar__text\"\n                                [attr.aria-labelledby]=\"\n                                    yearCell.id +\n                                    '-aria-label ' +\n                                    (yearCell.current ? _todayLabelId + ' ' : '') +\n                                    (yearCell.selected ? _selectedDateLabelId : '')\n                                \"\n                            >\n                                {{ yearCell.label }}\n                            </span>\n                        </button>\n                        <span hidden aria-hidden=\"true\" [attr.id]=\"yearCell.id + '-aria-label'\">\n                            {{ yearCell.ariaLabel }}\n                        </span>\n                    </td>\n                }\n            </tr>\n        }\n    </tbody>\n</table>\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n    <div [attr.id]=\"_todayLabelId\">{{ ('coreCalendar.todayLabel' | fdTranslate)() }}</div>\n    <div [attr.id]=\"_selectedDateLabelId\">{{ ('coreCalendar.dateSelectedLabel' | fdTranslate)() }}</div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CalendarYearViewComponent, isStandalone: true, selector: "fd-calendar-year-view", inputs: { id: "id", focusEscapeFunction: "focusEscapeFunction", yearSelected: "yearSelected", yearViewGrid: "yearViewGrid", isDateRangeYearFormat: "isDateRangeYearFormat", rangeHoverEffect: "rangeHoverEffect", selectedRangeDate: "selectedRangeDate" }, outputs: { yearClicked: "yearClicked", selectedRangeDateChange: "selectedRangeDateChange" }, host: { properties: { "attr.id": "viewId" } }, usesOnChanges: true, ngImport: i0, template: "<table\n    class=\"fd-calendar__content fd-calendar__content--years\"\n    role=\"grid\"\n    [attr.aria-roledescription]=\"'coreCalendar.calendarYearsViewDescription' | fdTranslate\"\n>\n    <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n        @for (colYears of _calendarYearListGrid; track colYears + '' + rowIndex; let rowIndex = $index) {\n            <tr class=\"fd-calendar__row\" role=\"row\">\n                @for (yearCell of colYears; track yearCell + '' + colIndex; let colIndex = $index) {\n                    <td\n                        class=\"fd-calendar__my-item\"\n                        role=\"gridcell\"\n                        [class.fd-calendar__my-item--current]=\"yearCell.current\"\n                        [class.is-active]=\"yearCell.selected\"\n                        [attr.id]=\"yearCell.id\"\n                        [attr.tabindex]=\"yearCell.tabIndex\"\n                        [attr.aria-selected]=\"yearCell.selected\"\n                        [attr.aria-disabled]=\"yearCell.disabled\"\n                        [attr.data-fd-calendar-year]=\"yearCell.year\"\n                        (keydown)=\"_onKeydownYearHandler($event, yearCell.index)\"\n                        (mouseenter)=\"_handleRangeHover(yearCell)\"\n                        (click)=\"selectYear(yearCell, $event)\"\n                    >\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            [class.fd-button--toggled]=\"\n                                yearCell.selectedRange ||\n                                yearCell.hoverRange ||\n                                yearCell.selectedFirst ||\n                                yearCell.selectedLast\n                            \"\n                            class=\"fd-calendar__my-item-button\"\n                            [class.is-active]=\"yearCell.current\"\n                            tabindex=\"-1\"\n                        >\n                            <span\n                                class=\"fd-calendar__text\"\n                                [attr.aria-labelledby]=\"\n                                    yearCell.id +\n                                    '-aria-label ' +\n                                    (yearCell.current ? _todayLabelId + ' ' : '') +\n                                    (yearCell.selected ? _selectedDateLabelId : '')\n                                \"\n                            >\n                                {{ yearCell.label }}\n                            </span>\n                        </button>\n                        <span hidden aria-hidden=\"true\" [attr.id]=\"yearCell.id + '-aria-label'\">\n                            {{ yearCell.ariaLabel }}\n                        </span>\n                    </td>\n                }\n            </tr>\n        }\n    </tbody>\n</table>\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n    <div [attr.id]=\"_todayLabelId\">{{ 'coreCalendar.todayLabel' | fdTranslate }}</div>\n    <div [attr.id]=\"_selectedDateLabelId\">{{ 'coreCalendar.dateSelectedLabel' | fdTranslate }}</div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CalendarYearViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-calendar-year-view', encapsulation: ViewEncapsulation.None, host: {
                         '[attr.id]': 'viewId'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, FdTranslatePipe], template: "<table\n    class=\"fd-calendar__content fd-calendar__content--years\"\n    role=\"grid\"\n    [attr.aria-roledescription]=\"('coreCalendar.calendarYearsViewDescription' | fdTranslate)()\"\n>\n    <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n        @for (colYears of _calendarYearListGrid; track colYears + '' + rowIndex; let rowIndex = $index) {\n            <tr class=\"fd-calendar__row\" role=\"row\">\n                @for (yearCell of colYears; track yearCell + '' + colIndex; let colIndex = $index) {\n                    <td\n                        class=\"fd-calendar__my-item\"\n                        role=\"gridcell\"\n                        [class.fd-calendar__my-item--current]=\"yearCell.current\"\n                        [class.is-active]=\"yearCell.selected\"\n                        [attr.id]=\"yearCell.id\"\n                        [attr.tabindex]=\"yearCell.tabIndex\"\n                        [attr.aria-selected]=\"yearCell.selected\"\n                        [attr.aria-disabled]=\"yearCell.disabled\"\n                        [attr.data-fd-calendar-year]=\"yearCell.year\"\n                        (keydown)=\"_onKeydownYearHandler($event, yearCell.index)\"\n                        (mouseenter)=\"_handleRangeHover(yearCell)\"\n                        (click)=\"selectYear(yearCell, $event)\"\n                    >\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            [class.fd-button--toggled]=\"\n                                yearCell.selectedRange ||\n                                yearCell.hoverRange ||\n                                yearCell.selectedFirst ||\n                                yearCell.selectedLast\n                            \"\n                            class=\"fd-calendar__my-item-button\"\n                            [class.is-active]=\"yearCell.current\"\n                            tabindex=\"-1\"\n                        >\n                            <span\n                                class=\"fd-calendar__text\"\n                                [attr.aria-labelledby]=\"\n                                    yearCell.id +\n                                    '-aria-label ' +\n                                    (yearCell.current ? _todayLabelId + ' ' : '') +\n                                    (yearCell.selected ? _selectedDateLabelId : '')\n                                \"\n                            >\n                                {{ yearCell.label }}\n                            </span>\n                        </button>\n                        <span hidden aria-hidden=\"true\" [attr.id]=\"yearCell.id + '-aria-label'\">\n                            {{ yearCell.ariaLabel }}\n                        </span>\n                    </td>\n                }\n            </tr>\n        }\n    </tbody>\n</table>\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n    <div [attr.id]=\"_todayLabelId\">{{ ('coreCalendar.todayLabel' | fdTranslate)() }}</div>\n    <div [attr.id]=\"_selectedDateLabelId\">{{ ('coreCalendar.dateSelectedLabel' | fdTranslate)() }}</div>\n</div>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, FdTranslatePipe], template: "<table\n    class=\"fd-calendar__content fd-calendar__content--years\"\n    role=\"grid\"\n    [attr.aria-roledescription]=\"'coreCalendar.calendarYearsViewDescription' | fdTranslate\"\n>\n    <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n        @for (colYears of _calendarYearListGrid; track colYears + '' + rowIndex; let rowIndex = $index) {\n            <tr class=\"fd-calendar__row\" role=\"row\">\n                @for (yearCell of colYears; track yearCell + '' + colIndex; let colIndex = $index) {\n                    <td\n                        class=\"fd-calendar__my-item\"\n                        role=\"gridcell\"\n                        [class.fd-calendar__my-item--current]=\"yearCell.current\"\n                        [class.is-active]=\"yearCell.selected\"\n                        [attr.id]=\"yearCell.id\"\n                        [attr.tabindex]=\"yearCell.tabIndex\"\n                        [attr.aria-selected]=\"yearCell.selected\"\n                        [attr.aria-disabled]=\"yearCell.disabled\"\n                        [attr.data-fd-calendar-year]=\"yearCell.year\"\n                        (keydown)=\"_onKeydownYearHandler($event, yearCell.index)\"\n                        (mouseenter)=\"_handleRangeHover(yearCell)\"\n                        (click)=\"selectYear(yearCell, $event)\"\n                    >\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            [class.fd-button--toggled]=\"\n                                yearCell.selectedRange ||\n                                yearCell.hoverRange ||\n                                yearCell.selectedFirst ||\n                                yearCell.selectedLast\n                            \"\n                            class=\"fd-calendar__my-item-button\"\n                            [class.is-active]=\"yearCell.current\"\n                            tabindex=\"-1\"\n                        >\n                            <span\n                                class=\"fd-calendar__text\"\n                                [attr.aria-labelledby]=\"\n                                    yearCell.id +\n                                    '-aria-label ' +\n                                    (yearCell.current ? _todayLabelId + ' ' : '') +\n                                    (yearCell.selected ? _selectedDateLabelId : '')\n                                \"\n                            >\n                                {{ yearCell.label }}\n                            </span>\n                        </button>\n                        <span hidden aria-hidden=\"true\" [attr.id]=\"yearCell.id + '-aria-label'\">\n                            {{ yearCell.ariaLabel }}\n                        </span>\n                    </td>\n                }\n            </tr>\n        }\n    </tbody>\n</table>\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n    <div [attr.id]=\"_todayLabelId\">{{ 'coreCalendar.todayLabel' | fdTranslate }}</div>\n    <div [attr.id]=\"_selectedDateLabelId\">{{ 'coreCalendar.dateSelectedLabel' | fdTranslate }}</div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CalendarService }, { type: i2.DatetimeAdapter }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DATE_TIME_FORMATS]
@@ -3168,24 +3168,20 @@ class CalendarI18nLabels {
 }
 
 /**
- * Use deprecated `CalendarI18nLabels` to patch `FD_LANGUAGE_SIGNAL` signal
+ * Use deprecated `CalendarI18nLabels` to patch `FD_LANGUAGE` observable
  */
 function patchDeprecatedI18nLabels() {
     const deprecatedSymbol = inject(CalendarI18nLabels, { optional: true });
     if (deprecatedSymbol) {
-        const parentSignal = inject(FD_LANGUAGE_SIGNAL, { skipSelf: true });
-        return computed(() => {
-            const existingLang = parentSignal();
-            return {
-                ...existingLang,
-                coreCalendar: {
-                    ...existingLang.coreCalendar,
-                    ...deprecatedSymbol
-                }
-            };
-        });
+        return inject(FD_LANGUAGE, { skipSelf: true }).pipe(switchMap((existingLang) => deprecatedSymbol.labelsChange.pipe(startWith(null), map(() => existingLang))), map((existingLang) => ({
+            ...existingLang,
+            coreCalendar: {
+                ...existingLang.coreCalendar,
+                ...deprecatedSymbol
+            }
+        })));
     }
-    return inject(FD_LANGUAGE_SIGNAL, { skipSelf: true });
+    return inject(FD_LANGUAGE, { skipSelf: true });
 }
 
 let calendarUniqueId = 0;
@@ -3793,7 +3789,7 @@ class CalendarComponent {
             CalendarLegendFocusingService,
             contentDensityObserverProviders(),
             {
-                provide: FD_LANGUAGE_SIGNAL,
+                provide: FD_LANGUAGE,
                 useFactory: patchDeprecatedI18nLabels
             }
         ], viewQueries: [{ propertyName: "_dayViewComponent", first: true, predicate: CalendarDayViewComponent, descendants: true }, { propertyName: "_monthViewComponent", first: true, predicate: CalendarMonthViewComponent, descendants: true }, { propertyName: "_yearViewComponent", first: true, predicate: CalendarYearViewComponent, descendants: true }, { propertyName: "_aggregatedYearViewComponent", first: true, predicate: CalendarAggregatedYearViewComponent, descendants: true }, { propertyName: "_calendarHeaderComponent", first: true, predicate: CalendarHeaderComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<fd-calendar-header\n    [currentlyDisplayed]=\"_currentlyDisplayed\"\n    [activeView]=\"activeView\"\n    [id]=\"id\"\n    [calendarYearGrid]=\"yearGrid\"\n    (closeClicked)=\"closeClicked.emit()\"\n    (nextClicked)=\"handleNextArrowClick()\"\n    (previousClicked)=\"handlePreviousArrowClick()\"\n    [previousButtonDisabled]=\"previousButtonDisabled\"\n    [nextButtonDisabled]=\"nextButtonDisabled\"\n    (activeViewChange)=\"handleActiveViewChange($event)\"\n></fd-calendar-header>\n@if (_currentlyDisplayed) {\n    @if (activeView === 'day') {\n        <fd-calendar-day-view\n            [selectedDate]=\"selectedDate\"\n            [selectedMultipleDates]=\"selectedMultipleDates\"\n            [selectedRangeDate]=\"selectedRangeDate\"\n            [selectedMultipleDateRanges]=\"selectedMultipleDateRanges\"\n            (selectedDateChange)=\"selectedDateChanged($event)\"\n            (selectedMultipleDatesChange)=\"selectedMultipleDatesChanged($event)\"\n            (selectedRangeDateChange)=\"selectedRangeDateChanged($event)\"\n            (selectedMultipleDateRangesChange)=\"selectedMultipleDateRangesChanged($event)\"\n            [showWeekNumbers]=\"showWeekNumbers\"\n            [allowMultipleSelection]=\"allowMultipleSelection\"\n            [markWeekends]=\"markWeekends\"\n            [currentlyDisplayed]=\"_currentlyDisplayed\"\n            [startingDayOfWeek]=\"getWeekStartDay()\"\n            [disableFunction]=\"disableFunction\"\n            [disableRangeEndFunction]=\"disableRangeEndFunction\"\n            [disableRangeStartFunction]=\"disableRangeStartFunction\"\n            [calType]=\"calType\"\n            [id]=\"id\"\n            [rangeHoverEffect]=\"rangeHoverEffect\"\n            [specialDaysRules]=\"specialDaysRules\"\n            [focusEscapeFunction]=\"escapeFocusFunction\"\n            (nextMonthSelect)=\"displayNextMonth()\"\n            (previousMonthSelect)=\"displayPreviousMonth()\"\n        ></fd-calendar-day-view>\n    } @else if (activeView === 'month') {\n        <fd-calendar-month-view\n            [monthSelected]=\"_currentlyDisplayed.month\"\n            [year]=\"_currentlyDisplayed.year\"\n            [id]=\"id\"\n            [focusEscapeFunction]=\"escapeFocusFunction\"\n            [isDateRangeMonthYearFormat]=\"isDateRangeMonthFormat()\"\n            [selectedRangeDate]=\"selectedRangeDate\"\n            [rangeHoverEffect]=\"rangeHoverEffect\"\n            (selectedRangeDateChange)=\"selectedRangeDateChanged($event)\"\n            (monthClicked)=\"handleMonthViewChange($event)\"\n        ></fd-calendar-month-view>\n    } @else if (activeView === 'year') {\n        <fd-calendar-year-view\n            [yearSelected]=\"_currentlyDisplayed.year\"\n            [yearViewGrid]=\"yearGrid\"\n            [id]=\"id\"\n            [focusEscapeFunction]=\"escapeFocusFunction\"\n            [isDateRangeYearFormat]=\"isDateRangeYearFormat()\"\n            [selectedRangeDate]=\"selectedRangeDate\"\n            [rangeHoverEffect]=\"rangeHoverEffect\"\n            (selectedRangeDateChange)=\"selectedRangeDateChanged($event)\"\n            (yearClicked)=\"selectedYear($event)\"\n        >\n        </fd-calendar-year-view>\n    } @else if (activeView === 'aggregatedYear') {\n        <fd-calendar-aggregated-year-view\n            (yearsClicked)=\"selectedYears($event)\"\n            [yearSelected]=\"_currentlyDisplayed.year\"\n            [yearViewGrid]=\"yearGrid\"\n            [aggregatedYearsViewGrid]=\"aggregatedYearGrid\"\n            [id]=\"id\"\n            [focusEscapeFunction]=\"escapeFocusFunction\"\n        >\n        </fd-calendar-aggregated-year-view>\n    }\n}\n@if (showCalendarLegend && specialDaysRules.length > 0) {\n    <fd-calendar-legend [specialDaysRules]=\"specialDaysRules\" [col]=\"legendCol\"> </fd-calendar-legend>\n}\n", styles: [".fd-calendar .fd-calendar__my-item,.fd-calendar__item{background-color:var(--fdCalendar_Item_Background);border:0;border-radius:var(--fdCalendar_Border_Radius);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-block:var(--fdCalendar_Item_Spacing);margin-inline:0;margin-inline:var(--fdCalendar_Item_Spacing);min-width:var(--fdCalendar_Item_Width);overflow:hidden;padding-block:0;padding-inline:0;position:relative;-webkit-box-flex:1;border:var(--fdCalendar_Item_Border);cursor:pointer;display:inline-block;-ms-flex:1 1 calc(var(--fdCalendar_Item_Current_Border_Width)*2 + var(--fdCalendar_Item_Spacing)*2);flex:1 1 calc(var(--fdCalendar_Item_Current_Border_Width)*2 + var(--fdCalendar_Item_Spacing)*2)}.fd-calendar .fd-calendar__my-item:after,.fd-calendar .fd-calendar__my-item:before,.fd-calendar__item:after,.fd-calendar__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}[class*=fd-calendar__item--legend-]:not(.fd-calendar__item--today) .fd-calendar__text-wrapper:after{border-bottom:none;border-top:var(--fdCalendar_Item_Legend_Top_Border);bottom:0;content:\"\";height:.3125rem;left:0;position:absolute;right:0;width:100%}[class*=fd-calendar__item--legend-]:not(.fd-calendar__item--today).is-focus,[class*=fd-calendar__item--legend-]:not(.fd-calendar__item--today):focus{z-index:5}[class*=fd-calendar__item--legend-]:not(.fd-calendar__item--today).is-focus .fd-calendar__text-wrapper:after,[class*=fd-calendar__item--legend-]:not(.fd-calendar__item--today):focus .fd-calendar__text-wrapper:after{z-index:var(--fdCalendar_Text_Wrapper_After_Z)}.fd-calendar__item--today[class*=fd-calendar__item--legend-].is-focus,.fd-calendar__item--today[class*=fd-calendar__item--legend-]:focus{z-index:5}.fd-calendar__item--today[class*=fd-calendar__item--legend-].is-focus .fd-calendar__text-wrapper:after,.fd-calendar__item--today[class*=fd-calendar__item--legend-]:focus .fd-calendar__text-wrapper:after{border-bottom:none}.fd-calendar__item--today[class*=fd-calendar__item--legend-].is-focus .fd-calendar__text:after,.fd-calendar__item--today[class*=fd-calendar__item--legend-]:focus .fd-calendar__text:after{bottom:0;content:\"\";height:.1875rem;left:0;position:absolute;right:0;width:100%}.fd-calendar__item--today[class*=fd-calendar__item--legend-] .fd-calendar__text-wrapper:after{border-radius:.3125rem;bottom:.0625rem;content:\"\";height:.5rem;left:.0625rem;position:absolute;right:0;width:calc(100% - .125rem)}.fd-calendar__item--today[class*=fd-calendar__item--legend-][dir=rtl] .fd-calendar__text-wrapper:after,[dir=rtl] .fd-calendar__item--today[class*=fd-calendar__item--legend-] .fd-calendar__text-wrapper:after{left:0;right:.0625rem}.fd-calendar__item--legend-1:not(.fd-calendar__item--today) .fd-calendar__text-wrapper:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor1);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor1)}.fd-calendar__item--legend-1:not(.fd-calendar__item--today).fd-calendar__item--range .fd-calendar__text-wrapper:after,.fd-calendar__item--legend-1:not(.fd-calendar__item--today).fd-calendar__item--selected .fd-calendar__text-wrapper:after{height:var(--fdCalendar_Item_Selected_Legend_Height)}.fd-calendar__item--today.fd-calendar__item--legend-1.is-focus,.fd-calendar__item--today.fd-calendar__item--legend-1:focus{z-index:5}.fd-calendar__item--today.fd-calendar__item--legend-1.is-focus .fd-calendar__text:after,.fd-calendar__item--today.fd-calendar__item--legend-1:focus .fd-calendar__text:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor1);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor1)}.fd-calendar__item--today.fd-calendar__item--legend-1 .fd-calendar__text-wrapper:after{border-bottom:.25rem solid var(--sapLegendColor1);border-radius:0 0 var(--fdCalendar_Item_Legend_Bottom_Border_Radius) var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);bottom:.0625rem;content:\"\";height:var(--fdCalendar_Item_Text_Wrapper_Height);left:.0625rem;position:absolute;right:0;width:calc(100% - .125rem)}.fd-calendar__item--today.fd-calendar__item--legend-1[dir=rtl] .fd-calendar__text-wrapper:after,[dir=rtl] .fd-calendar__item--today.fd-calendar__item--legend-1 .fd-calendar__text-wrapper:after{left:0;right:.0625rem}.fd-calendar__item--legend-2:not(.fd-calendar__item--today) .fd-calendar__text-wrapper:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor2);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor2)}.fd-calendar__item--legend-2:not(.fd-calendar__item--today).fd-calendar__item--range .fd-calendar__text-wrapper:after,.fd-calendar__item--legend-2:not(.fd-calendar__item--today).fd-calendar__item--selected .fd-calendar__text-wrapper:after{height:var(--fdCalendar_Item_Selected_Legend_Height)}.fd-calendar__item--today.fd-calendar__item--legend-2.is-focus,.fd-calendar__item--today.fd-calendar__item--legend-2:focus{z-index:5}.fd-calendar__item--today.fd-calendar__item--legend-2.is-focus .fd-calendar__text:after,.fd-calendar__item--today.fd-calendar__item--legend-2:focus .fd-calendar__text:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor2);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor2)}.fd-calendar__item--today.fd-calendar__item--legend-2 .fd-calendar__text-wrapper:after{border-bottom:.25rem solid var(--sapLegendColor2);border-radius:0 0 var(--fdCalendar_Item_Legend_Bottom_Border_Radius) var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);bottom:.0625rem;content:\"\";height:var(--fdCalendar_Item_Text_Wrapper_Height);left:.0625rem;position:absolute;right:0;width:calc(100% - .125rem)}.fd-calendar__item--today.fd-calendar__item--legend-2[dir=rtl] .fd-calendar__text-wrapper:after,[dir=rtl] .fd-calendar__item--today.fd-calendar__item--legend-2 .fd-calendar__text-wrapper:after{left:0;right:.0625rem}.fd-calendar__item--legend-3:not(.fd-calendar__item--today) .fd-calendar__text-wrapper:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor3);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor3)}.fd-calendar__item--legend-3:not(.fd-calendar__item--today).fd-calendar__item--range .fd-calendar__text-wrapper:after,.fd-calendar__item--legend-3:not(.fd-calendar__item--today).fd-calendar__item--selected .fd-calendar__text-wrapper:after{height:var(--fdCalendar_Item_Selected_Legend_Height)}.fd-calendar__item--today.fd-calendar__item--legend-3.is-focus,.fd-calendar__item--today.fd-calendar__item--legend-3:focus{z-index:5}.fd-calendar__item--today.fd-calendar__item--legend-3.is-focus .fd-calendar__text:after,.fd-calendar__item--today.fd-calendar__item--legend-3:focus .fd-calendar__text:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor3);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor3)}.fd-calendar__item--today.fd-calendar__item--legend-3 .fd-calendar__text-wrapper:after{border-bottom:.25rem solid var(--sapLegendColor3);border-radius:0 0 var(--fdCalendar_Item_Legend_Bottom_Border_Radius) var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);bottom:.0625rem;content:\"\";height:var(--fdCalendar_Item_Text_Wrapper_Height);left:.0625rem;position:absolute;right:0;width:calc(100% - .125rem)}.fd-calendar__item--today.fd-calendar__item--legend-3[dir=rtl] .fd-calendar__text-wrapper:after,[dir=rtl] .fd-calendar__item--today.fd-calendar__item--legend-3 .fd-calendar__text-wrapper:after{left:0;right:.0625rem}.fd-calendar__item--legend-4:not(.fd-calendar__item--today) .fd-calendar__text-wrapper:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor4);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor4)}.fd-calendar__item--legend-4:not(.fd-calendar__item--today).fd-calendar__item--range .fd-calendar__text-wrapper:after,.fd-calendar__item--legend-4:not(.fd-calendar__item--today).fd-calendar__item--selected .fd-calendar__text-wrapper:after{height:var(--fdCalendar_Item_Selected_Legend_Height)}.fd-calendar__item--today.fd-calendar__item--legend-4.is-focus,.fd-calendar__item--today.fd-calendar__item--legend-4:focus{z-index:5}.fd-calendar__item--today.fd-calendar__item--legend-4.is-focus .fd-calendar__text:after,.fd-calendar__item--today.fd-calendar__item--legend-4:focus .fd-calendar__text:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor4);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor4)}.fd-calendar__item--today.fd-calendar__item--legend-4 .fd-calendar__text-wrapper:after{border-bottom:.25rem solid var(--sapLegendColor4);border-radius:0 0 var(--fdCalendar_Item_Legend_Bottom_Border_Radius) var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);bottom:.0625rem;content:\"\";height:var(--fdCalendar_Item_Text_Wrapper_Height);left:.0625rem;position:absolute;right:0;width:calc(100% - .125rem)}.fd-calendar__item--today.fd-calendar__item--legend-4[dir=rtl] .fd-calendar__text-wrapper:after,[dir=rtl] .fd-calendar__item--today.fd-calendar__item--legend-4 .fd-calendar__text-wrapper:after{left:0;right:.0625rem}.fd-calendar__item--legend-5:not(.fd-calendar__item--today) .fd-calendar__text-wrapper:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor5);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor5)}.fd-calendar__item--legend-5:not(.fd-calendar__item--today).fd-calendar__item--range .fd-calendar__text-wrapper:after,.fd-calendar__item--legend-5:not(.fd-calendar__item--today).fd-calendar__item--selected .fd-calendar__text-wrapper:after{height:var(--fdCalendar_Item_Selected_Legend_Height)}.fd-calendar__item--today.fd-calendar__item--legend-5.is-focus,.fd-calendar__item--today.fd-calendar__item--legend-5:focus{z-index:5}.fd-calendar__item--today.fd-calendar__item--legend-5.is-focus .fd-calendar__text:after,.fd-calendar__item--today.fd-calendar__item--legend-5:focus .fd-calendar__text:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor5);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor5)}.fd-calendar__item--today.fd-calendar__item--legend-5 .fd-calendar__text-wrapper:after{border-bottom:.25rem solid var(--sapLegendColor5);border-radius:0 0 var(--fdCalendar_Item_Legend_Bottom_Border_Radius) var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);bottom:.0625rem;content:\"\";height:var(--fdCalendar_Item_Text_Wrapper_Height);left:.0625rem;position:absolute;right:0;width:calc(100% - .125rem)}.fd-calendar__item--today.fd-calendar__item--legend-5[dir=rtl] .fd-calendar__text-wrapper:after,[dir=rtl] .fd-calendar__item--today.fd-calendar__item--legend-5 .fd-calendar__text-wrapper:after{left:0;right:.0625rem}.fd-calendar__item--legend-6:not(.fd-calendar__item--today) .fd-calendar__text-wrapper:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor6);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor6)}.fd-calendar__item--legend-6:not(.fd-calendar__item--today).fd-calendar__item--range .fd-calendar__text-wrapper:after,.fd-calendar__item--legend-6:not(.fd-calendar__item--today).fd-calendar__item--selected .fd-calendar__text-wrapper:after{height:var(--fdCalendar_Item_Selected_Legend_Height)}.fd-calendar__item--today.fd-calendar__item--legend-6.is-focus,.fd-calendar__item--today.fd-calendar__item--legend-6:focus{z-index:5}.fd-calendar__item--today.fd-calendar__item--legend-6.is-focus .fd-calendar__text:after,.fd-calendar__item--today.fd-calendar__item--legend-6:focus .fd-calendar__text:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor6);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor6)}.fd-calendar__item--today.fd-calendar__item--legend-6 .fd-calendar__text-wrapper:after{border-bottom:.25rem solid var(--sapLegendColor6);border-radius:0 0 var(--fdCalendar_Item_Legend_Bottom_Border_Radius) var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);bottom:.0625rem;content:\"\";height:var(--fdCalendar_Item_Text_Wrapper_Height);left:.0625rem;position:absolute;right:0;width:calc(100% - .125rem)}.fd-calendar__item--today.fd-calendar__item--legend-6[dir=rtl] .fd-calendar__text-wrapper:after,[dir=rtl] .fd-calendar__item--today.fd-calendar__item--legend-6 .fd-calendar__text-wrapper:after{left:0;right:.0625rem}.fd-calendar__item--legend-7:not(.fd-calendar__item--today) .fd-calendar__text-wrapper:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor7);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor7)}.fd-calendar__item--legend-7:not(.fd-calendar__item--today).fd-calendar__item--range .fd-calendar__text-wrapper:after,.fd-calendar__item--legend-7:not(.fd-calendar__item--today).fd-calendar__item--selected .fd-calendar__text-wrapper:after{height:var(--fdCalendar_Item_Selected_Legend_Height)}.fd-calendar__item--today.fd-calendar__item--legend-7.is-focus,.fd-calendar__item--today.fd-calendar__item--legend-7:focus{z-index:5}.fd-calendar__item--today.fd-calendar__item--legend-7.is-focus .fd-calendar__text:after,.fd-calendar__item--today.fd-calendar__item--legend-7:focus .fd-calendar__text:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor7);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor7)}.fd-calendar__item--today.fd-calendar__item--legend-7 .fd-calendar__text-wrapper:after{border-bottom:.25rem solid var(--sapLegendColor7);border-radius:0 0 var(--fdCalendar_Item_Legend_Bottom_Border_Radius) var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);bottom:.0625rem;content:\"\";height:var(--fdCalendar_Item_Text_Wrapper_Height);left:.0625rem;position:absolute;right:0;width:calc(100% - .125rem)}.fd-calendar__item--today.fd-calendar__item--legend-7[dir=rtl] .fd-calendar__text-wrapper:after,[dir=rtl] .fd-calendar__item--today.fd-calendar__item--legend-7 .fd-calendar__text-wrapper:after{left:0;right:.0625rem}.fd-calendar__item--legend-8:not(.fd-calendar__item--today) .fd-calendar__text-wrapper:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor8);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor8)}.fd-calendar__item--legend-8:not(.fd-calendar__item--today).fd-calendar__item--range .fd-calendar__text-wrapper:after,.fd-calendar__item--legend-8:not(.fd-calendar__item--today).fd-calendar__item--selected .fd-calendar__text-wrapper:after{height:var(--fdCalendar_Item_Selected_Legend_Height)}.fd-calendar__item--today.fd-calendar__item--legend-8.is-focus,.fd-calendar__item--today.fd-calendar__item--legend-8:focus{z-index:5}.fd-calendar__item--today.fd-calendar__item--legend-8.is-focus .fd-calendar__text:after,.fd-calendar__item--today.fd-calendar__item--legend-8:focus .fd-calendar__text:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor8);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor8)}.fd-calendar__item--today.fd-calendar__item--legend-8 .fd-calendar__text-wrapper:after{border-bottom:.25rem solid var(--sapLegendColor8);border-radius:0 0 var(--fdCalendar_Item_Legend_Bottom_Border_Radius) var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);bottom:.0625rem;content:\"\";height:var(--fdCalendar_Item_Text_Wrapper_Height);left:.0625rem;position:absolute;right:0;width:calc(100% - .125rem)}.fd-calendar__item--today.fd-calendar__item--legend-8[dir=rtl] .fd-calendar__text-wrapper:after,[dir=rtl] .fd-calendar__item--today.fd-calendar__item--legend-8 .fd-calendar__text-wrapper:after{left:0;right:.0625rem}.fd-calendar__item--legend-9:not(.fd-calendar__item--today) .fd-calendar__text-wrapper:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor9);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor9)}.fd-calendar__item--legend-9:not(.fd-calendar__item--today).fd-calendar__item--range .fd-calendar__text-wrapper:after,.fd-calendar__item--legend-9:not(.fd-calendar__item--today).fd-calendar__item--selected .fd-calendar__text-wrapper:after{height:var(--fdCalendar_Item_Selected_Legend_Height)}.fd-calendar__item--today.fd-calendar__item--legend-9.is-focus,.fd-calendar__item--today.fd-calendar__item--legend-9:focus{z-index:5}.fd-calendar__item--today.fd-calendar__item--legend-9.is-focus .fd-calendar__text:after,.fd-calendar__item--today.fd-calendar__item--legend-9:focus .fd-calendar__text:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor9);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor9)}.fd-calendar__item--today.fd-calendar__item--legend-9 .fd-calendar__text-wrapper:after{border-bottom:.25rem solid var(--sapLegendColor9);border-radius:0 0 var(--fdCalendar_Item_Legend_Bottom_Border_Radius) var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);bottom:.0625rem;content:\"\";height:var(--fdCalendar_Item_Text_Wrapper_Height);left:.0625rem;position:absolute;right:0;width:calc(100% - .125rem)}.fd-calendar__item--today.fd-calendar__item--legend-9[dir=rtl] .fd-calendar__text-wrapper:after,[dir=rtl] .fd-calendar__item--today.fd-calendar__item--legend-9 .fd-calendar__text-wrapper:after{left:0;right:.0625rem}.fd-calendar__item--legend-10:not(.fd-calendar__item--today) .fd-calendar__text-wrapper:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor10);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor10)}.fd-calendar__item--legend-10:not(.fd-calendar__item--today).fd-calendar__item--range .fd-calendar__text-wrapper:after,.fd-calendar__item--legend-10:not(.fd-calendar__item--today).fd-calendar__item--selected .fd-calendar__text-wrapper:after{height:var(--fdCalendar_Item_Selected_Legend_Height)}.fd-calendar__item--today.fd-calendar__item--legend-10.is-focus,.fd-calendar__item--today.fd-calendar__item--legend-10:focus{z-index:5}.fd-calendar__item--today.fd-calendar__item--legend-10.is-focus .fd-calendar__text:after,.fd-calendar__item--today.fd-calendar__item--legend-10:focus .fd-calendar__text:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor10);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor10)}.fd-calendar__item--today.fd-calendar__item--legend-10 .fd-calendar__text-wrapper:after{border-bottom:.25rem solid var(--sapLegendColor10);border-radius:0 0 var(--fdCalendar_Item_Legend_Bottom_Border_Radius) var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);bottom:.0625rem;content:\"\";height:var(--fdCalendar_Item_Text_Wrapper_Height);left:.0625rem;position:absolute;right:0;width:calc(100% - .125rem)}.fd-calendar__item--today.fd-calendar__item--legend-10[dir=rtl] .fd-calendar__text-wrapper:after,[dir=rtl] .fd-calendar__item--today.fd-calendar__item--legend-10 .fd-calendar__text-wrapper:after{left:0;right:.0625rem}.fd-calendar__item--legend-11:not(.fd-calendar__item--today) .fd-calendar__text-wrapper:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor11);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor11)}.fd-calendar__item--legend-11:not(.fd-calendar__item--today).fd-calendar__item--range .fd-calendar__text-wrapper:after,.fd-calendar__item--legend-11:not(.fd-calendar__item--today).fd-calendar__item--selected .fd-calendar__text-wrapper:after{height:var(--fdCalendar_Item_Selected_Legend_Height)}.fd-calendar__item--today.fd-calendar__item--legend-11.is-focus,.fd-calendar__item--today.fd-calendar__item--legend-11:focus{z-index:5}.fd-calendar__item--today.fd-calendar__item--legend-11.is-focus .fd-calendar__text:after,.fd-calendar__item--today.fd-calendar__item--legend-11:focus .fd-calendar__text:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor11);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor11)}.fd-calendar__item--today.fd-calendar__item--legend-11 .fd-calendar__text-wrapper:after{border-bottom:.25rem solid var(--sapLegendColor11);border-radius:0 0 var(--fdCalendar_Item_Legend_Bottom_Border_Radius) var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);bottom:.0625rem;content:\"\";height:var(--fdCalendar_Item_Text_Wrapper_Height);left:.0625rem;position:absolute;right:0;width:calc(100% - .125rem)}.fd-calendar__item--today.fd-calendar__item--legend-11[dir=rtl] .fd-calendar__text-wrapper:after,[dir=rtl] .fd-calendar__item--today.fd-calendar__item--legend-11 .fd-calendar__text-wrapper:after{left:0;right:.0625rem}.fd-calendar__item--legend-12:not(.fd-calendar__item--today) .fd-calendar__text-wrapper:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor12);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor12)}.fd-calendar__item--legend-12:not(.fd-calendar__item--today).fd-calendar__item--range .fd-calendar__text-wrapper:after,.fd-calendar__item--legend-12:not(.fd-calendar__item--today).fd-calendar__item--selected .fd-calendar__text-wrapper:after{height:var(--fdCalendar_Item_Selected_Legend_Height)}.fd-calendar__item--today.fd-calendar__item--legend-12.is-focus,.fd-calendar__item--today.fd-calendar__item--legend-12:focus{z-index:5}.fd-calendar__item--today.fd-calendar__item--legend-12.is-focus .fd-calendar__text:after,.fd-calendar__item--today.fd-calendar__item--legend-12:focus .fd-calendar__text:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor12);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor12)}.fd-calendar__item--today.fd-calendar__item--legend-12 .fd-calendar__text-wrapper:after{border-bottom:.25rem solid var(--sapLegendColor12);border-radius:0 0 var(--fdCalendar_Item_Legend_Bottom_Border_Radius) var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);bottom:.0625rem;content:\"\";height:var(--fdCalendar_Item_Text_Wrapper_Height);left:.0625rem;position:absolute;right:0;width:calc(100% - .125rem)}.fd-calendar__item--today.fd-calendar__item--legend-12[dir=rtl] .fd-calendar__text-wrapper:after,[dir=rtl] .fd-calendar__item--today.fd-calendar__item--legend-12 .fd-calendar__text-wrapper:after{left:0;right:.0625rem}.fd-calendar__item--legend-13:not(.fd-calendar__item--today) .fd-calendar__text-wrapper:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor13);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor13)}.fd-calendar__item--legend-13:not(.fd-calendar__item--today).fd-calendar__item--range .fd-calendar__text-wrapper:after,.fd-calendar__item--legend-13:not(.fd-calendar__item--today).fd-calendar__item--selected .fd-calendar__text-wrapper:after{height:var(--fdCalendar_Item_Selected_Legend_Height)}.fd-calendar__item--today.fd-calendar__item--legend-13.is-focus,.fd-calendar__item--today.fd-calendar__item--legend-13:focus{z-index:5}.fd-calendar__item--today.fd-calendar__item--legend-13.is-focus .fd-calendar__text:after,.fd-calendar__item--today.fd-calendar__item--legend-13:focus .fd-calendar__text:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor13);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor13)}.fd-calendar__item--today.fd-calendar__item--legend-13 .fd-calendar__text-wrapper:after{border-bottom:.25rem solid var(--sapLegendColor13);border-radius:0 0 var(--fdCalendar_Item_Legend_Bottom_Border_Radius) var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);bottom:.0625rem;content:\"\";height:var(--fdCalendar_Item_Text_Wrapper_Height);left:.0625rem;position:absolute;right:0;width:calc(100% - .125rem)}.fd-calendar__item--today.fd-calendar__item--legend-13[dir=rtl] .fd-calendar__text-wrapper:after,[dir=rtl] .fd-calendar__item--today.fd-calendar__item--legend-13 .fd-calendar__text-wrapper:after{left:0;right:.0625rem}.fd-calendar__item--legend-14:not(.fd-calendar__item--today) .fd-calendar__text-wrapper:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor14);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor14)}.fd-calendar__item--legend-14:not(.fd-calendar__item--today).fd-calendar__item--range .fd-calendar__text-wrapper:after,.fd-calendar__item--legend-14:not(.fd-calendar__item--today).fd-calendar__item--selected .fd-calendar__text-wrapper:after{height:var(--fdCalendar_Item_Selected_Legend_Height)}.fd-calendar__item--today.fd-calendar__item--legend-14.is-focus,.fd-calendar__item--today.fd-calendar__item--legend-14:focus{z-index:5}.fd-calendar__item--today.fd-calendar__item--legend-14.is-focus .fd-calendar__text:after,.fd-calendar__item--today.fd-calendar__item--legend-14:focus .fd-calendar__text:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor14);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor14)}.fd-calendar__item--today.fd-calendar__item--legend-14 .fd-calendar__text-wrapper:after{border-bottom:.25rem solid var(--sapLegendColor14);border-radius:0 0 var(--fdCalendar_Item_Legend_Bottom_Border_Radius) var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);bottom:.0625rem;content:\"\";height:var(--fdCalendar_Item_Text_Wrapper_Height);left:.0625rem;position:absolute;right:0;width:calc(100% - .125rem)}.fd-calendar__item--today.fd-calendar__item--legend-14[dir=rtl] .fd-calendar__text-wrapper:after,[dir=rtl] .fd-calendar__item--today.fd-calendar__item--legend-14 .fd-calendar__text-wrapper:after{left:0;right:.0625rem}.fd-calendar__item--legend-15:not(.fd-calendar__item--today) .fd-calendar__text-wrapper:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor15);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor15)}.fd-calendar__item--legend-15:not(.fd-calendar__item--today).fd-calendar__item--range .fd-calendar__text-wrapper:after,.fd-calendar__item--legend-15:not(.fd-calendar__item--today).fd-calendar__item--selected .fd-calendar__text-wrapper:after{height:var(--fdCalendar_Item_Selected_Legend_Height)}.fd-calendar__item--today.fd-calendar__item--legend-15.is-focus,.fd-calendar__item--today.fd-calendar__item--legend-15:focus{z-index:5}.fd-calendar__item--today.fd-calendar__item--legend-15.is-focus .fd-calendar__text:after,.fd-calendar__item--today.fd-calendar__item--legend-15:focus .fd-calendar__text:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor15);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor15)}.fd-calendar__item--today.fd-calendar__item--legend-15 .fd-calendar__text-wrapper:after{border-bottom:.25rem solid var(--sapLegendColor15);border-radius:0 0 var(--fdCalendar_Item_Legend_Bottom_Border_Radius) var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);bottom:.0625rem;content:\"\";height:var(--fdCalendar_Item_Text_Wrapper_Height);left:.0625rem;position:absolute;right:0;width:calc(100% - .125rem)}.fd-calendar__item--today.fd-calendar__item--legend-15[dir=rtl] .fd-calendar__text-wrapper:after,[dir=rtl] .fd-calendar__item--today.fd-calendar__item--legend-15 .fd-calendar__text-wrapper:after{left:0;right:.0625rem}.fd-calendar__item--legend-16:not(.fd-calendar__item--today) .fd-calendar__text-wrapper:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor16);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor16)}.fd-calendar__item--legend-16:not(.fd-calendar__item--today).fd-calendar__item--range .fd-calendar__text-wrapper:after,.fd-calendar__item--legend-16:not(.fd-calendar__item--today).fd-calendar__item--selected .fd-calendar__text-wrapper:after{height:var(--fdCalendar_Item_Selected_Legend_Height)}.fd-calendar__item--today.fd-calendar__item--legend-16.is-focus,.fd-calendar__item--today.fd-calendar__item--legend-16:focus{z-index:5}.fd-calendar__item--today.fd-calendar__item--legend-16.is-focus .fd-calendar__text:after,.fd-calendar__item--today.fd-calendar__item--legend-16:focus .fd-calendar__text:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor16);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor16)}.fd-calendar__item--today.fd-calendar__item--legend-16 .fd-calendar__text-wrapper:after{border-bottom:.25rem solid var(--sapLegendColor16);border-radius:0 0 var(--fdCalendar_Item_Legend_Bottom_Border_Radius) var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);bottom:.0625rem;content:\"\";height:var(--fdCalendar_Item_Text_Wrapper_Height);left:.0625rem;position:absolute;right:0;width:calc(100% - .125rem)}.fd-calendar__item--today.fd-calendar__item--legend-16[dir=rtl] .fd-calendar__text-wrapper:after,[dir=rtl] .fd-calendar__item--today.fd-calendar__item--legend-16 .fd-calendar__text-wrapper:after{left:0;right:.0625rem}.fd-calendar__item--legend-17:not(.fd-calendar__item--today) .fd-calendar__text-wrapper:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor17);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor17)}.fd-calendar__item--legend-17:not(.fd-calendar__item--today).fd-calendar__item--range .fd-calendar__text-wrapper:after,.fd-calendar__item--legend-17:not(.fd-calendar__item--today).fd-calendar__item--selected .fd-calendar__text-wrapper:after{height:var(--fdCalendar_Item_Selected_Legend_Height)}.fd-calendar__item--today.fd-calendar__item--legend-17.is-focus,.fd-calendar__item--today.fd-calendar__item--legend-17:focus{z-index:5}.fd-calendar__item--today.fd-calendar__item--legend-17.is-focus .fd-calendar__text:after,.fd-calendar__item--today.fd-calendar__item--legend-17:focus .fd-calendar__text:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor17);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor17)}.fd-calendar__item--today.fd-calendar__item--legend-17 .fd-calendar__text-wrapper:after{border-bottom:.25rem solid var(--sapLegendColor17);border-radius:0 0 var(--fdCalendar_Item_Legend_Bottom_Border_Radius) var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);bottom:.0625rem;content:\"\";height:var(--fdCalendar_Item_Text_Wrapper_Height);left:.0625rem;position:absolute;right:0;width:calc(100% - .125rem)}.fd-calendar__item--today.fd-calendar__item--legend-17[dir=rtl] .fd-calendar__text-wrapper:after,[dir=rtl] .fd-calendar__item--today.fd-calendar__item--legend-17 .fd-calendar__text-wrapper:after{left:0;right:.0625rem}.fd-calendar__item--legend-18:not(.fd-calendar__item--today) .fd-calendar__text-wrapper:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor18);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor18)}.fd-calendar__item--legend-18:not(.fd-calendar__item--today).fd-calendar__item--range .fd-calendar__text-wrapper:after,.fd-calendar__item--legend-18:not(.fd-calendar__item--today).fd-calendar__item--selected .fd-calendar__text-wrapper:after{height:var(--fdCalendar_Item_Selected_Legend_Height)}.fd-calendar__item--today.fd-calendar__item--legend-18.is-focus,.fd-calendar__item--today.fd-calendar__item--legend-18:focus{z-index:5}.fd-calendar__item--today.fd-calendar__item--legend-18.is-focus .fd-calendar__text:after,.fd-calendar__item--today.fd-calendar__item--legend-18:focus .fd-calendar__text:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor18);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor18)}.fd-calendar__item--today.fd-calendar__item--legend-18 .fd-calendar__text-wrapper:after{border-bottom:.25rem solid var(--sapLegendColor18);border-radius:0 0 var(--fdCalendar_Item_Legend_Bottom_Border_Radius) var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);bottom:.0625rem;content:\"\";height:var(--fdCalendar_Item_Text_Wrapper_Height);left:.0625rem;position:absolute;right:0;width:calc(100% - .125rem)}.fd-calendar__item--today.fd-calendar__item--legend-18[dir=rtl] .fd-calendar__text-wrapper:after,[dir=rtl] .fd-calendar__item--today.fd-calendar__item--legend-18 .fd-calendar__text-wrapper:after{left:0;right:.0625rem}.fd-calendar__item--legend-19:not(.fd-calendar__item--today) .fd-calendar__text-wrapper:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor19);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor19)}.fd-calendar__item--legend-19:not(.fd-calendar__item--today).fd-calendar__item--range .fd-calendar__text-wrapper:after,.fd-calendar__item--legend-19:not(.fd-calendar__item--today).fd-calendar__item--selected .fd-calendar__text-wrapper:after{height:var(--fdCalendar_Item_Selected_Legend_Height)}.fd-calendar__item--today.fd-calendar__item--legend-19.is-focus,.fd-calendar__item--today.fd-calendar__item--legend-19:focus{z-index:5}.fd-calendar__item--today.fd-calendar__item--legend-19.is-focus .fd-calendar__text:after,.fd-calendar__item--today.fd-calendar__item--legend-19:focus .fd-calendar__text:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor19);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor19)}.fd-calendar__item--today.fd-calendar__item--legend-19 .fd-calendar__text-wrapper:after{border-bottom:.25rem solid var(--sapLegendColor19);border-radius:0 0 var(--fdCalendar_Item_Legend_Bottom_Border_Radius) var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);bottom:.0625rem;content:\"\";height:var(--fdCalendar_Item_Text_Wrapper_Height);left:.0625rem;position:absolute;right:0;width:calc(100% - .125rem)}.fd-calendar__item--today.fd-calendar__item--legend-19[dir=rtl] .fd-calendar__text-wrapper:after,[dir=rtl] .fd-calendar__item--today.fd-calendar__item--legend-19 .fd-calendar__text-wrapper:after{left:0;right:.0625rem}.fd-calendar__item--legend-20:not(.fd-calendar__item--today) .fd-calendar__text-wrapper:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor20);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor20)}.fd-calendar__item--legend-20:not(.fd-calendar__item--today).fd-calendar__item--range .fd-calendar__text-wrapper:after,.fd-calendar__item--legend-20:not(.fd-calendar__item--today).fd-calendar__item--selected .fd-calendar__text-wrapper:after{height:var(--fdCalendar_Item_Selected_Legend_Height)}.fd-calendar__item--today.fd-calendar__item--legend-20.is-focus,.fd-calendar__item--today.fd-calendar__item--legend-20:focus{z-index:5}.fd-calendar__item--today.fd-calendar__item--legend-20.is-focus .fd-calendar__text:after,.fd-calendar__item--today.fd-calendar__item--legend-20:focus .fd-calendar__text:after{-webkit-box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor20);box-shadow:inset 0 calc(var(--fdCalendar_Special_Day_Marker_Height)*-1) 0 var(--sapLegendColor20)}.fd-calendar__item--today.fd-calendar__item--legend-20 .fd-calendar__text-wrapper:after{border-bottom:.25rem solid var(--sapLegendColor20);border-radius:0 0 var(--fdCalendar_Item_Legend_Bottom_Border_Radius) var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);bottom:.0625rem;content:\"\";height:var(--fdCalendar_Item_Text_Wrapper_Height);left:.0625rem;position:absolute;right:0;width:calc(100% - .125rem)}.fd-calendar__item--today.fd-calendar__item--legend-20[dir=rtl] .fd-calendar__text-wrapper:after,[dir=rtl] .fd-calendar__item--today.fd-calendar__item--legend-20 .fd-calendar__text-wrapper:after{left:0;right:.0625rem}.fd-calendar{--fdCalendar_Item_Width:2rem;--fdCalendar_Item_Height:2.75rem;--fdCalendar_Padding:.5rem;--fdCalendar_Background:var(--sapList_Background);--fdCalendar_Width:calc(var(--fdCalendar_Item_Width)*8 + var(--fdCalendar_Padding)*2 + var(--fdCalendar_Item_Spacing)*16);--fdCalendar_Action_Padding:.25rem;--fdCalendar_Action_Width:auto;--fdCalendar_Button_Horizontal_Space:.25rem;--fdCalendar_Item_Spacing:.0625rem;--fdCalendar_Item_Background:var(--sapLegend_WorkingBackground);--fdCalendar_Item_Helper_Height:1.875rem;--fdCalendar_Item_Font_Size:var(--sapFontSize);--fdCalendar_Item_Border:0;--fdCalendar_Item_Current_Border_Width:.125rem;--fdCalendar_Item_Text_Color:var(--sapTextColor);--fdCalendar_Item_Text_Height:2.125rem;background-color:var(--fdCalendar_Background);border:0;border-radius:var(--fdCalendar_Border_Radius);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-block:var(--fdCalendar_Padding);padding-inline:0;padding-inline:var(--fdCalendar_Padding);width:var(--fdCalendar_Width)}.fd-calendar:after,.fd-calendar:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-calendar__navigation{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-block:var(--fdCalendar_Button_Horizontal_Space);padding-inline:0;position:relative;width:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.fd-calendar__navigation:after,.fd-calendar__navigation:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-calendar__action{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.fd-calendar__action:after,.fd-calendar__action:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-calendar__action:not(:last-child,:first-child){margin-inline:var(--fdCalendar_Action_Padding)}.fd-calendar__action:first-child{-webkit-margin-end:var(--fdCalendar_Action_Padding);margin-inline-end:var(--fdCalendar_Action_Padding)}.fd-calendar__action:last-child{-webkit-margin-start:var(--fdCalendar_Action_Padding);margin-inline-start:var(--fdCalendar_Action_Padding)}.fd-calendar__action>[type=button]{width:100%}.fd-calendar__action--arrow-left,.fd-calendar__action--arrow-right{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;width:var(--fdCalendar_Action_Width)}.fd-calendar__action--arrow-left+.fd-calendar__action--arrow-right{-webkit-margin-start:auto;margin-inline-start:auto}.fd-calendar__action [class*=sap-icon][dir=rtl],[dir=rtl] .fd-calendar__action [class*=sap-icon]{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fd-calendar__text-wrapper{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%}.fd-calendar__text-wrapper:after,.fd-calendar__text-wrapper:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-calendar__item{height:var(--fdCalendar_Item_Height)}.fd-calendar__item.is-hover,.fd-calendar__item:hover{--fdCalendar_Item_Background:var(--sapList_Hover_Background)}.fd-calendar__item.is-disabled,.fd-calendar__item:disabled,.fd-calendar__item[aria-disabled=true]{opacity:.4;pointer-events:none}.fd-calendar__item--weekend{--fdCalendar_Item_Background:var(--sapLegend_NonWorkingBackground)}.fd-calendar__item--weekend.is-hover,.fd-calendar__item--weekend:hover{--fdCalendar_Item_Background:var(--sapList_Hover_Background);-webkit-filter:brightness(1.05);filter:brightness(1.05)}.fd-calendar__item--other{--fdCalendar_Item_Background:var(--fdCalendar_Background)}.fd-calendar__item--other.is-hover,.fd-calendar__item--other:hover{--fdCalendar_Item_Background:var(--sapList_Hover_Background)}.fd-calendar__item--other .fd-calendar__text{--fdCalendar_Item_Text_Color:var(--sapContent_LabelColor)}.fd-calendar__item--selected{--fdCalendar_Item_Background:var(--sapContent_Selected_Background);--fdCalendar_Item_Border:var(--fdCalendar_Active_Item_Border)}.fd-calendar__item--selected.is-hover,.fd-calendar__item--selected:hover{--fdCalendar_Item_Background:var(--fdCalendar_Item_Active_Background_Hover)}.fd-calendar__item--selected .fd-calendar__text{--fdCalendar_Item_Text_Color:var(--sapContent_Selected_TextColor);font-family:var(--fdCalendar_Active_Item_Font_Weight)}.fd-calendar__item--range{--fdCalendar_Item_Border:var(--fdCalendar_Active_Item_Border);--fdCalendar_Item_Background:var(--sapList_SelectionBackgroundColor)}.fd-calendar__item--range.is-hover,.fd-calendar__item--range:hover{--fdCalendar_Item_Background:var(--sapList_Hover_SelectionBackground)}.fd-calendar__item--today.fd-calendar__item--range:after,.fd-calendar__item--today.fd-calendar__item--selected:after{border:.0625rem solid var(--sapList_SelectionBorderColor);border-radius:var(--fdCalendar_Item_Today_Selected_Bottom_Radius);bottom:.0625rem;content:\"\";height:calc(100% - .125rem);left:.0625rem;position:absolute;top:.0625rem;width:calc(100% - .125rem)}.fd-calendar__item--today{--fdCalendar_Item_Border:solid .125rem var(--sapLegend_CurrentDateTime);-webkit-box-shadow:0 0 0 .0625rem var(--sapList_Background) inset;box-shadow:0 0 0 .0625rem var(--sapList_Background) inset;position:relative}.fd-calendar__item--today:after{border-radius:.3125rem;bottom:.0625rem;content:\"\";height:calc(100% - .125rem);left:.0625rem;position:absolute;top:.0625rem;width:calc(100% - .125rem)}.fd-calendar__item.fd-calendar__item--selected.is-focus,.fd-calendar__item.fd-calendar__item--selected:focus{z-index:5}.fd-calendar__item.fd-calendar__item--selected.is-focus .fd-calendar__text-wrapper,.fd-calendar__item.fd-calendar__item--selected:focus .fd-calendar__text-wrapper{border:var(--fdCalendar_Item_Text_Active_Focus)}.fd-calendar__item:focus-visible{outline:none}.fd-calendar__item.is-focus,.fd-calendar__item:focus{z-index:5}.fd-calendar__item.is-focus .fd-calendar__text-wrapper,.fd-calendar__item:focus .fd-calendar__text-wrapper{border:var(--fdCalendar_Text_Wrapper_Border);-webkit-box-sizing:var(--fdCalendar_Text_Wrapper_Box_Sizing);box-sizing:var(--fdCalendar_Text_Wrapper_Box_Sizing);height:var(--fdCalendar_Text_Wrapper_Height);margin-block:var(--fdCalendar_Text_Wrapper_Margin);margin-inline:var(--fdCalendar_Text_Wrapper_Margin)}.fd-calendar__item.is-focus .fd-calendar__text,.fd-calendar__item:focus .fd-calendar__text{border:var(--fdCalendar_Text_Border_Focus)}.fd-calendar__item--side-helper{-ms-flex-item-align:center;align-self:center;pointer-events:none;--fdCalendar_Item_Height:var(--fdCalendar_Item_Side_Helper,var(--fdCalendar_Item_Helper_Height));--fdCalendar_Item_Background:var(--sapList_Background)}.fd-calendar__item--side-helper .fd-calendar__text{--fdCalendar_Item_Text_Color:var(--sapContent_LabelColor);--fdCalendar_Item_Font_Size:var(--sapFontSmallSize)}.fd-calendar .fd-calendar__my-item{max-height:var(--fdCalendar_Item_Height)}.fd-calendar .fd-calendar__my-item-button{min-width:100%;padding-block:0;padding-inline:0}.fd-calendar .fd-calendar__my-item .fd-calendar__text{color:inherit}.fd-calendar__content{border:0;border-spacing:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:table;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;width:100%}.fd-calendar__content:after,.fd-calendar__content:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-calendar__content--months,.fd-calendar__content--years{-webkit-padding-before:var(--fdCalendar_Item_Helper_Height);padding-block-start:var(--fdCalendar_Item_Helper_Height);--fdCalendar_Item_Background:transparent}.fd-calendar__content--screen-reader-only{position:absolute;clip:rect(0 0 0 0);border:0;height:1px;margin-block:-1px;margin-inline:-1px;overflow:hidden;padding-block:0;padding-inline:0;white-space:nowrap;width:1px}.fd-calendar__group{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:table-row-group;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-calendar__group:after,.fd-calendar__group:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-calendar__row{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-calendar__row:after,.fd-calendar__row:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-calendar__text{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:.1875rem;color:var(--fdCalendar_Item_Text_Color);font-size:var(--fdCalendar_Item_Font_Size);height:var(--fdCalendar_Item_Text_Height);min-width:1.375rem;text-shadow:var(--fdCalendar_Text_Shadow);-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:calc(100% - .7rem);position:relative}.fd-calendar__text:after,.fd-calendar__text:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-calendar__text.is-focus,.fd-calendar__text:focus{border:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);z-index:5}.fd-calendar[class*=-compact],.fd-calendar[class*=-condensed],[class*=-compact] .fd-calendar:not([class*=-cozy]),[class*=-condensed] .fd-calendar:not([class*=-cozy]){--fdCalendar_Width:calc(var(--fdCalendar_Action_Width)*8 + var(--fdCalendar_Padding)*2 + var(--fdCalendar_Item_Spacing)*16);--fdCalendar_Padding:.5rem;--fdCalendar_Item_Text_Height:1.375rem;--fdCalendar_Item_Height:2rem;--fdCalendar_Button_Horizontal_Space:.1875rem;--fdCalendar_Action_Width:2rem;--fdCalendar_Item_Width:var(--fdCalendar_Action_Width)}.fd-calendar--mobile-landscape,.fd-calendar--mobile-portrait{height:100%;width:100%}.fd-calendar--mobile-landscape{--fdCalendar_Padding:0;--fdCalendar_Item_Side_Helper:1.625rem}.fd-calendar--mobile-landscape .fd-calendar__navigation--main{max-width:20rem}.fd-calendar--mobile-portrait{--fdCalendar_Padding:0;-webkit-padding-before:1rem;padding-block-start:1rem}.fd-calendar-legend{background:var(--sapList_Background);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);-webkit-column-width:var(--fdCalendar_Legend_Column_Width,7.5rem);-moz-column-width:var(--fdCalendar_Legend_Column_Width,7.5rem);column-width:var(--fdCalendar_Legend_Column_Width,7.5rem);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-block:.5rem;padding-inline:0;padding-inline:.5rem}.fd-calendar-legend:after,.fd-calendar-legend:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-calendar-legend--auto-column{--fdCalendar_Legend_Column_Width:auto}.fd-calendar-legend__item{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;border-radius:.25rem;-ms-flex-direction:row;flex-direction:row;gap:.5rem;min-width:7.5rem;padding-block:var(--fdCalendar_Legend_Item_Padding,.25rem);padding-inline:var(--fdCalendar_Legend_Item_Padding,.25rem)}.fd-calendar-legend__item:after,.fd-calendar-legend__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-calendar-legend__item.is-focus,.fd-calendar-legend__item:focus{z-index:5}.fd-calendar-legend__item.is-active,.fd-calendar-legend__item.is-focus,.fd-calendar-legend__item:active,.fd-calendar-legend__item:focus{-webkit-box-shadow:0 0 0 var(--sapContent_FocusWidth) var(--sapContent_FocusColor) inset;box-shadow:0 0 0 var(--sapContent_FocusWidth) var(--sapContent_FocusColor) inset}.fd-calendar-legend__item--appointment{--fdCalendar_Legend_Marker_Border_Radius:1rem}.fd-calendar-legend__item--today{--fdCalendar_Legend_Marker_Border_Width:.125rem;--fdCalendar_Legend_Marker_Background:var(--sapList_Background);--fdCalendar_Legend_Marker_Border_Color:var(--sapLegend_CurrentDateTime)}.fd-calendar-legend__item--selected{--fdCalendar_Legend_Marker_Background:var(--sapSelectedColor)}.fd-calendar-legend__item--work{--fdCalendar_Legend_Marker_Background:var(--sapLegend_WorkingBackground)}.fd-calendar-legend__item--non-work{--fdCalendar_Legend_Marker_Background:var(--sapLegend_NonWorkingBackground)}.fd-calendar-legend__item--placeholder-1{--fdCalendar_Legend_Marker_Background:var(--sapLegendColor1)}.fd-calendar-legend__item--placeholder-2{--fdCalendar_Legend_Marker_Background:var(--sapLegendColor2)}.fd-calendar-legend__item--placeholder-3{--fdCalendar_Legend_Marker_Background:var(--sapLegendColor3)}.fd-calendar-legend__item--placeholder-4{--fdCalendar_Legend_Marker_Background:var(--sapLegendColor4)}.fd-calendar-legend__item--placeholder-5{--fdCalendar_Legend_Marker_Background:var(--sapLegendColor5)}.fd-calendar-legend__item--placeholder-6{--fdCalendar_Legend_Marker_Background:var(--sapLegendColor6)}.fd-calendar-legend__item--placeholder-7{--fdCalendar_Legend_Marker_Background:var(--sapLegendColor7)}.fd-calendar-legend__item--placeholder-8{--fdCalendar_Legend_Marker_Background:var(--sapLegendColor8)}.fd-calendar-legend__item--placeholder-9{--fdCalendar_Legend_Marker_Background:var(--sapLegendColor9)}.fd-calendar-legend__item--placeholder-10{--fdCalendar_Legend_Marker_Background:var(--sapLegendColor10)}.fd-calendar-legend__item--placeholder-11{--fdCalendar_Legend_Marker_Background:var(--sapLegendColor11)}.fd-calendar-legend__item--placeholder-12{--fdCalendar_Legend_Marker_Background:var(--sapLegendColor12)}.fd-calendar-legend__item--placeholder-13{--fdCalendar_Legend_Marker_Background:var(--sapLegendColor13)}.fd-calendar-legend__item--placeholder-14{--fdCalendar_Legend_Marker_Background:var(--sapLegendColor14)}.fd-calendar-legend__item--placeholder-15{--fdCalendar_Legend_Marker_Background:var(--sapLegendColor15)}.fd-calendar-legend__item--placeholder-16{--fdCalendar_Legend_Marker_Background:var(--sapLegendColor16)}.fd-calendar-legend__item--placeholder-17{--fdCalendar_Legend_Marker_Background:var(--sapLegendColor17)}.fd-calendar-legend__item--placeholder-18{--fdCalendar_Legend_Marker_Background:var(--sapLegendColor18)}.fd-calendar-legend__item--placeholder-19{--fdCalendar_Legend_Marker_Background:var(--sapLegendColor19)}.fd-calendar-legend__item--placeholder-20{--fdCalendar_Legend_Marker_Background:var(--sapLegendColor20)}.fd-calendar-legend__marker{background:var(--fdCalendar_Legend_Marker_Background,var(--sapList_Background));border:0;border-color:var(--fdCalendar_Legend_Marker_Border_Color,var(--sapContent_ForegroundBorderColor));border-radius:var(--fdCalendar_Legend_Marker_Border_Radius,0);border-style:solid;border-width:var(--fdCalendar_Legend_Marker_Border_Width,.0625rem);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1rem;line-height:normal;margin-block:0;margin-inline:0;max-height:1rem;max-width:1rem;min-height:1rem;min-width:1rem;padding-block:0;padding-inline:0;width:1rem}.fd-calendar-legend__marker:after,.fd-calendar-legend__marker:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-calendar-legend__text{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;line-height:normal;line-height:1rem;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;text-overflow:ellipsis;vertical-align:middle;white-space:pre-line}.fd-calendar-legend__text:after,.fd-calendar-legend__text:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-calendar-legend[class*=-compact],.fd-calendar-legend[class*=-condensed],[class*=-compact] .fd-calendar-legend:not([class*=-cozy]),[class*=-condensed] .fd-calendar-legend:not([class*=-cozy]){--fdCalendar_Legend_Item_Padding:.125rem}.fd-has-display-block{display:block}.fd-calendar__text{max-width:calc(100% - .375rem)}fd-calendar-legend{display:block}\n/*! Bundled license information:\n\nfundamental-styles/dist/calendar.css:\n  (*!\n   * Fundamental Library Styles v0.40.1\n   * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n   * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n   *)\n*/\n"], dependencies: [{ kind: "ngmodule", type: ContentDensityModule }, { kind: "component", type: CalendarHeaderComponent, selector: "fd-calendar-header", inputs: ["activeView", "currentlyDisplayed", "previousButtonDisabled", "nextButtonDisabled", "calendarYearGrid", "id", "mobileLandscape"], outputs: ["activeViewChange", "previousClicked", "nextClicked"] }, { kind: "component", type: CalendarDayViewComponent, selector: "fd-calendar-day-view", inputs: ["currentlyDisplayed", "selectedDate", "selectedMultipleDates", "selectedRangeDate", "selectedMultipleDateRanges", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction", "startingDayOfWeek", "calType", "id", "rangeHoverEffect", "markWeekends", "showWeekNumbers", "allowMultipleSelection", "focusEscapeFunction", "specialDaysRules"], outputs: ["nextMonthSelect", "previousMonthSelect", "selectedDateChange", "selectedMultipleDatesChange", "selectedRangeDateChange", "selectedMultipleDateRangesChange", "disableFunctionChange", "disableRangeStartFunctionChange", "disableRangeEndFunctionChange", "startingDayOfWeekChange", "calTypeChange", "rangeHoverEffectChange", "allowMultipleSelectionChange"] }, { kind: "component", type: CalendarMonthViewComponent, selector: "fd-calendar-month-view", inputs: ["id", "monthSelected", "focusEscapeFunction", "year", "isDateRangeMonthYearFormat", "rangeHoverEffect", "selectedRangeDate"], outputs: ["monthClicked", "selectedRangeDateChange"] }, { kind: "component", type: CalendarYearViewComponent, selector: "fd-calendar-year-view", inputs: ["id", "focusEscapeFunction", "yearSelected", "yearViewGrid", "isDateRangeYearFormat", "rangeHoverEffect", "selectedRangeDate"], outputs: ["yearClicked", "selectedRangeDateChange"] }, { kind: "component", type: CalendarAggregatedYearViewComponent, selector: "fd-calendar-aggregated-year-view", inputs: ["id", "focusEscapeFunction", "yearSelected", "aggregatedYearsViewGrid", "yearViewGrid"], outputs: ["yearsClicked"] }, { kind: "component", type: CalendarLegendComponent, selector: "fd-calendar-legend", inputs: ["col", "displayTodayLegendItem", "displaySelectedLegendItem", "displayWorkDayLegendItem", "displayNonWorkDayLegendItem", "specialDaysRules"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -3815,7 +3811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         CalendarLegendFocusingService,
                         contentDensityObserverProviders(),
                         {
-                            provide: FD_LANGUAGE_SIGNAL,
+                            provide: FD_LANGUAGE,
                             useFactory: patchDeprecatedI18nLabels
                         }
                     ], host: {