@dereekb/dbx-form 11.1.8 → 12.0.0

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

@@ -1,9 +1,9 @@
-import * as i2$1 from '@dereekb/dbx-form';
-import { formlyField, propsAndConfigForFieldConfig, flexLayoutWrapper, toggleField, AbstractSyncFormlyFormDirective, provideFormlyContext, DbxFormModule, DbxFormlyModule } from '@dereekb/dbx-form';
-import * as i1$1 from '@dereekb/dbx-web';
-import { AbstractPopoverDirective, DbxPopoverService, AbstractDialogDirective, sanitizeDbxDialogContentConfig, CompactContextStore, DbxContentLayoutModule, DbxTextModule, DbxActionModule, DbxButtonModule, DbxDialogInteractionModule, DbxPopoverInteractionModule } from '@dereekb/dbx-web';
+import * as i1 from '@dereekb/dbx-form';
+import { formlyField, propsAndConfigForFieldConfig, flexLayoutWrapper, toggleField, AbstractSyncFormlyFormDirective, dbxFormlyFormComponentProviders, DbxFormlyFormComponentImportsModule, DBX_FORMLY_FORM_COMPONENT_TEMPLATE, DbxFormSourceDirective, DbxActionFormDirective } from '@dereekb/dbx-form';
+import * as i1$3 from '@dereekb/dbx-web';
+import { DbxActionModule, DbxButtonSpacerDirective, DbxContentContainerDirective, DbxLabelBlockComponent, AbstractPopoverDirective, DbxPopoverInteractionModule, DbxPopoverService, DbxButtonComponent, AbstractDialogDirective, sanitizeDbxDialogContentConfig, DbxDialogInteractionModule, CompactContextStore } from '@dereekb/dbx-web';
 import * as i0 from '@angular/core';
-import { Injectable, inject, Directive, Injector, Optional, SkipSelf, Component, Input, ViewChild, ElementRef, ChangeDetectionStrategy, EventEmitter, Output, InjectionToken, NgZone, NgModule } from '@angular/core';
+import { Injectable, inject, Directive, Injector, Optional, SkipSelf, Component, ChangeDetectionStrategy, viewChild, input, effect, computed, ElementRef, output, InjectionToken, NgModule } from '@angular/core';
 import { FieldType } from '@ngx-formly/material';
 import { switchMap, first, tap, map, distinctUntilChanged, shareReplay, of, combineLatestWith, BehaviorSubject, filter, combineLatest, EMPTY, startWith, throttleTime } from 'rxjs';
 import { filterMaybe, distinctUntilHasDifferentValues, SubscriptionObject, asObservableFromGetter, asObservable } from '@dereekb/rxjs';
@@ -11,30 +11,24 @@ import { DateCellScheduleDayCode, expandDateCellScheduleDayCodesToDayOfWeekSet,
 import { isInAllowedDaysOfWeekSet, mapValuesToSet, unique, mergeArrays, iterableToArray, isIterable, firstValueFromIterable, minAndMaxNumber, range, toggleInSet, removeFromSet, addToSet, isIndexNumberInIndexRangeFunction, getDaysOfWeekNames, reduceBooleansWithAnd, mergeObjects, KeyValueTypleValueFilter } from '@dereekb/util';
 import { ComponentStore } from '@ngrx/component-store';
 import { startOfDay, endOfDay, isBefore, endOfWeek } from 'date-fns';
-import * as i1$2 from '@dereekb/dbx-core';
-import { switchMapDbxInjectionComponentConfig, DbxInjectionComponentModule, DbxDatePipeModule } from '@dereekb/dbx-core';
-import * as i2$3 from '@dereekb/dbx-web/calendar';
-import { DbxCalendarStore, prepareAndSortCalendarEvents, DbxCalendarModule } from '@dereekb/dbx-web/calendar';
-import * as i1 from '@angular/forms';
+import * as i1$1 from '@dereekb/dbx-core';
+import { TimezoneAbbreviationPipe, switchMapDbxInjectionComponentConfig, DbxInjectionComponent } from '@dereekb/dbx-core';
+import { toSignal, toObservable } from '@angular/core/rxjs-interop';
+import { MatDialog } from '@angular/material/dialog';
+import * as i1$5 from 'angular-calendar';
+import { CalendarModule } from 'angular-calendar';
+import { DbxCalendarStore, prepareAndSortCalendarEvents, DbxCalendarBaseComponent } from '@dereekb/dbx-web/calendar';
+import * as i2 from '@angular/forms';
 import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i3 from '@angular/material/form-field';
+import * as i1$2 from '@angular/material/form-field';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule } from '@angular/material/form-field';
-import * as i5 from '@angular/material/datepicker';
+import * as i3 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { MatDialog } from '@angular/material/dialog';
-import * as i5$1 from 'angular-calendar';
-import { CalendarModule, CalendarDayModule, CalendarWeekModule } from 'angular-calendar';
-import * as i6 from '@ngbracket/ngx-layout/extended';
-import * as i2$2 from '@angular/material/icon';
+import { NgClass } from '@angular/common';
+import * as i1$4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i1$3 from '@ngx-formly/core';
+import * as i1$6 from '@ngx-formly/core';
 import { FormlyModule } from '@ngx-formly/core';
-import { MatInputModule } from '@angular/material/input';
-import { MatButtonModule } from '@angular/material/button';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
 
 function dateScheduleRangeField(config = {}) {
     const { key = 'schedule', appearance, hideCustomize, allowTextInput, filter, outputTimezone, initialSelectionState, computeSelectionResultRelativeToFilter, exclusions, defaultScheduleDays, minMaxDateRange, cellContentFactory, dialogContentConfig, customDetailsConfig } = config;
@@ -87,10 +81,11 @@ const defaultCalendarScheduleSelectionCellContentFactory = (day) => {
             text = 'Add';
             break;
     }
-    return {
+    const result = {
         icon,
         text
     };
+    return result;
 };
 
 function initialCalendarScheduleSelectionState() {
@@ -278,12 +273,12 @@ 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: "16.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStore });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxCalendarScheduleSelectionStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxCalendarScheduleSelectionStore });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxCalendarScheduleSelectionStore, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 function updateStateWithInitialSelectionState(state, initialSelectionState) {
     const { toggledIndexes } = state;
     if (toggledIndexes.size === 0 && initialSelectionState === 'all') {
@@ -874,21 +869,22 @@ function computeCalendarScheduleSelectionDateCellRange(state) {
  */
 class DbxCalendarScheduleSelectionStoreProviderBlock {
     dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore, { skipSelf: true });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxCalendarScheduleSelectionStoreProviderBlock, decorators: [{
             type: Injectable
         }] });
 class DbxCalendarScheduleSelectionStoreInjectionBlockDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, selector: "[dbxCalendarScheduleSelectionStoreParentBlocker]", providers: [DbxCalendarScheduleSelectionStoreProviderBlock], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, isStandalone: true, selector: "[dbxCalendarScheduleSelectionStoreParentBlocker]", providers: [DbxCalendarScheduleSelectionStoreProviderBlock], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxCalendarScheduleSelectionStoreInjectionBlockDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxCalendarScheduleSelectionStoreParentBlocker]',
-                    providers: [DbxCalendarScheduleSelectionStoreProviderBlock]
+                    providers: [DbxCalendarScheduleSelectionStoreProviderBlock],
+                    standalone: true
                 }]
         }] });
 /**
@@ -913,28 +909,95 @@ function provideCalendarScheduleSelectionStoreIfParentIsUnavailable() {
     };
 }
 
+function dbxScheduleSelectionCalendarDateDaysFormFields() {
+    const fields = dbxScheduleSelectionCalendarDateDaysFormDayFields();
+    return [flexLayoutWrapper(fields, { relative: true, size: 3 })];
+}
+function dbxScheduleSelectionCalendarDateDaysFormDayFields() {
+    return getDaysOfWeekNames(false).map((dayOfWeekName) => {
+        return toggleField({
+            key: dayOfWeekName.toLowerCase(),
+            label: dayOfWeekName
+        });
+    });
+}
+
+class DbxScheduleSelectionCalendarDateDaysFormComponent extends AbstractSyncFormlyFormDirective {
+    fields = dbxScheduleSelectionCalendarDateDaysFormFields();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxScheduleSelectionCalendarDateDaysFormComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-days-form", providers: dbxFormlyFormComponentProviders(), usesInheritance: true, ngImport: i0, template: "<dbx-formly></dbx-formly>", isInline: true, dependencies: [{ kind: "ngmodule", type: DbxFormlyFormComponentImportsModule }, { kind: "component", type: i1.DbxFormlyComponent, selector: "dbx-formly", exportAs: ["formly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }] });
+
+class DbxScheduleSelectionCalendarDateDaysComponent {
+    dbxCalendarStore = inject(DbxCalendarStore);
+    dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
+    template$ = this.dbxCalendarScheduleSelectionStore.scheduleDays$.pipe(map(enabledDaysFromDateCellScheduleDayCodes), shareReplay(1));
+    isFormModified = (value) => {
+        const newSetValue = new Set(dateCellScheduleDayCodesFromEnabledDays(value));
+        return this.dbxCalendarScheduleSelectionStore.scheduleDays$.pipe(map((currentSet) => {
+            const result = !dateCellScheduleDayCodesAreSetsEquivalent(newSetValue, currentSet);
+            return result;
+        }));
+    };
+    updateScheduleDays = (value) => {
+        this.dbxCalendarScheduleSelectionStore.setScheduleDays(new Set(dateCellScheduleDayCodesFromEnabledDays(value)));
+        return of(true);
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxScheduleSelectionCalendarDateDaysComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-days", ngImport: i0, template: `
+    <div class="dbx-schedule-selection-calendar-date-days" dbxAction dbxActionAutoTrigger dbxActionEnforceModified [useInstantTriggerPreset]="true" [dbxActionHandler]="updateScheduleDays">
+      <dbx-schedule-selection-calendar-date-days-form dbxActionForm [dbxFormSource]="template$" [dbxActionFormIsModified]="isFormModified"></dbx-schedule-selection-calendar-date-days-form>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxScheduleSelectionCalendarDateDaysFormComponent, selector: "dbx-schedule-selection-calendar-date-days-form" }, { kind: "directive", type: DbxFormSourceDirective, selector: "[dbxFormSource]", inputs: ["dbxFormSourceMode", "dbxFormSource"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$1.DbxActionDirective, selector: "dbx-action,[dbxAction],dbx-action-context,[dbxActionContext]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$1.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$1.DbxActionEnforceModifiedDirective, selector: "[dbxActionEnforceModified]", inputs: ["dbxActionEnforceModified"] }, { kind: "directive", type: i1$1.DbxActionAutoTriggerDirective, selector: "dbxActionAutoTrigger,[dbxActionAutoTrigger]", inputs: ["triggerDebounce", "triggerThrottle", "triggerErrorThrottle", "maxErrorsForThrottle", "triggerLimit", "dbxActionAutoTrigger", "useFastTriggerPreset", "useInstantTriggerPreset"] }, { kind: "directive", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: ["dbxActionFormDisabledOnWorking", "dbxActionFormIsValid", "dbxActionFormIsEqual", "dbxActionFormIsModified", "dbxActionFormMapValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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>
+    </div>
+  `,
+                    imports: [DbxScheduleSelectionCalendarDateDaysFormComponent, DbxFormSourceDirective, DbxActionModule, DbxActionFormDirective],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }] });
+
 class DbxScheduleSelectionCalendarDateRangeComponent {
     dbxCalendarStore = inject(DbxCalendarStore);
     dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
     matFormFieldDefaultOptions = inject(MAT_FORM_FIELD_DEFAULT_OPTIONS, { optional: true });
-    _required = new BehaviorSubject(false);
-    required$ = this._required.asObservable();
+    picker = viewChild.required('picker');
+    required = input(false);
+    openPickerOnTextClick = input(true);
+    label = input('Enter a date range');
+    hint = input();
+    disabled = input();
+    showCustomize = input(false);
     timezone$ = this.dbxCalendarScheduleSelectionStore.effectiveOutputTimezone$;
-    openPickerOnTextClick = true;
-    picker;
-    label = 'Enter a date range';
-    hint;
-    set disabled(disabled) {
+    _disabledEffect = effect(() => {
+        const disabled = this.disabled();
         if (disabled) {
             this.range.disable();
         }
         else {
             this.range.enable();
         }
-    }
-    showCustomize = false;
+    });
     _pickerOpened = new BehaviorSubject(false);
-    _requiredSub = new SubscriptionObject();
     _syncSub = new SubscriptionObject();
     _valueSub = new SubscriptionObject();
     range = new FormGroup({
@@ -954,7 +1017,7 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
     minDate$ = this.dbxCalendarScheduleSelectionStore.minDate$;
     maxDate$ = this.dbxCalendarScheduleSelectionStore.maxDate$;
     timezoneReleventDate$ = this.dbxCalendarScheduleSelectionStore.currentDateRange$.pipe(map((currentDateRange) => {
-        return currentDateRange ? currentDateRange.start ?? currentDateRange.end : undefined ?? new Date();
+        return (currentDateRange ? (currentDateRange.start ?? currentDateRange.end) : undefined) ?? new Date();
     }), shareReplay(1));
     isCustomized$ = this.dbxCalendarScheduleSelectionStore.isCustomized$;
     currentErrorMessage$ = this.range.statusChanges.pipe(filter((x) => x === 'INVALID' || x === 'VALID'), map((x) => {
@@ -985,8 +1048,6 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
         }
         return currentErrorMessage;
     }), shareReplay(1));
-    pickerOpened$ = this._pickerOpened.asObservable();
-    defaultDatePickerFilter = () => true;
     datePickerFilter$ = combineLatest([this.dbxCalendarScheduleSelectionStore.isEnabledFilterDayFunction$, this.dbxCalendarScheduleSelectionStore.isInAllowedDaysOfWeekFunction$]).pipe(map(([isEnabled, isAllowedDayOfWeek]) => {
         const fn = (date) => {
             const result = date ? isAllowedDayOfWeek(date) && isEnabled(date) : true;
@@ -994,6 +1055,26 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
         };
         return fn;
     }), shareReplay(1));
+    timezoneSignal = toSignal(this.timezone$);
+    timezoneReleventDateSignal = toSignal(this.timezoneReleventDate$, { initialValue: new Date() });
+    isCustomizedSignal = toSignal(this.isCustomized$, { initialValue: false });
+    showCustomLabelSignal = computed(() => this.showCustomize() && this.isCustomizedSignal());
+    currentErrorMessageSignal = toSignal(this.currentErrorMessage$);
+    datePickerFilterSignal = toSignal(this.datePickerFilter$, { initialValue: (() => true) });
+    _requiredUpdateValidatorsEffect = effect(() => {
+        const validators = this.required()
+            ? [
+                (control) => {
+                    const range = control.value;
+                    if (!range || !range.start || !range.end) {
+                        return { required: true };
+                    }
+                    return null;
+                }
+            ]
+            : [];
+        this.range.setValidators(validators);
+    });
     ngOnInit() {
         this._syncSub.subscription = this.dbxCalendarScheduleSelectionStore.currentInputRange$.subscribe((x) => {
             this.range.setValue({
@@ -1017,38 +1098,17 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
                 this.dbxCalendarScheduleSelectionStore.setInputRange({ inputStart: x.start, inputEnd: x.end });
             }
         });
-        // add a required validator when needed
-        this._requiredSub.subscription = this._required.subscribe((x) => {
-            const validators = x
-                ? [
-                    (control) => {
-                        const range = control.value;
-                        if (!range || !range.start || !range.end) {
-                            return { required: true };
-                        }
-                        return null;
-                    }
-                ]
-                : [];
-            this.range.setValidators(validators);
-        });
     }
     ngOnDestroy() {
-        this._required.complete();
-        this._pickerOpened.complete();
-        this._requiredSub.destroy();
         this._syncSub.destroy();
         this._valueSub.destroy();
     }
-    get required() {
-        return this._required.value;
-    }
-    set required(required) {
-        this._required.next(required);
-    }
     clickedDateRangeInput() {
-        if (this.openPickerOnTextClick) {
-            this.picker.open();
+        if (this.openPickerOnTextClick()) {
+            const picker = this.picker();
+            if (picker) {
+                picker.open();
+            }
         }
     }
     pickerOpened() {
@@ -1057,106 +1117,26 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
     pickerClosed() {
         this._pickerOpened.next(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDateRangeComponent, selector: "dbx-schedule-selection-calendar-date-range", inputs: { openPickerOnTextClick: "openPickerOnTextClick", label: "label", hint: "hint", disabled: "disabled", showCustomize: "showCustomize", required: "required" }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<mat-form-field class=\"dbx-schedule-selection-calendar-date-range-field\">\n  <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n  <div class=\"dbx-schedule-selection-calendar-date-range-field-content\">\n    <!-- Primary Content -->\n    <div class=\"dbx-flex-bar\">\n      <div *ngIf=\"showCustomize && (isCustomized$ | async)\" class=\"date-range-field-customized\">\n        <span class=\"dbx-accent-bg date-range-field-customized-text\">Custom</span>\n      </div>\n      <dbx-button-spacer></dbx-button-spacer>\n      <mat-datepicker-toggle class=\"mat-datepicker-button-highlight\" matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <dbx-button-spacer></dbx-button-spacer>\n      <mat-date-range-input (click)=\"clickedDateRangeInput()\" [required]=\"required$ | async\" [dateFilter]=\"(datePickerFilter$ | async) ?? defaultDatePickerFilter\" [formGroup]=\"range\" [rangePicker]=\"picker\">\n        <input [errorStateMatcher]=\"errorStateMatcher\" matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n        <input [errorStateMatcher]=\"errorStateMatcher\" matEndDate formControlName=\"end\" placeholder=\"End date\" />\n      </mat-date-range-input>\n      <span *ngIf=\"timezone$ | async\" class=\"dbx-schedule-selection-timezone dbx-faint dbx-nowrap dbx-icon-spacer\">{{ timezone$ | async | timezoneAbbreviation: (timezoneReleventDate$ | async) }}</span>\n      <div *ngIf=\"showCustomize\">\n        <dbx-button-spacer></dbx-button-spacer>\n        <ng-content select=\"[customizeButton]\"></ng-content>\n      </div>\n      <mat-date-range-picker #picker (opened)=\"pickerOpened()\" (closed)=\"pickerClosed()\"></mat-date-range-picker>\n    </div>\n    <!-- Custom Content -->\n    <div>\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <mat-error *ngIf=\"currentErrorMessage$ | async\">{{ currentErrorMessage$ | async }}</mat-error>\n  <mat-hint>{{ hint }}</mat-hint>\n</mat-form-field>\n", dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i1$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i5.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i5.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i5.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i5.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TimezoneAbbreviationPipe, name: "timezoneAbbreviation" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxScheduleSelectionCalendarDateRangeComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-range", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, openPickerOnTextClick: { classPropertyName: "openPickerOnTextClick", publicName: "openPickerOnTextClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showCustomize: { classPropertyName: "showCustomize", publicName: "showCustomize", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field class=\"dbx-schedule-selection-calendar-date-range-field\">\n  @if (label()) {\n    <mat-label>{{ label() }}</mat-label>\n  }\n  <div class=\"dbx-schedule-selection-calendar-date-range-field-content\">\n    <!-- Primary Content -->\n    <div class=\"dbx-flex-bar\">\n      @if (showCustomLabelSignal()) {\n        <div class=\"date-range-field-customized\">\n          <span class=\"dbx-accent-bg date-range-field-customized-text\">Custom</span>\n        </div>\n      }\n      <dbx-button-spacer></dbx-button-spacer>\n      <mat-datepicker-toggle class=\"mat-datepicker-button-highlight\" matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <dbx-button-spacer></dbx-button-spacer>\n      <mat-date-range-input (click)=\"clickedDateRangeInput()\" [required]=\"required()\" [dateFilter]=\"datePickerFilterSignal()\" [formGroup]=\"range\" [rangePicker]=\"picker\">\n        <input [errorStateMatcher]=\"errorStateMatcher\" matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n        <input [errorStateMatcher]=\"errorStateMatcher\" matEndDate formControlName=\"end\" placeholder=\"End date\" />\n      </mat-date-range-input>\n      @if (timezoneSignal()) {\n        <span class=\"dbx-schedule-selection-timezone dbx-faint dbx-nowrap dbx-icon-spacer\">{{ timezoneSignal() | timezoneAbbreviation: timezoneReleventDateSignal() }}</span>\n      }\n      @if (showCustomize()) {\n        <div>\n          <dbx-button-spacer></dbx-button-spacer>\n          <ng-content select=\"[customizeButton]\"></ng-content>\n        </div>\n      }\n      <mat-date-range-picker #picker (opened)=\"pickerOpened()\" (closed)=\"pickerClosed()\"></mat-date-range-picker>\n    </div>\n    <!-- Custom Content -->\n    <div>\n      <ng-content></ng-content>\n    </div>\n  </div>\n  @if (currentErrorMessageSignal()) {\n    <mat-error>{{ currentErrorMessageSignal() }}</mat-error>\n  }\n  <mat-hint>{{ hint() }}</mat-hint>\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "pipe", type: TimezoneAbbreviationPipe, name: "timezoneAbbreviation" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDateRangeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-schedule-selection-calendar-date-range', template: "<mat-form-field class=\"dbx-schedule-selection-calendar-date-range-field\">\n  <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n  <div class=\"dbx-schedule-selection-calendar-date-range-field-content\">\n    <!-- Primary Content -->\n    <div class=\"dbx-flex-bar\">\n      <div *ngIf=\"showCustomize && (isCustomized$ | async)\" class=\"date-range-field-customized\">\n        <span class=\"dbx-accent-bg date-range-field-customized-text\">Custom</span>\n      </div>\n      <dbx-button-spacer></dbx-button-spacer>\n      <mat-datepicker-toggle class=\"mat-datepicker-button-highlight\" matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <dbx-button-spacer></dbx-button-spacer>\n      <mat-date-range-input (click)=\"clickedDateRangeInput()\" [required]=\"required$ | async\" [dateFilter]=\"(datePickerFilter$ | async) ?? defaultDatePickerFilter\" [formGroup]=\"range\" [rangePicker]=\"picker\">\n        <input [errorStateMatcher]=\"errorStateMatcher\" matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n        <input [errorStateMatcher]=\"errorStateMatcher\" matEndDate formControlName=\"end\" placeholder=\"End date\" />\n      </mat-date-range-input>\n      <span *ngIf=\"timezone$ | async\" class=\"dbx-schedule-selection-timezone dbx-faint dbx-nowrap dbx-icon-spacer\">{{ timezone$ | async | timezoneAbbreviation: (timezoneReleventDate$ | async) }}</span>\n      <div *ngIf=\"showCustomize\">\n        <dbx-button-spacer></dbx-button-spacer>\n        <ng-content select=\"[customizeButton]\"></ng-content>\n      </div>\n      <mat-date-range-picker #picker (opened)=\"pickerOpened()\" (closed)=\"pickerClosed()\"></mat-date-range-picker>\n    </div>\n    <!-- Custom Content -->\n    <div>\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <mat-error *ngIf=\"currentErrorMessage$ | async\">{{ currentErrorMessage$ | async }}</mat-error>\n  <mat-hint>{{ hint }}</mat-hint>\n</mat-form-field>\n" }]
-        }], propDecorators: { openPickerOnTextClick: [{
-                type: Input
-            }], picker: [{
-                type: ViewChild,
-                args: ['picker']
-            }], label: [{
-                type: Input
-            }], hint: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], showCustomize: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }] } });
-
-function dbxScheduleSelectionCalendarDateDaysFormFields() {
-    const fields = dbxScheduleSelectionCalendarDateDaysFormDayFields();
-    return [flexLayoutWrapper(fields, { relative: true, size: 3 })];
-}
-function dbxScheduleSelectionCalendarDateDaysFormDayFields() {
-    return getDaysOfWeekNames(false).map((dayOfWeekName) => {
-        return toggleField({
-            key: dayOfWeekName.toLowerCase(),
-            label: dayOfWeekName
-        });
-    });
-}
-
-class DbxScheduleSelectionCalendarDateDaysFormComponent extends AbstractSyncFormlyFormDirective {
-    fields = dbxScheduleSelectionCalendarDateDaysFormFields();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDateDaysFormComponent, selector: "dbx-schedule-selection-calendar-date-days-form", providers: [provideFormlyContext()], usesInheritance: true, ngImport: i0, template: `
-    <dbx-formly></dbx-formly>
-  `, isInline: true, dependencies: [{ kind: "component", type: i2$1.DbxFormlyFormComponent, selector: "dbx-formly", exportAs: ["formly"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysFormComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: `
-    <dbx-formly></dbx-formly>
-  `,
-                    selector: 'dbx-schedule-selection-calendar-date-days-form',
-                    providers: [provideFormlyContext()]
-                }]
-        }] });
-
-class DbxScheduleSelectionCalendarDateDaysComponent {
-    dbxCalendarStore = inject(DbxCalendarStore);
-    dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
-    template$ = this.dbxCalendarScheduleSelectionStore.scheduleDays$.pipe(map(enabledDaysFromDateCellScheduleDayCodes), shareReplay(1));
-    isFormModified = (value) => {
-        const newSetValue = new Set(dateCellScheduleDayCodesFromEnabledDays(value));
-        return this.dbxCalendarScheduleSelectionStore.scheduleDays$.pipe(map((currentSet) => {
-            const result = !dateCellScheduleDayCodesAreSetsEquivalent(newSetValue, currentSet);
-            return result;
-        }));
-    };
-    updateScheduleDays = (value) => {
-        this.dbxCalendarScheduleSelectionStore.setScheduleDays(new Set(dateCellScheduleDayCodesFromEnabledDays(value)));
-        return of(true);
-    };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDaysComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDateDaysComponent, selector: "dbx-schedule-selection-calendar-date-days", ngImport: i0, template: `
-    <div class="dbx-schedule-selection-calendar-date-days" dbxAction dbxActionAutoTrigger dbxActionEnforceModified [instantTrigger]="true" [dbxActionHandler]="updateScheduleDays">
-      <dbx-schedule-selection-calendar-date-days-form dbxActionForm [dbxFormSource]="template$" [dbxActionFormModified]="isFormModified"></dbx-schedule-selection-calendar-date-days-form>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction],dbx-action-context,[dbxActionContext]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionEnforceModifiedDirective, selector: "[dbxActionEnforceModified]", inputs: ["dbxActionEnforceModified"] }, { kind: "directive", type: i1$2.DbxActionAutoTriggerDirective, selector: "dbxActionAutoTrigger, [dbxActionAutoTrigger]", inputs: ["dbxActionAutoTrigger", "triggerDebounce", "triggerThrottle", "triggerErrorThrottle", "fastTrigger", "instantTrigger", "triggerLimit"] }, { kind: "directive", type: i2$1.DbxActionFormDirective, selector: "[dbxActionForm]", inputs: ["dbxActionFormValidator", "dbxActionFormModified", "dbxActionFormMapValue", "formDisabledOnWorking"] }, { kind: "directive", type: i2$1.DbxFormSourceDirective, selector: "[dbxFormSource]", inputs: ["dbxFormSourceMode", "dbxFormSource"] }, { kind: "component", type: DbxScheduleSelectionCalendarDateDaysFormComponent, selector: "dbx-schedule-selection-calendar-date-days-form" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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 [instantTrigger]="true" [dbxActionHandler]="updateScheduleDays">
-      <dbx-schedule-selection-calendar-date-days-form dbxActionForm [dbxFormSource]="template$" [dbxActionFormModified]="isFormModified"></dbx-schedule-selection-calendar-date-days-form>
-    </div>
-  `
-                }]
+            args: [{ selector: 'dbx-schedule-selection-calendar-date-range', imports: [MatFormFieldModule, FormsModule, ReactiveFormsModule, DbxButtonSpacerDirective, MatDatepickerModule, TimezoneAbbreviationPipe], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<mat-form-field class=\"dbx-schedule-selection-calendar-date-range-field\">\n  @if (label()) {\n    <mat-label>{{ label() }}</mat-label>\n  }\n  <div class=\"dbx-schedule-selection-calendar-date-range-field-content\">\n    <!-- Primary Content -->\n    <div class=\"dbx-flex-bar\">\n      @if (showCustomLabelSignal()) {\n        <div class=\"date-range-field-customized\">\n          <span class=\"dbx-accent-bg date-range-field-customized-text\">Custom</span>\n        </div>\n      }\n      <dbx-button-spacer></dbx-button-spacer>\n      <mat-datepicker-toggle class=\"mat-datepicker-button-highlight\" matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <dbx-button-spacer></dbx-button-spacer>\n      <mat-date-range-input (click)=\"clickedDateRangeInput()\" [required]=\"required()\" [dateFilter]=\"datePickerFilterSignal()\" [formGroup]=\"range\" [rangePicker]=\"picker\">\n        <input [errorStateMatcher]=\"errorStateMatcher\" matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n        <input [errorStateMatcher]=\"errorStateMatcher\" matEndDate formControlName=\"end\" placeholder=\"End date\" />\n      </mat-date-range-input>\n      @if (timezoneSignal()) {\n        <span class=\"dbx-schedule-selection-timezone dbx-faint dbx-nowrap dbx-icon-spacer\">{{ timezoneSignal() | timezoneAbbreviation: timezoneReleventDateSignal() }}</span>\n      }\n      @if (showCustomize()) {\n        <div>\n          <dbx-button-spacer></dbx-button-spacer>\n          <ng-content select=\"[customizeButton]\"></ng-content>\n        </div>\n      }\n      <mat-date-range-picker #picker (opened)=\"pickerOpened()\" (closed)=\"pickerClosed()\"></mat-date-range-picker>\n    </div>\n    <!-- Custom Content -->\n    <div>\n      <ng-content></ng-content>\n    </div>\n  </div>\n  @if (currentErrorMessageSignal()) {\n    <mat-error>{{ currentErrorMessageSignal() }}</mat-error>\n  }\n  <mat-hint>{{ hint() }}</mat-hint>\n</mat-form-field>\n" }]
         }] });
 
 class DbxScheduleSelectionCalendarDatePopoverContentComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDatePopoverContentComponent, selector: "dbx-schedule-selection-calendar-date-popover-content", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxScheduleSelectionCalendarDatePopoverContentComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-popover-content", ngImport: i0, template: `
     <dbx-content-container padding="min" topPadding="normal">
       <dbx-schedule-selection-calendar-date-range [openPickerOnTextClick]="false"></dbx-schedule-selection-calendar-date-range>
       <dbx-label-block header="Allowed Days Of Week">
         <dbx-schedule-selection-calendar-date-days></dbx-schedule-selection-calendar-date-days>
       </dbx-label-block>
     </dbx-content-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.DbxContentContainerDirective, selector: "dbx-content-container,[dbxContentContainer],.dbx-content-container", inputs: ["grow", "padding", "topPadding"] }, { kind: "component", type: i1$1.DbxLabelBlockComponent, selector: "dbx-label-block", inputs: ["header"] }, { kind: "component", type: DbxScheduleSelectionCalendarDateDaysComponent, selector: "dbx-schedule-selection-calendar-date-days" }, { kind: "component", type: DbxScheduleSelectionCalendarDateRangeComponent, selector: "dbx-schedule-selection-calendar-date-range", inputs: ["openPickerOnTextClick", "label", "hint", "disabled", "showCustomize", "required"] }] });
+  `, 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: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-date-popover-content',
@@ -1167,7 +1147,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <dbx-schedule-selection-calendar-date-days></dbx-schedule-selection-calendar-date-days>
       </dbx-label-block>
     </dbx-content-container>
-  `
+  `,
+                    imports: [DbxContentContainerDirective, DbxScheduleSelectionCalendarDateRangeComponent, DbxLabelBlockComponent, DbxScheduleSelectionCalendarDateDaysComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }] });
 
@@ -1181,16 +1164,16 @@ class DbxScheduleSelectionCalendarDatePopoverComponent extends AbstractPopoverDi
             injector
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDatePopoverComponent, selector: "dbx-schedule-selection-calendar-date-popover", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxScheduleSelectionCalendarDatePopoverComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-popover", usesInheritance: true, ngImport: i0, template: `
     <dbx-popover-content>
       <dbx-popover-scroll-content>
         <dbx-schedule-selection-calendar-date-popover-content></dbx-schedule-selection-calendar-date-popover-content>
       </dbx-popover-scroll-content>
     </dbx-popover-content>
-  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxPopoverContentComponent, selector: "dbx-popover-content" }, { kind: "component", type: i1$1.DbxPopoverScrollContentComponent, selector: "dbx-popover-scroll-content" }, { kind: "component", type: DbxScheduleSelectionCalendarDatePopoverContentComponent, selector: "dbx-schedule-selection-calendar-date-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: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-date-popover',
@@ -1200,7 +1183,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <dbx-schedule-selection-calendar-date-popover-content></dbx-schedule-selection-calendar-date-popover-content>
       </dbx-popover-scroll-content>
     </dbx-popover-content>
-  `
+  `,
+                    imports: [DbxPopoverInteractionModule, DbxScheduleSelectionCalendarDatePopoverContentComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }] });
 
@@ -1208,7 +1194,7 @@ class DbxScheduleSelectionCalendarDatePopoverButtonComponent {
     injector = inject(Injector);
     popoverService = inject(DbxPopoverService);
     dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
-    buttonPopoverOrigin;
+    buttonPopoverOrigin = viewChild.required('buttonPopoverOrigin', { read: ElementRef });
     disabled$ = this.dbxCalendarScheduleSelectionStore.isViewReadonly$;
     buttonText$ = this.dbxCalendarScheduleSelectionStore.currentDateRange$.pipe(map((x) => {
         if (x?.start && x.end) {
@@ -1220,126 +1206,129 @@ class DbxScheduleSelectionCalendarDatePopoverButtonComponent {
             return 'Pick a Date Range';
         }
     }), shareReplay(1));
+    disabledSignal = toSignal(this.disabled$, { initialValue: false });
+    buttonTextSignal = toSignal(this.buttonText$, { initialValue: 'Pick a Date Range' });
     openPopover() {
-        DbxScheduleSelectionCalendarDatePopoverComponent.openPopover(this.popoverService, { origin: this.buttonPopoverOrigin, injector: this.injector });
+        const buttonElement = this.buttonPopoverOrigin();
+        if (buttonElement) {
+            DbxScheduleSelectionCalendarDatePopoverComponent.openPopover(this.popoverService, { origin: buttonElement, injector: this.injector });
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, selector: "dbx-schedule-selection-calendar-date-popover-button", viewQueries: [{ propertyName: "buttonPopoverOrigin", first: true, predicate: ["buttonPopoverOrigin"], descendants: true, read: ElementRef }], ngImport: i0, template: `
-    <dbx-button #buttonPopoverOrigin icon="date_range" [disabled]="disabled$ | async" [raised]="true" color="accent" [text]="buttonText$ | async" (buttonClick)="openPopover()"></dbx-button>
-  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxButtonComponent, selector: "dbx-button", inputs: ["type", "basic", "raised", "stroked", "flat", "iconOnly", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-popover-button", viewQueries: [{ propertyName: "buttonPopoverOrigin", first: true, predicate: ["buttonPopoverOrigin"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+    <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: ["type", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "raised", "stroked", "flat", "iconOnly", "fab"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-date-popover-button',
                     template: `
-    <dbx-button #buttonPopoverOrigin icon="date_range" [disabled]="disabled$ | async" [raised]="true" color="accent" [text]="buttonText$ | async" (buttonClick)="openPopover()"></dbx-button>
-  `
+    <dbx-button #buttonPopoverOrigin icon="date_range" [disabled]="disabledSignal()" [raised]="true" color="accent" [text]="buttonTextSignal()" (buttonClick)="openPopover()"></dbx-button>
+  `,
+                    imports: [DbxButtonComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
-        }], propDecorators: { buttonPopoverOrigin: [{
-                type: ViewChild,
-                args: ['buttonPopoverOrigin', { read: ElementRef }]
-            }] } });
+        }] });
 
 class DbxScheduleSelectionCalendarCellComponent {
     dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
-    content = {};
-    get icon() {
-        return this.content.icon;
-    }
-    get text() {
-        return this.content.text;
-    }
-    set day(day) {
-        this.dbxCalendarScheduleSelectionStore.cellContentFactory$.pipe(first()).subscribe((fn) => {
-            this.content = fn(day);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarCellComponent, selector: "dbx-schedule-selection-calendar-cell", inputs: { day: "day" }, host: { classAttribute: "dbx-schedule-selection-calendar-cell" }, ngImport: i0, template: `
-    <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
-    <span>{{ text }}</span>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    day = input.required();
+    day$ = toObservable(this.day);
+    cellContent$ = this.dbxCalendarScheduleSelectionStore.cellContentFactory$.pipe(switchMap((fn) => this.day$.pipe(map((x) => fn(x)))), shareReplay(1));
+    contentSignal = toSignal(this.cellContent$, { initialValue: {} });
+    iconSignal = computed(() => this.contentSignal().icon);
+    textSignal = computed(() => this.contentSignal().text);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxScheduleSelectionCalendarCellComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-cell", inputs: { day: { classPropertyName: "day", publicName: "day", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "dbx-schedule-selection-calendar-cell" }, ngImport: i0, template: `
+    @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: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarCellComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-cell',
                     template: `
-    <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
-    <span>{{ text }}</span>
+    @if (iconSignal()) {
+      <mat-icon>{{ iconSignal() }}</mat-icon>
+    }
+    <span>{{ textSignal() }}</span>
   `,
                     host: {
                         class: 'dbx-schedule-selection-calendar-cell'
                     },
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    imports: [MatIconModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
-        }], propDecorators: { day: [{
-                type: Input
-            }] } });
+        }] });
 
 /**
  * Toggle button for selecting and clearing the current selection.
  */
 class DbxScheduleSelectionCalendarSelectionToggleButtonComponent {
-    popoverService = inject(DbxPopoverService);
+    disabled = input();
     dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
-    injector = inject(Injector);
-    _disabled = new BehaviorSubject(false);
-    disableButton$ = this._disabled.pipe(switchMap((disabled) => {
+    selectionModeSignal = toSignal(this.dbxCalendarScheduleSelectionStore.selectionMode$, { initialValue: 'multiple' });
+    nextToggleSelectionSignal = toSignal(this.dbxCalendarScheduleSelectionStore.nextToggleSelection$, { initialValue: 'none' });
+    disableButtonSignal = computed(() => {
+        const disabled = this.disabled();
+        const nextToggleSelection = this.nextToggleSelectionSignal();
+        let disableButton = false;
         if (disabled) {
-            return of(true);
+            disableButton = true;
         }
         else {
-            return this.dbxCalendarScheduleSelectionStore.nextToggleSelection$.pipe(map((x) => !x));
+            disableButton = !nextToggleSelection;
         }
-    }), distinctUntilChanged(), shareReplay(1));
-    buttonDisplay$ = this.dbxCalendarScheduleSelectionStore.selectionMode$.pipe(switchMap((selectionMode) => {
-        return this.dbxCalendarScheduleSelectionStore.nextToggleSelection$.pipe(map((x) => {
-            let buttonDisplay;
-            switch (x) {
-                case 'all':
-                    buttonDisplay = {
-                        icon: 'select_all',
-                        text: 'Select All'
-                    };
-                    break;
-                default:
-                case 'none':
-                    buttonDisplay = {
-                        icon: 'clear',
-                        text: selectionMode === 'multiple' ? 'Clear All' : 'Clear'
-                    };
-                    break;
-            }
-            return buttonDisplay;
-        }));
-    }), shareReplay(1));
-    ngOnDestroy() {
-        this._disabled.complete();
-    }
+        return disableButton;
+    });
+    buttonDisplaySignal = computed(() => {
+        const selectionMode = this.selectionModeSignal();
+        const nextToggleSelection = this.nextToggleSelectionSignal();
+        let buttonDisplay;
+        switch (nextToggleSelection) {
+            case 'all':
+                buttonDisplay = {
+                    icon: 'select_all',
+                    text: 'Select All'
+                };
+                break;
+            default:
+            case 'none':
+                buttonDisplay = {
+                    icon: 'clear',
+                    text: selectionMode === 'multiple' ? 'Clear All' : 'Clear'
+                };
+                break;
+        }
+        console.log({ buttonDisplay });
+        return buttonDisplay;
+    });
     toggleSelection() {
         this.dbxCalendarScheduleSelectionStore.toggleSelection();
     }
-    set disabled(disabled) {
-        this._disabled.next(disabled);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, selector: "dbx-schedule-selection-calendar-selection-toggle-button", inputs: { disabled: "disabled" }, ngImport: i0, template: `
-    <dbx-button [disabled]="disableButton$ | async" [buttonDisplay]="buttonDisplay$ | async" [raised]="true" (buttonClick)="toggleSelection()"></dbx-button>
-  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxButtonComponent, selector: "dbx-button", inputs: ["type", "basic", "raised", "stroked", "flat", "iconOnly", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-selection-toggle-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <dbx-button [disabled]="disableButtonSignal()" [buttonDisplay]="buttonDisplaySignal()" [raised]="true" (buttonClick)="toggleSelection()"></dbx-button>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "raised", "stroked", "flat", "iconOnly", "fab"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-selection-toggle-button',
                     template: `
-    <dbx-button [disabled]="disableButton$ | async" [buttonDisplay]="buttonDisplay$ | async" [raised]="true" (buttonClick)="toggleSelection()"></dbx-button>
-  `
+    <dbx-button [disabled]="disableButtonSignal()" [buttonDisplay]="buttonDisplaySignal()" [raised]="true" (buttonClick)="toggleSelection()"></dbx-button>
+  `,
+                    imports: [DbxButtonComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
-        }], propDecorators: { disabled: [{
-                type: Input
-            }] } });
+        }] });
 
 function dbxScheduleSelectionCalendarBeforeMonthViewRenderFactory(inputModifyFn) {
     const modifyFn = inputModifyFn || (() => { });
@@ -1384,14 +1373,15 @@ function dbxScheduleSelectionCalendarBeforeMonthViewRenderFactory(inputModifyFn)
 class DbxScheduleSelectionCalendarComponent {
     calendarStore = inject((DbxCalendarStore));
     dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
-    _inputReadonly = new BehaviorSubject(undefined);
-    _config = new BehaviorSubject({});
+    clickEvent = output();
+    config = input();
+    readonly = input(false);
     _centerRangeSub = new SubscriptionObject();
-    config$ = this._config.pipe(distinctUntilChanged(), shareReplay(1));
-    readonly$ = this.config$.pipe(switchMap((x) => (x.readonly != null ? asObservableFromGetter(x.readonly) : of(undefined))), combineLatestWith(this._inputReadonly), map(([configReadonly, inputReadonly]) => {
-        return (configReadonly ?? false) || (inputReadonly ?? false);
+    config$ = toObservable(this.config).pipe(distinctUntilChanged(), shareReplay(1));
+    readonly$ = this.config$.pipe(switchMap((x) => (x?.readonly != null ? asObservableFromGetter(x.readonly) : of(undefined))), combineLatestWith(toObservable(this.readonly)), map(([configReadonly, inputReadonly]) => {
+        return configReadonly || inputReadonly || false;
     }), shareReplay(1));
-    showButtonsOnReadonly$ = this.config$.pipe(map((x) => x.showButtonsOnReadonly ?? false), distinctUntilChanged(), shareReplay(1));
+    showButtonsOnReadonly$ = this.config$.pipe(map((x) => x?.showButtonsOnReadonly ?? false), distinctUntilChanged(), shareReplay(1));
     showButtons$ = this.showButtonsOnReadonly$.pipe(switchMap((x) => {
         if (x) {
             return of(true);
@@ -1400,24 +1390,29 @@ class DbxScheduleSelectionCalendarComponent {
             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));
-    clickEvent = new EventEmitter();
+    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));
     // refresh any time the selected day function updates
     state$ = this.dbxCalendarScheduleSelectionStore.state$;
     beforeMonthViewRender$ = this.config$.pipe(switchMap((x) => {
         let factory;
-        if (x.beforeMonthViewRenderFunctionFactory) {
+        if (x?.beforeMonthViewRenderFunctionFactory) {
             factory = asObservable(x.beforeMonthViewRenderFunctionFactory);
         }
         else {
-            factory = asObservable(x.customizeDay).pipe(map((x) => dbxScheduleSelectionCalendarBeforeMonthViewRenderFactory(x)));
+            factory = asObservable(x?.customizeDay).pipe(map((x) => dbxScheduleSelectionCalendarBeforeMonthViewRenderFactory(x)));
         }
         return factory.pipe(map((x) => x(this.state$)));
     }), shareReplay(1));
     refresh$ = combineLatest([this.state$, this.beforeMonthViewRender$]).pipe(throttleTime(20, undefined, { leading: true, trailing: true }), map(() => undefined));
     events$ = this.calendarStore.visibleEvents$.pipe(map(prepareAndSortCalendarEvents), shareReplay(1));
     viewDate$ = this.calendarStore.date$;
+    beforeMonthViewRenderSignal = toSignal(this.beforeMonthViewRender$);
+    readonlySignal = toSignal(this.readonly$, { initialValue: false });
+    showClearSelectionButtonSignal = toSignal(this.showClearSelectionButton$);
+    datePopoverButtonInjectionConfigSignal = toSignal(this.datePopoverButtonInjectionConfig$);
+    eventsSignal = toSignal(this.events$, { initialValue: [] });
+    viewDateSignal = toSignal(this.viewDate$, { initialValue: new Date() });
     ngOnInit() {
         this.dbxCalendarScheduleSelectionStore.setViewReadonlyState(this.readonly$); // sync the readonly state
         this.calendarStore.setNavigationRangeLimit(this.dbxCalendarScheduleSelectionStore.minMaxDateRange$); // set navigation limit to the min/max allowed dates.
@@ -1451,48 +1446,26 @@ class DbxScheduleSelectionCalendarComponent {
         });
     }
     ngOnDestroy() {
-        this.clickEvent.complete();
-        this._inputReadonly.complete();
-        this._config.complete();
         this._centerRangeSub.destroy();
     }
-    get config() {
-        return this._config.value;
-    }
-    set config(config) {
-        this._config.next(config ?? {});
-    }
-    set readonly(readonly) {
-        this._inputReadonly.next(readonly);
-    }
     dayClicked({ date }) {
-        this.readonly$.pipe(first()).subscribe((readonly) => {
-            if (!readonly) {
-                this.dbxCalendarScheduleSelectionStore.toggleSelectedDates(date);
-            }
-        });
+        if (!this.readonlySignal()) {
+            this.dbxCalendarScheduleSelectionStore.toggleSelectedDates(date);
+        }
     }
     eventClicked(action, event) {
         this.clickEvent.emit({ action, event });
     }
     beforeMonthViewRender(renderEvent) {
-        this.beforeMonthViewRender$.pipe(first()).subscribe((x) => {
-            x(renderEvent);
-        });
+        this.beforeMonthViewRenderSignal()?.(renderEvent);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarComponent, selector: "dbx-schedule-selection-calendar", inputs: { config: "config", readonly: "readonly" }, outputs: { clickEvent: "clickEvent" }, providers: [DbxCalendarStore], ngImport: i0, template: "<dbx-calendar-base class=\"dbx-schedule-selection-calendar\" [ngClass]=\"(readonly$ | async) ? 'dbx-schedule-selection-calendar-readonly' : ''\">\n  <ng-container controls>\n    <ng-container *ngIf=\"showClearSelectionButton$ | async\">\n      <dbx-schedule-selection-calendar-selection-toggle-button [disabled]=\"readonly$ | async\"></dbx-schedule-selection-calendar-selection-toggle-button>\n      <dbx-button-spacer></dbx-button-spacer>\n    </ng-container>\n    <dbx-injection [config]=\"datePopoverButtonInjectionConfig$ | async\"></dbx-injection>\n  </ng-container>\n  <div class=\"dbx-calendar-content dbx-calendar-content-month\">\n    <mwl-calendar-month-view [refresh]=\"refresh$\" [viewDate]=\"(viewDate$ | async)!\" [events]=\"(events$ | async)!\" (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    <span class=\"cal-day-badge\" *ngIf=\"day.badgeTotal > 0\">{{ day.badgeTotal }}</span>\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: "component", type: i1$2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "component", type: i2$3.DbxCalendarBaseComponent, selector: "dbx-calendar-base" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: i5$1.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: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { 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: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.ɵCalendarDatePipe, name: "calendarDate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxScheduleSelectionCalendarComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEvent: "clickEvent" }, providers: [DbxCalendarStore], ngImport: i0, template: "<dbx-calendar-base class=\"dbx-schedule-selection-calendar\" [ngClass]=\"readonlySignal() ? 'dbx-schedule-selection-calendar-readonly' : ''\">\n  <ng-container controls>\n    @if (showClearSelectionButtonSignal()) {\n      <dbx-schedule-selection-calendar-selection-toggle-button [disabled]=\"readonlySignal()\"></dbx-schedule-selection-calendar-selection-toggle-button>\n      <dbx-button-spacer></dbx-button-spacer>\n    }\n    <dbx-injection [config]=\"datePopoverButtonInjectionConfigSignal()\"></dbx-injection>\n  </ng-container>\n  <div class=\"dbx-calendar-content dbx-calendar-content-month\">\n    <mwl-calendar-month-view [refresh]=\"refresh$\" [viewDate]=\"viewDateSignal()!\" [events]=\"eventsSignal()\" (dayClicked)=\"dayClicked($event.day)\" (eventClicked)=\"eventClicked('Clicked', $event.event)\" (beforeViewRender)=\"beforeMonthViewRender($event)\" [cellTemplate]=\"monthDayCellTemplate\"></mwl-calendar-month-view>\n  </div>\n</dbx-calendar-base>\n\n<!-- Cell -->\n<ng-template #monthDayCellTemplate let-day=\"day\" let-locale=\"locale\">\n  <div class=\"cal-cell-top\">\n    @if (day.badgeTotal > 0) {\n      <span class=\"cal-day-badge\">{{ day.badgeTotal }}</span>\n    }\n    <span class=\"cal-day-number\">{{ day.date | calendarDate: 'monthViewDayNumber' : locale }}</span>\n  </div>\n  <dbx-schedule-selection-calendar-cell [day]=\"day\"></dbx-schedule-selection-calendar-cell>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "pipe", type: i1$5.ɵCalendarDatePipe, name: "calendarDate" }, { kind: "component", type: i1$5.CalendarMonthViewComponent, selector: "mwl-calendar-month-view", inputs: ["viewDate", "events", "excludeDays", "activeDayIsOpen", "activeDay", "refresh", "locale", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "weekStartsOn", "headerTemplate", "cellTemplate", "openDayEventsTemplate", "eventTitleTemplate", "eventActionsTemplate", "weekendDays"], outputs: ["beforeViewRender", "dayClicked", "eventClicked", "columnHeaderClicked", "eventTimesChanged"] }, { kind: "component", type: DbxCalendarBaseComponent, selector: "dbx-calendar-base" }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: DbxScheduleSelectionCalendarCellComponent, selector: "dbx-schedule-selection-calendar-cell", inputs: ["day"] }, { kind: "component", type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, selector: "dbx-schedule-selection-calendar-selection-toggle-button", inputs: ["disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-schedule-selection-calendar', providers: [DbxCalendarStore], template: "<dbx-calendar-base class=\"dbx-schedule-selection-calendar\" [ngClass]=\"(readonly$ | async) ? 'dbx-schedule-selection-calendar-readonly' : ''\">\n  <ng-container controls>\n    <ng-container *ngIf=\"showClearSelectionButton$ | async\">\n      <dbx-schedule-selection-calendar-selection-toggle-button [disabled]=\"readonly$ | async\"></dbx-schedule-selection-calendar-selection-toggle-button>\n      <dbx-button-spacer></dbx-button-spacer>\n    </ng-container>\n    <dbx-injection [config]=\"datePopoverButtonInjectionConfig$ | async\"></dbx-injection>\n  </ng-container>\n  <div class=\"dbx-calendar-content dbx-calendar-content-month\">\n    <mwl-calendar-month-view [refresh]=\"refresh$\" [viewDate]=\"(viewDate$ | async)!\" [events]=\"(events$ | async)!\" (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    <span class=\"cal-day-badge\" *ngIf=\"day.badgeTotal > 0\">{{ day.badgeTotal }}</span>\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: Output
-            }], config: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'dbx-schedule-selection-calendar', imports: [NgClass, CalendarModule, DbxCalendarBaseComponent, DbxInjectionComponent, DbxButtonSpacerDirective, DbxScheduleSelectionCalendarCellComponent, DbxScheduleSelectionCalendarSelectionToggleButtonComponent], providers: [DbxCalendarStore], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<dbx-calendar-base class=\"dbx-schedule-selection-calendar\" [ngClass]=\"readonlySignal() ? 'dbx-schedule-selection-calendar-readonly' : ''\">\n  <ng-container controls>\n    @if (showClearSelectionButtonSignal()) {\n      <dbx-schedule-selection-calendar-selection-toggle-button [disabled]=\"readonlySignal()\"></dbx-schedule-selection-calendar-selection-toggle-button>\n      <dbx-button-spacer></dbx-button-spacer>\n    }\n    <dbx-injection [config]=\"datePopoverButtonInjectionConfigSignal()\"></dbx-injection>\n  </ng-container>\n  <div class=\"dbx-calendar-content dbx-calendar-content-month\">\n    <mwl-calendar-month-view [refresh]=\"refresh$\" [viewDate]=\"viewDateSignal()!\" [events]=\"eventsSignal()\" (dayClicked)=\"dayClicked($event.day)\" (eventClicked)=\"eventClicked('Clicked', $event.event)\" (beforeViewRender)=\"beforeMonthViewRender($event)\" [cellTemplate]=\"monthDayCellTemplate\"></mwl-calendar-month-view>\n  </div>\n</dbx-calendar-base>\n\n<!-- Cell -->\n<ng-template #monthDayCellTemplate let-day=\"day\" let-locale=\"locale\">\n  <div class=\"cal-cell-top\">\n    @if (day.badgeTotal > 0) {\n      <span class=\"cal-day-badge\">{{ day.badgeTotal }}</span>\n    }\n    <span class=\"cal-day-number\">{{ day.date | calendarDate: 'monthViewDayNumber' : locale }}</span>\n  </div>\n  <dbx-schedule-selection-calendar-cell [day]=\"day\"></dbx-schedule-selection-calendar-cell>\n</ng-template>\n" }]
+        }] });
 
 /**
  * Token used to configure the default DbxScheduleSelectionCalendarDatePopupConfig for DbxScheduleSelectionCalendarDateDialogComponent.
@@ -1522,16 +1495,16 @@ class DbxScheduleSelectionCalendarDateDialogComponent extends AbstractDialogDire
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDateDialogComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxScheduleSelectionCalendarDateDialogComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <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>
       <dbx-dialog-content-footer [config]="closeConfig" (close)="close()"></dbx-dialog-content-footer>
     </dbx-dialog-content>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.DbxDialogContentDirective, selector: "dbx-dialog-content,[dbxDialogContent].dbx-dialog-content", inputs: ["width"] }, { kind: "component", type: i1$1.DbxDialogContentFooterComponent, selector: "dbx-dialog-content-footer", inputs: ["closeText", "buttonColor", "config"], outputs: ["close"] }, { kind: "component", type: i1$1.DbxDialogContentCloseComponent, selector: "dbx-dialog-content-close", inputs: ["padded"], outputs: ["close"] }, { kind: "component", type: DbxScheduleSelectionCalendarComponent, selector: "dbx-schedule-selection-calendar", inputs: ["config", "readonly"], outputs: ["clickEvent"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: DbxDialogInteractionModule }, { 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: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -1540,44 +1513,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
       <dbx-schedule-selection-calendar></dbx-schedule-selection-calendar>
       <dbx-dialog-content-footer [config]="closeConfig" (close)="close()"></dbx-dialog-content-footer>
     </dbx-dialog-content>
-  `
+  `,
+                    standalone: true,
+                    imports: [DbxDialogInteractionModule, DbxScheduleSelectionCalendarComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }] });
 
 class DbxScheduleSelectionCalendarDateDialogButtonComponent {
     injector = inject(Injector);
     matDialog = inject(MatDialog);
-    buttonText = 'Customize';
-    disabled;
-    contentConfig;
+    buttonText = input('Customize');
+    disabled = input();
+    contentConfig = input();
     clickCustomize() {
-        DbxScheduleSelectionCalendarDateDialogComponent.openDialog(this.matDialog, { injector: this.injector, contentConfig: this.contentConfig });
+        DbxScheduleSelectionCalendarDateDialogComponent.openDialog(this.matDialog, { injector: this.injector, contentConfig: this.contentConfig() });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxScheduleSelectionCalendarDateDialogButtonComponent, selector: "dbx-schedule-selection-calendar-date-dialog-button", inputs: { buttonText: "buttonText", disabled: "disabled", contentConfig: "contentConfig" }, ngImport: i0, template: `
-    <dbx-button [raised]="true" color="accent" [text]="buttonText" [disabled]="disabled" (buttonClick)="clickCustomize()"></dbx-button>
-  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxButtonComponent, selector: "dbx-button", inputs: ["type", "basic", "raised", "stroked", "flat", "iconOnly", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: DbxScheduleSelectionCalendarDateDialogButtonComponent, isStandalone: true, selector: "dbx-schedule-selection-calendar-date-dialog-button", inputs: { buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, contentConfig: { classPropertyName: "contentConfig", publicName: "contentConfig", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <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: ["type", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "raised", "stroked", "flat", "iconOnly", "fab"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-date-dialog-button',
                     template: `
-    <dbx-button [raised]="true" color="accent" [text]="buttonText" [disabled]="disabled" (buttonClick)="clickCustomize()"></dbx-button>
-  `
+    <dbx-button [raised]="true" color="accent" [text]="buttonText()" [disabled]="disabled()" (buttonClick)="clickCustomize()"></dbx-button>
+  `,
+                    imports: [DbxButtonComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
-        }], propDecorators: { buttonText: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], contentConfig: [{
-                type: Input
-            }] } });
+        }] });
 
 class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
     compact = inject(CompactContextStore, { optional: true });
     dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
-    ngZone = inject(NgZone);
     _syncSub = new SubscriptionObject();
     _valueSub = new SubscriptionObject();
     _timezoneSub = new SubscriptionObject();
@@ -1589,6 +1561,7 @@ class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
     formControl$ = this._formControlObs.pipe(filterMaybe());
     value$ = this.formControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value))), shareReplay(1));
     disableCustomize$ = this.value$.pipe(map((x) => (this.allowCustomizeWithoutDateRange ? false : !x)), distinctUntilChanged(), shareReplay(1));
+    disabledSignal = toSignal(this.disableCustomize$);
     get formGroupName() {
         return this.field.key;
     }
@@ -1687,33 +1660,58 @@ class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
         this._exclusionsSub.destroy();
         this._formControlObs.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormCalendarDateScheduleRangeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormCalendarDateScheduleRangeFieldComponent, selector: "ng-component", providers: [provideCalendarScheduleSelectionStoreIfParentIsUnavailable()], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormCalendarDateScheduleRangeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxFormCalendarDateScheduleRangeFieldComponent, isStandalone: true, selector: "ng-component", providers: [provideCalendarScheduleSelectionStoreIfParentIsUnavailable()], usesInheritance: true, ngImport: i0, template: `
     <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]="disableCustomize$ | async" [contentConfig]="dialogContentConfig"></dbx-schedule-selection-calendar-date-dialog-button>
+        <dbx-schedule-selection-calendar-date-dialog-button customizeButton [disabled]="disabledSignal()" [contentConfig]="dialogContentConfig"></dbx-schedule-selection-calendar-date-dialog-button>
         <dbx-injection [config]="customDetailsConfig"></dbx-injection>
       </dbx-schedule-selection-calendar-date-range>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: i1$2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "component", type: DbxScheduleSelectionCalendarDateRangeComponent, selector: "dbx-schedule-selection-calendar-date-range", inputs: ["openPickerOnTextClick", "label", "hint", "disabled", "showCustomize", "required"] }, { kind: "component", type: DbxScheduleSelectionCalendarDateDialogButtonComponent, selector: "dbx-schedule-selection-calendar-date-dialog-button", inputs: ["buttonText", "disabled", "contentConfig"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+  `, 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: "16.2.12", ngImport: i0, type: DbxFormCalendarDateScheduleRangeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormCalendarDateScheduleRangeFieldComponent, decorators: [{
             type: Component,
             args: [{
                     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]="disableCustomize$ | async" [contentConfig]="dialogContentConfig"></dbx-schedule-selection-calendar-date-dialog-button>
+        <dbx-schedule-selection-calendar-date-dialog-button customizeButton [disabled]="disabledSignal()" [contentConfig]="dialogContentConfig"></dbx-schedule-selection-calendar-date-dialog-button>
         <dbx-injection [config]="customDetailsConfig"></dbx-injection>
       </dbx-schedule-selection-calendar-date-range>
     </div>
   `,
-                    providers: [provideCalendarScheduleSelectionStoreIfParentIsUnavailable()]
+                    providers: [provideCalendarScheduleSelectionStoreIfParentIsUnavailable()],
+                    imports: [DbxInjectionComponent, DbxScheduleSelectionCalendarDateRangeComponent, DbxScheduleSelectionCalendarDateDialogButtonComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }] });
 
-const declarations = [
-    //
+const importsAndExports$1 = [DbxFormCalendarDateScheduleRangeFieldComponent];
+class DbxFormDateScheduleRangeFieldModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, imports: [DbxFormCalendarDateScheduleRangeFieldComponent, i1$6.FormlyModule], exports: [DbxFormCalendarDateScheduleRangeFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, imports: [importsAndExports$1, FormlyModule.forChild({
+                types: [{ name: 'date-schedule-range', component: DbxFormCalendarDateScheduleRangeFieldComponent }]
+            })] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        ...importsAndExports$1,
+                        FormlyModule.forChild({
+                            types: [{ name: 'date-schedule-range', component: DbxFormCalendarDateScheduleRangeFieldComponent }]
+                        })
+                    ],
+                    exports: importsAndExports$1
+                }]
+        }] });
+
+// export * from './selection';
+
+const importsAndExports = [
     DbxScheduleSelectionCalendarComponent,
     DbxScheduleSelectionCalendarDateDaysComponent,
     DbxScheduleSelectionCalendarDateDaysFormComponent,
@@ -1728,10 +1726,8 @@ const declarations = [
     DbxScheduleSelectionCalendarSelectionToggleButtonComponent
 ];
 class DbxFormCalendarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormCalendarModule, declarations: [
-            //
-            DbxScheduleSelectionCalendarComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormCalendarModule, imports: [DbxScheduleSelectionCalendarComponent,
             DbxScheduleSelectionCalendarDateDaysComponent,
             DbxScheduleSelectionCalendarDateDaysFormComponent,
             DbxScheduleSelectionCalendarDateRangeComponent,
@@ -1742,33 +1738,7 @@ class DbxFormCalendarModule {
             DbxCalendarScheduleSelectionStoreInjectionBlockDirective,
             DbxScheduleSelectionCalendarDateDialogComponent,
             DbxScheduleSelectionCalendarDateDialogButtonComponent,
-            DbxScheduleSelectionCalendarSelectionToggleButtonComponent], imports: [
-            //
-            DbxInjectionComponentModule,
-            DbxContentLayoutModule,
-            DbxTextModule,
-            DbxActionModule,
-            DbxFormModule,
-            DbxFormlyModule,
-            DbxCalendarModule,
-            CommonModule,
-            MatIconModule,
-            MatButtonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatFormFieldModule,
-            MatButtonToggleModule,
-            DbxButtonModule,
-            MatDatepickerModule,
-            DbxDialogInteractionModule,
-            DbxPopoverInteractionModule,
-            CalendarModule,
-            CalendarDayModule,
-            FlexLayoutModule,
-            CalendarWeekModule,
-            DbxDatePipeModule], exports: [
-            //
-            DbxScheduleSelectionCalendarComponent,
+            DbxScheduleSelectionCalendarSelectionToggleButtonComponent], exports: [DbxScheduleSelectionCalendarComponent,
             DbxScheduleSelectionCalendarDateDaysComponent,
             DbxScheduleSelectionCalendarDateDaysFormComponent,
             DbxScheduleSelectionCalendarDateRangeComponent,
@@ -1780,113 +1750,26 @@ class DbxFormCalendarModule {
             DbxScheduleSelectionCalendarDateDialogComponent,
             DbxScheduleSelectionCalendarDateDialogButtonComponent,
             DbxScheduleSelectionCalendarSelectionToggleButtonComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormCalendarModule, imports: [
-            //
-            DbxInjectionComponentModule,
-            DbxContentLayoutModule,
-            DbxTextModule,
-            DbxActionModule,
-            DbxFormModule,
-            DbxFormlyModule,
-            DbxCalendarModule,
-            CommonModule,
-            MatIconModule,
-            MatButtonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatFormFieldModule,
-            MatButtonToggleModule,
-            DbxButtonModule,
-            MatDatepickerModule,
-            DbxDialogInteractionModule,
-            DbxPopoverInteractionModule,
-            CalendarModule,
-            CalendarDayModule,
-            FlexLayoutModule,
-            CalendarWeekModule,
-            DbxDatePipeModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormCalendarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        //
-                        DbxInjectionComponentModule,
-                        DbxContentLayoutModule,
-                        DbxTextModule,
-                        DbxActionModule,
-                        DbxFormModule,
-                        DbxFormlyModule,
-                        DbxCalendarModule,
-                        CommonModule,
-                        MatIconModule,
-                        MatButtonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MatFormFieldModule,
-                        MatButtonToggleModule,
-                        DbxButtonModule,
-                        MatDatepickerModule,
-                        DbxDialogInteractionModule,
-                        DbxPopoverInteractionModule,
-                        CalendarModule,
-                        CalendarDayModule,
-                        FlexLayoutModule,
-                        CalendarWeekModule,
-                        DbxDatePipeModule
-                    ],
-                    declarations,
-                    exports: declarations
-                }]
-        }] });
-
-class DbxFormDateScheduleRangeFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, declarations: [DbxFormCalendarDateScheduleRangeFieldComponent], imports: [DbxInjectionComponentModule,
-            CommonModule,
-            MatIconModule,
-            DbxFormCalendarModule,
-            MatButtonModule,
-            DbxTextModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatInputModule, i1$3.FormlyModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, imports: [DbxInjectionComponentModule,
-            CommonModule,
-            MatIconModule,
-            DbxFormCalendarModule,
-            MatButtonModule,
-            DbxTextModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatInputModule,
-            FormlyModule.forChild({
-                types: [{ name: 'date-schedule-range', component: DbxFormCalendarDateScheduleRangeFieldComponent }]
-            })] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormCalendarModule, imports: [DbxScheduleSelectionCalendarComponent,
+            DbxScheduleSelectionCalendarDateDaysComponent,
+            DbxScheduleSelectionCalendarDateDaysFormComponent,
+            DbxScheduleSelectionCalendarDateRangeComponent,
+            DbxScheduleSelectionCalendarDatePopoverButtonComponent,
+            DbxScheduleSelectionCalendarCellComponent,
+            DbxScheduleSelectionCalendarDatePopoverComponent,
+            DbxScheduleSelectionCalendarDatePopoverContentComponent,
+            DbxScheduleSelectionCalendarDateDialogComponent,
+            DbxScheduleSelectionCalendarDateDialogButtonComponent,
+            DbxScheduleSelectionCalendarSelectionToggleButtonComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormDateScheduleRangeFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormCalendarModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        DbxInjectionComponentModule,
-                        CommonModule,
-                        MatIconModule,
-                        DbxFormCalendarModule,
-                        MatButtonModule,
-                        DbxTextModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MatInputModule,
-                        FormlyModule.forChild({
-                            types: [{ name: 'date-schedule-range', component: DbxFormCalendarDateScheduleRangeFieldComponent }]
-                        })
-                    ],
-                    declarations: [DbxFormCalendarDateScheduleRangeFieldComponent]
+                    imports: importsAndExports,
+                    exports: importsAndExports
                 }]
         }] });
 
-// export * from './selection';
-
 /**
  * Generated bundle index. Do not edit.
  */