@dereekb/dbx-form 9.24.17 → 9.24.19

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

@@ -1,53 +1,54 @@
 import * as i4$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, DbxActionModule, DbxButtonModule, DbxDialogInteractionModule, DbxPopoverInteractionModule, DbxTextModule } from '@dereekb/dbx-web';
+import { AbstractPopoverDirective, AbstractDialogDirective, sanitizeDbxDialogContentConfig, 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, ElementRef, ViewChild, ChangeDetectionStrategy, EventEmitter, Output, InjectionToken, NgModule } from '@angular/core';
+import { Injectable, SkipSelf, Directive, Injector, Optional, Component, Inject, Input, ViewChild, ElementRef, ChangeDetectionStrategy, EventEmitter, Output, InjectionToken, NgModule } from '@angular/core';
 import { FieldType } from '@ngx-formly/material';
-import { switchMap, first, tap, map, distinctUntilChanged, shareReplay, of, combineLatestWith, BehaviorSubject, startWith, filter, throttleTime, combineLatest } from 'rxjs';
+import { switchMap, first, tap, map, distinctUntilChanged, shareReplay, of, combineLatestWith, BehaviorSubject, filter, startWith, throttleTime, combineLatest } from 'rxjs';
 import { filterMaybe, distinctUntilHasDifferentValues, SubscriptionObject, asObservableFromGetter, asObservable } from '@dereekb/rxjs';
-import { DateScheduleDayCode, expandDateScheduleDayCodesToDayOfWeekSet, dateTimingRelativeIndexFactory, dateBlockDayOfWeekFactory, findMaxDate, findMinDate, isSameDateRange, isSameDateDay, isSameDate, dateBlockTimingDateFactory, expandDateScheduleRange, formatToISO8601DayString, isSameDateScheduleRange, dateTimingRelativeIndexArrayFactory, isInfiniteDateRange, copyDateScheduleDateFilterConfig, dateScheduleDateFilter, dateTimezoneUtcNormal, expandDateScheduleDayCodes, isDateInDateRangeFunction, isDateWithinDateBlockRangeFunction, copyHoursAndMinutesFromDate, dateScheduleEncodedWeek, enabledDaysFromDateScheduleDayCodes, dateScheduleDayCodesFromEnabledDays, formatToMonthDayString, dateRange, DateRangeType } from '@dereekb/date';
-import { setsAreEquivalent, mapValuesToSet, unique, mergeArrays, iterableToArray, range, toggleInSet, removeFromSet, addToSet, isIndexNumberInIndexRangeFunction, minAndMaxNumber, getDaysOfWeekNames, reduceBooleansWithAnd, mergeObjects, KeyValueTypleValueFilter } from '@dereekb/util';
+import { DateScheduleDayCode, expandDateScheduleDayCodesToDayOfWeekSet, dateTimingRelativeIndexFactory, dateBlockDayOfWeekFactory, findMaxDate, findMinDate, isSameDateRange, isSameDateDay, isSameDate, dateBlockTimingDateFactory, expandDateScheduleRange, formatToISO8601DayString, isSameDateScheduleRange, dateTimingRelativeIndexArrayFactory, isInfiniteDateRange, copyDateScheduleDateFilterConfig, dateScheduleDateFilter, dateTimezoneUtcNormal, expandDateScheduleDayCodes, fullWeekDayScheduleDayCodes, dateScheduleDayCodesAreSetsEquivalent, simplifyDateScheduleDayCodes, isDateInDateRangeFunction, isDateWithinDateBlockRangeFunction, copyHoursAndMinutesFromDate, dateScheduleEncodedWeek, enabledDaysFromDateScheduleDayCodes, dateScheduleDayCodesFromEnabledDays, formatToMonthDayString, dateRange, DateRangeType } from '@dereekb/date';
+import { mapValuesToSet, unique, mergeArrays, iterableToArray, range, toggleInSet, removeFromSet, addToSet, isIndexNumberInIndexRangeFunction, minAndMaxNumber, 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 { 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 { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i5 from '@angular/material/form-field';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule } from '@angular/material/form-field';
-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 i3$1 from '@dereekb/dbx-core';
-import { switchMapDbxInjectionComponentConfig, DbxInjectionComponentModule, DbxDatePipeModule } from '@dereekb/dbx-core';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i1$2 from '@angular/material/dialog';
 import * as i6 from 'angular-calendar';
 import { CalendarModule, CalendarDayModule, CalendarWeekModule } from 'angular-calendar';
 import * as i7$1 from '@angular/flex-layout/extended';
 import * as i3$2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i2 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
 import * as i1$3 from '@ngx-formly/core';
 import { FormlyModule } from '@ngx-formly/core';
 import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
 function dateScheduleRangeField(config = {}) {
-    const { key = 'schedule', appearance, hideCustomize, filter, timezone, initialSelectionState, computeSelectionResultRelativeToFilter, exclusions, minMaxDateRange, cellContentFactory, dialogContentConfig, closeDialogConfig } = config;
+    const { key = 'schedule', appearance, hideCustomize, allowTextInput, filter, timezone, initialSelectionState, computeSelectionResultRelativeToFilter, exclusions, defaultScheduleDays, minMaxDateRange, cellContentFactory, dialogContentConfig, closeDialogConfig, customDetailsConfig } = config;
     const fieldConfig = {
         ...formlyField({
             key,
             type: 'date-schedule-range',
             ...propsAndConfigForFieldConfig(config, {
                 label: config.label ?? 'Schedule',
+                allowTextInput,
                 appearance,
                 hideCustomize,
                 timezone,
+                defaultScheduleDays,
                 minMaxDateRange,
                 filter,
                 exclusions,
@@ -55,7 +56,8 @@ function dateScheduleRangeField(config = {}) {
                 closeDialogConfig,
                 computeSelectionResultRelativeToFilter,
                 initialSelectionState,
-                cellContentFactory
+                cellContentFactory,
+                customDetailsConfig
             })
         })
     };
@@ -93,8 +95,8 @@ const defaultCalendarScheduleSelectionCellContentFactory = (day) => {
 };
 
 function initialCalendarScheduleSelectionState() {
-    const scheduleDays = new Set([DateScheduleDayCode.WEEKDAY, DateScheduleDayCode.WEEKEND]);
-    const allowedDaysOfWeek = expandDateScheduleDayCodesToDayOfWeekSet(Array.from(scheduleDays));
+    const defaultScheduleDays = new Set([DateScheduleDayCode.WEEKDAY, DateScheduleDayCode.WEEKEND]);
+    const allowedDaysOfWeek = expandDateScheduleDayCodesToDayOfWeekSet(defaultScheduleDays);
     const start = startOfDay(new Date());
     const indexFactory = dateTimingRelativeIndexFactory({ start });
     const indexDayOfWeek = dateBlockDayOfWeekFactory(start);
@@ -102,7 +104,8 @@ function initialCalendarScheduleSelectionState() {
         start,
         indexFactory,
         toggledIndexes: new Set(),
-        scheduleDays,
+        defaultScheduleDays,
+        effectiveScheduleDays: defaultScheduleDays,
         allowedDaysOfWeek,
         indexDayOfWeek,
         isEnabledFilterDay: () => true,
@@ -164,7 +167,8 @@ class DbxCalendarScheduleSelectionStore extends ComponentStore {
         //
         map(calendarScheduleStartBeingUsedFromFilter), distinctUntilChanged(), shareReplay(1));
         this.dateRange$ = this.currentDateRange$.pipe(filterMaybe(), shareReplay(1));
-        this.scheduleDays$ = this.state$.pipe(map((x) => x.scheduleDays), distinctUntilChanged(setsAreEquivalent), shareReplay(1));
+        this.allowedDaysOfWeek$ = this.state$.pipe(map((x) => x.allowedDaysOfWeek), distinctUntilHasDifferentValues(), shareReplay(1));
+        this.scheduleDays$ = this.state$.pipe(map((x) => x.effectiveScheduleDays), distinctUntilHasDifferentValues(), shareReplay(1));
         this.currentTimezone$ = this.state$.pipe(map((x) => x.timezone), distinctUntilChanged(), shareReplay(1));
         this.effectiveTimezone$ = this.state$.pipe(map((x) => (!calendarScheduleStartBeingUsedFromFilter(x) && x.timezone ? x.timezone : undefined)), distinctUntilChanged(), shareReplay(1));
         this.effectiveTimezoneNormal$ = this.state$.pipe(map((x) => (!calendarScheduleStartBeingUsedFromFilter(x) && x.timezoneNormal ? x.timezoneNormal : undefined)), distinctUntilChanged(), shareReplay(1));
@@ -208,6 +212,7 @@ class DbxCalendarScheduleSelectionStore extends ComponentStore {
         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);
@@ -223,8 +228,9 @@ class DbxCalendarScheduleSelectionStore extends ComponentStore {
         this.setSelectedIndexes = this.updater((state, set) => updateStateWithChangedDates(state, { set, invertSetBehavior: true }));
         this.selectAllDates = this.updater((state, selectAll = 'all') => updateStateWithChangedDates(state, { selectAll }));
         this.setInitialSelectionState = this.updater(updateStateWithInitialSelectionState);
+        this.setDefaultScheduleDays = this.updater(updateStateWithChangedDefaultScheduleDays);
         this.setScheduleDays = this.updater(updateStateWithChangedScheduleDays);
-        this.setAllowAllScheduleDays = this.updater((state) => updateStateWithChangedScheduleDays(state, null));
+        this.setAllowAllScheduleDays = this.updater((state) => updateStateWithChangedScheduleDays(state, [DateScheduleDayCode.WEEKDAY, DateScheduleDayCode.WEEKEND]));
         this.setDateScheduleRangeValue = this.updater((state, value) => updateStateWithDateScheduleRangeValue(state, value));
         this.setCellContentFactory = this.updater((state, cellContentFactory) => ({ ...state, cellContentFactory }));
         /**
@@ -380,20 +386,57 @@ function updateStateWithDateScheduleRangeValue(state, change) {
         }
     }
 }
+function updateStateWithChangedDefaultScheduleDays(state, change) {
+    const { defaultScheduleDays: currentDefaultScheduleDays } = state;
+    const defaultScheduleDays = new Set(change ?? fullWeekDayScheduleDayCodes());
+    if (dateScheduleDayCodesAreSetsEquivalent(defaultScheduleDays, currentDefaultScheduleDays)) {
+        return state; // no change
+    }
+    else {
+        return finalizeUpdateStateWithChangedScheduleDays(state, { ...state, defaultScheduleDays });
+    }
+}
 function updateStateWithChangedScheduleDays(state, change) {
     const { scheduleDays: currentScheduleDays } = state;
-    const scheduleDays = new Set(change || [DateScheduleDayCode.WEEKDAY, DateScheduleDayCode.WEEKEND]);
-    if (setsAreEquivalent(currentScheduleDays, scheduleDays)) {
-        return state; // no change
+    const scheduleDays = new Set(change ?? []);
+    let newScheduleDays;
+    if (currentScheduleDays != null && change != null) {
+        if (dateScheduleDayCodesAreSetsEquivalent(scheduleDays, currentScheduleDays)) {
+            newScheduleDays = undefined; //no change
+        }
+        else {
+            newScheduleDays = scheduleDays;
+        }
+    }
+    else if (currentScheduleDays !== change) {
+        newScheduleDays = change ? scheduleDays : null; // set the new one, or clear it
+    }
+    if (newScheduleDays === undefined) {
+        return state;
     }
     else {
-        const allowedDaysOfWeek = expandDateScheduleDayCodesToDayOfWeekSet(Array.from(scheduleDays));
-        const nextState = { ...state, scheduleDays, allowedDaysOfWeek };
-        return finalizeNewCalendarScheduleSelectionState(nextState);
+        return finalizeUpdateStateWithChangedScheduleDays(state, { ...state, scheduleDays: newScheduleDays ?? undefined });
+    }
+}
+function finalizeUpdateStateWithChangedScheduleDays(previousState, nextState) {
+    const previousScheduleDays = previousState.effectiveScheduleDays;
+    const nextScheduleDays = nextState.scheduleDays ?? nextState.defaultScheduleDays;
+    if (dateScheduleDayCodesAreSetsEquivalent(nextScheduleDays, previousScheduleDays)) {
+        return nextState; // the default or input schedule changed but the schedule is still the same, so no need for an update.
+    }
+    else {
+        const effectiveScheduleDays = new Set(simplifyDateScheduleDayCodes(nextScheduleDays));
+        const allowedDaysOfWeek = expandDateScheduleDayCodesToDayOfWeekSet(nextScheduleDays);
+        return finalizeNewCalendarScheduleSelectionState({
+            ...nextState,
+            // update the effective schedule days and allowed days of week
+            effectiveScheduleDays,
+            allowedDaysOfWeek
+        });
     }
 }
 function updateStateWithChangedDates(state, change) {
-    const { indexFactory, allowedDaysOfWeek, indexDayOfWeek, inputStart: currentInputStart, inputEnd: currentInputEnd, minMaxDateRange, filter } = state;
+    const { allowedDaysOfWeek, indexFactory, indexDayOfWeek, inputStart: currentInputStart, inputEnd: currentInputEnd, minMaxDateRange, filter } = state;
     const { start: minDate, end: maxDate } = calendarScheduleMinAndMaxDateRange(state);
     let inputStart = currentInputStart;
     let inputEnd = currentInputEnd;
@@ -503,7 +546,7 @@ function finalizeNewCalendarScheduleSelectionState(nextState) {
     return nextState;
 }
 function isEnabledDayInCalendarScheduleSelectionState(state) {
-    const { indexFactory, inputStart, inputEnd, indexDayOfWeek, allowedDaysOfWeek } = state;
+    const { allowedDaysOfWeek, indexFactory, inputStart, inputEnd, indexDayOfWeek } = state;
     let isInStartAndEndRange;
     if (inputStart && inputEnd) {
         isInStartAndEndRange = isDateWithinDateBlockRangeFunction({ start: state.start, range: { start: inputStart, end: inputEnd } });
@@ -522,7 +565,7 @@ function isEnabledDayInCalendarScheduleSelectionState(state) {
     };
 }
 function computeScheduleSelectionValue(state) {
-    const { indexFactory, scheduleDays, allowedDaysOfWeek, indexDayOfWeek, computeSelectionResultRelativeToFilter, filter } = state;
+    const { indexFactory, allowedDaysOfWeek, effectiveScheduleDays, indexDayOfWeek, computeSelectionResultRelativeToFilter, filter } = state;
     const rangeAndExclusion = computeScheduleSelectionRangeAndExclusion(state);
     if (rangeAndExclusion == null) {
         return null;
@@ -550,7 +593,7 @@ function computeScheduleSelectionValue(state) {
         : allExcluded;
     const offsetExcluded = excluded.map((x) => x - indexOffset); // set to the proper offset
     const ex = [...filterOffsetExcludedRange, ...offsetExcluded];
-    const w = dateScheduleEncodedWeek(scheduleDays);
+    const w = dateScheduleEncodedWeek(effectiveScheduleDays);
     const d = []; // "included" blocks are never used/calculated.
     // Always ensure the end is after or equal to the start.
     if (isBefore(end, start)) {
@@ -596,7 +639,7 @@ function computeCalendarScheduleSelectionRange(state) {
     return dateRange;
 }
 function computeCalendarScheduleSelectionDateBlockRange(state) {
-    const { indexFactory, inputStart, inputEnd, allowedDaysOfWeek, indexDayOfWeek, isEnabledDay, isEnabledFilterDay } = state;
+    const { allowedDaysOfWeek, indexFactory, inputStart, inputEnd, indexDayOfWeek, isEnabledDay, isEnabledFilterDay } = state;
     const enabledExclusionIndexes = Array.from(state.toggledIndexes).filter((i) => allowedDaysOfWeek.has(indexDayOfWeek(i)));
     const minAndMaxSelectedValues = minAndMaxNumber(enabledExclusionIndexes);
     let startRange;
@@ -696,6 +739,7 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
         this._required = new BehaviorSubject(false);
         this.required$ = this._required.asObservable();
         this.timezone$ = this.dbxCalendarScheduleSelectionStore.currentTimezone$;
+        this.openPickerOnTextClick = true;
         this.label = 'Enter a date range';
         this.showCustomize = false;
         this._pickerOpened = new BehaviorSubject(false);
@@ -722,6 +766,34 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
             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';
+                }
+            }
+            return currentErrorMessage;
+        }), shareReplay(1));
         this.pickerOpened$ = this._pickerOpened.asObservable();
     }
     set disabled(disabled) {
@@ -784,6 +856,11 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
     set required(required) {
         this._required.next(required);
     }
+    clickedDateRangeInput() {
+        if (this.openPickerOnTextClick) {
+            this.picker.open();
+        }
+    }
     pickerOpened() {
         this._pickerOpened.next(true);
     }
@@ -792,14 +869,19 @@ 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: { label: "label", hint: "hint", disabled: "disabled", showCustomize: "showCustomize", required: "required" }, 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$ | async\" [min]=\"minDate$ | async\" [max]=\"maxDate$ | async\" [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-flex-bar 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  <mat-error *ngIf=\"range.hasError('required')\">Date range is required</mat-error>\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-error *ngIf=\"range.controls.start.hasError('matDatepickerMin')\">Start date is too early</mat-error>\n  <mat-error *ngIf=\"range.controls.end.hasError('matDatepickerMin')\">End date is too early.</mat-error>\n  <mat-error *ngIf=\"range.controls.start.hasError('matDatepickerMax')\">Start date is too late.</mat-error>\n  <mat-error *ngIf=\"range.controls.end.hasError('matDatepickerMax')\">End date is too late</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" }, { kind: "pipe", type: i3$1.TimezoneAbbreviationPipe, name: "timezoneAbbreviation" }] });
+DbxScheduleSelectionCalendarDateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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\">\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\" [min]=\"minDate$ | async\" [max]=\"maxDate$ | async\" [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-flex-bar 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: "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" }, { kind: "pipe", type: i3$1.TimezoneAbbreviationPipe, name: "timezoneAbbreviation" }] });
 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$ | async\" [min]=\"minDate$ | async\" [max]=\"maxDate$ | async\" [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-flex-bar 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  <mat-error *ngIf=\"range.hasError('required')\">Date range is required</mat-error>\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-error *ngIf=\"range.controls.start.hasError('matDatepickerMin')\">Start date is too early</mat-error>\n  <mat-error *ngIf=\"range.controls.end.hasError('matDatepickerMin')\">End date is too early.</mat-error>\n  <mat-error *ngIf=\"range.controls.start.hasError('matDatepickerMax')\">Start date is too late.</mat-error>\n  <mat-error *ngIf=\"range.controls.end.hasError('matDatepickerMax')\">End date is too late</mat-error>\n  <mat-hint>{{ hint }}</mat-hint>\n</mat-form-field>\n" }]
+            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\">\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\" [min]=\"minDate$ | async\" [max]=\"maxDate$ | async\" [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-flex-bar 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: { label: [{
+                }] }]; }, propDecorators: { openPickerOnTextClick: [{
+                type: Input
+            }], picker: [{
+                type: ViewChild,
+                args: ['picker']
+            }], label: [{
                 type: Input
             }], hint: [{
                 type: Input
@@ -852,7 +934,10 @@ class DbxScheduleSelectionCalendarDateDaysComponent {
         this.template$ = this.dbxCalendarScheduleSelectionStore.scheduleDays$.pipe(map(enabledDaysFromDateScheduleDayCodes), shareReplay());
         this.isFormModified = (value) => {
             const newSetValue = new Set(dateScheduleDayCodesFromEnabledDays(value));
-            return this.dbxCalendarScheduleSelectionStore.scheduleDays$.pipe(map((currentSet) => !setsAreEquivalent(currentSet, newSetValue)));
+            return this.dbxCalendarScheduleSelectionStore.scheduleDays$.pipe(map((currentSet) => {
+                const result = !dateScheduleDayCodesAreSetsEquivalent(newSetValue, currentSet);
+                return result;
+            }));
         };
         this.updateScheduleDays = (value) => {
             this.dbxCalendarScheduleSelectionStore.setScheduleDays(new Set(dateScheduleDayCodesFromEnabledDays(value)));
@@ -882,20 +967,24 @@ class DbxScheduleSelectionCalendarDatePopoverContentComponent {
 }
 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: `
-    <div>
-      <dbx-schedule-selection-calendar-date-range></dbx-schedule-selection-calendar-date-range>
-      <dbx-schedule-selection-calendar-date-days></dbx-schedule-selection-calendar-date-days>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: DbxScheduleSelectionCalendarDateDaysComponent, selector: "dbx-schedule-selection-calendar-date-days" }, { kind: "component", type: DbxScheduleSelectionCalendarDateRangeComponent, selector: "dbx-schedule-selection-calendar-date-range", inputs: ["label", "hint", "disabled", "showCustomize", "required"] }] });
+    <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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-date-popover-content',
                     template: `
-    <div>
-      <dbx-schedule-selection-calendar-date-range></dbx-schedule-selection-calendar-date-range>
-      <dbx-schedule-selection-calendar-date-days></dbx-schedule-selection-calendar-date-days>
-    </div>
+    <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>
   `
                 }]
         }] });
@@ -1153,20 +1242,36 @@ class DbxScheduleSelectionCalendarComponent {
         this.calendarStore.setNavigationRangeLimit(this.dbxCalendarScheduleSelectionStore.minMaxDateRange$); // set navigation limit to the min/max allowed dates.
         this.calendarStore.setShowPageButtons(true);
         // when a new filter is set, if the first two pages of selectable indexes fit within the calendar month, focus on that calendar month.
-        this._centerRangeSub.subscription = this.dbxCalendarScheduleSelectionStore.minMaxDateRange$.subscribe((x) => {
-            if (x?.start && x.end) {
+        this._centerRangeSub.subscription = this.dbxCalendarScheduleSelectionStore.currentDateRange$
+            .pipe(first(), switchMap((x) => {
+            let result = x
+                ? of([x, true])
+                : this.dbxCalendarScheduleSelectionStore.minMaxDateRange$.pipe(first(), map((y) => [y, false]));
+            return result;
+        }))
+            .subscribe(([x, isFromSelectedDateRange]) => {
+            if (x?.start) {
+                let tapDay;
                 const startMonth = dateRange({ date: x.start, type: DateRangeType.CALENDAR_MONTH });
-                const endMonth = dateRange({ date: x.end, type: DateRangeType.CALENDAR_MONTH });
-                if (isSameDate(startMonth.start, endMonth.start)) {
-                    const monthToFocus = endOfWeek(startMonth.start);
-                    this.calendarStore.tapDay(monthToFocus);
+                const monthToFocus = endOfWeek(startMonth.start);
+                if (x.end != null) {
+                    const endMonth = dateRange({ date: x.end, type: DateRangeType.CALENDAR_MONTH });
+                    if (isSameDate(startMonth.start, endMonth.start)) {
+                        tapDay = monthToFocus;
+                    }
+                }
+                if (!tapDay && isFromSelectedDateRange) {
+                    tapDay = monthToFocus;
+                }
+                if (tapDay) {
+                    this.calendarStore.tapDay(tapDay);
                 }
             }
         });
     }
     ngOnDestroy() {
-        this._inputReadonly.complete();
         this.clickEvent.complete();
+        this._inputReadonly.complete();
         this._config.complete();
         this._centerRangeSub.destroy();
     }
@@ -1278,19 +1383,21 @@ class DbxScheduleSelectionCalendarDateDialogButtonComponent {
     }
 }
 DbxScheduleSelectionCalendarDateDialogButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogButtonComponent, deps: [{ token: i1$2.MatDialog }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DbxScheduleSelectionCalendarDateDialogButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxScheduleSelectionCalendarDateDialogButtonComponent, selector: "dbx-schedule-selection-calendar-date-dialog-button", inputs: { buttonText: "buttonText", contentConfig: "contentConfig", closeConfig: "closeConfig" }, ngImport: i0, template: `
-    <button mat-raised-button color="accent" (click)="clickCustomize()">{{ buttonText }}</button>
-  `, isInline: true, dependencies: [{ kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+DbxScheduleSelectionCalendarDateDialogButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxScheduleSelectionCalendarDateDialogButtonComponent, selector: "dbx-schedule-selection-calendar-date-dialog-button", inputs: { buttonText: "buttonText", disabled: "disabled", contentConfig: "contentConfig", closeConfig: "closeConfig" }, 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", "raised", "stroked", "flat", "iconOnly", "color", "customButtonColor", "customTextColor", "customSpinnerColor"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-date-dialog-button',
                     template: `
-    <button mat-raised-button color="accent" (click)="clickCustomize()">{{ buttonText }}</button>
+    <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: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }], contentConfig: [{
                 type: Input
             }], closeConfig: [{
@@ -1307,11 +1414,13 @@ class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
         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));
     }
     get formGroupName() {
         return this.field.key;
@@ -1328,9 +1437,18 @@ class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
     get isReadonlyOrDisabled() {
         return this.props.readonly || this.disabled;
     }
+    get openPickerOnTextClick() {
+        return this.props.allowTextInput !== true; // Opposite of allowTextInput
+    }
+    get allowCustomizeWithoutDateRange() {
+        return this.props.allowCustomizeWithoutDateRange ?? false;
+    }
     get showCustomize() {
         return !this.props.hideCustomize;
     }
+    get defaultScheduleDays() {
+        return this.props.defaultScheduleDays;
+    }
     get minMaxDateRange() {
         return this.props.minMaxDateRange;
     }
@@ -1355,6 +1473,9 @@ class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
     get dialogContentConfig() {
         return this.props.dialogContentConfig;
     }
+    get customDetailsConfig() {
+        return this.props.customDetailsConfig;
+    }
     get cellContentFactory() {
         return this.props.cellContentFactory;
     }
@@ -1366,10 +1487,13 @@ class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
         this._valueSub.subscription = this.dbxCalendarScheduleSelectionStore.currentDateScheduleRangeValue$.subscribe((x) => {
             this.formControl.setValue(x);
         });
-        const { timezone, minMaxDateRange, filter, exclusions } = this;
+        const { timezone, minMaxDateRange, filter, exclusions, defaultScheduleDays } = this;
         if (filter != null) {
             this._filterSub.subscription = this.dbxCalendarScheduleSelectionStore.setFilter(asObservable(filter));
         }
+        if (defaultScheduleDays != null) {
+            this._defaultWeekSub.subscription = this.dbxCalendarScheduleSelectionStore.setDefaultScheduleDays(asObservable(defaultScheduleDays));
+        }
         if (minMaxDateRange != null) {
             this._minMaxDateRangeSub.subscription = this.dbxCalendarScheduleSelectionStore.setMinMaxDateRange(asObservable(minMaxDateRange));
         }
@@ -1403,18 +1527,20 @@ class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
 DbxFormCalendarDateScheduleRangeFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormCalendarDateScheduleRangeFieldComponent, deps: [{ token: i1$1.CompactContextStore, optional: true }, { token: DbxCalendarScheduleSelectionStore }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 DbxFormCalendarDateScheduleRangeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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 [showCustomize]="showCustomize" [required]="required" [disabled]="isReadonlyOrDisabled" [label]="label" [hint]="description">
-        <dbx-schedule-selection-calendar-date-dialog-button [contentConfig]="dialogContentConfig" [closeConfig]="closeDialogConfig" customizeButton></dbx-schedule-selection-calendar-date-dialog-button>
+      <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" [closeConfig]="closeDialogConfig"></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: DbxScheduleSelectionCalendarDateRangeComponent, selector: "dbx-schedule-selection-calendar-date-range", inputs: ["label", "hint", "disabled", "showCustomize", "required"] }, { kind: "component", type: DbxScheduleSelectionCalendarDateDialogButtonComponent, selector: "dbx-schedule-selection-calendar-date-dialog-button", inputs: ["buttonText", "contentConfig", "closeConfig"] }] });
+  `, 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", "closeConfig"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormCalendarDateScheduleRangeFieldComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
     <div class="dbx-schedule-selection-field">
-      <dbx-schedule-selection-calendar-date-range [showCustomize]="showCustomize" [required]="required" [disabled]="isReadonlyOrDisabled" [label]="label" [hint]="description">
-        <dbx-schedule-selection-calendar-date-dialog-button [contentConfig]="dialogContentConfig" [closeConfig]="closeDialogConfig" customizeButton></dbx-schedule-selection-calendar-date-dialog-button>
+      <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" [closeConfig]="closeDialogConfig"></dbx-schedule-selection-calendar-date-dialog-button>
+        <dbx-injection [config]="customDetailsConfig"></dbx-injection>
       </dbx-schedule-selection-calendar-date-range>
     </div>
   `,
@@ -1458,6 +1584,8 @@ DbxFormCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         DbxScheduleSelectionCalendarSelectionToggleButtonComponent], imports: [
         //
         DbxInjectionComponentModule,
+        DbxContentLayoutModule,
+        DbxTextModule,
         DbxActionModule,
         DbxFormModule,
         DbxFormlyModule,
@@ -1494,6 +1622,8 @@ 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,
+        DbxContentLayoutModule,
+        DbxTextModule,
         DbxActionModule,
         DbxFormModule,
         DbxFormlyModule,
@@ -1520,6 +1650,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     imports: [
                         //
                         DbxInjectionComponentModule,
+                        DbxContentLayoutModule,
+                        DbxTextModule,
                         DbxActionModule,
                         DbxFormModule,
                         DbxFormlyModule,
@@ -1549,7 +1681,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 class DbxFormDateScheduleRangeFieldModule {
 }
 DbxFormDateScheduleRangeFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormDateScheduleRangeFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, declarations: [DbxFormCalendarDateScheduleRangeFieldComponent], imports: [CommonModule,
+DbxFormDateScheduleRangeFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, declarations: [DbxFormCalendarDateScheduleRangeFieldComponent], imports: [DbxInjectionComponentModule,
+        CommonModule,
         MatIconModule,
         DbxFormCalendarModule,
         MatButtonModule,
@@ -1557,7 +1690,8 @@ DbxFormDateScheduleRangeFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersio
         FormsModule,
         ReactiveFormsModule,
         MatInputModule, i1$3.FormlyModule] });
-DbxFormDateScheduleRangeFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, imports: [CommonModule,
+DbxFormDateScheduleRangeFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, imports: [DbxInjectionComponentModule,
+        CommonModule,
         MatIconModule,
         DbxFormCalendarModule,
         MatButtonModule,
@@ -1572,6 +1706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             type: NgModule,
             args: [{
                     imports: [
+                        DbxInjectionComponentModule,
                         CommonModule,
                         MatIconModule,
                         DbxFormCalendarModule,
@@ -1594,5 +1729,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CalendarScheduleSelectionDayState, DEFAULT_DBX_SCHEDULE_SELECTION_CALENDAR_DATE_POPUP_CLOSE_CONFIG_TOKEN, DEFAULT_DBX_SCHEDULE_SELECTION_CALENDAR_DATE_POPUP_CONTENT_CONFIG_TOKEN, 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, calendarScheduleStartBeingUsedFromFilter, computeCalendarScheduleSelectionDateBlockRange, computeCalendarScheduleSelectionRange, computeScheduleSelectionRangeAndExclusion, computeScheduleSelectionValue, dateScheduleRangeField, dbxScheduleSelectionCalendarBeforeMonthViewRenderFactory, dbxScheduleSelectionCalendarDateDaysFormDayFields, dbxScheduleSelectionCalendarDateDaysFormFields, defaultCalendarScheduleSelectionCellContentFactory, finalizeNewCalendarScheduleSelectionState, initialCalendarScheduleSelectionState, isEnabledDayInCalendarScheduleSelectionState, noSelectionCalendarScheduleSelectionState, provideCalendarScheduleSelectionStoreIfParentIsUnavailable, updateStateWithChangedDates, updateStateWithChangedRange, updateStateWithChangedScheduleDays, updateStateWithComputeSelectionResultRelativeToFilter, updateStateWithDateScheduleRangeValue, updateStateWithExclusions, updateStateWithFilter, updateStateWithInitialSelectionState, updateStateWithMinMaxDateRange, updateStateWithTimezoneValue };
+export { CalendarScheduleSelectionDayState, DEFAULT_DBX_SCHEDULE_SELECTION_CALENDAR_DATE_POPUP_CLOSE_CONFIG_TOKEN, DEFAULT_DBX_SCHEDULE_SELECTION_CALENDAR_DATE_POPUP_CONTENT_CONFIG_TOKEN, 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, calendarScheduleStartBeingUsedFromFilter, computeCalendarScheduleSelectionDateBlockRange, computeCalendarScheduleSelectionRange, computeScheduleSelectionRangeAndExclusion, computeScheduleSelectionValue, dateScheduleRangeField, dbxScheduleSelectionCalendarBeforeMonthViewRenderFactory, dbxScheduleSelectionCalendarDateDaysFormDayFields, dbxScheduleSelectionCalendarDateDaysFormFields, defaultCalendarScheduleSelectionCellContentFactory, finalizeNewCalendarScheduleSelectionState, finalizeUpdateStateWithChangedScheduleDays, initialCalendarScheduleSelectionState, isEnabledDayInCalendarScheduleSelectionState, noSelectionCalendarScheduleSelectionState, provideCalendarScheduleSelectionStoreIfParentIsUnavailable, updateStateWithChangedDates, updateStateWithChangedDefaultScheduleDays, updateStateWithChangedRange, updateStateWithChangedScheduleDays, updateStateWithComputeSelectionResultRelativeToFilter, updateStateWithDateScheduleRangeValue, updateStateWithExclusions, updateStateWithFilter, updateStateWithInitialSelectionState, updateStateWithMinMaxDateRange, updateStateWithTimezoneValue };
 //# sourceMappingURL=dereekb-dbx-form-calendar.mjs.map