@dereekb/dbx-form 12.6.21 → 13.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Hapier Creative LLC.
+Copyright (c) 2025 Hapier Creative LLC.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

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

@@ -1,16 +1,16 @@
 import * as i1 from '@dereekb/dbx-form';
-import { formlyField, propsAndConfigForFieldConfig, flexLayoutWrapper, toggleField, AbstractSyncFormlyFormDirective, dbxFormlyFormComponentProviders, DbxFormlyFormComponentImportsModule, DbxFormFormlyWrapperModule, DbxFormFormlyBooleanFieldModule, DBX_FORMLY_FORM_COMPONENT_TEMPLATE, DbxFormSourceDirective, DbxActionFormDirective } from '@dereekb/dbx-form';
+import { formlyField, propsAndConfigForFieldConfig, flexLayoutWrapper, toggleField, AbstractSyncFormlyFormDirective, DbxFormlyFormComponentImportsModule, DbxFormFormlyWrapperModule, DbxFormFormlyBooleanFieldModule, dbxFormlyFormComponentProviders, DBX_FORMLY_FORM_COMPONENT_TEMPLATE, DbxFormSourceDirective, DbxActionFormDirective } from '@dereekb/dbx-form';
 import * as i1$3 from '@dereekb/dbx-web';
 import { DbxActionModule, DbxButtonSpacerDirective, DbxContentContainerDirective, DbxLabelBlockComponent, AbstractPopoverDirective, DbxPopoverInteractionModule, DbxPopoverService, DbxButtonComponent, AbstractDialogDirective, sanitizeDbxDialogContentConfig, DbxDialogModule, CompactContextStore } from '@dereekb/dbx-web';
 import * as i0 from '@angular/core';
-import { Injectable, inject, Directive, Injector, Optional, SkipSelf, Component, ChangeDetectionStrategy, viewChild, input, effect, computed, ElementRef, output, InjectionToken, NgModule } from '@angular/core';
+import { Injectable, inject, Directive, Injector, Optional, SkipSelf, ChangeDetectionStrategy, Component, viewChild, input, effect, computed, ElementRef, output, InjectionToken, NgModule } from '@angular/core';
 import { FieldType } from '@ngx-formly/material';
 import { switchMap, first, tap, map, distinctUntilChanged, shareReplay, of, combineLatestWith, BehaviorSubject, filter, combineLatest, EMPTY, startWith, throttleTime } from 'rxjs';
 import { filterMaybe, distinctUntilHasDifferentValues, SubscriptionObject, asObservableFromGetter, asObservable } from '@dereekb/rxjs';
 import { DateCellScheduleDayCode, expandDateCellScheduleDayCodesToDayOfWeekSet, dateCellTimingStartsAtForStartOfDay, dateCellTimingRelativeIndexFactory, dateCellDayOfWeekFactory, dateTimezoneUtcNormal, findMaxDate, findMinDate, isSameDateRange, isSameDateDay, isSameDate, dateCellTimingDateFactory, expandDateCellScheduleRange, formatToISO8601DayStringForSystem, changeDateCellScheduleDateRangeToTimezone, isSameDateCellScheduleDateRange, dateCellTimingRelativeIndexArrayFactory, isInfiniteDateRange, copyDateCellScheduleDateFilterConfig, SYSTEM_DATE_TIMEZONE_UTC_NORMAL_INSTANCE, dateCellScheduleDateFilter, fullDateCellScheduleRange, dateCellTimingTimezoneNormalInstance, expandDateCellScheduleDayCodes, fullWeekDateCellScheduleDayCodes, dateCellScheduleDayCodesAreSetsEquivalent, simplifyDateCellScheduleDayCodes, dateCellTimingStartDateFactory, isDateInDateRangeFunction, isDateWithinDateCellRangeFunction, dateCellScheduleEncodedWeek, enabledDaysFromDateCellScheduleDayCodes, dateCellScheduleDayCodesFromEnabledDays, formatToMonthDayString, dateRange, DateRangeType } from '@dereekb/date';
 import { isInAllowedDaysOfWeekSet, mapValuesToSet, unique, mergeArrays, iterableToArray, isIterable, firstValueFromIterable, minAndMaxNumber, range, toggleInSet, removeFromSet, addToSet, isIndexNumberInIndexRangeFunction, getDaysOfWeekNames, reduceBooleansWithAnd, mergeObjects, KeyValueTypleValueFilter } from '@dereekb/util';
 import { ComponentStore } from '@ngrx/component-store';
-import { startOfDay, endOfDay, isBefore, endOfWeek } from 'date-fns';
+import { endOfDay, startOfDay, isBefore, endOfWeek } from 'date-fns';
 import * as i1$1 from '@dereekb/dbx-core';
 import { TimezoneAbbreviationPipe, switchMapDbxInjectionComponentConfig, DbxInjectionComponent } from '@dereekb/dbx-core';
 import { toSignal, toObservable } from '@angular/core/rxjs-interop';
@@ -273,10 +273,10 @@ class DbxCalendarScheduleSelectionStore extends ComponentStore {
      * Should typically not be used by the user directly with the intention of the parent synchronizing to this state.
      */
     setViewReadonlyState = this.updater((state, isViewReadonly) => ({ ...state, isViewReadonly }));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxCalendarScheduleSelectionStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxCalendarScheduleSelectionStore });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxCalendarScheduleSelectionStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxCalendarScheduleSelectionStore });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxCalendarScheduleSelectionStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxCalendarScheduleSelectionStore, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 function updateStateWithInitialSelectionState(state, initialSelectionState) {
@@ -869,17 +869,17 @@ function computeCalendarScheduleSelectionDateCellRange(state) {
  */
 class DbxCalendarScheduleSelectionStoreProviderBlock {
     dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore, { skipSelf: true });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock, decorators: [{
             type: Injectable
         }] });
 class DbxCalendarScheduleSelectionStoreInjectionBlockDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, isStandalone: true, selector: "[dbxCalendarScheduleSelectionStoreParentBlocker]", providers: [DbxCalendarScheduleSelectionStoreProviderBlock], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, isStandalone: true, selector: "[dbxCalendarScheduleSelectionStoreParentBlocker]", providers: [DbxCalendarScheduleSelectionStoreProviderBlock], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxCalendarScheduleSelectionStoreParentBlocker]',
@@ -924,10 +924,10 @@ function dbxScheduleSelectionCalendarDateDaysFormDayFields() {
 
 class DbxScheduleSelectionCalendarDateDaysFormComponent extends AbstractSyncFormlyFormDirective {
     fields = dbxScheduleSelectionCalendarDateDaysFormFields();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxScheduleSelectionCalendarDateDaysFormComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-days-form", providers: dbxFormlyFormComponentProviders(), usesInheritance: true, ngImport: i0, template: "<dbx-formly></dbx-formly>", isInline: true, dependencies: [{ kind: "ngmodule", type: DbxFormlyFormComponentImportsModule }, { kind: "component", type: i1.DbxFormlyComponent, selector: "dbx-formly", exportAs: ["formly"] }, { kind: "ngmodule", type: DbxFormFormlyWrapperModule }, { kind: "ngmodule", type: DbxFormFormlyBooleanFieldModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DbxScheduleSelectionCalendarDateDaysFormComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-days-form", providers: dbxFormlyFormComponentProviders(), usesInheritance: true, ngImport: i0, template: "<dbx-formly></dbx-formly>", isInline: true, dependencies: [{ kind: "ngmodule", type: DbxFormlyFormComponentImportsModule }, { kind: "component", type: i1.DbxFormlyComponent, selector: "dbx-formly", exportAs: ["formly"] }, { kind: "ngmodule", type: DbxFormFormlyWrapperModule }, { kind: "ngmodule", type: DbxFormFormlyBooleanFieldModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-date-days-form',
@@ -954,14 +954,14 @@ class DbxScheduleSelectionCalendarDateDaysComponent {
         this.dbxCalendarScheduleSelectionStore.setScheduleDays(new Set(dateCellScheduleDayCodesFromEnabledDays(value)));
         return of(true);
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxScheduleSelectionCalendarDateDaysComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-days", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DbxScheduleSelectionCalendarDateDaysComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-days", ngImport: i0, template: `
     <div class="dbx-schedule-selection-calendar-date-days" dbxAction dbxActionAutoTrigger dbxActionEnforceModified [useInstantTriggerPreset]="true" [dbxActionHandler]="updateScheduleDays">
       <dbx-schedule-selection-calendar-date-days-form dbxActionForm [dbxFormSource]="template$" [dbxActionFormIsModified]="isFormModified"></dbx-schedule-selection-calendar-date-days-form>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: DbxScheduleSelectionCalendarDateDaysFormComponent, selector: "dbx-schedule-selection-calendar-date-days-form" }, { kind: "directive", type: DbxFormSourceDirective, selector: "[dbxFormSource]", inputs: ["dbxFormSourceMode", "dbxFormSource"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$1.DbxActionDirective, selector: "dbx-action,[dbxAction],dbx-action-context,[dbxActionContext]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$1.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$1.DbxActionEnforceModifiedDirective, selector: "[dbxActionEnforceModified]", inputs: ["dbxActionEnforceModified"] }, { kind: "directive", type: i1$1.DbxActionAutoTriggerDirective, selector: "dbxActionAutoTrigger,[dbxActionAutoTrigger]", inputs: ["triggerDebounce", "triggerThrottle", "triggerErrorThrottle", "maxErrorsForThrottle", "triggerLimit", "dbxActionAutoTrigger", "useFastTriggerPreset", "useInstantTriggerPreset"] }, { kind: "directive", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: ["dbxActionFormDisabledOnWorking", "dbxActionFormIsValid", "dbxActionFormIsEqual", "dbxActionFormIsModified", "dbxActionFormMapValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxScheduleSelectionCalendarDateDaysFormComponent, selector: "dbx-schedule-selection-calendar-date-days-form" }, { kind: "directive", type: DbxFormSourceDirective, selector: "[dbxFormSource]", inputs: ["dbxFormSourceMode", "dbxFormSource"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$1.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$1.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$1.DbxActionEnforceModifiedDirective, selector: "[dbxActionEnforceModified]", inputs: ["dbxActionEnforceModified"] }, { kind: "directive", type: i1$1.DbxActionAutoTriggerDirective, selector: "dbxActionAutoTrigger,[dbxActionAutoTrigger]", inputs: ["triggerDebounce", "triggerThrottle", "triggerErrorThrottle", "maxErrorsForThrottle", "triggerLimit", "dbxActionAutoTrigger", "useFastTriggerPreset", "useInstantTriggerPreset"] }, { kind: "directive", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: ["dbxActionFormDisabledOnWorking", "dbxActionFormIsValid", "dbxActionFormIsEqual", "dbxActionFormIsModified", "dbxActionFormMapValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-date-days',
@@ -981,12 +981,12 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
     dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
     matFormFieldDefaultOptions = inject(MAT_FORM_FIELD_DEFAULT_OPTIONS, { optional: true });
     picker = viewChild.required('picker');
-    required = input(false);
-    openPickerOnTextClick = input(true);
-    label = input('Enter a date range');
-    hint = input();
-    disabled = input();
-    showCustomize = input(false);
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    openPickerOnTextClick = input(true, ...(ngDevMode ? [{ debugName: "openPickerOnTextClick" }] : []));
+    label = input('Enter a date range', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : []));
+    disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
+    showCustomize = input(false, ...(ngDevMode ? [{ debugName: "showCustomize" }] : []));
     timezone$ = this.dbxCalendarScheduleSelectionStore.effectiveOutputTimezone$;
     _disabledEffect = effect(() => {
         const disabled = this.disabled();
@@ -996,7 +996,7 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
         else {
             this.range.enable();
         }
-    });
+    }, ...(ngDevMode ? [{ debugName: "_disabledEffect" }] : []));
     _pickerOpened = new BehaviorSubject(false);
     _syncSub = new SubscriptionObject();
     _valueSub = new SubscriptionObject();
@@ -1058,7 +1058,7 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
     timezoneSignal = toSignal(this.timezone$);
     timezoneReleventDateSignal = toSignal(this.timezoneReleventDate$, { initialValue: new Date() });
     isCustomizedSignal = toSignal(this.isCustomized$, { initialValue: false });
-    showCustomLabelSignal = computed(() => this.showCustomize() && this.isCustomizedSignal());
+    showCustomLabelSignal = computed(() => this.showCustomize() && this.isCustomizedSignal(), ...(ngDevMode ? [{ debugName: "showCustomLabelSignal" }] : []));
     currentErrorMessageSignal = toSignal(this.currentErrorMessage$);
     datePickerFilterSignal = toSignal(this.datePickerFilter$, { initialValue: (() => true) });
     _requiredUpdateValidatorsEffect = effect(() => {
@@ -1074,7 +1074,7 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
             ]
             : [];
         this.range.setValidators(validators);
-    });
+    }, ...(ngDevMode ? [{ debugName: "_requiredUpdateValidatorsEffect" }] : []));
     ngOnInit() {
         this._syncSub.subscription = this.dbxCalendarScheduleSelectionStore.currentInputRange$.subscribe((x) => {
             this.range.setValue({
@@ -1117,17 +1117,17 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
     pickerClosed() {
         this._pickerOpened.next(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxScheduleSelectionCalendarDateRangeComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-range", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, openPickerOnTextClick: { classPropertyName: "openPickerOnTextClick", publicName: "openPickerOnTextClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showCustomize: { classPropertyName: "showCustomize", publicName: "showCustomize", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field class=\"dbx-schedule-selection-calendar-date-range-field\">\n  @if (label()) {\n    <mat-label>{{ label() }}</mat-label>\n  }\n  <div class=\"dbx-schedule-selection-calendar-date-range-field-content\">\n    <!-- Primary Content -->\n    <div class=\"dbx-flex-bar\">\n      @if (showCustomLabelSignal()) {\n        <div class=\"date-range-field-customized\">\n          <span class=\"dbx-accent-bg date-range-field-customized-text\">Custom</span>\n        </div>\n      }\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()\" [dateFilter]=\"datePickerFilterSignal()\" [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      @if (timezoneSignal()) {\n        <span class=\"dbx-schedule-selection-timezone dbx-faint dbx-nowrap dbx-icon-spacer\">{{ timezoneSignal() | timezoneAbbreviation: timezoneReleventDateSignal() }}</span>\n      }\n      @if (showCustomize()) {\n        <div>\n          <dbx-button-spacer></dbx-button-spacer>\n          <ng-content select=\"[customizeButton]\"></ng-content>\n        </div>\n      }\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  @if (currentErrorMessageSignal()) {\n    <mat-error>{{ currentErrorMessageSignal() }}</mat-error>\n  }\n  <mat-hint>{{ hint() }}</mat-hint>\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "pipe", type: TimezoneAbbreviationPipe, name: "timezoneAbbreviation" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DbxScheduleSelectionCalendarDateRangeComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-range", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, openPickerOnTextClick: { classPropertyName: "openPickerOnTextClick", publicName: "openPickerOnTextClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showCustomize: { classPropertyName: "showCustomize", publicName: "showCustomize", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field class=\"dbx-schedule-selection-calendar-date-range-field\">\n  @if (label()) {\n    <mat-label>{{ label() }}</mat-label>\n  }\n  <div class=\"dbx-schedule-selection-calendar-date-range-field-content\">\n    <!-- Primary Content -->\n    <div class=\"dbx-flex-bar\">\n      @if (showCustomLabelSignal()) {\n        <div class=\"date-range-field-customized\">\n          <span class=\"dbx-accent-bg date-range-field-customized-text\">Custom</span>\n        </div>\n      }\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()\" [dateFilter]=\"datePickerFilterSignal()\" [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      @if (timezoneSignal()) {\n        <span class=\"dbx-schedule-selection-timezone dbx-faint dbx-nowrap dbx-icon-spacer\">{{ timezoneSignal() | timezoneAbbreviation: timezoneReleventDateSignal() }}</span>\n      }\n      @if (showCustomize()) {\n        <div>\n          <dbx-button-spacer></dbx-button-spacer>\n          <ng-content select=\"[customizeButton]\"></ng-content>\n        </div>\n      }\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  @if (currentErrorMessageSignal()) {\n    <mat-error>{{ currentErrorMessageSignal() }}</mat-error>\n  }\n  <mat-hint>{{ hint() }}</mat-hint>\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "pipe", type: TimezoneAbbreviationPipe, name: "timezoneAbbreviation" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDateRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarDateRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-schedule-selection-calendar-date-range', imports: [MatFormFieldModule, FormsModule, ReactiveFormsModule, DbxButtonSpacerDirective, MatDatepickerModule, TimezoneAbbreviationPipe], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<mat-form-field class=\"dbx-schedule-selection-calendar-date-range-field\">\n  @if (label()) {\n    <mat-label>{{ label() }}</mat-label>\n  }\n  <div class=\"dbx-schedule-selection-calendar-date-range-field-content\">\n    <!-- Primary Content -->\n    <div class=\"dbx-flex-bar\">\n      @if (showCustomLabelSignal()) {\n        <div class=\"date-range-field-customized\">\n          <span class=\"dbx-accent-bg date-range-field-customized-text\">Custom</span>\n        </div>\n      }\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()\" [dateFilter]=\"datePickerFilterSignal()\" [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      @if (timezoneSignal()) {\n        <span class=\"dbx-schedule-selection-timezone dbx-faint dbx-nowrap dbx-icon-spacer\">{{ timezoneSignal() | timezoneAbbreviation: timezoneReleventDateSignal() }}</span>\n      }\n      @if (showCustomize()) {\n        <div>\n          <dbx-button-spacer></dbx-button-spacer>\n          <ng-content select=\"[customizeButton]\"></ng-content>\n        </div>\n      }\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  @if (currentErrorMessageSignal()) {\n    <mat-error>{{ currentErrorMessageSignal() }}</mat-error>\n  }\n  <mat-hint>{{ hint() }}</mat-hint>\n</mat-form-field>\n" }]
-        }] });
+        }], propDecorators: { picker: [{ type: i0.ViewChild, args: ['picker', { isSignal: true }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], openPickerOnTextClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "openPickerOnTextClick", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showCustomize: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomize", required: false }] }] } });
 
 class DbxScheduleSelectionCalendarDatePopoverContentComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxScheduleSelectionCalendarDatePopoverContentComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-popover-content", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DbxScheduleSelectionCalendarDatePopoverContentComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-popover-content", ngImport: i0, template: `
     <dbx-content-container padding="min" topPadding="normal">
       <dbx-schedule-selection-calendar-date-range [openPickerOnTextClick]="false"></dbx-schedule-selection-calendar-date-range>
       <dbx-label-block header="Allowed Days Of Week">
@@ -1136,7 +1136,7 @@ class DbxScheduleSelectionCalendarDatePopoverContentComponent {
     </dbx-content-container>
   `, isInline: true, dependencies: [{ kind: "directive", type: DbxContentContainerDirective, selector: "dbx-content-container,[dbxContentContainer],.dbx-content-container", inputs: ["grow", "padding", "topPadding"] }, { kind: "component", type: DbxScheduleSelectionCalendarDateRangeComponent, selector: "dbx-schedule-selection-calendar-date-range", inputs: ["required", "openPickerOnTextClick", "label", "hint", "disabled", "showCustomize"] }, { kind: "component", type: DbxLabelBlockComponent, selector: "dbx-label-block", inputs: ["header"] }, { kind: "component", type: DbxScheduleSelectionCalendarDateDaysComponent, selector: "dbx-schedule-selection-calendar-date-days" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-date-popover-content',
@@ -1164,8 +1164,8 @@ class DbxScheduleSelectionCalendarDatePopoverComponent extends AbstractPopoverDi
             injector
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxScheduleSelectionCalendarDatePopoverComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-popover", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DbxScheduleSelectionCalendarDatePopoverComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-popover", usesInheritance: true, ngImport: i0, template: `
     <dbx-popover-content>
       <dbx-popover-scroll-content>
         <dbx-schedule-selection-calendar-date-popover-content></dbx-schedule-selection-calendar-date-popover-content>
@@ -1173,7 +1173,7 @@ class DbxScheduleSelectionCalendarDatePopoverComponent extends AbstractPopoverDi
     </dbx-popover-content>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: DbxPopoverInteractionModule }, { kind: "component", type: i1$3.DbxPopoverContentComponent, selector: "dbx-popover-content" }, { kind: "directive", type: i1$3.DbxPopoverScrollContentDirective, selector: "dbx-popover-scroll-content,[dbxPopoverScrollContent],.dbx-popover-scroll-content" }, { kind: "component", type: DbxScheduleSelectionCalendarDatePopoverContentComponent, selector: "dbx-schedule-selection-calendar-date-popover-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-date-popover',
@@ -1214,12 +1214,12 @@ class DbxScheduleSelectionCalendarDatePopoverButtonComponent {
             DbxScheduleSelectionCalendarDatePopoverComponent.openPopover(this.popoverService, { origin: buttonElement, injector: this.injector });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-popover-button", viewQueries: [{ propertyName: "buttonPopoverOrigin", first: true, predicate: ["buttonPopoverOrigin"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-popover-button", viewQueries: [{ propertyName: "buttonPopoverOrigin", first: true, predicate: ["buttonPopoverOrigin"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
     <dbx-button #buttonPopoverOrigin icon="date_range" [disabled]="disabledSignal()" [raised]="true" color="accent" [text]="buttonTextSignal()" (buttonClick)="openPopover()"></dbx-button>
-  `, isInline: true, dependencies: [{ kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-date-popover-button',
@@ -1230,25 +1230,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }] });
+        }], propDecorators: { buttonPopoverOrigin: [{ type: i0.ViewChild, args: ['buttonPopoverOrigin', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 class DbxScheduleSelectionCalendarCellComponent {
     dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
-    day = input.required();
+    day = input.required(...(ngDevMode ? [{ debugName: "day" }] : []));
     day$ = toObservable(this.day);
     cellContent$ = this.dbxCalendarScheduleSelectionStore.cellContentFactory$.pipe(switchMap((fn) => this.day$.pipe(map((x) => fn(x)))), shareReplay(1));
     contentSignal = toSignal(this.cellContent$, { initialValue: {} });
-    iconSignal = computed(() => this.contentSignal().icon);
-    textSignal = computed(() => this.contentSignal().text);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxScheduleSelectionCalendarCellComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-cell", inputs: { day: { classPropertyName: "day", publicName: "day", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "dbx-schedule-selection-calendar-cell" }, ngImport: i0, template: `
+    iconSignal = computed(() => this.contentSignal().icon, ...(ngDevMode ? [{ debugName: "iconSignal" }] : []));
+    textSignal = computed(() => this.contentSignal().text, ...(ngDevMode ? [{ debugName: "textSignal" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DbxScheduleSelectionCalendarCellComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-cell", inputs: { day: { classPropertyName: "day", publicName: "day", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "dbx-schedule-selection-calendar-cell" }, ngImport: i0, template: `
     @if (iconSignal()) {
       <mat-icon>{{ iconSignal() }}</mat-icon>
     }
     <span>{{ textSignal() }}</span>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarCellComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-cell',
@@ -1265,13 +1265,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }] });
+        }], propDecorators: { day: [{ type: i0.Input, args: [{ isSignal: true, alias: "day", required: true }] }] } });
 
 /**
  * Toggle button for selecting and clearing the current selection.
  */
 class DbxScheduleSelectionCalendarSelectionToggleButtonComponent {
-    disabled = input();
+    disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
     dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
     selectionModeSignal = toSignal(this.dbxCalendarScheduleSelectionStore.selectionMode$, { initialValue: 'multiple' });
     nextToggleSelectionSignal = toSignal(this.dbxCalendarScheduleSelectionStore.nextToggleSelection$, { initialValue: 'none' });
@@ -1286,7 +1286,7 @@ class DbxScheduleSelectionCalendarSelectionToggleButtonComponent {
             disableButton = !nextToggleSelection;
         }
         return disableButton;
-    });
+    }, ...(ngDevMode ? [{ debugName: "disableButtonSignal" }] : []));
     buttonDisplaySignal = computed(() => {
         const selectionMode = this.selectionModeSignal();
         const nextToggleSelection = this.nextToggleSelectionSignal();
@@ -1307,16 +1307,16 @@ class DbxScheduleSelectionCalendarSelectionToggleButtonComponent {
                 break;
         }
         return buttonDisplay;
-    });
+    }, ...(ngDevMode ? [{ debugName: "buttonDisplaySignal" }] : []));
     toggleSelection() {
         this.dbxCalendarScheduleSelectionStore.toggleSelection();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-selection-toggle-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-selection-toggle-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <dbx-button [disabled]="disableButtonSignal()" [buttonDisplay]="buttonDisplaySignal()" [raised]="true" (buttonClick)="toggleSelection()"></dbx-button>
-  `, isInline: true, dependencies: [{ kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-selection-toggle-button',
@@ -1327,7 +1327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }] });
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 function dbxScheduleSelectionCalendarBeforeMonthViewRenderFactory(inputModifyFn) {
     const modifyFn = inputModifyFn || (() => { });
@@ -1373,8 +1373,8 @@ class DbxScheduleSelectionCalendarComponent {
     calendarStore = inject((DbxCalendarStore));
     dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
     clickEvent = output();
-    config = input();
-    readonly = input(false);
+    config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
     _centerRangeSub = new SubscriptionObject();
     config$ = toObservable(this.config).pipe(distinctUntilChanged(), shareReplay(1));
     readonly$ = this.config$.pipe(switchMap((x) => (x?.readonly != null ? asObservableFromGetter(x.readonly) : of(undefined))), combineLatestWith(toObservable(this.readonly)), map(([configReadonly, inputReadonly]) => {
@@ -1458,13 +1458,13 @@ class DbxScheduleSelectionCalendarComponent {
     beforeMonthViewRender(renderEvent) {
         this.beforeMonthViewRenderSignal()?.(renderEvent);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxScheduleSelectionCalendarComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEvent: "clickEvent" }, providers: [DbxCalendarStore], ngImport: i0, template: "<dbx-calendar-base class=\"dbx-schedule-selection-calendar\" [ngClass]=\"readonlySignal() ? 'dbx-schedule-selection-calendar-readonly' : ''\">\n  <ng-container controls>\n    @if (showClearSelectionButtonSignal()) {\n      <dbx-schedule-selection-calendar-selection-toggle-button [disabled]=\"readonlySignal()\"></dbx-schedule-selection-calendar-selection-toggle-button>\n      <dbx-button-spacer></dbx-button-spacer>\n    }\n    <dbx-injection [config]=\"datePopoverButtonInjectionConfigSignal()\"></dbx-injection>\n  </ng-container>\n  <div class=\"dbx-calendar-content dbx-calendar-content-month\">\n    <mwl-calendar-month-view [refresh]=\"refresh$\" [viewDate]=\"viewDateSignal()!\" [events]=\"eventsSignal()\" (dayClicked)=\"dayClicked($event.day)\" (eventClicked)=\"eventClicked('Clicked', $event.event)\" (beforeViewRender)=\"beforeMonthViewRender($event)\" [cellTemplate]=\"monthDayCellTemplate\"></mwl-calendar-month-view>\n  </div>\n</dbx-calendar-base>\n\n<!-- Cell -->\n<ng-template #monthDayCellTemplate let-day=\"day\" let-locale=\"locale\">\n  <div class=\"cal-cell-top\">\n    @if (day.badgeTotal > 0) {\n      <span class=\"cal-day-badge\">{{ day.badgeTotal }}</span>\n    }\n    <span class=\"cal-day-number\">{{ day.date | calendarDate: 'monthViewDayNumber' : locale }}</span>\n  </div>\n  <dbx-schedule-selection-calendar-cell [day]=\"day\"></dbx-schedule-selection-calendar-cell>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "pipe", type: i1$5.ɵCalendarDatePipe, name: "calendarDate" }, { kind: "component", type: i1$5.CalendarMonthViewComponent, selector: "mwl-calendar-month-view", inputs: ["viewDate", "events", "excludeDays", "activeDayIsOpen", "activeDay", "refresh", "locale", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "weekStartsOn", "headerTemplate", "cellTemplate", "openDayEventsTemplate", "eventTitleTemplate", "eventActionsTemplate", "weekendDays"], outputs: ["beforeViewRender", "dayClicked", "eventClicked", "columnHeaderClicked", "eventTimesChanged"] }, { kind: "component", type: DbxCalendarBaseComponent, selector: "dbx-calendar-base" }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: DbxScheduleSelectionCalendarCellComponent, selector: "dbx-schedule-selection-calendar-cell", inputs: ["day"] }, { kind: "component", type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, selector: "dbx-schedule-selection-calendar-selection-toggle-button", inputs: ["disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DbxScheduleSelectionCalendarComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEvent: "clickEvent" }, providers: [DbxCalendarStore], ngImport: i0, template: "<dbx-calendar-base class=\"dbx-schedule-selection-calendar\" [ngClass]=\"readonlySignal() ? 'dbx-schedule-selection-calendar-readonly' : ''\">\n  <ng-container controls>\n    @if (showClearSelectionButtonSignal()) {\n      <dbx-schedule-selection-calendar-selection-toggle-button [disabled]=\"readonlySignal()\"></dbx-schedule-selection-calendar-selection-toggle-button>\n      <dbx-button-spacer></dbx-button-spacer>\n    }\n    <dbx-injection [config]=\"datePopoverButtonInjectionConfigSignal()\"></dbx-injection>\n  </ng-container>\n  <div class=\"dbx-calendar-content dbx-calendar-content-month\">\n    <mwl-calendar-month-view [refresh]=\"refresh$\" [viewDate]=\"viewDateSignal()!\" [events]=\"eventsSignal()\" (dayClicked)=\"dayClicked($event.day)\" (eventClicked)=\"eventClicked('Clicked', $event.event)\" (beforeViewRender)=\"beforeMonthViewRender($event)\" [cellTemplate]=\"monthDayCellTemplate\"></mwl-calendar-month-view>\n  </div>\n</dbx-calendar-base>\n\n<!-- Cell -->\n<ng-template #monthDayCellTemplate let-day=\"day\" let-locale=\"locale\">\n  <div class=\"cal-cell-top\">\n    @if (day.badgeTotal > 0) {\n      <span class=\"cal-day-badge\">{{ day.badgeTotal }}</span>\n    }\n    <span class=\"cal-day-number\">{{ day.date | calendarDate: 'monthViewDayNumber' : locale }}</span>\n  </div>\n  <dbx-schedule-selection-calendar-cell [day]=\"day\"></dbx-schedule-selection-calendar-cell>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i1$5.CalendarMonthViewComponent, selector: "mwl-calendar-month-view", inputs: ["viewDate", "events", "excludeDays", "activeDayIsOpen", "activeDay", "refresh", "locale", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "weekStartsOn", "headerTemplate", "cellTemplate", "openDayEventsTemplate", "eventTitleTemplate", "eventActionsTemplate", "weekendDays"], outputs: ["beforeViewRender", "dayClicked", "eventClicked", "columnHeaderClicked", "eventTimesChanged"] }, { kind: "component", type: DbxCalendarBaseComponent, selector: "dbx-calendar-base" }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: DbxScheduleSelectionCalendarCellComponent, selector: "dbx-schedule-selection-calendar-cell", inputs: ["day"] }, { kind: "component", type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, selector: "dbx-schedule-selection-calendar-selection-toggle-button", inputs: ["disabled"] }, { kind: "pipe", type: i1$5.CalendarDatePipe, name: "calendarDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-schedule-selection-calendar', imports: [NgClass, CalendarModule, DbxCalendarBaseComponent, DbxInjectionComponent, DbxButtonSpacerDirective, DbxScheduleSelectionCalendarCellComponent, DbxScheduleSelectionCalendarSelectionToggleButtonComponent], providers: [DbxCalendarStore], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<dbx-calendar-base class=\"dbx-schedule-selection-calendar\" [ngClass]=\"readonlySignal() ? 'dbx-schedule-selection-calendar-readonly' : ''\">\n  <ng-container controls>\n    @if (showClearSelectionButtonSignal()) {\n      <dbx-schedule-selection-calendar-selection-toggle-button [disabled]=\"readonlySignal()\"></dbx-schedule-selection-calendar-selection-toggle-button>\n      <dbx-button-spacer></dbx-button-spacer>\n    }\n    <dbx-injection [config]=\"datePopoverButtonInjectionConfigSignal()\"></dbx-injection>\n  </ng-container>\n  <div class=\"dbx-calendar-content dbx-calendar-content-month\">\n    <mwl-calendar-month-view [refresh]=\"refresh$\" [viewDate]=\"viewDateSignal()!\" [events]=\"eventsSignal()\" (dayClicked)=\"dayClicked($event.day)\" (eventClicked)=\"eventClicked('Clicked', $event.event)\" (beforeViewRender)=\"beforeMonthViewRender($event)\" [cellTemplate]=\"monthDayCellTemplate\"></mwl-calendar-month-view>\n  </div>\n</dbx-calendar-base>\n\n<!-- Cell -->\n<ng-template #monthDayCellTemplate let-day=\"day\" let-locale=\"locale\">\n  <div class=\"cal-cell-top\">\n    @if (day.badgeTotal > 0) {\n      <span class=\"cal-day-badge\">{{ day.badgeTotal }}</span>\n    }\n    <span class=\"cal-day-number\">{{ day.date | calendarDate: 'monthViewDayNumber' : locale }}</span>\n  </div>\n  <dbx-schedule-selection-calendar-cell [day]=\"day\"></dbx-schedule-selection-calendar-cell>\n</ng-template>\n" }]
-        }] });
+        }], propDecorators: { clickEvent: [{ type: i0.Output, args: ["clickEvent"] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
 
 /**
  * Token used to configure the default DbxScheduleSelectionCalendarDatePopupConfig for DbxScheduleSelectionCalendarDateDialogComponent.
@@ -1494,8 +1494,8 @@ class DbxScheduleSelectionCalendarDateDialogComponent extends AbstractDialogDire
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxScheduleSelectionCalendarDateDialogComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DbxScheduleSelectionCalendarDateDialogComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <dbx-dialog-content class="dbx-schedule-selection-calendar-date-dialog">
       <dbx-dialog-content-close (close)="close()"></dbx-dialog-content-close>
       <dbx-schedule-selection-calendar></dbx-schedule-selection-calendar>
@@ -1503,7 +1503,7 @@ class DbxScheduleSelectionCalendarDateDialogComponent extends AbstractDialogDire
     </dbx-dialog-content>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: DbxDialogModule }, { kind: "directive", type: i1$3.DbxDialogContentDirective, selector: "dbx-dialog-content,[dbxDialogContent],.dbx-dialog-content", inputs: ["width"] }, { kind: "component", type: i1$3.DbxDialogContentFooterComponent, selector: "dbx-dialog-content-footer", inputs: ["config", "closeText", "buttonColor"], outputs: ["close"] }, { kind: "component", type: i1$3.DbxDialogContentCloseComponent, selector: "dbx-dialog-content-close", inputs: ["padded"], outputs: ["close"] }, { kind: "component", type: DbxScheduleSelectionCalendarComponent, selector: "dbx-schedule-selection-calendar", inputs: ["config", "readonly"], outputs: ["clickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -1522,18 +1522,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class DbxScheduleSelectionCalendarDateDialogButtonComponent {
     injector = inject(Injector);
     matDialog = inject(MatDialog);
-    buttonText = input('Customize');
-    disabled = input();
-    contentConfig = input();
+    buttonText = input('Customize', ...(ngDevMode ? [{ debugName: "buttonText" }] : []));
+    disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
+    contentConfig = input(...(ngDevMode ? [undefined, { debugName: "contentConfig" }] : []));
     clickCustomize() {
         DbxScheduleSelectionCalendarDateDialogComponent.openDialog(this.matDialog, { injector: this.injector, contentConfig: this.contentConfig() });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: DbxScheduleSelectionCalendarDateDialogButtonComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-dialog-button", inputs: { buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, contentConfig: { classPropertyName: "contentConfig", publicName: "contentConfig", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: DbxScheduleSelectionCalendarDateDialogButtonComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-dialog-button", inputs: { buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, contentConfig: { classPropertyName: "contentConfig", publicName: "contentConfig", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <dbx-button [raised]="true" color="accent" [text]="buttonText()" [disabled]="disabled()" (buttonClick)="clickCustomize()"></dbx-button>
-  `, isInline: true, dependencies: [{ kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-date-dialog-button',
@@ -1544,7 +1544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }] });
+        }], propDecorators: { buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], contentConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentConfig", required: false }] }] } });
 
 class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
     compact = inject(CompactContextStore, { optional: true });
@@ -1659,8 +1659,8 @@ class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
         this._exclusionsSub.destroy();
         this._formControlObs.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormCalendarDateScheduleRangeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxFormCalendarDateScheduleRangeFieldComponent, isStandalone: true, selector: "ng-component", providers: [provideCalendarScheduleSelectionStoreIfParentIsUnavailable()], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxFormCalendarDateScheduleRangeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DbxFormCalendarDateScheduleRangeFieldComponent, isStandalone: true, selector: "ng-component", providers: [provideCalendarScheduleSelectionStoreIfParentIsUnavailable()], usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-schedule-selection-field">
       <dbx-schedule-selection-calendar-date-range [openPickerOnTextClick]="openPickerOnTextClick" [showCustomize]="showCustomize" [required]="required" [disabled]="isReadonlyOrDisabled" [label]="label" [hint]="description">
         <dbx-schedule-selection-calendar-date-dialog-button customizeButton [disabled]="disabledSignal()" [contentConfig]="dialogContentConfig"></dbx-schedule-selection-calendar-date-dialog-button>
@@ -1669,7 +1669,7 @@ class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "component", type: DbxScheduleSelectionCalendarDateRangeComponent, selector: "dbx-schedule-selection-calendar-date-range", inputs: ["required", "openPickerOnTextClick", "label", "hint", "disabled", "showCustomize"] }, { kind: "component", type: DbxScheduleSelectionCalendarDateDialogButtonComponent, selector: "dbx-schedule-selection-calendar-date-dialog-button", inputs: ["buttonText", "disabled", "contentConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormCalendarDateScheduleRangeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxFormCalendarDateScheduleRangeFieldComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -1689,13 +1689,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 const importsAndExports$1 = [DbxFormCalendarDateScheduleRangeFieldComponent];
 class DbxFormDateScheduleRangeFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, imports: [DbxFormCalendarDateScheduleRangeFieldComponent, i1$6.FormlyModule], exports: [DbxFormCalendarDateScheduleRangeFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, imports: [importsAndExports$1, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, imports: [DbxFormCalendarDateScheduleRangeFieldComponent, i1$6.FormlyModule], exports: [DbxFormCalendarDateScheduleRangeFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, imports: [importsAndExports$1, FormlyModule.forChild({
                 types: [{ name: 'date-schedule-range', component: DbxFormCalendarDateScheduleRangeFieldComponent }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1727,8 +1727,8 @@ const importsAndExports = [
     DbxFormFormlyWrapperModule
 ];
 class DbxFormCalendarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormCalendarModule, imports: [DbxScheduleSelectionCalendarComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxFormCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: DbxFormCalendarModule, imports: [DbxScheduleSelectionCalendarComponent,
             DbxScheduleSelectionCalendarDateDaysComponent,
             DbxScheduleSelectionCalendarDateDaysFormComponent,
             DbxScheduleSelectionCalendarDateRangeComponent,
@@ -1755,7 +1755,7 @@ class DbxFormCalendarModule {
             DbxScheduleSelectionCalendarSelectionToggleButtonComponent,
             //
             DbxFormFormlyWrapperModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormCalendarModule, imports: [DbxScheduleSelectionCalendarComponent,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxFormCalendarModule, imports: [DbxScheduleSelectionCalendarComponent,
             DbxScheduleSelectionCalendarDateDaysComponent,
             DbxScheduleSelectionCalendarDateDaysFormComponent,
             DbxScheduleSelectionCalendarDateRangeComponent,
@@ -1771,7 +1771,7 @@ class DbxFormCalendarModule {
             //
             DbxFormFormlyWrapperModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormCalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxFormCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: importsAndExports,