@odx/angular 2.6.1 → 2.8.0

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

@@ -0,0 +1,621 @@
+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 * 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 { ActionGroupComponent } from '@odx/angular/components/action-group';
+import { ButtonComponent } from '@odx/angular/components/button';
+import { IconComponent } from '@odx/angular/components/icon';
+import { enGB } from 'date-fns/locale';
+import { BehaviorSubject, shareReplay, tap, map } from 'rxjs';
+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';
+
+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',
+    locale: new BehaviorSubject(enGB),
+});
+
+var CalendarViewEnum;
+(function (CalendarViewEnum) {
+    CalendarViewEnum["Month"] = "month";
+    CalendarViewEnum["Year"] = "year";
+    CalendarViewEnum["Years"] = "years";
+})(CalendarViewEnum || (CalendarViewEnum = {}));
+
+const functionList$5 = {
+    [CalendarViewEnum.Month]: (currentDate, date) => isSameDay(currentDate, date),
+    [CalendarViewEnum.Year]: (currentDate, date) => isSameMonth(currentDate, date),
+    [CalendarViewEnum.Years]: (currentDate, date) => isSameYear(currentDate, date),
+};
+function checkIdenticalDate(currentDate, date, calendarView) {
+    return functionList$5[calendarView](currentDate, date);
+}
+
+const functionList$4 = {
+    [CalendarViewEnum.Month]: (config) => config.dayA11yLabel,
+    [CalendarViewEnum.Year]: (config) => config.monthA11yLabel,
+    [CalendarViewEnum.Years]: (config) => config.yearA11yLabel,
+};
+function getA11yLabel(calendarView, config) {
+    return functionList$4[calendarView](config);
+}
+
+function parseDate(value) {
+    try {
+        const timestamp = isString(value) ? Date.parse(value) : value;
+        if (!isValid(timestamp)) {
+            return new Date();
+        }
+        return toDate(timestamp);
+    }
+    catch {
+        return new Date();
+    }
+}
+
+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,
+};
+function validateNextDateSet(maxDate, date, calendarView) {
+    return functionList$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,
+};
+function validatePreviousDateSet(minDate, date, calendarView) {
+    return functionList[calendarView](minDate, date);
+}
+
+class CalendarService {
+    constructor() {
+        this.calendarView$$ = new BehaviorSubject(CalendarViewEnum.Month);
+        this.activeDate$$ = new BehaviorSubject(startOfDay(new Date()));
+        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 }));
+    }
+    setActiveDate(value) {
+        if (isPresent(value)) {
+            this.activeDate$$.next(parseDate(value));
+        }
+    }
+    selectDate(value) {
+        if (isPresent(value)) {
+            this.activeDate$$.next(parseDate(value));
+            this.selectedDate$$.next(parseDate(value));
+        }
+        else {
+            this.selectedDate$$.next(null);
+        }
+    }
+    get activeDate() {
+        return this.activeDate$$.getValue();
+    }
+    get selectedDate() {
+        return this.selectedDate$$.getValue();
+    }
+    changeView(view) {
+        this.calendarView$$.next(view);
+    }
+    get calendarCurrentView() {
+        return this.calendarView$$.getValue();
+    }
+    isDateDisabled(date) {
+        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 = this.filterFn?.(date) ?? 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.element = injectElement();
+        this.previous = new EventEmitter();
+        this.next = new EventEmitter();
+        this.changeView = new EventEmitter();
+        this.config = injectCalendarConfig();
+    }
+    previousClicked(event) {
+        !this.isPreviousDisabled && this.previous.emit(event);
+    }
+    nextClicked(event) {
+        !this.isNextDisabled && this.next.emit(event);
+    }
+    get isPreviousDisabled() {
+        return this.calendar.isPreviousDateSetDisabled();
+    }
+    get isNextDisabled() {
+        return this.calendar.isNextDateSetDisabled();
+    }
+};
+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]=\"isPreviousDisabled\">\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]=\"isNextDisabled\">\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]=\"isPreviousDisabled\">\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]=\"isNextDisabled\">\n    <odx-icon name=\"chevron-right\"></odx-icon>\n  </button>\n</odx-action-group>\n" }]
+        }], propDecorators: { previous: [{
+                type: Output
+            }], next: [{
+                type: Output
+            }], changeView: [{
+                type: Output
+            }] } });
+
+class DateLabelPipe {
+    constructor() {
+        this.config = injectCalendarConfig();
+    }
+    transform(value, dateFormat) {
+        if (!value)
+            return '';
+        return format(value, dateFormat, { locale: this.config.locale.getValue() });
+    }
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DateLabelPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    pure: false,
+                    name: 'odxDateLabel',
+                    standalone: true,
+                }]
+        }] });
+
+let CalendarCellDirective = class CalendarCellDirective {
+    constructor() {
+        this.disabledController = DisabledController.inject();
+        this.isActive = false;
+        this.isSelected = false;
+        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;
+    }
+    get isDisabled() {
+        return !!this.disabledController?.disabled;
+    }
+    ngOnChanges(changes) {
+        if (hasChanged(changes, ['date'], false)) {
+            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) {
+                this.adjacent = !isSameMonth(this.date, this.activeDate);
+            }
+        }
+        if (this.selectedDate && hasChanged(changes, ['date', 'selectedDate'], false)) {
+            this.isSelected = checkIdenticalDate(this.date, this.selectedDate, this.calendarView);
+        }
+        if (this.isActive) {
+            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", "tabindex": "isActive ? 0 : -1", "attr.aria-label": "ariaLabel", "attr.aria-disabled": "isDisabled" } }, providers: [DisabledController.connect(), DateLabelPipe], usesOnChanges: true, ngImport: i0 });
+__decorate([
+    CSSModifier(),
+    __metadata("design:type", Object)
+], CalendarCellDirective.prototype, "isCurrent", void 0);
+__decorate([
+    CSSModifier(),
+    __metadata("design:type", Object)
+], CalendarCellDirective.prototype, "adjacent", void 0);
+CalendarCellDirective = __decorate([
+    CSSComponent('calendar-cell')
+], CalendarCellDirective);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[odxCalendarCell]',
+                    standalone: true,
+                    providers: [DisabledController.connect(), DateLabelPipe],
+                    host: {
+                        '[class.is-disabled]': 'isDisabled',
+                        '[class.is-selected]': 'isSelected',
+                        '[tabindex]': 'isActive ? 0 : -1',
+                        '[attr.aria-label]': 'ariaLabel',
+                        '[attr.aria-disabled]': 'isDisabled',
+                    },
+                }]
+        }], propDecorators: { isCurrent: [], adjacent: [], date: [{
+                type: Input,
+                args: ['odxCalendarCell']
+            }], calendarView: [{
+                type: Input,
+                args: ['odxCalendarCellCalendarView']
+            }], activeDate: [{
+                type: Input,
+                args: ['odxCalendarCellActiveDate']
+            }], selectedDate: [{
+                type: Input,
+                args: ['odxCalendarCellSelectedDate']
+            }] } });
+
+class CalendarViewDirective {
+    constructor() {
+        this.takeUntilDestroyed = untilDestroyed();
+        this.calendar = inject(CalendarService);
+        this.config = injectCalendarConfig();
+        this.element = injectElement();
+    }
+    get activeDate() {
+        return this.calendar.activeDate;
+    }
+    trackByIndex(index) {
+        return index;
+    }
+    isDateDisabled(value) {
+        return this.calendar.isDateDisabled(value);
+    }
+    changeView() {
+        this.calendar.changeView(this.calendarNextView);
+    }
+    updateActiveDate(event, date) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.calendar.setActiveDate(date);
+    }
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarViewDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                }]
+        }] });
+
+let CalendarMonthComponent = class CalendarMonthComponent extends CalendarViewDirective {
+    constructor() {
+        super(...arguments);
+        this.calendarMonth = inject(CalendarMonthService);
+        this.calendarNextView = CalendarViewEnum.Years;
+        this.calendarCurrentView = CalendarViewEnum.Month;
+        this.selectedChange = new EventEmitter();
+    }
+    previousDay(event) {
+        this.updateActiveDate(event, subDays(this.activeDate, 1));
+    }
+    nextDay(event) {
+        this.updateActiveDate(event, addDays(this.activeDate, 1));
+    }
+    previousWeek(event) {
+        this.updateActiveDate(event, subWeeks(this.activeDate, 1));
+    }
+    nextWeek(event) {
+        this.updateActiveDate(event, addWeeks(this.activeDate, 1));
+    }
+    previousMonth(event) {
+        this.updateActiveDate(event, subMonths(this.activeDate, 1));
+    }
+    nextMonth(event) {
+        this.updateActiveDate(event, addMonths(this.activeDate, 1));
+    }
+    selectDate(value) {
+        if (this.isDateDisabled(value))
+            return;
+        this.calendar.selectDate(value);
+        this.selectedChange.emit(value);
+    }
+};
+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; let i = index; 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 = __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; let i = index; 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" }]
+        }], propDecorators: { selectedChange: [{
+                type: Output
+            }] } });
+
+let CalendarYearComponent = class CalendarYearComponent extends CalendarViewDirective {
+    constructor() {
+        super(...arguments);
+        this.calendarYear = inject(CalendarYearService);
+        this.calendarNextView = CalendarViewEnum.Month;
+        this.calendarCurrentView = CalendarViewEnum.Year;
+    }
+    previousMonth(event) {
+        this.updateActiveDate(event, subMonths(this.activeDate, 1));
+    }
+    nextMonth(event) {
+        this.updateActiveDate(event, addMonths(this.activeDate, 1));
+    }
+    previousSeason(event) {
+        this.updateActiveDate(event, subMonths(this.activeDate, 3));
+    }
+    nextSeason(event) {
+        this.updateActiveDate(event, addMonths(this.activeDate, 3));
+    }
+    previousYear(event) {
+        this.updateActiveDate(event, subMonths(this.activeDate, 12));
+    }
+    nextYear(event) {
+        this.updateActiveDate(event, addMonths(this.activeDate, 12));
+    }
+    selectDate(value) {
+        if (this.isDateDisabled(value))
+            return;
+        const date = setMonth(this.calendar.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; let i = index; 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 = __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; let i = index; 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" }]
+        }] });
+
+let CalendarYearsComponent = class CalendarYearsComponent extends CalendarViewDirective {
+    constructor() {
+        super(...arguments);
+        this.document = inject(DOCUMENT);
+        this.calendarYears = inject(CalendarYearsService);
+        this.calendarNextView = CalendarViewEnum.Year;
+        this.calendarCurrentView = CalendarViewEnum.Years;
+    }
+    ngAfterViewInit() {
+        deferFn(() => this.scrollCurrentYearIntoView());
+    }
+    previousYear(event) {
+        this.updateActiveDate(event, subMonths(this.activeDate, 12));
+    }
+    nextYear(event) {
+        this.updateActiveDate(event, addMonths(this.activeDate, 12));
+    }
+    previousRow(event) {
+        this.updateActiveDate(event, subMonths(this.activeDate, 12 * 3));
+    }
+    nextRow(event) {
+        this.updateActiveDate(event, addMonths(this.activeDate, 12 * 3));
+    }
+    selectDate(value) {
+        if (this.isDateDisabled(value))
+            return;
+        const date = setYear(this.calendar.activeDate, getYear(value));
+        this.calendar.selectDate(date);
+        this.changeView();
+    }
+    scrollCurrentYearIntoView() {
+        const selectedYear = this.document.querySelector('.odx-calendar-cell.is-selected');
+        const currentYear = this.document.querySelector('.odx-calendar-cell--is-current');
+        const element = selectedYear || currentYear;
+        if (element && isFunction(element.scrollIntoView)) {
+            element.scrollIntoView({ block: 'center', behavior: 'smooth' });
+        }
+    }
+};
+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; let i = index; 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 = __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; let i = index; 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" }]
+        }] });
+
+let CalendarComponent = class CalendarComponent {
+    constructor() {
+        this.calendar = inject(CalendarService);
+        this.element = injectElement();
+        this.calendarView = CalendarViewEnum;
+        this.minDate = null;
+        this.maxDate = null;
+        this.filterFn = null;
+        this.selectedChange = new EventEmitter();
+    }
+    set selectedDate(value) {
+        this.calendar.selectDate(value);
+    }
+    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;
+        }
+    }
+};
+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 = __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" }]
+        }], propDecorators: { selectedDate: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], filterFn: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CalendarComponent, CalendarConfig, CalendarDefaultConfig, CalendarViewEnum, DateLabelPipe, injectCalendarConfig, provideCalendarConfig };
+//# sourceMappingURL=odx-angular-components-calendar.mjs.map