@odx/angular 5.5.6 → 5.7.0

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

@@ -1,21 +1,48 @@
 import { __decorate, __metadata } from 'tslib';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, Pipe, inject, Directive } from '@angular/core';
+import { EventEmitter, Injectable, 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 { 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 { createConfigTokens, isString, isPresent, injectElement, hasChanged, EventManager, deferFn, untilDestroyed, trackByIndex, isFunction } from '@odx/angular/utils';
+import { enGB } from 'date-fns/locale';
+import { BehaviorSubject, shareReplay, map, filter, distinctUntilChanged, merge, defer, of, withLatestFrom } from 'rxjs';
+import { isSameDay, isSameMonth, isSameYear, endOfDay, endOfMonth, endOfYear, startOfDay, startOfMonth, startOfYear, isValid, toDate, isBefore, isEqual, addMonths, subMonths, format, isWithinInterval, startOfWeek, addDays, endOfWeek, eachMonthOfInterval, addYears, getYear, setYear, subDays, subWeeks, addWeeks, setMonth, getMonth } from 'date-fns';
 import { ActionGroupComponent } from '@odx/angular/components/action-group';
 import { ButtonComponent } from '@odx/angular/components/button';
 import { IconComponent } from '@odx/angular/components/icon';
-import { enGB } from 'date-fns/locale';
 import * as i1 from '@angular/common';
 import { DOCUMENT } from '@angular/common';
 import * as i3 from '@ngrx/component';
 
+var CalendarSelectionMode;
+(function (CalendarSelectionMode) {
+    CalendarSelectionMode[CalendarSelectionMode["Date"] = 0] = "Date";
+    CalendarSelectionMode[CalendarSelectionMode["DateRange"] = 1] = "DateRange";
+})(CalendarSelectionMode || (CalendarSelectionMode = {}));
+
+const { CalendarConfig, CalendarDefaultConfig, injectCalendarConfig, provideCalendarConfig } = createConfigTokens('Calendar', '@odx/angular/components/calendar', {
+    monthYearLabel: 'LLLL yyyy',
+    monthLabel: 'LLL',
+    weekLabel: 'EEEEE',
+    dayLabel: 'd',
+    yearLabel: 'yyyy',
+    dayA11yLabel: 'MMMM dd, yyyy',
+    monthA11yLabel: 'MMMM, yyyy',
+    yearA11yLabel: 'yyyy',
+    displayAdjacentDays: true,
+    locale: new BehaviorSubject(enGB),
+    selectionMode: CalendarSelectionMode.Date,
+    yearView: {
+        itemsPerRow: 3,
+    },
+    yearsView: {
+        itemsPerRow: 3,
+        padding: 100,
+    },
+});
+
 var CalendarView;
 (function (CalendarView) {
     CalendarView["Month"] = "month";
@@ -23,6 +50,18 @@ var CalendarView;
     CalendarView["Years"] = "years";
 })(CalendarView || (CalendarView = {}));
 
+var DateRangeSelectionState;
+(function (DateRangeSelectionState) {
+    DateRangeSelectionState["NothingSelected"] = "NothingSelected";
+    DateRangeSelectionState["StartSelected"] = "StartSelected";
+    DateRangeSelectionState["EndSelected"] = "EndSelected";
+})(DateRangeSelectionState || (DateRangeSelectionState = {}));
+
+const dateSelectOptionsDefaults = {
+    skipDaterangeUpdate: false,
+    emitOutside: false,
+};
+
 const dateValidators$4 = {
     [CalendarView.Month]: (currentDate, date) => isSameDay(currentDate, date),
     [CalendarView.Year]: (currentDate, date) => isSameMonth(currentDate, date),
@@ -79,6 +118,10 @@ function parseDate(value) {
     }
 }
 
+function validateDaterange(start, end) {
+    return isBefore(start, end) || isEqual(start, end);
+}
+
 const dateValidators$1 = {
     [CalendarView.Month]: (maxDate, date) => maxDate < startOfMonth(addMonths(date, 1)),
     [CalendarView.Year]: (maxDate, date) => maxDate < startOfYear(addMonths(date, 12)),
@@ -99,21 +142,36 @@ function validatePreviousDateSet(minDate, date, calendarView) {
 
 class CalendarService {
     constructor() {
+        this.activeDate$$ = new BehaviorSubject(null); // the date that is being focused by click or arrow keys
+        this.hoveredDate$$ = new BehaviorSubject(null); // the date that is being hovered by a pointing device
         this.calendarView$$ = new BehaviorSubject(CalendarView.Month);
-        this.activeDate$$ = new Subject();
-        this.selectedDate$$ = new BehaviorSubject(null);
+        this.dateSelectEvents$$ = new BehaviorSubject({
+            date: null,
+            options: dateSelectOptionsDefaults,
+        });
+        this.outputDate$ = new EventEmitter();
         this.calendarView$ = this.calendarView$$.pipe(shareReplay({ bufferSize: 1, refCount: true }));
-        this.selectedDate$ = this.selectedDate$$.pipe(shareReplay({ bufferSize: 1, refCount: true }));
-        this.activeDate$ = merge(this.activeDate$$, this.selectedDate$).pipe(filter(Boolean), distinctUntilChanged((prev, curr) => isEqual(prev, curr)), shareReplay({ bufferSize: 1, refCount: true }));
+        this.dateSelectEvents$ = this.dateSelectEvents$$.asObservable();
+        this.selectedDate$ = this.dateSelectEvents$$.pipe(map((x) => x.date), shareReplay({ bufferSize: 1, refCount: true }));
+        this.activeDate$ = this.activeDate$$.pipe(filter(Boolean), distinctUntilChanged((prev, curr) => isEqual(prev, curr)), shareReplay({ bufferSize: 1, refCount: true }));
+        this.previewDate$ = merge(this.activeDate$$, this.hoveredDate$$).pipe(filter(Boolean), distinctUntilChanged((prev, curr) => isEqual(prev, curr)), shareReplay({ bufferSize: 1, refCount: true }));
     }
     setActiveDate(value) {
         if (!isPresent(value))
             return;
         this.activeDate$$.next(parseDate(value));
     }
-    selectDate(value) {
+    setHoveredDate(value) {
+        if (!isPresent(value))
+            return;
+        this.hoveredDate$$.next(parseDate(value));
+    }
+    selectDate(value, options) {
         const date = isPresent(value) ? startOfDay(parseDate(value)) : null;
-        this.selectedDate$$.next(date);
+        this.dateSelectEvents$$.next({ date, options: { ...dateSelectOptionsDefaults, ...options } });
+        if (options?.emitOutside) {
+            this.outputDate$.next(date);
+        }
         this.setActiveDate(date);
     }
     changeView(view) {
@@ -178,26 +236,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 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();
@@ -219,9 +257,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+function checkCellInRange(date, dateRangeState, calendarView, targetSelectionState) {
+    const { start, end } = dateRangeState.dateRange;
+    if (calendarView !== CalendarView.Month || dateRangeState.selectionState !== targetSelectionState || (start && end && !validateDaterange(start, end))) {
+        return {
+            isRangeStart: false,
+            isRangeEnd: false,
+            isInRange: false,
+        };
+    }
+    const isRangeStart = start ? isSameDay(date, start) : false;
+    const isRangeEnd = end ? isSameDay(date, end) : false;
+    return {
+        isRangeStart,
+        isRangeEnd,
+        isInRange: isRangeEnd || isRangeStart || isWithinInclusiveRange(date, { start, end }),
+    };
+}
+function isWithinInclusiveRange(date, dateRange) {
+    const { start, end } = dateRange;
+    if (!start || !end) {
+        return false;
+    }
+    return isWithinInterval(date, { start, end });
+}
+
 let CalendarCellDirective = class CalendarCellDirective {
     constructor() {
         this.disabledController = DisabledController.inject();
+        this.eventManager = inject(EventManager);
+        this.calendarService = inject(CalendarService);
+        this.registeredEventId = '';
         this.config = injectCalendarConfig();
         this.dateLabelPipe = inject(DateLabelPipe);
         this.isActive = false;
@@ -230,9 +296,17 @@ let CalendarCellDirective = class CalendarCellDirective {
         this.ariaLabel = '';
         this.isCurrent = false;
         this.adjacent = false;
+        this.isInRange = false;
+        this.isRangeStart = false;
+        this.isRangeEnd = false;
+        this.isInPreviewRange = false;
+        this.isPreviewRangeStart = false;
+        this.isPreviewRangeEnd = false;
         this.element = injectElement();
         this.activeDate = null;
         this.selectedDate = null;
+        this.selectedDateRange = null;
+        this.previewDate = null;
     }
     get isDisabled() {
         return !!this.disabledController?.disabled;
@@ -252,12 +326,48 @@ let CalendarCellDirective = class CalendarCellDirective {
         if (this.selectedDate && hasChanged(changes, ['date', 'selectedDate'], false)) {
             this.isSelected = checkIdenticalDate(this.date, this.selectedDate, this.calendarView);
         }
+        if (this.config.selectionMode === CalendarSelectionMode.DateRange && this.selectedDateRange && hasChanged(changes, ['date', 'selectedDateRange'], false)) {
+            const start = this.selectedDateRange.dateRange.start;
+            this.isSelected = checkIdenticalDate(this.date, start || new Date(), this.calendarView);
+            const rangeValidation = checkCellInRange(this.date, this.selectedDateRange, this.calendarView, DateRangeSelectionState.EndSelected);
+            this.isRangeStart = rangeValidation.isRangeStart;
+            this.isRangeEnd = rangeValidation.isRangeEnd;
+            this.isInRange = rangeValidation.isInRange;
+        }
+        if (this.config.selectionMode === CalendarSelectionMode.DateRange &&
+            this.previewDate &&
+            this.selectedDateRange &&
+            hasChanged(changes, ['date', 'selectedDateRange', 'previewDate'])) {
+            const previewRange = {
+                selectionState: this.selectedDateRange.selectionState,
+                dateRange: { start: this.selectedDateRange.dateRange.start, end: this.previewDate },
+            };
+            const rangeValidation = checkCellInRange(this.date, previewRange, this.calendarView, DateRangeSelectionState.StartSelected);
+            this.isPreviewRangeStart = rangeValidation.isRangeStart;
+            this.isPreviewRangeEnd = rangeValidation.isRangeEnd;
+            this.isInPreviewRange = rangeValidation.isInRange;
+        }
         if (this.isActive) {
             deferFn(() => this.element.nativeElement.focus());
         }
     }
+    ngOnInit() {
+        if (this.config.selectionMode === CalendarSelectionMode.DateRange && this.calendarView === CalendarView.Month) {
+            this.registerEvents();
+        }
+    }
+    ngOnDestroy() {
+        this.eventManager.destroyListener(this.registeredEventId);
+    }
+    registerEvents() {
+        this.registeredEventId = this.eventManager.register(['mouseover'], (event) => {
+            event?.preventDefault();
+            event?.stopPropagation();
+            this.calendarService.setHoveredDate(this.date);
+        }, this.element.nativeElement)[0];
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CalendarCellDirective, isStandalone: true, selector: "[odxCalendarCell]", inputs: { date: ["odxCalendarCell", "date"], calendarView: ["odxCalendarCellCalendarView", "calendarView"], activeDate: ["odxCalendarCellActiveDate", "activeDate"], selectedDate: ["odxCalendarCellSelectedDate", "selectedDate"], selectedDateRange: ["odxCalendarCellSelectedDateRange", "selectedDateRange"], previewDate: ["odxCalendarCellPreviewDate", "previewDate"] }, host: { properties: { "class.is-disabled": "isDisabled", "class.is-selected": "isSelected", "class.is-in-any-range": "isInRange || isInPreviewRange", "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 }); }
 };
 __decorate([
     CSSModifier(),
@@ -267,6 +377,30 @@ __decorate([
     CSSModifier(),
     __metadata("design:type", Object)
 ], CalendarCellDirective.prototype, "adjacent", void 0);
+__decorate([
+    CSSModifier(),
+    __metadata("design:type", Object)
+], CalendarCellDirective.prototype, "isInRange", void 0);
+__decorate([
+    CSSModifier(),
+    __metadata("design:type", Object)
+], CalendarCellDirective.prototype, "isRangeStart", void 0);
+__decorate([
+    CSSModifier(),
+    __metadata("design:type", Object)
+], CalendarCellDirective.prototype, "isRangeEnd", void 0);
+__decorate([
+    CSSModifier(),
+    __metadata("design:type", Object)
+], CalendarCellDirective.prototype, "isInPreviewRange", void 0);
+__decorate([
+    CSSModifier(),
+    __metadata("design:type", Object)
+], CalendarCellDirective.prototype, "isPreviewRangeStart", void 0);
+__decorate([
+    CSSModifier(),
+    __metadata("design:type", Object)
+], CalendarCellDirective.prototype, "isPreviewRangeEnd", void 0);
 CalendarCellDirective = __decorate([
     CSSComponent('calendar-cell')
 ], CalendarCellDirective);
@@ -279,6 +413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     host: {
                         '[class.is-disabled]': 'isDisabled',
                         '[class.is-selected]': 'isSelected',
+                        '[class.is-in-any-range]': 'isInRange || isInPreviewRange',
                         '[attr.hidden]': 'isHidden || null',
                         '[tabindex]': 'isActive ? 0 : -1',
                         '[attr.aria-label]': 'ariaLabel',
@@ -286,7 +421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         '[attr.type]': '"button"',
                     },
                 }]
-        }], propDecorators: { isCurrent: [], adjacent: [], date: [{
+        }], propDecorators: { isCurrent: [], adjacent: [], isInRange: [], isRangeStart: [], isRangeEnd: [], isInPreviewRange: [], isPreviewRangeStart: [], isPreviewRangeEnd: [], date: [{
                 type: Input,
                 args: ['odxCalendarCell']
             }], calendarView: [{
@@ -298,6 +433,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], selectedDate: [{
                 type: Input,
                 args: ['odxCalendarCellSelectedDate']
+            }], selectedDateRange: [{
+                type: Input,
+                args: ['odxCalendarCellSelectedDateRange']
+            }], previewDate: [{
+                type: Input,
+                args: ['odxCalendarCellPreviewDate']
             }] } });
 
 class CalendarViewDirective {
@@ -308,6 +449,8 @@ class CalendarViewDirective {
         this.trackByIndex = trackByIndex;
         this.element = injectElement();
         this.selectedDate = null;
+        this.selectedDateRange = null;
+        this.previewDate = null;
         this.minDate = null;
         this.maxDate = null;
         this.filterFn = null;
@@ -324,7 +467,7 @@ class CalendarViewDirective {
         this.calendar.setActiveDate(date);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarViewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CalendarViewDirective, isStandalone: true, inputs: { activeDate: "activeDate", selectedDate: "selectedDate", minDate: "minDate", maxDate: "maxDate", filterFn: "filterFn" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CalendarViewDirective, isStandalone: true, inputs: { activeDate: "activeDate", selectedDate: "selectedDate", selectedDateRange: "selectedDateRange", previewDate: "previewDate", minDate: "minDate", maxDate: "maxDate", filterFn: "filterFn" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarViewDirective, decorators: [{
             type: Directive,
@@ -335,6 +478,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], selectedDate: [{
                 type: Input
+            }], selectedDateRange: [{
+                type: Input
+            }], previewDate: [{
+                type: Input
             }], minDate: [{
                 type: Input
             }], maxDate: [{
@@ -440,7 +587,6 @@ let CalendarMonthComponent = class CalendarMonthComponent extends CalendarViewDi
         this.calendarMonth = inject(CalendarMonthService);
         this.nextView = CalendarView.Years;
         this.currentView = CalendarView.Month;
-        this.selectedChange = new EventEmitter();
     }
     previousDay(event) {
         this.updateActiveDate(event, subDays(this.activeDate, 1));
@@ -463,21 +609,18 @@ let CalendarMonthComponent = class CalendarMonthComponent extends CalendarViewDi
     selectDate(value) {
         if (this.isDateDisabled(value))
             return;
-        this.calendar.selectDate(value);
-        this.selectedChange.emit(value);
+        this.calendar.selectDate(value, { emitOutside: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarMonthComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CalendarMonthComponent, isStandalone: true, selector: "odx-calendar-month", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CalendarMonthComponent, isStandalone: true, selector: "odx-calendar-month", providers: [CalendarMonthService], usesInheritance: true, ngImport: i0, template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"7\">\n        <odx-calendar-header\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (previous)=\"previousMonth($event)\"\n          (next)=\"nextMonth($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: config.monthYearLabel }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n\n    <tr class=\"odx-calendar__weekdays\">\n      <td *ngFor=\"let day of calendarMonth.weekDays$ | async\">\n        {{ day | odxDateLabel: config.weekLabel }}\n      </td>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousDay($event)\"\n    (keydown.ArrowRight)=\"nextDay($event)\"\n    (keydown.ArrowUp)=\"previousWeek($event)\"\n    (keydown.ArrowDown)=\"nextWeek($event)\"\n    (keydown.PageUp)=\"previousMonth($event)\"\n    (keydown.PageDown)=\"nextMonth($event)\"\n  >\n    <tr *ngFor=\"let week of calendarMonth.weeks$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let day of week; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(day)\"\n          [odxCalendarCell]=\"day\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          [odxCalendarCellPreviewDate]=\"previewDate\"\n          (click)=\"selectDate(day)\"\n        >\n          {{ day | odxDateLabel: config.dayLabel }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: i2.DisabledController, selector: "[disabled]", inputs: ["disabled"] }, { kind: "directive", type: CalendarCellDirective, selector: "[odxCalendarCell]", inputs: ["odxCalendarCell", "odxCalendarCellCalendarView", "odxCalendarCellActiveDate", "odxCalendarCellSelectedDate", "odxCalendarCellSelectedDateRange", "odxCalendarCellPreviewDate"] }, { kind: "component", type: CalendarHeaderComponent, selector: "odx-calendar-header", inputs: ["activeDate", "calendarView", "minDate", "maxDate"], outputs: ["previous", "next", "changeView"] }, { kind: "pipe", type: DateLabelPipe, name: "odxDateLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 };
 CalendarMonthComponent = __decorate([
     CSSComponent('calendar-month')
 ], CalendarMonthComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarMonthComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'odx-calendar-month', standalone: true, imports: [CoreModule, CalendarCellDirective, CalendarHeaderComponent, DateLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarMonthService], template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"7\">\n        <odx-calendar-header\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (previous)=\"previousMonth($event)\"\n          (next)=\"nextMonth($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: config.monthYearLabel }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n\n    <tr class=\"odx-calendar__weekdays\">\n      <td *ngFor=\"let day of calendarMonth.weekDays$ | async\">\n        {{ day | odxDateLabel: config.weekLabel }}\n      </td>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousDay($event)\"\n    (keydown.ArrowRight)=\"nextDay($event)\"\n    (keydown.ArrowUp)=\"previousWeek($event)\"\n    (keydown.ArrowDown)=\"nextWeek($event)\"\n    (keydown.PageUp)=\"previousMonth($event)\"\n    (keydown.PageDown)=\"nextMonth($event)\"\n  >\n    <tr *ngFor=\"let week of calendarMonth.weeks$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let day of week; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(day)\"\n          [odxCalendarCell]=\"day\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          (click)=\"selectDate(day)\"\n        >\n          {{ day | odxDateLabel: config.dayLabel }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n" }]
-        }], propDecorators: { selectedChange: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'odx-calendar-month', standalone: true, imports: [CoreModule, CalendarCellDirective, CalendarHeaderComponent, DateLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarMonthService], template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"7\">\n        <odx-calendar-header\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (previous)=\"previousMonth($event)\"\n          (next)=\"nextMonth($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: config.monthYearLabel }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n\n    <tr class=\"odx-calendar__weekdays\">\n      <td *ngFor=\"let day of calendarMonth.weekDays$ | async\">\n        {{ day | odxDateLabel: config.weekLabel }}\n      </td>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousDay($event)\"\n    (keydown.ArrowRight)=\"nextDay($event)\"\n    (keydown.ArrowUp)=\"previousWeek($event)\"\n    (keydown.ArrowDown)=\"nextWeek($event)\"\n    (keydown.PageUp)=\"previousMonth($event)\"\n    (keydown.PageDown)=\"nextMonth($event)\"\n  >\n    <tr *ngFor=\"let week of calendarMonth.weeks$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let day of week; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(day)\"\n          [odxCalendarCell]=\"day\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          [odxCalendarCellPreviewDate]=\"previewDate\"\n          (click)=\"selectDate(day)\"\n        >\n          {{ day | odxDateLabel: config.dayLabel }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n" }]
+        }] });
 
 let CalendarYearComponent = class CalendarYearComponent extends CalendarViewDirective {
     constructor() {
@@ -508,18 +651,18 @@ let CalendarYearComponent = class CalendarYearComponent extends CalendarViewDire
         if (this.isDateDisabled(value))
             return;
         const date = setMonth(this.activeDate, getMonth(value));
-        this.calendar.selectDate(date);
+        this.calendar.selectDate(date, { skipDaterangeUpdate: true });
         this.changeView();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarYearComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CalendarYearComponent, isStandalone: true, selector: "odx-calendar-year", providers: [CalendarYearService], usesInheritance: true, ngImport: i0, template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"3\">\n        <odx-calendar-header\n          (previous)=\"previousYear($event)\"\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (next)=\"nextYear($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: config.yearLabel }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousMonth($event)\"\n    (keydown.ArrowRight)=\"nextMonth($event)\"\n    (keydown.ArrowUp)=\"previousSeason($event)\"\n    (keydown.ArrowDown)=\"nextSeason($event)\"\n    (keydown.PageDown)=\"nextYear($event)\"\n    (keydown.PageUp)=\"previousYear($event)\"\n  >\n    <tr class=\"odx-calendar__season\" *ngFor=\"let season of calendarYear.seasons$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let month of season; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(month)\"\n          [odxCalendarCell]=\"month\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          (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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CalendarYearComponent, isStandalone: true, selector: "odx-calendar-year", providers: [CalendarYearService], usesInheritance: true, ngImport: i0, template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"3\">\n        <odx-calendar-header\n          (previous)=\"previousYear($event)\"\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (next)=\"nextYear($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: config.yearLabel }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousMonth($event)\"\n    (keydown.ArrowRight)=\"nextMonth($event)\"\n    (keydown.ArrowUp)=\"previousSeason($event)\"\n    (keydown.ArrowDown)=\"nextSeason($event)\"\n    (keydown.PageDown)=\"nextYear($event)\"\n    (keydown.PageUp)=\"previousYear($event)\"\n  >\n    <tr class=\"odx-calendar__season\" *ngFor=\"let season of calendarYear.seasons$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let month of season; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(month)\"\n          [odxCalendarCell]=\"month\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          (click)=\"selectDate(month)\"\n        >\n          {{ month | odxDateLabel: config.monthLabel }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: i2.DisabledController, selector: "[disabled]", inputs: ["disabled"] }, { kind: "directive", type: CalendarCellDirective, selector: "[odxCalendarCell]", inputs: ["odxCalendarCell", "odxCalendarCellCalendarView", "odxCalendarCellActiveDate", "odxCalendarCellSelectedDate", "odxCalendarCellSelectedDateRange", "odxCalendarCellPreviewDate"] }, { kind: "component", type: CalendarHeaderComponent, selector: "odx-calendar-header", inputs: ["activeDate", "calendarView", "minDate", "maxDate"], outputs: ["previous", "next", "changeView"] }, { kind: "pipe", type: DateLabelPipe, name: "odxDateLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 };
 CalendarYearComponent = __decorate([
     CSSComponent('calendar-year')
 ], CalendarYearComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarYearComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'odx-calendar-year', standalone: true, imports: [CoreModule, CalendarCellDirective, CalendarHeaderComponent, DateLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarYearService], template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\">\n  <thead>\n    <tr>\n      <th colspan=\"3\">\n        <odx-calendar-header\n          (previous)=\"previousYear($event)\"\n          [calendarView]=\"currentView\"\n          [activeDate]=\"activeDate\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (next)=\"nextYear($event)\"\n          (changeView)=\"changeView()\"\n        >\n          {{ activeDate | odxDateLabel: config.yearLabel }}\n        </odx-calendar-header>\n      </th>\n    </tr>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousMonth($event)\"\n    (keydown.ArrowRight)=\"nextMonth($event)\"\n    (keydown.ArrowUp)=\"previousSeason($event)\"\n    (keydown.ArrowDown)=\"nextSeason($event)\"\n    (keydown.PageDown)=\"nextYear($event)\"\n    (keydown.PageUp)=\"previousYear($event)\"\n  >\n    <tr class=\"odx-calendar__season\" *ngFor=\"let season of calendarYear.seasons$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let month of season; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(month)\"\n          [odxCalendarCell]=\"month\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          (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          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\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 {
@@ -549,7 +692,7 @@ let CalendarYearsComponent = class CalendarYearsComponent extends CalendarViewDi
         if (this.isDateDisabled(value))
             return;
         const date = setYear(this.activeDate, getYear(value));
-        this.calendar.selectDate(date);
+        this.calendar.selectDate(date, { skipDaterangeUpdate: true });
         this.changeView();
     }
     scrollCurrentYearIntoView() {
@@ -561,42 +704,102 @@ let CalendarYearsComponent = class CalendarYearsComponent extends CalendarViewDi
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarYearsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CalendarYearsComponent, isStandalone: true, selector: "odx-calendar-years", providers: [CalendarYearsService], usesInheritance: true, ngImport: i0, template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\" *ngrxLet=\"calendar.activeDate$ as activeDate\">\n  <thead aria-hidden=\"true\">\n    <th></th>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousYear($event)\"\n    (keydown.ArrowRight)=\"nextYear($event)\"\n    (keydown.ArrowUp)=\"previousRow($event)\"\n    (keydown.ArrowDown)=\"nextRow($event)\"\n  >\n    <tr class=\"odx-calendar__year-row\" *ngFor=\"let yearRow of calendarYears.years$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let year of yearRow; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(year)\"\n          [odxCalendarCell]=\"year\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"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.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"] }, { kind: "pipe", type: DateLabelPipe, name: "odxDateLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CalendarYearsComponent, isStandalone: true, selector: "odx-calendar-years", providers: [CalendarYearsService], usesInheritance: true, ngImport: i0, template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\" *ngrxLet=\"calendar.activeDate$ as activeDate\">\n  <thead aria-hidden=\"true\">\n    <th></th>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousYear($event)\"\n    (keydown.ArrowRight)=\"nextYear($event)\"\n    (keydown.ArrowUp)=\"previousRow($event)\"\n    (keydown.ArrowDown)=\"nextRow($event)\"\n  >\n    <tr class=\"odx-calendar__year-row\" *ngFor=\"let yearRow of calendarYears.years$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let year of yearRow; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(year)\"\n          [odxCalendarCell]=\"year\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          (click)=\"selectDate(year)\"\n        >\n          {{ year | odxDateLabel: config.yearLabel }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: i2.DisabledController, selector: "[disabled]", inputs: ["disabled"] }, { kind: "directive", type: i3.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: CalendarCellDirective, selector: "[odxCalendarCell]", inputs: ["odxCalendarCell", "odxCalendarCellCalendarView", "odxCalendarCellActiveDate", "odxCalendarCellSelectedDate", "odxCalendarCellSelectedDateRange", "odxCalendarCellPreviewDate"] }, { kind: "pipe", type: DateLabelPipe, name: "odxDateLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 };
 CalendarYearsComponent = __decorate([
     CSSComponent('calendar-years')
 ], CalendarYearsComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarYearsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'odx-calendar-years', standalone: true, imports: [CoreModule, CalendarCellDirective, CalendarHeaderComponent, DateLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarYearsService], template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\" *ngrxLet=\"calendar.activeDate$ as activeDate\">\n  <thead aria-hidden=\"true\">\n    <th></th>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousYear($event)\"\n    (keydown.ArrowRight)=\"nextYear($event)\"\n    (keydown.ArrowUp)=\"previousRow($event)\"\n    (keydown.ArrowDown)=\"nextRow($event)\"\n  >\n    <tr class=\"odx-calendar__year-row\" *ngFor=\"let yearRow of calendarYears.years$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let year of yearRow; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(year)\"\n          [odxCalendarCell]=\"year\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"calendar.selectedDate$ | async\"\n          (click)=\"selectDate(year)\"\n        >\n          {{ year | odxDateLabel: config.yearLabel }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n" }]
+            args: [{ selector: 'odx-calendar-years', standalone: true, imports: [CoreModule, CalendarCellDirective, CalendarHeaderComponent, DateLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CalendarYearsService], template: "<table class=\"odx-calendar__table\" role=\"grid\" aria-describedby=\"odx-calendar\" *ngrxLet=\"calendar.activeDate$ as activeDate\">\n  <thead aria-hidden=\"true\">\n    <th></th>\n  </thead>\n\n  <tbody\n    class=\"odx-calendar__body\"\n    (keydown.ArrowLeft)=\"previousYear($event)\"\n    (keydown.ArrowRight)=\"nextYear($event)\"\n    (keydown.ArrowUp)=\"previousRow($event)\"\n    (keydown.ArrowDown)=\"nextRow($event)\"\n  >\n    <tr class=\"odx-calendar__year-row\" *ngFor=\"let yearRow of calendarYears.years$ | async; trackBy: trackByIndex\">\n      <td role=\"gridcell\" *ngFor=\"let year of yearRow; trackBy: trackByIndex\">\n        <button\n          [disabled]=\"isDateDisabled(year)\"\n          [odxCalendarCell]=\"year\"\n          [odxCalendarCellActiveDate]=\"activeDate\"\n          [odxCalendarCellCalendarView]=\"currentView\"\n          [odxCalendarCellSelectedDate]=\"selectedDate\"\n          [odxCalendarCellSelectedDateRange]=\"selectedDateRange\"\n          (click)=\"selectDate(year)\"\n        >\n          {{ year | odxDateLabel: config.yearLabel }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n" }]
+        }] });
+
+class DaterangeService {
+    constructor() {
+        this.calendar = inject(CalendarService);
+        this.dateRangeState$$ = new BehaviorSubject({
+            selectionState: DateRangeSelectionState.NothingSelected,
+            dateRange: { start: null, end: null },
+        });
+        this.outputDateRange$ = new EventEmitter();
+        this.dateRangeState$ = this.calendar.dateSelectEvents$.pipe(filter((newSelectedDate) => Boolean(newSelectedDate.date)), withLatestFrom(this.dateRangeState$$), map(([newSelectedDate, currentDateRangeState]) => {
+            const newDate = newSelectedDate.date;
+            const currentStart = currentDateRangeState.dateRange.start;
+            const newDateRangeState = {
+                selectionState: DateRangeSelectionState.NothingSelected,
+                dateRange: { start: null, end: null },
+            };
+            if (newSelectedDate.options.skipDaterangeUpdate) {
+                return currentDateRangeState;
+            }
+            if (currentStart &&
+                newDate &&
+                currentDateRangeState.selectionState === DateRangeSelectionState.StartSelected &&
+                validateDaterange(currentStart, newDate)) {
+                newDateRangeState.dateRange = { start: currentStart, end: newDate };
+                newDateRangeState.selectionState = DateRangeSelectionState.EndSelected;
+            }
+            else {
+                newDateRangeState.dateRange = { start: newDate, end: null };
+                newDateRangeState.selectionState = DateRangeSelectionState.StartSelected;
+            }
+            this.dateRangeState$$.next(newDateRangeState);
+            if (newSelectedDate.options?.emitOutside) {
+                this.outputDateRange$.next(newDateRangeState.dateRange);
+            }
+            return newDateRangeState;
+        }), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)), shareReplay({ refCount: true }));
+    }
+    setDateRange(value) {
+        deferFn(() => {
+            this.calendar.selectDate(value.start);
+            this.calendar.selectDate(value.end);
+            this.calendar.setActiveDate(value.start);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DaterangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DaterangeService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DaterangeService, decorators: [{
+            type: Injectable
         }] });
 
 let CalendarComponent = class CalendarComponent {
     constructor() {
-        this.CalendarView = CalendarView;
+        this.config = injectCalendarConfig();
         this.calendar = inject(CalendarService);
+        this.daterange = inject(DaterangeService);
+        this.CalendarView = CalendarView;
         this.element = injectElement();
         this.selectedDate = null;
+        this.selectedDateRange = null;
         this.minDate = null;
         this.maxDate = null;
         this.filterFn = null;
-        this.selectedDateChange = new EventEmitter();
+        this.selectedDateChange = this.calendar.outputDate$;
+        this.selectedDateRangeChange = this.daterange.outputDateRange$;
     }
     ngOnChanges(changes) {
         if (hasChanged(changes, 'selectedDate', false)) {
-            this.calendar.selectDate(this.selectedDate);
+            this.calendar.selectDate(this.selectedDate, { skipDaterangeUpdate: true });
+        }
+        if (this.selectedDateRange && hasChanged(changes, 'selectedDateRange', false) && this.config.selectionMode === CalendarSelectionMode.DateRange) {
+            this.daterange.setDateRange(this.selectedDateRange);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: i3.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.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 }); }
 };
 CalendarComponent = __decorate([
-    CSSComponent('calendar')
+    CSSComponent('calendar'),
+    __metadata("design:paramtypes", [])
 ], CalendarComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.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], 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: [{
+            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" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { selectedDate: [{
+                type: Input
+            }], selectedDateRange: [{
                 type: Input
             }], minDate: [{
                 type: Input
@@ -606,11 +809,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], selectedDateChange: [{
                 type: Output
+            }], selectedDateRangeChange: [{
+                type: Output
             }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { CalendarCellDirective, CalendarComponent, CalendarConfig, CalendarDefaultConfig, CalendarHeaderComponent, CalendarMonthComponent, CalendarMonthService, CalendarSelectionMode, CalendarService, CalendarView, CalendarViewDirective, CalendarYearComponent, CalendarYearService, CalendarYearsComponent, CalendarYearsService, DateLabelPipe, DateRangeSelectionState, checkIdenticalDate, dateSelectOptionsDefaults, getA11yLabel, injectCalendarConfig, isDateDisabled, parseDate, provideCalendarConfig, validateDaterange, validateMaxDate, validateMinDate, validateNextDateSet, validatePreviousDateSet };
 //# sourceMappingURL=odx-angular-components-calendar.mjs.map