@dereekb/dbx-form 9.24.16 → 9.24.18

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

@@ -1,50 +1,50 @@
 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 { 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, minMaxDateRange, cellContentFactory, dialogContentConfig, closeDialogConfig, customDetailsConfig } = config;
     const fieldConfig = {
         ...formlyField({
             key,
             type: 'date-schedule-range',
             ...propsAndConfigForFieldConfig(config, {
                 label: config.label ?? 'Schedule',
+                allowTextInput,
                 appearance,
                 hideCustomize,
                 timezone,
@@ -55,7 +55,8 @@ function dateScheduleRangeField(config = {}) {
                 closeDialogConfig,
                 computeSelectionResultRelativeToFilter,
                 initialSelectionState,
-                cellContentFactory
+                cellContentFactory,
+                customDetailsConfig
             })
         })
     };
@@ -696,6 +697,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 +724,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 +814,11 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
     set required(required) {
         this._required.next(required);
     }
+    clickedDateRangeInput() {
+        if (this.openPickerOnTextClick) {
+            this.picker.open();
+        }
+    }
     pickerOpened() {
         this._pickerOpened.next(true);
     }
@@ -792,14 +827,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 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 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
@@ -882,20 +922,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 +1197,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 +1338,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: [{
@@ -1312,6 +1374,7 @@ class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
         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,6 +1391,12 @@ 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;
     }
@@ -1355,6 +1424,9 @@ class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
     get dialogContentConfig() {
         return this.props.dialogContentConfig;
     }
+    get customDetailsConfig() {
+        return this.props.customDetailsConfig;
+    }
     get cellContentFactory() {
         return this.props.cellContentFactory;
     }
@@ -1403,18 +1475,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 +1532,8 @@ DbxFormCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         DbxScheduleSelectionCalendarSelectionToggleButtonComponent], imports: [
         //
         DbxInjectionComponentModule,
+        DbxContentLayoutModule,
+        DbxTextModule,
         DbxActionModule,
         DbxFormModule,
         DbxFormlyModule,
@@ -1494,6 +1570,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 +1598,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     imports: [
                         //
                         DbxInjectionComponentModule,
+                        DbxContentLayoutModule,
+                        DbxTextModule,
                         DbxActionModule,
                         DbxFormModule,
                         DbxFormlyModule,
@@ -1549,7 +1629,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 +1638,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 +1654,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             type: NgModule,
             args: [{
                     imports: [
+                        DbxInjectionComponentModule,
                         CommonModule,
                         MatIconModule,
                         DbxFormCalendarModule,