@dereekb/dbx-form 10.2.0 → 11.0.0

package/fesm2022/dereekb-dbx-form-calendar.mjs

@@ -1,9 +1,9 @@
-import * as i4$1 from '@dereekb/dbx-form';
+import * as i2$1 from '@dereekb/dbx-form';
 import { formlyField, propsAndConfigForFieldConfig, flexLayoutWrapper, toggleField, AbstractSyncFormlyFormDirective, provideFormlyContext, DbxFormModule, DbxFormlyModule } from '@dereekb/dbx-form';
 import * as i1$1 from '@dereekb/dbx-web';
-import { AbstractPopoverDirective, AbstractDialogDirective, sanitizeDbxDialogContentConfig, DbxContentLayoutModule, DbxTextModule, DbxActionModule, DbxButtonModule, DbxDialogInteractionModule, DbxPopoverInteractionModule } from '@dereekb/dbx-web';
+import { AbstractPopoverDirective, DbxPopoverService, AbstractDialogDirective, sanitizeDbxDialogContentConfig, CompactContextStore, DbxContentLayoutModule, DbxTextModule, DbxActionModule, DbxButtonModule, DbxDialogInteractionModule, DbxPopoverInteractionModule } from '@dereekb/dbx-web';
 import * as i0 from '@angular/core';
-import { Injectable, SkipSelf, Directive, Injector, Optional, Component, Inject, Input, ViewChild, ElementRef, ChangeDetectionStrategy, EventEmitter, Output, InjectionToken, NgModule } from '@angular/core';
+import { Injectable, inject, Directive, Injector, Optional, SkipSelf, Component, Input, ViewChild, ElementRef, ChangeDetectionStrategy, EventEmitter, Output, InjectionToken, NgZone, NgModule } from '@angular/core';
 import { FieldType } from '@ngx-formly/material';
 import { switchMap, first, tap, map, distinctUntilChanged, shareReplay, of, combineLatestWith, BehaviorSubject, filter, combineLatest, EMPTY, startWith, throttleTime } from 'rxjs';
 import { filterMaybe, distinctUntilHasDifferentValues, SubscriptionObject, asObservableFromGetter, asObservable } from '@dereekb/rxjs';
@@ -11,23 +11,23 @@ import { DateCellScheduleDayCode, expandDateCellScheduleDayCodesToDayOfWeekSet,
 import { isInAllowedDaysOfWeekSet, mapValuesToSet, unique, mergeArrays, iterableToArray, isIterable, firstValueFromIterable, minAndMaxNumber, range, toggleInSet, removeFromSet, addToSet, isIndexNumberInIndexRangeFunction, getDaysOfWeekNames, reduceBooleansWithAnd, mergeObjects, KeyValueTypleValueFilter } from '@dereekb/util';
 import { ComponentStore } from '@ngrx/component-store';
 import { startOfDay, endOfDay, isBefore, endOfWeek } from 'date-fns';
-import * as i3$1 from '@dereekb/dbx-core';
+import * as i1$2 from '@dereekb/dbx-core';
 import { switchMapDbxInjectionComponentConfig, DbxInjectionComponentModule, DbxDatePipeModule } from '@dereekb/dbx-core';
-import * as i1 from '@dereekb/dbx-web/calendar';
-import { prepareAndSortCalendarEvents, DbxCalendarStore, DbxCalendarModule } from '@dereekb/dbx-web/calendar';
-import * as i3 from '@angular/forms';
+import * as i2$3 from '@dereekb/dbx-web/calendar';
+import { DbxCalendarStore, prepareAndSortCalendarEvents, DbxCalendarModule } from '@dereekb/dbx-web/calendar';
+import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i5 from '@angular/material/form-field';
+import * as i3 from '@angular/material/form-field';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule } from '@angular/material/form-field';
-import * as i7 from '@angular/material/datepicker';
+import * as i5 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i4 from '@angular/common';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1$2 from '@angular/material/dialog';
-import * as i6 from 'angular-calendar';
+import { MatDialog } from '@angular/material/dialog';
+import * as i5$1 from 'angular-calendar';
 import { CalendarModule, CalendarDayModule, CalendarWeekModule } from 'angular-calendar';
-import * as i7$1 from '@ngbracket/ngx-layout/extended';
-import * as i3$2 from '@angular/material/icon';
+import * as i6 from '@ngbracket/ngx-layout/extended';
+import * as i2$2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i1$3 from '@ngx-formly/core';
 import { FormlyModule } from '@ngx-formly/core';
@@ -157,129 +157,129 @@ function calendarScheduleStartBeingUsedFromFilter(x) {
 class DbxCalendarScheduleSelectionStore extends ComponentStore {
     constructor() {
         super(initialCalendarScheduleSelectionState());
-        // MARK:
-        this.toggleSelection = this.effect((input) => {
-            return input.pipe(switchMap(() => this.nextToggleSelection$.pipe(first(), filterMaybe(), tap((x) => {
-                this.selectAllDates(x);
-            }))));
-        });
-        // MARK: Accessors
-        this.selectionMode$ = this.state$.pipe(map((x) => x.selectionMode), distinctUntilChanged(), shareReplay(1));
-        this.filter$ = this.state$.pipe(map((x) => x.filter), distinctUntilChanged(), shareReplay(1));
-        this.minMaxDateRange$ = this.state$.pipe(map(calendarScheduleMinAndMaxDateRange), distinctUntilChanged(isSameDateRange), shareReplay(1));
-        this.minDate$ = this.minMaxDateRange$.pipe(map((x) => x?.start), distinctUntilChanged(isSameDateDay), shareReplay(1));
-        this.maxDate$ = this.minMaxDateRange$.pipe(map((x) => x?.end), distinctUntilChanged(isSameDateDay), shareReplay(1));
-        this.hasConfiguredMinMaxRange$ = this.minMaxDateRange$.pipe(map((x) => x != null && x.start != null && x.end != null), distinctUntilChanged(), shareReplay(1));
-        this.inputStart$ = this.state$.pipe(map((x) => x.inputStart), distinctUntilChanged(isSameDate), shareReplay(1));
-        this.inputEnd$ = this.state$.pipe(map((x) => x.inputEnd), distinctUntilChanged(isSameDate), shareReplay(1));
-        this.currentInputRange$ = this.state$.pipe(map(({ inputStart, inputEnd }) => ({ start: inputStart, end: inputEnd })), distinctUntilChanged((a, b) => isSameDateRange(a, b)), map((x) => ({ inputStart: x.start, inputEnd: x.end })), map((x) => {
-            if (x.inputStart && x.inputEnd) {
-                return x;
-            }
-            else {
-                return undefined;
-            }
-        }), shareReplay(1));
-        this.inputRange$ = this.currentInputRange$.pipe(filterMaybe(), shareReplay(1));
-        this.isEnabledFilterDayFunction$ = this.state$.pipe(map((x) => x.isEnabledFilterDay), distinctUntilChanged(), shareReplay(1));
-        this.isEnabledDayFunction$ = this.state$.pipe(map((x) => x.isEnabledDay), distinctUntilChanged(), shareReplay(1));
-        this.currentDateRange$ = this.state$.pipe(map(computeCalendarScheduleSelectionRange), distinctUntilChanged((a, b) => isSameDateRange(a, b)), shareReplay(1));
-        this.computeSelectionResultRelativeToFilter$ = this.state$.pipe(map((x) => x.computeSelectionResultRelativeToFilter), shareReplay(1));
-        this.startBeingUsedFromFilter$ = this.state$.pipe(
-        //
-        map(calendarScheduleStartBeingUsedFromFilter), distinctUntilChanged(), shareReplay(1));
-        this.dateRange$ = this.currentDateRange$.pipe(filterMaybe(), shareReplay(1));
-        this.allowedDaysOfWeek$ = this.state$.pipe(map((x) => x.allowedDaysOfWeek), distinctUntilHasDifferentValues(), shareReplay(1));
-        this.isInAllowedDaysOfWeekFunction$ = this.allowedDaysOfWeek$.pipe(map((x) => isInAllowedDaysOfWeekSet(x)), shareReplay(1));
-        this.scheduleDays$ = this.state$.pipe(map((x) => x.effectiveScheduleDays), distinctUntilHasDifferentValues(), shareReplay(1));
-        this.outputTimezone$ = this.state$.pipe(map((x) => x.outputTimezone), distinctUntilChanged(), shareReplay(1));
-        /**
-         * The timezone of the output values.
-         *
-         * If an outputTimezone is not specified, this defaults to the system timezone.
-         */
-        this.effectiveOutputTimezone$ = this.state$.pipe(map((x) => x.outputTimezone || x.systemTimezone), distinctUntilChanged(), shareReplay(1));
-        /**
-         * An outputTimezoneNormal to use.
-         *
-         * If an outputTimezone is not specified, this is undefined.
-         */
-        this.effectiveOutputTimezoneNormal$ = this.state$.pipe(map((x) => (x.outputTimezoneNormal ? x.outputTimezoneNormal : undefined)), distinctUntilChanged(), shareReplay(1));
-        this.currentSelectionValue$ = this.state$.pipe(map((x) => x.currentSelectionValue), distinctUntilChanged(), shareReplay(1));
-        this.currentSelectionValueStart$ = this.currentSelectionValue$.pipe(map((x) => x?.dateScheduleRange.start), distinctUntilChanged(isSameDate), shareReplay(1));
-        this.currentSelectionValueDateCellTimingDateFactory$ = this.currentSelectionValue$.pipe(map((x) => (x ? dateCellTimingDateFactory({ startsAt: x.dateScheduleRange.start, timezone: x.dateScheduleRange.timezone }) : undefined)), shareReplay(1));
-        this.currentSelectionValueDateCellDurationSpanExpansion$ = this.currentSelectionValue$.pipe(map((x) => (x ? expandDateCellScheduleRange({ dateCellScheduleRange: x.dateScheduleRange }) : [])), shareReplay(1));
-        this.selectionValueSelectedIndexes$ = this.currentSelectionValueDateCellDurationSpanExpansion$.pipe(map((x) => new Set(x.map((y) => y.i))), distinctUntilHasDifferentValues(), shareReplay(1));
-        this.selectionValueSelectedDates$ = this.currentSelectionValueDateCellTimingDateFactory$.pipe(switchMap((dateFactory) => {
-            return dateFactory ? this.selectionValueSelectedIndexes$.pipe(map((x) => mapValuesToSet(x, (y) => formatToISO8601DayStringForSystem(dateFactory(y))))) : of(new Set());
-        }), shareReplay(1));
-        this.selectionValue$ = this.currentSelectionValue$.pipe(filterMaybe(), shareReplay(1));
-        this.currentSelectionValueWithTimezone$ = this.currentSelectionValue$.pipe(combineLatestWith(this.effectiveOutputTimezoneNormal$), map(([x, timezoneNormal]) => {
-            let currentValueWithTimezone = x;
-            if (x && timezoneNormal) {
-                currentValueWithTimezone = {
-                    dateScheduleRange: changeDateCellScheduleDateRangeToTimezone(x.dateScheduleRange, timezoneNormal),
-                    minMaxRange: x.minMaxRange
-                };
-            }
-            return currentValueWithTimezone;
-        }), distinctUntilChanged(), shareReplay(1));
-        this.selectionValueWithTimezone$ = this.currentSelectionValueWithTimezone$.pipe(filterMaybe(), shareReplay(1));
-        this.selectionValueWithTimezoneDateCellDurationSpanExpansion$ = this.selectionValueWithTimezone$.pipe(map((x) => expandDateCellScheduleRange({ dateCellScheduleRange: x.dateScheduleRange })), shareReplay(1));
-        this.nextToggleSelection$ = this.hasConfiguredMinMaxRange$.pipe(switchMap((hasConfiguredMinMaxRange) => {
-            let obs;
-            if (hasConfiguredMinMaxRange) {
-                obs = this.currentSelectionValue$.pipe(map((x) => (x ? 'none' : 'all')));
-            }
-            else {
-                obs = this.currentSelectionValue$.pipe(map((x) => (x ? 'none' : undefined)));
-            }
-            return obs;
-        }), shareReplay(1));
-        this.currentDateCellScheduleRangeValue$ = this.currentSelectionValueWithTimezone$.pipe(map((x) => x?.dateScheduleRange), distinctUntilChanged(isSameDateCellScheduleDateRange), shareReplay(1));
-        this.dateCellScheduleRangeValue$ = this.currentDateCellScheduleRangeValue$.pipe(filterMaybe(), shareReplay(1));
-        this.cellContentFactory$ = this.state$.pipe(map((x) => x.cellContentFactory), distinctUntilChanged(), shareReplay(1));
-        this.isCustomized$ = this.state$.pipe(map((x) => x.toggledIndexes.size > 0), distinctUntilChanged(), shareReplay(1));
-        this.isViewReadonly$ = this.state$.pipe(map((x) => x.isViewReadonly), distinctUntilChanged(), shareReplay(1));
-        // MARK: State Changes
-        this.setMinMaxDateRange = this.updater(updateStateWithMinMaxDateRange);
-        this.setDefaultWeek = this.updater(updateStateWithMinMaxDateRange);
-        this.setFilter = this.updater(updateStateWithFilter);
-        this.setExclusions = this.updater(updateStateWithExclusions);
-        this.setComputeSelectionResultRelativeToFilter = this.updater(updateStateWithComputeSelectionResultRelativeToFilter);
-        this.clearFilter = this.updater((state) => updateStateWithFilter(state, undefined));
-        this.setOutputTimezone = this.updater(updateStateWithTimezoneValue);
-        /**
-         * Sets the "input" date range. This is the range that gets displayed on the date range picker.
-         */
-        this.setInputRange = this.updater(updateStateWithChangedRange);
-        // NOTE: Selected dates are NOT selected indexes. They are the internal selected dates that are excluded from the selection.
-        this.toggleSelectedDates = this.updater((state, toggle) => updateStateWithChangedDates(state, { toggle }));
-        this.addSelectedDates = this.updater((state, add) => updateStateWithChangedDates(state, { add }));
-        this.removeSelectedDates = this.updater((state, remove) => updateStateWithChangedDates(state, { remove }));
-        this.setSelectedDates = this.updater((state, set) => updateStateWithChangedDates(state, { set }));
-        this.selectAllDates = this.updater((state, selectAll = 'all') => updateStateWithChangedDates(state, { selectAll }));
-        // NOTE: Selected indexes are the typical/expected indexes that are selected or not.
-        this.setSelectedIndexes = this.updater((state, set) => updateStateWithChangedDates(state, { set, invertSetBehavior: true }));
-        this.setInitialSelectionState = this.updater(updateStateWithInitialSelectionState);
-        this.setDefaultScheduleDays = this.updater(updateStateWithChangedDefaultScheduleDays);
-        this.setScheduleDays = this.updater(updateStateWithChangedScheduleDays);
-        this.setAllowAllScheduleDays = this.updater((state) => updateStateWithChangedScheduleDays(state, [DateCellScheduleDayCode.WEEKDAY, DateCellScheduleDayCode.WEEKEND]));
-        this.setDateScheduleRangeValue = this.updater((state, value) => updateStateWithDateCellScheduleRangeValue(state, value));
-        this.setCellContentFactory = this.updater((state, cellContentFactory) => ({ ...state, cellContentFactory }));
-        /**
-         * Sets the selection mode.
-         */
-        this.setSelectionMode = this.updater(updateStateWithSelectionMode);
-        /**
-         * Used by the parent view to propogate a readonly state.
-         *
-         * Should typically not be used by the user directly with the intention of the parent synchronizing to this state.
-         */
-        this.setViewReadonlyState = this.updater((state, isViewReadonly) => ({ ...state, isViewReadonly }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStore }); }
+    // MARK:
+    toggleSelection = this.effect((input) => {
+        return input.pipe(switchMap(() => this.nextToggleSelection$.pipe(first(), filterMaybe(), tap((x) => {
+            this.selectAllDates(x);
+        }))));
+    });
+    // MARK: Accessors
+    selectionMode$ = this.state$.pipe(map((x) => x.selectionMode), distinctUntilChanged(), shareReplay(1));
+    filter$ = this.state$.pipe(map((x) => x.filter), distinctUntilChanged(), shareReplay(1));
+    minMaxDateRange$ = this.state$.pipe(map(calendarScheduleMinAndMaxDateRange), distinctUntilChanged(isSameDateRange), shareReplay(1));
+    minDate$ = this.minMaxDateRange$.pipe(map((x) => x?.start), distinctUntilChanged(isSameDateDay), shareReplay(1));
+    maxDate$ = this.minMaxDateRange$.pipe(map((x) => x?.end), distinctUntilChanged(isSameDateDay), shareReplay(1));
+    hasConfiguredMinMaxRange$ = this.minMaxDateRange$.pipe(map((x) => x != null && x.start != null && x.end != null), distinctUntilChanged(), shareReplay(1));
+    inputStart$ = this.state$.pipe(map((x) => x.inputStart), distinctUntilChanged(isSameDate), shareReplay(1));
+    inputEnd$ = this.state$.pipe(map((x) => x.inputEnd), distinctUntilChanged(isSameDate), shareReplay(1));
+    currentInputRange$ = this.state$.pipe(map(({ inputStart, inputEnd }) => ({ start: inputStart, end: inputEnd })), distinctUntilChanged((a, b) => isSameDateRange(a, b)), map((x) => ({ inputStart: x.start, inputEnd: x.end })), map((x) => {
+        if (x.inputStart && x.inputEnd) {
+            return x;
+        }
+        else {
+            return undefined;
+        }
+    }), shareReplay(1));
+    inputRange$ = this.currentInputRange$.pipe(filterMaybe(), shareReplay(1));
+    isEnabledFilterDayFunction$ = this.state$.pipe(map((x) => x.isEnabledFilterDay), distinctUntilChanged(), shareReplay(1));
+    isEnabledDayFunction$ = this.state$.pipe(map((x) => x.isEnabledDay), distinctUntilChanged(), shareReplay(1));
+    currentDateRange$ = this.state$.pipe(map(computeCalendarScheduleSelectionRange), distinctUntilChanged((a, b) => isSameDateRange(a, b)), shareReplay(1));
+    computeSelectionResultRelativeToFilter$ = this.state$.pipe(map((x) => x.computeSelectionResultRelativeToFilter), shareReplay(1));
+    startBeingUsedFromFilter$ = this.state$.pipe(
+    //
+    map(calendarScheduleStartBeingUsedFromFilter), distinctUntilChanged(), shareReplay(1));
+    dateRange$ = this.currentDateRange$.pipe(filterMaybe(), shareReplay(1));
+    allowedDaysOfWeek$ = this.state$.pipe(map((x) => x.allowedDaysOfWeek), distinctUntilHasDifferentValues(), shareReplay(1));
+    isInAllowedDaysOfWeekFunction$ = this.allowedDaysOfWeek$.pipe(map((x) => isInAllowedDaysOfWeekSet(x)), shareReplay(1));
+    scheduleDays$ = this.state$.pipe(map((x) => x.effectiveScheduleDays), distinctUntilHasDifferentValues(), shareReplay(1));
+    outputTimezone$ = this.state$.pipe(map((x) => x.outputTimezone), distinctUntilChanged(), shareReplay(1));
+    /**
+     * The timezone of the output values.
+     *
+     * If an outputTimezone is not specified, this defaults to the system timezone.
+     */
+    effectiveOutputTimezone$ = this.state$.pipe(map((x) => x.outputTimezone || x.systemTimezone), distinctUntilChanged(), shareReplay(1));
+    /**
+     * An outputTimezoneNormal to use.
+     *
+     * If an outputTimezone is not specified, this is undefined.
+     */
+    effectiveOutputTimezoneNormal$ = this.state$.pipe(map((x) => (x.outputTimezoneNormal ? x.outputTimezoneNormal : undefined)), distinctUntilChanged(), shareReplay(1));
+    currentSelectionValue$ = this.state$.pipe(map((x) => x.currentSelectionValue), distinctUntilChanged(), shareReplay(1));
+    currentSelectionValueStart$ = this.currentSelectionValue$.pipe(map((x) => x?.dateScheduleRange.start), distinctUntilChanged(isSameDate), shareReplay(1));
+    currentSelectionValueDateCellTimingDateFactory$ = this.currentSelectionValue$.pipe(map((x) => (x ? dateCellTimingDateFactory({ startsAt: x.dateScheduleRange.start, timezone: x.dateScheduleRange.timezone }) : undefined)), shareReplay(1));
+    currentSelectionValueDateCellDurationSpanExpansion$ = this.currentSelectionValue$.pipe(map((x) => (x ? expandDateCellScheduleRange({ dateCellScheduleRange: x.dateScheduleRange }) : [])), shareReplay(1));
+    selectionValueSelectedIndexes$ = this.currentSelectionValueDateCellDurationSpanExpansion$.pipe(map((x) => new Set(x.map((y) => y.i))), distinctUntilHasDifferentValues(), shareReplay(1));
+    selectionValueSelectedDates$ = this.currentSelectionValueDateCellTimingDateFactory$.pipe(switchMap((dateFactory) => {
+        return dateFactory ? this.selectionValueSelectedIndexes$.pipe(map((x) => mapValuesToSet(x, (y) => formatToISO8601DayStringForSystem(dateFactory(y))))) : of(new Set());
+    }), shareReplay(1));
+    selectionValue$ = this.currentSelectionValue$.pipe(filterMaybe(), shareReplay(1));
+    currentSelectionValueWithTimezone$ = this.currentSelectionValue$.pipe(combineLatestWith(this.effectiveOutputTimezoneNormal$), map(([x, timezoneNormal]) => {
+        let currentValueWithTimezone = x;
+        if (x && timezoneNormal) {
+            currentValueWithTimezone = {
+                dateScheduleRange: changeDateCellScheduleDateRangeToTimezone(x.dateScheduleRange, timezoneNormal),
+                minMaxRange: x.minMaxRange
+            };
+        }
+        return currentValueWithTimezone;
+    }), distinctUntilChanged(), shareReplay(1));
+    selectionValueWithTimezone$ = this.currentSelectionValueWithTimezone$.pipe(filterMaybe(), shareReplay(1));
+    selectionValueWithTimezoneDateCellDurationSpanExpansion$ = this.selectionValueWithTimezone$.pipe(map((x) => expandDateCellScheduleRange({ dateCellScheduleRange: x.dateScheduleRange })), shareReplay(1));
+    nextToggleSelection$ = this.hasConfiguredMinMaxRange$.pipe(switchMap((hasConfiguredMinMaxRange) => {
+        let obs;
+        if (hasConfiguredMinMaxRange) {
+            obs = this.currentSelectionValue$.pipe(map((x) => (x ? 'none' : 'all')));
+        }
+        else {
+            obs = this.currentSelectionValue$.pipe(map((x) => (x ? 'none' : undefined)));
+        }
+        return obs;
+    }), shareReplay(1));
+    currentDateCellScheduleRangeValue$ = this.currentSelectionValueWithTimezone$.pipe(map((x) => x?.dateScheduleRange), distinctUntilChanged(isSameDateCellScheduleDateRange), shareReplay(1));
+    dateCellScheduleRangeValue$ = this.currentDateCellScheduleRangeValue$.pipe(filterMaybe(), shareReplay(1));
+    cellContentFactory$ = this.state$.pipe(map((x) => x.cellContentFactory), distinctUntilChanged(), shareReplay(1));
+    isCustomized$ = this.state$.pipe(map((x) => x.toggledIndexes.size > 0), distinctUntilChanged(), shareReplay(1));
+    isViewReadonly$ = this.state$.pipe(map((x) => x.isViewReadonly), distinctUntilChanged(), shareReplay(1));
+    // MARK: State Changes
+    setMinMaxDateRange = this.updater(updateStateWithMinMaxDateRange);
+    setDefaultWeek = this.updater(updateStateWithMinMaxDateRange);
+    setFilter = this.updater(updateStateWithFilter);
+    setExclusions = this.updater(updateStateWithExclusions);
+    setComputeSelectionResultRelativeToFilter = this.updater(updateStateWithComputeSelectionResultRelativeToFilter);
+    clearFilter = this.updater((state) => updateStateWithFilter(state, undefined));
+    setOutputTimezone = this.updater(updateStateWithTimezoneValue);
+    /**
+     * Sets the "input" date range. This is the range that gets displayed on the date range picker.
+     */
+    setInputRange = this.updater(updateStateWithChangedRange);
+    // NOTE: Selected dates are NOT selected indexes. They are the internal selected dates that are excluded from the selection.
+    toggleSelectedDates = this.updater((state, toggle) => updateStateWithChangedDates(state, { toggle }));
+    addSelectedDates = this.updater((state, add) => updateStateWithChangedDates(state, { add }));
+    removeSelectedDates = this.updater((state, remove) => updateStateWithChangedDates(state, { remove }));
+    setSelectedDates = this.updater((state, set) => updateStateWithChangedDates(state, { set }));
+    selectAllDates = this.updater((state, selectAll = 'all') => updateStateWithChangedDates(state, { selectAll }));
+    // NOTE: Selected indexes are the typical/expected indexes that are selected or not.
+    setSelectedIndexes = this.updater((state, set) => updateStateWithChangedDates(state, { set, invertSetBehavior: true }));
+    setInitialSelectionState = this.updater(updateStateWithInitialSelectionState);
+    setDefaultScheduleDays = this.updater(updateStateWithChangedDefaultScheduleDays);
+    setScheduleDays = this.updater(updateStateWithChangedScheduleDays);
+    setAllowAllScheduleDays = this.updater((state) => updateStateWithChangedScheduleDays(state, [DateCellScheduleDayCode.WEEKDAY, DateCellScheduleDayCode.WEEKEND]));
+    setDateScheduleRangeValue = this.updater((state, value) => updateStateWithDateCellScheduleRangeValue(state, value));
+    setCellContentFactory = this.updater((state, cellContentFactory) => ({ ...state, cellContentFactory }));
+    /**
+     * Sets the selection mode.
+     */
+    setSelectionMode = this.updater(updateStateWithSelectionMode);
+    /**
+     * Used by the parent view to propogate a readonly state.
+     *
+     * Should typically not be used by the user directly with the intention of the parent synchronizing to this state.
+     */
+    setViewReadonlyState = this.updater((state, isViewReadonly) => ({ ...state, isViewReadonly }));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStore });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStore, decorators: [{
             type: Injectable
@@ -873,20 +873,16 @@ function computeCalendarScheduleSelectionDateCellRange(state) {
  * Token used by provideCalendarScheduleSelectionStoreIfDoesNotExist() to prevent injecting a parent DbxCalendarScheduleSelectionStore into the child view.
  */
 class DbxCalendarScheduleSelectionStoreProviderBlock {
-    constructor(dbxCalendarScheduleSelectionStore) {
-        this.dbxCalendarScheduleSelectionStore = dbxCalendarScheduleSelectionStore;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock, deps: [{ token: DbxCalendarScheduleSelectionStore, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock }); }
+    dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore, { skipSelf: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: DbxCalendarScheduleSelectionStore, decorators: [{
-                    type: SkipSelf
-                }] }]; } });
+        }] });
 class DbxCalendarScheduleSelectionStoreInjectionBlockDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, selector: "[dbxCalendarScheduleSelectionStoreParentBlocker]", providers: [DbxCalendarScheduleSelectionStoreProviderBlock], ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, selector: "[dbxCalendarScheduleSelectionStoreParentBlocker]", providers: [DbxCalendarScheduleSelectionStoreProviderBlock], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, decorators: [{
             type: Directive,
@@ -918,6 +914,16 @@ function provideCalendarScheduleSelectionStoreIfParentIsUnavailable() {
 }
 
 class DbxScheduleSelectionCalendarDateRangeComponent {
+    dbxCalendarStore = inject(DbxCalendarStore);
+    dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
+    matFormFieldDefaultOptions = inject(MAT_FORM_FIELD_DEFAULT_OPTIONS, { optional: true });
+    _required = new BehaviorSubject(false);
+    required$ = this._required.asObservable();
+    timezone$ = this.dbxCalendarScheduleSelectionStore.effectiveOutputTimezone$;
+    openPickerOnTextClick = true;
+    picker;
+    label = 'Enter a date range';
+    hint;
     set disabled(disabled) {
         if (disabled) {
             this.range.disable();
@@ -926,78 +932,68 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
             this.range.enable();
         }
     }
-    constructor(dbxCalendarStore, dbxCalendarScheduleSelectionStore, matFormFieldDefaultOptions) {
-        this.dbxCalendarStore = dbxCalendarStore;
-        this.dbxCalendarScheduleSelectionStore = dbxCalendarScheduleSelectionStore;
-        this.matFormFieldDefaultOptions = matFormFieldDefaultOptions;
-        this._required = new BehaviorSubject(false);
-        this.required$ = this._required.asObservable();
-        this.timezone$ = this.dbxCalendarScheduleSelectionStore.effectiveOutputTimezone$;
-        this.openPickerOnTextClick = true;
-        this.label = 'Enter a date range';
-        this.showCustomize = false;
-        this._pickerOpened = new BehaviorSubject(false);
-        this._requiredSub = new SubscriptionObject();
-        this._syncSub = new SubscriptionObject();
-        this._valueSub = new SubscriptionObject();
-        this.range = new FormGroup({
-            start: new FormControl(null),
-            end: new FormControl(null)
-        });
-        this.errorStateMatcher = {
-            isErrorState: (control, form) => {
-                if (control) {
-                    return (control.invalid && (control.dirty || control.touched)) || (control.touched && this.range.invalid);
-                }
-                else {
-                    return false;
-                }
+    showCustomize = false;
+    _pickerOpened = new BehaviorSubject(false);
+    _requiredSub = new SubscriptionObject();
+    _syncSub = new SubscriptionObject();
+    _valueSub = new SubscriptionObject();
+    range = new FormGroup({
+        start: new FormControl(null),
+        end: new FormControl(null)
+    });
+    errorStateMatcher = {
+        isErrorState: (control, form) => {
+            if (control) {
+                return (control.invalid && (control.dirty || control.touched)) || (control.touched && this.range.invalid);
             }
-        };
-        this.minDate$ = this.dbxCalendarScheduleSelectionStore.minDate$;
-        this.maxDate$ = this.dbxCalendarScheduleSelectionStore.maxDate$;
-        this.timezoneReleventDate$ = this.dbxCalendarScheduleSelectionStore.currentDateRange$.pipe(map((currentDateRange) => {
-            return currentDateRange ? currentDateRange.start ?? currentDateRange.end : undefined ?? new Date();
-        }), shareReplay(1));
-        this.isCustomized$ = this.dbxCalendarScheduleSelectionStore.isCustomized$;
-        this.currentErrorMessage$ = this.range.statusChanges.pipe(filter((x) => x === 'INVALID' || x === 'VALID'), map((x) => {
-            let currentErrorMessage;
-            if (x === 'INVALID') {
-                const { start, end } = this.range.controls;
-                if (this.range.hasError('required')) {
-                    currentErrorMessage = 'Date range is required';
-                }
-                else if (start.hasError('matStartDateInvalid')) {
-                    currentErrorMessage = 'Invalid start date';
-                }
-                else if (start.hasError('matDatepickerMin')) {
-                    currentErrorMessage = 'Start date is too early';
-                }
-                else if (start.hasError('matDatepickerMax')) {
-                    currentErrorMessage = 'Start date is too late';
-                }
-                else if (end.hasError('matStartDateInvalid')) {
-                    currentErrorMessage = 'Invalid end date';
-                }
-                else if (end.hasError('matDatepickerMin')) {
-                    currentErrorMessage = 'End date is too early';
-                }
-                else if (end.hasError('matDatepickerMax')) {
-                    currentErrorMessage = 'End date is too late';
-                }
+            else {
+                return false;
             }
-            return currentErrorMessage;
-        }), shareReplay(1));
-        this.pickerOpened$ = this._pickerOpened.asObservable();
-        this.defaultDatePickerFilter = () => true;
-        this.datePickerFilter$ = combineLatest([this.dbxCalendarScheduleSelectionStore.isEnabledFilterDayFunction$, this.dbxCalendarScheduleSelectionStore.isInAllowedDaysOfWeekFunction$]).pipe(map(([isEnabled, isAllowedDayOfWeek]) => {
-            const fn = (date) => {
-                const result = date ? isAllowedDayOfWeek(date) && isEnabled(date) : true;
-                return result;
-            };
-            return fn;
-        }), shareReplay(1));
-    }
+        }
+    };
+    minDate$ = this.dbxCalendarScheduleSelectionStore.minDate$;
+    maxDate$ = this.dbxCalendarScheduleSelectionStore.maxDate$;
+    timezoneReleventDate$ = this.dbxCalendarScheduleSelectionStore.currentDateRange$.pipe(map((currentDateRange) => {
+        return currentDateRange ? currentDateRange.start ?? currentDateRange.end : undefined ?? new Date();
+    }), shareReplay(1));
+    isCustomized$ = this.dbxCalendarScheduleSelectionStore.isCustomized$;
+    currentErrorMessage$ = this.range.statusChanges.pipe(filter((x) => x === 'INVALID' || x === 'VALID'), map((x) => {
+        let currentErrorMessage;
+        if (x === 'INVALID') {
+            const { start, end } = this.range.controls;
+            if (this.range.hasError('required')) {
+                currentErrorMessage = 'Date range is required';
+            }
+            else if (start.hasError('matStartDateInvalid')) {
+                currentErrorMessage = 'Invalid start date';
+            }
+            else if (start.hasError('matDatepickerMin')) {
+                currentErrorMessage = 'Start date is too early';
+            }
+            else if (start.hasError('matDatepickerMax')) {
+                currentErrorMessage = 'Start date is too late';
+            }
+            else if (end.hasError('matStartDateInvalid')) {
+                currentErrorMessage = 'Invalid end date';
+            }
+            else if (end.hasError('matDatepickerMin')) {
+                currentErrorMessage = 'End date is too early';
+            }
+            else if (end.hasError('matDatepickerMax')) {
+                currentErrorMessage = 'End date is too late';
+            }
+        }
+        return currentErrorMessage;
+    }), shareReplay(1));
+    pickerOpened$ = this._pickerOpened.asObservable();
+    defaultDatePickerFilter = () => true;
+    datePickerFilter$ = combineLatest([this.dbxCalendarScheduleSelectionStore.isEnabledFilterDayFunction$, this.dbxCalendarScheduleSelectionStore.isInAllowedDaysOfWeekFunction$]).pipe(map(([isEnabled, isAllowedDayOfWeek]) => {
+        const fn = (date) => {
+            const result = date ? isAllowedDayOfWeek(date) && isEnabled(date) : true;
+            return result;
+        };
+        return fn;
+    }), shareReplay(1));
     ngOnInit() {
         this._syncSub.subscription = this.dbxCalendarScheduleSelectionStore.currentInputRange$.subscribe((x) => {
             this.range.setValue({
@@ -1061,16 +1057,13 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
     pickerClosed() {
         this._pickerOpened.next(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateRangeComponent, deps: [{ token: i1.DbxCalendarStore }, { token: DbxCalendarScheduleSelectionStore }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDateRangeComponent, selector: "dbx-schedule-selection-calendar-date-range", inputs: { openPickerOnTextClick: "openPickerOnTextClick", label: "label", hint: "hint", disabled: "disabled", showCustomize: "showCustomize", required: "required" }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<mat-form-field class=\"dbx-schedule-selection-calendar-date-range-field\">\n  <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n  <div class=\"dbx-schedule-selection-calendar-date-range-field-content\">\n    <!-- Primary Content -->\n    <div class=\"dbx-flex-bar\">\n      <div *ngIf=\"showCustomize && (isCustomized$ | async)\" class=\"date-range-field-customized\">\n        <span class=\"dbx-accent-bg date-range-field-customized-text\">Custom</span>\n      </div>\n      <dbx-button-spacer></dbx-button-spacer>\n      <mat-datepicker-toggle class=\"mat-datepicker-button-highlight\" matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <dbx-button-spacer></dbx-button-spacer>\n      <mat-date-range-input (click)=\"clickedDateRangeInput()\" [required]=\"required$ | async\" [dateFilter]=\"(datePickerFilter$ | async) ?? defaultDatePickerFilter\" [formGroup]=\"range\" [rangePicker]=\"picker\">\n        <input [errorStateMatcher]=\"errorStateMatcher\" matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n        <input [errorStateMatcher]=\"errorStateMatcher\" matEndDate formControlName=\"end\" placeholder=\"End date\" />\n      </mat-date-range-input>\n      <span *ngIf=\"timezone$ | async\" class=\"dbx-schedule-selection-timezone dbx-faint dbx-nowrap dbx-icon-spacer\">{{ timezone$ | async | timezoneAbbreviation: (timezoneReleventDate$ | async) }}</span>\n      <div *ngIf=\"showCustomize\">\n        <dbx-button-spacer></dbx-button-spacer>\n        <ng-content select=\"[customizeButton]\"></ng-content>\n      </div>\n      <mat-date-range-picker #picker (opened)=\"pickerOpened()\" (closed)=\"pickerClosed()\"></mat-date-range-picker>\n    </div>\n    <!-- Custom Content -->\n    <div>\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <mat-error *ngIf=\"currentErrorMessage$ | async\">{{ currentErrorMessage$ | async }}</mat-error>\n  <mat-hint>{{ hint }}</mat-hint>\n</mat-form-field>\n", dependencies: [{ kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i1$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i7.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i7.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i7.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i7.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TimezoneAbbreviationPipe, name: "timezoneAbbreviation" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDateRangeComponent, selector: "dbx-schedule-selection-calendar-date-range", inputs: { openPickerOnTextClick: "openPickerOnTextClick", label: "label", hint: "hint", disabled: "disabled", showCustomize: "showCustomize", required: "required" }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<mat-form-field class=\"dbx-schedule-selection-calendar-date-range-field\">\n  <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n  <div class=\"dbx-schedule-selection-calendar-date-range-field-content\">\n    <!-- Primary Content -->\n    <div class=\"dbx-flex-bar\">\n      <div *ngIf=\"showCustomize && (isCustomized$ | async)\" class=\"date-range-field-customized\">\n        <span class=\"dbx-accent-bg date-range-field-customized-text\">Custom</span>\n      </div>\n      <dbx-button-spacer></dbx-button-spacer>\n      <mat-datepicker-toggle class=\"mat-datepicker-button-highlight\" matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <dbx-button-spacer></dbx-button-spacer>\n      <mat-date-range-input (click)=\"clickedDateRangeInput()\" [required]=\"required$ | async\" [dateFilter]=\"(datePickerFilter$ | async) ?? defaultDatePickerFilter\" [formGroup]=\"range\" [rangePicker]=\"picker\">\n        <input [errorStateMatcher]=\"errorStateMatcher\" matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n        <input [errorStateMatcher]=\"errorStateMatcher\" matEndDate formControlName=\"end\" placeholder=\"End date\" />\n      </mat-date-range-input>\n      <span *ngIf=\"timezone$ | async\" class=\"dbx-schedule-selection-timezone dbx-faint dbx-nowrap dbx-icon-spacer\">{{ timezone$ | async | timezoneAbbreviation: (timezoneReleventDate$ | async) }}</span>\n      <div *ngIf=\"showCustomize\">\n        <dbx-button-spacer></dbx-button-spacer>\n        <ng-content select=\"[customizeButton]\"></ng-content>\n      </div>\n      <mat-date-range-picker #picker (opened)=\"pickerOpened()\" (closed)=\"pickerClosed()\"></mat-date-range-picker>\n    </div>\n    <!-- Custom Content -->\n    <div>\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <mat-error *ngIf=\"currentErrorMessage$ | async\">{{ currentErrorMessage$ | async }}</mat-error>\n  <mat-hint>{{ hint }}</mat-hint>\n</mat-form-field>\n", dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i1$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i5.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i5.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i5.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i5.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TimezoneAbbreviationPipe, name: "timezoneAbbreviation" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-schedule-selection-calendar-date-range', template: "<mat-form-field class=\"dbx-schedule-selection-calendar-date-range-field\">\n  <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n  <div class=\"dbx-schedule-selection-calendar-date-range-field-content\">\n    <!-- Primary Content -->\n    <div class=\"dbx-flex-bar\">\n      <div *ngIf=\"showCustomize && (isCustomized$ | async)\" class=\"date-range-field-customized\">\n        <span class=\"dbx-accent-bg date-range-field-customized-text\">Custom</span>\n      </div>\n      <dbx-button-spacer></dbx-button-spacer>\n      <mat-datepicker-toggle class=\"mat-datepicker-button-highlight\" matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <dbx-button-spacer></dbx-button-spacer>\n      <mat-date-range-input (click)=\"clickedDateRangeInput()\" [required]=\"required$ | async\" [dateFilter]=\"(datePickerFilter$ | async) ?? defaultDatePickerFilter\" [formGroup]=\"range\" [rangePicker]=\"picker\">\n        <input [errorStateMatcher]=\"errorStateMatcher\" matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n        <input [errorStateMatcher]=\"errorStateMatcher\" matEndDate formControlName=\"end\" placeholder=\"End date\" />\n      </mat-date-range-input>\n      <span *ngIf=\"timezone$ | async\" class=\"dbx-schedule-selection-timezone dbx-faint dbx-nowrap dbx-icon-spacer\">{{ timezone$ | async | timezoneAbbreviation: (timezoneReleventDate$ | async) }}</span>\n      <div *ngIf=\"showCustomize\">\n        <dbx-button-spacer></dbx-button-spacer>\n        <ng-content select=\"[customizeButton]\"></ng-content>\n      </div>\n      <mat-date-range-picker #picker (opened)=\"pickerOpened()\" (closed)=\"pickerClosed()\"></mat-date-range-picker>\n    </div>\n    <!-- Custom Content -->\n    <div>\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <mat-error *ngIf=\"currentErrorMessage$ | async\">{{ currentErrorMessage$ | async }}</mat-error>\n  <mat-hint>{{ hint }}</mat-hint>\n</mat-form-field>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.DbxCalendarStore }, { type: DbxCalendarScheduleSelectionStore }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
-                }] }]; }, propDecorators: { openPickerOnTextClick: [{
+        }], propDecorators: { openPickerOnTextClick: [{
                 type: Input
             }], picker: [{
                 type: ViewChild,
@@ -1101,14 +1094,11 @@ function dbxScheduleSelectionCalendarDateDaysFormDayFields() {
 }
 
 class DbxScheduleSelectionCalendarDateDaysFormComponent extends AbstractSyncFormlyFormDirective {
-    constructor() {
-        super(...arguments);
-        this.fields = dbxScheduleSelectionCalendarDateDaysFormFields();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDateDaysFormComponent, selector: "dbx-schedule-selection-calendar-date-days-form", providers: [provideFormlyContext()], usesInheritance: true, ngImport: i0, template: `
+    fields = dbxScheduleSelectionCalendarDateDaysFormFields();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDateDaysFormComponent, selector: "dbx-schedule-selection-calendar-date-days-form", providers: [provideFormlyContext()], usesInheritance: true, ngImport: i0, template: `
     <dbx-formly></dbx-formly>
-  `, isInline: true, dependencies: [{ kind: "component", type: i4$1.DbxFormlyFormComponent, selector: "dbx-formly", exportAs: ["formly"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i2$1.DbxFormlyFormComponent, selector: "dbx-formly", exportAs: ["formly"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysFormComponent, decorators: [{
             type: Component,
@@ -1122,28 +1112,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class DbxScheduleSelectionCalendarDateDaysComponent {
-    constructor(dbxCalendarStore, dbxCalendarScheduleSelectionStore) {
-        this.dbxCalendarStore = dbxCalendarStore;
-        this.dbxCalendarScheduleSelectionStore = dbxCalendarScheduleSelectionStore;
-        this.template$ = this.dbxCalendarScheduleSelectionStore.scheduleDays$.pipe(map(enabledDaysFromDateCellScheduleDayCodes), shareReplay(1));
-        this.isFormModified = (value) => {
-            const newSetValue = new Set(dateCellScheduleDayCodesFromEnabledDays(value));
-            return this.dbxCalendarScheduleSelectionStore.scheduleDays$.pipe(map((currentSet) => {
-                const result = !dateCellScheduleDayCodesAreSetsEquivalent(newSetValue, currentSet);
-                return result;
-            }));
-        };
-        this.updateScheduleDays = (value) => {
-            this.dbxCalendarScheduleSelectionStore.setScheduleDays(new Set(dateCellScheduleDayCodesFromEnabledDays(value)));
-            return of(true);
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysComponent, deps: [{ token: i1.DbxCalendarStore }, { token: DbxCalendarScheduleSelectionStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDateDaysComponent, selector: "dbx-schedule-selection-calendar-date-days", ngImport: i0, template: `
+    dbxCalendarStore = inject(DbxCalendarStore);
+    dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
+    template$ = this.dbxCalendarScheduleSelectionStore.scheduleDays$.pipe(map(enabledDaysFromDateCellScheduleDayCodes), shareReplay(1));
+    isFormModified = (value) => {
+        const newSetValue = new Set(dateCellScheduleDayCodesFromEnabledDays(value));
+        return this.dbxCalendarScheduleSelectionStore.scheduleDays$.pipe(map((currentSet) => {
+            const result = !dateCellScheduleDayCodesAreSetsEquivalent(newSetValue, currentSet);
+            return result;
+        }));
+    };
+    updateScheduleDays = (value) => {
+        this.dbxCalendarScheduleSelectionStore.setScheduleDays(new Set(dateCellScheduleDayCodesFromEnabledDays(value)));
+        return of(true);
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDateDaysComponent, selector: "dbx-schedule-selection-calendar-date-days", ngImport: i0, template: `
     <div class="dbx-schedule-selection-calendar-date-days" dbxAction dbxActionAutoTrigger dbxActionEnforceModified [instantTrigger]="true" [dbxActionHandler]="updateScheduleDays">
       <dbx-schedule-selection-calendar-date-days-form dbxActionForm [dbxFormSource]="template$" [dbxActionFormModified]="isFormModified"></dbx-schedule-selection-calendar-date-days-form>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i3$1.DbxActionDirective, selector: "dbx-action,[dbxAction],dbx-action-context,[dbxActionContext]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i3$1.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i3$1.DbxActionEnforceModifiedDirective, selector: "[dbxActionEnforceModified]", inputs: ["dbxActionEnforceModified"] }, { kind: "directive", type: i3$1.DbxActionAutoTriggerDirective, selector: "dbxActionAutoTrigger, [dbxActionAutoTrigger]", inputs: ["dbxActionAutoTrigger", "triggerDebounce", "triggerThrottle", "triggerErrorThrottle", "fastTrigger", "instantTrigger", "triggerLimit"] }, { kind: "directive", type: i4$1.DbxActionFormDirective, selector: "[dbxActionForm]", inputs: ["dbxActionFormValidator", "dbxActionFormModified", "dbxActionFormMapValue", "formDisabledOnWorking"] }, { kind: "directive", type: i4$1.DbxFormSourceDirective, selector: "[dbxFormSource]", inputs: ["dbxFormSourceMode", "dbxFormSource"] }, { kind: "component", type: DbxScheduleSelectionCalendarDateDaysFormComponent, selector: "dbx-schedule-selection-calendar-date-days-form" }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction],dbx-action-context,[dbxActionContext]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionEnforceModifiedDirective, selector: "[dbxActionEnforceModified]", inputs: ["dbxActionEnforceModified"] }, { kind: "directive", type: i1$2.DbxActionAutoTriggerDirective, selector: "dbxActionAutoTrigger, [dbxActionAutoTrigger]", inputs: ["dbxActionAutoTrigger", "triggerDebounce", "triggerThrottle", "triggerErrorThrottle", "fastTrigger", "instantTrigger", "triggerLimit"] }, { kind: "directive", type: i2$1.DbxActionFormDirective, selector: "[dbxActionForm]", inputs: ["dbxActionFormValidator", "dbxActionFormModified", "dbxActionFormMapValue", "formDisabledOnWorking"] }, { kind: "directive", type: i2$1.DbxFormSourceDirective, selector: "[dbxFormSource]", inputs: ["dbxFormSourceMode", "dbxFormSource"] }, { kind: "component", type: DbxScheduleSelectionCalendarDateDaysFormComponent, selector: "dbx-schedule-selection-calendar-date-days-form" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysComponent, decorators: [{
             type: Component,
@@ -1155,18 +1143,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     </div>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.DbxCalendarStore }, { type: DbxCalendarScheduleSelectionStore }]; } });
+        }] });
 
 class DbxScheduleSelectionCalendarDatePopoverContentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDatePopoverContentComponent, selector: "dbx-schedule-selection-calendar-date-popover-content", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDatePopoverContentComponent, selector: "dbx-schedule-selection-calendar-date-popover-content", ngImport: i0, template: `
     <dbx-content-container padding="min" topPadding="normal">
       <dbx-schedule-selection-calendar-date-range [openPickerOnTextClick]="false"></dbx-schedule-selection-calendar-date-range>
       <dbx-label-block header="Allowed Days Of Week">
         <dbx-schedule-selection-calendar-date-days></dbx-schedule-selection-calendar-date-days>
       </dbx-label-block>
     </dbx-content-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.DbxContentContainerDirective, selector: "dbx-content-container,[dbxContentContainer],.dbx-content-container", inputs: ["grow", "padding", "topPadding"] }, { kind: "component", type: i1$1.DbxLabelBlockComponent, selector: "dbx-label-block", inputs: ["header"] }, { kind: "component", type: DbxScheduleSelectionCalendarDateDaysComponent, selector: "dbx-schedule-selection-calendar-date-days" }, { kind: "component", type: DbxScheduleSelectionCalendarDateRangeComponent, selector: "dbx-schedule-selection-calendar-date-range", inputs: ["openPickerOnTextClick", "label", "hint", "disabled", "showCustomize", "required"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.DbxContentContainerDirective, selector: "dbx-content-container,[dbxContentContainer],.dbx-content-container", inputs: ["grow", "padding", "topPadding"] }, { kind: "component", type: i1$1.DbxLabelBlockComponent, selector: "dbx-label-block", inputs: ["header"] }, { kind: "component", type: DbxScheduleSelectionCalendarDateDaysComponent, selector: "dbx-schedule-selection-calendar-date-days" }, { kind: "component", type: DbxScheduleSelectionCalendarDateRangeComponent, selector: "dbx-schedule-selection-calendar-date-range", inputs: ["openPickerOnTextClick", "label", "hint", "disabled", "showCustomize", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverContentComponent, decorators: [{
             type: Component,
@@ -1193,14 +1181,14 @@ class DbxScheduleSelectionCalendarDatePopoverComponent extends AbstractPopoverDi
             injector
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDatePopoverComponent, selector: "dbx-schedule-selection-calendar-date-popover", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDatePopoverComponent, selector: "dbx-schedule-selection-calendar-date-popover", usesInheritance: true, ngImport: i0, template: `
     <dbx-popover-content>
       <dbx-popover-scroll-content>
         <dbx-schedule-selection-calendar-date-popover-content></dbx-schedule-selection-calendar-date-popover-content>
       </dbx-popover-scroll-content>
     </dbx-popover-content>
-  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxPopoverContentComponent, selector: "dbx-popover-content" }, { kind: "component", type: i1$1.DbxPopoverScrollContentComponent, selector: "dbx-popover-scroll-content" }, { kind: "component", type: DbxScheduleSelectionCalendarDatePopoverContentComponent, selector: "dbx-schedule-selection-calendar-date-popover-content" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxPopoverContentComponent, selector: "dbx-popover-content" }, { kind: "component", type: i1$1.DbxPopoverScrollContentComponent, selector: "dbx-popover-scroll-content" }, { kind: "component", type: DbxScheduleSelectionCalendarDatePopoverContentComponent, selector: "dbx-schedule-selection-calendar-date-popover-content" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverComponent, decorators: [{
             type: Component,
@@ -1217,29 +1205,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class DbxScheduleSelectionCalendarDatePopoverButtonComponent {
-    constructor(popoverService, dbxCalendarScheduleSelectionStore, injector) {
-        this.popoverService = popoverService;
-        this.dbxCalendarScheduleSelectionStore = dbxCalendarScheduleSelectionStore;
-        this.injector = injector;
-        this.disabled$ = this.dbxCalendarScheduleSelectionStore.isViewReadonly$;
-        this.buttonText$ = this.dbxCalendarScheduleSelectionStore.currentDateRange$.pipe(map((x) => {
-            if (x?.start && x.end) {
-                const startString = formatToMonthDayString(x.start);
-                const endString = formatToMonthDayString(x.end);
-                return startString === endString ? startString : `${formatToMonthDayString(x.start)} - ${formatToMonthDayString(x.end)}`;
-            }
-            else {
-                return 'Pick a Date Range';
-            }
-        }), shareReplay(1));
-    }
+    injector = inject(Injector);
+    popoverService = inject(DbxPopoverService);
+    dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
+    buttonPopoverOrigin;
+    disabled$ = this.dbxCalendarScheduleSelectionStore.isViewReadonly$;
+    buttonText$ = this.dbxCalendarScheduleSelectionStore.currentDateRange$.pipe(map((x) => {
+        if (x?.start && x.end) {
+            const startString = formatToMonthDayString(x.start);
+            const endString = formatToMonthDayString(x.end);
+            return startString === endString ? startString : `${formatToMonthDayString(x.start)} - ${formatToMonthDayString(x.end)}`;
+        }
+        else {
+            return 'Pick a Date Range';
+        }
+    }), shareReplay(1));
     openPopover() {
         DbxScheduleSelectionCalendarDatePopoverComponent.openPopover(this.popoverService, { origin: this.buttonPopoverOrigin, injector: this.injector });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, deps: [{ token: i1$1.DbxPopoverService }, { token: DbxCalendarScheduleSelectionStore }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, selector: "dbx-schedule-selection-calendar-date-popover-button", viewQueries: [{ propertyName: "buttonPopoverOrigin", first: true, predicate: ["buttonPopoverOrigin"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, selector: "dbx-schedule-selection-calendar-date-popover-button", viewQueries: [{ propertyName: "buttonPopoverOrigin", first: true, predicate: ["buttonPopoverOrigin"], descendants: true, read: ElementRef }], ngImport: i0, template: `
     <dbx-button #buttonPopoverOrigin icon="date_range" [disabled]="disabled$ | async" [raised]="true" color="accent" [text]="buttonText$ | async" (buttonClick)="openPopover()"></dbx-button>
-  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxButtonComponent, selector: "dbx-button", inputs: ["type", "basic", "raised", "stroked", "flat", "iconOnly", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxButtonComponent, selector: "dbx-button", inputs: ["type", "basic", "raised", "stroked", "flat", "iconOnly", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, decorators: [{
             type: Component,
@@ -1249,32 +1236,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     <dbx-button #buttonPopoverOrigin icon="date_range" [disabled]="disabled$ | async" [raised]="true" color="accent" [text]="buttonText$ | async" (buttonClick)="openPopover()"></dbx-button>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.DbxPopoverService }, { type: DbxCalendarScheduleSelectionStore }, { type: i0.Injector }]; }, propDecorators: { buttonPopoverOrigin: [{
+        }], propDecorators: { buttonPopoverOrigin: [{
                 type: ViewChild,
                 args: ['buttonPopoverOrigin', { read: ElementRef }]
             }] } });
 
 class DbxScheduleSelectionCalendarCellComponent {
+    dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
+    content = {};
     get icon() {
         return this.content.icon;
     }
     get text() {
         return this.content.text;
     }
-    constructor(dbxCalendarScheduleSelectionStore) {
-        this.dbxCalendarScheduleSelectionStore = dbxCalendarScheduleSelectionStore;
-        this.content = {};
-    }
     set day(day) {
         this.dbxCalendarScheduleSelectionStore.cellContentFactory$.pipe(first()).subscribe((fn) => {
             this.content = fn(day);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarCellComponent, deps: [{ token: DbxCalendarScheduleSelectionStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarCellComponent, selector: "dbx-schedule-selection-calendar-cell", inputs: { day: "day" }, host: { classAttribute: "dbx-schedule-selection-calendar-cell" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarCellComponent, selector: "dbx-schedule-selection-calendar-cell", inputs: { day: "day" }, host: { classAttribute: "dbx-schedule-selection-calendar-cell" }, ngImport: i0, template: `
     <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
     <span>{{ text }}</span>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarCellComponent, decorators: [{
             type: Component,
@@ -1289,7 +1274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: DbxCalendarScheduleSelectionStore }]; }, propDecorators: { day: [{
+        }], propDecorators: { day: [{
                 type: Input
             }] } });
 
@@ -1297,41 +1282,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Toggle button for selecting and clearing the current selection.
  */
 class DbxScheduleSelectionCalendarSelectionToggleButtonComponent {
-    constructor(popoverService, dbxCalendarScheduleSelectionStore, injector) {
-        this.popoverService = popoverService;
-        this.dbxCalendarScheduleSelectionStore = dbxCalendarScheduleSelectionStore;
-        this.injector = injector;
-        this._disabled = new BehaviorSubject(false);
-        this.disableButton$ = this._disabled.pipe(switchMap((disabled) => {
-            if (disabled) {
-                return of(true);
-            }
-            else {
-                return this.dbxCalendarScheduleSelectionStore.nextToggleSelection$.pipe(map((x) => !x));
+    popoverService = inject(DbxPopoverService);
+    dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
+    injector = inject(Injector);
+    _disabled = new BehaviorSubject(false);
+    disableButton$ = this._disabled.pipe(switchMap((disabled) => {
+        if (disabled) {
+            return of(true);
+        }
+        else {
+            return this.dbxCalendarScheduleSelectionStore.nextToggleSelection$.pipe(map((x) => !x));
+        }
+    }), distinctUntilChanged(), shareReplay(1));
+    buttonDisplay$ = this.dbxCalendarScheduleSelectionStore.selectionMode$.pipe(switchMap((selectionMode) => {
+        return this.dbxCalendarScheduleSelectionStore.nextToggleSelection$.pipe(map((x) => {
+            let buttonDisplay;
+            switch (x) {
+                case 'all':
+                    buttonDisplay = {
+                        icon: 'select_all',
+                        text: 'Select All'
+                    };
+                    break;
+                default:
+                case 'none':
+                    buttonDisplay = {
+                        icon: 'clear',
+                        text: selectionMode === 'multiple' ? 'Clear All' : 'Clear'
+                    };
+                    break;
             }
-        }), distinctUntilChanged(), shareReplay(1));
-        this.buttonDisplay$ = this.dbxCalendarScheduleSelectionStore.selectionMode$.pipe(switchMap((selectionMode) => {
-            return this.dbxCalendarScheduleSelectionStore.nextToggleSelection$.pipe(map((x) => {
-                let buttonDisplay;
-                switch (x) {
-                    case 'all':
-                        buttonDisplay = {
-                            icon: 'select_all',
-                            text: 'Select All'
-                        };
-                        break;
-                    default:
-                    case 'none':
-                        buttonDisplay = {
-                            icon: 'clear',
-                            text: selectionMode === 'multiple' ? 'Clear All' : 'Clear'
-                        };
-                        break;
-                }
-                return buttonDisplay;
-            }));
-        }), shareReplay(1));
-    }
+            return buttonDisplay;
+        }));
+    }), shareReplay(1));
     ngOnDestroy() {
         this._disabled.complete();
     }
@@ -1341,10 +1324,10 @@ class DbxScheduleSelectionCalendarSelectionToggleButtonComponent {
     set disabled(disabled) {
         this._disabled.next(disabled);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, deps: [{ token: i1$1.DbxPopoverService }, { token: DbxCalendarScheduleSelectionStore }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, selector: "dbx-schedule-selection-calendar-selection-toggle-button", inputs: { disabled: "disabled" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, selector: "dbx-schedule-selection-calendar-selection-toggle-button", inputs: { disabled: "disabled" }, ngImport: i0, template: `
     <dbx-button [disabled]="disableButton$ | async" [buttonDisplay]="buttonDisplay$ | async" [raised]="true" (buttonClick)="toggleSelection()"></dbx-button>
-  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxButtonComponent, selector: "dbx-button", inputs: ["type", "basic", "raised", "stroked", "flat", "iconOnly", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxButtonComponent, selector: "dbx-button", inputs: ["type", "basic", "raised", "stroked", "flat", "iconOnly", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, decorators: [{
             type: Component,
@@ -1354,7 +1337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     <dbx-button [disabled]="disableButton$ | async" [buttonDisplay]="buttonDisplay$ | async" [raised]="true" (buttonClick)="toggleSelection()"></dbx-button>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.DbxPopoverService }, { type: DbxCalendarScheduleSelectionStore }, { type: i0.Injector }]; }, propDecorators: { disabled: [{
+        }], propDecorators: { disabled: [{
                 type: Input
             }] } });
 
@@ -1399,44 +1382,42 @@ function dbxScheduleSelectionCalendarBeforeMonthViewRenderFactory(inputModifyFn)
     };
 }
 class DbxScheduleSelectionCalendarComponent {
-    constructor(calendarStore, dbxCalendarScheduleSelectionStore) {
-        this.calendarStore = calendarStore;
-        this.dbxCalendarScheduleSelectionStore = dbxCalendarScheduleSelectionStore;
-        this._inputReadonly = new BehaviorSubject(undefined);
-        this._config = new BehaviorSubject({});
-        this._centerRangeSub = new SubscriptionObject();
-        this.config$ = this._config.pipe(distinctUntilChanged(), shareReplay(1));
-        this.readonly$ = this.config$.pipe(switchMap((x) => (x.readonly != null ? asObservableFromGetter(x.readonly) : of(undefined))), combineLatestWith(this._inputReadonly), map(([configReadonly, inputReadonly]) => {
-            return (configReadonly ?? false) || (inputReadonly ?? false);
-        }), shareReplay(1));
-        this.showButtonsOnReadonly$ = this.config$.pipe(map((x) => x.showButtonsOnReadonly ?? false), distinctUntilChanged(), shareReplay(1));
-        this.showButtons$ = this.showButtonsOnReadonly$.pipe(switchMap((x) => {
-            if (x) {
-                return of(true);
-            }
-            else {
-                return this.readonly$.pipe(map((x) => !x));
-            }
-        }), distinctUntilChanged(), shareReplay(1));
-        this.showClearSelectionButton$ = this.config$.pipe(map((config) => config.showClearSelectionButton ?? true), combineLatestWith(this.showButtons$), map((x) => reduceBooleansWithAnd(x)), distinctUntilChanged(), shareReplay(1));
-        this.datePopoverButtonInjectionConfig$ = this.config$.pipe(map((x) => x.buttonInjectionConfig), switchMapDbxInjectionComponentConfig(DbxScheduleSelectionCalendarDatePopoverButtonComponent), combineLatestWith(this.showButtons$), map(([config, showButton]) => (showButton ? config : undefined)), shareReplay(1));
-        this.clickEvent = new EventEmitter();
-        // refresh any time the selected day function updates
-        this.state$ = this.dbxCalendarScheduleSelectionStore.state$;
-        this.beforeMonthViewRender$ = this.config$.pipe(switchMap((x) => {
-            let factory;
-            if (x.beforeMonthViewRenderFunctionFactory) {
-                factory = asObservable(x.beforeMonthViewRenderFunctionFactory);
-            }
-            else {
-                factory = asObservable(x.customizeDay).pipe(map((x) => dbxScheduleSelectionCalendarBeforeMonthViewRenderFactory(x)));
-            }
-            return factory.pipe(map((x) => x(this.state$)));
-        }), shareReplay(1));
-        this.refresh$ = combineLatest([this.state$, this.beforeMonthViewRender$]).pipe(throttleTime(20, undefined, { leading: true, trailing: true }), map(() => undefined));
-        this.events$ = this.calendarStore.visibleEvents$.pipe(map(prepareAndSortCalendarEvents), shareReplay(1));
-        this.viewDate$ = this.calendarStore.date$;
-    }
+    calendarStore = inject((DbxCalendarStore));
+    dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
+    _inputReadonly = new BehaviorSubject(undefined);
+    _config = new BehaviorSubject({});
+    _centerRangeSub = new SubscriptionObject();
+    config$ = this._config.pipe(distinctUntilChanged(), shareReplay(1));
+    readonly$ = this.config$.pipe(switchMap((x) => (x.readonly != null ? asObservableFromGetter(x.readonly) : of(undefined))), combineLatestWith(this._inputReadonly), map(([configReadonly, inputReadonly]) => {
+        return (configReadonly ?? false) || (inputReadonly ?? false);
+    }), shareReplay(1));
+    showButtonsOnReadonly$ = this.config$.pipe(map((x) => x.showButtonsOnReadonly ?? false), distinctUntilChanged(), shareReplay(1));
+    showButtons$ = this.showButtonsOnReadonly$.pipe(switchMap((x) => {
+        if (x) {
+            return of(true);
+        }
+        else {
+            return this.readonly$.pipe(map((x) => !x));
+        }
+    }), distinctUntilChanged(), shareReplay(1));
+    showClearSelectionButton$ = this.config$.pipe(map((config) => config.showClearSelectionButton ?? true), combineLatestWith(this.showButtons$), map((x) => reduceBooleansWithAnd(x)), distinctUntilChanged(), shareReplay(1));
+    datePopoverButtonInjectionConfig$ = this.config$.pipe(map((x) => x.buttonInjectionConfig), switchMapDbxInjectionComponentConfig(DbxScheduleSelectionCalendarDatePopoverButtonComponent), combineLatestWith(this.showButtons$), map(([config, showButton]) => (showButton ? config : undefined)), shareReplay(1));
+    clickEvent = new EventEmitter();
+    // refresh any time the selected day function updates
+    state$ = this.dbxCalendarScheduleSelectionStore.state$;
+    beforeMonthViewRender$ = this.config$.pipe(switchMap((x) => {
+        let factory;
+        if (x.beforeMonthViewRenderFunctionFactory) {
+            factory = asObservable(x.beforeMonthViewRenderFunctionFactory);
+        }
+        else {
+            factory = asObservable(x.customizeDay).pipe(map((x) => dbxScheduleSelectionCalendarBeforeMonthViewRenderFactory(x)));
+        }
+        return factory.pipe(map((x) => x(this.state$)));
+    }), shareReplay(1));
+    refresh$ = combineLatest([this.state$, this.beforeMonthViewRender$]).pipe(throttleTime(20, undefined, { leading: true, trailing: true }), map(() => undefined));
+    events$ = this.calendarStore.visibleEvents$.pipe(map(prepareAndSortCalendarEvents), shareReplay(1));
+    viewDate$ = this.calendarStore.date$;
     ngOnInit() {
         this.dbxCalendarScheduleSelectionStore.setViewReadonlyState(this.readonly$); // sync the readonly state
         this.calendarStore.setNavigationRangeLimit(this.dbxCalendarScheduleSelectionStore.minMaxDateRange$); // set navigation limit to the min/max allowed dates.
@@ -1499,13 +1480,13 @@ class DbxScheduleSelectionCalendarComponent {
             x(renderEvent);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarComponent, deps: [{ token: i1.DbxCalendarStore }, { token: DbxCalendarScheduleSelectionStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarComponent, selector: "dbx-schedule-selection-calendar", inputs: { config: "config", readonly: "readonly" }, outputs: { clickEvent: "clickEvent" }, providers: [DbxCalendarStore], ngImport: i0, template: "<dbx-calendar-base class=\"dbx-schedule-selection-calendar\" [ngClass]=\"(readonly$ | async) ? 'dbx-schedule-selection-calendar-readonly' : ''\">\n  <ng-container controls>\n    <ng-container *ngIf=\"showClearSelectionButton$ | async\">\n      <dbx-schedule-selection-calendar-selection-toggle-button [disabled]=\"readonly$ | async\"></dbx-schedule-selection-calendar-selection-toggle-button>\n      <dbx-button-spacer></dbx-button-spacer>\n    </ng-container>\n    <dbx-injection [config]=\"datePopoverButtonInjectionConfig$ | async\"></dbx-injection>\n  </ng-container>\n  <div class=\"dbx-calendar-content dbx-calendar-content-month\">\n    <mwl-calendar-month-view [refresh]=\"refresh$\" [viewDate]=\"(viewDate$ | async)!\" [events]=\"(events$ | async)!\" (dayClicked)=\"dayClicked($event.day)\" (eventClicked)=\"eventClicked('Clicked', $event.event)\" (beforeViewRender)=\"beforeMonthViewRender($event)\" [cellTemplate]=\"monthDayCellTemplate\"></mwl-calendar-month-view>\n  </div>\n</dbx-calendar-base>\n\n<!-- Cell -->\n<ng-template #monthDayCellTemplate let-day=\"day\" let-locale=\"locale\">\n  <div class=\"cal-cell-top\">\n    <span class=\"cal-day-badge\" *ngIf=\"day.badgeTotal > 0\">{{ day.badgeTotal }}</span>\n    <span class=\"cal-day-number\">{{ day.date | calendarDate: 'monthViewDayNumber':locale }}</span>\n  </div>\n  <dbx-schedule-selection-calendar-cell [day]=\"day\"></dbx-schedule-selection-calendar-cell>\n</ng-template>\n", dependencies: [{ kind: "component", type: i3$1.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "component", type: i1.DbxCalendarBaseComponent, selector: "dbx-calendar-base" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: i6.CalendarMonthViewComponent, selector: "mwl-calendar-month-view", inputs: ["viewDate", "events", "excludeDays", "activeDayIsOpen", "activeDay", "refresh", "locale", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "weekStartsOn", "headerTemplate", "cellTemplate", "openDayEventsTemplate", "eventTitleTemplate", "eventActionsTemplate", "weekendDays"], outputs: ["beforeViewRender", "dayClicked", "eventClicked", "columnHeaderClicked", "eventTimesChanged"] }, { kind: "directive", type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: DbxScheduleSelectionCalendarCellComponent, selector: "dbx-schedule-selection-calendar-cell", inputs: ["day"] }, { kind: "component", type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, selector: "dbx-schedule-selection-calendar-selection-toggle-button", inputs: ["disabled"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.ɵCalendarDatePipe, name: "calendarDate" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarComponent, selector: "dbx-schedule-selection-calendar", inputs: { config: "config", readonly: "readonly" }, outputs: { clickEvent: "clickEvent" }, providers: [DbxCalendarStore], ngImport: i0, template: "<dbx-calendar-base class=\"dbx-schedule-selection-calendar\" [ngClass]=\"(readonly$ | async) ? 'dbx-schedule-selection-calendar-readonly' : ''\">\n  <ng-container controls>\n    <ng-container *ngIf=\"showClearSelectionButton$ | async\">\n      <dbx-schedule-selection-calendar-selection-toggle-button [disabled]=\"readonly$ | async\"></dbx-schedule-selection-calendar-selection-toggle-button>\n      <dbx-button-spacer></dbx-button-spacer>\n    </ng-container>\n    <dbx-injection [config]=\"datePopoverButtonInjectionConfig$ | async\"></dbx-injection>\n  </ng-container>\n  <div class=\"dbx-calendar-content dbx-calendar-content-month\">\n    <mwl-calendar-month-view [refresh]=\"refresh$\" [viewDate]=\"(viewDate$ | async)!\" [events]=\"(events$ | async)!\" (dayClicked)=\"dayClicked($event.day)\" (eventClicked)=\"eventClicked('Clicked', $event.event)\" (beforeViewRender)=\"beforeMonthViewRender($event)\" [cellTemplate]=\"monthDayCellTemplate\"></mwl-calendar-month-view>\n  </div>\n</dbx-calendar-base>\n\n<!-- Cell -->\n<ng-template #monthDayCellTemplate let-day=\"day\" let-locale=\"locale\">\n  <div class=\"cal-cell-top\">\n    <span class=\"cal-day-badge\" *ngIf=\"day.badgeTotal > 0\">{{ day.badgeTotal }}</span>\n    <span class=\"cal-day-number\">{{ day.date | calendarDate: 'monthViewDayNumber':locale }}</span>\n  </div>\n  <dbx-schedule-selection-calendar-cell [day]=\"day\"></dbx-schedule-selection-calendar-cell>\n</ng-template>\n", dependencies: [{ kind: "component", type: i1$2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "component", type: i2$3.DbxCalendarBaseComponent, selector: "dbx-calendar-base" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: i5$1.CalendarMonthViewComponent, selector: "mwl-calendar-month-view", inputs: ["viewDate", "events", "excludeDays", "activeDayIsOpen", "activeDay", "refresh", "locale", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "weekStartsOn", "headerTemplate", "cellTemplate", "openDayEventsTemplate", "eventTitleTemplate", "eventActionsTemplate", "weekendDays"], outputs: ["beforeViewRender", "dayClicked", "eventClicked", "columnHeaderClicked", "eventTimesChanged"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: DbxScheduleSelectionCalendarCellComponent, selector: "dbx-schedule-selection-calendar-cell", inputs: ["day"] }, { kind: "component", type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, selector: "dbx-schedule-selection-calendar-selection-toggle-button", inputs: ["disabled"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.ɵCalendarDatePipe, name: "calendarDate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-schedule-selection-calendar', providers: [DbxCalendarStore], template: "<dbx-calendar-base class=\"dbx-schedule-selection-calendar\" [ngClass]=\"(readonly$ | async) ? 'dbx-schedule-selection-calendar-readonly' : ''\">\n  <ng-container controls>\n    <ng-container *ngIf=\"showClearSelectionButton$ | async\">\n      <dbx-schedule-selection-calendar-selection-toggle-button [disabled]=\"readonly$ | async\"></dbx-schedule-selection-calendar-selection-toggle-button>\n      <dbx-button-spacer></dbx-button-spacer>\n    </ng-container>\n    <dbx-injection [config]=\"datePopoverButtonInjectionConfig$ | async\"></dbx-injection>\n  </ng-container>\n  <div class=\"dbx-calendar-content dbx-calendar-content-month\">\n    <mwl-calendar-month-view [refresh]=\"refresh$\" [viewDate]=\"(viewDate$ | async)!\" [events]=\"(events$ | async)!\" (dayClicked)=\"dayClicked($event.day)\" (eventClicked)=\"eventClicked('Clicked', $event.event)\" (beforeViewRender)=\"beforeMonthViewRender($event)\" [cellTemplate]=\"monthDayCellTemplate\"></mwl-calendar-month-view>\n  </div>\n</dbx-calendar-base>\n\n<!-- Cell -->\n<ng-template #monthDayCellTemplate let-day=\"day\" let-locale=\"locale\">\n  <div class=\"cal-cell-top\">\n    <span class=\"cal-day-badge\" *ngIf=\"day.badgeTotal > 0\">{{ day.badgeTotal }}</span>\n    <span class=\"cal-day-number\">{{ day.date | calendarDate: 'monthViewDayNumber':locale }}</span>\n  </div>\n  <dbx-schedule-selection-calendar-cell [day]=\"day\"></dbx-schedule-selection-calendar-cell>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.DbxCalendarStore }, { type: DbxCalendarScheduleSelectionStore }]; }, propDecorators: { clickEvent: [{
+        }], propDecorators: { clickEvent: [{
                 type: Output
             }], config: [{
                 type: Input
@@ -1541,14 +1522,14 @@ class DbxScheduleSelectionCalendarDateDialogComponent extends AbstractDialogDire
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDateDialogComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDateDialogComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <dbx-dialog-content class="dbx-schedule-selection-calendar-date-dialog">
       <dbx-dialog-content-close (close)="close()"></dbx-dialog-content-close>
       <dbx-schedule-selection-calendar></dbx-schedule-selection-calendar>
       <dbx-dialog-content-footer [config]="closeConfig" (close)="close()"></dbx-dialog-content-footer>
     </dbx-dialog-content>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.DbxDialogContentDirective, selector: "dbx-dialog-content,[dbxDialogContent].dbx-dialog-content", inputs: ["width"] }, { kind: "component", type: i1$1.DbxDialogContentFooterComponent, selector: "dbx-dialog-content-footer", inputs: ["closeText", "buttonColor", "config"], outputs: ["close"] }, { kind: "component", type: i1$1.DbxDialogContentCloseComponent, selector: "dbx-dialog-content-close", inputs: ["padded"], outputs: ["close"] }, { kind: "component", type: DbxScheduleSelectionCalendarComponent, selector: "dbx-schedule-selection-calendar", inputs: ["config", "readonly"], outputs: ["clickEvent"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.DbxDialogContentDirective, selector: "dbx-dialog-content,[dbxDialogContent].dbx-dialog-content", inputs: ["width"] }, { kind: "component", type: i1$1.DbxDialogContentFooterComponent, selector: "dbx-dialog-content-footer", inputs: ["closeText", "buttonColor", "config"], outputs: ["close"] }, { kind: "component", type: i1$1.DbxDialogContentCloseComponent, selector: "dbx-dialog-content-close", inputs: ["padded"], outputs: ["close"] }, { kind: "component", type: DbxScheduleSelectionCalendarComponent, selector: "dbx-schedule-selection-calendar", inputs: ["config", "readonly"], outputs: ["clickEvent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogComponent, decorators: [{
             type: Component,
@@ -1564,18 +1545,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class DbxScheduleSelectionCalendarDateDialogButtonComponent {
-    constructor(matDialog, injector) {
-        this.matDialog = matDialog;
-        this.injector = injector;
-        this.buttonText = 'Customize';
-    }
+    injector = inject(Injector);
+    matDialog = inject(MatDialog);
+    buttonText = 'Customize';
+    disabled;
+    contentConfig;
     clickCustomize() {
         DbxScheduleSelectionCalendarDateDialogComponent.openDialog(this.matDialog, { injector: this.injector, contentConfig: this.contentConfig });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogButtonComponent, deps: [{ token: i1$2.MatDialog }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDateDialogButtonComponent, selector: "dbx-schedule-selection-calendar-date-dialog-button", inputs: { buttonText: "buttonText", disabled: "disabled", contentConfig: "contentConfig" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDateDialogButtonComponent, selector: "dbx-schedule-selection-calendar-date-dialog-button", inputs: { buttonText: "buttonText", disabled: "disabled", contentConfig: "contentConfig" }, ngImport: i0, template: `
     <dbx-button [raised]="true" color="accent" [text]="buttonText" [disabled]="disabled" (buttonClick)="clickCustomize()"></dbx-button>
-  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxButtonComponent, selector: "dbx-button", inputs: ["type", "basic", "raised", "stroked", "flat", "iconOnly", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxButtonComponent, selector: "dbx-button", inputs: ["type", "basic", "raised", "stroked", "flat", "iconOnly", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogButtonComponent, decorators: [{
             type: Component,
@@ -1585,7 +1566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     <dbx-button [raised]="true" color="accent" [text]="buttonText" [disabled]="disabled" (buttonClick)="clickCustomize()"></dbx-button>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.MatDialog }, { type: i0.Injector }]; }, propDecorators: { buttonText: [{
+        }], propDecorators: { buttonText: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -1594,23 +1575,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
-    constructor(compact, dbxCalendarScheduleSelectionStore, ngZone) {
-        super();
-        this.compact = compact;
-        this.dbxCalendarScheduleSelectionStore = dbxCalendarScheduleSelectionStore;
-        this.ngZone = ngZone;
-        this._syncSub = new SubscriptionObject();
-        this._valueSub = new SubscriptionObject();
-        this._timezoneSub = new SubscriptionObject();
-        this._minMaxDateRangeSub = new SubscriptionObject();
-        this._defaultWeekSub = new SubscriptionObject();
-        this._filterSub = new SubscriptionObject();
-        this._exclusionsSub = new SubscriptionObject();
-        this._formControlObs = new BehaviorSubject(undefined);
-        this.formControl$ = this._formControlObs.pipe(filterMaybe());
-        this.value$ = this.formControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value))), shareReplay(1));
-        this.disableCustomize$ = this.value$.pipe(map((x) => (this.allowCustomizeWithoutDateRange ? false : !x)), distinctUntilChanged(), shareReplay(1));
-    }
+    compact = inject(CompactContextStore, { optional: true });
+    dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
+    ngZone = inject(NgZone);
+    _syncSub = new SubscriptionObject();
+    _valueSub = new SubscriptionObject();
+    _timezoneSub = new SubscriptionObject();
+    _minMaxDateRangeSub = new SubscriptionObject();
+    _defaultWeekSub = new SubscriptionObject();
+    _filterSub = new SubscriptionObject();
+    _exclusionsSub = new SubscriptionObject();
+    _formControlObs = new BehaviorSubject(undefined);
+    formControl$ = this._formControlObs.pipe(filterMaybe());
+    value$ = this.formControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value))), shareReplay(1));
+    disableCustomize$ = this.value$.pipe(map((x) => (this.allowCustomizeWithoutDateRange ? false : !x)), distinctUntilChanged(), shareReplay(1));
     get formGroupName() {
         return this.field.key;
     }
@@ -1709,15 +1687,15 @@ class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
         this._exclusionsSub.destroy();
         this._formControlObs.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormCalendarDateScheduleRangeFieldComponent, deps: [{ token: i1$1.CompactContextStore, optional: true }, { token: DbxCalendarScheduleSelectionStore }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormCalendarDateScheduleRangeFieldComponent, selector: "ng-component", providers: [provideCalendarScheduleSelectionStoreIfParentIsUnavailable()], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormCalendarDateScheduleRangeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormCalendarDateScheduleRangeFieldComponent, selector: "ng-component", providers: [provideCalendarScheduleSelectionStoreIfParentIsUnavailable()], usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-schedule-selection-field">
       <dbx-schedule-selection-calendar-date-range [openPickerOnTextClick]="openPickerOnTextClick" [showCustomize]="showCustomize" [required]="required" [disabled]="isReadonlyOrDisabled" [label]="label" [hint]="description">
         <dbx-schedule-selection-calendar-date-dialog-button customizeButton [disabled]="disableCustomize$ | async" [contentConfig]="dialogContentConfig"></dbx-schedule-selection-calendar-date-dialog-button>
         <dbx-injection [config]="customDetailsConfig"></dbx-injection>
       </dbx-schedule-selection-calendar-date-range>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: i3$1.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "component", type: DbxScheduleSelectionCalendarDateRangeComponent, selector: "dbx-schedule-selection-calendar-date-range", inputs: ["openPickerOnTextClick", "label", "hint", "disabled", "showCustomize", "required"] }, { kind: "component", type: DbxScheduleSelectionCalendarDateDialogButtonComponent, selector: "dbx-schedule-selection-calendar-date-dialog-button", inputs: ["buttonText", "disabled", "contentConfig"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i1$2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "component", type: DbxScheduleSelectionCalendarDateRangeComponent, selector: "dbx-schedule-selection-calendar-date-range", inputs: ["openPickerOnTextClick", "label", "hint", "disabled", "showCustomize", "required"] }, { kind: "component", type: DbxScheduleSelectionCalendarDateDialogButtonComponent, selector: "dbx-schedule-selection-calendar-date-dialog-button", inputs: ["buttonText", "disabled", "contentConfig"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormCalendarDateScheduleRangeFieldComponent, decorators: [{
             type: Component,
@@ -1732,9 +1710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
   `,
                     providers: [provideCalendarScheduleSelectionStoreIfParentIsUnavailable()]
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.CompactContextStore, decorators: [{
-                    type: Optional
-                }] }, { type: DbxCalendarScheduleSelectionStore }, { type: i0.NgZone }]; } });
+        }] });
 
 const declarations = [
     //
@@ -1752,8 +1728,8 @@ const declarations = [
     DbxScheduleSelectionCalendarSelectionToggleButtonComponent
 ];
 class DbxFormCalendarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormCalendarModule, declarations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormCalendarModule, declarations: [
             //
             DbxScheduleSelectionCalendarComponent,
             DbxScheduleSelectionCalendarDateDaysComponent,
@@ -1803,8 +1779,8 @@ class DbxFormCalendarModule {
             DbxCalendarScheduleSelectionStoreInjectionBlockDirective,
             DbxScheduleSelectionCalendarDateDialogComponent,
             DbxScheduleSelectionCalendarDateDialogButtonComponent,
-            DbxScheduleSelectionCalendarSelectionToggleButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormCalendarModule, imports: [
+            DbxScheduleSelectionCalendarSelectionToggleButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormCalendarModule, imports: [
             //
             DbxInjectionComponentModule,
             DbxContentLayoutModule,
@@ -1828,7 +1804,7 @@ class DbxFormCalendarModule {
             CalendarDayModule,
             FlexLayoutModule,
             CalendarWeekModule,
-            DbxDatePipeModule] }); }
+            DbxDatePipeModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormCalendarModule, decorators: [{
             type: NgModule,
@@ -1865,8 +1841,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class DbxFormDateScheduleRangeFieldModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, declarations: [DbxFormCalendarDateScheduleRangeFieldComponent], imports: [DbxInjectionComponentModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, declarations: [DbxFormCalendarDateScheduleRangeFieldComponent], imports: [DbxInjectionComponentModule,
             CommonModule,
             MatIconModule,
             DbxFormCalendarModule,
@@ -1874,8 +1850,8 @@ class DbxFormDateScheduleRangeFieldModule {
             DbxTextModule,
             FormsModule,
             ReactiveFormsModule,
-            MatInputModule, i1$3.FormlyModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, imports: [DbxInjectionComponentModule,
+            MatInputModule, i1$3.FormlyModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, imports: [DbxInjectionComponentModule,
             CommonModule,
             MatIconModule,
             DbxFormCalendarModule,
@@ -1886,7 +1862,7 @@ class DbxFormDateScheduleRangeFieldModule {
             MatInputModule,
             FormlyModule.forChild({
                 types: [{ name: 'date-schedule-range', component: DbxFormCalendarDateScheduleRangeFieldComponent }]
-            })] }); }
+            })] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, decorators: [{
             type: NgModule,