@dereekb/dbx-form 9.23.18 → 9.23.20

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

@@ -5,10 +5,10 @@ import { Injectable, SkipSelf, Directive, Injector, Optional, Component, Inject,
 import { FieldType } from '@ngx-formly/material';
 import { switchMap, first, tap, map, distinctUntilChanged, shareReplay, BehaviorSubject, of, startWith, filter, throttleTime } from 'rxjs';
 import { filterMaybe, SubscriptionObject, asObservable } from '@dereekb/rxjs';
-import { DateScheduleDayCode, expandDateScheduleDayCodesToDayOfWeekSet, dateTimingRelativeIndexFactory, dateBlockDayOfWeekFactory, findMaxDate, findMinDate, isSameDateRange, isSameDateDay, isSameDate, isSameDateScheduleRange, dateTimingRelativeIndexArrayFactory, isInfiniteDateRange, copyDateScheduleDateFilterConfig, dateScheduleDateFilter, expandDateScheduleDayCodes, isDateInDateRangeFunction, isDateWithinDateBlockRangeFunction, dateScheduleEncodedWeek, dateBlockTimingDateFactory, enabledDaysFromDateScheduleDayCodes, dateScheduleDayCodesFromEnabledDays, formatToMonthDayString } from '@dereekb/date';
-import { setsAreEquivalent, unique, mergeArrays, iterableToArray, toggleInSet, addToSet, isIndexNumberInIndexRangeFunction, range, minAndMaxNumber, randomNumberFactory, getDaysOfWeekNames } from '@dereekb/util';
+import { DateScheduleDayCode, expandDateScheduleDayCodesToDayOfWeekSet, dateTimingRelativeIndexFactory, dateBlockDayOfWeekFactory, findMaxDate, findMinDate, isSameDateRange, isSameDateDay, isSameDate, isSameDateScheduleRange, dateTimingRelativeIndexArrayFactory, isInfiniteDateRange, copyDateScheduleDateFilterConfig, dateScheduleDateFilter, expandDateScheduleDayCodes, isDateInDateRangeFunction, isDateWithinDateBlockRangeFunction, copyHoursAndMinutesFromDate, dateScheduleEncodedWeek, dateBlockTimingDateFactory, enabledDaysFromDateScheduleDayCodes, dateScheduleDayCodesFromEnabledDays, formatToMonthDayString } from '@dereekb/date';
+import { setsAreEquivalent, unique, mergeArrays, iterableToArray, toggleInSet, addToSet, isIndexNumberInIndexRangeFunction, range, minAndMaxNumber, getDaysOfWeekNames } from '@dereekb/util';
 import { ComponentStore } from '@ngrx/component-store';
-import { startOfDay, endOfDay } from 'date-fns';
+import { startOfDay, endOfDay, isBefore } from 'date-fns';
 import * as i1$1 from '@dereekb/dbx-web';
 import { AbstractPopoverDirective, AbstractDialogDirective, DbxActionModule, DbxButtonModule, DbxDialogInteractionModule, DbxPopoverInteractionModule, DbxTextModule } from '@dereekb/dbx-web';
 import * as i3 from '@angular/forms';
@@ -251,7 +251,7 @@ function updateStateWithFilter(state, inputFilter) {
         }
         if (minMaxDateRange) {
             enabledFilter.minMaxDateRange = minMaxDateRange;
-            enabledFilter.setStartAsMinDate = false;
+            enabledFilter.setStartAsMinDate = Boolean(filter === null || filter === void 0 ? void 0 : filter.start) ? true : false; // If a start date is set, then it becomes the floor.
         }
         /**
          * If the input filter has a start date, use that as the relative start to ensure indexes are compared the same,
@@ -413,13 +413,17 @@ function computeScheduleSelectionValue(state) {
     if (rangeAndExclusion == null) {
         return null;
     }
-    const { start: rangeStart, end, excluded: allExcluded, dateBlockRange } = rangeAndExclusion;
+    const { start: rangeStart, end: rangeEnd, excluded: allExcluded, dateBlockRange } = rangeAndExclusion;
     let filterOffsetExcludedRange = [];
     let indexOffset = dateBlockRange.i;
     let start = rangeStart;
+    let end = rangeEnd;
     // If computeSelectionResultRelativeToFilter is true, then we need to offset the values to be relative to that start.
     if (computeSelectionResultRelativeToFilter && (filter === null || filter === void 0 ? void 0 : filter.start)) {
         start = filter.start;
+        if (filter === null || filter === void 0 ? void 0 : filter.end) {
+            end = copyHoursAndMinutesFromDate(end, filter.end);
+        }
         const filterStartIndexOffset = indexFactory(rangeStart) - indexFactory(start);
         filterOffsetExcludedRange = range(0, filterStartIndexOffset);
         indexOffset = indexOffset - filterStartIndexOffset;
@@ -434,6 +438,10 @@ function computeScheduleSelectionValue(state) {
     const ex = [...filterOffsetExcludedRange, ...offsetExcluded];
     const w = dateScheduleEncodedWeek(scheduleDays);
     const d = []; // "included" blocks are never used/calculated.
+    // Always ensure the end is after or equal to the start.
+    if (isBefore(end, start)) {
+        end = start; // end is start
+    }
     const dateScheduleRange = {
         start,
         end,
@@ -573,16 +581,28 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
         this.dbxCalendarStore = dbxCalendarStore;
         this.dbxCalendarScheduleSelectionStore = dbxCalendarScheduleSelectionStore;
         this.matFormFieldDefaultOptions = matFormFieldDefaultOptions;
+        this._required = new BehaviorSubject(false);
+        this.required$ = this._required.asObservable();
         this.label = 'Enter a date range';
         this.showCustomize = false;
-        this.random = randomNumberFactory(10000)();
         this._pickerOpened = new BehaviorSubject(false);
+        this._requiredSub = new SubscriptionObject();
         this._syncSub = new SubscriptionObject();
         this._valueSub = new SubscriptionObject();
         this.range = new FormGroup({
             start: new FormControl(null),
             end: new FormControl(null)
         });
+        this.errorStateMatcher = {
+            isErrorState: (control, form) => {
+                if (control) {
+                    return (control.invalid && (control.dirty || control.touched)) || (control.touched && this.range.invalid);
+                }
+                else {
+                    return false;
+                }
+            }
+        };
         this.minDate$ = this.dbxCalendarScheduleSelectionStore.minDate$;
         this.maxDate$ = this.dbxCalendarScheduleSelectionStore.maxDate$;
         this.isCustomized$ = this.dbxCalendarScheduleSelectionStore.isCustomized$;
@@ -597,11 +617,11 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
         }
     }
     ngOnInit() {
-        this._syncSub.subscription = this.dbxCalendarScheduleSelectionStore.inputRange$.subscribe((x) => {
+        this._syncSub.subscription = this.dbxCalendarScheduleSelectionStore.currentInputRange$.subscribe((x) => {
             var _a, _b;
             this.range.setValue({
-                start: (_a = x.inputStart) !== null && _a !== void 0 ? _a : null,
-                end: (_b = x.inputEnd) !== null && _b !== void 0 ? _b : null
+                start: (_a = x === null || x === void 0 ? void 0 : x.inputStart) !== null && _a !== void 0 ? _a : null,
+                end: (_b = x === null || x === void 0 ? void 0 : x.inputEnd) !== null && _b !== void 0 ? _b : null
             });
         });
         this._valueSub.subscription = this._pickerOpened
@@ -620,12 +640,35 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
                 this.dbxCalendarScheduleSelectionStore.setInputRange({ inputStart: x.start, inputEnd: x.end });
             }
         });
+        // add a required validator when needed
+        this._requiredSub.subscription = this._required.subscribe((x) => {
+            const validators = x
+                ? [
+                    (control) => {
+                        const range = control.value;
+                        if (!range || !range.start || !range.end) {
+                            return { required: true };
+                        }
+                        return null;
+                    }
+                ]
+                : [];
+            this.range.setValidators(validators);
+        });
     }
     ngOnDestroy() {
+        this._required.complete();
         this._pickerOpened.complete();
+        this._requiredSub.destroy();
         this._syncSub.destroy();
         this._valueSub.destroy();
     }
+    get required() {
+        return this._required.value;
+    }
+    set required(required) {
+        this._required.next(required);
+    }
     pickerOpened() {
         this._pickerOpened.next(true);
     }
@@ -634,18 +677,16 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
     }
 }
 DbxScheduleSelectionCalendarDateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateRangeComponent, deps: [{ token: i1.DbxCalendarStore }, { token: DbxCalendarScheduleSelectionStore }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
-DbxScheduleSelectionCalendarDateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxScheduleSelectionCalendarDateRangeComponent, selector: "dbx-schedule-selection-calendar-date-range", inputs: { required: "required", label: "label", hint: "hint", disabled: "disabled", showCustomize: "showCustomize" }, ngImport: i0, template: "<mat-form-field class=\"dbx-schedule-selection-calendar-date-range-field\">\n  <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n  <div *ngIf=\"showCustomize && (isCustomized$ | async)\" class=\"date-range-field-customized\">\n    <span class=\"dbx-accent-bg date-range-field-customized-text\">Custom</span>\n  </div>\n  <dbx-button-spacer></dbx-button-spacer>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <dbx-button-spacer></dbx-button-spacer>\n  <mat-date-range-input [required]=\"required\" [min]=\"minDate$ | async\" [max]=\"maxDate$ | async\" [formGroup]=\"range\" [rangePicker]=\"picker\">\n    <input matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n    <input matEndDate formControlName=\"end\" placeholder=\"End date\" />\n  </mat-date-range-input>\n  <div *ngIf=\"showCustomize\">\n    <dbx-button-spacer></dbx-button-spacer>\n    <ng-content select=\"[customizeButton]\"></ng-content>\n  </div>\n  <mat-date-range-picker #picker (opened)=\"pickerOpened()\" (closed)=\"pickerClosed()\"></mat-date-range-picker>\n  <mat-error *ngIf=\"range.controls.start.hasError('matStartDateInvalid')\">Invalid start date</mat-error>\n  <mat-error *ngIf=\"range.controls.end.hasError('matEndDateInvalid')\">Invalid end date</mat-error>\n  <mat-hint>{{ hint }}</mat-hint>\n</mat-form-field>\n", dependencies: [{ kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: 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" }] });
+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  <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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateRangeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-schedule-selection-calendar-date-range', template: "<mat-form-field class=\"dbx-schedule-selection-calendar-date-range-field\">\n  <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n  <div *ngIf=\"showCustomize && (isCustomized$ | async)\" class=\"date-range-field-customized\">\n    <span class=\"dbx-accent-bg date-range-field-customized-text\">Custom</span>\n  </div>\n  <dbx-button-spacer></dbx-button-spacer>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <dbx-button-spacer></dbx-button-spacer>\n  <mat-date-range-input [required]=\"required\" [min]=\"minDate$ | async\" [max]=\"maxDate$ | async\" [formGroup]=\"range\" [rangePicker]=\"picker\">\n    <input matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n    <input matEndDate formControlName=\"end\" placeholder=\"End date\" />\n  </mat-date-range-input>\n  <div *ngIf=\"showCustomize\">\n    <dbx-button-spacer></dbx-button-spacer>\n    <ng-content select=\"[customizeButton]\"></ng-content>\n  </div>\n  <mat-date-range-picker #picker (opened)=\"pickerOpened()\" (closed)=\"pickerClosed()\"></mat-date-range-picker>\n  <mat-error *ngIf=\"range.controls.start.hasError('matStartDateInvalid')\">Invalid start date</mat-error>\n  <mat-error *ngIf=\"range.controls.end.hasError('matEndDateInvalid')\">Invalid end date</mat-error>\n  <mat-hint>{{ hint }}</mat-hint>\n</mat-form-field>\n" }]
+            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  <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" }]
         }], ctorParameters: function () {
         return [{ type: i1.DbxCalendarStore }, { type: DbxCalendarScheduleSelectionStore }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
                     }] }];
-    }, propDecorators: { required: [{
-                type: Input
-            }], label: [{
+    }, propDecorators: { label: [{
                 type: Input
             }], hint: [{
                 type: Input
@@ -653,6 +694,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }], showCustomize: [{
                 type: Input
+            }], required: [{
+                type: Input
             }] } });
 
 function dbxScheduleSelectionCalendarDateDaysFormFields() {
@@ -730,7 +773,7 @@ DbxScheduleSelectionCalendarDatePopoverContentComponent.ɵcmp = i0.ɵɵngDeclare
       <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: ["required", "label", "hint", "disabled", "showCustomize"] }] });
+  `, 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverContentComponent, decorators: [{
             type: Component,
             args: [{
@@ -1123,7 +1166,7 @@ DbxFormCalendarDateScheduleRangeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent
         <dbx-schedule-selection-calendar-date-dialog-button customizeButton></dbx-schedule-selection-calendar-date-dialog-button>
       </dbx-schedule-selection-calendar-date-range>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: DbxScheduleSelectionCalendarDateRangeComponent, selector: "dbx-schedule-selection-calendar-date-range", inputs: ["required", "label", "hint", "disabled", "showCustomize"] }, { kind: "component", type: DbxScheduleSelectionCalendarDateDialogButtonComponent, selector: "dbx-schedule-selection-calendar-date-dialog-button", inputs: ["buttonText"] }] });
+  `, 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormCalendarDateScheduleRangeFieldComponent, decorators: [{
             type: Component,
             args: [{