@dereekb/dbx-form 13.7.0 → 13.9.0

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

@@ -1,14 +1,14 @@
 import * as i1 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 { formlyField, propsAndConfigForFieldConfig, dbxForgeToggleField, AbstractSyncForgeFormDirective, DbxForgeFormComponentImportsModule, dbxForgeFormComponentProviders, DBX_FORGE_FORM_COMPONENT_TEMPLATE, DbxFormSourceDirective, DbxActionFormDirective, formlyFlexLayoutWrapper, formlyToggleField, AbstractSyncFormlyFormDirective, DbxFormlyFormComponentImportsModule, DbxFormFormlyWrapperModule, DbxFormFormlyBooleanFieldModule, dbxFormlyFormComponentProviders, DBX_FORMLY_FORM_COMPONENT_TEMPLATE } 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, Optional, SkipSelf, Injector, 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 { switchMap, first, tap, map, distinctUntilChanged, shareReplay, of, combineLatestWith, BehaviorSubject, filter, combineLatest, EMPTY, startWith, throttleTime, skip } 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 { isInAllowedDaysOfWeekSet, mapValuesToSet, unique, mergeArrays, iterableToArray, isIterable, firstValueFromIterable, minAndMaxNumber, range, toggleInSet, removeFromSet, addToSet, isIndexNumberInIndexRangeFunction, getDaysOfWeekNames, reduceBooleansWithAnd, mergeObjects, KeyValueTypleValueFilter, filterFromPOJO } from '@dereekb/util';
 import { ComponentStore } from '@ngrx/component-store';
 import { endOfDay, startOfDay, isBefore, endOfWeek } from 'date-fns';
 import * as i1$1 from '@dereekb/dbx-core';
@@ -28,10 +28,13 @@ import * as i1$4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i1$5 from '@ngx-formly/core';
 import { FormlyModule } from '@ngx-formly/core';
+import { DEFAULT_PROPS, DEFAULT_VALIDATION_MESSAGES } from '@ng-forge/dynamic-forms';
+import { setupMetaTracking, resolveValueFieldContext, buildValueFieldInputs } from '@ng-forge/dynamic-forms/integration';
 
 /**
  * Creates a Formly field configuration for a date schedule range picker with calendar-based selection.
  *
+ * @deprecated Use dbxForgeDateScheduleRangeField() from the forge API instead.
  * @param config - Optional schedule range field configuration overrides
  * @returns A validated Formly field configuration for date schedule range selection
  */
@@ -207,12 +210,7 @@ class DbxCalendarScheduleSelectionStore extends ComponentStore {
     inputStart$ = this.state$.pipe(map((x) => x.inputStart), distinctUntilChanged(isSameDate), shareReplay(1));
     inputEnd$ = this.state$.pipe(map((x) => x.inputEnd), distinctUntilChanged(isSameDate), shareReplay(1));
     currentInputRange$ = this.state$.pipe(map(({ inputStart, inputEnd }) => ({ start: inputStart, end: inputEnd })), distinctUntilChanged((a, b) => isSameDateRange(a, b)), map((x) => ({ inputStart: x.start, inputEnd: x.end })), map((x) => {
-        if (x.inputStart && x.inputEnd) {
-            return x;
-        }
-        else {
-            return undefined;
-        }
+        return x.inputStart && x.inputEnd ? x : undefined;
     }), shareReplay(1));
     inputRange$ = this.currentInputRange$.pipe(filterMaybe(), shareReplay(1));
     isEnabledFilterDayFunction$ = this.state$.pipe(map((x) => x.isEnabledFilterDay), distinctUntilChanged(), shareReplay(1));
@@ -311,10 +309,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: "21.2.3", ngImport: i0, type: DbxCalendarScheduleSelectionStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxCalendarScheduleSelectionStore });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxCalendarScheduleSelectionStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxCalendarScheduleSelectionStore });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxCalendarScheduleSelectionStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxCalendarScheduleSelectionStore, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 /**
@@ -538,9 +536,7 @@ function updateStateWithTimezoneValue(state, timezone) {
         };
         return updateStateWithDateCellScheduleRangeValue({ ...state, outputTimezone: timezone, outputTimezoneNormal: timezoneNormal }, newRange);
     }
-    else {
-        return { ...state, outputTimezone: timezone, outputTimezoneNormal: timezoneNormal }; // no change in value
-    }
+    return { ...state, outputTimezone: timezone, outputTimezoneNormal: timezoneNormal }; // no change in value
 }
 /**
  * Updates the state from an external date cell schedule range value, converting timezone-aware inputs
@@ -580,15 +576,15 @@ function updateStateWithDateCellScheduleRangeValue(state, inputChange) {
     if (isSameValue) {
         return state;
     }
-    else {
-        if (change != null) {
-            const nextState = { ...state, inputStart: change.start, inputEnd: change.end, toggledIndexes: new Set(change.ex) };
-            return updateStateWithChangedScheduleDays(finalizeNewCalendarScheduleSelectionState(nextState), expandDateCellScheduleDayCodes(change.w || '89'));
-        }
-        else {
-            return noSelectionCalendarScheduleSelectionState(state); // clear selection, retain disabled days
-        }
+    if (change != null) {
+        // The incoming ex indexes are relative to change.start, but toggledIndexes must be
+        // relative to state.start. Adjust by the offset between them.
+        const inputStartIndex = state.indexFactory(change.start);
+        const adjustedEx = inputStartIndex !== 0 && change.ex ? change.ex.map((i) => i + inputStartIndex) : (change.ex ?? []);
+        const nextState = { ...state, inputStart: change.start, inputEnd: change.end, toggledIndexes: new Set(adjustedEx) };
+        return updateStateWithChangedScheduleDays(finalizeNewCalendarScheduleSelectionState(nextState), expandDateCellScheduleDayCodes(change.w || '89'));
     }
+    return noSelectionCalendarScheduleSelectionState(state); // clear selection, retain disabled days
 }
 /**
  * Updates the default schedule day codes (used when no explicit schedule days are set) and recalculates allowed days.
@@ -603,9 +599,7 @@ function updateStateWithChangedDefaultScheduleDays(state, change) {
     if (dateCellScheduleDayCodesAreSetsEquivalent(defaultScheduleDays, currentDefaultScheduleDays)) {
         return state; // no change
     }
-    else {
-        return finalizeUpdateStateWithChangedScheduleDays(state, { ...state, defaultScheduleDays });
-    }
+    return finalizeUpdateStateWithChangedScheduleDays(state, { ...state, defaultScheduleDays });
 }
 /**
  * Updates the explicit schedule day codes override and recalculates allowed days of the week.
@@ -632,9 +626,7 @@ function updateStateWithChangedScheduleDays(state, change) {
     if (newScheduleDays === undefined) {
         return state;
     }
-    else {
-        return finalizeUpdateStateWithChangedScheduleDays(state, { ...state, scheduleDays: newScheduleDays ?? undefined });
-    }
+    return finalizeUpdateStateWithChangedScheduleDays(state, { ...state, scheduleDays: newScheduleDays ?? undefined });
 }
 /**
  * Switches between single and multiple selection mode, trimming the selection to a single value when switching to single mode.
@@ -650,14 +642,10 @@ function updateStateWithSelectionMode(state, selectionMode) {
         if (selectionMode === 'multiple') {
             return nextState;
         }
-        else {
-            const currentSelectionRange = computeCalendarScheduleSelectionDateCellRange(nextState);
-            return currentSelectionRange ? updateStateWithChangedDates(nextState, { set: [currentSelectionRange.i], invertSetBehavior: true }) : nextState;
-        }
-    }
-    else {
-        return state;
+        const currentSelectionRange = computeCalendarScheduleSelectionDateCellRange(nextState);
+        return currentSelectionRange ? updateStateWithChangedDates(nextState, { set: [currentSelectionRange.i], invertSetBehavior: true }) : nextState;
     }
+    return state;
 }
 /**
  * Finalizes a schedule days change by recalculating allowed days of the week and updating toggled indexes accordingly.
@@ -672,16 +660,14 @@ function finalizeUpdateStateWithChangedScheduleDays(previousState, nextState) {
     if (dateCellScheduleDayCodesAreSetsEquivalent(nextScheduleDays, previousScheduleDays)) {
         return nextState; // the default or input schedule changed but the schedule is still the same, so no need for an update.
     }
-    else {
-        const effectiveScheduleDays = new Set(simplifyDateCellScheduleDayCodes(nextScheduleDays));
-        const allowedDaysOfWeek = expandDateCellScheduleDayCodesToDayOfWeekSet(nextScheduleDays);
-        return finalizeNewCalendarScheduleSelectionState({
-            ...nextState,
-            // update the effective schedule days and allowed days of week
-            effectiveScheduleDays,
-            allowedDaysOfWeek
-        });
-    }
+    const effectiveScheduleDays = new Set(simplifyDateCellScheduleDayCodes(nextScheduleDays));
+    const allowedDaysOfWeek = expandDateCellScheduleDayCodesToDayOfWeekSet(nextScheduleDays);
+    return finalizeNewCalendarScheduleSelectionState({
+        ...nextState,
+        // update the effective schedule days and allowed days of week
+        effectiveScheduleDays,
+        allowedDaysOfWeek
+    });
 }
 /**
  * Applies date changes (toggle, add, remove, set, selectAll, or reset) to the calendar selection state,
@@ -832,10 +818,8 @@ function updateStateWithChangedDates(state, change) {
     if (rangeAndExclusion) {
         return finalizeNewCalendarScheduleSelectionState({ ...nextState, toggledIndexes: new Set(rangeAndExclusion.excluded), inputStart: rangeAndExclusion.start, inputEnd: rangeAndExclusion.end });
     }
-    else {
-        // no selected days
-        return noSelectionCalendarScheduleSelectionState(nextState);
-    }
+    // no selected days
+    return noSelectionCalendarScheduleSelectionState(nextState);
 }
 /**
  * Clears all date selections from the state, retaining other configuration like schedule days and filter.
@@ -928,7 +912,7 @@ function computeScheduleSelectionValue(state) {
     let end = rangeEnd;
     // If computeSelectionResultRelativeToFilter is true, then we need to offset the values to be relative to that start.
     if (computeSelectionResultRelativeToFilter && filter?.start) {
-        start = filter.start; // always start at the filter's start date
+        start = filter.start; // start at the filter's start date
         let startInSystemTimezone = start;
         if (filter.timezone) {
             timezone = filter.timezone;
@@ -939,8 +923,26 @@ function computeScheduleSelectionValue(state) {
         const rangeStartIndex = systemIndexFactory(rangeStart);
         const startIndex = systemIndexFactory(startInSystemTimezone);
         const filterStartIndexOffset = rangeStartIndex - startIndex;
-        filterOffsetExcludedRange = range(0, filterStartIndexOffset);
-        indexOffset = indexOffset - filterStartIndexOffset;
+        // When minMaxDateRange constrains the start to after filter.start,
+        // use rangeStart as the output start instead of filter.start.
+        // This prevents outputting a start date that violates the minMaxDateRange
+        // and avoids the round-trip corruption when the value is synced back to the store.
+        if (filterStartIndexOffset > 0 && state.minMaxDateRange?.start) {
+            // rangeStart already respects minMaxDateRange. Convert it to the filter's timezone for the output.
+            if (filter.timezone) {
+                const filterNormal = dateTimezoneUtcNormal(filter.timezone);
+                start = filterNormal.startOfDayInTargetTimezone(rangeStart);
+            }
+            else {
+                start = rangeStart;
+            }
+            // No filter offset exclusions needed since start is at the selection start.
+            // indexOffset stays as dateCellRange.i (relative to state.start → rangeStart).
+        }
+        else {
+            filterOffsetExcludedRange = range(0, filterStartIndexOffset);
+            indexOffset = indexOffset - filterStartIndexOffset;
+        }
     }
     const excluded = computeSelectionResultRelativeToFilter
         ? allExcluded.filter((x) => {
@@ -1051,12 +1053,7 @@ function computeCalendarScheduleSelectionDateCellRange(state) {
             }
         }
     }
-    if (startRange != null && endRange != null) {
-        return { i: startRange, to: endRange };
-    }
-    else {
-        return undefined;
-    }
+    return startRange != null && endRange != null ? { i: startRange, to: endRange } : undefined;
 }
 
 /**
@@ -1064,17 +1061,17 @@ function computeCalendarScheduleSelectionDateCellRange(state) {
  */
 class DbxCalendarScheduleSelectionStoreProviderBlock {
     dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore, { skipSelf: true });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock, decorators: [{
             type: Injectable
         }] });
 class DbxCalendarScheduleSelectionStoreInjectionBlockDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.3", type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, isStandalone: true, selector: "[dbxCalendarScheduleSelectionStoreParentBlocker]", providers: [DbxCalendarScheduleSelectionStoreProviderBlock], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, isStandalone: true, selector: "[dbxCalendarScheduleSelectionStoreParentBlocker]", providers: [DbxCalendarScheduleSelectionStoreProviderBlock], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxCalendarScheduleSelectionStoreParentBlocker]',
@@ -1109,41 +1106,43 @@ function provideCalendarScheduleSelectionStoreIfParentIsUnavailable() {
 }
 
 /**
- * Creates form fields for selecting which days of the week are enabled in a schedule selection calendar,
- * wrapped in a responsive flex layout.
+ * Creates forge form fields for selecting which days of the week are enabled in a schedule selection calendar
+ * as a vertical list of toggle fields with styled boxes.
  *
- * @returns An array of Formly field configs with toggle fields for each day of the week
+ * This is the forge equivalent of {@link dbxScheduleSelectionCalendarDateDaysFormFields}.
+ *
+ * @returns A FormConfig with toggle fields for each day of the week
  */
-function dbxScheduleSelectionCalendarDateDaysFormFields() {
-    const fields = dbxScheduleSelectionCalendarDateDaysFormDayFields();
-    return [flexLayoutWrapper(fields, { relative: true, size: 3 })];
+function dbxScheduleSelectionCalendarDateDaysForgeFormFields() {
+    return { fields: dbxScheduleSelectionCalendarDateDaysForgeFormDayFields() };
 }
 /**
- * Creates an array of toggle field configs, one for each day of the week, keyed by lowercase day name.
+ * Creates an array of forge toggle field definitions, one for each day of the week, keyed by lowercase day name.
  *
- * @returns An array of toggle Formly field configs for each day of the week
+ * @returns An array of forge toggle field definitions for each day of the week
  */
-function dbxScheduleSelectionCalendarDateDaysFormDayFields() {
+function dbxScheduleSelectionCalendarDateDaysForgeFormDayFields() {
     return getDaysOfWeekNames(false).map((dayOfWeekName) => {
-        return toggleField({
+        return dbxForgeToggleField({
             key: dayOfWeekName.toLowerCase(),
-            label: dayOfWeekName
+            label: dayOfWeekName,
+            styledBox: false
         });
     });
 }
 
-class DbxScheduleSelectionCalendarDateDaysFormComponent extends AbstractSyncFormlyFormDirective {
-    fields = dbxScheduleSelectionCalendarDateDaysFormFields();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.3", 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 });
+class DbxScheduleSelectionCalendarDateDaysForgeFormComponent extends AbstractSyncForgeFormDirective {
+    formConfig = dbxScheduleSelectionCalendarDateDaysForgeFormFields();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysForgeFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DbxScheduleSelectionCalendarDateDaysForgeFormComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-days-forge-form", providers: dbxForgeFormComponentProviders(), usesInheritance: true, ngImport: i0, template: "<dbx-forge></dbx-forge>", isInline: true, dependencies: [{ kind: "ngmodule", type: DbxForgeFormComponentImportsModule }, { kind: "component", type: i1.DbxForgeFormComponent, selector: "dbx-forge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysForgeFormComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'dbx-schedule-selection-calendar-date-days-form',
-                    template: DBX_FORMLY_FORM_COMPONENT_TEMPLATE,
-                    providers: dbxFormlyFormComponentProviders(),
-                    imports: [DbxFormlyFormComponentImportsModule, DbxFormFormlyWrapperModule, DbxFormFormlyBooleanFieldModule],
+                    selector: 'dbx-schedule-selection-calendar-date-days-forge-form',
+                    template: DBX_FORGE_FORM_COMPONENT_TEMPLATE,
+                    providers: dbxForgeFormComponentProviders(),
+                    imports: [DbxForgeFormComponentImportsModule],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
@@ -1163,23 +1162,23 @@ class DbxScheduleSelectionCalendarDateDaysComponent {
         this.dbxCalendarScheduleSelectionStore.setScheduleDays(new Set(dateCellScheduleDayCodesFromEnabledDays(value)));
         return of(true);
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.3", 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.4", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", 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>
+      <dbx-schedule-selection-calendar-date-days-forge-form dbxActionForm [dbxFormSource]="template$" [dbxActionFormIsModified]="isFormModified"></dbx-schedule-selection-calendar-date-days-forge-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]", 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: DbxScheduleSelectionCalendarDateDaysForgeFormComponent, selector: "dbx-schedule-selection-calendar-date-days-forge-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: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-date-days',
                     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>
+      <dbx-schedule-selection-calendar-date-days-forge-form dbxActionForm [dbxFormSource]="template$" [dbxActionFormIsModified]="isFormModified"></dbx-schedule-selection-calendar-date-days-forge-form>
     </div>
   `,
-                    imports: [DbxScheduleSelectionCalendarDateDaysFormComponent, DbxFormSourceDirective, DbxActionModule, DbxActionFormDirective],
+                    imports: [DbxScheduleSelectionCalendarDateDaysForgeFormComponent, DbxFormSourceDirective, DbxActionModule, DbxActionFormDirective],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
@@ -1215,12 +1214,7 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
     });
     errorStateMatcher = {
         isErrorState: (control, _form) => {
-            if (control) {
-                return (control.invalid && (control.dirty || control.touched)) || (control.touched && this.range.invalid);
-            }
-            else {
-                return false;
-            }
+            return control ? (control.invalid && (control.dirty || control.touched)) || (control.touched && this.range.invalid) : false;
         }
     };
     minDate$ = this.dbxCalendarScheduleSelectionStore.minDate$;
@@ -1325,17 +1319,17 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
     pickerClosed() {
         this._pickerOpened.next(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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\">\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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxScheduleSelectionCalendarDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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\">\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: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarDateRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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\">\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: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.3", 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.4", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", 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">
@@ -1344,7 +1338,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: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-date-popover-content',
@@ -1372,8 +1366,8 @@ class DbxScheduleSelectionCalendarDatePopoverComponent extends AbstractPopoverDi
             injector
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.3", 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.4", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", 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>
@@ -1381,7 +1375,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: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-date-popover',
@@ -1410,9 +1404,7 @@ class DbxScheduleSelectionCalendarDatePopoverButtonComponent {
             const endString = formatToMonthDayString(x.end);
             return startString === endString ? startString : `${formatToMonthDayString(x.start)} - ${formatToMonthDayString(x.end)}`;
         }
-        else {
-            return 'Pick a Date Range';
-        }
+        return 'Pick a Date Range';
     }), shareReplay(1));
     disabledSignal = toSignal(this.disabled$, { initialValue: false });
     buttonTextSignal = toSignal(this.buttonText$, { initialValue: 'Pick a Date Range' });
@@ -1422,12 +1414,12 @@ class DbxScheduleSelectionCalendarDatePopoverButtonComponent {
             DbxScheduleSelectionCalendarDatePopoverComponent.openPopover(this.popoverService, { origin: buttonElement, injector: this.injector });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.3", 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.4", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", 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", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-date-popover-button',
@@ -1448,15 +1440,15 @@ class DbxScheduleSelectionCalendarCellComponent {
     contentSignal = toSignal(this.cellContent$, { initialValue: {} });
     iconSignal = computed(() => this.contentSignal().icon, ...(ngDevMode ? [{ debugName: "iconSignal" }] : /* istanbul ignore next */ []));
     textSignal = computed(() => this.contentSignal().text, ...(ngDevMode ? [{ debugName: "textSignal" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxScheduleSelectionCalendarCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxScheduleSelectionCalendarCellComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-cell',
@@ -1519,12 +1511,12 @@ class DbxScheduleSelectionCalendarSelectionToggleButtonComponent {
     toggleSelection() {
         this.dbxCalendarScheduleSelectionStore.toggleSelection();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.3", 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.4", ngImport: i0, type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", 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", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-selection-toggle-button',
@@ -1601,9 +1593,7 @@ class DbxScheduleSelectionCalendarComponent {
         if (x) {
             return of(true);
         }
-        else {
-            return this.readonly$.pipe(map((x) => !x));
-        }
+        return this.readonly$.pipe(map((x) => !x));
     }), distinctUntilChanged(), shareReplay(1));
     showClearSelectionButton$ = this.config$.pipe(map((config) => config?.showClearSelectionButton ?? true), combineLatestWith(this.showButtons$), map((x) => reduceBooleansWithAnd(x)), distinctUntilChanged(), shareReplay(1));
     datePopoverButtonInjectionConfig$ = this.config$.pipe(map((x) => x?.buttonInjectionConfig), switchMapDbxInjectionComponentConfig(DbxScheduleSelectionCalendarDatePopoverButtonComponent), combineLatestWith(this.showButtons$), map(([config, showButton]) => (showButton ? config : undefined)), shareReplay(1));
@@ -1674,10 +1664,10 @@ class DbxScheduleSelectionCalendarComponent {
     beforeMonthViewRender(renderEvent) {
         this.beforeMonthViewRenderSignal()?.(renderEvent);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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: "component", type: 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: CalendarDatePipe, name: "calendarDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxScheduleSelectionCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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: "component", type: 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: CalendarDatePipe, name: "calendarDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxScheduleSelectionCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-schedule-selection-calendar', imports: [NgClass, CalendarMonthViewComponent, CalendarDatePipe, 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 }] }] } });
@@ -1710,8 +1700,8 @@ class DbxScheduleSelectionCalendarDateDialogComponent extends AbstractDialogDire
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.3", type: DbxScheduleSelectionCalendarDateDialogComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", 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>
@@ -1719,7 +1709,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: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -1744,12 +1734,12 @@ class DbxScheduleSelectionCalendarDateDialogButtonComponent {
     clickCustomize() {
         DbxScheduleSelectionCalendarDateDialogComponent.openDialog(this.matDialog, { injector: this.injector, contentConfig: this.contentConfig() });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.3", 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.4", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", 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", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-date-dialog-button',
@@ -1762,6 +1752,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }], 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 }] }] } });
 
+/**
+ * @deprecated Use DbxForgeCalendarDateScheduleRangeFieldComponent instead.
+ */
 class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
     compact = inject(CompactContextStore, { optional: true });
     dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
@@ -1875,8 +1868,8 @@ class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
         this._exclusionsSub.destroy();
         this._formControlObs.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormCalendarDateScheduleRangeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.3", 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.4", ngImport: i0, type: DbxFormCalendarDateScheduleRangeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", 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>
@@ -1885,7 +1878,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: "21.2.3", ngImport: i0, type: DbxFormCalendarDateScheduleRangeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormCalendarDateScheduleRangeFieldComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -1904,14 +1897,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
         }] });
 
 const importsAndExports$1 = [DbxFormCalendarDateScheduleRangeFieldComponent];
+/**
+ * @deprecated Use provideDbxForgeCalendarFieldDeclarations() instead.
+ */
 class DbxFormDateScheduleRangeFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, imports: [DbxFormCalendarDateScheduleRangeFieldComponent, i1$5.FormlyModule], exports: [DbxFormCalendarDateScheduleRangeFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, imports: [importsAndExports$1, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, imports: [DbxFormCalendarDateScheduleRangeFieldComponent, i1$5.FormlyModule], exports: [DbxFormCalendarDateScheduleRangeFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, imports: [importsAndExports$1, FormlyModule.forChild({
                 types: [{ name: 'date-schedule-range', component: DbxFormCalendarDateScheduleRangeFieldComponent }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1924,7 +1920,273 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }] });
 
-// export * from './selection';
+/**
+ * The custom forge field type name for the calendar date schedule range field.
+ */
+const FORGE_CALENDAR_DATE_SCHEDULE_RANGE_FIELD_TYPE = 'dbx-forge-calendar-date-schedule-range';
+/**
+ * Creates a forge field definition for a calendar date schedule range picker.
+ *
+ * This is the forge equivalent of {@link dateScheduleRangeField}.
+ *
+ * @param config - Optional schedule range field configuration overrides
+ * @returns A validated forge field definition for date schedule range selection
+ */
+function dbxForgeDateScheduleRangeField(config = {}) {
+    const { key = 'schedule', label, description, required, readonly: isReadonly, appearance, allowTextInput, hideCustomize, allowCustomizeWithoutDateRange, outputTimezone, defaultScheduleDays, minMaxDateRange, filter, exclusions, dialogContentConfig, computeSelectionResultRelativeToFilter, initialSelectionState, cellContentFactory, customDetailsConfig } = config;
+    const props = filterFromPOJO({
+        label: label ?? 'Schedule',
+        description,
+        appearance,
+        allowTextInput,
+        hideCustomize,
+        allowCustomizeWithoutDateRange,
+        outputTimezone,
+        defaultScheduleDays,
+        minMaxDateRange,
+        filter,
+        exclusions,
+        dialogContentConfig,
+        computeSelectionResultRelativeToFilter,
+        initialSelectionState,
+        cellContentFactory,
+        customDetailsConfig
+    });
+    return filterFromPOJO({
+        key,
+        type: FORGE_CALENDAR_DATE_SCHEDULE_RANGE_FIELD_TYPE,
+        label: label ?? 'Schedule',
+        value: undefined,
+        required,
+        readonly: isReadonly,
+        props: Object.keys(props).length > 0 ? props : undefined
+    });
+}
+
+/**
+ * Forge custom field component for calendar date schedule range selection.
+ *
+ * This is the forge equivalent of {@link DbxFormCalendarDateScheduleRangeFieldComponent}.
+ * It bridges ng-forge Signal Forms with the {@link DbxCalendarScheduleSelectionStore}.
+ *
+ * Registered as ng-forge type 'dbx-forge-calendar-date-schedule-range'.
+ */
+class DbxForgeCalendarDateScheduleRangeFieldComponent {
+    compact = inject(CompactContextStore, { optional: true });
+    dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
+    elementRef = inject((ElementRef));
+    // Standard ng-forge value field inputs
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
+    validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
+    defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
+    // Subscription management
+    _syncSub = new SubscriptionObject();
+    _valueSub = new SubscriptionObject();
+    _timezoneSub = new SubscriptionObject();
+    _minMaxDateRangeSub = new SubscriptionObject();
+    _defaultWeekSub = new SubscriptionObject();
+    _filterSub = new SubscriptionObject();
+    _exclusionsSub = new SubscriptionObject();
+    // Field value signal (double-call pattern: field()() to get FieldState)
+    fieldValue = computed(() => {
+        const state = this.field()?.();
+        return state?.value?.();
+    }, ...(ngDevMode ? [{ debugName: "fieldValue" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => {
+        const state = this.field()?.();
+        return state?.disabled?.() ?? false;
+    }, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isRequiredSignal = computed(() => {
+        const state = this.field()?.();
+        return state?.required?.() ?? false;
+    }, ...(ngDevMode ? [{ debugName: "isRequiredSignal" }] : /* istanbul ignore next */ []));
+    // Computed props
+    labelTextSignal = computed(() => this.props()?.label, ...(ngDevMode ? [{ debugName: "labelTextSignal" }] : /* istanbul ignore next */ []));
+    descriptionSignal = computed(() => this.props()?.description, ...(ngDevMode ? [{ debugName: "descriptionSignal" }] : /* istanbul ignore next */ []));
+    isReadonlyOrDisabledSignal = computed(() => this.props()?.readonly || this.isDisabled(), ...(ngDevMode ? [{ debugName: "isReadonlyOrDisabledSignal" }] : /* istanbul ignore next */ []));
+    openPickerOnTextClickSignal = computed(() => this.props()?.allowTextInput !== true, ...(ngDevMode ? [{ debugName: "openPickerOnTextClickSignal" }] : /* istanbul ignore next */ []));
+    showCustomizeSignal = computed(() => !this.props()?.hideCustomize, ...(ngDevMode ? [{ debugName: "showCustomizeSignal" }] : /* istanbul ignore next */ []));
+    dialogContentConfigSignal = computed(() => this.props()?.dialogContentConfig, ...(ngDevMode ? [{ debugName: "dialogContentConfigSignal" }] : /* istanbul ignore next */ []));
+    customDetailsConfigSignal = computed(() => this.props()?.customDetailsConfig, ...(ngDevMode ? [{ debugName: "customDetailsConfigSignal" }] : /* istanbul ignore next */ []));
+    allowCustomizeWithoutDateRangeSignal = computed(() => this.props()?.allowCustomizeWithoutDateRange ?? false, ...(ngDevMode ? [{ debugName: "allowCustomizeWithoutDateRangeSignal" }] : /* istanbul ignore next */ []));
+    disableCustomizeSignal = computed(() => {
+        if (this.allowCustomizeWithoutDateRangeSignal()) {
+            return false;
+        }
+        return !this.fieldValue();
+    }, ...(ngDevMode ? [{ debugName: "disableCustomizeSignal" }] : /* istanbul ignore next */ []));
+    _setFieldValue(value) {
+        try {
+            const state = this.field()?.();
+            if (state?.value?.set) {
+                state.value.set(value);
+            }
+        }
+        catch {
+            // field input may not be available yet (NG0950) during early store emissions
+        }
+    }
+    constructor() {
+        setupMetaTracking(this.elementRef, this.meta, { selector: 'dbx-schedule-selection-calendar-date-range' });
+        // Convert field value to observable for store sync
+        const fieldValue$ = toObservable(this.fieldValue);
+        // Sync field value → store (skip initial emission)
+        this._syncSub.subscription = fieldValue$
+            .pipe(skip(1), distinctUntilChanged((a, b) => isSameDateCellScheduleDateRange(a, b)))
+            .subscribe((x) => {
+            this.dbxCalendarScheduleSelectionStore.setDateScheduleRangeValue(x);
+        });
+        // Sync store → field value
+        this._valueSub.subscription = this.dbxCalendarScheduleSelectionStore.currentDateCellScheduleRangeValue$.subscribe((x) => {
+            this._setFieldValue(x);
+        });
+        // Set up store configuration from props (runs once on init via effect)
+        effect(() => {
+            const p = this.props();
+            if (!p) {
+                return;
+            }
+            const { outputTimezone, minMaxDateRange, filter, exclusions, defaultScheduleDays, initialSelectionState, computeSelectionResultRelativeToFilter, cellContentFactory } = p;
+            if (filter != null) {
+                this._filterSub.subscription = this.dbxCalendarScheduleSelectionStore.setFilter(asObservable(filter));
+            }
+            if (defaultScheduleDays != null) {
+                this._defaultWeekSub.subscription = this.dbxCalendarScheduleSelectionStore.setDefaultScheduleDays(asObservable(defaultScheduleDays));
+            }
+            if (minMaxDateRange != null) {
+                this._minMaxDateRangeSub.subscription = this.dbxCalendarScheduleSelectionStore.setMinMaxDateRange(asObservable(minMaxDateRange));
+            }
+            if (exclusions != null) {
+                this._exclusionsSub.subscription = this.dbxCalendarScheduleSelectionStore.setExclusions(asObservable(exclusions));
+            }
+            if (outputTimezone != null) {
+                this.dbxCalendarScheduleSelectionStore.setOutputTimezone(asObservable(outputTimezone));
+            }
+            if (initialSelectionState !== undefined) {
+                this.dbxCalendarScheduleSelectionStore.setInitialSelectionState(initialSelectionState);
+            }
+            if (computeSelectionResultRelativeToFilter != null) {
+                this.dbxCalendarScheduleSelectionStore.setComputeSelectionResultRelativeToFilter(computeSelectionResultRelativeToFilter);
+            }
+            if (cellContentFactory != null) {
+                this.dbxCalendarScheduleSelectionStore.setCellContentFactory(cellContentFactory);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._syncSub.destroy();
+        this._valueSub.destroy();
+        this._filterSub.destroy();
+        this._timezoneSub.destroy();
+        this._minMaxDateRangeSub.destroy();
+        this._defaultWeekSub.destroy();
+        this._exclusionsSub.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeCalendarDateScheduleRangeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: DbxForgeCalendarDateScheduleRangeFieldComponent, isStandalone: true, selector: "dbx-forge-calendar-date-schedule-range-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideCalendarScheduleSelectionStoreIfParentIsUnavailable()], ngImport: i0, template: `
+    <div class="dbx-schedule-selection-field">
+      <dbx-schedule-selection-calendar-date-range [openPickerOnTextClick]="openPickerOnTextClickSignal()" [showCustomize]="showCustomizeSignal()" [required]="isRequiredSignal()" [disabled]="isReadonlyOrDisabledSignal()" [label]="labelTextSignal()" [hint]="descriptionSignal()">
+        <dbx-schedule-selection-calendar-date-dialog-button customizeButton [disabled]="disableCustomizeSignal()" [contentConfig]="dialogContentConfigSignal()"></dbx-schedule-selection-calendar-date-dialog-button>
+        <dbx-injection [config]="customDetailsConfigSignal()"></dbx-injection>
+      </dbx-schedule-selection-calendar-date-range>
+    </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: "21.2.4", ngImport: i0, type: DbxForgeCalendarDateScheduleRangeFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-forge-calendar-date-schedule-range-field',
+                    template: `
+    <div class="dbx-schedule-selection-field">
+      <dbx-schedule-selection-calendar-date-range [openPickerOnTextClick]="openPickerOnTextClickSignal()" [showCustomize]="showCustomizeSignal()" [required]="isRequiredSignal()" [disabled]="isReadonlyOrDisabledSignal()" [label]="labelTextSignal()" [hint]="descriptionSignal()">
+        <dbx-schedule-selection-calendar-date-dialog-button customizeButton [disabled]="disableCustomizeSignal()" [contentConfig]="dialogContentConfigSignal()"></dbx-schedule-selection-calendar-date-dialog-button>
+        <dbx-injection [config]="customDetailsConfigSignal()"></dbx-injection>
+      </dbx-schedule-selection-calendar-date-range>
+    </div>
+  `,
+                    providers: [provideCalendarScheduleSelectionStoreIfParentIsUnavailable()],
+                    imports: [DbxInjectionComponent, DbxScheduleSelectionCalendarDateRangeComponent, DbxScheduleSelectionCalendarDateDialogButtonComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
+/**
+ * Custom mapper for the forge calendar date schedule range field.
+ *
+ * Uses the standard buildValueFieldInputs to bridge the ng-forge field definition
+ * to the component's input signals.
+ *
+ * @param fieldDef - Field definition configuration
+ * @param fieldDef.key - Form model key for the field
+ * @returns Signal containing a Record of input names to values for ngComponentOutlet
+ */
+function calendarDateScheduleRangeFieldMapper(fieldDef) {
+    const ctx = resolveValueFieldContext();
+    const defaultProps = inject(DEFAULT_PROPS);
+    const defaultValidationMessages = inject(DEFAULT_VALIDATION_MESSAGES);
+    return computed(() => {
+        return buildValueFieldInputs(fieldDef, ctx, defaultProps?.(), defaultValidationMessages?.());
+    });
+}
+
+var calendar_schedule_forge_field_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    DbxForgeCalendarDateScheduleRangeFieldComponent: DbxForgeCalendarDateScheduleRangeFieldComponent,
+    calendarDateScheduleRangeFieldMapper: calendarDateScheduleRangeFieldMapper
+});
+
+/**
+ * Creates form fields for selecting which days of the week are enabled in a schedule selection calendar,
+ * wrapped in a responsive flex layout.
+ *
+ * @deprecated Use dbxScheduleSelectionCalendarDateDaysForgeFormFields() instead.
+ * @returns An array of Formly field configs with toggle fields for each day of the week
+ */
+function dbxScheduleSelectionCalendarDateDaysFormFields() {
+    const fields = dbxScheduleSelectionCalendarDateDaysFormDayFields();
+    return [formlyFlexLayoutWrapper(fields, { relative: true, size: 3 })];
+}
+/**
+ * Creates an array of toggle field configs, one for each day of the week, keyed by lowercase day name.
+ *
+ * @deprecated Use forge toggle fields directly.
+ * @returns An array of toggle Formly field configs for each day of the week
+ */
+function dbxScheduleSelectionCalendarDateDaysFormDayFields() {
+    return getDaysOfWeekNames(false).map((dayOfWeekName) => {
+        return formlyToggleField({
+            key: dayOfWeekName.toLowerCase(),
+            label: dayOfWeekName
+        });
+    });
+}
+
+/**
+ * @deprecated Use DbxScheduleSelectionCalendarDateDaysForgeFormComponent instead.
+ */
+class DbxScheduleSelectionCalendarDateDaysFormComponent extends AbstractSyncFormlyFormDirective {
+    fields = dbxScheduleSelectionCalendarDateDaysFormFields();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", 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: "21.2.4", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-schedule-selection-calendar-date-days-form',
+                    template: DBX_FORMLY_FORM_COMPONENT_TEMPLATE,
+                    providers: dbxFormlyFormComponentProviders(),
+                    imports: [DbxFormlyFormComponentImportsModule, DbxFormFormlyWrapperModule, DbxFormFormlyBooleanFieldModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }] });
 
 const importsAndExports = [
     DbxScheduleSelectionCalendarComponent,
@@ -1942,9 +2204,12 @@ const importsAndExports = [
     //
     DbxFormFormlyWrapperModule
 ];
+/**
+ * @deprecated Import components directly and use provideDbxForgeCalendarFieldDeclarations().
+ */
 class DbxFormCalendarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: DbxFormCalendarModule, imports: [DbxScheduleSelectionCalendarComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormCalendarModule, imports: [DbxScheduleSelectionCalendarComponent,
             DbxScheduleSelectionCalendarDateDaysComponent,
             DbxScheduleSelectionCalendarDateDaysFormComponent,
             DbxScheduleSelectionCalendarDateRangeComponent,
@@ -1971,7 +2236,7 @@ class DbxFormCalendarModule {
             DbxScheduleSelectionCalendarSelectionToggleButtonComponent,
             //
             DbxFormFormlyWrapperModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormCalendarModule, imports: [DbxScheduleSelectionCalendarComponent,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormCalendarModule, imports: [DbxScheduleSelectionCalendarComponent,
             DbxScheduleSelectionCalendarDateDaysComponent,
             DbxScheduleSelectionCalendarDateDaysFormComponent,
             DbxScheduleSelectionCalendarDateRangeComponent,
@@ -1987,7 +2252,7 @@ class DbxFormCalendarModule {
             //
             DbxFormFormlyWrapperModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormCalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: importsAndExports,
@@ -1995,9 +2260,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }] });
 
+/**
+ * Forge calendar date schedule range field type definition.
+ *
+ * Registers the custom calendar date schedule range field component with ng-forge's dynamic form system.
+ * Uses lazy loading for the component.
+ */
+const DbxForgeCalendarDateScheduleRangeFieldType = {
+    name: FORGE_CALENDAR_DATE_SCHEDULE_RANGE_FIELD_TYPE,
+    loadComponent: () => Promise.resolve().then(function () { return calendar_schedule_forge_field_component; }).then((m) => m.DbxForgeCalendarDateScheduleRangeFieldComponent),
+    mapper: calendarDateScheduleRangeFieldMapper
+};
+/**
+ * All custom dbx-form/calendar forge field type definitions.
+ */
+const DBX_FORGE_CALENDAR_FIELD_TYPES = [DbxForgeCalendarDateScheduleRangeFieldType];
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CalendarScheduleSelectionDayState, DEFAULT_DBX_SCHEDULE_SELECTION_CALENDAR_DATE_POPUP_CONTENT_CONFIG_TOKEN, DEFAULT_SCHEDULE_SELECTION_CALENDAR_DATE_POPOVER_KEY, DbxCalendarScheduleSelectionStore, DbxCalendarScheduleSelectionStoreInjectionBlockDirective, DbxCalendarScheduleSelectionStoreProviderBlock, DbxFormCalendarDateScheduleRangeFieldComponent, DbxFormCalendarModule, DbxFormDateScheduleRangeFieldModule, DbxScheduleSelectionCalendarCellComponent, DbxScheduleSelectionCalendarComponent, DbxScheduleSelectionCalendarDateDaysComponent, DbxScheduleSelectionCalendarDateDaysFormComponent, DbxScheduleSelectionCalendarDateDialogButtonComponent, DbxScheduleSelectionCalendarDateDialogComponent, DbxScheduleSelectionCalendarDatePopoverButtonComponent, DbxScheduleSelectionCalendarDatePopoverComponent, DbxScheduleSelectionCalendarDatePopoverContentComponent, DbxScheduleSelectionCalendarDateRangeComponent, DbxScheduleSelectionCalendarSelectionToggleButtonComponent, calendarScheduleMaxDate, calendarScheduleMinAndMaxDateRange, calendarScheduleMinDate, calendarScheduleStartBeingUsedFromFilter, computeCalendarScheduleSelectionDateCellRange, computeCalendarScheduleSelectionRange, computeScheduleSelectionRangeAndExclusion, computeScheduleSelectionValue, dateScheduleRangeField, dbxScheduleSelectionCalendarBeforeMonthViewRenderFactory, dbxScheduleSelectionCalendarDateDaysFormDayFields, dbxScheduleSelectionCalendarDateDaysFormFields, defaultCalendarScheduleSelectionCellContentFactory, finalizeNewCalendarScheduleSelectionState, finalizeUpdateStateWithChangedScheduleDays, initialCalendarScheduleSelectionState, isEnabledDayInCalendarScheduleSelectionState, noSelectionCalendarScheduleSelectionState, provideCalendarScheduleSelectionStoreIfParentIsUnavailable, updateStateWithChangedDates, updateStateWithChangedDefaultScheduleDays, updateStateWithChangedRange, updateStateWithChangedScheduleDays, updateStateWithComputeSelectionResultRelativeToFilter, updateStateWithDateCellScheduleRangeValue, updateStateWithExclusions, updateStateWithFilter, updateStateWithInitialSelectionState, updateStateWithMinMaxDateRange, updateStateWithSelectionMode, updateStateWithTimezoneValue };
+export { CalendarScheduleSelectionDayState, DBX_FORGE_CALENDAR_FIELD_TYPES, DEFAULT_DBX_SCHEDULE_SELECTION_CALENDAR_DATE_POPUP_CONTENT_CONFIG_TOKEN, DEFAULT_SCHEDULE_SELECTION_CALENDAR_DATE_POPOVER_KEY, DbxCalendarScheduleSelectionStore, DbxCalendarScheduleSelectionStoreInjectionBlockDirective, DbxCalendarScheduleSelectionStoreProviderBlock, DbxForgeCalendarDateScheduleRangeFieldComponent, DbxFormCalendarDateScheduleRangeFieldComponent, DbxFormCalendarModule, DbxFormDateScheduleRangeFieldModule, DbxScheduleSelectionCalendarCellComponent, DbxScheduleSelectionCalendarComponent, DbxScheduleSelectionCalendarDateDaysComponent, DbxScheduleSelectionCalendarDateDaysForgeFormComponent, DbxScheduleSelectionCalendarDateDaysFormComponent, DbxScheduleSelectionCalendarDateDialogButtonComponent, DbxScheduleSelectionCalendarDateDialogComponent, DbxScheduleSelectionCalendarDatePopoverButtonComponent, DbxScheduleSelectionCalendarDatePopoverComponent, DbxScheduleSelectionCalendarDatePopoverContentComponent, DbxScheduleSelectionCalendarDateRangeComponent, DbxScheduleSelectionCalendarSelectionToggleButtonComponent, FORGE_CALENDAR_DATE_SCHEDULE_RANGE_FIELD_TYPE, calendarDateScheduleRangeFieldMapper, calendarScheduleMaxDate, calendarScheduleMinAndMaxDateRange, calendarScheduleMinDate, calendarScheduleStartBeingUsedFromFilter, computeCalendarScheduleSelectionDateCellRange, computeCalendarScheduleSelectionRange, computeScheduleSelectionRangeAndExclusion, computeScheduleSelectionValue, dateScheduleRangeField, dbxForgeDateScheduleRangeField, dbxScheduleSelectionCalendarBeforeMonthViewRenderFactory, dbxScheduleSelectionCalendarDateDaysForgeFormDayFields, dbxScheduleSelectionCalendarDateDaysForgeFormFields, dbxScheduleSelectionCalendarDateDaysFormDayFields, dbxScheduleSelectionCalendarDateDaysFormFields, defaultCalendarScheduleSelectionCellContentFactory, finalizeNewCalendarScheduleSelectionState, finalizeUpdateStateWithChangedScheduleDays, initialCalendarScheduleSelectionState, isEnabledDayInCalendarScheduleSelectionState, noSelectionCalendarScheduleSelectionState, provideCalendarScheduleSelectionStoreIfParentIsUnavailable, updateStateWithChangedDates, updateStateWithChangedDefaultScheduleDays, updateStateWithChangedRange, updateStateWithChangedScheduleDays, updateStateWithComputeSelectionResultRelativeToFilter, updateStateWithDateCellScheduleRangeValue, updateStateWithExclusions, updateStateWithFilter, updateStateWithInitialSelectionState, updateStateWithMinMaxDateRange, updateStateWithSelectionMode, updateStateWithTimezoneValue };
 //# sourceMappingURL=dereekb-dbx-form-calendar.mjs.map