@odx/angular 2.11.3 → 2.12.0

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

@@ -1,56 +1,69 @@
 import { __decorate, __metadata } from 'tslib';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { Injectable, inject, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, Pipe, Directive, Input } from '@angular/core';
+import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, Pipe, inject, Directive } from '@angular/core';
 import * as i2 from '@odx/angular';
 import { CoreModule, DisabledController } from '@odx/angular';
 import { CSSComponent, CSSModifier } from '@odx/angular/internal';
-import { createConfigTokens, isString, isPresent, Pure, injectElement, hasChanged, deferFn, untilDestroyed, isFunction } from '@odx/angular/utils';
+import { isString, isPresent, injectElement, hasChanged, createConfigTokens, deferFn, untilDestroyed, trackByIndex, isFunction } from '@odx/angular/utils';
+import { isSameDay, isSameMonth, isSameYear, endOfDay, endOfMonth, endOfYear, startOfDay, startOfMonth, startOfYear, isValid, toDate, addMonths, subMonths, isEqual, format, startOfWeek, addDays, endOfWeek, eachMonthOfInterval, addYears, getYear, setYear, subDays, subWeeks, addWeeks, setMonth, getMonth } from 'date-fns';
+import { BehaviorSubject, Subject, shareReplay, merge, filter, distinctUntilChanged, map, defer, of } from 'rxjs';
 import { ActionGroupComponent } from '@odx/angular/components/action-group';
 import { ButtonComponent } from '@odx/angular/components/button';
 import { IconComponent } from '@odx/angular/components/icon';
-import { BehaviorSubject, shareReplay, tap, map } from 'rxjs';
 import { enGB } from 'date-fns/locale';
-import { isSameDay, isSameMonth, isSameYear, isValid, toDate, endOfDay, endOfMonth, endOfYear, startOfDay, startOfMonth, startOfYear, addMonths, subMonths, startOfWeek, addDays, endOfWeek, eachMonthOfInterval, addYears, getYear, setYear, format, subDays, subWeeks, addWeeks, setMonth, getMonth } from 'date-fns';
 import * as i1 from '@angular/common';
 import { DOCUMENT } from '@angular/common';
+import * as i2$1 from '@ngrx/component';
 
-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),
-});
-
-var CalendarViewEnum;
-(function (CalendarViewEnum) {
-    CalendarViewEnum["Month"] = "month";
-    CalendarViewEnum["Year"] = "year";
-    CalendarViewEnum["Years"] = "years";
-})(CalendarViewEnum || (CalendarViewEnum = {}));
+var CalendarView;
+(function (CalendarView) {
+    CalendarView["Month"] = "month";
+    CalendarView["Year"] = "year";
+    CalendarView["Years"] = "years";
+})(CalendarView || (CalendarView = {}));
 
-const functionList$5 = {
-    [CalendarViewEnum.Month]: (currentDate, date) => isSameDay(currentDate, date),
-    [CalendarViewEnum.Year]: (currentDate, date) => isSameMonth(currentDate, date),
-    [CalendarViewEnum.Years]: (currentDate, date) => isSameYear(currentDate, date),
+const dateValidators$4 = {
+    [CalendarView.Month]: (currentDate, date) => isSameDay(currentDate, date),
+    [CalendarView.Year]: (currentDate, date) => isSameMonth(currentDate, date),
+    [CalendarView.Years]: (currentDate, date) => isSameYear(currentDate, date),
 };
 function checkIdenticalDate(currentDate, date, calendarView) {
-    return functionList$5[calendarView](currentDate, date);
+    return dateValidators$4[calendarView](currentDate, date);
 }
 
-const functionList$4 = {
-    [CalendarViewEnum.Month]: (config) => config.dayA11yLabel,
-    [CalendarViewEnum.Year]: (config) => config.monthA11yLabel,
-    [CalendarViewEnum.Years]: (config) => config.yearA11yLabel,
+const labelResolvers = {
+    [CalendarView.Month]: (config) => config.dayA11yLabel,
+    [CalendarView.Year]: (config) => config.monthA11yLabel,
+    [CalendarView.Years]: (config) => config.yearA11yLabel,
 };
 function getA11yLabel(calendarView, config) {
-    return functionList$4[calendarView](config);
+    return labelResolvers[calendarView](config);
+}
+
+const dateValidators$3 = {
+    [CalendarView.Month]: (maxDate, date) => endOfDay(maxDate) < endOfDay(date),
+    [CalendarView.Year]: (maxDate, date) => endOfMonth(maxDate) < endOfMonth(date),
+    [CalendarView.Years]: (maxDate, date) => endOfYear(maxDate) < endOfYear(date),
+};
+function validateMaxDate(maxDate, date, calendarView) {
+    return dateValidators$3[calendarView](maxDate, date);
+}
+
+const dateValidators$2 = {
+    [CalendarView.Month]: (minDate, date) => startOfDay(minDate) > startOfDay(date),
+    [CalendarView.Year]: (minDate, date) => startOfMonth(minDate) > startOfMonth(date),
+    [CalendarView.Years]: (minDate, date) => startOfYear(minDate) > startOfYear(date),
+};
+function validateMinDate(maxDate, date, calendarView) {
+    return dateValidators$2[calendarView](maxDate, date);
+}
+
+function isDateDisabled(date, calendarView, minDate, maxDate, filterFn) {
+    const minDateValidation = minDate && validateMinDate(minDate, date, calendarView);
+    const maxDateValidation = maxDate && validateMaxDate(maxDate, date, calendarView);
+    const isDateFiltered = calendarView === CalendarView.Month && !!(filterFn === null || filterFn === void 0 ? void 0 : filterFn(date));
+    return minDateValidation || maxDateValidation || isDateFiltered;
 }
 
 function parseDate(value) {
@@ -66,236 +79,98 @@ function parseDate(value) {
     }
 }
 
-const functionList$3 = {
-    [CalendarViewEnum.Month]: (maxDate, date) => endOfDay(maxDate) < endOfDay(date),
-    [CalendarViewEnum.Year]: (maxDate, date) => endOfMonth(maxDate) < endOfMonth(date),
-    [CalendarViewEnum.Years]: (maxDate, date) => endOfYear(maxDate) < endOfYear(date),
-};
-function validateMaxDate(maxDate, date, calendarView) {
-    return functionList$3[calendarView](maxDate, date);
-}
-
-const functionList$2 = {
-    [CalendarViewEnum.Month]: (minDate, date) => startOfDay(minDate) > startOfDay(date),
-    [CalendarViewEnum.Year]: (minDate, date) => startOfMonth(minDate) > startOfMonth(date),
-    [CalendarViewEnum.Years]: (minDate, date) => startOfYear(minDate) > startOfYear(date),
-};
-function validateMinDate(maxDate, date, calendarView) {
-    return functionList$2[calendarView](maxDate, date);
-}
-
-const functionList$1 = {
-    [CalendarViewEnum.Month]: (maxDate, date) => maxDate < startOfMonth(addMonths(date, 1)),
-    [CalendarViewEnum.Year]: (maxDate, date) => maxDate < startOfYear(addMonths(date, 12)),
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    [CalendarViewEnum.Years]: (maxDate, date) => false,
+const dateValidators$1 = {
+    [CalendarView.Month]: (maxDate, date) => maxDate < startOfMonth(addMonths(date, 1)),
+    [CalendarView.Year]: (maxDate, date) => maxDate < startOfYear(addMonths(date, 12)),
+    [CalendarView.Years]: () => false,
 };
 function validateNextDateSet(maxDate, date, calendarView) {
-    return functionList$1[calendarView](maxDate, date);
+    return dateValidators$1[calendarView](maxDate, date);
 }
 
-const functionList = {
-    [CalendarViewEnum.Month]: (minDate, date) => minDate > endOfMonth(subMonths(date, 1)),
-    [CalendarViewEnum.Year]: (minDate, date) => minDate > endOfYear(subMonths(date, 12)),
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    [CalendarViewEnum.Years]: () => false,
+const dateValidators = {
+    [CalendarView.Month]: (minDate, date) => minDate > endOfMonth(subMonths(date, 1)),
+    [CalendarView.Year]: (minDate, date) => minDate > endOfYear(subMonths(date, 12)),
+    [CalendarView.Years]: () => false,
 };
 function validatePreviousDateSet(minDate, date, calendarView) {
-    return functionList[calendarView](minDate, date);
+    return dateValidators[calendarView](minDate, date);
 }
 
 class CalendarService {
     constructor() {
-        this.calendarView$$ = new BehaviorSubject(CalendarViewEnum.Month);
-        this.activeDate$$ = new BehaviorSubject(startOfDay(new Date()));
+        this.calendarView$$ = new BehaviorSubject(CalendarView.Month);
+        this.activeDate$$ = new Subject();
         this.selectedDate$$ = new BehaviorSubject(null);
-        this.minDate = null;
-        this.maxDate = null;
-        this.filterFn = null;
         this.calendarView$ = this.calendarView$$.pipe(shareReplay({ refCount: true }));
-        this.activeDate$ = this.activeDate$$.pipe(shareReplay({ refCount: true }));
-        this.selectedDate$ = this.selectedDate$$.pipe(tap((date) => isPresent(date) && this.setActiveDate(date)), shareReplay({ refCount: true }));
+        this.selectedDate$ = this.selectedDate$$.pipe(shareReplay({ refCount: true }));
+        this.activeDate$ = merge(this.activeDate$$, this.selectedDate$).pipe(filter(Boolean), distinctUntilChanged((prev, curr) => isEqual(prev, curr)), shareReplay({ refCount: true }));
     }
     setActiveDate(value) {
-        if (isPresent(value)) {
-            this.activeDate$$.next(parseDate(value));
-        }
+        if (!isPresent(value))
+            return;
+        this.activeDate$$.next(parseDate(value));
     }
     selectDate(value) {
-        if (isPresent(value)) {
-            this.selectedDate$$.next(startOfDay(parseDate(value)));
-        }
-        else {
-            this.selectedDate$$.next(null);
-        }
-    }
-    get activeDate() {
-        return this.activeDate$$.getValue();
-    }
-    get selectedDate() {
-        return this.selectedDate$$.getValue();
+        const date = isPresent(value) ? startOfDay(parseDate(value)) : null;
+        this.selectedDate$$.next(date);
+        this.setActiveDate(date);
     }
     changeView(view) {
         this.calendarView$$.next(view);
     }
-    get calendarCurrentView() {
-        return this.calendarView$$.getValue();
-    }
-    isDateDisabled(date) {
-        var _a, _b;
-        const minDate = this.minDate && validateMinDate(this.minDate, date, this.calendarCurrentView);
-        const maxDate = this.maxDate && validateMaxDate(this.maxDate, date, this.calendarCurrentView);
-        let isDateFiltered = false;
-        if (this.calendarCurrentView === CalendarViewEnum.Month) {
-            isDateFiltered = (_b = (_a = this.filterFn) === null || _a === void 0 ? void 0 : _a.call(this, date)) !== null && _b !== void 0 ? _b : false;
-        }
-        return minDate || maxDate || isDateFiltered;
-    }
-    isPreviousDateSetDisabled() {
-        return this.minDate ? validatePreviousDateSet(this.minDate, this.activeDate, this.calendarCurrentView) : false;
-    }
-    isNextDateSetDisabled() {
-        return this.maxDate ? validateNextDateSet(this.maxDate, this.activeDate, this.calendarCurrentView) : false;
-    }
 }
 CalendarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 CalendarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarService });
-__decorate([
-    Pure,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Date]),
-    __metadata("design:returntype", Boolean)
-], CalendarService.prototype, "isDateDisabled", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarService, decorators: [{
             type: Injectable
-        }], propDecorators: { isDateDisabled: [] } });
-
-class CalendarMonthService {
-    constructor() {
-        this.calendar = inject(CalendarService);
-        this.weekDays$ = this.calendar.activeDate$.pipe(map((date) => this.generateWeekDays(date)));
-        this.weeks$ = this.calendar.activeDate$.pipe(map((date) => this.generateWeeks(date)));
-    }
-    generateWeekDays(date) {
-        const firstWeekDay = startOfWeek(date, { weekStartsOn: 1 });
-        return Array.from({ length: 7 }, (_, i) => addDays(firstWeekDay, i));
-    }
-    generateWeeks(date) {
-        const startOfTheSelectedMonth = startOfMonth(date);
-        const endOfTheSelectedMonth = endOfMonth(date);
-        const startDate = startOfWeek(startOfTheSelectedMonth, { weekStartsOn: 1 });
-        const endDate = endOfWeek(endOfTheSelectedMonth);
-        const allWeeks = [];
-        let currentDate = startDate;
-        while (currentDate <= endDate) {
-            allWeeks.push(this.generateDaysForWeek(currentDate, date));
-            currentDate = addDays(currentDate, 7);
-        }
-        return allWeeks;
-    }
-    generateDaysForWeek(date, currentDate) {
-        return Array.from({ length: 7 }).map((_, i) => addDays(date, i), currentDate);
-    }
-}
-CalendarMonthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarMonthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-CalendarMonthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarMonthService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarMonthService, decorators: [{
-            type: Injectable
-        }] });
-
-class CalendarYearService {
-    constructor() {
-        this.calendar = inject(CalendarService);
-        this.seasonSeparator = 3;
-        this.seasons$ = this.calendar.activeDate$.pipe(map((selectedDate) => this.generateSeasons(selectedDate)));
-    }
-    generateSeasons(date) {
-        const seasons = [];
-        const months = eachMonthOfInterval({
-            start: startOfYear(date),
-            end: endOfYear(date),
-        });
-        let index = 0;
-        while (index < months.length) {
-            seasons.push(months.slice(index, index + this.seasonSeparator));
-            index += this.seasonSeparator;
-        }
-        return seasons;
-    }
-}
-CalendarYearService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarYearService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-CalendarYearService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarYearService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarYearService, decorators: [{
-            type: Injectable
-        }] });
-
-class CalendarYearsService {
-    constructor() {
-        this.yearsSeparator = 3;
-        this.yearsLimit = 100;
-        this.date = new Date();
-    }
-    get years() {
-        const startDate = startOfYear(addYears(this.date, -this.yearsLimit));
-        const startYear = getYear(startDate);
-        const endDate = startOfYear(addYears(this.date, this.yearsLimit));
-        const endYear = getYear(endDate);
-        const years = [];
-        const yearRows = [];
-        for (let i = startYear; i <= endYear; i++) {
-            years.push(setYear(startDate, i));
-        }
-        let index = 0;
-        while (index < years.length) {
-            yearRows.push(years.slice(index, index + this.yearsSeparator));
-            index += this.yearsSeparator;
-        }
-        return yearRows;
-    }
-}
-CalendarYearsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarYearsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-CalendarYearsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarYearsService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarYearsService, decorators: [{
-            type: Injectable
         }] });
 
 let CalendarHeaderComponent = class CalendarHeaderComponent {
     constructor() {
-        this.calendar = inject(CalendarService);
+        this.isPreviousDisabled = false;
+        this.isNextDisabled = false;
         this.element = injectElement();
+        this.minDate = null;
+        this.maxDate = null;
         this.previous = new EventEmitter();
         this.next = new EventEmitter();
         this.changeView = new EventEmitter();
-        this.config = injectCalendarConfig();
+    }
+    ngOnChanges(changes) {
+        if (hasChanged(changes, ['activeDate', 'calendarView', 'minDate', 'maxDate'], false)) {
+            this.isPreviousDisabled = this.minDate ? validatePreviousDateSet(this.minDate, this.activeDate, this.calendarView) : false;
+            this.isNextDisabled = this.maxDate ? validateNextDateSet(this.maxDate, this.activeDate, this.calendarView) : false;
+        }
     }
     previousClicked(event) {
-        !this.isPreviousDisabled && this.previous.emit(event);
+        if (this.isPreviousDisabled)
+            return;
+        this.previous.emit(event);
     }
     nextClicked(event) {
-        !this.isNextDisabled && this.next.emit(event);
-    }
-    get handleIsPreviousDisabled$() {
-        return this.calendar.activeDate$.pipe(map(() => this.isPreviousDisabled));
-    }
-    get handleIsNextDisabled$() {
-        return this.calendar.activeDate$.pipe(map(() => this.isNextDisabled));
-    }
-    get isPreviousDisabled() {
-        return this.calendar.isPreviousDateSetDisabled();
-    }
-    get isNextDisabled() {
-        return this.calendar.isNextDateSetDisabled();
+        if (this.isNextDisabled)
+            return;
+        this.next.emit(event);
     }
 };
 CalendarHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CalendarHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CalendarHeaderComponent, isStandalone: true, selector: "odx-calendar-header", outputs: { previous: "previous", next: "next", changeView: "changeView" }, ngImport: i0, template: "<odx-action-group>\n  <button odxButton (click)=\"previousClicked($event)\" [disabled]=\"handleIsPreviousDisabled$ | async\">\n    <odx-icon name=\"chevron-left\"></odx-icon>\n  </button>\n\n  <button class=\"odx-calendar-header__title\" odxButton (click)=\"changeView.emit()\">\n    <ng-content></ng-content>\n  </button>\n\n  <button odxButton (click)=\"nextClicked($event)\" [disabled]=\"handleIsNextDisabled$ | async\">\n    <odx-icon name=\"chevron-right\"></odx-icon>\n  </button>\n</odx-action-group>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: i2.DisabledController, selector: "[disabled]", inputs: ["disabled"] }, { kind: "component", type: ActionGroupComponent, selector: "odx-action-group", inputs: ["reverse"] }, { kind: "component", type: ButtonComponent, selector: "button[odxButton], a[odxButton]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+CalendarHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CalendarHeaderComponent, isStandalone: true, selector: "odx-calendar-header", inputs: { activeDate: "activeDate", calendarView: "calendarView", minDate: "minDate", maxDate: "maxDate" }, outputs: { previous: "previous", next: "next", changeView: "changeView" }, usesOnChanges: true, ngImport: i0, template: "<odx-action-group>\n  <button odxButton [disabled]=\"isPreviousDisabled\" (click)=\"previousClicked($event)\">\n    <odx-icon name=\"chevron-left\"></odx-icon>\n  </button>\n\n  <button odxButton class=\"odx-calendar-header__title\" (click)=\"changeView.emit()\">\n    <ng-content></ng-content>\n  </button>\n\n  <button odxButton [disabled]=\"isNextDisabled\" (click)=\"nextClicked($event)\">\n    <odx-icon name=\"chevron-right\"></odx-icon>\n  </button>\n</odx-action-group>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.DisabledController, selector: "[disabled]", inputs: ["disabled"] }, { kind: "component", type: ActionGroupComponent, selector: "odx-action-group", inputs: ["reverse"] }, { kind: "component", type: ButtonComponent, selector: "button[odxButton], a[odxButton]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 CalendarHeaderComponent = __decorate([
     CSSComponent('calendar-header')
 ], CalendarHeaderComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'odx-calendar-header', standalone: true, imports: [CoreModule, ActionGroupComponent, ButtonComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<odx-action-group>\n  <button odxButton (click)=\"previousClicked($event)\" [disabled]=\"handleIsPreviousDisabled$ | async\">\n    <odx-icon name=\"chevron-left\"></odx-icon>\n  </button>\n\n  <button class=\"odx-calendar-header__title\" odxButton (click)=\"changeView.emit()\">\n    <ng-content></ng-content>\n  </button>\n\n  <button odxButton (click)=\"nextClicked($event)\" [disabled]=\"handleIsNextDisabled$ | async\">\n    <odx-icon name=\"chevron-right\"></odx-icon>\n  </button>\n</odx-action-group>\n" }]
-        }], propDecorators: { previous: [{
+            args: [{ selector: 'odx-calendar-header', standalone: true, imports: [CoreModule, ActionGroupComponent, ButtonComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<odx-action-group>\n  <button odxButton [disabled]=\"isPreviousDisabled\" (click)=\"previousClicked($event)\">\n    <odx-icon name=\"chevron-left\"></odx-icon>\n  </button>\n\n  <button odxButton class=\"odx-calendar-header__title\" (click)=\"changeView.emit()\">\n    <ng-content></ng-content>\n  </button>\n\n  <button odxButton [disabled]=\"isNextDisabled\" (click)=\"nextClicked($event)\">\n    <odx-icon name=\"chevron-right\"></odx-icon>\n  </button>\n</odx-action-group>\n" }]
+        }], propDecorators: { activeDate: [{
+                type: Input
+            }], calendarView: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], previous: [{
                 type: Output
             }], next: [{
                 type: Output
@@ -303,6 +178,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Output
             }] } });
 
+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),
+    yearView: {
+        itemsPerRow: 3,
+    },
+    yearsView: {
+        itemsPerRow: 3,
+        padding: 100,
+    },
+});
+
 class DateLabelPipe {
     constructor() {
         this.config = injectCalendarConfig();
@@ -314,28 +209,28 @@ class DateLabelPipe {
     }
 }
 DateLabelPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DateLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-DateLabelPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DateLabelPipe, isStandalone: true, name: "odxDateLabel", pure: false });
+DateLabelPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DateLabelPipe, isStandalone: true, name: "odxDateLabel" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DateLabelPipe, decorators: [{
             type: Pipe,
             args: [{
-                    pure: false,
-                    name: 'odxDateLabel',
                     standalone: true,
+                    name: 'odxDateLabel',
+                    pure: true,
                 }]
         }] });
 
 let CalendarCellDirective = class CalendarCellDirective {
     constructor() {
         this.disabledController = DisabledController.inject();
+        this.config = injectCalendarConfig();
+        this.dateLabelPipe = inject(DateLabelPipe);
         this.isActive = false;
         this.isSelected = false;
         this.isHidden = false;
+        this.ariaLabel = '';
         this.isCurrent = false;
         this.adjacent = false;
         this.element = injectElement();
-        this.dateLabelPipe = inject(DateLabelPipe);
-        this.config = injectCalendarConfig();
-        this.calendarView = CalendarViewEnum.Month;
         this.activeDate = null;
         this.selectedDate = null;
     }
@@ -344,12 +239,13 @@ let CalendarCellDirective = class CalendarCellDirective {
         return !!((_a = this.disabledController) === null || _a === void 0 ? void 0 : _a.disabled);
     }
     ngOnChanges(changes) {
-        if (hasChanged(changes, ['date'], false)) {
+        if (hasChanged(changes, ['date', 'calendarView'], false)) {
+            this.ariaLabel = this.dateLabelPipe.transform(this.date, getA11yLabel(this.calendarView, this.config));
             this.isCurrent = checkIdenticalDate(this.date, new Date(), this.calendarView);
         }
         if (this.activeDate && hasChanged(changes, ['date', 'activeDate'], false)) {
             this.isActive = checkIdenticalDate(this.date, this.activeDate, this.calendarView);
-            if (this.calendarView === CalendarViewEnum.Month) {
+            if (this.calendarView === CalendarView.Month) {
                 this.adjacent = !isSameMonth(this.date, this.activeDate);
                 this.isHidden = this.adjacent && !this.config.displayAdjacentDays;
             }
@@ -361,10 +257,6 @@ let CalendarCellDirective = class CalendarCellDirective {
             deferFn(() => this.element.nativeElement.focus());
         }
     }
-    get ariaLabel() {
-        const dateFormat = getA11yLabel(this.calendarView, this.config);
-        return this.dateLabelPipe.transform(this.date, dateFormat);
-    }
 };
 CalendarCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
 CalendarCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CalendarCellDirective, isStandalone: true, selector: "[odxCalendarCell]", inputs: { date: ["odxCalendarCell", "date"], calendarView: ["odxCalendarCellCalendarView", "calendarView"], activeDate: ["odxCalendarCellActiveDate", "activeDate"], selectedDate: ["odxCalendarCellSelectedDate", "selectedDate"] }, host: { properties: { "class.is-disabled": "isDisabled", "class.is-selected": "isSelected", "attr.hidden": "isHidden || null", "tabindex": "isActive ? 0 : -1", "attr.aria-label": "ariaLabel", "attr.aria-disabled": "isDisabled", "attr.type": "\"button\"" } }, providers: [DisabledController.connect(), DateLabelPipe], usesOnChanges: true, ngImport: i0 });
@@ -414,19 +306,18 @@ class CalendarViewDirective {
         this.takeUntilDestroyed = untilDestroyed();
         this.calendar = inject(CalendarService);
         this.config = injectCalendarConfig();
+        this.trackByIndex = trackByIndex;
         this.element = injectElement();
-    }
-    get activeDate() {
-        return this.calendar.activeDate;
-    }
-    trackByIndex(index) {
-        return index;
+        this.selectedDate = null;
+        this.minDate = null;
+        this.maxDate = null;
+        this.filterFn = null;
     }
     isDateDisabled(value) {
-        return this.calendar.isDateDisabled(value);
+        return isDateDisabled(value, this.currentView, this.minDate, this.maxDate, this.filterFn);
     }
     changeView() {
-        this.calendar.changeView(this.calendarNextView);
+        this.calendar.changeView(this.nextView);
     }
     updateActiveDate(event, date) {
         event.preventDefault();
@@ -435,20 +326,121 @@ class CalendarViewDirective {
     }
 }
 CalendarViewDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarViewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CalendarViewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CalendarViewDirective, isStandalone: true, ngImport: i0 });
+CalendarViewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CalendarViewDirective, isStandalone: true, inputs: { activeDate: "activeDate", selectedDate: "selectedDate", minDate: "minDate", maxDate: "maxDate", filterFn: "filterFn" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarViewDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                 }]
+        }], propDecorators: { activeDate: [{
+                type: Input
+            }], selectedDate: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], filterFn: [{
+                type: Input
+            }] } });
+
+class CalendarMonthService {
+    constructor() {
+        this.calendar = inject(CalendarService);
+        this.weekDays$ = this.calendar.activeDate$.pipe(map((date) => this.generateWeekDays(date)));
+        this.weeks$ = this.calendar.activeDate$.pipe(map((date) => this.generateWeeks(date)));
+    }
+    generateWeekDays(date) {
+        const firstWeekDay = startOfWeek(date, { weekStartsOn: 1 });
+        return Array.from({ length: 7 }, (_, i) => addDays(firstWeekDay, i));
+    }
+    generateWeeks(date) {
+        const startOfTheSelectedMonth = startOfMonth(date);
+        const endOfTheSelectedMonth = endOfMonth(date);
+        const startDate = startOfWeek(startOfTheSelectedMonth, { weekStartsOn: 1 });
+        const endDate = endOfWeek(endOfTheSelectedMonth);
+        const allWeeks = [];
+        let currentDate = startDate;
+        while (currentDate <= endDate) {
+            allWeeks.push(this.generateDaysForWeek(currentDate, date));
+            currentDate = addDays(currentDate, 7);
+        }
+        return allWeeks;
+    }
+    generateDaysForWeek(date, currentDate) {
+        return Array.from({ length: 7 }).map((_, i) => addDays(date, i), currentDate);
+    }
+}
+CalendarMonthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarMonthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CalendarMonthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarMonthService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarMonthService, decorators: [{
+            type: Injectable
+        }] });
+
+class CalendarYearService {
+    constructor() {
+        this.config = injectCalendarConfig();
+        this.calendar = inject(CalendarService);
+        this.seasons$ = this.calendar.activeDate$.pipe(map((selectedDate) => this.generateSeasons(selectedDate)));
+    }
+    generateSeasons(date) {
+        const { itemsPerRow } = this.config.yearView;
+        const seasons = [];
+        const months = eachMonthOfInterval({
+            start: startOfYear(date),
+            end: endOfYear(date),
+        });
+        let index = 0;
+        while (index < months.length) {
+            seasons.push(months.slice(index, index + itemsPerRow));
+            index += itemsPerRow;
+        }
+        return seasons;
+    }
+}
+CalendarYearService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarYearService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CalendarYearService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarYearService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarYearService, decorators: [{
+            type: Injectable
+        }] });
+
+class CalendarYearsService {
+    constructor() {
+        this.config = injectCalendarConfig();
+        this.years$ = defer(() => of(this.generateYears()));
+    }
+    generateYears() {
+        const { itemsPerRow, padding } = this.config.yearsView;
+        const now = Date.now();
+        const startDate = startOfYear(addYears(now, -padding));
+        const startYear = getYear(startDate);
+        const endDate = startOfYear(addYears(now, padding));
+        const endYear = getYear(endDate);
+        const years = [];
+        const yearRows = [];
+        for (let i = startYear; i <= endYear; i++) {
+            years.push(setYear(startDate, i));
+        }
+        let index = 0;
+        while (index < years.length) {
+            yearRows.push(years.slice(index, index + itemsPerRow));
+            index += itemsPerRow;
+        }
+        return yearRows;
+    }
+}
+CalendarYearsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarYearsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CalendarYearsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarYearsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarYearsService, decorators: [{
+            type: Injectable
         }] });
 
 let CalendarMonthComponent = class CalendarMonthComponent extends CalendarViewDirective {
     constructor() {
         super(...arguments);
         this.calendarMonth = inject(CalendarMonthService);
-        this.calendarNextView = CalendarViewEnum.Years;
-        this.calendarCurrentView = CalendarViewEnum.Month;
+        this.nextView = CalendarView.Years;
+        this.currentView = CalendarView.Month;
         this.selectedChange = new EventEmitter();
     }
     previousDay(event) {
@@ -477,13 +469,13 @@ let CalendarMonthComponent = class CalendarMonthComponent extends CalendarViewDi
     }
 };
 CalendarMonthComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarMonthComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CalendarMonthComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CalendarMonthComponent, isStandalone: true, selector: "odx-calendar-month", outputs: { selectedChange: "selectedChange" }, 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 (previous)=\"previousMonth($event)\" (next)=\"nextMonth($event)\" (changeView)=\"changeView()\">\n          {{ calendar.activeDate$ | async | 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    *ngIf=\"calendar.activeDate$ | async as activeDate\"\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          [odxCalendarCellSelectedDate]=\"calendar.selectedDate$ | async\"\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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "component", type: CalendarHeaderComponent, selector: "odx-calendar-header", outputs: ["previous", "next", "changeView"] }, { kind: "pipe", type: DateLabelPipe, name: "odxDateLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+CalendarMonthComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CalendarMonthComponent, isStandalone: true, selector: "odx-calendar-month", outputs: { selectedChange: "selectedChange" }, 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          (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"] }, { 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: "15.2.9", 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 (previous)=\"previousMonth($event)\" (next)=\"nextMonth($event)\" (changeView)=\"changeView()\">\n          {{ calendar.activeDate$ | async | 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    *ngIf=\"calendar.activeDate$ | async as activeDate\"\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          [odxCalendarCellSelectedDate]=\"calendar.selectedDate$ | async\"\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: 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          (click)=\"selectDate(day)\"\n        >\n          {{ day | odxDateLabel: config.dayLabel }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n" }]
         }], propDecorators: { selectedChange: [{
                 type: Output
             }] } });
@@ -492,8 +484,8 @@ let CalendarYearComponent = class CalendarYearComponent extends CalendarViewDire
     constructor() {
         super(...arguments);
         this.calendarYear = inject(CalendarYearService);
-        this.calendarNextView = CalendarViewEnum.Month;
-        this.calendarCurrentView = CalendarViewEnum.Year;
+        this.nextView = CalendarView.Month;
+        this.currentView = CalendarView.Year;
     }
     previousMonth(event) {
         this.updateActiveDate(event, subMonths(this.activeDate, 1));
@@ -516,19 +508,19 @@ let CalendarYearComponent = class CalendarYearComponent extends CalendarViewDire
     selectDate(value) {
         if (this.isDateDisabled(value))
             return;
-        const date = setMonth(this.calendar.activeDate, getMonth(value));
+        const date = setMonth(this.activeDate, getMonth(value));
         this.calendar.selectDate(date);
         this.changeView();
     }
 };
 CalendarYearComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarYearComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CalendarYearComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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 (previous)=\"previousYear($event)\" (next)=\"nextYear($event)\" (changeView)=\"changeView()\">\n          {{ calendar.activeDate$ | async | odxDateLabel: config.yearLabel }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n  </thead>\n\n  <tbody\n    *ngIf=\"calendar.activeDate$ | async as activeDate\"\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          [odxCalendarCellSelectedDate]=\"calendar.selectedDate$ | async\"\n          [odxCalendarCellCalendarView]=\"calendarCurrentView\"\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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "component", type: CalendarHeaderComponent, selector: "odx-calendar-header", outputs: ["previous", "next", "changeView"] }, { kind: "pipe", type: DateLabelPipe, name: "odxDateLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+CalendarYearComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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          (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"] }, { 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: "15.2.9", 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 (previous)=\"previousYear($event)\" (next)=\"nextYear($event)\" (changeView)=\"changeView()\">\n          {{ calendar.activeDate$ | async | odxDateLabel: config.yearLabel }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n  </thead>\n\n  <tbody\n    *ngIf=\"calendar.activeDate$ | async as activeDate\"\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          [odxCalendarCellSelectedDate]=\"calendar.selectedDate$ | async\"\n          [odxCalendarCellCalendarView]=\"calendarCurrentView\"\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: 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          (click)=\"selectDate(month)\"\n        >\n          {{ month | odxDateLabel: config.monthLabel }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n" }]
         }] });
 
 let CalendarYearsComponent = class CalendarYearsComponent extends CalendarViewDirective {
@@ -536,8 +528,8 @@ let CalendarYearsComponent = class CalendarYearsComponent extends CalendarViewDi
         super(...arguments);
         this.document = inject(DOCUMENT);
         this.calendarYears = inject(CalendarYearsService);
-        this.calendarNextView = CalendarViewEnum.Year;
-        this.calendarCurrentView = CalendarViewEnum.Years;
+        this.nextView = CalendarView.Year;
+        this.currentView = CalendarView.Years;
     }
     ngAfterViewInit() {
         deferFn(() => this.scrollCurrentYearIntoView());
@@ -557,7 +549,7 @@ let CalendarYearsComponent = class CalendarYearsComponent extends CalendarViewDi
     selectDate(value) {
         if (this.isDateDisabled(value))
             return;
-        const date = setYear(this.calendar.activeDate, getYear(value));
+        const date = setYear(this.activeDate, getYear(value));
         this.calendar.selectDate(date);
         this.changeView();
     }
@@ -571,48 +563,40 @@ let CalendarYearsComponent = class CalendarYearsComponent extends CalendarViewDi
     }
 };
 CalendarYearsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarYearsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CalendarYearsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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\">\n  <thead aria-hidden=\"true\">\n    <th></th>\n  </thead>\n\n  <tbody\n    *ngIf=\"calendar.activeDate$ | async as activeDate\"\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; 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          [odxCalendarCellSelectedDate]=\"calendar.selectedDate$ | async\"\n          [odxCalendarCellCalendarView]=\"calendarCurrentView\"\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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "pipe", type: DateLabelPipe, name: "odxDateLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+CalendarYearsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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]=\"calendar.selectedDate$ | async\"\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$1.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: i2.DisabledController, selector: "[disabled]", inputs: ["disabled"] }, { kind: "directive", type: CalendarCellDirective, selector: "[odxCalendarCell]", inputs: ["odxCalendarCell", "odxCalendarCellCalendarView", "odxCalendarCellActiveDate", "odxCalendarCellSelectedDate"] }, { 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: "15.2.9", 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\">\n  <thead aria-hidden=\"true\">\n    <th></th>\n  </thead>\n\n  <tbody\n    *ngIf=\"calendar.activeDate$ | async as activeDate\"\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; 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          [odxCalendarCellSelectedDate]=\"calendar.selectedDate$ | async\"\n          [odxCalendarCellCalendarView]=\"calendarCurrentView\"\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]=\"calendar.selectedDate$ | async\"\n          (click)=\"selectDate(year)\"\n        >\n          {{ year | odxDateLabel: config.yearLabel }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n" }]
         }] });
 
 let CalendarComponent = class CalendarComponent {
     constructor() {
+        this.CalendarView = CalendarView;
         this.calendar = inject(CalendarService);
         this.element = injectElement();
-        this.calendarView = CalendarViewEnum;
+        this.selectedDate = null;
         this.minDate = null;
         this.maxDate = null;
         this.filterFn = null;
-        this.selectedChange = new EventEmitter();
-    }
-    set selectedDate(value) {
-        this.calendar.selectDate(value);
+        this.selectedDateChange = new EventEmitter();
     }
     ngOnChanges(changes) {
-        if (hasChanged(changes, 'minDate', false)) {
-            this.calendar.minDate = this.minDate;
-        }
-        if (hasChanged(changes, 'maxDate', false)) {
-            this.calendar.maxDate = this.maxDate;
-        }
-        if (hasChanged(changes, 'filterFn', false)) {
-            this.calendar.filterFn = this.filterFn;
+        if (hasChanged(changes, 'selectedDate', false)) {
+            this.calendar.selectDate(this.selectedDate);
         }
     }
 };
 CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CalendarComponent, isStandalone: true, selector: "odx-calendar", inputs: { selectedDate: "selectedDate", minDate: "minDate", maxDate: "maxDate", filterFn: "filterFn" }, outputs: { selectedChange: "selectedChange" }, providers: [CalendarService], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"calendar.calendarCurrentView\">\n  <odx-calendar-year *ngSwitchCase=\"calendarView.Year\"></odx-calendar-year>\n  <odx-calendar-years *ngSwitchCase=\"calendarView.Years\"></odx-calendar-years>\n  <odx-calendar-month *ngSwitchDefault (selectedChange)=\"selectedChange.emit($event)\"></odx-calendar-month>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: CalendarMonthComponent, selector: "odx-calendar-month", outputs: ["selectedChange"] }, { kind: "component", type: CalendarYearComponent, selector: "odx-calendar-year" }, { kind: "component", type: CalendarYearsComponent, selector: "odx-calendar-years" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CalendarComponent, isStandalone: true, selector: "odx-calendar", inputs: { selectedDate: "selectedDate", minDate: "minDate", maxDate: "maxDate", filterFn: "filterFn" }, outputs: { selectedDateChange: "selectedDateChange" }, providers: [CalendarService], usesOnChanges: true, ngImport: i0, template: "<ng-template [ngrxLet]=\"{ activeDate: calendar.activeDate$, calendarView: calendar.calendarView$, selectedDate: calendar.selectedDate$ }\" let-vm>\n  <ng-container [ngSwitch]=\"vm.calendarView\">\n    <odx-calendar-year\n      [activeDate]=\"vm.activeDate\"\n      [selectedDate]=\"vm.selectedDate\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [filterFn]=\"filterFn\"\n      *ngSwitchCase=\"CalendarView.Year\"\n    ></odx-calendar-year>\n    <odx-calendar-years\n      [activeDate]=\"vm.activeDate\"\n      [selectedDate]=\"vm.selectedDate\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [filterFn]=\"filterFn\"\n      *ngSwitchCase=\"CalendarView.Years\"\n    ></odx-calendar-years>\n    <odx-calendar-month\n      [activeDate]=\"vm.activeDate\"\n      [selectedDate]=\"vm.selectedDate\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [filterFn]=\"filterFn\"\n      (selectedChange)=\"selectedDateChange.emit($event)\"\n      *ngSwitchDefault\n    ></odx-calendar-month>\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: CalendarMonthComponent, selector: "odx-calendar-month", outputs: ["selectedChange"] }, { kind: "component", type: CalendarYearComponent, selector: "odx-calendar-year" }, { kind: "component", type: CalendarYearsComponent, selector: "odx-calendar-years" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 CalendarComponent = __decorate([
     CSSComponent('calendar')
 ], CalendarComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'odx-calendar', standalone: true, imports: [CoreModule, A11yModule, CalendarMonthComponent, CalendarYearComponent, CalendarYearsComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarService], template: "<ng-container [ngSwitch]=\"calendar.calendarCurrentView\">\n  <odx-calendar-year *ngSwitchCase=\"calendarView.Year\"></odx-calendar-year>\n  <odx-calendar-years *ngSwitchCase=\"calendarView.Years\"></odx-calendar-years>\n  <odx-calendar-month *ngSwitchDefault (selectedChange)=\"selectedChange.emit($event)\"></odx-calendar-month>\n</ng-container>\n" }]
+            args: [{ selector: 'odx-calendar', standalone: true, imports: [CoreModule, A11yModule, CalendarMonthComponent, CalendarYearComponent, CalendarYearsComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarService], template: "<ng-template [ngrxLet]=\"{ activeDate: calendar.activeDate$, calendarView: calendar.calendarView$, selectedDate: calendar.selectedDate$ }\" let-vm>\n  <ng-container [ngSwitch]=\"vm.calendarView\">\n    <odx-calendar-year\n      [activeDate]=\"vm.activeDate\"\n      [selectedDate]=\"vm.selectedDate\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [filterFn]=\"filterFn\"\n      *ngSwitchCase=\"CalendarView.Year\"\n    ></odx-calendar-year>\n    <odx-calendar-years\n      [activeDate]=\"vm.activeDate\"\n      [selectedDate]=\"vm.selectedDate\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [filterFn]=\"filterFn\"\n      *ngSwitchCase=\"CalendarView.Years\"\n    ></odx-calendar-years>\n    <odx-calendar-month\n      [activeDate]=\"vm.activeDate\"\n      [selectedDate]=\"vm.selectedDate\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [filterFn]=\"filterFn\"\n      (selectedChange)=\"selectedDateChange.emit($event)\"\n      *ngSwitchDefault\n    ></odx-calendar-month>\n  </ng-container>\n</ng-template>\n" }]
         }], propDecorators: { selectedDate: [{
                 type: Input
             }], minDate: [{
@@ -621,7 +605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], filterFn: [{
                 type: Input
-            }], selectedChange: [{
+            }], selectedDateChange: [{
                 type: Output
             }] } });
 
@@ -629,5 +613,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CalendarComponent, CalendarConfig, CalendarDefaultConfig, CalendarViewEnum, DateLabelPipe, injectCalendarConfig, provideCalendarConfig };
+export { CalendarCellDirective, CalendarComponent, CalendarConfig, CalendarDefaultConfig, CalendarHeaderComponent, CalendarMonthComponent, CalendarMonthService, CalendarService, CalendarView, CalendarViewDirective, CalendarYearComponent, CalendarYearService, CalendarYearsComponent, CalendarYearsService, DateLabelPipe, checkIdenticalDate, getA11yLabel, injectCalendarConfig, isDateDisabled, parseDate, provideCalendarConfig, validateMaxDate, validateMinDate, validateNextDateSet, validatePreviousDateSet };
 //# sourceMappingURL=odx-angular-components-calendar.mjs.map