@odx/angular 5.7.4 → 6.0.1

package/fesm2022/odx-angular-components-calendar.mjs

@@ -1,17 +1,17 @@
 import { __decorate, __metadata } from 'tslib';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, Pipe, inject, Directive } from '@angular/core';
+import { EventEmitter, Injectable, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, inject, ChangeDetectorRef, Pipe, Directive } from '@angular/core';
 import * as i2 from '@odx/angular';
-import { CoreModule, DisabledController } from '@odx/angular';
-import { CSSComponent, CSSModifier } from '@odx/angular/internal';
+import { CoreModule, WindowRef, DisabledController } from '@odx/angular';
+import { CSSComponent, fastDeepEqual, CSSModifier } from '@odx/angular/internal';
 import { createConfigTokens, isString, isPresent, injectElement, hasChanged, EventManager, deferFn, untilDestroyed, trackByIndex, isFunction } from '@odx/angular/utils';
-import { enGB } from 'date-fns/locale';
+import { isSameDay, isSameMonth, isSameYear, endOfDay, endOfMonth, endOfYear, startOfDay, startOfMonth, startOfYear, isValid, toDate, isBefore, isEqual, addMonths, subMonths, isWithinInterval, startOfWeek, addDays, endOfWeek, eachMonthOfInterval, addYears, getYear, setYear, subDays, subWeeks, addWeeks, setMonth, getMonth } from 'date-fns';
 import { BehaviorSubject, shareReplay, map, filter, distinctUntilChanged, merge, defer, of, withLatestFrom } from 'rxjs';
-import { isSameDay, isSameMonth, isSameYear, endOfDay, endOfMonth, endOfYear, startOfDay, startOfMonth, startOfYear, isValid, toDate, isBefore, isEqual, addMonths, subMonths, format, isWithinInterval, startOfWeek, addDays, endOfWeek, eachMonthOfInterval, addYears, getYear, setYear, subDays, subWeeks, addWeeks, setMonth, getMonth } from 'date-fns';
 import { ActionGroupComponent } from '@odx/angular/components/action-group';
 import { ButtonComponent } from '@odx/angular/components/button';
 import { IconComponent } from '@odx/angular/components/icon';
+import { LocalizationService } from '@odx/angular/localization';
 import * as i1 from '@angular/common';
 import { DOCUMENT } from '@angular/common';
 import * as i3 from '@ngrx/component';
@@ -22,17 +22,25 @@ var CalendarSelectionMode;
     CalendarSelectionMode[CalendarSelectionMode["DateRange"] = 1] = "DateRange";
 })(CalendarSelectionMode || (CalendarSelectionMode = {}));
 
+/**
+ * Tools for customizing configuration for the calendar component
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *  ...
+ *  providers: [provideCalendarConfig({ selectionMode: CalendarSelectionMode.DateRange, locale: new BehaviorSubject<Locale>(deDE)})]
+ * })
+ * export class MyDateRangepickerComponent {}
+ * ````
+ *
+ * @example
+ * ```ts
+ * constructor(@Inject(CalendarConfig) private readonly calendarConfig: CalendarConfig) {}
+ * ```
+ */
 const { CalendarConfig, CalendarDefaultConfig, injectCalendarConfig, provideCalendarConfig } = createConfigTokens('Calendar', '@odx/angular/components/calendar', {
-    monthYearLabel: 'LLLL yyyy',
-    monthLabel: 'LLL',
-    weekLabel: 'EEEEE',
-    dayLabel: 'd',
-    yearLabel: 'yyyy',
-    dayA11yLabel: 'MMMM dd, yyyy',
-    monthA11yLabel: 'MMMM, yyyy',
-    yearA11yLabel: 'yyyy',
     displayAdjacentDays: true,
-    locale: new BehaviorSubject(enGB),
     selectionMode: CalendarSelectionMode.Date,
     yearView: {
         itemsPerRow: 3,
@@ -67,17 +75,21 @@ const dateValidators$4 = {
     [CalendarView.Year]: (currentDate, date) => isSameMonth(currentDate, date),
     [CalendarView.Years]: (currentDate, date) => isSameYear(currentDate, date),
 };
+/** @internal */
 function checkIdenticalDate(currentDate, date, calendarView) {
     return dateValidators$4[calendarView](currentDate, date);
 }
 
-const labelResolvers = {
-    [CalendarView.Month]: (config) => config.dayA11yLabel,
-    [CalendarView.Year]: (config) => config.monthA11yLabel,
-    [CalendarView.Years]: (config) => config.yearA11yLabel,
-};
-function getA11yLabel(calendarView, config) {
-    return labelResolvers[calendarView](config);
+/** @internal */
+function getA11yLabel(calendarView) {
+    switch (calendarView) {
+        case CalendarView.Year:
+            return { month: 'long', year: 'numeric' };
+        case CalendarView.Years:
+            return { year: 'numeric' };
+        default:
+            return { month: 'long', day: '2-digit', year: 'numeric' };
+    }
 }
 
 const dateValidators$3 = {
@@ -85,6 +97,7 @@ const dateValidators$3 = {
     [CalendarView.Year]: (maxDate, date) => endOfMonth(maxDate) < endOfMonth(date),
     [CalendarView.Years]: (maxDate, date) => endOfYear(maxDate) < endOfYear(date),
 };
+/** @internal */
 function validateMaxDate(maxDate, date, calendarView) {
     return dateValidators$3[calendarView](maxDate, date);
 }
@@ -94,10 +107,12 @@ const dateValidators$2 = {
     [CalendarView.Year]: (minDate, date) => startOfMonth(minDate) > startOfMonth(date),
     [CalendarView.Years]: (minDate, date) => startOfYear(minDate) > startOfYear(date),
 };
+/** @internal */
 function validateMinDate(maxDate, date, calendarView) {
     return dateValidators$2[calendarView](maxDate, date);
 }
 
+/** @internal */
 function isDateDisabled(date, calendarView, minDate, maxDate, filterFn) {
     const minDateValidation = minDate && validateMinDate(minDate, date, calendarView);
     const maxDateValidation = maxDate && validateMaxDate(maxDate, date, calendarView);
@@ -105,6 +120,7 @@ function isDateDisabled(date, calendarView, minDate, maxDate, filterFn) {
     return minDateValidation || maxDateValidation || isDateFiltered;
 }
 
+/** @internal */
 function parseDate(value) {
     try {
         const timestamp = isString(value) ? Date.parse(value) : value;
@@ -118,6 +134,7 @@ function parseDate(value) {
     }
 }
 
+/** @internal */
 function validateDaterange(start, end) {
     return isBefore(start, end) || isEqual(start, end);
 }
@@ -127,6 +144,7 @@ const dateValidators$1 = {
     [CalendarView.Year]: (maxDate, date) => maxDate < startOfYear(addMonths(date, 12)),
     [CalendarView.Years]: () => false,
 };
+/** @internal */
 function validateNextDateSet(maxDate, date, calendarView) {
     return dateValidators$1[calendarView](maxDate, date);
 }
@@ -136,10 +154,16 @@ const dateValidators = {
     [CalendarView.Year]: (minDate, date) => minDate > endOfYear(subMonths(date, 12)),
     [CalendarView.Years]: () => false,
 };
+/** @internal */
 function validatePreviousDateSet(minDate, date, calendarView) {
     return dateValidators[calendarView](minDate, date);
 }
 
+/**
+ * Manages the state and functionality related to a calendar, such as tracking the active date,
+ * hovered date, current calendar view, and handling date selections. It provides observable streams
+ * that components can subscribe to in order to react to changes in the calendar's state.
+ */
 class CalendarService {
     constructor() {
         this.activeDate$$ = new BehaviorSubject(null); // the date that is being focused by click or arrow keys
@@ -149,23 +173,61 @@ class CalendarService {
             date: null,
             options: dateSelectOptionsDefaults,
         });
+        /**
+         * Emits the currently selected date to external subscribers, particularly useful for two-way binding.
+         */
         this.outputDate$ = new EventEmitter();
+        /**
+         * An observable of the current calendar view state, allowing subscribers to adjust UI components
+         * based on the view (e.g., month, year, multi-year).
+         */
         this.calendarView$ = this.calendarView$$.pipe(shareReplay({ bufferSize: 1, refCount: true }));
+        /**
+         * Streams date select events which include the selected date and any associated options.
+         */
         this.dateSelectEvents$ = this.dateSelectEvents$$.asObservable();
+        /**
+         * Streams the last selected date, enabling components to update based on the latest date selection.
+         */
         this.selectedDate$ = this.dateSelectEvents$$.pipe(map((x) => x.date), shareReplay({ bufferSize: 1, refCount: true }));
+        /**
+         * Streams the active date which reflects the date that is being focused, either through UI interactions
+         * like clicking or using arrow keys.
+         */
         this.activeDate$ = this.activeDate$$.pipe(filter(Boolean), distinctUntilChanged((prev, curr) => isEqual(prev, curr)), shareReplay({ bufferSize: 1, refCount: true }));
+        /**
+         * Combines streams of active and hovered dates to provide a merged view of preview dates.
+         */
         this.previewDate$ = merge(this.activeDate$$, this.hoveredDate$$).pipe(filter(Boolean), distinctUntilChanged((prev, curr) => isEqual(prev, curr)), shareReplay({ bufferSize: 1, refCount: true }));
     }
+    /**
+     * Updates the active date state with a new date, parsed from various input types.
+     *
+     * @param {DateType | null} value - The new date or null to clear the active date.
+     */
     setActiveDate(value) {
         if (!isPresent(value))
             return;
         this.activeDate$$.next(parseDate(value));
     }
+    /**
+     * Sets a date as hovered, which can be used to preview date ranges or effects in the UI.
+     *
+     * @param {DateType | null} value - The date being hovered or null to clear the hovered state.
+     */
     setHoveredDate(value) {
         if (!isPresent(value))
             return;
         this.hoveredDate$$.next(parseDate(value));
     }
+    /**
+     * Selects a date and updates relevant states and options. Can emit the selected date externally
+     * if specified in the options.
+     *
+     * @param {DateType | null} value - The date to select.
+     * @param {DateSelectOptions} [options] - Optional settings for the date selection, such as whether
+     *                                        to emit the date change externally.
+     */
     selectDate(value, options) {
         const date = isPresent(value) ? startOfDay(parseDate(value)) : null;
         this.dateSelectEvents$$.next({ date, options: { ...dateSelectOptionsDefaults, ...options } });
@@ -174,6 +236,11 @@ class CalendarService {
         }
         this.setActiveDate(date);
     }
+    /**
+     * Changes the calendar view to the specified view, updating the internal state and notifying subscribers.
+     *
+     * @param {CalendarView} view - The new view to set for the calendar.
+     */
     changeView(view) {
         this.calendarView$$.next(view);
     }
@@ -184,15 +251,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Represents the header component of the calendar.
+ */
 let CalendarHeaderComponent = class CalendarHeaderComponent {
     constructor() {
         this.isPreviousDisabled = false;
         this.isNextDisabled = false;
         this.element = injectElement();
+        /**
+         * The minimum selectable date in the calendar.
+         */
         this.minDate = null;
+        /**
+         * The maximum selectable date in the calendar.
+         */
         this.maxDate = null;
+        /**
+         * Event emitted when the previous button is clicked.
+         */
         this.previous = new EventEmitter();
+        /**
+         * Event emitted when the next button is clicked.
+         */
         this.next = new EventEmitter();
+        /**
+         * Event emitted when the view is changed.
+         */
         this.changeView = new EventEmitter();
     }
     ngOnChanges(changes) {
@@ -236,27 +321,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Transforms a given date into a formatted string based on the provided date format string.
+ * The transformation utilizes the `format` function from date-fns library and considers the locale
+ * from the global calendar configuration to ensure the date is represented in a locale-appropriate format.
+ */
 class DateLabelPipe {
     constructor() {
-        this.config = injectCalendarConfig();
+        this.localizationService = inject(LocalizationService);
+        this.windowRef = inject(WindowRef);
+        this.cdr = inject(ChangeDetectorRef);
+        this.lastValue = null;
+        this.lastFormatOptions = null;
+        this.formattedValue = '';
     }
-    transform(value, dateFormat) {
+    transform(value, formatOptions) {
         if (!value)
             return '';
-        return format(value, dateFormat, { locale: this.config.locale.getValue() });
+        if (value === this.lastValue && fastDeepEqual(formatOptions, this.lastFormatOptions)) {
+            return this.formattedValue;
+        }
+        this.formattedValue = this.windowRef.nativeWindow.Intl.DateTimeFormat(this.localizationService.getActiveLanguage(), formatOptions).format(value);
+        this.lastValue = value;
+        this.lastFormatOptions = formatOptions;
+        this.cdr.markForCheck();
+        return this.formattedValue;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DateLabelPipe, isStandalone: true, name: "odxDateLabel" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DateLabelPipe, isStandalone: true, name: "odxDateLabel", pure: false }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateLabelPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
                     name: 'odxDateLabel',
-                    pure: true,
+                    pure: false,
                 }]
         }] });
 
+/** @internal */
 function checkCellInRange(date, dateRangeState, calendarView, targetSelectionState) {
     const { start, end } = dateRangeState.dateRange;
     if (calendarView !== CalendarView.Month || dateRangeState.selectionState !== targetSelectionState || (start && end && !validateDaterange(start, end))) {
@@ -282,6 +385,9 @@ function isWithinInclusiveRange(date, dateRange) {
     return isWithinInterval(date, { start, end });
 }
 
+/**
+ * Represents a directive for a cell in the calendar view.
+ */
 let CalendarCellDirective = class CalendarCellDirective {
     constructor() {
         this.disabledController = DisabledController.inject();
@@ -303,9 +409,31 @@ let CalendarCellDirective = class CalendarCellDirective {
         this.isPreviewRangeStart = false;
         this.isPreviewRangeEnd = false;
         this.element = injectElement();
+        /**
+         * Represents the active date in the calendar view.
+         *
+         * @type {Date | null}
+         */
         this.activeDate = null;
+        /**
+         * Represents the selected date in the calendar view.
+         *
+         * @type {Date | null}
+         */
         this.selectedDate = null;
+        /**
+         * Represents the selected date range in the calendar view.
+         *
+         * @type {DateRangeState | null}
+         */
         this.selectedDateRange = null;
+        /**
+         * Represents the preview date for the calendar view.
+         * This property represents the date that is currently being previewed in the calendar view.
+         * It can be set to a specific date or null if no date is being previewed.
+         *
+         * @type {Date | null}
+         */
         this.previewDate = null;
     }
     get isDisabled() {
@@ -313,7 +441,7 @@ let CalendarCellDirective = class CalendarCellDirective {
     }
     ngOnChanges(changes) {
         if (hasChanged(changes, ['date', 'calendarView'], false)) {
-            this.ariaLabel = this.dateLabelPipe.transform(this.date, getA11yLabel(this.calendarView, this.config));
+            this.ariaLabel = this.dateLabelPipe.transform(this.date, getA11yLabel(this.calendarView));
             this.isCurrent = checkIdenticalDate(this.date, new Date(), this.calendarView);
         }
         if (this.activeDate && hasChanged(changes, ['date', 'activeDate'], false)) {
@@ -441,6 +569,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['odxCalendarCellPreviewDate']
             }] } });
 
+/**
+ * Represents an abstract directive for a calendar view.
+ */
 class CalendarViewDirective {
     constructor() {
         this.takeUntilDestroyed = untilDestroyed();
@@ -448,11 +579,46 @@ class CalendarViewDirective {
         this.config = injectCalendarConfig();
         this.trackByIndex = trackByIndex;
         this.element = injectElement();
+        /**
+         * The selected date in the calendar view.
+         * @type {Date | null}
+         */
         this.selectedDate = null;
+        /**
+         * The selected date range in the calendar view.
+         * @type {DateRangeState | null}
+         */
         this.selectedDateRange = null;
+        /**
+         * The preview date for the calendar view.
+         * This property represents the date that is currently being previewed in the calendar view.
+         * It can be set to a specific date or null if no date is being previewed.
+         */
         this.previewDate = null;
+        /**
+         * The minimum selectable date in the calendar view.
+         * If set, dates before this minimum date will be disabled for selection.
+         */
         this.minDate = null;
+        /**
+         * The maximum selectable date in the calendar view.
+         * If set, dates after this maximum date will be disabled for selection.
+         */
         this.maxDate = null;
+        /**
+         * The filter function used to determine if a date should be displayed in the calendar view.
+         * If set to `null`, no filtering will be applied.
+         *
+         * @remarks
+         * The filter function should accept a `Date` object as its parameter and return a boolean value.
+         * If the function returns `true`, the date will be displayed; if it returns `false`, the date will be hidden.
+         *
+         * @example
+         * ```ts
+         * // Filter out weekends
+         * const filterFn: DateFilter = (date) => date.getDay() !== 0 && date.getDay() !== 6;
+         * ```
+         */
         this.filterFn = null;
     }
     isDateDisabled(value) {
@@ -490,6 +656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+/** @internal */
 class CalendarMonthService {
     constructor() {
         this.calendar = inject(CalendarService);
@@ -523,6 +690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
+/** @internal */
 class CalendarYearService {
     constructor() {
         this.config = injectCalendarConfig();
@@ -550,6 +718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
+/** @internal */
 class CalendarYearsService {
     constructor() {
         this.config = injectCalendarConfig();
@@ -581,6 +750,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Represents a calendar month component.
+ * This component extends the `CalendarViewDirective` class and provides functionality for managing the calendar month.
+ *
+ * @see {CalendarViewDirective}
+ */
 let CalendarMonthComponent = class CalendarMonthComponent extends CalendarViewDirective {
     constructor() {
         super(...arguments);
@@ -612,16 +787,22 @@ let CalendarMonthComponent = class CalendarMonthComponent extends CalendarViewDi
         this.calendar.selectDate(value, { emitOutside: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarMonthComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CalendarMonthComponent, isStandalone: true, selector: "odx-calendar-month", providers: [CalendarMonthService], usesInheritance: true, ngImport: i0, template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"7\">\n        <odx-calendar-header\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (previous)=\"previousMonth($event)\"\n          (next)=\"nextMonth($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: config.monthYearLabel }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n\n    <tr class=\"odx-calendar__weekdays\">\n      <td *ngFor=\"let day of calendarMonth.weekDays$ | async\">\n        {{ day | odxDateLabel: config.weekLabel }}\n      </td>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousDay($event)\"\n    (keydown.ArrowRight)=\"nextDay($event)\"\n    (keydown.ArrowUp)=\"previousWeek($event)\"\n    (keydown.ArrowDown)=\"nextWeek($event)\"\n    (keydown.PageUp)=\"previousMonth($event)\"\n    (keydown.PageDown)=\"nextMonth($event)\"\n  >\n    <tr *ngFor=\"let week of calendarMonth.weeks$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let day of week; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(day)\"\n          [odxCalendarCell]=\"day\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          [odxCalendarCellPreviewDate]=\"previewDate\"\n          (click)=\"selectDate(day)\"\n        >\n          {{ day | odxDateLabel: config.dayLabel }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: i2.DisabledController, selector: "[disabled]", inputs: ["disabled"] }, { kind: "directive", type: CalendarCellDirective, selector: "[odxCalendarCell]", inputs: ["odxCalendarCell", "odxCalendarCellCalendarView", "odxCalendarCellActiveDate", "odxCalendarCellSelectedDate", "odxCalendarCellSelectedDateRange", "odxCalendarCellPreviewDate"] }, { kind: "component", type: CalendarHeaderComponent, selector: "odx-calendar-header", inputs: ["activeDate", "calendarView", "minDate", "maxDate"], outputs: ["previous", "next", "changeView"] }, { kind: "pipe", type: DateLabelPipe, name: "odxDateLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CalendarMonthComponent, isStandalone: true, selector: "odx-calendar-month", providers: [CalendarMonthService], usesInheritance: true, ngImport: i0, template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"7\">\n        <odx-calendar-header\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (previous)=\"previousMonth($event)\"\n          (next)=\"nextMonth($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: { month: 'long', year: 'numeric' } }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n\n    <tr class=\"odx-calendar__weekdays\">\n      <td *ngFor=\"let day of calendarMonth.weekDays$ | async\">\n        {{ (day | odxDateLabel: { weekday: 'short' }).charAt(0) }}\n      </td>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousDay($event)\"\n    (keydown.ArrowRight)=\"nextDay($event)\"\n    (keydown.ArrowUp)=\"previousWeek($event)\"\n    (keydown.ArrowDown)=\"nextWeek($event)\"\n    (keydown.PageUp)=\"previousMonth($event)\"\n    (keydown.PageDown)=\"nextMonth($event)\"\n  >\n    <tr *ngFor=\"let week of calendarMonth.weeks$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let day of week; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(day)\"\n          [odxCalendarCell]=\"day\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          [odxCalendarCellPreviewDate]=\"previewDate\"\n          (click)=\"selectDate(day)\"\n        >\n          {{ day | odxDateLabel: { day: 'numeric' } }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: i2.DisabledController, selector: "[disabled]", inputs: ["disabled"] }, { kind: "directive", type: CalendarCellDirective, selector: "[odxCalendarCell]", inputs: ["odxCalendarCell", "odxCalendarCellCalendarView", "odxCalendarCellActiveDate", "odxCalendarCellSelectedDate", "odxCalendarCellSelectedDateRange", "odxCalendarCellPreviewDate"] }, { kind: "component", type: CalendarHeaderComponent, selector: "odx-calendar-header", inputs: ["activeDate", "calendarView", "minDate", "maxDate"], outputs: ["previous", "next", "changeView"] }, { kind: "pipe", type: DateLabelPipe, name: "odxDateLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 };
 CalendarMonthComponent = __decorate([
     CSSComponent('calendar-month')
 ], CalendarMonthComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarMonthComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'odx-calendar-month', standalone: true, imports: [CoreModule, CalendarCellDirective, CalendarHeaderComponent, DateLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarMonthService], template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"7\">\n        <odx-calendar-header\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (previous)=\"previousMonth($event)\"\n          (next)=\"nextMonth($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: config.monthYearLabel }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n\n    <tr class=\"odx-calendar__weekdays\">\n      <td *ngFor=\"let day of calendarMonth.weekDays$ | async\">\n        {{ day | odxDateLabel: config.weekLabel }}\n      </td>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousDay($event)\"\n    (keydown.ArrowRight)=\"nextDay($event)\"\n    (keydown.ArrowUp)=\"previousWeek($event)\"\n    (keydown.ArrowDown)=\"nextWeek($event)\"\n    (keydown.PageUp)=\"previousMonth($event)\"\n    (keydown.PageDown)=\"nextMonth($event)\"\n  >\n    <tr *ngFor=\"let week of calendarMonth.weeks$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let day of week; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(day)\"\n          [odxCalendarCell]=\"day\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          [odxCalendarCellPreviewDate]=\"previewDate\"\n          (click)=\"selectDate(day)\"\n        >\n          {{ day | odxDateLabel: config.dayLabel }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n" }]
+            args: [{ selector: 'odx-calendar-month', standalone: true, imports: [CoreModule, CalendarCellDirective, CalendarHeaderComponent, DateLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarMonthService], template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"7\">\n        <odx-calendar-header\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (previous)=\"previousMonth($event)\"\n          (next)=\"nextMonth($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: { month: 'long', year: 'numeric' } }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n\n    <tr class=\"odx-calendar__weekdays\">\n      <td *ngFor=\"let day of calendarMonth.weekDays$ | async\">\n        {{ (day | odxDateLabel: { weekday: 'short' }).charAt(0) }}\n      </td>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousDay($event)\"\n    (keydown.ArrowRight)=\"nextDay($event)\"\n    (keydown.ArrowUp)=\"previousWeek($event)\"\n    (keydown.ArrowDown)=\"nextWeek($event)\"\n    (keydown.PageUp)=\"previousMonth($event)\"\n    (keydown.PageDown)=\"nextMonth($event)\"\n  >\n    <tr *ngFor=\"let week of calendarMonth.weeks$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let day of week; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(day)\"\n          [odxCalendarCell]=\"day\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          [odxCalendarCellPreviewDate]=\"previewDate\"\n          (click)=\"selectDate(day)\"\n        >\n          {{ day | odxDateLabel: { day: 'numeric' } }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n" }]
         }] });
 
+/**
+ * Represents a component for displaying a calendar year view.
+ * Extends the `CalendarViewDirective` class.
+ *
+ * @see {CalendarViewDirective}
+ */
 let CalendarYearComponent = class CalendarYearComponent extends CalendarViewDirective {
     constructor() {
         super(...arguments);
@@ -655,16 +836,22 @@ let CalendarYearComponent = class CalendarYearComponent extends CalendarViewDire
         this.changeView();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarYearComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CalendarYearComponent, isStandalone: true, selector: "odx-calendar-year", providers: [CalendarYearService], usesInheritance: true, ngImport: i0, template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"3\">\n        <odx-calendar-header\n          (previous)=\"previousYear($event)\"\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (next)=\"nextYear($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: config.yearLabel }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousMonth($event)\"\n    (keydown.ArrowRight)=\"nextMonth($event)\"\n    (keydown.ArrowUp)=\"previousSeason($event)\"\n    (keydown.ArrowDown)=\"nextSeason($event)\"\n    (keydown.PageDown)=\"nextYear($event)\"\n    (keydown.PageUp)=\"previousYear($event)\"\n  >\n    <tr class=\"odx-calendar__season\" *ngFor=\"let season of calendarYear.seasons$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let month of season; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(month)\"\n          [odxCalendarCell]=\"month\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          (click)=\"selectDate(month)\"\n        >\n          {{ month | odxDateLabel: config.monthLabel }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: i2.DisabledController, selector: "[disabled]", inputs: ["disabled"] }, { kind: "directive", type: CalendarCellDirective, selector: "[odxCalendarCell]", inputs: ["odxCalendarCell", "odxCalendarCellCalendarView", "odxCalendarCellActiveDate", "odxCalendarCellSelectedDate", "odxCalendarCellSelectedDateRange", "odxCalendarCellPreviewDate"] }, { kind: "component", type: CalendarHeaderComponent, selector: "odx-calendar-header", inputs: ["activeDate", "calendarView", "minDate", "maxDate"], outputs: ["previous", "next", "changeView"] }, { kind: "pipe", type: DateLabelPipe, name: "odxDateLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CalendarYearComponent, isStandalone: true, selector: "odx-calendar-year", providers: [CalendarYearService], usesInheritance: true, ngImport: i0, template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"3\">\n        <odx-calendar-header\n          (previous)=\"previousYear($event)\"\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (next)=\"nextYear($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: { year: 'numeric' } }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousMonth($event)\"\n    (keydown.ArrowRight)=\"nextMonth($event)\"\n    (keydown.ArrowUp)=\"previousSeason($event)\"\n    (keydown.ArrowDown)=\"nextSeason($event)\"\n    (keydown.PageDown)=\"nextYear($event)\"\n    (keydown.PageUp)=\"previousYear($event)\"\n  >\n    <tr class=\"odx-calendar__season\" *ngFor=\"let season of calendarYear.seasons$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let month of season; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(month)\"\n          [odxCalendarCell]=\"month\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          (click)=\"selectDate(month)\"\n        >\n          {{ month | odxDateLabel: { month: 'short' } }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: i2.DisabledController, selector: "[disabled]", inputs: ["disabled"] }, { kind: "directive", type: CalendarCellDirective, selector: "[odxCalendarCell]", inputs: ["odxCalendarCell", "odxCalendarCellCalendarView", "odxCalendarCellActiveDate", "odxCalendarCellSelectedDate", "odxCalendarCellSelectedDateRange", "odxCalendarCellPreviewDate"] }, { kind: "component", type: CalendarHeaderComponent, selector: "odx-calendar-header", inputs: ["activeDate", "calendarView", "minDate", "maxDate"], outputs: ["previous", "next", "changeView"] }, { kind: "pipe", type: DateLabelPipe, name: "odxDateLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 };
 CalendarYearComponent = __decorate([
     CSSComponent('calendar-year')
 ], CalendarYearComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarYearComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'odx-calendar-year', standalone: true, imports: [CoreModule, CalendarCellDirective, CalendarHeaderComponent, DateLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarYearService], template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"3\">\n        <odx-calendar-header\n          (previous)=\"previousYear($event)\"\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (next)=\"nextYear($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: config.yearLabel }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousMonth($event)\"\n    (keydown.ArrowRight)=\"nextMonth($event)\"\n    (keydown.ArrowUp)=\"previousSeason($event)\"\n    (keydown.ArrowDown)=\"nextSeason($event)\"\n    (keydown.PageDown)=\"nextYear($event)\"\n    (keydown.PageUp)=\"previousYear($event)\"\n  >\n    <tr class=\"odx-calendar__season\" *ngFor=\"let season of calendarYear.seasons$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let month of season; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(month)\"\n          [odxCalendarCell]=\"month\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          (click)=\"selectDate(month)\"\n        >\n          {{ month | odxDateLabel: config.monthLabel }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n" }]
+            args: [{ selector: 'odx-calendar-year', standalone: true, imports: [CoreModule, CalendarCellDirective, CalendarHeaderComponent, DateLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarYearService], template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"3\">\n        <odx-calendar-header\n          (previous)=\"previousYear($event)\"\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (next)=\"nextYear($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: { year: 'numeric' } }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousMonth($event)\"\n    (keydown.ArrowRight)=\"nextMonth($event)\"\n    (keydown.ArrowUp)=\"previousSeason($event)\"\n    (keydown.ArrowDown)=\"nextSeason($event)\"\n    (keydown.PageDown)=\"nextYear($event)\"\n    (keydown.PageUp)=\"previousYear($event)\"\n  >\n    <tr class=\"odx-calendar__season\" *ngFor=\"let season of calendarYear.seasons$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let month of season; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(month)\"\n          [odxCalendarCell]=\"month\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          (click)=\"selectDate(month)\"\n        >\n          {{ month | odxDateLabel: { month: 'short' } }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n" }]
         }] });
 
+/**
+ * Represents the component for displaying the years view in a calendar.
+ * Extends the `CalendarViewDirective` class and implements the `AfterViewInit` interface.
+ *
+ * @see {CalendarViewDirective}
+ */
 let CalendarYearsComponent = class CalendarYearsComponent extends CalendarViewDirective {
     constructor() {
         super(...arguments);
@@ -704,16 +891,19 @@ let CalendarYearsComponent = class CalendarYearsComponent extends CalendarViewDi
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarYearsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CalendarYearsComponent, isStandalone: true, selector: "odx-calendar-years", providers: [CalendarYearsService], usesInheritance: true, ngImport: i0, template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\" *ngrxLet=\"calendar.activeDate$ as activeDate\">\n  <thead aria-hidden=\"true\">\n    <th></th>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousYear($event)\"\n    (keydown.ArrowRight)=\"nextYear($event)\"\n    (keydown.ArrowUp)=\"previousRow($event)\"\n    (keydown.ArrowDown)=\"nextRow($event)\"\n  >\n    <tr class=\"odx-calendar__year-row\" *ngFor=\"let yearRow of calendarYears.years$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let year of yearRow; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(year)\"\n          [odxCalendarCell]=\"year\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          (click)=\"selectDate(year)\"\n        >\n          {{ year | odxDateLabel: config.yearLabel }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: i2.DisabledController, selector: "[disabled]", inputs: ["disabled"] }, { kind: "directive", type: i3.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: CalendarCellDirective, selector: "[odxCalendarCell]", inputs: ["odxCalendarCell", "odxCalendarCellCalendarView", "odxCalendarCellActiveDate", "odxCalendarCellSelectedDate", "odxCalendarCellSelectedDateRange", "odxCalendarCellPreviewDate"] }, { kind: "pipe", type: DateLabelPipe, name: "odxDateLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CalendarYearsComponent, isStandalone: true, selector: "odx-calendar-years", providers: [CalendarYearsService], usesInheritance: true, ngImport: i0, template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\" *ngrxLet=\"calendar.activeDate$ as activeDate\">\n  <thead aria-hidden=\"true\">\n    <th></th>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousYear($event)\"\n    (keydown.ArrowRight)=\"nextYear($event)\"\n    (keydown.ArrowUp)=\"previousRow($event)\"\n    (keydown.ArrowDown)=\"nextRow($event)\"\n  >\n    <tr class=\"odx-calendar__year-row\" *ngFor=\"let yearRow of calendarYears.years$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let year of yearRow; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(year)\"\n          [odxCalendarCell]=\"year\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          (click)=\"selectDate(year)\"\n        >\n          {{ year | odxDateLabel: { year: 'numeric' } }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: i2.DisabledController, selector: "[disabled]", inputs: ["disabled"] }, { kind: "directive", type: i3.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: CalendarCellDirective, selector: "[odxCalendarCell]", inputs: ["odxCalendarCell", "odxCalendarCellCalendarView", "odxCalendarCellActiveDate", "odxCalendarCellSelectedDate", "odxCalendarCellSelectedDateRange", "odxCalendarCellPreviewDate"] }, { kind: "pipe", type: DateLabelPipe, name: "odxDateLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 };
 CalendarYearsComponent = __decorate([
     CSSComponent('calendar-years')
 ], CalendarYearsComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarYearsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'odx-calendar-years', standalone: true, imports: [CoreModule, CalendarCellDirective, CalendarHeaderComponent, DateLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarYearsService], template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\" *ngrxLet=\"calendar.activeDate$ as activeDate\">\n  <thead aria-hidden=\"true\">\n    <th></th>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousYear($event)\"\n    (keydown.ArrowRight)=\"nextYear($event)\"\n    (keydown.ArrowUp)=\"previousRow($event)\"\n    (keydown.ArrowDown)=\"nextRow($event)\"\n  >\n    <tr class=\"odx-calendar__year-row\" *ngFor=\"let yearRow of calendarYears.years$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let year of yearRow; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(year)\"\n          [odxCalendarCell]=\"year\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          (click)=\"selectDate(year)\"\n        >\n          {{ year | odxDateLabel: config.yearLabel }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n" }]
+            args: [{ selector: 'odx-calendar-years', standalone: true, imports: [CoreModule, CalendarCellDirective, CalendarHeaderComponent, DateLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarYearsService], template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\" *ngrxLet=\"calendar.activeDate$ as activeDate\">\n  <thead aria-hidden=\"true\">\n    <th></th>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousYear($event)\"\n    (keydown.ArrowRight)=\"nextYear($event)\"\n    (keydown.ArrowUp)=\"previousRow($event)\"\n    (keydown.ArrowDown)=\"nextRow($event)\"\n  >\n    <tr class=\"odx-calendar__year-row\" *ngFor=\"let yearRow of calendarYears.years$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let year of yearRow; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(year)\"\n          [odxCalendarCell]=\"year\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          (click)=\"selectDate(year)\"\n        >\n          {{ year | odxDateLabel: { year: 'numeric' } }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n" }]
         }] });
 
+/**
+ * Service for managing date range selection.
+ */
 class DaterangeService {
     constructor() {
         this.calendar = inject(CalendarService);
@@ -721,7 +911,16 @@ class DaterangeService {
             selectionState: DateRangeSelectionState.NothingSelected,
             dateRange: { start: null, end: null },
         });
+        /**
+         * An event emitter for outputting the selected date range.
+         * @emits {DateRange | null} outputDateRange$ - The selected date range or null if no range is selected.
+         */
         this.outputDateRange$ = new EventEmitter();
+        /**
+         * An observable that emits the current date range state.
+         * The date range state represents the current selection state and the selected date range.
+         * @emits {DateRangeState} dateRangeState$ - The current date range state.
+         */
         this.dateRangeState$ = this.calendar.dateSelectEvents$.pipe(filter((newSelectedDate) => Boolean(newSelectedDate.date)), withLatestFrom(this.dateRangeState$$), map(([newSelectedDate, currentDateRangeState]) => {
             const newDate = newSelectedDate.date;
             const currentStart = currentDateRangeState.dateRange.start;
@@ -750,6 +949,10 @@ class DaterangeService {
             return newDateRangeState;
         }), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)), shareReplay({ refCount: true }));
     }
+    /**
+     * Sets the selected date range.
+     * @param {DateTypeRange} value - The selected date range.
+     */
     setDateRange(value) {
         deferFn(() => {
             this.calendar.selectDate(value.start);
@@ -764,6 +967,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
+/**
+ * A component for selecting a date or date range. It provides a calendar interface for selecting dates and date ranges,
+ * and supports various configuration options for customizing the appearance and behavior of the calendar.
+ */
 let CalendarComponent = class CalendarComponent {
     constructor() {
         this.config = injectCalendarConfig();
@@ -771,10 +978,40 @@ let CalendarComponent = class CalendarComponent {
         this.daterange = inject(DaterangeService);
         this.CalendarView = CalendarView;
         this.element = injectElement();
+        /**
+         * Represents the selected date in the calendar component.
+         * It can be of type `DateType` or `null` if no date is selected.
+         *
+         * @type {DateType | null}
+         */
         this.selectedDate = null;
+        /**
+         * Represents the selected date range in the calendar component.
+         * It can be of type `DateTypeRange` or `null` if no date range is selected.
+         *
+         * @type {DateTypeRange | null}
+         */
         this.selectedDateRange = null;
         this.minDate = null;
+        /**
+         * The maximum selectable date for the calendar component.
+         * If set to null, there is no maximum date restriction.
+         *
+         * @type {Date | null}
+         */
         this.maxDate = null;
+        /**
+         * The filter function used to determine which dates are selectable in the calendar.
+         * If set to `null`, all dates will be selectable.
+         *
+         * @type {DateFilter | null}
+         *
+         * @example
+         * ```ts
+         * // Filter out weekends
+         * const filterFn: DateFilter = (date) => date.getDay() !== 0 && date.getDay() !== 6;
+         * ```
+         */
         this.filterFn = null;
         this.selectedDateChange = this.calendar.outputDate$;
         this.selectedDateRangeChange = this.daterange.outputDateRange$;