@dereekb/dbx-form 9.23.17 → 9.23.18

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

@@ -1,14 +1,14 @@
-import * as i4 from '@dereekb/dbx-form';
+import * as i4$1 from '@dereekb/dbx-form';
 import { formlyField, propsAndConfigForFieldConfig, flexLayoutWrapper, toggleField, AbstractSyncFormlyFormDirective, provideFormlyContext, DbxFormModule, DbxFormlyModule } from '@dereekb/dbx-form';
 import * as i0 from '@angular/core';
 import { Injectable, SkipSelf, Directive, Injector, Optional, Component, Inject, Input, ElementRef, ViewChild, ChangeDetectionStrategy, EventEmitter, Output, NgModule } from '@angular/core';
 import { FieldType } from '@ngx-formly/material';
 import { switchMap, first, tap, map, distinctUntilChanged, shareReplay, BehaviorSubject, of, startWith, filter, throttleTime } from 'rxjs';
 import { filterMaybe, SubscriptionObject, asObservable } from '@dereekb/rxjs';
-import { DateScheduleDayCode, expandDateScheduleDayCodesToDayOfWeekSet, dateTimingRelativeIndexFactory, dateBlockDayOfWeekFactory, findMaxDate, findMinDate, isSameDate, isSameDateRange, isSameDateScheduleRange, isSameDateDay, dateTimingRelativeIndexArrayFactory, copyDateScheduleDateFilterConfig, dateScheduleDateFilter, expandDateScheduleDayCodes, isDateInDateRangeFunction, isDateWithinDateBlockRangeFunction, dateScheduleEncodedWeek, dateBlockTimingDateFactory, enabledDaysFromDateScheduleDayCodes, dateScheduleDayCodesFromEnabledDays, formatToMonthDayString } from '@dereekb/date';
+import { DateScheduleDayCode, expandDateScheduleDayCodesToDayOfWeekSet, dateTimingRelativeIndexFactory, dateBlockDayOfWeekFactory, findMaxDate, findMinDate, isSameDateRange, isSameDateDay, isSameDate, isSameDateScheduleRange, dateTimingRelativeIndexArrayFactory, isInfiniteDateRange, copyDateScheduleDateFilterConfig, dateScheduleDateFilter, expandDateScheduleDayCodes, isDateInDateRangeFunction, isDateWithinDateBlockRangeFunction, dateScheduleEncodedWeek, dateBlockTimingDateFactory, enabledDaysFromDateScheduleDayCodes, dateScheduleDayCodesFromEnabledDays, formatToMonthDayString } from '@dereekb/date';
 import { setsAreEquivalent, unique, mergeArrays, iterableToArray, toggleInSet, addToSet, isIndexNumberInIndexRangeFunction, range, minAndMaxNumber, randomNumberFactory, getDaysOfWeekNames } from '@dereekb/util';
 import { ComponentStore } from '@ngrx/component-store';
-import { startOfDay } from 'date-fns';
+import { startOfDay, endOfDay } from 'date-fns';
 import * as i1$1 from '@dereekb/dbx-web';
 import { AbstractPopoverDirective, AbstractDialogDirective, DbxActionModule, DbxButtonModule, DbxDialogInteractionModule, DbxPopoverInteractionModule, DbxTextModule } from '@dereekb/dbx-web';
 import * as i3 from '@angular/forms';
@@ -17,14 +17,15 @@ import * as i5 from '@angular/material/form-field';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule } from '@angular/material/form-field';
 import * as i1 from '@dereekb/dbx-web/calendar';
 import { prepareAndSortCalendarEvents, DbxCalendarStore, DbxCalendarModule } from '@dereekb/dbx-web/calendar';
-import * as i3$1 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i7 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i5$1 from 'angular-calendar';
+import * as i3$1 from '@dereekb/dbx-core';
+import { switchMapDbxInjectionComponentConfig, DbxInjectionComponentModule } from '@dereekb/dbx-core';
+import * as i6 from 'angular-calendar';
 import { CalendarModule, CalendarDayModule, CalendarWeekModule } from 'angular-calendar';
-import * as i3$2 from '@dereekb/dbx-core';
-import * as i3$3 from '@angular/material/icon';
+import * as i3$2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i1$2 from '@angular/material/dialog';
 import * as i2 from '@angular/material/button';
@@ -37,9 +38,10 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 
 function dateScheduleRangeField(config = {}) {
     var _a;
-    const { key = 'schedule', filter, initialSelectionState, computeSelectionResultRelativeToFilter, exclusions } = config;
+    const { key = 'schedule', filter, initialSelectionState, computeSelectionResultRelativeToFilter, exclusions, minMaxDateRange } = config;
     const fieldConfig = Object.assign({}, formlyField(Object.assign({ key, type: 'date-schedule-range' }, propsAndConfigForFieldConfig(config, {
         label: (_a = config.label) !== null && _a !== void 0 ? _a : 'Schedule',
+        minMaxDateRange,
         filter,
         computeSelectionResultRelativeToFilter,
         initialSelectionState,
@@ -94,24 +96,22 @@ function initialCalendarScheduleSelectionState() {
         indexDayOfWeek,
         isEnabledFilterDay: () => true,
         isEnabledDay: () => false,
-        minDate: null,
-        maxDate: null,
         computeSelectionResultRelativeToFilter: true,
         cellContentFactory: defaultCalendarScheduleSelectionCellContentFactory
     };
 }
 function calendarScheduleMinDate(x) {
-    var _a;
-    return findMaxDate([(_a = x.filter) === null || _a === void 0 ? void 0 : _a.start, x.minDate]);
+    var _a, _b;
+    return findMaxDate([(_a = x.filter) === null || _a === void 0 ? void 0 : _a.start, (_b = x.minMaxDateRange) === null || _b === void 0 ? void 0 : _b.start]);
 }
 function calendarScheduleMaxDate(x) {
-    var _a;
-    return findMinDate([(_a = x.filter) === null || _a === void 0 ? void 0 : _a.end, x.maxDate]);
+    var _a, _b;
+    return findMinDate([(_a = x.filter) === null || _a === void 0 ? void 0 : _a.end, (_b = x.minMaxDateRange) === null || _b === void 0 ? void 0 : _b.end]);
 }
-function calendarScheduleMinAndMaxDate(x) {
+function calendarScheduleMinAndMaxDateRange(x) {
     return {
-        minDate: calendarScheduleMinDate(x),
-        maxDate: calendarScheduleMaxDate(x)
+        start: calendarScheduleMinDate(x) || undefined,
+        end: calendarScheduleMaxDate(x) || undefined
     };
 }
 class DbxCalendarScheduleSelectionStore extends ComponentStore {
@@ -125,7 +125,10 @@ class DbxCalendarScheduleSelectionStore extends ComponentStore {
         });
         // MARK: Accessors
         this.filter$ = this.state$.pipe(map((x) => x.filter), distinctUntilChanged(), shareReplay(1));
-        this.hasConfiguredMinMaxRange$ = this.state$.pipe(map((x) => Boolean(x.minDate && x.maxDate) || Boolean(x.filter && x.filter.start && x.filter.end)), distinctUntilChanged(), shareReplay(1));
+        this.minMaxDateRange$ = this.state$.pipe(map(calendarScheduleMinAndMaxDateRange), distinctUntilChanged(isSameDateRange), shareReplay(1));
+        this.minDate$ = this.minMaxDateRange$.pipe(map((x) => x === null || x === void 0 ? void 0 : x.start), distinctUntilChanged(isSameDateDay), shareReplay(1));
+        this.maxDate$ = this.minMaxDateRange$.pipe(map((x) => x === null || x === void 0 ? void 0 : 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 }) => ({ inputStart, inputEnd })), distinctUntilChanged((a, b) => isSameDate(a.inputStart, b.inputStart) && isSameDate(a.inputEnd, b.inputEnd)), map((x) => {
@@ -159,11 +162,10 @@ class DbxCalendarScheduleSelectionStore extends ComponentStore {
         this.selectionValue$ = this.currentSelectionValue$.pipe(filterMaybe(), shareReplay(1));
         this.currentDateScheduleRangeValue$ = this.currentSelectionValue$.pipe(map((x) => x === null || x === void 0 ? void 0 : x.dateScheduleRange), distinctUntilChanged(isSameDateScheduleRange), shareReplay(1));
         this.dateScheduleRangeValue$ = this.currentDateScheduleRangeValue$.pipe(filterMaybe(), shareReplay(1));
-        this.minDate$ = this.state$.pipe(map(calendarScheduleMinDate), distinctUntilChanged(isSameDateDay), shareReplay(1));
-        this.maxDate$ = this.state$.pipe(map(calendarScheduleMaxDate), distinctUntilChanged(isSameDateDay), shareReplay(1));
         this.cellContentFactory$ = this.state$.pipe(map((x) => x.cellContentFactory), distinctUntilChanged(), shareReplay(1));
         this.isCustomized$ = this.state$.pipe(map((x) => x.selectedIndexes.size > 0), distinctUntilChanged(), shareReplay(1));
         // MARK: State Changes
+        this.setMinMaxDateRange = this.updater((state, filter) => updateStateWithMinMaxDateRange(state, filter));
         this.setFilter = this.updater((state, filter) => updateStateWithFilter(state, filter));
         this.setExclusions = this.updater((state, exclusions) => updateStateWithExclusions(state, exclusions));
         this.setComputeSelectionResultRelativeToFilter = this.updater((state, computeSelectionResultRelativeToFilter) => updateStateWithComputeSelectionResultRelativeToFilter(state, computeSelectionResultRelativeToFilter));
@@ -211,11 +213,26 @@ function updateStateWithExclusions(state, inputExclusions) {
     state = Object.assign(Object.assign({}, state), { inputExclusions, computedExclusions });
     return updateStateWithFilter(state, state.filter);
 }
+function updateStateWithMinMaxDateRange(state, minMaxDateRange) {
+    state = Object.assign({}, state);
+    if (minMaxDateRange != null && !isInfiniteDateRange(minMaxDateRange)) {
+        state.minMaxDateRange = {
+            start: minMaxDateRange.start != null ? startOfDay(minMaxDateRange.start) : undefined,
+            end: minMaxDateRange.end != null ? endOfDay(minMaxDateRange.end) : undefined
+        };
+    }
+    else {
+        delete state.minMaxDateRange;
+    }
+    return updateStateWithFilter(state, state.filter);
+}
 function updateStateWithFilter(state, inputFilter) {
-    const { computedExclusions: exclusions } = state;
+    var _a;
+    const { computedExclusions: exclusions, minMaxDateRange } = state;
     let isEnabledFilterDay = () => true;
     let filter = null;
-    if (inputFilter || (exclusions === null || exclusions === void 0 ? void 0 : exclusions.length)) {
+    // create the filter using inputFilter, exclusions, and minMaxDateRange
+    if (inputFilter || (exclusions === null || exclusions === void 0 ? void 0 : exclusions.length) || minMaxDateRange) {
         let enabledFilter;
         if (inputFilter) {
             filter = copyDateScheduleDateFilterConfig(inputFilter); // copy filter
@@ -232,10 +249,20 @@ function updateStateWithFilter(state, inputFilter) {
                 ex: exclusions
             };
         }
+        if (minMaxDateRange) {
+            enabledFilter.minMaxDateRange = minMaxDateRange;
+            enabledFilter.setStartAsMinDate = false;
+        }
+        /**
+         * If the input filter has a start date, use that as the relative start to ensure indexes are compared the same,
+         * otherwise use the state's start. This is important for the index calculations.
+         */
+        enabledFilter.start = (_a = inputFilter === null || inputFilter === void 0 ? void 0 : inputFilter.start) !== null && _a !== void 0 ? _a : state.start;
+        // create the filter
         isEnabledFilterDay = dateScheduleDateFilter(enabledFilter);
     }
     state = Object.assign(Object.assign({}, state), { filter, isEnabledFilterDay });
-    // If the input filter has a start date, use that as the relative start to ensure indexes are compared the same.
+    // For the same reason as above, use the filter's start date as the relative start if applicable.
     if (filter && filter.start) {
         const start = filter.start;
         state.start = start;
@@ -283,8 +310,8 @@ function updateStateWithChangedScheduleDays(state, change) {
 }
 function updateStateWithChangedDates(state, change) {
     var _a;
-    const { indexFactory, allowedDaysOfWeek, indexDayOfWeek, inputStart: currentInputStart, inputEnd: currentInputEnd } = state;
-    const { minDate, maxDate } = calendarScheduleMinAndMaxDate(state);
+    const { indexFactory, allowedDaysOfWeek, indexDayOfWeek, inputStart: currentInputStart, inputEnd: currentInputEnd, minMaxDateRange } = state;
+    const { start: minDate, end: maxDate } = calendarScheduleMinAndMaxDateRange(state);
     let inputStart = currentInputStart;
     let inputEnd = currentInputEnd;
     let selectedIndexes;
@@ -338,9 +365,10 @@ function noSelectionCalendarScheduleSelectionState(state) {
     return finalizeNewCalendarScheduleSelectionState(Object.assign(Object.assign({}, state), { selectedIndexes: new Set(), inputStart: null, inputEnd: null }));
 }
 function updateStateWithChangedRange(state, change) {
-    const { inputStart: currentInputStart, inputEnd: currentInputEnd, indexFactory, minDate, maxDate } = state;
+    const { inputStart: currentInputStart, inputEnd: currentInputEnd, indexFactory, minMaxDateRange } = state;
+    const { start: minDate, end: maxDate } = minMaxDateRange !== null && minMaxDateRange !== void 0 ? minMaxDateRange : {};
     let inputStart = startOfDay(change.inputStart);
-    let inputEnd = startOfDay(change.inputEnd);
+    let inputEnd = endOfDay(change.inputEnd);
     const isValidRange = minDate != null || maxDate != null ? isDateInDateRangeFunction({ start: minDate !== null && minDate !== void 0 ? minDate : undefined, end: maxDate !== null && maxDate !== void 0 ? maxDate : undefined }) : () => true;
     if (!isValidRange(inputStart) || !isValidRange(inputEnd) || (isSameDateDay(inputStart, currentInputStart) && isSameDateDay(inputEnd, currentInputEnd))) {
         return state; // if no change, return the current state.
@@ -606,7 +634,7 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
     }
 }
 DbxScheduleSelectionCalendarDateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateRangeComponent, deps: [{ token: i1.DbxCalendarStore }, { token: DbxCalendarScheduleSelectionStore }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
-DbxScheduleSelectionCalendarDateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxScheduleSelectionCalendarDateRangeComponent, selector: "dbx-schedule-selection-calendar-date-range", inputs: { required: "required", label: "label", hint: "hint", disabled: "disabled", showCustomize: "showCustomize" }, ngImport: i0, template: "<mat-form-field class=\"dbx-schedule-selection-calendar-date-range-field\">\n  <mat-label *ngIf=\"label\">{{ label }}</mat-label>\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 matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <dbx-button-spacer></dbx-button-spacer>\n  <mat-date-range-input [required]=\"required\" [min]=\"minDate$ | async\" [max]=\"maxDate$ | async\" [formGroup]=\"range\" [rangePicker]=\"picker\">\n    <input matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n    <input matEndDate formControlName=\"end\" placeholder=\"End date\" />\n  </mat-date-range-input>\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  <mat-error *ngIf=\"range.controls.start.hasError('matStartDateInvalid')\">Invalid start date</mat-error>\n  <mat-error *ngIf=\"range.controls.end.hasError('matEndDateInvalid')\">Invalid end date</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: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { 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: i3$1.AsyncPipe, name: "async" }] });
+DbxScheduleSelectionCalendarDateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxScheduleSelectionCalendarDateRangeComponent, selector: "dbx-schedule-selection-calendar-date-range", inputs: { required: "required", label: "label", hint: "hint", disabled: "disabled", showCustomize: "showCustomize" }, ngImport: i0, template: "<mat-form-field class=\"dbx-schedule-selection-calendar-date-range-field\">\n  <mat-label *ngIf=\"label\">{{ label }}</mat-label>\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 matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <dbx-button-spacer></dbx-button-spacer>\n  <mat-date-range-input [required]=\"required\" [min]=\"minDate$ | async\" [max]=\"maxDate$ | async\" [formGroup]=\"range\" [rangePicker]=\"picker\">\n    <input matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n    <input matEndDate formControlName=\"end\" placeholder=\"End date\" />\n  </mat-date-range-input>\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  <mat-error *ngIf=\"range.controls.start.hasError('matStartDateInvalid')\">Invalid start date</mat-error>\n  <mat-error *ngIf=\"range.controls.end.hasError('matEndDateInvalid')\">Invalid end date</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: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { 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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.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 *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 matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <dbx-button-spacer></dbx-button-spacer>\n  <mat-date-range-input [required]=\"required\" [min]=\"minDate$ | async\" [max]=\"maxDate$ | async\" [formGroup]=\"range\" [rangePicker]=\"picker\">\n    <input matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n    <input matEndDate formControlName=\"end\" placeholder=\"End date\" />\n  </mat-date-range-input>\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  <mat-error *ngIf=\"range.controls.start.hasError('matStartDateInvalid')\">Invalid start date</mat-error>\n  <mat-error *ngIf=\"range.controls.end.hasError('matEndDateInvalid')\">Invalid end date</mat-error>\n  <mat-hint>{{ hint }}</mat-hint>\n</mat-form-field>\n" }]
@@ -649,7 +677,7 @@ class DbxScheduleSelectionCalendarDateDaysFormComponent extends AbstractSyncForm
 DbxScheduleSelectionCalendarDateDaysFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 DbxScheduleSelectionCalendarDateDaysFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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.DbxFormlyFormComponent, selector: "dbx-formly", exportAs: ["formly"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: i4$1.DbxFormlyFormComponent, selector: "dbx-formly", exportAs: ["formly"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysFormComponent, decorators: [{
             type: Component,
             args: [{
@@ -681,7 +709,7 @@ DbxScheduleSelectionCalendarDateDaysComponent.ɵcmp = i0.ɵɵngDeclareComponent(
     <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$2.DbxActionDirective, selector: "dbx-action,[dbxAction],dbx-action-context,[dbxActionContext]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i3$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i3$2.DbxActionEnforceModifiedDirective, selector: "[dbxActionEnforceModified]", inputs: ["dbxActionEnforceModified"] }, { kind: "directive", type: i3$2.DbxActionAutoTriggerDirective, selector: "dbxActionAutoTrigger, [dbxActionAutoTrigger]", inputs: ["dbxActionAutoTrigger", "triggerDebounce", "triggerThrottle", "triggerErrorThrottle", "fastTrigger", "instantTrigger", "triggerLimit"] }, { kind: "directive", type: i4.DbxActionFormDirective, selector: "[dbxActionForm]", inputs: ["dbxActionFormValidator", "dbxActionFormModified", "formDisabledOnWorking"] }, { kind: "directive", type: i4.DbxFormSourceDirective, selector: "[dbxFormSource]", inputs: ["dbxFormSourceMode", "dbxFormSource"] }, { kind: "component", type: DbxScheduleSelectionCalendarDateDaysFormComponent, selector: "dbx-schedule-selection-calendar-date-days-form" }] });
+  `, 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", "formDisabledOnWorking"] }, { kind: "directive", type: i4$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: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysComponent, decorators: [{
             type: Component,
             args: [{
@@ -695,7 +723,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.DbxCalendarStore }, { type: DbxCalendarScheduleSelectionStore }]; } });
 
 class DbxScheduleSelectionCalendarDatePopoverContentComponent {
-    ngOnDestroy() { }
 }
 DbxScheduleSelectionCalendarDatePopoverContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 DbxScheduleSelectionCalendarDatePopoverContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxScheduleSelectionCalendarDatePopoverContentComponent, selector: "dbx-schedule-selection-calendar-date-popover-content", ngImport: i0, template: `
@@ -732,7 +759,7 @@ DbxScheduleSelectionCalendarDatePopoverComponent.ɵfac = i0.ɵɵngDeclareFactory
 DbxScheduleSelectionCalendarDatePopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxScheduleSelectionCalendarDatePopoverComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <dbx-popover-content>
       <dbx-popover-scroll-content>
-        <dbx-schedule-selection-calendar-date-popover-content (close)="close()"></dbx-schedule-selection-calendar-date-popover-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" }] });
@@ -742,7 +769,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     template: `
     <dbx-popover-content>
       <dbx-popover-scroll-content>
-        <dbx-schedule-selection-calendar-date-popover-content (close)="close()"></dbx-schedule-selection-calendar-date-popover-content>
+        <dbx-schedule-selection-calendar-date-popover-content></dbx-schedule-selection-calendar-date-popover-content>
       </dbx-popover-scroll-content>
     </dbx-popover-content>
   `
@@ -770,7 +797,7 @@ class DbxScheduleSelectionCalendarDatePopoverButtonComponent {
 DbxScheduleSelectionCalendarDatePopoverButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, deps: [{ token: i1$1.DbxPopoverService }, { token: DbxCalendarScheduleSelectionStore }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
 DbxScheduleSelectionCalendarDatePopoverButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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" [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", "raised", "stroked", "flat", "iconOnly", "color", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxButtonComponent, selector: "dbx-button", inputs: ["type", "raised", "stroked", "flat", "iconOnly", "color", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -805,7 +832,7 @@ DbxScheduleSelectionCalendarCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minV
 DbxScheduleSelectionCalendarCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -859,7 +886,7 @@ class DbxScheduleSelectionCalendarSelectionToggleButtonComponent {
 DbxScheduleSelectionCalendarSelectionToggleButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, deps: [{ token: i1$1.DbxPopoverService }, { token: DbxCalendarScheduleSelectionStore }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
 DbxScheduleSelectionCalendarSelectionToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, selector: "dbx-schedule-selection-calendar-selection-toggle-button", 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", "raised", "stroked", "flat", "iconOnly", "color", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxButtonComponent, selector: "dbx-button", inputs: ["type", "raised", "stroked", "flat", "iconOnly", "color", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -874,6 +901,9 @@ class DbxScheduleSelectionCalendarComponent {
     constructor(calendarStore, dbxCalendarScheduleSelectionStore) {
         this.calendarStore = calendarStore;
         this.dbxCalendarScheduleSelectionStore = dbxCalendarScheduleSelectionStore;
+        this._config = new BehaviorSubject({});
+        this.showClearSelectionButton$ = this._config.pipe(map((config) => { var _a; return (_a = config.showClearSelectionButton) !== null && _a !== void 0 ? _a : true; }), distinctUntilChanged());
+        this.datePopoverButtonInjectionConfig$ = this._config.pipe(map((x) => x.buttonInjectionConfig), switchMapDbxInjectionComponentConfig(DbxScheduleSelectionCalendarDatePopoverButtonComponent), shareReplay(1));
         this.clickEvent = new EventEmitter();
         // refresh any time the selected day function updates
         this.state$ = this.dbxCalendarScheduleSelectionStore.state$;
@@ -881,6 +911,20 @@ class DbxScheduleSelectionCalendarComponent {
         this.events$ = this.calendarStore.visibleEvents$.pipe(map(prepareAndSortCalendarEvents), shareReplay(1));
         this.viewDate$ = this.calendarStore.date$;
     }
+    ngOnInit() {
+        this.calendarStore.setNavigationRangeLimit(this.dbxCalendarScheduleSelectionStore.minMaxDateRange$); // set navigation limit to the min/max allowed dates.
+        this.calendarStore.setShowPageButtons(true);
+    }
+    ngOnDestroy() {
+        this.clickEvent.complete();
+        this._config.complete();
+    }
+    get config() {
+        return this._config.value;
+    }
+    set config(config) {
+        this._config.next(config);
+    }
     dayClicked({ date }) {
         this.dbxCalendarScheduleSelectionStore.toggleSelectedDates(date);
     }
@@ -918,17 +962,16 @@ class DbxScheduleSelectionCalendarComponent {
             });
         });
     }
-    ngOnDestroy() {
-        this.clickEvent.complete();
-    }
 }
 DbxScheduleSelectionCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarComponent, deps: [{ token: i1.DbxCalendarStore }, { token: DbxCalendarScheduleSelectionStore }], target: i0.ɵɵFactoryTarget.Component });
-DbxScheduleSelectionCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxScheduleSelectionCalendarComponent, selector: "dbx-schedule-selection-calendar", outputs: { clickEvent: "clickEvent" }, providers: [DbxCalendarStore], ngImport: i0, template: "<dbx-calendar-base class=\"dbx-schedule-selection-calendar\">\n  <ng-container controls>\n    <dbx-schedule-selection-calendar-selection-toggle-button></dbx-schedule-selection-calendar-selection-toggle-button>\n    <dbx-button-spacer></dbx-button-spacer>\n    <dbx-schedule-selection-calendar-date-popover-button></dbx-schedule-selection-calendar-date-popover-button>\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.DbxCalendarBaseComponent, selector: "dbx-calendar-base" }, { kind: "directive", type: i3$1.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: "component", type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, selector: "dbx-schedule-selection-calendar-date-popover-button" }, { kind: "component", type: DbxScheduleSelectionCalendarCellComponent, selector: "dbx-schedule-selection-calendar-cell", inputs: ["day"] }, { kind: "component", type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, selector: "dbx-schedule-selection-calendar-selection-toggle-button" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.ɵCalendarDatePipe, name: "calendarDate" }] });
+DbxScheduleSelectionCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxScheduleSelectionCalendarComponent, selector: "dbx-schedule-selection-calendar", inputs: { config: "config" }, outputs: { clickEvent: "clickEvent" }, providers: [DbxCalendarStore], ngImport: i0, template: "<dbx-calendar-base class=\"dbx-schedule-selection-calendar\">\n  <ng-container controls>\n    <ng-container *ngIf=\"showClearSelectionButton$ | async\">\n      <dbx-schedule-selection-calendar-selection-toggle-button></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.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: "component", type: DbxScheduleSelectionCalendarCellComponent, selector: "dbx-schedule-selection-calendar-cell", inputs: ["day"] }, { kind: "component", type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, selector: "dbx-schedule-selection-calendar-selection-toggle-button" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.ɵCalendarDatePipe, name: "calendarDate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.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\">\n  <ng-container controls>\n    <dbx-schedule-selection-calendar-selection-toggle-button></dbx-schedule-selection-calendar-selection-toggle-button>\n    <dbx-button-spacer></dbx-button-spacer>\n    <dbx-schedule-selection-calendar-date-popover-button></dbx-schedule-selection-calendar-date-popover-button>\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" }]
+            args: [{ selector: 'dbx-schedule-selection-calendar', providers: [DbxCalendarStore], template: "<dbx-calendar-base class=\"dbx-schedule-selection-calendar\">\n  <ng-container controls>\n    <ng-container *ngIf=\"showClearSelectionButton$ | async\">\n      <dbx-schedule-selection-calendar-selection-toggle-button></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: [{
                 type: Output
+            }], config: [{
+                type: Input
             }] } });
 
 class DbxScheduleSelectionCalendarDateDialogComponent extends AbstractDialogDirective {
@@ -949,7 +992,7 @@ DbxScheduleSelectionCalendarDateDialogComponent.ɵcmp = i0.ɵɵngDeclareComponen
       <dbx-schedule-selection-calendar></dbx-schedule-selection-calendar>
       <dbx-dialog-content-footer closeText="Close Calendar" (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"], outputs: ["close"] }, { kind: "component", type: i1$1.DbxDialogContentCloseComponent, selector: "dbx-dialog-content-close", outputs: ["close"] }, { kind: "component", type: DbxScheduleSelectionCalendarComponent, selector: "dbx-schedule-selection-calendar", 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"], outputs: ["close"] }, { kind: "component", type: i1$1.DbxDialogContentCloseComponent, selector: "dbx-dialog-content-close", outputs: ["close"] }, { kind: "component", type: DbxScheduleSelectionCalendarComponent, selector: "dbx-schedule-selection-calendar", inputs: ["config"], outputs: ["clickEvent"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -997,6 +1040,7 @@ class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
         this.ngZone = ngZone;
         this._syncSub = new SubscriptionObject();
         this._valueSub = new SubscriptionObject();
+        this._minMaxDateRangeSub = new SubscriptionObject();
         this._filterSub = new SubscriptionObject();
         this._exclusionsSub = new SubscriptionObject();
         this._formControlObs = new BehaviorSubject(undefined);
@@ -1022,6 +1066,9 @@ class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
     get showCustomize() {
         return !this.props.hideCustomize;
     }
+    get minMaxDateRange() {
+        return this.props.minMaxDateRange;
+    }
     get filter() {
         return this.props.filter;
     }
@@ -1042,10 +1089,13 @@ class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
         this._valueSub.subscription = this.dbxCalendarScheduleSelectionStore.currentDateScheduleRangeValue$.subscribe((x) => {
             this.formControl.setValue(x);
         });
-        const { filter, exclusions } = this;
+        const { minMaxDateRange, filter, exclusions } = this;
         if (filter != null) {
             this._filterSub.subscription = this.dbxCalendarScheduleSelectionStore.setFilter(asObservable(filter));
         }
+        if (minMaxDateRange != null) {
+            this._minMaxDateRangeSub.subscription = this.dbxCalendarScheduleSelectionStore.setMinMaxDateRange(asObservable(minMaxDateRange));
+        }
         if (exclusions != null) {
             this._exclusionsSub.subscription = this.dbxCalendarScheduleSelectionStore.setExclusions(asObservable(exclusions));
         }
@@ -1055,13 +1105,13 @@ class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
         if (this.computeSelectionResultRelativeToFilter != null) {
             this.dbxCalendarScheduleSelectionStore.setComputeSelectionResultRelativeToFilter(this.computeSelectionResultRelativeToFilter);
         }
-        // TODO: Also add ability to set min/max dates independent of the filter
     }
     ngOnDestroy() {
         super.ngOnDestroy();
         this._syncSub.destroy();
         this._valueSub.destroy();
         this._filterSub.destroy();
+        this._minMaxDateRangeSub.destroy();
         this._exclusionsSub.destroy();
         this._formControlObs.complete();
     }
@@ -1126,6 +1176,7 @@ DbxFormCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         DbxScheduleSelectionCalendarSelectionToggleButtonComponent
     ], imports: [
         //
+        DbxInjectionComponentModule,
         DbxActionModule,
         DbxFormModule,
         DbxFormlyModule,
@@ -1162,6 +1213,7 @@ DbxFormCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
     ] });
 DbxFormCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormCalendarModule, imports: [
         //
+        DbxInjectionComponentModule,
         DbxActionModule,
         DbxFormModule,
         DbxFormlyModule,
@@ -1187,6 +1239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             args: [{
                     imports: [
                         //
+                        DbxInjectionComponentModule,
                         DbxActionModule,
                         DbxFormModule,
                         DbxFormlyModule,
@@ -1260,5 +1313,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CalendarScheduleSelectionDayState, DEFAULT_SCHEDULE_SELECTION_CALENDAR_DATE_POPOVER_KEY, DbxCalendarScheduleSelectionStore, DbxCalendarScheduleSelectionStoreInjectionBlockDirective, DbxCalendarScheduleSelectionStoreProviderBlock, DbxFormCalendarDateScheduleRangeFieldComponent, DbxFormCalendarModule, DbxFormDateScheduleRangeFieldModule, DbxScheduleSelectionCalendarCellComponent, DbxScheduleSelectionCalendarComponent, DbxScheduleSelectionCalendarDateDaysComponent, DbxScheduleSelectionCalendarDateDaysFormComponent, DbxScheduleSelectionCalendarDateDialogButtonComponent, DbxScheduleSelectionCalendarDateDialogComponent, DbxScheduleSelectionCalendarDatePopoverButtonComponent, DbxScheduleSelectionCalendarDatePopoverComponent, DbxScheduleSelectionCalendarDatePopoverContentComponent, DbxScheduleSelectionCalendarDateRangeComponent, DbxScheduleSelectionCalendarSelectionToggleButtonComponent, calendarScheduleMaxDate, calendarScheduleMinAndMaxDate, calendarScheduleMinDate, computeCalendarScheduleSelectionDateBlockRange, computeCalendarScheduleSelectionRange, computeScheduleSelectionRangeAndExclusion, computeScheduleSelectionValue, dateScheduleRangeField, dbxScheduleSelectionCalendarDateDaysFormDayFields, dbxScheduleSelectionCalendarDateDaysFormFields, defaultCalendarScheduleSelectionCellContentFactory, finalizeNewCalendarScheduleSelectionState, initialCalendarScheduleSelectionState, isEnabledDayInCalendarScheduleSelectionState, noSelectionCalendarScheduleSelectionState, provideCalendarScheduleSelectionStoreIfParentIsUnavailable, updateStateWithChangedDates, updateStateWithChangedRange, updateStateWithChangedScheduleDays, updateStateWithComputeSelectionResultRelativeToFilter, updateStateWithDateScheduleRangeValue, updateStateWithExclusions, updateStateWithFilter, updateStateWithInitialSelectionState };
+export { CalendarScheduleSelectionDayState, DEFAULT_SCHEDULE_SELECTION_CALENDAR_DATE_POPOVER_KEY, DbxCalendarScheduleSelectionStore, DbxCalendarScheduleSelectionStoreInjectionBlockDirective, DbxCalendarScheduleSelectionStoreProviderBlock, DbxFormCalendarDateScheduleRangeFieldComponent, DbxFormCalendarModule, DbxFormDateScheduleRangeFieldModule, DbxScheduleSelectionCalendarCellComponent, DbxScheduleSelectionCalendarComponent, DbxScheduleSelectionCalendarDateDaysComponent, DbxScheduleSelectionCalendarDateDaysFormComponent, DbxScheduleSelectionCalendarDateDialogButtonComponent, DbxScheduleSelectionCalendarDateDialogComponent, DbxScheduleSelectionCalendarDatePopoverButtonComponent, DbxScheduleSelectionCalendarDatePopoverComponent, DbxScheduleSelectionCalendarDatePopoverContentComponent, DbxScheduleSelectionCalendarDateRangeComponent, DbxScheduleSelectionCalendarSelectionToggleButtonComponent, calendarScheduleMaxDate, calendarScheduleMinAndMaxDateRange, calendarScheduleMinDate, computeCalendarScheduleSelectionDateBlockRange, computeCalendarScheduleSelectionRange, computeScheduleSelectionRangeAndExclusion, computeScheduleSelectionValue, dateScheduleRangeField, dbxScheduleSelectionCalendarDateDaysFormDayFields, dbxScheduleSelectionCalendarDateDaysFormFields, defaultCalendarScheduleSelectionCellContentFactory, finalizeNewCalendarScheduleSelectionState, initialCalendarScheduleSelectionState, isEnabledDayInCalendarScheduleSelectionState, noSelectionCalendarScheduleSelectionState, provideCalendarScheduleSelectionStoreIfParentIsUnavailable, updateStateWithChangedDates, updateStateWithChangedRange, updateStateWithChangedScheduleDays, updateStateWithComputeSelectionResultRelativeToFilter, updateStateWithDateScheduleRangeValue, updateStateWithExclusions, updateStateWithFilter, updateStateWithInitialSelectionState, updateStateWithMinMaxDateRange };
 //# sourceMappingURL=dereekb-dbx-form-calendar.mjs.map