@odx/angular 10.2.1 → 11.0.0

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

@@ -5,16 +5,15 @@ import { EventEmitter, Injectable, Component, ChangeDetectionStrategy, ViewEncap
 import * as i2 from '@odx/angular';
 import { CoreModule, WindowRef, DisabledController } from '@odx/angular';
 import { CSSComponent, fastDeepEqual, CSSModifier } from '@odx/angular/internal';
-import { createConfigTokens, isString, isPresent, injectElement, hasChanged, EventManager, deferFn, untilDestroyed, trackByIndex, isFunction } from '@odx/angular/utils';
+import { createConfigTokens, isString, isPresent, injectElement, hasChanged, EventManager, deferFn, untilDestroyed, isFunction } from '@odx/angular/utils';
+import { BehaviorSubject, shareReplay, map, filter, distinctUntilChanged, merge, defer, of, withLatestFrom, combineLatest } from 'rxjs';
 import { isSameDay, isSameMonth, isSameYear, endOfDay, endOfMonth, endOfYear, startOfDay, startOfMonth, startOfYear, isValid, toDate, isBefore, isEqual, addMonths, subMonths, isWithinInterval, startOfWeek, addDays, endOfWeek, eachMonthOfInterval, addYears, getYear, setYear, subDays, subWeeks, addWeeks, setMonth, getMonth } from 'date-fns';
-import { BehaviorSubject, shareReplay, map, filter, distinctUntilChanged, merge, defer, of, withLatestFrom } from 'rxjs';
 import { ActionGroupComponent } from '@odx/angular/components/action-group';
 import { ButtonComponent } from '@odx/angular/components/button';
 import { IconComponent } from '@odx/angular/components/icon';
 import { LocalizationService } from '@odx/angular/localization';
 import * as i1 from '@angular/common';
 import { DOCUMENT } from '@angular/common';
-import * as i3 from '@ngrx/component';
 
 var CalendarSelectionMode;
 (function (CalendarSelectionMode) {
@@ -321,14 +320,14 @@ let CalendarHeaderComponent = class CalendarHeaderComponent {
         this.next.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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", "identifier"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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)\"><odx-icon name=\"chevron-left\" /></button>\n\n  <button odxButton class=\"odx-calendar-header__title\" (click)=\"changeView.emit()\">\n    <ng-content />\n  </button>\n\n  <button odxButton [disabled]=\"isNextDisabled\" (click)=\"nextClicked($event)\"><odx-icon name=\"chevron-right\" /></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", "identifier"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 };
 CalendarHeaderComponent = __decorate([
     CSSComponent('calendar-header')
 ], CalendarHeaderComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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 [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" }]
+            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)\"><odx-icon name=\"chevron-left\" /></button>\n\n  <button odxButton class=\"odx-calendar-header__title\" (click)=\"changeView.emit()\">\n    <ng-content />\n  </button>\n\n  <button odxButton [disabled]=\"isNextDisabled\" (click)=\"nextClicked($event)\"><odx-icon name=\"chevron-right\" /></button>\n</odx-action-group>\n" }]
         }], propDecorators: { activeDate: [{
                 type: Input
             }], calendarView: [{
@@ -609,7 +608,6 @@ class CalendarViewDirective {
         this.takeUntilDestroyed = untilDestroyed();
         this.calendar = inject(CalendarService);
         this.config = injectCalendarConfig();
-        this.trackByIndex = trackByIndex;
         this.element = injectElement();
         /**
          * The selected date in the calendar view.
@@ -835,14 +833,14 @@ let CalendarMonthComponent = class CalendarMonthComponent extends CalendarViewDi
         this.calendar.selectDate(value, { emitOutside: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarMonthComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CalendarMonthComponent, isStandalone: true, selector: "odx-calendar-month", providers: [CalendarMonthService], usesInheritance: true, ngImport: i0, template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"7\">\n        <odx-calendar-header\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (previous)=\"previousMonth($event)\"\n          (next)=\"nextMonth($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: { month: 'long', year: 'numeric' } }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n\n    <tr class=\"odx-calendar__weekdays\">\n      <td *ngFor=\"let day of calendarMonth.weekDays$ | async\">\n        {{ (day | odxDateLabel: { weekday: 'short' }).charAt(0) }}\n      </td>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousDay($event)\"\n    (keydown.ArrowRight)=\"nextDay($event)\"\n    (keydown.ArrowUp)=\"previousWeek($event)\"\n    (keydown.ArrowDown)=\"nextWeek($event)\"\n    (keydown.PageUp)=\"previousMonth($event)\"\n    (keydown.PageDown)=\"nextMonth($event)\"\n  >\n    <tr *ngFor=\"let week of calendarMonth.weeks$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let day of week; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(day)\"\n          [odxCalendarCell]=\"day\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          [odxCalendarCellPreviewDate]=\"previewDate\"\n          (click)=\"selectDate(day)\"\n        >\n          {{ day | odxDateLabel: { day: 'numeric' } }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: i2.DisabledController, selector: "[disabled]", inputs: ["disabled"] }, { kind: "directive", type: CalendarCellDirective, selector: "[odxCalendarCell]", inputs: ["odxCalendarCell", "odxCalendarCellCalendarView", "odxCalendarCellActiveDate", "odxCalendarCellSelectedDate", "odxCalendarCellSelectedDateRange", "odxCalendarCellPreviewDate"] }, { kind: "component", type: CalendarHeaderComponent, selector: "odx-calendar-header", inputs: ["activeDate", "calendarView", "minDate", "maxDate"], outputs: ["previous", "next", "changeView"] }, { kind: "pipe", type: DateLabelPipe, name: "odxDateLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CalendarMonthComponent, isStandalone: true, selector: "odx-calendar-month", providers: [CalendarMonthService], usesInheritance: true, ngImport: i0, template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"7\">\n        <odx-calendar-header\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (previous)=\"previousMonth($event)\"\n          (next)=\"nextMonth($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: { month: 'long', year: 'numeric' } }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n\n    <tr class=\"odx-calendar__weekdays\">\n      @for (day of calendarMonth.weekDays$ | async; track $index) {\n        <td>\n          {{ (day | odxDateLabel: { weekday: 'short' }).charAt(0) }}\n        </td>\n      }\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    @for (week of calendarMonth.weeks$ | async; track $index) {\n      <tr>\n        @for (day of week; track $index) {\n          <td role=\"gridcell\">\n            <button\n              [disabled]=\"isDateDisabled(day)\"\n              [odxCalendarCell]=\"day\"\n              [odxCalendarCellActiveDate]=\"activeDate\"\n              [odxCalendarCellCalendarView]=\"currentView\"\n              [odxCalendarCellSelectedDate]=\"selectedDate\"\n              [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n              [odxCalendarCellPreviewDate]=\"previewDate\"\n              (click)=\"selectDate(day)\"\n            >\n              {{ day | odxDateLabel: { day: 'numeric' } }}\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: i2.DisabledController, selector: "[disabled]", inputs: ["disabled"] }, { kind: "directive", type: CalendarCellDirective, selector: "[odxCalendarCell]", inputs: ["odxCalendarCell", "odxCalendarCellCalendarView", "odxCalendarCellActiveDate", "odxCalendarCellSelectedDate", "odxCalendarCellSelectedDateRange", "odxCalendarCellPreviewDate"] }, { kind: "component", type: CalendarHeaderComponent, selector: "odx-calendar-header", inputs: ["activeDate", "calendarView", "minDate", "maxDate"], outputs: ["previous", "next", "changeView"] }, { kind: "pipe", type: DateLabelPipe, name: "odxDateLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 };
 CalendarMonthComponent = __decorate([
     CSSComponent('calendar-month')
 ], CalendarMonthComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarMonthComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'odx-calendar-month', standalone: true, imports: [CoreModule, CalendarCellDirective, CalendarHeaderComponent, DateLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarMonthService], template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"7\">\n        <odx-calendar-header\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (previous)=\"previousMonth($event)\"\n          (next)=\"nextMonth($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: { month: 'long', year: 'numeric' } }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n\n    <tr class=\"odx-calendar__weekdays\">\n      <td *ngFor=\"let day of calendarMonth.weekDays$ | async\">\n        {{ (day | odxDateLabel: { weekday: 'short' }).charAt(0) }}\n      </td>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousDay($event)\"\n    (keydown.ArrowRight)=\"nextDay($event)\"\n    (keydown.ArrowUp)=\"previousWeek($event)\"\n    (keydown.ArrowDown)=\"nextWeek($event)\"\n    (keydown.PageUp)=\"previousMonth($event)\"\n    (keydown.PageDown)=\"nextMonth($event)\"\n  >\n    <tr *ngFor=\"let week of calendarMonth.weeks$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let day of week; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(day)\"\n          [odxCalendarCell]=\"day\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          [odxCalendarCellPreviewDate]=\"previewDate\"\n          (click)=\"selectDate(day)\"\n        >\n          {{ day | odxDateLabel: { day: 'numeric' } }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n" }]
+            args: [{ selector: 'odx-calendar-month', standalone: true, imports: [CoreModule, CalendarCellDirective, CalendarHeaderComponent, DateLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarMonthService], template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"7\">\n        <odx-calendar-header\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (previous)=\"previousMonth($event)\"\n          (next)=\"nextMonth($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: { month: 'long', year: 'numeric' } }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n\n    <tr class=\"odx-calendar__weekdays\">\n      @for (day of calendarMonth.weekDays$ | async; track $index) {\n        <td>\n          {{ (day | odxDateLabel: { weekday: 'short' }).charAt(0) }}\n        </td>\n      }\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    @for (week of calendarMonth.weeks$ | async; track $index) {\n      <tr>\n        @for (day of week; track $index) {\n          <td role=\"gridcell\">\n            <button\n              [disabled]=\"isDateDisabled(day)\"\n              [odxCalendarCell]=\"day\"\n              [odxCalendarCellActiveDate]=\"activeDate\"\n              [odxCalendarCellCalendarView]=\"currentView\"\n              [odxCalendarCellSelectedDate]=\"selectedDate\"\n              [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n              [odxCalendarCellPreviewDate]=\"previewDate\"\n              (click)=\"selectDate(day)\"\n            >\n              {{ day | odxDateLabel: { day: 'numeric' } }}\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
         }] });
 
 /**
@@ -884,14 +882,14 @@ let CalendarYearComponent = class CalendarYearComponent extends CalendarViewDire
         this.changeView();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarYearComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CalendarYearComponent, isStandalone: true, selector: "odx-calendar-year", providers: [CalendarYearService], usesInheritance: true, ngImport: i0, template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"3\">\n        <odx-calendar-header\n          (previous)=\"previousYear($event)\"\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (next)=\"nextYear($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: { year: 'numeric' } }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousMonth($event)\"\n    (keydown.ArrowRight)=\"nextMonth($event)\"\n    (keydown.ArrowUp)=\"previousSeason($event)\"\n    (keydown.ArrowDown)=\"nextSeason($event)\"\n    (keydown.PageDown)=\"nextYear($event)\"\n    (keydown.PageUp)=\"previousYear($event)\"\n  >\n    <tr class=\"odx-calendar__season\" *ngFor=\"let season of calendarYear.seasons$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let month of season; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(month)\"\n          [odxCalendarCell]=\"month\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          (click)=\"selectDate(month)\"\n        >\n          {{ month | odxDateLabel: { month: 'short' } }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: i2.DisabledController, selector: "[disabled]", inputs: ["disabled"] }, { kind: "directive", type: CalendarCellDirective, selector: "[odxCalendarCell]", inputs: ["odxCalendarCell", "odxCalendarCellCalendarView", "odxCalendarCellActiveDate", "odxCalendarCellSelectedDate", "odxCalendarCellSelectedDateRange", "odxCalendarCellPreviewDate"] }, { kind: "component", type: CalendarHeaderComponent, selector: "odx-calendar-header", inputs: ["activeDate", "calendarView", "minDate", "maxDate"], outputs: ["previous", "next", "changeView"] }, { kind: "pipe", type: DateLabelPipe, name: "odxDateLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CalendarYearComponent, isStandalone: true, selector: "odx-calendar-year", providers: [CalendarYearService], usesInheritance: true, ngImport: i0, template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"3\">\n        <odx-calendar-header\n          (previous)=\"previousYear($event)\"\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (next)=\"nextYear($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: { year: 'numeric' } }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousMonth($event)\"\n    (keydown.ArrowRight)=\"nextMonth($event)\"\n    (keydown.ArrowUp)=\"previousSeason($event)\"\n    (keydown.ArrowDown)=\"nextSeason($event)\"\n    (keydown.PageDown)=\"nextYear($event)\"\n    (keydown.PageUp)=\"previousYear($event)\"\n  >\n    @for (season of calendarYear.seasons$ | async; track $index) {\n      <tr class=\"odx-calendar__season\">\n        @for (month of season; track $index) {\n          <td role=\"gridcell\">\n            <button\n              [disabled]=\"isDateDisabled(month)\"\n              [odxCalendarCell]=\"month\"\n              [odxCalendarCellActiveDate]=\"activeDate\"\n              [odxCalendarCellCalendarView]=\"currentView\"\n              [odxCalendarCellSelectedDate]=\"selectedDate\"\n              [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n              (click)=\"selectDate(month)\"\n            >\n              {{ month | odxDateLabel: { month: 'short' } }}\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: i2.DisabledController, selector: "[disabled]", inputs: ["disabled"] }, { kind: "directive", type: CalendarCellDirective, selector: "[odxCalendarCell]", inputs: ["odxCalendarCell", "odxCalendarCellCalendarView", "odxCalendarCellActiveDate", "odxCalendarCellSelectedDate", "odxCalendarCellSelectedDateRange", "odxCalendarCellPreviewDate"] }, { kind: "component", type: CalendarHeaderComponent, selector: "odx-calendar-header", inputs: ["activeDate", "calendarView", "minDate", "maxDate"], outputs: ["previous", "next", "changeView"] }, { kind: "pipe", type: DateLabelPipe, name: "odxDateLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 };
 CalendarYearComponent = __decorate([
     CSSComponent('calendar-year')
 ], CalendarYearComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarYearComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'odx-calendar-year', standalone: true, imports: [CoreModule, CalendarCellDirective, CalendarHeaderComponent, DateLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarYearService], template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"3\">\n        <odx-calendar-header\n          (previous)=\"previousYear($event)\"\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (next)=\"nextYear($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: { year: 'numeric' } }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousMonth($event)\"\n    (keydown.ArrowRight)=\"nextMonth($event)\"\n    (keydown.ArrowUp)=\"previousSeason($event)\"\n    (keydown.ArrowDown)=\"nextSeason($event)\"\n    (keydown.PageDown)=\"nextYear($event)\"\n    (keydown.PageUp)=\"previousYear($event)\"\n  >\n    <tr class=\"odx-calendar__season\" *ngFor=\"let season of calendarYear.seasons$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let month of season; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(month)\"\n          [odxCalendarCell]=\"month\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          (click)=\"selectDate(month)\"\n        >\n          {{ month | odxDateLabel: { month: 'short' } }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n" }]
+            args: [{ selector: 'odx-calendar-year', standalone: true, imports: [CoreModule, CalendarCellDirective, CalendarHeaderComponent, DateLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarYearService], template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"3\">\n        <odx-calendar-header\n          (previous)=\"previousYear($event)\"\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (next)=\"nextYear($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: { year: 'numeric' } }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousMonth($event)\"\n    (keydown.ArrowRight)=\"nextMonth($event)\"\n    (keydown.ArrowUp)=\"previousSeason($event)\"\n    (keydown.ArrowDown)=\"nextSeason($event)\"\n    (keydown.PageDown)=\"nextYear($event)\"\n    (keydown.PageUp)=\"previousYear($event)\"\n  >\n    @for (season of calendarYear.seasons$ | async; track $index) {\n      <tr class=\"odx-calendar__season\">\n        @for (month of season; track $index) {\n          <td role=\"gridcell\">\n            <button\n              [disabled]=\"isDateDisabled(month)\"\n              [odxCalendarCell]=\"month\"\n              [odxCalendarCellActiveDate]=\"activeDate\"\n              [odxCalendarCellCalendarView]=\"currentView\"\n              [odxCalendarCellSelectedDate]=\"selectedDate\"\n              [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n              (click)=\"selectDate(month)\"\n            >\n              {{ month | odxDateLabel: { month: 'short' } }}\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
         }] });
 
 /**
@@ -939,14 +937,14 @@ let CalendarYearsComponent = class CalendarYearsComponent extends CalendarViewDi
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarYearsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CalendarYearsComponent, isStandalone: true, selector: "odx-calendar-years", providers: [CalendarYearsService], usesInheritance: true, ngImport: i0, template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\" *ngrxLet=\"calendar.activeDate$ as activeDate\">\n  <thead aria-hidden=\"true\">\n    <th></th>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousYear($event)\"\n    (keydown.ArrowRight)=\"nextYear($event)\"\n    (keydown.ArrowUp)=\"previousRow($event)\"\n    (keydown.ArrowDown)=\"nextRow($event)\"\n  >\n    <tr class=\"odx-calendar__year-row\" *ngFor=\"let yearRow of calendarYears.years$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let year of yearRow; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(year)\"\n          [odxCalendarCell]=\"year\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          (click)=\"selectDate(year)\"\n        >\n          {{ year | odxDateLabel: { year: 'numeric' } }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: i2.DisabledController, selector: "[disabled]", inputs: ["disabled"] }, { kind: "directive", type: i3.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: CalendarCellDirective, selector: "[odxCalendarCell]", inputs: ["odxCalendarCell", "odxCalendarCellCalendarView", "odxCalendarCellActiveDate", "odxCalendarCellSelectedDate", "odxCalendarCellSelectedDateRange", "odxCalendarCellPreviewDate"] }, { kind: "pipe", type: DateLabelPipe, name: "odxDateLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CalendarYearsComponent, isStandalone: true, selector: "odx-calendar-years", providers: [CalendarYearsService], usesInheritance: true, ngImport: i0, template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\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    @for (yearRow of calendarYears.years$ | async; track $index) {\n      <tr class=\"odx-calendar__year-row\">\n        @for (year of yearRow; track $index) {\n          <td role=\"gridcell\">\n            <button\n              [disabled]=\"isDateDisabled(year)\"\n              [odxCalendarCell]=\"year\"\n              [odxCalendarCellActiveDate]=\"calendar.activeDate$ | async\"\n              [odxCalendarCellCalendarView]=\"currentView\"\n              [odxCalendarCellSelectedDate]=\"selectedDate\"\n              [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n              (click)=\"selectDate(year)\"\n            >\n              {{ year | odxDateLabel: { year: 'numeric' } }}\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: i2.DisabledController, selector: "[disabled]", inputs: ["disabled"] }, { kind: "directive", type: CalendarCellDirective, selector: "[odxCalendarCell]", inputs: ["odxCalendarCell", "odxCalendarCellCalendarView", "odxCalendarCellActiveDate", "odxCalendarCellSelectedDate", "odxCalendarCellSelectedDateRange", "odxCalendarCellPreviewDate"] }, { kind: "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: "17.3.12", ngImport: i0, type: CalendarYearsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'odx-calendar-years', standalone: true, imports: [CoreModule, CalendarCellDirective, CalendarHeaderComponent, DateLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarYearsService], template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\" *ngrxLet=\"calendar.activeDate$ as activeDate\">\n  <thead aria-hidden=\"true\">\n    <th></th>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousYear($event)\"\n    (keydown.ArrowRight)=\"nextYear($event)\"\n    (keydown.ArrowUp)=\"previousRow($event)\"\n    (keydown.ArrowDown)=\"nextRow($event)\"\n  >\n    <tr class=\"odx-calendar__year-row\" *ngFor=\"let yearRow of calendarYears.years$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let year of yearRow; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(year)\"\n          [odxCalendarCell]=\"year\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          (click)=\"selectDate(year)\"\n        >\n          {{ year | odxDateLabel: { year: 'numeric' } }}\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\">\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    @for (yearRow of calendarYears.years$ | async; track $index) {\n      <tr class=\"odx-calendar__year-row\">\n        @for (year of yearRow; track $index) {\n          <td role=\"gridcell\">\n            <button\n              [disabled]=\"isDateDisabled(year)\"\n              [odxCalendarCell]=\"year\"\n              [odxCalendarCellActiveDate]=\"calendar.activeDate$ | async\"\n              [odxCalendarCellCalendarView]=\"currentView\"\n              [odxCalendarCellSelectedDate]=\"selectedDate\"\n              [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n              (click)=\"selectDate(year)\"\n            >\n              {{ year | odxDateLabel: { year: 'numeric' } }}\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
         }] });
 
 /**
@@ -1028,6 +1026,13 @@ let CalendarComponent = class CalendarComponent {
         this.calendar = inject(CalendarService);
         this.daterange = inject(DaterangeService);
         this.CalendarView = CalendarView;
+        this.vm$ = combineLatest({
+            activeDate: this.calendar.activeDate$,
+            calendarView: this.calendar.calendarView$,
+            selectedDate: this.calendar.selectedDate$,
+            selectedDateRange: this.daterange.dateRangeState$,
+            previewDate: this.calendar.previewDate$,
+        });
         this.element = injectElement();
         /**
          * Represents the selected date in the calendar component.
@@ -1087,7 +1092,7 @@ let CalendarComponent = class CalendarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CalendarComponent, isStandalone: true, selector: "odx-calendar", inputs: { selectedDate: "selectedDate", selectedDateRange: "selectedDateRange", minDate: "minDate", maxDate: "maxDate", filterFn: "filterFn" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateRangeChange: "selectedDateRangeChange" }, providers: [CalendarService, EventManager, DaterangeService], usesOnChanges: true, ngImport: i0, template: "<ng-template\n  [ngrxLet]=\"{\n    activeDate: calendar.activeDate$,\n    calendarView: calendar.calendarView$,\n    selectedDate: calendar.selectedDate$,\n    selectedDateRange: daterange.dateRangeState$,\n    previewDate: calendar.previewDate$\n  }\"\n  let-vm\n>\n  <ng-container [ngSwitch]=\"vm.calendarView\">\n    <odx-calendar-year\n      [activeDate]=\"vm.activeDate\"\n      [selectedDate]=\"vm.selectedDate\"\n      [selectedDateRange]=\"vm.selectedDateRange\"\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      [selectedDateRange]=\"vm.selectedDateRange\"\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      [selectedDateRange]=\"vm.selectedDateRange\"\n      [previewDate]=\"vm.previewDate\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [filterFn]=\"filterFn\"\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: i3.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: CalendarMonthComponent, selector: "odx-calendar-month" }, { kind: "component", type: CalendarYearComponent, selector: "odx-calendar-year" }, { kind: "component", type: CalendarYearsComponent, selector: "odx-calendar-years" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CalendarComponent, isStandalone: true, selector: "odx-calendar", inputs: { selectedDate: "selectedDate", selectedDateRange: "selectedDateRange", minDate: "minDate", maxDate: "maxDate", filterFn: "filterFn" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateRangeChange: "selectedDateRangeChange" }, providers: [CalendarService, EventManager, DaterangeService], usesOnChanges: true, ngImport: i0, template: "@if (vm$ | async; as vm) {\n  @switch (vm.calendarView) {\n    @case (CalendarView.Year) {\n      <odx-calendar-year\n        [activeDate]=\"vm.activeDate\"\n        [selectedDate]=\"vm.selectedDate\"\n        [selectedDateRange]=\"vm.selectedDateRange\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [filterFn]=\"filterFn\"\n      />\n    }\n    @case (CalendarView.Years) {\n      <odx-calendar-years\n        [activeDate]=\"vm.activeDate\"\n        [selectedDate]=\"vm.selectedDate\"\n        [selectedDateRange]=\"vm.selectedDateRange\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [filterFn]=\"filterFn\"\n      />\n    }\n    @default {\n      <odx-calendar-month\n        [activeDate]=\"vm.activeDate\"\n        [selectedDate]=\"vm.selectedDate\"\n        [selectedDateRange]=\"vm.selectedDateRange\"\n        [previewDate]=\"vm.previewDate\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [filterFn]=\"filterFn\"\n      />\n    }\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: CalendarMonthComponent, selector: "odx-calendar-month" }, { 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'),
@@ -1095,7 +1100,7 @@ CalendarComponent = __decorate([
 ], CalendarComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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, EventManager, DaterangeService], template: "<ng-template\n  [ngrxLet]=\"{\n    activeDate: calendar.activeDate$,\n    calendarView: calendar.calendarView$,\n    selectedDate: calendar.selectedDate$,\n    selectedDateRange: daterange.dateRangeState$,\n    previewDate: calendar.previewDate$\n  }\"\n  let-vm\n>\n  <ng-container [ngSwitch]=\"vm.calendarView\">\n    <odx-calendar-year\n      [activeDate]=\"vm.activeDate\"\n      [selectedDate]=\"vm.selectedDate\"\n      [selectedDateRange]=\"vm.selectedDateRange\"\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      [selectedDateRange]=\"vm.selectedDateRange\"\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      [selectedDateRange]=\"vm.selectedDateRange\"\n      [previewDate]=\"vm.previewDate\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [filterFn]=\"filterFn\"\n      *ngSwitchDefault\n    ></odx-calendar-month>\n  </ng-container>\n</ng-template>\n" }]
+            args: [{ selector: 'odx-calendar', standalone: true, imports: [CoreModule, A11yModule, CalendarMonthComponent, CalendarYearComponent, CalendarYearsComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarService, EventManager, DaterangeService], template: "@if (vm$ | async; as vm) {\n  @switch (vm.calendarView) {\n    @case (CalendarView.Year) {\n      <odx-calendar-year\n        [activeDate]=\"vm.activeDate\"\n        [selectedDate]=\"vm.selectedDate\"\n        [selectedDateRange]=\"vm.selectedDateRange\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [filterFn]=\"filterFn\"\n      />\n    }\n    @case (CalendarView.Years) {\n      <odx-calendar-years\n        [activeDate]=\"vm.activeDate\"\n        [selectedDate]=\"vm.selectedDate\"\n        [selectedDateRange]=\"vm.selectedDateRange\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [filterFn]=\"filterFn\"\n      />\n    }\n    @default {\n      <odx-calendar-month\n        [activeDate]=\"vm.activeDate\"\n        [selectedDate]=\"vm.selectedDate\"\n        [selectedDateRange]=\"vm.selectedDateRange\"\n        [previewDate]=\"vm.previewDate\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [filterFn]=\"filterFn\"\n      />\n    }\n  }\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { selectedDate: [{
                 type: Input
             }], selectedDateRange: [{