@wlcm/angular 19.2.6 → 22.0.1

package/datepicker/fesm2022/wlcm-angular-datepicker.mjs

@@ -1,25 +1,21 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, input, Injector, ViewContainerRef, HostBinding, Directive, HostListener, forwardRef, ElementRef, Optional, Inject, signal, computed, Component, Type, ViewChild, inject, ContentChild, Input, Host, output, effect, viewChild, contentChild, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/material/datepicker';
-import { MatRangeDateSelectionModel, MatDateSelectionModel, DateRange, yearsPerPage, MatCalendar, MAT_DATE_RANGE_SELECTION_STRATEGY, MatDatepickerModule, DefaultMatCalendarRangeStrategy, MatMonthView, MatSingleDateSelectionModel } from '@angular/material/datepicker';
+import { InjectionToken, Injectable, inject, ViewContainerRef, DestroyRef, input, Injector, Directive, ElementRef, forwardRef, signal, computed, ChangeDetectionStrategy, Component, viewChild, contentChild, output, effect, NgModule } from '@angular/core';
 import { WLCM_FORM_FIELD, WlcmFormsModule, WLCM_FORM_CONTROL_PROVIDER, WLCM_INPUT_BINDER } from '@wlcm/angular/forms';
 import { merge, EMPTY, filter, BehaviorSubject, switchMap, fromEvent, map, Subject, tap, startWith, takeUntil } from 'rxjs';
-import * as i3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, ControlContainer } from '@angular/forms';
-import * as i1$1 from '@angular/material/core';
+import * as i1$1 from '@angular/material/datepicker';
+import { MatRangeDateSelectionModel, DateRange, MAT_DATE_RANGE_SELECTION_STRATEGY, MatCalendar, yearsPerPage, MatDatepickerModule, DefaultMatCalendarRangeStrategy, MatMonthView, MatDateSelectionModel, MatSingleDateSelectionModel } from '@angular/material/datepicker';
 import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS } from '@angular/material/core';
-import { __decorate, __metadata } from 'tslib';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { format, isBefore, startOfDay, isAfter, parse, isValid, endOfMonth, add, startOfMonth } from 'date-fns';
 import { DateFnsAdapter } from '@angular/material-date-fns-adapter';
 import { enUS } from 'date-fns/locale';
-import * as i1 from '@angular/cdk/overlay';
-import { OverlayRef, OverlayConfig, Overlay } from '@angular/cdk/overlay';
+import { Overlay, OverlayRef, OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
-import * as i2$1 from '@wlcm/angular/button';
+import * as i1 from '@wlcm/angular/button';
 import { WlcmButtonModule } from '@wlcm/angular/button';
 import { WlcmIconName, WlcmIconDirective } from '@wlcm/angular/core';
+import { CommonModule } from '@angular/common';
 
 const WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL = new InjectionToken('WLCM_DATE_RANGE_SELECTION_MODEL');
 const WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL_PROVIDER = {
@@ -40,10 +36,10 @@ class WlcmDateAdapter extends DateFnsAdapter {
         const formatString = style === 'long' ? 'EEEE' : 'EEEEEE';
         return range(7, (i) => format(new Date(2017, 0, i + 1), formatString));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDateAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDateAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDateAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDateAdapter, decorators: [{
             type: Injectable
         }] });
 var WlcmDateValidation;
@@ -72,17 +68,19 @@ const WLCM_DEFAULT_DATEPICKER_PROVIDERS = [
 const WLCM_DATEPICKER_CONFIG = new InjectionToken('WLCM_DATEPICKER_CONFIG', { providedIn: 'root', factory: () => ({ selectOnly: false }) });
 const WLCM_DATEPICKER_INPUT_CLASS = 'wlcm-datepicker-input';
 
-let WlcmDatepickerTrigger = class WlcmDatepickerTrigger {
-    get isOnlySelect() {
-        return this.selectOnly();
-    }
-    constructor(overlay, viewContainerRef, selectionModel) {
-        this.overlay = overlay;
-        this.viewContainerRef = viewContainerRef;
-        this.selectionModel = selectionModel;
-        this.minDate = input(this.defaultDatepickerConfig.minDate?.());
-        this.maxDate = input(this.defaultDatepickerConfig.maxDate?.());
-        this.selectOnly = input(this.defaultDatepickerConfig.selectOnly || false);
+// The second generic parameter (`_D`) is retained for subclass typing of the date-range
+// selection model they provide (e.g. `DateRange<Date>`); it is not referenced in the base body.
+class WlcmDatepickerTrigger {
+    constructor() {
+        this.overlay = inject(Overlay);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.destroyRef = inject(DestroyRef);
+        this.minDate = input(this.defaultDatepickerConfig.minDate?.(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+        this.maxDate = input(this.defaultDatepickerConfig.maxDate?.(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+        this.selectOnly = input(this.defaultDatepickerConfig.selectOnly || false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectOnly" }] : /* istanbul ignore next */ []));
         this.overlayRef = this.overlay.create(this.createOverlayConfig());
         this.handleBackdropClick();
     }
@@ -129,7 +127,7 @@ let WlcmDatepickerTrigger = class WlcmDatepickerTrigger {
     handleBackdropClick() {
         this.overlayRef
             .backdropClick()
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.close());
     }
     updatePositionStrategy() {
@@ -149,23 +147,25 @@ let WlcmDatepickerTrigger = class WlcmDatepickerTrigger {
             backdropClass: 'transparent',
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDatepickerTrigger, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i2.MatDateSelectionModel }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.9", type: WlcmDatepickerTrigger, isStandalone: true, inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, selectOnly: { classPropertyName: "selectOnly", publicName: "selectOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wlcm-datepicker-select-only-mode": "this.isOnlySelect" } }, ngImport: i0 }); }
-};
-WlcmDatepickerTrigger = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [Overlay,
-        ViewContainerRef,
-        MatDateSelectionModel])
-], WlcmDatepickerTrigger);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDatepickerTrigger, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i2.MatDateSelectionModel }], propDecorators: { isOnlySelect: [{
-                type: HostBinding,
-                args: ['class.wlcm-datepicker-select-only-mode']
-            }] } });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDatepickerTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: WlcmDatepickerTrigger, isStandalone: true, inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, selectOnly: { classPropertyName: "selectOnly", publicName: "selectOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wlcm-datepicker-select-only-mode": "selectOnly()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDatepickerTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[class.wlcm-datepicker-select-only-mode]': 'selectOnly()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], selectOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnly", required: false }] }] } });
 
 class WlcmDatepickerInputBase {
+    constructor() {
+        this.element = inject(ElementRef);
+        this.dateAdapter = inject(DateAdapter);
+        this.dateFormats = inject(MAT_DATE_FORMATS, { optional: true });
+        this.trigger = inject(WlcmDatepickerTrigger);
+    }
     handleBlur() {
         this.updateSelection();
         this._touched?.();
@@ -176,15 +176,6 @@ class WlcmDatepickerInputBase {
         }
         this._validatorChanged?.();
     }
-    get datepickerInputClass() {
-        return WLCM_DATEPICKER_INPUT_CLASS;
-    }
-    constructor(element, dateAdapter, dateFormats, trigger) {
-        this.element = element;
-        this.dateAdapter = dateAdapter;
-        this.dateFormats = dateFormats;
-        this.trigger = trigger;
-    }
     writeValue(value) {
         this.updateInputValue(value);
     }
@@ -243,29 +234,26 @@ class WlcmDatepickerInputBase {
         }
         this.inputElement.value = newValue;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDatepickerInputBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: WlcmDatepickerInputBase, isStandalone: true, host: { listeners: { "blur": "handleBlur()", "input": "handleInput()" }, properties: { "class": "this.datepickerInputClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDatepickerInputBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: WlcmDatepickerInputBase, isStandalone: true, host: { listeners: { "blur": "handleBlur()", "input": "handleInput()" }, classAttribute: "wlcm-datepicker-input" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDatepickerInputBase, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: undefined }, { type: WlcmDatepickerTrigger }], propDecorators: { handleBlur: [{
-                type: HostListener,
-                args: ['blur']
-            }], handleInput: [{
-                type: HostListener,
-                args: ['input']
-            }], datepickerInputClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDatepickerInputBase, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        class: WLCM_DATEPICKER_INPUT_CLASS,
+                        '(blur)': 'handleBlur()',
+                        '(input)': 'handleInput()',
+                    },
+                }]
+        }] });
 
 class WlcmDateRangePickerInputBase extends WlcmDatepickerInputBase {
-    constructor(element, dateAdapter, dateFormats, trigger) {
-        super(element, dateAdapter, dateFormats, trigger);
-        this.element = element;
-        this.dateAdapter = dateAdapter;
-        this.dateFormats = dateFormats;
-        this.trigger = trigger;
+    constructor() {
+        super(...arguments);
+        // Widen visibility from the base's `protected element` so the range-picker-input
+        // component can read the start/end host elements for focus tracking.
+        this.element = this.element;
         this._inputMirror = this.createInputMirror();
     }
     ngAfterViewInit() {
@@ -303,28 +291,25 @@ class WlcmDateRangePickerInputBase extends WlcmDatepickerInputBase {
         target.style.fontFamily = inputElementStyles.fontFamily;
         target.style.letterSpacing = inputElementStyles.letterSpacing;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDateRangePickerInputBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: WlcmDateRangePickerInputBase, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDateRangePickerInputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: WlcmDateRangePickerInputBase, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDateRangePickerInputBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDateRangePickerInputBase, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: undefined }, { type: WlcmDatepickerTrigger }] });
+        }] });
 
 var WlcmDateRangeValidation;
 (function (WlcmDateRangeValidation) {
     WlcmDateRangeValidation["StartExceedsEnd"] = "wlcmDateRangeStartExceedsEnd";
 })(WlcmDateRangeValidation || (WlcmDateRangeValidation = {}));
 
-let DateRangePickerInputStartDirective = class DateRangePickerInputStartDirective extends WlcmDateRangePickerInputBase {
-    constructor(element, dateAdapter, dateFormats, selectionModel, trigger) {
-        super(element, dateAdapter, dateFormats, trigger);
-        this.element = element;
-        this.dateAdapter = dateAdapter;
-        this.dateFormats = dateFormats;
-        this.selectionModel = selectionModel;
-        this.trigger = trigger;
+class DateRangePickerInputStartDirective extends WlcmDateRangePickerInputBase {
+    constructor() {
+        super();
+        this.selectionModel = inject(WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL);
+        this.destroyRef = inject(DestroyRef);
         this.updateSelection = () => {
-            let start = this.parseCurrentValue();
+            const start = this.parseCurrentValue();
             this.selectionModel.updateSelection(new DateRange(start, this.selectionModel.selection.end), this);
         };
         this.handleSelectionChange();
@@ -340,45 +325,30 @@ let DateRangePickerInputStartDirective = class DateRangePickerInputStartDirectiv
         return defaultErrors;
     }
     handleSelectionChange() {
-        this.selectionModel.selectionChanged.pipe(untilDestroyed(this)).subscribe(({ selection }) => {
+        this.selectionModel.selectionChanged.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(({ selection }) => {
             const validDate = this.dateAdapter.getValidDateOrNull(selection.start);
             this._changed?.(validDate);
             this.updateInputValue(validDate);
             this._validatorChanged?.();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DateRangePickerInputStartDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.DateAdapter }, { token: MAT_DATE_FORMATS, optional: true }, { token: WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL }, { token: WlcmDatepickerTrigger }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: DateRangePickerInputStartDirective, isStandalone: true, selector: "[wlcmDateRangePickerInputStart]", host: { classAttribute: "wlcm-date-range-picker-input-field" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DateRangePickerInputStartDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DateRangePickerInputStartDirective, isStandalone: true, selector: "[wlcmDateRangePickerInputStart]", host: { classAttribute: "wlcm-date-range-picker-input-field" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePickerInputStartDirective), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateRangePickerInputStartDirective), multi: true },
         ], usesInheritance: true, ngImport: i0 }); }
-};
-DateRangePickerInputStartDirective = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [ElementRef,
-        DateAdapter, Object, MatDateSelectionModel,
-        WlcmDatepickerTrigger])
-], DateRangePickerInputStartDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DateRangePickerInputStartDirective, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DateRangePickerInputStartDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wlcmDateRangePickerInputStart]',
                     host: { class: 'wlcm-date-range-picker-input-field' },
-                    standalone: true,
                     providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePickerInputStartDirective), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateRangePickerInputStartDirective), multi: true },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_DATE_FORMATS]
-                }] }, { type: i2.MatDateSelectionModel, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
-                }] }, { type: WlcmDatepickerTrigger }] });
+        }], ctorParameters: () => [] });
 
 const WLCM_DATE_RANGE_SELECTION_MODEL = new InjectionToken('WLCM_DATE_RANGE_SELECTION_MODEL');
 const WLCM_DATE_RANGE_SELECTION_MODEL_PROVIDER = {
@@ -388,11 +358,14 @@ const WLCM_DATE_RANGE_SELECTION_MODEL_PROVIDER = {
 };
 
 class WlcmDateRangePicker {
-    constructor(localSelectionModel, rangeSelectionStrategy) {
-        this.localSelectionModel = localSelectionModel;
-        this.rangeSelectionStrategy = rangeSelectionStrategy;
-        this._isComplete = signal(false);
-        this.isComplete = computed(() => this._isComplete());
+    constructor() {
+        this._isComplete = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_isComplete" }] : /* istanbul ignore next */ []));
+        this.isComplete = computed(() => this._isComplete(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isComplete" }] : /* istanbul ignore next */ []));
+        this.localSelectionModel = inject(WLCM_DATE_RANGE_SELECTION_MODEL);
+        this.rangeSelectionStrategy = inject(MAT_DATE_RANGE_SELECTION_STRATEGY);
+        this._destroyRef = inject(DestroyRef);
         this.handleSelectionChanged();
     }
     setSelection(selection) {
@@ -410,39 +383,45 @@ class WlcmDateRangePicker {
     }
     handleSelectionChanged() {
         this.localSelectionModel.selectionChanged
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe(() => this._isComplete.set(this.localSelectionModel.isComplete()));
     }
 }
 
 class WlcmDateRangePickerBottomPanelComponent {
-    constructor(picker) {
-        this.picker = picker;
+    constructor() {
+        this.picker = inject(WlcmDateRangePicker);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDateRangePickerBottomPanelComponent, deps: [{ token: WlcmDateRangePicker }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: WlcmDateRangePickerBottomPanelComponent, isStandalone: true, selector: "wlcm-date-range-picker-bottom-panel", ngImport: i0, template: "<div class=\"wlcm-date-range-picker-bottom-panel\">\n  <wlcm-button type=\"paddingless\" (clicked)=\"picker.reset()\">Reset</wlcm-button>\n\n  <wlcm-button (clicked)=\"picker.apply()\" [isDisabled]=\"!picker.isComplete()\">\n    Apply\n  </wlcm-button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: WlcmButtonModule }, { kind: "component", type: i2$1.WlcmButtonComponent, selector: "wlcm-button", inputs: ["type", "size", "styleType", "buttonColor", "buttonType", "isDisabled", "isLoading"], outputs: ["clicked"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDateRangePickerBottomPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: WlcmDateRangePickerBottomPanelComponent, isStandalone: true, selector: "wlcm-date-range-picker-bottom-panel", ngImport: i0, template: "<div class=\"wlcm-date-range-picker-bottom-panel\">\n  <wlcm-button styleType=\"compact\" (clicked)=\"picker.reset()\">Reset</wlcm-button>\n\n  <wlcm-button (clicked)=\"picker.apply()\" [isDisabled]=\"!picker.isComplete()\">\n    Apply\n  </wlcm-button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: WlcmButtonModule }, { kind: "component", type: i1.WlcmButtonComponent, selector: "wlcm-button", inputs: ["size", "styleType", "buttonColor", "buttonType", "isDisabled", "isLoading"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDateRangePickerBottomPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDateRangePickerBottomPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-date-range-picker-bottom-panel', standalone: true, imports: [CommonModule, WlcmButtonModule], template: "<div class=\"wlcm-date-range-picker-bottom-panel\">\n  <wlcm-button type=\"paddingless\" (clicked)=\"picker.reset()\">Reset</wlcm-button>\n\n  <wlcm-button (clicked)=\"picker.apply()\" [isDisabled]=\"!picker.isComplete()\">\n    Apply\n  </wlcm-button>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: WlcmDateRangePicker }] });
+            args: [{ selector: 'wlcm-date-range-picker-bottom-panel', imports: [WlcmButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wlcm-date-range-picker-bottom-panel\">\n  <wlcm-button styleType=\"compact\" (clicked)=\"picker.reset()\">Reset</wlcm-button>\n\n  <wlcm-button (clicked)=\"picker.apply()\" [isDisabled]=\"!picker.isComplete()\">\n    Apply\n  </wlcm-button>\n</div>\n" }]
+        }] });
 
 const WLCM_DATE_RANGE_PICKER_CONFIG = new InjectionToken('WLCM_DATE_RANGE_PICKER_CONFIG', { providedIn: 'root', factory: () => ({}) });
 const WLCM_DATE_RANGE_PICKER_BP = new InjectionToken('WLCM_DATE_RANGE_PICKER_BP', { providedIn: 'root', factory: () => WlcmDateRangePickerBottomPanelComponent });
 const WLCM_DATE_RANGE_PICKER_LEFT_PANEL = new InjectionToken('WLCM_DATE_RANGE_PICKER_LEFT_PANEL');
 
 class WlcmCalendarHeaderComponent {
-    constructor(dateAdapter, dateFormats, calendar) {
-        this.dateAdapter = dateAdapter;
-        this.dateFormats = dateFormats;
-        this.calendar = calendar;
+    constructor() {
         this.WlcmIconName = WlcmIconName;
-        this.next = input();
-        this.previous = input();
-        this.disableLeftArrow = input(false);
-        this.disableRightArrow = input(false);
-        this.displayLeftArrow = input(true);
-        this.displayRightArrow = input(true);
+        this.next = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "next" }] : /* istanbul ignore next */ []));
+        this.previous = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "previous" }] : /* istanbul ignore next */ []));
+        this.disableLeftArrow = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disableLeftArrow" }] : /* istanbul ignore next */ []));
+        this.disableRightArrow = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disableRightArrow" }] : /* istanbul ignore next */ []));
+        this.displayLeftArrow = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayLeftArrow" }] : /* istanbul ignore next */ []));
+        this.displayRightArrow = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayRightArrow" }] : /* istanbul ignore next */ []));
+        this.dateAdapter = inject(DateAdapter);
+        this.dateFormats = inject(MAT_DATE_FORMATS, { optional: true });
+        this.calendar = inject(forwardRef(() => MatCalendar));
     }
     previousClicked() {
         if (this.previous())
@@ -470,50 +449,40 @@ class WlcmCalendarHeaderComponent {
     get periodLabel() {
         return this.dateAdapter.format(this.calendar.activeDate, this.dateFormats.display.monthYearLabel);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmCalendarHeaderComponent, deps: [{ token: i1$1.DateAdapter }, { token: MAT_DATE_FORMATS, optional: true }, { token: forwardRef(() => MatCalendar) }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: WlcmCalendarHeaderComponent, isStandalone: true, selector: "wlcm-calendar-header", inputs: { next: { classPropertyName: "next", publicName: "next", isSignal: true, isRequired: false, transformFunction: null }, previous: { classPropertyName: "previous", publicName: "previous", isSignal: true, isRequired: false, transformFunction: null }, disableLeftArrow: { classPropertyName: "disableLeftArrow", publicName: "disableLeftArrow", isSignal: true, isRequired: false, transformFunction: null }, disableRightArrow: { classPropertyName: "disableRightArrow", publicName: "disableRightArrow", isSignal: true, isRequired: false, transformFunction: null }, displayLeftArrow: { classPropertyName: "displayLeftArrow", publicName: "displayLeftArrow", isSignal: true, isRequired: false, transformFunction: null }, displayRightArrow: { classPropertyName: "displayRightArrow", publicName: "displayRightArrow", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wlcm-calendar-header" }, ngImport: i0, template: "<div class=\"wlcm-calendar-header-button-container\">\n  @if (displayLeftArrow()) {\n    <button\n      class=\"wlcm-calendar-header-button wlcm-calendar-header-button-left\"\n      [disabled]=\"disableLeftArrow()\"\n      (click)=\"previousClicked()\"\n    >\n      <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n    </button>\n  }\n</div>\n\n<button\n  class=\"wlcm-calendar-header-change-view-button\"\n  (click)=\"changeCalendarView()\"\n>\n  <div class=\"wlcm-calendar-header-period-label\">\n    {{ periodLabel }}\n  </div>\n\n  <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n</button>\n\n<div class=\"wlcm-calendar-header-button-container\">\n  @if (displayRightArrow()) {\n    <button\n      class=\"wlcm-calendar-header-button wlcm-calendar-header-button-right\"\n      [disabled]=\"disableRightArrow()\"\n      (click)=\"nextClicked()\"\n    >\n      <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n    </button>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: WlcmIconDirective, selector: "[wlcmIcon]", inputs: ["wlcmIcon", "wlcmIconStopPropagation"], outputs: ["wlcmIconClicked"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmCalendarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: WlcmCalendarHeaderComponent, isStandalone: true, selector: "wlcm-calendar-header", inputs: { next: { classPropertyName: "next", publicName: "next", isSignal: true, isRequired: false, transformFunction: null }, previous: { classPropertyName: "previous", publicName: "previous", isSignal: true, isRequired: false, transformFunction: null }, disableLeftArrow: { classPropertyName: "disableLeftArrow", publicName: "disableLeftArrow", isSignal: true, isRequired: false, transformFunction: null }, disableRightArrow: { classPropertyName: "disableRightArrow", publicName: "disableRightArrow", isSignal: true, isRequired: false, transformFunction: null }, displayLeftArrow: { classPropertyName: "displayLeftArrow", publicName: "displayLeftArrow", isSignal: true, isRequired: false, transformFunction: null }, displayRightArrow: { classPropertyName: "displayRightArrow", publicName: "displayRightArrow", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wlcm-calendar-header" }, ngImport: i0, template: "<div class=\"wlcm-calendar-header-button-container\">\n  @if (displayLeftArrow()) {\n    <button\n      class=\"wlcm-calendar-header-button wlcm-calendar-header-button-left\"\n      [disabled]=\"disableLeftArrow()\"\n      (click)=\"previousClicked()\"\n    >\n      <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n    </button>\n  }\n</div>\n\n<button\n  class=\"wlcm-calendar-header-change-view-button\"\n  (click)=\"changeCalendarView()\"\n>\n  <div class=\"wlcm-calendar-header-period-label\">\n    {{ periodLabel }}\n  </div>\n\n  <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n</button>\n\n<div class=\"wlcm-calendar-header-button-container\">\n  @if (displayRightArrow()) {\n    <button\n      class=\"wlcm-calendar-header-button wlcm-calendar-header-button-right\"\n      [disabled]=\"disableRightArrow()\"\n      (click)=\"nextClicked()\"\n    >\n      <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n    </button>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: WlcmIconDirective, selector: "[wlcmIcon]", inputs: ["wlcmIcon", "wlcmIconStopPropagation"], outputs: ["wlcmIconClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmCalendarHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmCalendarHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-calendar-header', host: { class: 'wlcm-calendar-header' }, standalone: true, imports: [CommonModule, WlcmIconDirective], template: "<div class=\"wlcm-calendar-header-button-container\">\n  @if (displayLeftArrow()) {\n    <button\n      class=\"wlcm-calendar-header-button wlcm-calendar-header-button-left\"\n      [disabled]=\"disableLeftArrow()\"\n      (click)=\"previousClicked()\"\n    >\n      <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n    </button>\n  }\n</div>\n\n<button\n  class=\"wlcm-calendar-header-change-view-button\"\n  (click)=\"changeCalendarView()\"\n>\n  <div class=\"wlcm-calendar-header-period-label\">\n    {{ periodLabel }}\n  </div>\n\n  <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n</button>\n\n<div class=\"wlcm-calendar-header-button-container\">\n  @if (displayRightArrow()) {\n    <button\n      class=\"wlcm-calendar-header-button wlcm-calendar-header-button-right\"\n      [disabled]=\"disableRightArrow()\"\n      (click)=\"nextClicked()\"\n    >\n      <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n    </button>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.DateAdapter }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_DATE_FORMATS]
-                }] }, { type: i2.MatCalendar, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => MatCalendar)]
-                }] }] });
+            args: [{ selector: 'wlcm-calendar-header', host: { class: 'wlcm-calendar-header' }, imports: [WlcmIconDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wlcm-calendar-header-button-container\">\n  @if (displayLeftArrow()) {\n    <button\n      class=\"wlcm-calendar-header-button wlcm-calendar-header-button-left\"\n      [disabled]=\"disableLeftArrow()\"\n      (click)=\"previousClicked()\"\n    >\n      <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n    </button>\n  }\n</div>\n\n<button\n  class=\"wlcm-calendar-header-change-view-button\"\n  (click)=\"changeCalendarView()\"\n>\n  <div class=\"wlcm-calendar-header-period-label\">\n    {{ periodLabel }}\n  </div>\n\n  <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n</button>\n\n<div class=\"wlcm-calendar-header-button-container\">\n  @if (displayRightArrow()) {\n    <button\n      class=\"wlcm-calendar-header-button wlcm-calendar-header-button-right\"\n      [disabled]=\"disableRightArrow()\"\n      (click)=\"nextClicked()\"\n    >\n      <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n    </button>\n  }\n</div>\n" }]
+        }], propDecorators: { next: [{ type: i0.Input, args: [{ isSignal: true, alias: "next", required: false }] }], previous: [{ type: i0.Input, args: [{ isSignal: true, alias: "previous", required: false }] }], disableLeftArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableLeftArrow", required: false }] }], disableRightArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRightArrow", required: false }] }], displayLeftArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayLeftArrow", required: false }] }], displayRightArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayRightArrow", required: false }] }] } });
 
 class WlcmCalendarDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmCalendarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: WlcmCalendarDirective, isStandalone: true, selector: "[wlcmCalendar]", host: { classAttribute: "wlcm-calendar" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmCalendarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: WlcmCalendarDirective, isStandalone: true, selector: "[wlcmCalendar]", host: { classAttribute: "wlcm-calendar" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmCalendarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmCalendarDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wlcmCalendar]',
                     host: { class: 'wlcm-calendar' },
-                    standalone: true,
                 }]
         }] });
 
-let SingleCalendarRangePickerComponent = class SingleCalendarRangePickerComponent extends WlcmDateRangePicker {
-    constructor(rangeSelectionStrategy, localSelectionModel, triggerSelectionModel, trigger, datepickerConfig, pickerBottomPanel, dateAdapter) {
-        super(localSelectionModel, rangeSelectionStrategy);
-        this.rangeSelectionStrategy = rangeSelectionStrategy;
-        this.localSelectionModel = localSelectionModel;
-        this.triggerSelectionModel = triggerSelectionModel;
-        this.trigger = trigger;
-        this.datepickerConfig = datepickerConfig;
-        this.pickerBottomPanel = pickerBottomPanel;
-        this.dateAdapter = dateAdapter;
+class SingleCalendarRangePickerComponent extends WlcmDateRangePicker {
+    constructor() {
+        super();
         this.headerComponent = WlcmCalendarHeaderComponent;
+        this.bottomPanelContainer = viewChild('bottomPanelContainer', { ...(ngDevMode ? { debugName: "bottomPanelContainer" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+        this.triggerSelectionModel = inject(WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL);
+        this.trigger = inject(WlcmDatepickerTrigger);
+        this.datepickerConfig = inject(WLCM_DATEPICKER_CONFIG);
+        this.pickerBottomPanel = inject(WLCM_DATE_RANGE_PICKER_BP);
+        this.dateAdapter = inject(DateAdapter);
         this.localSelectionModel.updateSelection(this.triggerSelectionModel.selection, this);
     }
     ngAfterViewInit() {
-        this.bottomPanelContainer.createComponent(this.pickerBottomPanel);
+        this.bottomPanelContainer().createComponent(this.pickerBottomPanel);
     }
     get minDate() {
         return this.datepickerConfig.minDate?.();
@@ -528,26 +497,19 @@ let SingleCalendarRangePickerComponent = class SingleCalendarRangePickerComponen
     reset() {
         this.trigger.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: SingleCalendarRangePickerComponent, deps: [{ token: MAT_DATE_RANGE_SELECTION_STRATEGY }, { token: WLCM_DATE_RANGE_SELECTION_MODEL }, { token: WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL }, { token: WlcmDatepickerTrigger }, { token: WLCM_DATEPICKER_CONFIG }, { token: WLCM_DATE_RANGE_PICKER_BP }, { token: i1$1.DateAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: SingleCalendarRangePickerComponent, isStandalone: true, selector: "wlcm-single-calendar-range-picker", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SingleCalendarRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: SingleCalendarRangePickerComponent, isStandalone: true, selector: "wlcm-single-calendar-range-picker", providers: [
             {
                 provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
                 useClass: DefaultMatCalendarRangeStrategy,
             },
             { provide: WlcmDateRangePicker, useExisting: forwardRef(() => SingleCalendarRangePickerComponent) },
             WLCM_DATE_RANGE_SELECTION_MODEL_PROVIDER,
-        ], viewQueries: [{ propertyName: "bottomPanelContainer", first: true, predicate: ["bottomPanelContainer"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"wlcm-date-range-picker-panel\">\n  <div class=\"signal-calendar-range-picker-body\">\n    <mat-calendar\n      wlcmCalendar\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [selected]=\"selected\"\n      [headerComponent]=\"headerComponent\"\n      (_userSelection)=\"calendarSelection($event)\"\n      (_userDragDrop)=\"calendarDragDrop($event)\"\n    ></mat-calendar>\n  </div>\n\n  <ng-container #bottomPanelContainer></ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "directive", type: WlcmCalendarDirective, selector: "[wlcmCalendar]" }] }); }
-};
-SingleCalendarRangePickerComponent = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [Object, MatDateSelectionModel,
-        MatDateSelectionModel,
-        WlcmDatepickerTrigger, Object, Type,
-        DateAdapter])
-], SingleCalendarRangePickerComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: SingleCalendarRangePickerComponent, decorators: [{
+        ], viewQueries: [{ propertyName: "bottomPanelContainer", first: true, predicate: ["bottomPanelContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wlcm-date-range-picker-panel\">\n  <div class=\"signal-calendar-range-picker-body\">\n    <mat-calendar\n      wlcmCalendar\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [selected]=\"selected\"\n      [headerComponent]=\"headerComponent\"\n      (_userSelection)=\"calendarSelection($event)\"\n      (_userDragDrop)=\"calendarDragDrop($event)\"\n    ></mat-calendar>\n  </div>\n\n  <ng-container #bottomPanelContainer></ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$1.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "directive", type: WlcmCalendarDirective, selector: "[wlcmCalendar]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SingleCalendarRangePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-single-calendar-range-picker', imports: [CommonModule, MatDatepickerModule, WlcmCalendarDirective], providers: [
+            args: [{ selector: 'wlcm-single-calendar-range-picker', imports: [MatDatepickerModule, WlcmCalendarDirective], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
                             useClass: DefaultMatCalendarRangeStrategy,
@@ -555,36 +517,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                         { provide: WlcmDateRangePicker, useExisting: forwardRef(() => SingleCalendarRangePickerComponent) },
                         WLCM_DATE_RANGE_SELECTION_MODEL_PROVIDER,
                     ], template: "<div class=\"wlcm-date-range-picker-panel\">\n  <div class=\"signal-calendar-range-picker-body\">\n    <mat-calendar\n      wlcmCalendar\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [selected]=\"selected\"\n      [headerComponent]=\"headerComponent\"\n      (_userSelection)=\"calendarSelection($event)\"\n      (_userDragDrop)=\"calendarDragDrop($event)\"\n    ></mat-calendar>\n  </div>\n\n  <ng-container #bottomPanelContainer></ng-container>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DATE_RANGE_SELECTION_STRATEGY]
-                }] }, { type: i2.MatDateSelectionModel, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATE_RANGE_SELECTION_MODEL]
-                }] }, { type: i2.MatDateSelectionModel, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
-                }] }, { type: WlcmDatepickerTrigger }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATEPICKER_CONFIG]
-                }] }, { type: i0.Type, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATE_RANGE_PICKER_BP]
-                }] }, { type: i1$1.DateAdapter }], propDecorators: { bottomPanelContainer: [{
-                type: ViewChild,
-                args: ['bottomPanelContainer', { read: ViewContainerRef }]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { bottomPanelContainer: [{ type: i0.ViewChild, args: ['bottomPanelContainer', { ...{
+                            read: ViewContainerRef,
+                        }, isSignal: true }] }] } });
 
-let DateRangePickerInputEndDirective = class DateRangePickerInputEndDirective extends WlcmDateRangePickerInputBase {
-    constructor(element, dateAdapter, dateFormats, selectionModel, trigger) {
-        super(element, dateAdapter, dateFormats, trigger);
-        this.element = element;
-        this.dateAdapter = dateAdapter;
-        this.dateFormats = dateFormats;
-        this.selectionModel = selectionModel;
-        this.trigger = trigger;
+class DateRangePickerInputEndDirective extends WlcmDateRangePickerInputBase {
+    constructor() {
+        super();
+        this.selectionModel = inject(WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL);
+        this.destroyRef = inject(DestroyRef);
         this.updateSelection = () => {
-            let end = this.parseCurrentValue();
+            const end = this.parseCurrentValue();
             this.selectionModel.updateSelection(new DateRange(this.selectionModel.selection.start, end), this);
         };
         this.handleSelectionChange();
@@ -600,45 +543,30 @@ let DateRangePickerInputEndDirective = class DateRangePickerInputEndDirective ex
         return defaultErrors;
     }
     handleSelectionChange() {
-        this.selectionModel.selectionChanged.pipe(untilDestroyed(this)).subscribe(({ selection }) => {
+        this.selectionModel.selectionChanged.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(({ selection }) => {
             const validDate = this.dateAdapter.getValidDateOrNull(selection.end);
             this._changed?.(validDate);
             this.updateInputValue(validDate);
             this._validatorChanged?.();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DateRangePickerInputEndDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.DateAdapter }, { token: MAT_DATE_FORMATS, optional: true }, { token: WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL }, { token: WlcmDatepickerTrigger }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: DateRangePickerInputEndDirective, isStandalone: true, selector: "[wlcmDateRangePickerInputEnd]", host: { classAttribute: "wlcm-date-range-picker-input-field" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DateRangePickerInputEndDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DateRangePickerInputEndDirective, isStandalone: true, selector: "[wlcmDateRangePickerInputEnd]", host: { classAttribute: "wlcm-date-range-picker-input-field" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePickerInputEndDirective), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateRangePickerInputEndDirective), multi: true },
         ], usesInheritance: true, ngImport: i0 }); }
-};
-DateRangePickerInputEndDirective = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [ElementRef,
-        DateAdapter, Object, MatDateSelectionModel,
-        WlcmDatepickerTrigger])
-], DateRangePickerInputEndDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DateRangePickerInputEndDirective, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DateRangePickerInputEndDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wlcmDateRangePickerInputEnd]',
                     host: { class: 'wlcm-date-range-picker-input-field' },
-                    standalone: true,
                     providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePickerInputEndDirective), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateRangePickerInputEndDirective), multi: true },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_DATE_FORMATS]
-                }] }, { type: i2.MatDateSelectionModel, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
-                }] }, { type: WlcmDatepickerTrigger }] });
+        }], ctorParameters: () => [] });
 
 class DateRangePickerErrors {
     static throwNoStartInputError() {
@@ -650,18 +578,19 @@ class DateRangePickerErrors {
 }
 
 class WlcmDateRangePickerInputComponent extends WlcmDatepickerTrigger {
-    constructor(overlay, viewContainerRef, selectionModel, formField, controlContainer) {
-        super(overlay, viewContainerRef, selectionModel);
-        this.overlay = overlay;
-        this.viewContainerRef = viewContainerRef;
-        this.selectionModel = selectionModel;
-        this.formField = formField;
-        this.controlContainer = controlContainer;
+    constructor() {
+        super();
         this._focusStream$ = new BehaviorSubject(EMPTY);
         this._blurStream$ = new BehaviorSubject(EMPTY);
         this.focus$ = this._focusStream$.pipe(switchMap((stream) => stream));
         this.blur$ = this._blurStream$.pipe(switchMap((stream) => stream));
         this.componentType = SingleCalendarRangePickerComponent;
+        this.startInput = contentChild(DateRangePickerInputStartDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startInput" }] : /* istanbul ignore next */ []));
+        this.endInput = contentChild(DateRangePickerInputEndDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "endInput" }] : /* istanbul ignore next */ []));
+        this.formField = inject(WLCM_FORM_FIELD, { host: true });
+        this.controlContainer = inject(ControlContainer, { host: true });
     }
     ngAfterContentInit() {
         this.checkInputs();
@@ -685,19 +614,21 @@ class WlcmDateRangePickerInputComponent extends WlcmDatepickerTrigger {
         return this.controlContainer?.control;
     }
     get startInputElement() {
-        return this.startInput.element.nativeElement;
+        return this.startInput().element.nativeElement;
     }
     get endInputElement() {
-        return this.endInput.element.nativeElement;
+        return this.endInput().element.nativeElement;
     }
     checkInputs() {
-        if (!this.startInput)
+        if (!this.startInput())
             DateRangePickerErrors.throwNoStartInputError();
-        if (!this.endInput)
+        if (!this.endInput())
             DateRangePickerErrors.throwNoEndInputError();
     }
     attachFocusBlurListeners() {
-        const voidFn = () => { };
+        const voidFn = () => {
+            // noop
+        };
         const startInputFocus = fromEvent(this.startInputElement, 'focus');
         const endInputFocus = fromEvent(this.endInputElement, 'focus');
         const startInputBlur = fromEvent(this.startInputElement, 'blur');
@@ -707,8 +638,8 @@ class WlcmDateRangePickerInputComponent extends WlcmDatepickerTrigger {
         this._focusStream$.next(merge(...focusObservables).pipe(map(voidFn)));
         this._blurStream$.next(merge(...blurObservables).pipe(map(() => this.control?.markAsTouched())));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDateRangePickerInputComponent, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL }, { token: WLCM_FORM_FIELD, host: true }, { token: ControlContainer, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: WlcmDateRangePickerInputComponent, isStandalone: true, selector: "wlcm-date-range-picker-input", inputs: { componentType: "componentType" }, host: { classAttribute: "wlcm-date-range-picker-input" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDateRangePickerInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: WlcmDateRangePickerInputComponent, isStandalone: true, selector: "wlcm-date-range-picker-input", host: { classAttribute: "wlcm-date-range-picker-input" }, providers: [
             WLCM_FORM_CONTROL_PROVIDER,
             WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL_PROVIDER,
             {
@@ -719,11 +650,11 @@ class WlcmDateRangePickerInputComponent extends WlcmDatepickerTrigger {
                 },
             },
             { provide: WlcmDatepickerTrigger, useExisting: forwardRef(() => WlcmDateRangePickerInputComponent) },
-        ], queries: [{ propertyName: "startInput", first: true, predicate: DateRangePickerInputStartDirective, descendants: true }, { propertyName: "endInput", first: true, predicate: DateRangePickerInputEndDirective, descendants: true }], exportAs: ["wlcmDateRangePickerInput"], usesInheritance: true, ngImport: i0, template: "<div class=\"wlcm-date-range-picker-inputs-container\">\n  <div class=\"wlcm-date-range-picker-input-field-wrapper\">\n    <ng-content select=\"[wlcmDateRangePickerInputStart]\"></ng-content>\n  </div>\n\n  <div class=\"wlcm-date-range-picker-input-dash\"></div>\n\n  <div class=\"wlcm-date-range-picker-input-field-wrapper\">\n    <ng-content select=\"[wlcmDateRangePickerInputEnd]\"></ng-content>\n  </div>\n</div>\n", styles: [".wlcm-date-range-picker-inputs-container{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: WlcmFormsModule }] }); }
+        ], queries: [{ propertyName: "startInput", first: true, predicate: DateRangePickerInputStartDirective, descendants: true, isSignal: true }, { propertyName: "endInput", first: true, predicate: DateRangePickerInputEndDirective, descendants: true, isSignal: true }], exportAs: ["wlcmDateRangePickerInput"], usesInheritance: true, ngImport: i0, template: "<div class=\"wlcm-date-range-picker-inputs-container\">\n  <div class=\"wlcm-date-range-picker-input-field-wrapper\">\n    <ng-content select=\"[wlcmDateRangePickerInputStart]\"></ng-content>\n  </div>\n\n  <div class=\"wlcm-date-range-picker-input-dash\"></div>\n\n  <div class=\"wlcm-date-range-picker-input-field-wrapper\">\n    <ng-content select=\"[wlcmDateRangePickerInputEnd]\"></ng-content>\n  </div>\n</div>\n", styles: [".wlcm-date-range-picker-inputs-container{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: WlcmFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDateRangePickerInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDateRangePickerInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-date-range-picker-input', host: { class: 'wlcm-date-range-picker-input' }, exportAs: 'wlcmDateRangePickerInput', standalone: true, imports: [CommonModule, WlcmFormsModule], providers: [
+            args: [{ selector: 'wlcm-date-range-picker-input', host: { class: 'wlcm-date-range-picker-input' }, exportAs: 'wlcmDateRangePickerInput', imports: [WlcmFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         WLCM_FORM_CONTROL_PROVIDER,
                         WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL_PROVIDER,
                         {
@@ -735,39 +666,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                         },
                         { provide: WlcmDatepickerTrigger, useExisting: forwardRef(() => WlcmDateRangePickerInputComponent) },
                     ], template: "<div class=\"wlcm-date-range-picker-inputs-container\">\n  <div class=\"wlcm-date-range-picker-input-field-wrapper\">\n    <ng-content select=\"[wlcmDateRangePickerInputStart]\"></ng-content>\n  </div>\n\n  <div class=\"wlcm-date-range-picker-input-dash\"></div>\n\n  <div class=\"wlcm-date-range-picker-input-field-wrapper\">\n    <ng-content select=\"[wlcmDateRangePickerInputEnd]\"></ng-content>\n  </div>\n</div>\n", styles: [".wlcm-date-range-picker-inputs-container{display:flex;align-items:center}\n"] }]
-        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i2.MatDateSelectionModel, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
-                }] }, { type: undefined, decorators: [{
-                    type: Host
-                }, {
-                    type: Inject,
-                    args: [WLCM_FORM_FIELD]
-                }] }, { type: i3.ControlContainer, decorators: [{
-                    type: Host
-                }, {
-                    type: Inject,
-                    args: [ControlContainer]
-                }] }], propDecorators: { componentType: [{
-                type: Input
-            }], startInput: [{
-                type: ContentChild,
-                args: [DateRangePickerInputStartDirective]
-            }], endInput: [{
-                type: ContentChild,
-                args: [DateRangePickerInputEndDirective]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { startInput: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DateRangePickerInputStartDirective), { isSignal: true }] }], endInput: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DateRangePickerInputEndDirective), { isSignal: true }] }] } });
 
 class WlcmDataRangeCalendar {
-    constructor(location, element, calendar, dateAdapter, datepickerConfig) {
-        this.element = element;
-        this.calendar = calendar;
-        this.dateAdapter = dateAdapter;
-        this.datepickerConfig = datepickerConfig;
+    constructor() {
         this.dateChange = output();
         this.viewChange = output();
-        this.disabled = input(false);
-        this.location = location;
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.element = inject(ElementRef);
+        this.calendar = inject(forwardRef(() => MatCalendar));
+        this.dateAdapter = inject(DateAdapter);
+        this.datepickerConfig = inject(WLCM_DATEPICKER_CONFIG);
         effect(() => {
             if (this.disabled()) {
                 this.element.nativeElement.classList.add('wlcm-calendar-disabled');
@@ -805,71 +715,58 @@ class WlcmDataRangeCalendar {
             return true;
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDataRangeCalendar, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.9", type: WlcmDataRangeCalendar, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", viewChange: "viewChange" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDataRangeCalendar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: WlcmDataRangeCalendar, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", viewChange: "viewChange" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDataRangeCalendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDataRangeCalendar, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: undefined }, { type: i0.ElementRef }, { type: i2.MatCalendar }, { type: i1$1.DateAdapter }, { type: undefined }] });
+        }], ctorParameters: () => [], propDecorators: { dateChange: [{ type: i0.Output, args: ["dateChange"] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
-let WlcmLeftCalendarDirective = class WlcmLeftCalendarDirective extends WlcmDataRangeCalendar {
-    constructor(element, dateAdapter, calendar, datepickerConfig) {
-        super('left', element, calendar, dateAdapter, datepickerConfig);
-        this.element = element;
-        this.dateAdapter = dateAdapter;
-        this.calendar = calendar;
-        this.datepickerConfig = datepickerConfig;
+class WlcmLeftCalendarDirective extends WlcmDataRangeCalendar {
+    constructor() {
+        super();
+        this.location = 'left';
+        this.destroyRef = inject(DestroyRef);
         this.handleYearChange();
         this.handleMonthChange();
     }
     handleYearChange() {
-        this.calendar.yearSelected.pipe(untilDestroyed(this)).subscribe((date) => this.dateChange.emit(date));
+        this.calendar.yearSelected
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((date) => this.dateChange.emit(date));
     }
     handleMonthChange() {
-        this.calendar.monthSelected.pipe(untilDestroyed(this)).subscribe((date) => this.dateChange.emit(date));
+        this.calendar.monthSelected
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((date) => this.dateChange.emit(date));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmLeftCalendarDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.DateAdapter }, { token: forwardRef(() => MatCalendar) }, { token: WLCM_DATEPICKER_CONFIG }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: WlcmLeftCalendarDirective, isStandalone: true, selector: "[wlcmLeftCalendar]", providers: [{ provide: WlcmDataRangeCalendar, useExisting: forwardRef(() => WlcmLeftCalendarDirective) }], usesInheritance: true, ngImport: i0 }); }
-};
-WlcmLeftCalendarDirective = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [ElementRef,
-        DateAdapter,
-        MatCalendar, Object])
-], WlcmLeftCalendarDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmLeftCalendarDirective, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmLeftCalendarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: WlcmLeftCalendarDirective, isStandalone: true, selector: "[wlcmLeftCalendar]", providers: [{ provide: WlcmDataRangeCalendar, useExisting: forwardRef(() => WlcmLeftCalendarDirective) }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmLeftCalendarDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wlcmLeftCalendar]',
-                    standalone: true,
                     providers: [{ provide: WlcmDataRangeCalendar, useExisting: forwardRef(() => WlcmLeftCalendarDirective) }],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: i2.MatCalendar, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => MatCalendar)]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATEPICKER_CONFIG]
-                }] }] });
+        }], ctorParameters: () => [] });
 
-let WlcmRightCalendarDirective = class WlcmRightCalendarDirective extends WlcmDataRangeCalendar {
-    constructor(element, dateAdapter, calendar, datepickerConfig) {
-        super('right', element, calendar, dateAdapter, datepickerConfig);
-        this.element = element;
-        this.dateAdapter = dateAdapter;
-        this.calendar = calendar;
-        this.datepickerConfig = datepickerConfig;
+class WlcmRightCalendarDirective extends WlcmDataRangeCalendar {
+    constructor() {
+        super();
+        this.location = 'right';
+        this.destroyRef = inject(DestroyRef);
         this.handleYearChange();
         this.handleMonthChange();
     }
     handleYearChange() {
         this.calendar.yearSelected
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((date) => this.dateChange.emit(this.dateAdapter.addCalendarMonths(date, -1)));
     }
     handleMonthChange() {
         this.calendar.monthSelected
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((date) => this.dateChange.emit(this.dateAdapter.addCalendarMonths(date, -1)));
     }
     nextMonth() {
@@ -881,37 +778,24 @@ let WlcmRightCalendarDirective = class WlcmRightCalendarDirective extends WlcmDa
     nextYear() {
         this.dateChange.emit(this.dateAdapter.addCalendarMonths(this.dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? 1 : yearsPerPage), -1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmRightCalendarDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.DateAdapter }, { token: forwardRef(() => MatCalendar) }, { token: WLCM_DATEPICKER_CONFIG }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: WlcmRightCalendarDirective, isStandalone: true, selector: "[wlcmRightCalendar]", providers: [{ provide: WlcmDataRangeCalendar, useExisting: forwardRef(() => WlcmRightCalendarDirective) }], usesInheritance: true, ngImport: i0 }); }
-};
-WlcmRightCalendarDirective = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [ElementRef,
-        DateAdapter,
-        MatCalendar, Object])
-], WlcmRightCalendarDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmRightCalendarDirective, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmRightCalendarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: WlcmRightCalendarDirective, isStandalone: true, selector: "[wlcmRightCalendar]", providers: [{ provide: WlcmDataRangeCalendar, useExisting: forwardRef(() => WlcmRightCalendarDirective) }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmRightCalendarDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wlcmRightCalendar]',
-                    standalone: true,
                     providers: [{ provide: WlcmDataRangeCalendar, useExisting: forwardRef(() => WlcmRightCalendarDirective) }],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: i2.MatCalendar, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => MatCalendar)]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATEPICKER_CONFIG]
-                }] }] });
+        }], ctorParameters: () => [] });
 
 class WlcmDateRangeCalendarHeaderComponent {
-    constructor(rangeCalendar, dateFormats, calendar, datepickerConfig) {
-        this.rangeCalendar = rangeCalendar;
-        this.dateFormats = dateFormats;
-        this.calendar = calendar;
-        this.datepickerConfig = datepickerConfig;
+    constructor() {
         this.WlcmIconName = WlcmIconName;
+        this.rangeCalendar = inject(WlcmDataRangeCalendar, { optional: true });
+        this.dateFormats = inject(MAT_DATE_FORMATS, { optional: true });
+        this.calendar = inject(forwardRef(() => MatCalendar));
+        this.datepickerConfig = inject(WLCM_DATEPICKER_CONFIG);
         this.previous = () => {
             if (this.isPreviousDisabled)
                 return;
@@ -959,71 +843,72 @@ class WlcmDateRangeCalendarHeaderComponent {
     get canDisplayRightArrow() {
         return !this.rangeCalendar || this.rangeCalendar.location === 'right' || this.calendar.currentView !== 'month';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDateRangeCalendarHeaderComponent, deps: [{ token: WlcmDataRangeCalendar, optional: true }, { token: MAT_DATE_FORMATS, optional: true }, { token: forwardRef(() => MatCalendar) }, { token: WLCM_DATEPICKER_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: WlcmDateRangeCalendarHeaderComponent, isStandalone: true, selector: "wlcm-date-range-calendar-header", ngImport: i0, template: "<wlcm-calendar-header\n  [next]=\"next\"\n  [previous]=\"previous\"\n  [disableLeftArrow]=\"isPreviousDisabled\"\n  [disableRightArrow]=\"isNextDisabled\"\n  [displayLeftArrow]=\"canDisplayLeftArrow && !rangeCalendar.disabled()\"\n  [displayRightArrow]=\"canDisplayRightArrow && !rangeCalendar.disabled()\"\n></wlcm-calendar-header>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WlcmCalendarHeaderComponent, selector: "wlcm-calendar-header", inputs: ["next", "previous", "disableLeftArrow", "disableRightArrow", "displayLeftArrow", "displayRightArrow"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDateRangeCalendarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: WlcmDateRangeCalendarHeaderComponent, isStandalone: true, selector: "wlcm-date-range-calendar-header", ngImport: i0, template: "<wlcm-calendar-header\n  [next]=\"next\"\n  [previous]=\"previous\"\n  [disableLeftArrow]=\"isPreviousDisabled\"\n  [disableRightArrow]=\"isNextDisabled\"\n  [displayLeftArrow]=\"canDisplayLeftArrow && !rangeCalendar?.disabled()\"\n  [displayRightArrow]=\"canDisplayRightArrow && !rangeCalendar?.disabled()\"\n></wlcm-calendar-header>\n", styles: [""], dependencies: [{ kind: "component", type: WlcmCalendarHeaderComponent, selector: "wlcm-calendar-header", inputs: ["next", "previous", "disableLeftArrow", "disableRightArrow", "displayLeftArrow", "displayRightArrow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDateRangeCalendarHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDateRangeCalendarHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-date-range-calendar-header', standalone: true, imports: [CommonModule, WlcmCalendarHeaderComponent], template: "<wlcm-calendar-header\n  [next]=\"next\"\n  [previous]=\"previous\"\n  [disableLeftArrow]=\"isPreviousDisabled\"\n  [disableRightArrow]=\"isNextDisabled\"\n  [displayLeftArrow]=\"canDisplayLeftArrow && !rangeCalendar.disabled()\"\n  [displayRightArrow]=\"canDisplayRightArrow && !rangeCalendar.disabled()\"\n></wlcm-calendar-header>\n" }]
-        }], ctorParameters: () => [{ type: WlcmDataRangeCalendar, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_DATE_FORMATS]
-                }] }, { type: i2.MatCalendar, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => MatCalendar)]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATEPICKER_CONFIG]
-                }] }] });
+            args: [{ selector: 'wlcm-date-range-calendar-header', imports: [WlcmCalendarHeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<wlcm-calendar-header\n  [next]=\"next\"\n  [previous]=\"previous\"\n  [disableLeftArrow]=\"isPreviousDisabled\"\n  [disableRightArrow]=\"isNextDisabled\"\n  [displayLeftArrow]=\"canDisplayLeftArrow && !rangeCalendar?.disabled()\"\n  [displayRightArrow]=\"canDisplayRightArrow && !rangeCalendar?.disabled()\"\n></wlcm-calendar-header>\n" }]
+        }] });
 
-let DoubleCalendarRangePickerComponent = class DoubleCalendarRangePickerComponent extends WlcmDateRangePicker {
-    constructor(rangeConfig, rangeSelectionStrategy, localSelectionModel, triggerSelectionModel, trigger, datepickerConfig, pickerBottomPanel, pickerLeftPanel, dateAdapter) {
-        super(localSelectionModel, rangeSelectionStrategy);
-        this.rangeConfig = rangeConfig;
-        this.rangeSelectionStrategy = rangeSelectionStrategy;
-        this.localSelectionModel = localSelectionModel;
-        this.triggerSelectionModel = triggerSelectionModel;
-        this.trigger = trigger;
-        this.datepickerConfig = datepickerConfig;
-        this.pickerBottomPanel = pickerBottomPanel;
-        this.pickerLeftPanel = pickerLeftPanel;
-        this.dateAdapter = dateAdapter;
+class DoubleCalendarRangePickerComponent extends WlcmDateRangePicker {
+    constructor() {
+        super();
         this.headerComponent = WlcmDateRangeCalendarHeaderComponent;
-        this._isViewInitialized = signal(false);
-        this.startDate = signal(new Date());
-        this.leftCalendarYearViewActivated = signal(false);
-        this.rightCalendarYearViewActivated = signal(false);
+        this._isViewInitialized = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_isViewInitialized" }] : /* istanbul ignore next */ []));
+        this.rangeConfig = inject(WLCM_DATE_RANGE_PICKER_CONFIG, { optional: true });
+        this.triggerSelectionModel = inject(WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL);
+        this.trigger = inject(WlcmDatepickerTrigger);
+        this.datepickerConfig = inject(WLCM_DATEPICKER_CONFIG);
+        this.pickerBottomPanel = inject(WLCM_DATE_RANGE_PICKER_BP);
+        this.pickerLeftPanel = inject(WLCM_DATE_RANGE_PICKER_LEFT_PANEL, { optional: true });
+        this.dateAdapter = inject(DateAdapter);
+        this.destroyRef = inject(DestroyRef);
+        this.leftCalendar = viewChild(WlcmLeftCalendarDirective, { ...(ngDevMode ? { debugName: "leftCalendar" } : /* istanbul ignore next */ {}), read: MatCalendar });
+        this.rightCalendar = viewChild(WlcmRightCalendarDirective, { ...(ngDevMode ? { debugName: "rightCalendar" } : /* istanbul ignore next */ {}), read: MatCalendar });
+        this.leftCalendarElement = viewChild(WlcmLeftCalendarDirective, { ...(ngDevMode ? { debugName: "leftCalendarElement" } : /* istanbul ignore next */ {}), read: ElementRef });
+        this.bottomPanelContainer = viewChild('bottomPanelContainer', { ...(ngDevMode ? { debugName: "bottomPanelContainer" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+        this.leftPanelContainer = viewChild('leftPanelContainer', { ...(ngDevMode ? { debugName: "leftPanelContainer" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+        this.monthView = viewChild(MatMonthView, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "monthView" }] : /* istanbul ignore next */ []));
+        this.startDate = signal(new Date(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startDate" }] : /* istanbul ignore next */ []));
+        this.leftCalendarYearViewActivated = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "leftCalendarYearViewActivated" }] : /* istanbul ignore next */ []));
+        this.rightCalendarYearViewActivated = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rightCalendarYearViewActivated" }] : /* istanbul ignore next */ []));
         this.localSelectionModel.updateSelection(this.triggerSelectionModel.selection, this);
         if (this.triggerSelectionModel.selection.start) {
             this.startDate.set(this.triggerSelectionModel.selection.start);
         }
-        if (this.rangeConfig.headerComponent) {
+        if (this.rangeConfig?.headerComponent) {
             this.headerComponent = this.rangeConfig.headerComponent;
         }
         effect(() => {
             if (!this._isViewInitialized())
                 return;
             const startDate = this.startDate();
-            this.leftCalendar.activeDate = startDate;
-            this.rightCalendar.activeDate = this.dateAdapter.addCalendarMonths(startDate, 1);
-            this.rightCalendar.startAt = this.rightCalendar.activeDate;
+            const leftCalendar = this.leftCalendar();
+            const rightCalendar = this.rightCalendar();
+            if (!leftCalendar || !rightCalendar)
+                return;
+            leftCalendar.activeDate = startDate;
+            rightCalendar.activeDate = this.dateAdapter.addCalendarMonths(startDate, 1);
+            rightCalendar.startAt = rightCalendar.activeDate;
         });
     }
     ngAfterViewInit() {
         this._isViewInitialized.set(true);
-        this.leftCalendar.viewChanged.pipe(untilDestroyed(this)).subscribe((view) => {
+        this.leftCalendar().viewChanged.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((view) => {
             this.leftCalendarYearViewActivated.set(view !== 'month');
         });
-        this.rightCalendar.viewChanged.pipe(untilDestroyed(this)).subscribe((view) => {
+        this.rightCalendar().viewChanged.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((view) => {
             this.rightCalendarYearViewActivated.set(view !== 'month');
         });
-        this.bottomPanelContainer.createComponent(this.pickerBottomPanel);
+        this.bottomPanelContainer().createComponent(this.pickerBottomPanel);
         if (this.pickerLeftPanel) {
-            this.leftPanelContainer.createComponent(this.pickerLeftPanel).changeDetectorRef.detectChanges();
+            this.leftPanelContainer().createComponent(this.pickerLeftPanel).changeDetectorRef.detectChanges();
         }
         this.handleRightCalendarPreviewChange();
     }
@@ -1035,56 +920,54 @@ let DoubleCalendarRangePickerComponent = class DoubleCalendarRangePickerComponen
         this.trigger.close();
     }
     get leftCalendarActiveCell() {
-        return this.leftCalendarElement.nativeElement.querySelector('.mat-calendar-body-active');
+        return this.leftCalendarElement()?.nativeElement.querySelector('.mat-calendar-body-active') ?? null;
     }
     handleRightCalendarPreviewChange() {
+        const rightCalendar = this.rightCalendar();
+        if (!rightCalendar)
+            return;
         const viewChanged = new Subject();
-        this.rightCalendar.viewChanged
-            .pipe(untilDestroyed(this))
+        rightCalendar.viewChanged
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .pipe(tap(() => viewChanged.next()))
-            .pipe(startWith(this.rightCalendar.currentView))
+            .pipe(startWith(rightCalendar.currentView))
             .subscribe((view) => {
             if (view !== 'month')
                 return;
-            this.rightCalendar.monthView._matCalendarBody.previewChange
-                .pipe(takeUntil(viewChanged), untilDestroyed(this))
+            rightCalendar.monthView._matCalendarBody.previewChange
+                .pipe(takeUntil(viewChanged), takeUntilDestroyed(this.destroyRef))
                 .subscribe(() => {
-                if (this.leftCalendar.currentView !== 'month' || !this.leftCalendar.monthView._rangeStart)
+                const leftCalendar = this.leftCalendar();
+                if (!leftCalendar || leftCalendar.currentView !== 'month' || !leftCalendar.monthView._rangeStart()) {
                     return;
-                this.leftCalendar.monthView._previewStart = this.rightCalendar.monthView._previewStart;
-                this.leftCalendar.monthView._previewEnd = this.rightCalendar.monthView._previewEnd;
+                }
+                leftCalendar.monthView._previewStart.set(rightCalendar.monthView._previewStart());
+                leftCalendar.monthView._previewEnd.set(rightCalendar.monthView._previewEnd());
                 const activeCell = this.leftCalendarActiveCell;
                 if (activeCell && activeCell === document.activeElement)
                     activeCell.blur();
-                this.leftCalendar.monthView._changeDetectorRef.markForCheck();
+                leftCalendar.monthView._changeDetectorRef.markForCheck();
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DoubleCalendarRangePickerComponent, deps: [{ token: WLCM_DATE_RANGE_PICKER_CONFIG, optional: true }, { token: MAT_DATE_RANGE_SELECTION_STRATEGY }, { token: WLCM_DATE_RANGE_SELECTION_MODEL }, { token: WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL }, { token: WlcmDatepickerTrigger }, { token: WLCM_DATEPICKER_CONFIG }, { token: WLCM_DATE_RANGE_PICKER_BP }, { token: WLCM_DATE_RANGE_PICKER_LEFT_PANEL, optional: true }, { token: i1$1.DateAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: DoubleCalendarRangePickerComponent, isStandalone: true, selector: "wlcm-double-calendar-range-picker", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DoubleCalendarRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: DoubleCalendarRangePickerComponent, isStandalone: true, selector: "wlcm-double-calendar-range-picker", providers: [
             {
                 provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
                 useClass: DefaultMatCalendarRangeStrategy,
             },
             { provide: WlcmDateRangePicker, useExisting: forwardRef(() => DoubleCalendarRangePickerComponent) },
             WLCM_DATE_RANGE_SELECTION_MODEL_PROVIDER,
-        ], viewQueries: [{ propertyName: "leftCalendar", first: true, predicate: WlcmLeftCalendarDirective, descendants: true, read: MatCalendar }, { propertyName: "rightCalendar", first: true, predicate: WlcmRightCalendarDirective, descendants: true, read: MatCalendar }, { propertyName: "leftCalendarElement", first: true, predicate: WlcmLeftCalendarDirective, descendants: true, read: ElementRef }, { propertyName: "bottomPanelContainer", first: true, predicate: ["bottomPanelContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "leftPanelContainer", first: true, predicate: ["leftPanelContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "monthView", first: true, predicate: MatMonthView, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wlcm-date-range-picker-panel\">\n  <div class=\"double-calendar-range-picker-body\">\n    <div class=\"double-calendar-range-picker__left-section\">\n      <ng-container #leftPanelContainer></ng-container>\n    </div>\n\n    <div class=\"double-calendar-range-picker__calendars-container\">\n      <mat-calendar\n        wlcmCalendar\n        wlcmLeftCalendar\n        [selected]=\"selected\"\n        [disabled]=\"rightCalendarYearViewActivated()\"\n        [headerComponent]=\"headerComponent\"\n        (_userSelection)=\"calendarSelection($event)\"\n        (_userDragDrop)=\"calendarDragDrop($event)\"\n        (dateChange)=\"startDate.set($event)\"\n      ></mat-calendar>\n\n      <mat-calendar\n        wlcmCalendar\n        wlcmRightCalendar\n        [selected]=\"selected\"\n        [disabled]=\"leftCalendarYearViewActivated()\"\n        [headerComponent]=\"headerComponent\"\n        (_userSelection)=\"calendarSelection($event)\"\n        (_userDragDrop)=\"calendarDragDrop($event)\"\n        (dateChange)=\"startDate.set($event)\"\n      ></mat-calendar>\n    </div>\n  </div>\n\n  <ng-container #bottomPanelContainer></ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "directive", type: WlcmCalendarDirective, selector: "[wlcmCalendar]" }, { kind: "directive", type: WlcmLeftCalendarDirective, selector: "[wlcmLeftCalendar]" }, { kind: "directive", type: WlcmRightCalendarDirective, selector: "[wlcmRightCalendar]" }] }); }
-};
-DoubleCalendarRangePickerComponent = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [Object, Object, MatDateSelectionModel,
-        MatDateSelectionModel,
-        WlcmDatepickerTrigger, Object, Type, Object, DateAdapter])
-], DoubleCalendarRangePickerComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DoubleCalendarRangePickerComponent, decorators: [{
+        ], viewQueries: [{ propertyName: "leftCalendar", first: true, predicate: WlcmLeftCalendarDirective, descendants: true, read: MatCalendar, isSignal: true }, { propertyName: "rightCalendar", first: true, predicate: WlcmRightCalendarDirective, descendants: true, read: MatCalendar, isSignal: true }, { propertyName: "leftCalendarElement", first: true, predicate: WlcmLeftCalendarDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "bottomPanelContainer", first: true, predicate: ["bottomPanelContainer"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "leftPanelContainer", first: true, predicate: ["leftPanelContainer"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "monthView", first: true, predicate: MatMonthView, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wlcm-date-range-picker-panel\">\n  <div class=\"double-calendar-range-picker-body\">\n    <div class=\"double-calendar-range-picker__left-section\">\n      <ng-container #leftPanelContainer></ng-container>\n    </div>\n\n    <div class=\"double-calendar-range-picker__calendars-container\">\n      <mat-calendar\n        wlcmCalendar\n        wlcmLeftCalendar\n        [selected]=\"selected\"\n        [disabled]=\"rightCalendarYearViewActivated()\"\n        [headerComponent]=\"headerComponent\"\n        (_userSelection)=\"calendarSelection($event)\"\n        (_userDragDrop)=\"calendarDragDrop($event)\"\n        (dateChange)=\"startDate.set($event)\"\n      ></mat-calendar>\n\n      <mat-calendar\n        wlcmCalendar\n        wlcmRightCalendar\n        [selected]=\"selected\"\n        [disabled]=\"leftCalendarYearViewActivated()\"\n        [headerComponent]=\"headerComponent\"\n        (_userSelection)=\"calendarSelection($event)\"\n        (_userDragDrop)=\"calendarDragDrop($event)\"\n        (dateChange)=\"startDate.set($event)\"\n      ></mat-calendar>\n    </div>\n  </div>\n\n  <ng-container #bottomPanelContainer></ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$1.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "directive", type: WlcmCalendarDirective, selector: "[wlcmCalendar]" }, { kind: "directive", type: WlcmLeftCalendarDirective, selector: "[wlcmLeftCalendar]" }, { kind: "directive", type: WlcmRightCalendarDirective, selector: "[wlcmRightCalendar]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DoubleCalendarRangePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wlcm-double-calendar-range-picker', imports: [
-                        CommonModule,
                         MatDatepickerModule,
                         WlcmCalendarDirective,
                         WlcmLeftCalendarDirective,
-                        WlcmRightCalendarDirective,
-                    ], providers: [
+                        WlcmRightCalendarDirective
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
                             useClass: DefaultMatCalendarRangeStrategy,
@@ -1092,143 +975,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                         { provide: WlcmDateRangePicker, useExisting: forwardRef(() => DoubleCalendarRangePickerComponent) },
                         WLCM_DATE_RANGE_SELECTION_MODEL_PROVIDER,
                     ], template: "<div class=\"wlcm-date-range-picker-panel\">\n  <div class=\"double-calendar-range-picker-body\">\n    <div class=\"double-calendar-range-picker__left-section\">\n      <ng-container #leftPanelContainer></ng-container>\n    </div>\n\n    <div class=\"double-calendar-range-picker__calendars-container\">\n      <mat-calendar\n        wlcmCalendar\n        wlcmLeftCalendar\n        [selected]=\"selected\"\n        [disabled]=\"rightCalendarYearViewActivated()\"\n        [headerComponent]=\"headerComponent\"\n        (_userSelection)=\"calendarSelection($event)\"\n        (_userDragDrop)=\"calendarDragDrop($event)\"\n        (dateChange)=\"startDate.set($event)\"\n      ></mat-calendar>\n\n      <mat-calendar\n        wlcmCalendar\n        wlcmRightCalendar\n        [selected]=\"selected\"\n        [disabled]=\"leftCalendarYearViewActivated()\"\n        [headerComponent]=\"headerComponent\"\n        (_userSelection)=\"calendarSelection($event)\"\n        (_userDragDrop)=\"calendarDragDrop($event)\"\n        (dateChange)=\"startDate.set($event)\"\n      ></mat-calendar>\n    </div>\n  </div>\n\n  <ng-container #bottomPanelContainer></ng-container>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [WLCM_DATE_RANGE_PICKER_CONFIG]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DATE_RANGE_SELECTION_STRATEGY]
-                }] }, { type: i2.MatDateSelectionModel, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATE_RANGE_SELECTION_MODEL]
-                }] }, { type: i2.MatDateSelectionModel, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
-                }] }, { type: WlcmDatepickerTrigger }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATEPICKER_CONFIG]
-                }] }, { type: i0.Type, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATE_RANGE_PICKER_BP]
-                }] }, { type: i0.Type, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [WLCM_DATE_RANGE_PICKER_LEFT_PANEL]
-                }] }, { type: i1$1.DateAdapter }], propDecorators: { leftCalendar: [{
-                type: ViewChild,
-                args: [WlcmLeftCalendarDirective, { read: MatCalendar }]
-            }], rightCalendar: [{
-                type: ViewChild,
-                args: [WlcmRightCalendarDirective, { read: MatCalendar }]
-            }], leftCalendarElement: [{
-                type: ViewChild,
-                args: [WlcmLeftCalendarDirective, { read: ElementRef }]
-            }], bottomPanelContainer: [{
-                type: ViewChild,
-                args: ['bottomPanelContainer', { read: ViewContainerRef }]
-            }], leftPanelContainer: [{
-                type: ViewChild,
-                args: ['leftPanelContainer', { read: ViewContainerRef }]
-            }], monthView: [{
-                type: ViewChild,
-                args: [MatMonthView]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { leftCalendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => WlcmLeftCalendarDirective), { ...{
+                            read: MatCalendar,
+                        }, isSignal: true }] }], rightCalendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => WlcmRightCalendarDirective), { ...{
+                            read: MatCalendar,
+                        }, isSignal: true }] }], leftCalendarElement: [{ type: i0.ViewChild, args: [i0.forwardRef(() => WlcmLeftCalendarDirective), { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }], bottomPanelContainer: [{ type: i0.ViewChild, args: ['bottomPanelContainer', { ...{
+                            read: ViewContainerRef,
+                        }, isSignal: true }] }], leftPanelContainer: [{ type: i0.ViewChild, args: ['leftPanelContainer', { ...{
+                            read: ViewContainerRef,
+                        }, isSignal: true }] }], monthView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMonthView), { isSignal: true }] }] } });
 
-let WlcmDatepickerInputDirective = class WlcmDatepickerInputDirective extends WlcmDatepickerInputBase {
-    constructor(element, dateAdapter, dateFormats, selectionModel, trigger) {
-        super(element, dateAdapter, dateFormats, trigger);
-        this.element = element;
-        this.dateAdapter = dateAdapter;
-        this.dateFormats = dateFormats;
-        this.selectionModel = selectionModel;
-        this.trigger = trigger;
+class WlcmDatepickerInputDirective extends WlcmDatepickerInputBase {
+    constructor() {
+        super();
+        this.selectionModel = inject(MatDateSelectionModel);
+        this.destroyRef = inject(DestroyRef);
         this.handleSelectionChange();
         this.handleClosePanel();
     }
     updateSelection() {
-        let date = this.parseCurrentValue();
+        const date = this.parseCurrentValue();
         this.selectionModel.updateSelection(date, this);
     }
     handleClosePanel() {
-        this.trigger.closed.pipe(untilDestroyed(this)).subscribe(() => this._touched?.());
+        this.trigger.closed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this._touched?.());
     }
     handleSelectionChange() {
-        this.selectionModel.selectionChanged.pipe(untilDestroyed(this)).subscribe(({ selection }) => {
+        this.selectionModel.selectionChanged.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(({ selection }) => {
             this.updateInputValue(selection);
             this._changed?.(selection);
             this._touched?.();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDatepickerInputDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.DateAdapter }, { token: MAT_DATE_FORMATS }, { token: i2.MatDateSelectionModel }, { token: WlcmDatepickerTrigger }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: WlcmDatepickerInputDirective, isStandalone: true, selector: "[wlcmDatepickerInput]", host: { classAttribute: "wlcm-form-field-input" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDatepickerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: WlcmDatepickerInputDirective, isStandalone: true, selector: "[wlcmDatepickerInput]", host: { classAttribute: "wlcm-form-field-input" }, providers: [
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmDatepickerInputDirective), multi: true },
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmDatepickerInputDirective), multi: true },
         ], exportAs: ["wlcmDatepickerInput"], usesInheritance: true, ngImport: i0 }); }
-};
-WlcmDatepickerInputDirective = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [ElementRef,
-        DateAdapter, Object, MatDateSelectionModel,
-        WlcmDatepickerTrigger])
-], WlcmDatepickerInputDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDatepickerInputDirective, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDatepickerInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wlcmDatepickerInput]',
                     exportAs: 'wlcmDatepickerInput',
                     host: { class: 'wlcm-form-field-input' },
-                    standalone: true,
                     providers: [
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmDatepickerInputDirective), multi: true },
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmDatepickerInputDirective), multi: true },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DATE_FORMATS]
-                }] }, { type: i2.MatDateSelectionModel }, { type: WlcmDatepickerTrigger }] });
+        }], ctorParameters: () => [] });
 
 class WlcmDatepickerPanelComponent {
-    constructor(selectionModel, trigger, config) {
-        this.selectionModel = selectionModel;
-        this.trigger = trigger;
-        this.config = config;
+    constructor() {
         this.headerComponent = WlcmCalendarHeaderComponent;
-        this.matCalendar = viewChild(MatCalendar);
+        this.matCalendar = viewChild(MatCalendar, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "matCalendar" }] : /* istanbul ignore next */ []));
+        this.selectionModel = inject(MatDateSelectionModel);
+        this.trigger = inject(WlcmDatepickerTrigger);
+        this.config = inject(WLCM_DATEPICKER_CONFIG);
     }
     select(date) {
         this.selectionModel.updateSelection(date, this);
         this.trigger.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDatepickerPanelComponent, deps: [{ token: i2.MatDateSelectionModel }, { token: WlcmDatepickerTrigger }, { token: WLCM_DATEPICKER_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.9", type: WlcmDatepickerPanelComponent, isStandalone: true, selector: "wlcm-datepicker-panel", host: { classAttribute: "wlcm-datepicker-panel" }, viewQueries: [{ propertyName: "matCalendar", first: true, predicate: MatCalendar, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-calendar\n  wlcmCalendar\n  [minDate]=\"config.minDate?.()\"\n  [maxDate]=\"config.maxDate?.()\"\n  [startAt]=\"selectionModel.selection\"\n  [selected]=\"selectionModel.selection\"\n  [headerComponent]=\"headerComponent\"\n  (selectedChange)=\"select($event)\"\n></mat-calendar>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "directive", type: WlcmCalendarDirective, selector: "[wlcmCalendar]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDatepickerPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: WlcmDatepickerPanelComponent, isStandalone: true, selector: "wlcm-datepicker-panel", host: { classAttribute: "wlcm-datepicker-panel" }, viewQueries: [{ propertyName: "matCalendar", first: true, predicate: MatCalendar, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-calendar\n  wlcmCalendar\n  [minDate]=\"config.minDate?.()\"\n  [maxDate]=\"config.maxDate?.()\"\n  [startAt]=\"selectionModel.selection\"\n  [selected]=\"selectionModel.selection\"\n  [headerComponent]=\"headerComponent\"\n  (selectedChange)=\"select($event)\"\n></mat-calendar>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$1.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "directive", type: WlcmCalendarDirective, selector: "[wlcmCalendar]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDatepickerPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDatepickerPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-datepicker-panel', host: { class: 'wlcm-datepicker-panel' }, standalone: true, imports: [CommonModule, MatDatepickerModule, WlcmCalendarDirective], template: "<mat-calendar\n  wlcmCalendar\n  [minDate]=\"config.minDate?.()\"\n  [maxDate]=\"config.maxDate?.()\"\n  [startAt]=\"selectionModel.selection\"\n  [selected]=\"selectionModel.selection\"\n  [headerComponent]=\"headerComponent\"\n  (selectedChange)=\"select($event)\"\n></mat-calendar>\n" }]
-        }], ctorParameters: () => [{ type: i2.MatDateSelectionModel }, { type: WlcmDatepickerTrigger }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATEPICKER_CONFIG]
-                }] }] });
+            args: [{ selector: 'wlcm-datepicker-panel', host: { class: 'wlcm-datepicker-panel' }, imports: [MatDatepickerModule, WlcmCalendarDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-calendar\n  wlcmCalendar\n  [minDate]=\"config.minDate?.()\"\n  [maxDate]=\"config.maxDate?.()\"\n  [startAt]=\"selectionModel.selection\"\n  [selected]=\"selectionModel.selection\"\n  [headerComponent]=\"headerComponent\"\n  (selectedChange)=\"select($event)\"\n></mat-calendar>\n" }]
+        }], propDecorators: { matCalendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatCalendar), { isSignal: true }] }] } });
 
 class WlcmDatepickerInputContainerComponent extends WlcmDatepickerTrigger {
-    constructor(overlay, viewContainerRef, selectionModel, formField) {
-        super(overlay, viewContainerRef, selectionModel);
-        this.overlay = overlay;
-        this.viewContainerRef = viewContainerRef;
-        this.selectionModel = selectionModel;
-        this.formField = formField;
+    constructor() {
+        super();
         this._focusStream$ = new BehaviorSubject(EMPTY);
         this._blurStream$ = new BehaviorSubject(EMPTY);
         this.focus$ = this._focusStream$.pipe(switchMap((stream) => stream));
         this.blur$ = this._blurStream$.pipe(switchMap((stream) => stream));
-        this.inputRef = contentChild(WlcmDatepickerInputDirective, {
-            read: ElementRef,
-        });
+        this.inputRef = contentChild(WlcmDatepickerInputDirective, { ...(ngDevMode ? { debugName: "inputRef" } : /* istanbul ignore next */ {}), read: ElementRef });
         this.componentType = WlcmDatepickerPanelComponent;
+        this.formField = inject(WLCM_FORM_FIELD, { host: true });
         this.focus = () => {
             if (this.selectOnly())
                 return this.open();
@@ -1248,7 +1078,9 @@ class WlcmDatepickerInputContainerComponent extends WlcmDatepickerTrigger {
         return this.inputRef()?.nativeElement;
     }
     attachFocusBlurListeners() {
-        const voidFn = () => { };
+        const voidFn = () => {
+            // noop
+        };
         const inputFocus = fromEvent(this.inputElement, 'focus');
         const inputBlur = fromEvent(this.inputElement, 'blur');
         const focusObservables = [inputFocus, this.opened];
@@ -1256,8 +1088,8 @@ class WlcmDatepickerInputContainerComponent extends WlcmDatepickerTrigger {
         this._focusStream$.next(merge(...focusObservables).pipe(map(voidFn)));
         this._blurStream$.next(merge(...blurObservables).pipe(map(voidFn)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDatepickerInputContainerComponent, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i2.MatDateSelectionModel }, { token: WLCM_FORM_FIELD, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.9", type: WlcmDatepickerInputContainerComponent, isStandalone: true, selector: "wlcm-datepicker-input-container", host: { classAttribute: "wlcm-datepicker-input-container" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDatepickerInputContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: WlcmDatepickerInputContainerComponent, isStandalone: true, selector: "wlcm-datepicker-input-container", host: { classAttribute: "wlcm-datepicker-input-container" }, providers: [
             {
                 provide: WLCM_INPUT_BINDER,
                 useFactory: () => {
@@ -1269,11 +1101,11 @@ class WlcmDatepickerInputContainerComponent extends WlcmDatepickerTrigger {
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmDatepickerInputContainerComponent), multi: true },
             { provide: WlcmDatepickerTrigger, useExisting: forwardRef(() => WlcmDatepickerInputContainerComponent) },
             { provide: MatDateSelectionModel, useClass: MatSingleDateSelectionModel },
-        ], queries: [{ propertyName: "inputRef", first: true, predicate: WlcmDatepickerInputDirective, descendants: true, read: ElementRef, isSignal: true }], exportAs: ["wlcmDatepicker"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[wlcmDatepickerInput]\"></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+        ], queries: [{ propertyName: "inputRef", first: true, predicate: WlcmDatepickerInputDirective, descendants: true, read: ElementRef, isSignal: true }], exportAs: ["wlcmDatepicker"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[wlcmDatepickerInput]\"></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDatepickerInputContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDatepickerInputContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-datepicker-input-container', host: { class: 'wlcm-datepicker-input-container' }, exportAs: 'wlcmDatepicker', standalone: true, imports: [CommonModule], providers: [
+            args: [{ selector: 'wlcm-datepicker-input-container', host: { class: 'wlcm-datepicker-input-container' }, exportAs: 'wlcmDatepicker', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: WLCM_INPUT_BINDER,
                             useFactory: () => {
@@ -1286,12 +1118,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                         { provide: WlcmDatepickerTrigger, useExisting: forwardRef(() => WlcmDatepickerInputContainerComponent) },
                         { provide: MatDateSelectionModel, useClass: MatSingleDateSelectionModel },
                     ], template: "<ng-content select=\"[wlcmDatepickerInput]\"></ng-content>\n" }]
-        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i2.MatDateSelectionModel }, { type: undefined, decorators: [{
-                    type: Host
-                }, {
-                    type: Inject,
-                    args: [WLCM_FORM_FIELD]
-                }] }] });
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WlcmDatepickerInputDirective), { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }] } });
 
 function WlcmDateRangeInputValidator() {
     return (control) => {
@@ -1315,15 +1144,15 @@ const publicDirectives = [
     DateRangePickerInputEndDirective,
 ];
 class WlcmDatepickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: WlcmDatepickerModule, imports: [CommonModule, WlcmDatepickerInputContainerComponent, WlcmDateRangePickerInputComponent, WlcmDatepickerInputDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: WlcmDatepickerModule, imports: [CommonModule, WlcmDatepickerInputContainerComponent, WlcmDateRangePickerInputComponent, WlcmDatepickerInputDirective,
             DateRangePickerInputStartDirective,
             DateRangePickerInputEndDirective], exports: [WlcmDatepickerInputContainerComponent, WlcmDateRangePickerInputComponent, WlcmDatepickerInputDirective,
             DateRangePickerInputStartDirective,
             DateRangePickerInputEndDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDatepickerModule, providers: [...WLCM_DEFAULT_DATEPICKER_PROVIDERS], imports: [CommonModule, publicComponents] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDatepickerModule, providers: [...WLCM_DEFAULT_DATEPICKER_PROVIDERS], imports: [CommonModule, WlcmDateRangePickerInputComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmDatepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WlcmDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ...publicComponents, ...publicDirectives],