@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.
- package/calendar/calendar-directives.d.ts +5 -9
- package/calendar/calendar-header/calendar-header.component.d.ts +7 -25
- package/calendar/calendar-views/calendar-aggregated-year-view/calendar-aggregated-year-view.component.d.ts +1 -20
- package/calendar/calendar-views/calendar-day-view/calendar-day-view.component.d.ts +6 -44
- package/calendar/calendar-views/calendar-month-view/calendar-month-view.component.d.ts +2 -21
- package/calendar/calendar-views/calendar-year-view/calendar-year-view.component.d.ts +3 -22
- package/calendar/calendar.component.d.ts +9 -9
- package/calendar/i18n/calendar-i18n-labels.d.ts +20 -22
- package/calendar/patch-deprecated-i18n-labels.d.ts +6 -0
- package/esm2022/calendar/calendar-directives.mjs +10 -18
- package/esm2022/calendar/calendar-header/calendar-header.component.mjs +30 -60
- package/esm2022/calendar/calendar-views/calendar-aggregated-year-view/calendar-aggregated-year-view.component.mjs +10 -35
- package/esm2022/calendar/calendar-views/calendar-day-view/calendar-day-view.component.mjs +13 -65
- package/esm2022/calendar/calendar-views/calendar-month-view/calendar-month-view.component.mjs +11 -36
- package/esm2022/calendar/calendar-views/calendar-year-view/calendar-year-view.component.mjs +12 -37
- package/esm2022/calendar/calendar.component.mjs +20 -10
- package/esm2022/calendar/i18n/calendar-i18n-labels.mjs +22 -28
- package/esm2022/calendar/patch-deprecated-i18n-labels.mjs +21 -0
- package/fesm2022/fundamental-ngx-core-calendar.mjs +150 -288
- package/fesm2022/fundamental-ngx-core-calendar.mjs.map +1 -1
- package/fundamental-ngx-core-v0.46.2-rc.3.tgz +0 -0
- package/package.json +3 -3
- package/schematics/add-dependencies/index.js +4 -4
- 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
|
|
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(
|
|
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:
|
|
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\">{{
|
|
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\">{{
|
|
437
|
-
}], ctorParameters: function () { return [{ type:
|
|
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
|
|
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
|
|
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 }
|
|
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]=\"
|
|
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]=\"
|
|
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 }
|
|
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
|
|
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 }
|
|
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]=\"
|
|
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]=\"
|
|
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 }
|
|
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
|
|
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 }
|
|
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]=\"
|
|
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]=\"
|
|
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
|
-
}] }
|
|
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
|
|
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 }
|
|
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]=\"
|
|
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]=\"
|
|
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
|
-
}] }
|
|
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
|
-
|
|
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
|
-
|
|
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 }
|
|
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": "
|
|
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]': '
|
|
2798
|
-
'[attr.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
|
-
}] }
|
|
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 }); }
|