@fundamental-ngx/core 0.46.2-rc.1 → 0.46.2-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/calendar/calendar-directives.d.ts +5 -9
  2. package/calendar/calendar-header/calendar-header.component.d.ts +7 -25
  3. package/calendar/calendar-views/calendar-aggregated-year-view/calendar-aggregated-year-view.component.d.ts +1 -20
  4. package/calendar/calendar-views/calendar-day-view/calendar-day-view.component.d.ts +6 -44
  5. package/calendar/calendar-views/calendar-month-view/calendar-month-view.component.d.ts +2 -21
  6. package/calendar/calendar-views/calendar-year-view/calendar-year-view.component.d.ts +3 -22
  7. package/calendar/calendar.component.d.ts +9 -9
  8. package/calendar/i18n/calendar-i18n-labels.d.ts +20 -22
  9. package/calendar/patch-deprecated-i18n-labels.d.ts +6 -0
  10. package/esm2022/calendar/calendar-directives.mjs +10 -18
  11. package/esm2022/calendar/calendar-header/calendar-header.component.mjs +30 -60
  12. package/esm2022/calendar/calendar-views/calendar-aggregated-year-view/calendar-aggregated-year-view.component.mjs +10 -35
  13. package/esm2022/calendar/calendar-views/calendar-day-view/calendar-day-view.component.mjs +13 -65
  14. package/esm2022/calendar/calendar-views/calendar-month-view/calendar-month-view.component.mjs +11 -36
  15. package/esm2022/calendar/calendar-views/calendar-year-view/calendar-year-view.component.mjs +12 -37
  16. package/esm2022/calendar/calendar.component.mjs +20 -10
  17. package/esm2022/calendar/i18n/calendar-i18n-labels.mjs +22 -28
  18. package/esm2022/calendar/patch-deprecated-i18n-labels.mjs +21 -0
  19. package/fesm2022/fundamental-ngx-core-calendar.mjs +150 -288
  20. package/fesm2022/fundamental-ngx-core-calendar.mjs.map +1 -1
  21. package/fundamental-ngx-core-v0.46.2-rc.3.tgz +0 -0
  22. package/package.json +3 -3
  23. package/schematics/add-dependencies/index.js +4 -4
  24. package/fundamental-ngx-core-v0.46.2-rc.1.tgz +0 -0
@@ -1,73 +1,20 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Injectable, Optional, EventEmitter, ElementRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, ViewChild, inject, DestroyRef, Inject, forwardRef, HostBinding, Directive, Attribute, NgModule } from '@angular/core';
3
+ import { Subject, switchMap, startWith, map, Subscription } from 'rxjs';
3
4
  import { takeUntil } from 'rxjs/operators';
4
- import { Subject, Subscription } from 'rxjs';
5
5
  import * as i2 from '@fundamental-ngx/core/datetime';
6
6
  import { DATE_TIME_FORMATS } from '@fundamental-ngx/core/datetime';
7
- import * as i1 from '@fundamental-ngx/cdk/utils';
8
7
  import { NgIf, NgFor, NgSwitch, NgSwitchCase } from '@angular/common';
9
- import * as i4 from '@fundamental-ngx/core/button';
8
+ import * as i3 from '@fundamental-ngx/core/button';
10
9
  import { ButtonModule } from '@fundamental-ngx/core/button';
10
+ import { FdTranslatePipe, FD_LANGUAGE_ENGLISH, FD_LANGUAGE, resolveTranslationSignal } from '@fundamental-ngx/i18n';
11
+ import * as i1 from '@fundamental-ngx/cdk/utils';
11
12
  import equal from 'fast-deep-equal';
12
13
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
13
14
  import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
14
15
  import * as i1$1 from '@fundamental-ngx/core/content-density';
15
16
  import { contentDensityObserverProviders, ContentDensityModule } from '@fundamental-ngx/core/content-density';
16
17
 
17
- /**
18
- * Provides i18n support for labels inside the calendar component.
19
- */
20
- class CalendarI18nLabels {
21
- constructor() {
22
- /** This is event that should be called, when labels are changed, to let component detect an changes. */
23
- this.labelsChange = new Subject();
24
- /** Year selection aria label. Used on the button to navigate to the years view. */
25
- this.yearSelectionLabel = 'Select year';
26
- /** Years range selection aria label. Used on the button to navigate to the years range view. */
27
- this.yearsRangeSelectionLabel = 'Select years range';
28
- /** Month selection aria label. Used on the button to navigate to the months view. */
29
- this.monthSelectionLabel = 'Select month';
30
- /** Day selection aria label. Used on the button to navigate to the day view. */
31
- this.dateSelectionLabel = 'Select date';
32
- /** Previous year aria label. Used on the button to switch to a previous year in the years view. */
33
- this.previousYearLabel = 'Previous year';
34
- /** Next year aria label. Used on the button to switch to a next year in the years view. */
35
- this.nextYearLabel = 'Next year';
36
- /** Previous month aria label. Used on the button to switch to a previous month in the months view. */
37
- this.previousMonthLabel = 'Previous month';
38
- /** Next month aria label. Used on the button to switch to a next month in the months view. */
39
- this.nextMonthLabel = 'Next month';
40
- /** Week number column label */
41
- this.weekColumnLabel = 'Calendar week';
42
- /** Selected date label. Used on the selected day/month/year cell. */
43
- this.dateSelectedLabel = 'Selected date';
44
- /** Is used to describe present date */
45
- this.todayLabel = 'Today';
46
- /** Range start label. Used for date range selection */
47
- this.rangeStartLabel = 'Range start';
48
- /** Range end label. Used for date range selection */
49
- this.rangeEndLabel = 'Range end';
50
- /** Past days aria label. Used when days in the past are accessed */
51
- this.dayInPastLabel = 'Past days';
52
- /** Past days aria label. Used when days in the past are accessed */
53
- this.closeCalendarLabel = 'Close calendar';
54
- /** Calendar day view aria role description. */
55
- this.calendarDayViewDescription = 'Calendar';
56
- /** Calendar month view aria role description. */
57
- this.calendarMonthViewDescription = 'Month picker';
58
- /** Calendar years view aria role description. */
59
- this.calendarYearsViewDescription = 'Year picker';
60
- /** Calendar years range view aria role description. */
61
- this.calendarYearsRangeViewDescription = 'Years range picker';
62
- }
63
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarI18nLabels, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
64
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarI18nLabels, providedIn: 'root' }); }
65
- }
66
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarI18nLabels, decorators: [{
67
- type: Injectable,
68
- args: [{ providedIn: 'root' }]
69
- }] });
70
-
71
18
  class CalendarService {
72
19
  /** @hidden */
73
20
  constructor(_rtlService) {
@@ -214,6 +161,24 @@ class CalendarHeaderComponent {
214
161
  this._amountOfYearsPerPeriod = yearGrid.cols * yearGrid.rows - 1;
215
162
  this._calculateSelectAggregatedYearLabel();
216
163
  }
164
+ /** Aria label for the previous button. Depends on the active view. */
165
+ get previousAriaLabel() {
166
+ return this.isOnDayView ? 'coreCalendar.previousMonthLabel' : 'coreCalendar.previousYearLabel';
167
+ }
168
+ /** Aria label for the next button. Depends on the active view. */
169
+ get nextAriaLabel() {
170
+ return this.isOnDayView ? 'coreCalendar.nextMonthLabel' : 'coreCalendar.nextYearLabel';
171
+ }
172
+ /** Button aria label to open month selection view. */
173
+ get selectMonthAriaLabel() {
174
+ return this.isOnMonthView ? 'coreCalendar.dateSelectionLabel' : 'coreCalendar.monthSelectionLabel';
175
+ }
176
+ /** Button aria label to open aggregated years selection view. */
177
+ get selectAggregatedYearAriaLabel() {
178
+ return this.isOnAggregatedYearsView
179
+ ? 'coreCalendar.dateSelectionLabel'
180
+ : 'coreCalendar.yearsRangeSelectionLabel';
181
+ }
217
182
  /** Get information is calendar is on aggregated years view */
218
183
  get isOnAggregatedYearsView() {
219
184
  return this.activeView === 'aggregatedYear';
@@ -293,8 +258,7 @@ class CalendarHeaderComponent {
293
258
  return this.viewId + '-select-years-range-aria-label';
294
259
  }
295
260
  /** @hidden */
296
- constructor(_calendarI18nLabels, _changeDetRef, _calendarService, _dateTimeAdapter) {
297
- this._calendarI18nLabels = _calendarI18nLabels;
261
+ constructor(_changeDetRef, _calendarService, _dateTimeAdapter) {
298
262
  this._changeDetRef = _changeDetRef;
299
263
  this._calendarService = _calendarService;
300
264
  this._dateTimeAdapter = _dateTimeAdapter;
@@ -323,7 +287,6 @@ class CalendarHeaderComponent {
323
287
  if ((changes.currentlyDisplayed && !changes.currentlyDisplayed.firstChange) ||
324
288
  (changes.activeView && !changes.activeView.firstChange)) {
325
289
  this._calculateLabels();
326
- this._calculateAriaLabels();
327
290
  }
328
291
  }
329
292
  /** @hidden */
@@ -331,9 +294,7 @@ class CalendarHeaderComponent {
331
294
  this._calendarService.leftArrowId = this._prevButtonId;
332
295
  this._calculateMonthNames();
333
296
  this._calculateLabels();
334
- this._calculateAriaLabels();
335
297
  this._listenToLocaleChanges();
336
- this._listenToCalendarLabelsChanges();
337
298
  }
338
299
  /**
339
300
  * Focus on focusable control within the header
@@ -358,55 +319,12 @@ class CalendarHeaderComponent {
358
319
  });
359
320
  }
360
321
  /** @hidden */
361
- _listenToCalendarLabelsChanges() {
362
- this._calendarI18nLabels.labelsChange.pipe(takeUntil(this._onDestroy$)).subscribe(() => {
363
- this._calculateAriaLabels();
364
- this._changeDetRef.markForCheck();
365
- });
366
- }
367
- /** @hidden */
368
- _calculateAriaLabels() {
369
- this._calculatePreviousAriaLabel();
370
- this._calculateNextAriaLabel();
371
- this._calculateSelectMonthAriaLabel();
372
- this._calculateSelectYearAriaLabel();
373
- this._calculateSelectAggregatedYearAriaLabel();
374
- }
375
- /** @hidden */
376
322
  _calculateLabels() {
377
323
  this._calculateSelectMonthLabel();
378
324
  this._calculateSelectYearLabel();
379
325
  this._calculateSelectAggregatedYearLabel();
380
326
  }
381
327
  /** @hidden */
382
- _calculatePreviousAriaLabel() {
383
- this.previousAriaLabel = this.isOnDayView
384
- ? this._calendarI18nLabels.previousMonthLabel
385
- : this._calendarI18nLabels.previousYearLabel;
386
- }
387
- /** @hidden */
388
- _calculateNextAriaLabel() {
389
- this.nextAriaLabel = this.isOnDayView
390
- ? this._calendarI18nLabels.nextMonthLabel
391
- : this._calendarI18nLabels.nextYearLabel;
392
- }
393
- /** @hidden */
394
- _calculateSelectMonthAriaLabel() {
395
- this.selectMonthAriaLabel = this.isOnMonthView
396
- ? this._calendarI18nLabels.dateSelectionLabel
397
- : this._calendarI18nLabels.monthSelectionLabel;
398
- }
399
- /** @hidden */
400
- _calculateSelectYearAriaLabel() {
401
- this.selectYearAriaLabel = this._calendarI18nLabels.yearSelectionLabel;
402
- }
403
- /** @hidden */
404
- _calculateSelectAggregatedYearAriaLabel() {
405
- this.selectAggregatedYearAriaLabel = this.isOnAggregatedYearsView
406
- ? this._calendarI18nLabels.dateSelectionLabel
407
- : this._calendarI18nLabels.yearsRangeSelectionLabel;
408
- }
409
- /** @hidden */
410
328
  _calculateSelectMonthLabel() {
411
329
  this.selectMonthLabel = this._monthNames[this.currentlyDisplayed.month - 1];
412
330
  }
@@ -426,15 +344,15 @@ class CalendarHeaderComponent {
426
344
  _getYearName(year) {
427
345
  return this._dateTimeAdapter.getYearName(this._dateTimeAdapter.createDate(year, 1, 1));
428
346
  }
429
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarHeaderComponent, deps: [{ token: CalendarI18nLabels }, { token: i0.ChangeDetectorRef }, { token: CalendarService }, { token: i2.DatetimeAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
430
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", 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\"\n [ariaLabel]=\"previousAriaLabel\"\n type=\"button\"\n (click)=\"previousClicked.emit()\"\n ></button>\n </div>\n <ng-container *ngIf=\"isOnDayView || 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 <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 </ng-container>\n <ng-container *ngIf=\"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 </ng-container>\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\"\n [ariaLabel]=\"nextAriaLabel\"\n (click)=\"nextClicked.emit()\"\n type=\"button\"\n ></button>\n </div>\n</header>\n\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n <div [attr.id]=\"_selectMonthButtonAriaLabelId\">{{ selectMonthAriaLabel }}</div>\n <div [attr.id]=\"_selectYearButtonAriaLabelId\">{{ selectYearAriaLabel }}</div>\n <div [attr.id]=\"_selectYearsRangeButtonAriaLabelId\">{{ selectAggregatedYearAriaLabel }}</div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
347
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CalendarService }, { token: i2.DatetimeAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
348
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", 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 <ng-container *ngIf=\"isOnDayView || 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 <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 </ng-container>\n <ng-container *ngIf=\"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 </ng-container>\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\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: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
431
349
  }
432
350
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
433
351
  type: Component,
434
352
  args: [{ selector: 'fd-calendar-header', encapsulation: ViewEncapsulation.None, host: {
435
353
  '[attr.id]': 'viewId'
436
- }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ButtonModule, NgIf], 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\"\n [ariaLabel]=\"previousAriaLabel\"\n type=\"button\"\n (click)=\"previousClicked.emit()\"\n ></button>\n </div>\n <ng-container *ngIf=\"isOnDayView || 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 <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 </ng-container>\n <ng-container *ngIf=\"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 </ng-container>\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\"\n [ariaLabel]=\"nextAriaLabel\"\n (click)=\"nextClicked.emit()\"\n type=\"button\"\n ></button>\n </div>\n</header>\n\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n <div [attr.id]=\"_selectMonthButtonAriaLabelId\">{{ selectMonthAriaLabel }}</div>\n <div [attr.id]=\"_selectYearButtonAriaLabelId\">{{ selectYearAriaLabel }}</div>\n <div [attr.id]=\"_selectYearsRangeButtonAriaLabelId\">{{ selectAggregatedYearAriaLabel }}</div>\n</div>\n" }]
437
- }], ctorParameters: function () { return [{ type: CalendarI18nLabels }, { type: i0.ChangeDetectorRef }, { type: CalendarService }, { type: i2.DatetimeAdapter }]; }, propDecorators: { activeView: [{
354
+ }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ButtonModule, NgIf, 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 <ng-container *ngIf=\"isOnDayView || 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 <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 </ng-container>\n <ng-container *ngIf=\"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 </ng-container>\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\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" }]
355
+ }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CalendarService }, { type: i2.DatetimeAdapter }]; }, propDecorators: { activeView: [{
438
356
  type: Input
439
357
  }], currentlyDisplayed: [{
440
358
  type: Input
@@ -459,23 +377,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
459
377
  args: ['prevButton', { read: ElementRef }]
460
378
  }] } });
461
379
 
462
- /** A class representing a range of dates. */
463
- class DateRange {
464
- /**
465
- * Date range.
466
- * @param start
467
- * @param end
468
- */
469
- constructor(
470
- /** The start date of the range. */
471
- start,
472
- /** The end date of the range. */
473
- end) {
474
- this.start = start;
475
- this.end = end;
476
- }
477
- }
478
-
479
380
  /**
480
381
  * Calendar active cell strategy
481
382
  */
@@ -522,6 +423,23 @@ class ActiveCalendarDayCellStrategy extends AbstractCalendarActiveCellStrategy {
522
423
  }
523
424
  }
524
425
 
426
+ /** A class representing a range of dates. */
427
+ class DateRange {
428
+ /**
429
+ * Date range.
430
+ * @param start
431
+ * @param end
432
+ */
433
+ constructor(
434
+ /** The start date of the range. */
435
+ start,
436
+ /** The end date of the range. */
437
+ end) {
438
+ this.start = start;
439
+ this.end = end;
440
+ }
441
+ }
442
+
525
443
  /** Component representing the day view of the calendar. */
526
444
  class CalendarDayViewComponent {
527
445
  /** Currently displayed month and year for days */
@@ -562,13 +480,12 @@ class CalendarDayViewComponent {
562
480
  return this._selectedRangeDate;
563
481
  }
564
482
  /** @hidden */
565
- constructor(eRef, changeDetRef, calendarService, _dateTimeFormats, _dateTimeAdapter, _calendarI18nLabels) {
483
+ constructor(eRef, changeDetRef, calendarService, _dateTimeFormats, _dateTimeAdapter) {
566
484
  this.eRef = eRef;
567
485
  this.changeDetRef = changeDetRef;
568
486
  this.calendarService = calendarService;
569
487
  this._dateTimeFormats = _dateTimeFormats;
570
488
  this._dateTimeAdapter = _dateTimeAdapter;
571
- this._calendarI18nLabels = _calendarI18nLabels;
572
489
  /** The type of calendar, 'single' for single date selection or 'range' for a range of dates. */
573
490
  this.calType = 'single';
574
491
  /**
@@ -637,6 +554,7 @@ class CalendarDayViewComponent {
637
554
  /**
638
555
  * Function for selecting a date on the calendar. Typically called when a date is clicked, but can also be called programmatically.
639
556
  * @param day CalendarDay object to be selected.
557
+ * @param event
640
558
  */
641
559
  selectDate(day, event) {
642
560
  if (event) {
@@ -766,57 +684,6 @@ class CalendarDayViewComponent {
766
684
  return totalCalendarRows.concat(calendarRow);
767
685
  });
768
686
  }
769
- /**
770
- * @hidden
771
- * Today cell label.
772
- * Is used in conjunction with cell date itself
773
- */
774
- get _todayAriaLabel() {
775
- return this._calendarI18nLabels.todayLabel;
776
- }
777
- /**
778
- * @hidden
779
- * Selected date cell label.
780
- * Is used in conjunction with cell date itself
781
- */
782
- get _selectedDateAriaLabel() {
783
- return this._calendarI18nLabels.dateSelectedLabel;
784
- }
785
- /**
786
- * @hidden
787
- * column label
788
- */
789
- get _weekColumnLabelAriaLabel() {
790
- return this._calendarI18nLabels.weekColumnLabel;
791
- }
792
- /**
793
- * @hidden
794
- * Range start label
795
- */
796
- get _rangeStartAriaLabel() {
797
- return this._calendarI18nLabels.rangeStartLabel;
798
- }
799
- /**
800
- * @hidden
801
- * Range end label
802
- */
803
- get _rangeEndAriaLabel() {
804
- return this._calendarI18nLabels.rangeEndLabel;
805
- }
806
- /**
807
- * @hidden
808
- * Date in past label
809
- */
810
- get _dateInPastAriaLabel() {
811
- return this._calendarI18nLabels.dayInPastLabel;
812
- }
813
- /**
814
- * @hidden
815
- * View description
816
- */
817
- get _viewRoleDescription() {
818
- return this._calendarI18nLabels.calendarDayViewDescription;
819
- }
820
687
  /**
821
688
  * View ID
822
689
  */
@@ -870,7 +737,7 @@ class CalendarDayViewComponent {
870
737
  * Method that handles day cells keydown events,
871
738
  * @param event KeyboardEvent
872
739
  * @param cell CalendarDay
873
- * @param grid with specified column and row as a x and y
740
+ * @param index with specified column and row as a x and y
874
741
  */
875
742
  _onKeydownDayHandler(event, cell, index) {
876
743
  if (event.key === 'Tab' && !event.shiftKey) {
@@ -1269,19 +1136,19 @@ class CalendarDayViewComponent {
1269
1136
  focusOnCellByIndex(index) {
1270
1137
  this._focusElementBySelector(`#${this._getCellIdByIndex(index)}`);
1271
1138
  }
1272
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarDayViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CalendarService }, { token: DATE_TIME_FORMATS }, { token: i2.DatetimeAdapter }, { token: CalendarI18nLabels }], target: i0.ɵɵFactoryTarget.Component }); }
1273
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: CalendarDayViewComponent, isStandalone: true, selector: "fd-calendar-day-view", inputs: { disableFunction: "disableFunction", disableRangeStartFunction: "disableRangeStartFunction", disableRangeEndFunction: "disableRangeEndFunction", currentlyDisplayed: "currentlyDisplayed", selectedDate: "selectedDate", selectedRangeDate: "selectedRangeDate", startingDayOfWeek: "startingDayOfWeek", calType: "calType", id: "id", rangeHoverEffect: "rangeHoverEffect", markWeekends: "markWeekends", showWeekNumbers: "showWeekNumbers", focusEscapeFunction: "focusEscapeFunction", specialDaysRules: "specialDaysRules" }, outputs: { selectedRangeDateChange: "selectedRangeDateChange", nextMonthSelect: "nextMonthSelect", previousMonthSelect: "previousMonthSelect", selectedDateChange: "selectedDateChange" }, 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]=\"_viewRoleDescription\"\n>\n <thead class=\"fd-calendar__group\" role=\"rowgroup\">\n <tr class=\"fd-calendar__row\" role=\"row\">\n <th\n *ngIf=\"showWeekNumbers\"\n class=\"fd-calendar__item fd-calendar__item--side-helper\"\n role=\"columnheader\"\n [attr.id]=\"_weekNumbersColumnHeaderId\"\n [attr.aria-label]=\"_weekColumnLabelAriaLabel\"\n ></th>\n <th\n class=\"fd-calendar__item fd-calendar__item--side-helper\"\n role=\"columnheader\"\n *ngFor=\"let day of shortWeekDays; index as i\"\n [attr.aria-label]=\"longWeekDays[i]\"\n >\n <div class=\"fd-calendar__text-wrapper\">\n <span class=\"fd-calendar__text\">{{ day }}</span>\n </div>\n </th>\n </tr>\n </thead>\n <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n <tr class=\"fd-calendar__row\" role=\"row\" *ngFor=\"let row of _dayViewGrid; let rowIndex = index\">\n <th\n *ngIf=\"showWeekNumbers\"\n class=\"fd-calendar__item fd-calendar__item--side-helper\"\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]=\"_weekNumbersColumnHeaderId + ' ' + (viewId + '-week-' + _weeks[rowIndex])\"\n >\n <div class=\"fd-calendar__text-wrapper\" *ngIf=\"_weeks && _weeks[rowIndex]\">\n <span class=\"fd-calendar__text\">\n {{ _weeks[rowIndex] }}\n </span>\n </div>\n </th>\n\n <td\n class=\"fd-calendar__item\"\n role=\"gridcell\"\n *ngFor=\"let cell of row; let cellIndex = index\"\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]=\"cell.weekend && markWeekends && cell.monthStatus === 'current'\"\n [class.fd-calendar__item--other]=\"cell.monthStatus !== 'current'\"\n [class.is-disabled]=\"cell.disabled\"\n [class]=\"cell.specialNumber ? 'fd-calendar__item--legend-' + cell.specialNumber : ''\"\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 </tr>\n <tr class=\"fd-calendar__row\" *ngIf=\"_dayViewGrid.length <= 5\">\n <td class=\"fd-calendar__item hidden-day\"></td>\n </tr>\n <tr class=\"fd-calendar__row\" *ngIf=\"_dayViewGrid.length === 4\">\n <td class=\"fd-calendar__item hidden-day\"></td>\n </tr>\n </tbody>\n</table>\n\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n <div [attr.id]=\"_todayLabelId\">{{ _todayAriaLabel }}</div>\n <div [attr.id]=\"_selectedDateLabelId\">{{ _selectedDateAriaLabel }}</div>\n <div [attr.id]=\"_dateRangeStartLabelId\">{{ _rangeStartAriaLabel }}</div>\n <div [attr.id]=\"_dateRangeEndLabelId\">{{ _rangeEndAriaLabel }}</div>\n <div [attr.id]=\"_dateInPastLabelId\">{{ _dateInPastAriaLabel }}</div>\n</div>\n", styles: [".hidden-day{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1139
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarDayViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CalendarService }, { token: DATE_TIME_FORMATS }, { token: i2.DatetimeAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
1140
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: CalendarDayViewComponent, isStandalone: true, selector: "fd-calendar-day-view", inputs: { disableFunction: "disableFunction", disableRangeStartFunction: "disableRangeStartFunction", disableRangeEndFunction: "disableRangeEndFunction", currentlyDisplayed: "currentlyDisplayed", selectedDate: "selectedDate", selectedRangeDate: "selectedRangeDate", startingDayOfWeek: "startingDayOfWeek", calType: "calType", id: "id", rangeHoverEffect: "rangeHoverEffect", markWeekends: "markWeekends", showWeekNumbers: "showWeekNumbers", focusEscapeFunction: "focusEscapeFunction", specialDaysRules: "specialDaysRules" }, outputs: { selectedRangeDateChange: "selectedRangeDateChange", nextMonthSelect: "nextMonthSelect", previousMonthSelect: "previousMonthSelect", selectedDateChange: "selectedDateChange" }, 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 <th\n *ngIf=\"showWeekNumbers\"\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 <th\n class=\"fd-calendar__item fd-calendar__item--side-helper\"\n role=\"columnheader\"\n *ngFor=\"let day of shortWeekDays; index as i\"\n [attr.aria-label]=\"longWeekDays[i]\"\n >\n <div class=\"fd-calendar__text-wrapper\">\n <span class=\"fd-calendar__text\">{{ day }}</span>\n </div>\n </th>\n </tr>\n </thead>\n <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n <tr class=\"fd-calendar__row\" role=\"row\" *ngFor=\"let row of _dayViewGrid; let rowIndex = index\">\n <th\n *ngIf=\"showWeekNumbers\"\n class=\"fd-calendar__item fd-calendar__item--side-helper\"\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]=\"_weekNumbersColumnHeaderId + ' ' + (viewId + '-week-' + _weeks[rowIndex])\"\n >\n <div class=\"fd-calendar__text-wrapper\" *ngIf=\"_weeks && _weeks[rowIndex]\">\n <span class=\"fd-calendar__text\">\n {{ _weeks[rowIndex] }}\n </span>\n </div>\n </th>\n\n <td\n class=\"fd-calendar__item\"\n role=\"gridcell\"\n *ngFor=\"let cell of row; let cellIndex = index\"\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]=\"cell.weekend && markWeekends && cell.monthStatus === 'current'\"\n [class.fd-calendar__item--other]=\"cell.monthStatus !== 'current'\"\n [class.is-disabled]=\"cell.disabled\"\n [class]=\"cell.specialNumber ? 'fd-calendar__item--legend-' + cell.specialNumber : ''\"\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 </tr>\n <tr class=\"fd-calendar__row\" *ngIf=\"_dayViewGrid.length <= 5\">\n <td class=\"fd-calendar__item hidden-day\"></td>\n </tr>\n <tr class=\"fd-calendar__row\" *ngIf=\"_dayViewGrid.length === 4\">\n <td class=\"fd-calendar__item hidden-day\"></td>\n </tr>\n </tbody>\n</table>\n\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}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1274
1141
  }
1275
1142
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarDayViewComponent, decorators: [{
1276
1143
  type: Component,
1277
1144
  args: [{ selector: 'fd-calendar-day-view', encapsulation: ViewEncapsulation.None, host: {
1278
1145
  '[attr.id]': 'viewId',
1279
1146
  class: 'fd-calendar__dates'
1280
- }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, NgFor], template: "<table\n class=\"fd-calendar__content fd-calendar__content--dates\"\n role=\"grid\"\n [attr.aria-roledescription]=\"_viewRoleDescription\"\n>\n <thead class=\"fd-calendar__group\" role=\"rowgroup\">\n <tr class=\"fd-calendar__row\" role=\"row\">\n <th\n *ngIf=\"showWeekNumbers\"\n class=\"fd-calendar__item fd-calendar__item--side-helper\"\n role=\"columnheader\"\n [attr.id]=\"_weekNumbersColumnHeaderId\"\n [attr.aria-label]=\"_weekColumnLabelAriaLabel\"\n ></th>\n <th\n class=\"fd-calendar__item fd-calendar__item--side-helper\"\n role=\"columnheader\"\n *ngFor=\"let day of shortWeekDays; index as i\"\n [attr.aria-label]=\"longWeekDays[i]\"\n >\n <div class=\"fd-calendar__text-wrapper\">\n <span class=\"fd-calendar__text\">{{ day }}</span>\n </div>\n </th>\n </tr>\n </thead>\n <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n <tr class=\"fd-calendar__row\" role=\"row\" *ngFor=\"let row of _dayViewGrid; let rowIndex = index\">\n <th\n *ngIf=\"showWeekNumbers\"\n class=\"fd-calendar__item fd-calendar__item--side-helper\"\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]=\"_weekNumbersColumnHeaderId + ' ' + (viewId + '-week-' + _weeks[rowIndex])\"\n >\n <div class=\"fd-calendar__text-wrapper\" *ngIf=\"_weeks && _weeks[rowIndex]\">\n <span class=\"fd-calendar__text\">\n {{ _weeks[rowIndex] }}\n </span>\n </div>\n </th>\n\n <td\n class=\"fd-calendar__item\"\n role=\"gridcell\"\n *ngFor=\"let cell of row; let cellIndex = index\"\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]=\"cell.weekend && markWeekends && cell.monthStatus === 'current'\"\n [class.fd-calendar__item--other]=\"cell.monthStatus !== 'current'\"\n [class.is-disabled]=\"cell.disabled\"\n [class]=\"cell.specialNumber ? 'fd-calendar__item--legend-' + cell.specialNumber : ''\"\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 </tr>\n <tr class=\"fd-calendar__row\" *ngIf=\"_dayViewGrid.length <= 5\">\n <td class=\"fd-calendar__item hidden-day\"></td>\n </tr>\n <tr class=\"fd-calendar__row\" *ngIf=\"_dayViewGrid.length === 4\">\n <td class=\"fd-calendar__item hidden-day\"></td>\n </tr>\n </tbody>\n</table>\n\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n <div [attr.id]=\"_todayLabelId\">{{ _todayAriaLabel }}</div>\n <div [attr.id]=\"_selectedDateLabelId\">{{ _selectedDateAriaLabel }}</div>\n <div [attr.id]=\"_dateRangeStartLabelId\">{{ _rangeStartAriaLabel }}</div>\n <div [attr.id]=\"_dateRangeEndLabelId\">{{ _rangeEndAriaLabel }}</div>\n <div [attr.id]=\"_dateInPastLabelId\">{{ _dateInPastAriaLabel }}</div>\n</div>\n", styles: [".hidden-day{visibility:hidden}\n"] }]
1147
+ }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, NgFor, FdTranslatePipe], 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 <th\n *ngIf=\"showWeekNumbers\"\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 <th\n class=\"fd-calendar__item fd-calendar__item--side-helper\"\n role=\"columnheader\"\n *ngFor=\"let day of shortWeekDays; index as i\"\n [attr.aria-label]=\"longWeekDays[i]\"\n >\n <div class=\"fd-calendar__text-wrapper\">\n <span class=\"fd-calendar__text\">{{ day }}</span>\n </div>\n </th>\n </tr>\n </thead>\n <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n <tr class=\"fd-calendar__row\" role=\"row\" *ngFor=\"let row of _dayViewGrid; let rowIndex = index\">\n <th\n *ngIf=\"showWeekNumbers\"\n class=\"fd-calendar__item fd-calendar__item--side-helper\"\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]=\"_weekNumbersColumnHeaderId + ' ' + (viewId + '-week-' + _weeks[rowIndex])\"\n >\n <div class=\"fd-calendar__text-wrapper\" *ngIf=\"_weeks && _weeks[rowIndex]\">\n <span class=\"fd-calendar__text\">\n {{ _weeks[rowIndex] }}\n </span>\n </div>\n </th>\n\n <td\n class=\"fd-calendar__item\"\n role=\"gridcell\"\n *ngFor=\"let cell of row; let cellIndex = index\"\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]=\"cell.weekend && markWeekends && cell.monthStatus === 'current'\"\n [class.fd-calendar__item--other]=\"cell.monthStatus !== 'current'\"\n [class.is-disabled]=\"cell.disabled\"\n [class]=\"cell.specialNumber ? 'fd-calendar__item--legend-' + cell.specialNumber : ''\"\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 </tr>\n <tr class=\"fd-calendar__row\" *ngIf=\"_dayViewGrid.length <= 5\">\n <td class=\"fd-calendar__item hidden-day\"></td>\n </tr>\n <tr class=\"fd-calendar__row\" *ngIf=\"_dayViewGrid.length === 4\">\n <td class=\"fd-calendar__item hidden-day\"></td>\n </tr>\n </tbody>\n</table>\n\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}\n"] }]
1281
1148
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CalendarService }, { type: undefined, decorators: [{
1282
1149
  type: Inject,
1283
1150
  args: [DATE_TIME_FORMATS]
1284
- }] }, { type: i2.DatetimeAdapter }, { type: CalendarI18nLabels }]; }, propDecorators: { disableFunction: [{
1151
+ }] }, { type: i2.DatetimeAdapter }]; }, propDecorators: { disableFunction: [{
1285
1152
  type: Input
1286
1153
  }], disableRangeStartFunction: [{
1287
1154
  type: Input
@@ -1322,13 +1189,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
1322
1189
  /** Component representing the month view of the calendar. */
1323
1190
  class CalendarMonthViewComponent {
1324
1191
  /** @hidden */
1325
- constructor(_eRef, _changeDetectorRef, _calendarService, _dateTimeFormats, _dateTimeAdapter, _calendarI18nLabels) {
1192
+ constructor(_eRef, _changeDetectorRef, _calendarService, _dateTimeFormats, _dateTimeAdapter) {
1326
1193
  this._eRef = _eRef;
1327
1194
  this._changeDetectorRef = _changeDetectorRef;
1328
1195
  this._calendarService = _calendarService;
1329
1196
  this._dateTimeFormats = _dateTimeFormats;
1330
1197
  this._dateTimeAdapter = _dateTimeAdapter;
1331
- this._calendarI18nLabels = _calendarI18nLabels;
1332
1198
  /** An event fired when a new month is selected */
1333
1199
  this.monthClicked = new EventEmitter();
1334
1200
  /**
@@ -1381,29 +1247,6 @@ class CalendarMonthViewComponent {
1381
1247
  get viewId() {
1382
1248
  return this.id + '-month-view';
1383
1249
  }
1384
- /**
1385
- * @hidden
1386
- * Today cell label.
1387
- * Is used in conjunction with cell date itself
1388
- */
1389
- get _todayAriaLabel() {
1390
- return this._calendarI18nLabels.todayLabel;
1391
- }
1392
- /**
1393
- * @hidden
1394
- * Selected date cell label.
1395
- * Is used in conjunction with cell date itself
1396
- */
1397
- get _selectedDateAriaLabel() {
1398
- return this._calendarI18nLabels.dateSelectedLabel;
1399
- }
1400
- /**
1401
- * @hidden
1402
- * View description
1403
- */
1404
- get _viewRoleDescription() {
1405
- return this._calendarI18nLabels.calendarMonthViewDescription;
1406
- }
1407
1250
  /**
1408
1251
  * @hidden
1409
1252
  * Today cell label ID
@@ -1538,18 +1381,18 @@ class CalendarMonthViewComponent {
1538
1381
  _focusOnCellByIndex(index) {
1539
1382
  this._focusElementBySelector(`#${this._getId(index)}`);
1540
1383
  }
1541
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarMonthViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CalendarService }, { token: DATE_TIME_FORMATS }, { token: i2.DatetimeAdapter }, { token: CalendarI18nLabels }], target: i0.ɵɵFactoryTarget.Component }); }
1542
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: CalendarMonthViewComponent, isStandalone: true, selector: "fd-calendar-month-view", inputs: { id: "id", monthSelected: "monthSelected", focusEscapeFunction: "focusEscapeFunction", year: "year" }, outputs: { monthClicked: "monthClicked" }, 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]=\"_viewRoleDescription\"\n>\n <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n <tr class=\"fd-calendar__row\" role=\"row\" *ngFor=\"let colMonths of _calendarMonthListGrid; let rowIndex = index\">\n <td\n class=\"fd-calendar__my-item\"\n role=\"gridcell\"\n *ngFor=\"let monthCell of colMonths; let colIndex = index\"\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 (click)=\"selectMonth(monthCell, $event)\"\n >\n <button\n fd-button\n fdType=\"transparent\"\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\n <span hidden aria-hidden=\"true\" [attr.id]=\"monthCell.id + '-aria-label'\">\n {{ monthCell.ariaLabel }}\n </span>\n </td>\n </tr>\n </tbody>\n</table>\n\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n <div [attr.id]=\"_todayLabelId\">{{ _todayAriaLabel }}</div>\n <div [attr.id]=\"_selectedDateLabelId\">{{ _selectedDateAriaLabel }}</div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1384
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarMonthViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CalendarService }, { token: DATE_TIME_FORMATS }, { token: i2.DatetimeAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
1385
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: CalendarMonthViewComponent, isStandalone: true, selector: "fd-calendar-month-view", inputs: { id: "id", monthSelected: "monthSelected", focusEscapeFunction: "focusEscapeFunction", year: "year" }, outputs: { monthClicked: "monthClicked" }, 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 <tr class=\"fd-calendar__row\" role=\"row\" *ngFor=\"let colMonths of _calendarMonthListGrid; let rowIndex = index\">\n <td\n class=\"fd-calendar__my-item\"\n role=\"gridcell\"\n *ngFor=\"let monthCell of colMonths; let colIndex = index\"\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 (click)=\"selectMonth(monthCell, $event)\"\n >\n <button\n fd-button\n fdType=\"transparent\"\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\n <span hidden aria-hidden=\"true\" [attr.id]=\"monthCell.id + '-aria-label'\">\n {{ monthCell.ariaLabel }}\n </span>\n </td>\n </tr>\n </tbody>\n</table>\n\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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1543
1386
  }
1544
1387
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarMonthViewComponent, decorators: [{
1545
1388
  type: Component,
1546
1389
  args: [{ selector: 'fd-calendar-month-view', encapsulation: ViewEncapsulation.None, host: {
1547
1390
  '[attr.id]': 'viewId'
1548
- }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgFor, ButtonModule], template: "<table\n class=\"fd-calendar__content fd-calendar__content--months\"\n role=\"grid\"\n [attr.aria-roledescription]=\"_viewRoleDescription\"\n>\n <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n <tr class=\"fd-calendar__row\" role=\"row\" *ngFor=\"let colMonths of _calendarMonthListGrid; let rowIndex = index\">\n <td\n class=\"fd-calendar__my-item\"\n role=\"gridcell\"\n *ngFor=\"let monthCell of colMonths; let colIndex = index\"\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 (click)=\"selectMonth(monthCell, $event)\"\n >\n <button\n fd-button\n fdType=\"transparent\"\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\n <span hidden aria-hidden=\"true\" [attr.id]=\"monthCell.id + '-aria-label'\">\n {{ monthCell.ariaLabel }}\n </span>\n </td>\n </tr>\n </tbody>\n</table>\n\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n <div [attr.id]=\"_todayLabelId\">{{ _todayAriaLabel }}</div>\n <div [attr.id]=\"_selectedDateLabelId\">{{ _selectedDateAriaLabel }}</div>\n</div>\n" }]
1391
+ }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgFor, ButtonModule, 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 <tr class=\"fd-calendar__row\" role=\"row\" *ngFor=\"let colMonths of _calendarMonthListGrid; let rowIndex = index\">\n <td\n class=\"fd-calendar__my-item\"\n role=\"gridcell\"\n *ngFor=\"let monthCell of colMonths; let colIndex = index\"\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 (click)=\"selectMonth(monthCell, $event)\"\n >\n <button\n fd-button\n fdType=\"transparent\"\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\n <span hidden aria-hidden=\"true\" [attr.id]=\"monthCell.id + '-aria-label'\">\n {{ monthCell.ariaLabel }}\n </span>\n </td>\n </tr>\n </tbody>\n</table>\n\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" }]
1549
1392
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CalendarService }, { type: undefined, decorators: [{
1550
1393
  type: Inject,
1551
1394
  args: [DATE_TIME_FORMATS]
1552
- }] }, { type: i2.DatetimeAdapter }, { type: CalendarI18nLabels }]; }, propDecorators: { id: [{
1395
+ }] }, { type: i2.DatetimeAdapter }]; }, propDecorators: { id: [{
1553
1396
  type: Input
1554
1397
  }], monthSelected: [{
1555
1398
  type: Input
@@ -1563,29 +1406,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
1563
1406
 
1564
1407
  /** Component representing the YearView of the Calendar Component. */
1565
1408
  class CalendarYearViewComponent {
1566
- /**
1567
- * @hidden
1568
- * Today cell label.
1569
- * Is used in conjunction with cell date itself
1570
- */
1571
- get _todayAriaLabel() {
1572
- return this._calendarI18nLabels.todayLabel;
1573
- }
1574
- /**
1575
- * @hidden
1576
- * Selected date cell label.
1577
- * Is used in conjunction with cell date itself
1578
- */
1579
- get _selectedDateAriaLabel() {
1580
- return this._calendarI18nLabels.dateSelectedLabel;
1581
- }
1582
- /**
1583
- * @hidden
1584
- * View description
1585
- */
1586
- get _viewRoleDescription() {
1587
- return this._calendarI18nLabels.calendarYearsViewDescription;
1588
- }
1589
1409
  /** View ID */
1590
1410
  get viewId() {
1591
1411
  return this.id + '-year-view';
@@ -1605,13 +1425,12 @@ class CalendarYearViewComponent {
1605
1425
  return this.viewId + '-selected-date-label';
1606
1426
  }
1607
1427
  /** @hidden */
1608
- constructor(_eRef, _changeDetectorRef, _calendarService, _dateTimeAdapter, _dateTimeFormats, _calendarI18nLabels) {
1428
+ constructor(_eRef, _changeDetectorRef, _calendarService, _dateTimeAdapter, _dateTimeFormats) {
1609
1429
  this._eRef = _eRef;
1610
1430
  this._changeDetectorRef = _changeDetectorRef;
1611
1431
  this._calendarService = _calendarService;
1612
1432
  this._dateTimeAdapter = _dateTimeAdapter;
1613
1433
  this._dateTimeFormats = _dateTimeFormats;
1614
- this._calendarI18nLabels = _calendarI18nLabels;
1615
1434
  /** Event fired when a year is selected. */
1616
1435
  this.yearClicked = new EventEmitter();
1617
1436
  /**
@@ -1824,18 +1643,18 @@ class CalendarYearViewComponent {
1824
1643
  _focusOnCellByIndex(index) {
1825
1644
  this._focusElementBySelector(`#${this._getId(index)}`);
1826
1645
  }
1827
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarYearViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CalendarService }, { token: i2.DatetimeAdapter }, { token: DATE_TIME_FORMATS }, { token: CalendarI18nLabels }], target: i0.ɵɵFactoryTarget.Component }); }
1828
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: CalendarYearViewComponent, isStandalone: true, selector: "fd-calendar-year-view", inputs: { id: "id", focusEscapeFunction: "focusEscapeFunction", yearSelected: "yearSelected", yearViewGrid: "yearViewGrid" }, outputs: { yearClicked: "yearClicked" }, 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]=\"_viewRoleDescription\"\n>\n <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n <tr class=\"fd-calendar__row\" role=\"row\" *ngFor=\"let colYears of _calendarYearListGrid; let rowIndex = index\">\n <td\n class=\"fd-calendar__my-item\"\n role=\"gridcell\"\n *ngFor=\"let yearCell of colYears; let colIndex = index\"\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 (click)=\"selectYear(yearCell, $event)\"\n >\n <button\n fd-button\n fdType=\"transparent\"\n class=\"fd-calendar__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\n <span hidden aria-hidden=\"true\" [attr.id]=\"yearCell.id + '-aria-label'\">\n {{ yearCell.ariaLabel }}\n </span>\n </td>\n </tr>\n </tbody>\n</table>\n\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n <div [attr.id]=\"_todayLabelId\">{{ _todayAriaLabel }}</div>\n <div [attr.id]=\"_selectedDateLabelId\">{{ _selectedDateAriaLabel }}</div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1646
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarYearViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CalendarService }, { token: i2.DatetimeAdapter }, { token: DATE_TIME_FORMATS }], target: i0.ɵɵFactoryTarget.Component }); }
1647
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: CalendarYearViewComponent, isStandalone: true, selector: "fd-calendar-year-view", inputs: { id: "id", focusEscapeFunction: "focusEscapeFunction", yearSelected: "yearSelected", yearViewGrid: "yearViewGrid" }, outputs: { yearClicked: "yearClicked" }, 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 <tr class=\"fd-calendar__row\" role=\"row\" *ngFor=\"let colYears of _calendarYearListGrid; let rowIndex = index\">\n <td\n class=\"fd-calendar__my-item\"\n role=\"gridcell\"\n *ngFor=\"let yearCell of colYears; let colIndex = index\"\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 (click)=\"selectYear(yearCell, $event)\"\n >\n <button\n fd-button\n fdType=\"transparent\"\n class=\"fd-calendar__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\n <span hidden aria-hidden=\"true\" [attr.id]=\"yearCell.id + '-aria-label'\">\n {{ yearCell.ariaLabel }}\n </span>\n </td>\n </tr>\n </tbody>\n</table>\n\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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1829
1648
  }
1830
1649
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarYearViewComponent, decorators: [{
1831
1650
  type: Component,
1832
1651
  args: [{ selector: 'fd-calendar-year-view', encapsulation: ViewEncapsulation.None, host: {
1833
1652
  '[attr.id]': 'viewId'
1834
- }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgFor, ButtonModule], template: "<table\n class=\"fd-calendar__content fd-calendar__content--years\"\n role=\"grid\"\n [attr.aria-roledescription]=\"_viewRoleDescription\"\n>\n <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n <tr class=\"fd-calendar__row\" role=\"row\" *ngFor=\"let colYears of _calendarYearListGrid; let rowIndex = index\">\n <td\n class=\"fd-calendar__my-item\"\n role=\"gridcell\"\n *ngFor=\"let yearCell of colYears; let colIndex = index\"\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 (click)=\"selectYear(yearCell, $event)\"\n >\n <button\n fd-button\n fdType=\"transparent\"\n class=\"fd-calendar__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\n <span hidden aria-hidden=\"true\" [attr.id]=\"yearCell.id + '-aria-label'\">\n {{ yearCell.ariaLabel }}\n </span>\n </td>\n </tr>\n </tbody>\n</table>\n\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n <div [attr.id]=\"_todayLabelId\">{{ _todayAriaLabel }}</div>\n <div [attr.id]=\"_selectedDateLabelId\">{{ _selectedDateAriaLabel }}</div>\n</div>\n" }]
1653
+ }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgFor, ButtonModule, 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 <tr class=\"fd-calendar__row\" role=\"row\" *ngFor=\"let colYears of _calendarYearListGrid; let rowIndex = index\">\n <td\n class=\"fd-calendar__my-item\"\n role=\"gridcell\"\n *ngFor=\"let yearCell of colYears; let colIndex = index\"\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 (click)=\"selectYear(yearCell, $event)\"\n >\n <button\n fd-button\n fdType=\"transparent\"\n class=\"fd-calendar__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\n <span hidden aria-hidden=\"true\" [attr.id]=\"yearCell.id + '-aria-label'\">\n {{ yearCell.ariaLabel }}\n </span>\n </td>\n </tr>\n </tbody>\n</table>\n\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" }]
1835
1654
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CalendarService }, { type: i2.DatetimeAdapter }, { type: undefined, decorators: [{
1836
1655
  type: Inject,
1837
1656
  args: [DATE_TIME_FORMATS]
1838
- }] }, { type: CalendarI18nLabels }]; }, propDecorators: { id: [{
1657
+ }] }]; }, propDecorators: { id: [{
1839
1658
  type: Input
1840
1659
  }], focusEscapeFunction: [{
1841
1660
  type: Input
@@ -1855,29 +1674,6 @@ function createMissingDateImplementationError(provider) {
1855
1674
  }
1856
1675
 
1857
1676
  class CalendarAggregatedYearViewComponent {
1858
- /**
1859
- * @hidden
1860
- * Today cell label.
1861
- * Is used in conjunction with cell date itself
1862
- */
1863
- get _todayAriaLabel() {
1864
- return this._calendarI18nLabels.todayLabel;
1865
- }
1866
- /**
1867
- * @hidden
1868
- * Selected date cell label.
1869
- * Is used in conjunction with cell date itself
1870
- */
1871
- get _selectedDateAriaLabel() {
1872
- return this._calendarI18nLabels.dateSelectedLabel;
1873
- }
1874
- /**
1875
- * @hidden
1876
- * View description
1877
- */
1878
- get _viewRoleDescription() {
1879
- return this._calendarI18nLabels.calendarYearsRangeViewDescription;
1880
- }
1881
1677
  /**
1882
1678
  * View ID
1883
1679
  */
@@ -1899,13 +1695,12 @@ class CalendarAggregatedYearViewComponent {
1899
1695
  return this.viewId + '-selected-date-label';
1900
1696
  }
1901
1697
  /** @hidden */
1902
- constructor(_eRef, _changeDetectorRef, _calendarService, _dateTimeAdapter, _dateTimeFormats, _calendarI18nLabels) {
1698
+ constructor(_eRef, _changeDetectorRef, _calendarService, _dateTimeAdapter, _dateTimeFormats) {
1903
1699
  this._eRef = _eRef;
1904
1700
  this._changeDetectorRef = _changeDetectorRef;
1905
1701
  this._calendarService = _calendarService;
1906
1702
  this._dateTimeAdapter = _dateTimeAdapter;
1907
1703
  this._dateTimeFormats = _dateTimeFormats;
1908
- this._calendarI18nLabels = _calendarI18nLabels;
1909
1704
  /** Event fired when a year is selected. */
1910
1705
  this.yearsClicked = new EventEmitter();
1911
1706
  /**
@@ -2147,18 +1942,18 @@ class CalendarAggregatedYearViewComponent {
2147
1942
  _focusOnCellByIndex(index) {
2148
1943
  this._focusElementBySelector(`#${this._getId(index)}`);
2149
1944
  }
2150
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarAggregatedYearViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CalendarService }, { token: i2.DatetimeAdapter }, { token: DATE_TIME_FORMATS }, { token: CalendarI18nLabels }], target: i0.ɵɵFactoryTarget.Component }); }
2151
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", 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]=\"_viewRoleDescription\"\n>\n <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n <tr class=\"fd-calendar__row\" *ngFor=\"let colYears of _calendarYearListGrid; let rowIndex = index\">\n <td\n class=\"fd-calendar__my-item\"\n role=\"gridcell\"\n *ngFor=\"let cell of colYears; let colIndex = index\"\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\n <span hidden aria-hidden=\"true\" [attr.id]=\"cell.id + '-aria-label'\">\n {{ cell.ariaLabel }}\n </span>\n </td>\n </tr>\n </tbody>\n</table>\n\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n <div [attr.id]=\"_todayLabelId\">{{ _todayAriaLabel }}</div>\n <div [attr.id]=\"_selectedDateLabelId\">{{ _selectedDateAriaLabel }}</div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1945
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarAggregatedYearViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CalendarService }, { token: i2.DatetimeAdapter }, { token: DATE_TIME_FORMATS }], target: i0.ɵɵFactoryTarget.Component }); }
1946
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", 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 <tr class=\"fd-calendar__row\" *ngFor=\"let colYears of _calendarYearListGrid; let rowIndex = index\">\n <td\n class=\"fd-calendar__my-item\"\n role=\"gridcell\"\n *ngFor=\"let cell of colYears; let colIndex = index\"\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\n <span hidden aria-hidden=\"true\" [attr.id]=\"cell.id + '-aria-label'\">\n {{ cell.ariaLabel }}\n </span>\n </td>\n </tr>\n </tbody>\n</table>\n\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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2152
1947
  }
2153
1948
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarAggregatedYearViewComponent, decorators: [{
2154
1949
  type: Component,
2155
1950
  args: [{ selector: 'fd-calendar-aggregated-year-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
2156
1951
  '[attr.id]': 'viewId'
2157
- }, standalone: true, imports: [NgFor, ButtonModule], template: "<table\n class=\"fd-calendar__content fd-calendar__content--years\"\n role=\"grid\"\n [attr.aria-roledescription]=\"_viewRoleDescription\"\n>\n <tbody class=\"fd-calendar__group\" role=\"rowgroup\">\n <tr class=\"fd-calendar__row\" *ngFor=\"let colYears of _calendarYearListGrid; let rowIndex = index\">\n <td\n class=\"fd-calendar__my-item\"\n role=\"gridcell\"\n *ngFor=\"let cell of colYears; let colIndex = index\"\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\n <span hidden aria-hidden=\"true\" [attr.id]=\"cell.id + '-aria-label'\">\n {{ cell.ariaLabel }}\n </span>\n </td>\n </tr>\n </tbody>\n</table>\n\n<!-- Hidden elements for aria purposes -->\n<div hidden aria-hidden=\"true\">\n <div [attr.id]=\"_todayLabelId\">{{ _todayAriaLabel }}</div>\n <div [attr.id]=\"_selectedDateLabelId\">{{ _selectedDateAriaLabel }}</div>\n</div>\n" }]
1952
+ }, standalone: true, imports: [NgFor, ButtonModule, 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 <tr class=\"fd-calendar__row\" *ngFor=\"let colYears of _calendarYearListGrid; let rowIndex = index\">\n <td\n class=\"fd-calendar__my-item\"\n role=\"gridcell\"\n *ngFor=\"let cell of colYears; let colIndex = index\"\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\n <span hidden aria-hidden=\"true\" [attr.id]=\"cell.id + '-aria-label'\">\n {{ cell.ariaLabel }}\n </span>\n </td>\n </tr>\n </tbody>\n</table>\n\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" }]
2158
1953
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CalendarService }, { type: i2.DatetimeAdapter }, { type: undefined, decorators: [{
2159
1954
  type: Inject,
2160
1955
  args: [DATE_TIME_FORMATS]
2161
- }] }, { type: CalendarI18nLabels }]; }, propDecorators: { id: [{
1956
+ }] }]; }, propDecorators: { id: [{
2162
1957
  type: Input
2163
1958
  }], focusEscapeFunction: [{
2164
1959
  type: Input
@@ -2172,6 +1967,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
2172
1967
  type: Output
2173
1968
  }] } });
2174
1969
 
1970
+ /**
1971
+ * Provides i18n support for labels inside the calendar component.
1972
+ * @deprecated use i18n `coreCalendar` key instead
1973
+ */
1974
+ class CalendarI18nLabels {
1975
+ constructor() {
1976
+ /** This is event that should be called, when labels are changed, to let component detect an changes. */
1977
+ this.labelsChange = new Subject();
1978
+ /** Year selection aria label. Used on the button to navigate to the years view. */
1979
+ this.yearSelectionLabel = FD_LANGUAGE_ENGLISH.coreCalendar.yearSelectionLabel;
1980
+ /** Years range selection aria label. Used on the button to navigate to the years range view. */
1981
+ this.yearsRangeSelectionLabel = FD_LANGUAGE_ENGLISH.coreCalendar.yearsRangeSelectionLabel;
1982
+ /** Month selection aria label. Used on the button to navigate to the months view. */
1983
+ this.monthSelectionLabel = FD_LANGUAGE_ENGLISH.coreCalendar.monthSelectionLabel;
1984
+ /** Day selection aria label. Used on the button to navigate to the day view. */
1985
+ this.dateSelectionLabel = FD_LANGUAGE_ENGLISH.coreCalendar.dateSelectionLabel;
1986
+ /** Previous year aria label. Used on the button to switch to a previous year in the years view. */
1987
+ this.previousYearLabel = FD_LANGUAGE_ENGLISH.coreCalendar.previousYearLabel;
1988
+ /** Next year aria label. Used on the button to switch to a next year in the years view. */
1989
+ this.nextYearLabel = FD_LANGUAGE_ENGLISH.coreCalendar.nextYearLabel;
1990
+ /** Previous month aria label. Used on the button to switch to a previous month in the months view. */
1991
+ this.previousMonthLabel = FD_LANGUAGE_ENGLISH.coreCalendar.previousMonthLabel;
1992
+ /** Next month aria label. Used on the button to switch to a next month in the months view. */
1993
+ this.nextMonthLabel = FD_LANGUAGE_ENGLISH.coreCalendar.nextMonthLabel;
1994
+ /** Week number column label */
1995
+ this.weekColumnLabel = FD_LANGUAGE_ENGLISH.coreCalendar.weekColumnLabel;
1996
+ /** Selected date label. Used on the selected day/month/year cell. */
1997
+ this.dateSelectedLabel = FD_LANGUAGE_ENGLISH.coreCalendar.dateSelectedLabel;
1998
+ /** Is used to describe present date */
1999
+ this.todayLabel = FD_LANGUAGE_ENGLISH.coreCalendar.todayLabel;
2000
+ /** Range start label. Used for date range selection */
2001
+ this.rangeStartLabel = FD_LANGUAGE_ENGLISH.coreCalendar.rangeStartLabel;
2002
+ /** Range end label. Used for date range selection */
2003
+ this.rangeEndLabel = FD_LANGUAGE_ENGLISH.coreCalendar.rangeEndLabel;
2004
+ /** Past days aria label. Used when days in the past are accessed */
2005
+ this.dayInPastLabel = FD_LANGUAGE_ENGLISH.coreCalendar.dayInPastLabel;
2006
+ /** Past days aria label. Used when days in the past are accessed */
2007
+ this.closeCalendarLabel = FD_LANGUAGE_ENGLISH.coreCalendar.closeCalendarLabel;
2008
+ /** Calendar day view aria role description. */
2009
+ this.calendarDayViewDescription = FD_LANGUAGE_ENGLISH.coreCalendar.calendarDayViewDescription;
2010
+ /** Calendar month view aria role description. */
2011
+ this.calendarMonthViewDescription = FD_LANGUAGE_ENGLISH.coreCalendar.calendarMonthViewDescription;
2012
+ /** Calendar years view aria role description. */
2013
+ this.calendarYearsViewDescription = FD_LANGUAGE_ENGLISH.coreCalendar.calendarYearsViewDescription;
2014
+ /** Calendar years range view aria role description. */
2015
+ this.calendarYearsRangeViewDescription = FD_LANGUAGE_ENGLISH.coreCalendar.calendarYearsRangeViewDescription;
2016
+ }
2017
+ }
2018
+
2019
+ /**
2020
+ * Use deprecated `CalendarI18nLabels` to patch `FD_LANGUAGE` observable
2021
+ */
2022
+ function patchDeprecatedI18nLabels() {
2023
+ const deprecatedSymbol = inject(CalendarI18nLabels, { optional: true });
2024
+ if (deprecatedSymbol) {
2025
+ return inject(FD_LANGUAGE, { skipSelf: true }).pipe(switchMap((existingLang) => deprecatedSymbol.labelsChange.pipe(startWith(null), map(() => existingLang))), map((existingLang) => ({
2026
+ ...existingLang,
2027
+ coreCalendar: {
2028
+ ...existingLang.coreCalendar,
2029
+ ...deprecatedSymbol
2030
+ }
2031
+ })));
2032
+ }
2033
+ return inject(FD_LANGUAGE, { skipSelf: true });
2034
+ }
2035
+
2175
2036
  let calendarUniqueId = 0;
2176
2037
  /**
2177
2038
  * Months: 1 = January, 12 = december.
@@ -2654,7 +2515,11 @@ class CalendarComponent {
2654
2515
  multi: true
2655
2516
  },
2656
2517
  CalendarService,
2657
- contentDensityObserverProviders()
2518
+ contentDensityObserverProviders(),
2519
+ {
2520
+ provide: FD_LANGUAGE,
2521
+ useFactory: patchDeprecatedI18nLabels
2522
+ }
2658
2523
  ], 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<ng-container [ngSwitch]=\"activeView\" *ngIf=\"_currentlyDisplayed\">\n <fd-calendar-day-view\n *ngSwitchCase=\"'day'\"\n [selectedDate]=\"selectedDate\"\n [showWeekNumbers]=\"showWeekNumbers\"\n [markWeekends]=\"markWeekends\"\n (selectedDateChange)=\"selectedDateChanged($event)\"\n [selectedRangeDate]=\"selectedRangeDate\"\n (selectedRangeDateChange)=\"selectedRangeDateChanged($event)\"\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 <fd-calendar-month-view\n *ngSwitchCase=\"'month'\"\n [monthSelected]=\"_currentlyDisplayed.month\"\n [year]=\"_currentlyDisplayed.year\"\n [id]=\"id\"\n [focusEscapeFunction]=\"escapeFocusFunction\"\n (monthClicked)=\"handleMonthViewChange($event)\"\n ></fd-calendar-month-view>\n <fd-calendar-year-view\n *ngSwitchCase=\"'year'\"\n [yearSelected]=\"_currentlyDisplayed.year\"\n [yearViewGrid]=\"yearGrid\"\n [id]=\"id\"\n [focusEscapeFunction]=\"escapeFocusFunction\"\n (yearClicked)=\"selectedYear($event)\"\n >\n </fd-calendar-year-view>\n <fd-calendar-aggregated-year-view\n *ngSwitchCase=\"'aggregatedYear'\"\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</ng-container>\n", styles: ["/*!\n * Fundamental Library Styles v0.30.2\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-calendar .fd-calendar__my-item,.fd-calendar__item{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1 1 calc(var(--fdCalendar_Item_Current_Border_Width) * 2 + var(--fdCalendar_Item_Spacing) * 2);background-color:var(--fdCalendar_Item_Background);border:0;border:var(--fdCalendar_Item_Border);border-radius:var(--fdCalendar_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:inline-block;flex:1 1 calc(var(--fdCalendar_Item_Current_Border_Width) * 2 + var(--fdCalendar_Item_Spacing) * 2);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdCalendar_Item_Height);line-height:var(--sapContent_LineHeight);margin:0;margin:var(--fdCalendar_Item_Spacing);min-width:var(--fdCalendar_Item_Width);overflow:hidden;padding:0;position:relative}.fd-calendar .fd-calendar__my-item:after,.fd-calendar .fd-calendar__my-item:before,.fd-calendar__item:after,.fd-calendar__item:before{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{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{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-bottom-left-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-bottom-right-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);border-top-left-radius:0;border-top-right-radius:0;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{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{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-bottom-left-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-bottom-right-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);border-top-left-radius:0;border-top-right-radius:0;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{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{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-bottom-left-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-bottom-right-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);border-top-left-radius:0;border-top-right-radius:0;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{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{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-bottom-left-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-bottom-right-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);border-top-left-radius:0;border-top-right-radius:0;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{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{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-bottom-left-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-bottom-right-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);border-top-left-radius:0;border-top-right-radius:0;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{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{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-bottom-left-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-bottom-right-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);border-top-left-radius:0;border-top-right-radius:0;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{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{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-bottom-left-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-bottom-right-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);border-top-left-radius:0;border-top-right-radius:0;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{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{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-bottom-left-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-bottom-right-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);border-top-left-radius:0;border-top-right-radius:0;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{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{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-bottom-left-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-bottom-right-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);border-top-left-radius:0;border-top-right-radius:0;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{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{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-bottom-left-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-bottom-right-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);border-top-left-radius:0;border-top-right-radius:0;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{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{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-bottom-left-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-bottom-right-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);border-top-left-radius:0;border-top-right-radius:0;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{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{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-bottom-left-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-bottom-right-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);border-top-left-radius:0;border-top-right-radius:0;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{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{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-bottom-left-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-bottom-right-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);border-top-left-radius:0;border-top-right-radius:0;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{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{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-bottom-left-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-bottom-right-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);border-top-left-radius:0;border-top-right-radius:0;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{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{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-bottom-left-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-bottom-right-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);border-top-left-radius:0;border-top-right-radius:0;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{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{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-bottom-left-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-bottom-right-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);border-top-left-radius:0;border-top-right-radius:0;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{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{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-bottom-left-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-bottom-right-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);border-top-left-radius:0;border-top-right-radius:0;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{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{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-bottom-left-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-bottom-right-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);border-top-left-radius:0;border-top-right-radius:0;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{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{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-bottom-left-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-bottom-right-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);border-top-left-radius:0;border-top-right-radius:0;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{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{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-bottom-left-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-bottom-right-radius:var(--fdCalendar_Item_Legend_Bottom_Border_Radius);border-top:var(--fdCalendar_Item_Legend_Top_Border);border-top-left-radius:0;border-top-right-radius:0;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;-webkit-box-sizing:border-box;background-color:var(--fdCalendar_Background);border:0;border-radius:var(--fdCalendar_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;padding:var(--fdCalendar_Padding);width:var(--fdCalendar_Width)}.fd-calendar:after,.fd-calendar:before{box-sizing:inherit;font-size:inherit}.fd-calendar__navigation{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0;padding-bottom:var(--fdCalendar_Button_Horizontal_Space);padding-top:var(--fdCalendar_Button_Horizontal_Space);position:relative;width:100%}.fd-calendar__navigation:after,.fd-calendar__navigation:before{box-sizing:inherit;font-size:inherit}.fd-calendar__action{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex-positive:1;border:0;box-sizing:border-box;color:var(--sapTextColor);flex-grow:1;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-calendar__action:after,.fd-calendar__action:before{box-sizing:inherit;font-size:inherit}.fd-calendar__action:not(:last-child):not(:first-child){margin-left:var(--fdCalendar_Action_Padding);margin-right:var(--fdCalendar_Action_Padding)}.fd-calendar__action:first-child{margin-right:var(--fdCalendar_Action_Padding)}.fd-calendar__action:last-child{margin-left:var(--fdCalendar_Action_Padding)}.fd-calendar__action>[type=button]{width:100%}.fd-calendar__action--arrow-left,.fd-calendar__action--arrow-right{flex-grow:0;width:var(--fdCalendar_Action_Width)}.fd-calendar__action--arrow-left+.fd-calendar__action--arrow-right{margin-left:auto}.fd-calendar__action--arrow-left+.fd-calendar__action--arrow-right[dir=rtl],[dir=rtl] .fd-calendar__action--arrow-left+.fd-calendar__action--arrow-right{margin-left:0;margin-right:auto}.fd-calendar__action [class*=sap-icon][dir=rtl],[dir=rtl] .fd-calendar__action [class*=sap-icon]{transform:scaleX(-1)}.fd-calendar__text-wrapper{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-calendar__text-wrapper:after,.fd-calendar__text-wrapper:before{box-sizing:inherit;font-size:inherit}.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);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);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{-webkit-box-sizing:var(--fdCalendar_Text_Wrapper_Box_Sizing);border:var(--fdCalendar_Text_Wrapper_Border);box-sizing:var(--fdCalendar_Text_Wrapper_Box_Sizing);height:var(--fdCalendar_Text_Wrapper_Height);margin: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;--fdCalendar_Item_Height:var(--fdCalendar_Item_Side_Helper,var(--fdCalendar_Item_Helper_Height));--fdCalendar_Item_Background:var(--sapList_Background);align-self:center;pointer-events:none}.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-height:100%;min-width:100%;padding:0}.fd-calendar .fd-calendar__my-item .fd-calendar__text{color:inherit}.fd-calendar__content{-webkit-box-sizing:border-box;border:0;border-spacing:0;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:var(--sapContent_LineHeight);margin:0;padding:0;width:100%}.fd-calendar__content:after,.fd-calendar__content:before{box-sizing:inherit;font-size:inherit}.fd-calendar__content--months,.fd-calendar__content--years{--fdCalendar_Item_Background:transparent;padding-top:var(--fdCalendar_Item_Helper_Height)}.fd-calendar__content--screen-reader-only{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.fd-calendar__group{-webkit-box-sizing:border-box;border:0;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:var(--sapContent_LineHeight);margin:0;padding:0}.fd-calendar__group:after,.fd-calendar__group:before{box-sizing:inherit;font-size:inherit}.fd-calendar__row{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-calendar__row:after,.fd-calendar__row:before{box-sizing:inherit;font-size:inherit}.fd-calendar__text{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-flex:1;-ms-flex-positive:1;align-items:center;border:0;border-radius:.1875rem;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdCalendar_Item_Text_Color);display:flex;flex-grow:1;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--fdCalendar_Item_Font_Size);font-weight:400;forced-color-adjust:none;height:var(--fdCalendar_Item_Text_Height);justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;max-width:calc(100% - .7rem);min-width:1.375rem;padding:0;position:relative;text-shadow:var(--fdCalendar_Text_Shadow)}.fd-calendar__text:after,.fd-calendar__text:before{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:1rem 0 0 0}.fd-has-display-block{display:block}.fd-calendar__text{max-width:calc(100% - .375rem)}\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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CalendarDayViewComponent, selector: "fd-calendar-day-view", inputs: ["disableFunction", "disableRangeStartFunction", "disableRangeEndFunction", "currentlyDisplayed", "selectedDate", "selectedRangeDate", "startingDayOfWeek", "calType", "id", "rangeHoverEffect", "markWeekends", "showWeekNumbers", "focusEscapeFunction", "specialDaysRules"], outputs: ["selectedRangeDateChange", "nextMonthSelect", "previousMonthSelect", "selectedDateChange"] }, { kind: "component", type: CalendarMonthViewComponent, selector: "fd-calendar-month-view", inputs: ["id", "monthSelected", "focusEscapeFunction", "year"], outputs: ["monthClicked"] }, { kind: "component", type: CalendarYearViewComponent, selector: "fd-calendar-year-view", inputs: ["id", "focusEscapeFunction", "yearSelected", "yearViewGrid"], outputs: ["yearClicked"] }, { kind: "component", type: CalendarAggregatedYearViewComponent, selector: "fd-calendar-aggregated-year-view", inputs: ["id", "focusEscapeFunction", "yearSelected", "aggregatedYearsViewGrid", "yearViewGrid"], outputs: ["yearsClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2659
2524
  }
2660
2525
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarComponent, decorators: [{
@@ -2671,7 +2536,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
2671
2536
  multi: true
2672
2537
  },
2673
2538
  CalendarService,
2674
- contentDensityObserverProviders()
2539
+ contentDensityObserverProviders(),
2540
+ {
2541
+ provide: FD_LANGUAGE,
2542
+ useFactory: patchDeprecatedI18nLabels
2543
+ }
2675
2544
  ], host: {
2676
2545
  '(focusout)': '_focusOut($event)',
2677
2546
  '[attr.id]': 'id',
@@ -2771,21 +2640,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
2771
2640
 
2772
2641
  class CalendarCloseButtonDirective {
2773
2642
  /** @hidden */
2774
- get _ariaLabel() {
2775
- return this._originalAriaLabel || this._calendarI18nLabels.closeCalendarLabel;
2776
- }
2777
- /** @hidden */
2778
- get _title() {
2779
- return this._originalTitle || this._calendarI18nLabels.closeCalendarLabel;
2780
- }
2781
- /** @hidden */
2782
- constructor(_originalAriaLabel, _originalTitle, _calendarI18nLabels) {
2643
+ constructor(_originalAriaLabel, _originalTitle) {
2783
2644
  this._originalAriaLabel = _originalAriaLabel;
2784
2645
  this._originalTitle = _originalTitle;
2785
- this._calendarI18nLabels = _calendarI18nLabels;
2646
+ /** @hidden */
2647
+ this._closeCalendarLabel = resolveTranslationSignal('coreCalendar.closeCalendarLabel');
2786
2648
  }
2787
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarCloseButtonDirective, deps: [{ token: 'aria-label', attribute: true }, { token: 'title', attribute: true }, { token: CalendarI18nLabels }], target: i0.ɵɵFactoryTarget.Directive }); }
2788
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: CalendarCloseButtonDirective, isStandalone: true, selector: "[fd-calendar-close-button]", host: { properties: { "attr.aria-label": "_ariaLabel", "attr.title": "_title" }, classAttribute: "fd-calendar__close-button" }, ngImport: i0 }); }
2649
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarCloseButtonDirective, deps: [{ token: 'aria-label', attribute: true }, { token: 'title', attribute: true }], target: i0.ɵɵFactoryTarget.Directive }); }
2650
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: CalendarCloseButtonDirective, isStandalone: true, selector: "[fd-calendar-close-button]", host: { properties: { "attr.aria-label": "_originalAriaLabel || _closeCalendarLabel()", "attr.title": "_originalTitle || _closeCalendarLabel()" }, classAttribute: "fd-calendar__close-button" }, ngImport: i0 }); }
2789
2651
  }
2790
2652
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarCloseButtonDirective, decorators: [{
2791
2653
  type: Directive,
@@ -2794,8 +2656,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
2794
2656
  selector: '[fd-calendar-close-button]',
2795
2657
  host: {
2796
2658
  class: 'fd-calendar__close-button',
2797
- '[attr.aria-label]': '_ariaLabel',
2798
- '[attr.title]': '_title'
2659
+ '[attr.aria-label]': '_originalAriaLabel || _closeCalendarLabel()',
2660
+ '[attr.title]': '_originalTitle || _closeCalendarLabel()'
2799
2661
  },
2800
2662
  standalone: true
2801
2663
  }]
@@ -2805,7 +2667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
2805
2667
  }] }, { type: undefined, decorators: [{
2806
2668
  type: Attribute,
2807
2669
  args: ['title']
2808
- }] }, { type: CalendarI18nLabels }]; } });
2670
+ }] }]; } });
2809
2671
 
2810
2672
  class CalendarModule {
2811
2673
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }