@wlcm/angular 18.2.20 → 18.2.24

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

@@ -1,146 +1,32 @@
 import * as i0 from '@angular/core';
-import { Component, output, input, effect, Directive, forwardRef, Optional, Inject, Injectable, InjectionToken, ElementRef, Injector, ViewContainerRef, HostBinding, signal, computed, ViewChild, HostListener, inject, Host, ContentChild, viewChild, contentChild, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, input, Injector, ViewContainerRef, Directive, HostBinding, HostListener, forwardRef, ElementRef, Optional, Inject, signal, computed, Component, Type, ViewChild, inject, Host, Input, ContentChild, output, effect, viewChild, contentChild, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import * as i2$1 from '@angular/material/datepicker';
-import { yearsPerPage, MatCalendar, MatRangeDateSelectionModel, MatDateSelectionModel, MAT_DATE_RANGE_SELECTION_STRATEGY, DefaultMatCalendarRangeStrategy, MatMonthView, MatDatepickerModule, DateRange, MatSingleDateSelectionModel } from '@angular/material/datepicker';
+import * as i2 from '@angular/material/datepicker';
+import { MatRangeDateSelectionModel, MatDateSelectionModel, DateRange, yearsPerPage, MatCalendar, MAT_DATE_RANGE_SELECTION_STRATEGY, DefaultMatCalendarRangeStrategy, MatDatepickerModule, MatMonthView, MatSingleDateSelectionModel } from '@angular/material/datepicker';
 import { WLCM_FORM_FIELD, WLCM_FORM_CONTROL_PROVIDER, WLCM_INPUT_BINDER, WlcmFormsModule } from '@wlcm/angular/forms';
-import { merge, EMPTY, filter, Subject, tap, startWith, takeUntil, BehaviorSubject, switchMap, fromEvent, map } from 'rxjs';
-import * as i1$1 from '@angular/cdk/overlay';
-import { OverlayRef, CdkOverlayOrigin, OverlayConfig, Overlay } from '@angular/cdk/overlay';
+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 { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS } from '@angular/material/core';
 import { __decorate, __metadata } from 'tslib';
-import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
-import * as i2 from '@wlcm/angular/button';
-import { WlcmButtonModule } from '@wlcm/angular/button';
-import * as i1 from '@angular/material/core';
-import { MAT_DATE_FORMATS, MAT_DATE_LOCALE, DateAdapter } from '@angular/material/core';
-import { isBefore, startOfDay, isAfter, format, endOfMonth, add, startOfMonth, parse, isValid } from 'date-fns';
-import { WlcmIconName, WlcmIconDirective } from '@wlcm/angular/core';
+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 { ComponentPortal } from '@angular/cdk/portal';
-import * as i3 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS, ControlContainer } from '@angular/forms';
-
-class WlcmDateRangePickerBottomPanelComponent {
-    constructor(picker) {
-        this.picker = picker;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDateRangePickerBottomPanelComponent, deps: [{ token: WlcmDateRangePickerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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.WlcmButtonComponent, selector: "wlcm-button", inputs: ["type", "size", "isDisabled", "isLoading"], outputs: ["clicked"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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: WlcmDateRangePickerComponent }] });
-
-class WlcmDataRangeCalendar {
-    constructor(location, element, calendar, dateAdapter, datepickerConfig) {
-        this.element = element;
-        this.calendar = calendar;
-        this.dateAdapter = dateAdapter;
-        this.datepickerConfig = datepickerConfig;
-        this.dateChange = output();
-        this.viewChange = output();
-        this.disabled = input(false);
-        this.location = location;
-        effect(() => {
-            if (this.disabled()) {
-                this.element.nativeElement.classList.add('wlcm-calendar-disabled');
-            }
-            else {
-                this.element.nativeElement.classList.remove('wlcm-calendar-disabled');
-            }
-        });
-        this.handleConfigValues();
-    }
-    get minDate() {
-        return this.datepickerConfig.minDate?.();
-    }
-    get maxDate() {
-        return this.datepickerConfig.maxDate?.();
-    }
-    prevMonth() {
-        this.dateChange.emit(this.dateAdapter.addCalendarMonths(this.calendar.activeDate, -1));
-    }
-    nextMonth() {
-        this.dateChange.emit(this.dateAdapter.addCalendarMonths(this.calendar.activeDate, 1));
-    }
-    prevYear() {
-        this.dateChange.emit(this.dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? -1 : -yearsPerPage));
-    }
-    nextYear() {
-        this.dateChange.emit(this.dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? 1 : yearsPerPage));
-    }
-    handleConfigValues() {
-        this.calendar.dateFilter = (date) => {
-            if (this.minDate && isBefore(startOfDay(date), startOfDay(this.minDate)))
-                return false;
-            if (this.maxDate && isAfter(startOfDay(date), startOfDay(this.maxDate)))
-                return false;
-            return true;
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDataRangeCalendar, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", 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.1.4", ngImport: i0, type: WlcmDataRangeCalendar, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: undefined }, { type: i0.ElementRef }, { type: i2$1.MatCalendar }, { type: i1.DateAdapter }, { type: undefined }] });
+import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
+import * as i2$1 from '@wlcm/angular/button';
+import { WlcmButtonModule } from '@wlcm/angular/button';
+import { WlcmIconName, WlcmIconDirective } from '@wlcm/angular/core';
 
-class WlcmCalendarHeaderComponent {
-    constructor(dateAdapter, dateFormats, calendar) {
-        this.dateAdapter = dateAdapter;
-        this.dateFormats = dateFormats;
-        this.calendar = calendar;
-        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);
-    }
-    previousClicked() {
-        if (this.previous())
-            return this.previous()();
-        this.calendar.activeDate =
-            this.calendar.currentView == 'month'
-                ? this.dateAdapter.addCalendarMonths(this.calendar.activeDate, -1)
-                : this.dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? -1 : -yearsPerPage);
-    }
-    nextClicked() {
-        if (this.next())
-            return this.next()();
-        this.calendar.activeDate =
-            this.calendar.currentView == 'month'
-                ? this.dateAdapter.addCalendarMonths(this.calendar.activeDate, 1)
-                : this.dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? 1 : yearsPerPage);
-    }
-    changeCalendarView() {
-        if (this.calendar.currentView === 'multi-year') {
-            this.calendar.currentView = 'month';
-            return;
-        }
-        this.calendar.currentView = 'multi-year';
-    }
-    get periodLabel() {
-        return this.dateAdapter.format(this.calendar.activeDate, this.dateFormats.display.monthYearLabel);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmCalendarHeaderComponent, deps: [{ token: i1.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.1.4", 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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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.DateAdapter }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_DATE_FORMATS]
-                }] }, { type: i2$1.MatCalendar, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => MatCalendar)]
-                }] }] });
+const WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL = new InjectionToken('WLCM_DATE_RANGE_SELECTION_MODEL');
+const WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL_PROVIDER = {
+    provide: WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL,
+    useFactory: (adapter) => new MatRangeDateSelectionModel(adapter),
+    deps: [DateAdapter],
+};
 
 function range(length, valueFunction) {
     const valuesArray = Array(length);
@@ -154,10 +40,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.1.4", ngImport: i0, type: WlcmDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDateAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmDateAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDateAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmDateAdapter, decorators: [{
             type: Injectable
         }] });
 var WlcmDateValidation;
@@ -186,234 +72,50 @@ 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';
 
-class WlcmDateRangeCalendarHeaderComponent {
-    constructor(rangeCalendar, dateFormats, calendar, datepickerConfig) {
-        this.rangeCalendar = rangeCalendar;
-        this.dateFormats = dateFormats;
-        this.calendar = calendar;
-        this.datepickerConfig = datepickerConfig;
-        this.WlcmIconName = WlcmIconName;
-        this.previous = () => {
-            if (this.isPreviousDisabled)
-                return;
-            if (this.calendar.currentView !== 'month') {
-                return this.rangeCalendar.prevYear();
-            }
-            return this.rangeCalendar.prevMonth();
-        };
-        this.next = () => {
-            if (this.isNextDisabled)
-                return;
-            if (this.calendar.currentView !== 'month') {
-                return this.rangeCalendar.nextYear();
-            }
-            return this.rangeCalendar.nextMonth();
-        };
-    }
-    get minDate() {
-        return this.datepickerConfig.minDate?.();
+let WlcmDatepickerTrigger = class WlcmDatepickerTrigger {
+    get isOnlySelect() {
+        return this.selectOnly();
     }
-    get maxDate() {
-        return this.datepickerConfig.maxDate?.();
+    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);
+        this.overlayRef = this.overlay.create(this.createOverlayConfig());
+        this.handleBackdropClick();
     }
-    get isPreviousDisabled() {
-        if (!this.minDate)
-            return false;
-        let previousPeriod = endOfMonth(add(this.calendar.activeDate, { months: -1 }));
-        if (this.calendar.currentView !== 'month') {
-            previousPeriod = add(this.calendar.activeDate, { years: -1 });
-        }
-        return isBefore(previousPeriod, this.minDate);
+    open() {
+        const injector = Injector.create({
+            providers: [{ provide: OverlayRef, useValue: this.overlayRef }],
+            parent: this.datepickerInjector,
+        });
+        const portal = new ComponentPortal(this.componentType, this.viewContainerRef, injector);
+        this.updatePositionStrategy();
+        this.componentRef = this.overlayRef.attach(portal);
     }
-    get isNextDisabled() {
-        if (!this.maxDate)
-            return false;
-        let nextPeriod = startOfMonth(add(this.calendar.activeDate, { months: 1 }));
-        if (this.calendar.currentView !== 'month') {
-            nextPeriod = add(this.calendar.activeDate, { years: 1 });
-        }
-        return isBefore(this.maxDate, nextPeriod);
+    close() {
+        this.overlayRef.detach();
     }
-    get canDisplayLeftArrow() {
-        return !this.rangeCalendar || this.rangeCalendar.location === 'left' || this.calendar.currentView !== 'month';
+    get isOpen() {
+        return this.overlayRef.hasAttached();
     }
-    get canDisplayRightArrow() {
-        return !this.rangeCalendar || this.rangeCalendar.location === 'right' || this.calendar.currentView !== 'month';
+    get opened() {
+        return merge(this.overlayRef?.attachments() || EMPTY).pipe(filter(() => this.overlayRef.hasAttached()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", 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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDateRangeCalendarHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wlcm-date-range-calendar-header', standalone: true, imports: [CommonModule, WlcmCalendarHeaderComponent, WlcmIconDirective], 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$1.MatCalendar, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => MatCalendar)]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATEPICKER_CONFIG]
-                }] }] });
-
-const WLCM_DATE_RANGE_PICKER_CONFIG = new InjectionToken('WLCM_DATE_RANGE_PICKER_CONFIG', { providedIn: 'root', factory: () => ({}) });
-
-const WLCM_DATE_RANGE_SELECTION_MODEL = new InjectionToken('WLCM_DATE_RANGE_SELECTION_MODEL');
-const WLCM_DATE_RANGE_SELECTION_MODEL_PROVIDER = {
-    provide: WLCM_DATE_RANGE_SELECTION_MODEL,
-    useFactory: (adapter) => new MatRangeDateSelectionModel(adapter),
-    deps: [DateAdapter],
-};
-
-const WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL = new InjectionToken('WLCM_DATE_RANGE_SELECTION_MODEL');
-const WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL_PROVIDER = {
-    provide: WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL,
-    useFactory: (adapter) => new MatRangeDateSelectionModel(adapter),
-    deps: [DateAdapter],
-};
-
-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;
-        this.handleYearChange();
-        this.handleMonthChange();
+    get closed() {
+        return (this.overlayRef?.detachments() || EMPTY).pipe(filter(() => !this.overlayRef.hasAttached()));
     }
-    handleYearChange() {
-        this.calendar.yearSelected.pipe(untilDestroyed(this)).subscribe((date) => this.dateChange.emit(date));
+    get datepickerInjector() {
+        const parent = this.viewContainerRef.injector;
+        return Injector.create({
+            parent,
+            providers: [{ provide: WLCM_DATEPICKER_CONFIG, useValue: this.datepickerConfig }],
+        });
     }
-    handleMonthChange() {
-        this.calendar.monthSelected.pipe(untilDestroyed(this)).subscribe((date) => this.dateChange.emit(date));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmLeftCalendarDirective, deps: [{ token: i0.ElementRef }, { token: i1.DateAdapter }, { token: forwardRef(() => MatCalendar) }, { token: WLCM_DATEPICKER_CONFIG }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", 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.1.4", ngImport: i0, type: WlcmLeftCalendarDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[wlcmLeftCalendar]',
-                    standalone: true,
-                    providers: [{ provide: WlcmDataRangeCalendar, useExisting: forwardRef(() => WlcmLeftCalendarDirective) }],
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DateAdapter }, { type: i2$1.MatCalendar, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => MatCalendar)]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATEPICKER_CONFIG]
-                }] }] });
-
-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;
-        this.handleYearChange();
-        this.handleMonthChange();
-    }
-    handleYearChange() {
-        this.calendar.yearSelected
-            .pipe(untilDestroyed(this))
-            .subscribe((date) => this.dateChange.emit(this.dateAdapter.addCalendarMonths(date, -1)));
-    }
-    handleMonthChange() {
-        this.calendar.monthSelected
-            .pipe(untilDestroyed(this))
-            .subscribe((date) => this.dateChange.emit(this.dateAdapter.addCalendarMonths(date, -1)));
-    }
-    nextMonth() {
-        this.dateChange.emit(this.calendar.activeDate);
-    }
-    prevYear() {
-        this.dateChange.emit(this.dateAdapter.addCalendarMonths(this.dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? -1 : -yearsPerPage), -1));
-    }
-    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.1.4", ngImport: i0, type: WlcmRightCalendarDirective, deps: [{ token: i0.ElementRef }, { token: i1.DateAdapter }, { token: forwardRef(() => MatCalendar) }, { token: WLCM_DATEPICKER_CONFIG }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", 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.1.4", ngImport: i0, type: WlcmRightCalendarDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[wlcmRightCalendar]',
-                    standalone: true,
-                    providers: [{ provide: WlcmDataRangeCalendar, useExisting: forwardRef(() => WlcmRightCalendarDirective) }],
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DateAdapter }, { type: i2$1.MatCalendar, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => MatCalendar)]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATEPICKER_CONFIG]
-                }] }] });
-
-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);
-        this.overlayRef = this.overlay.create(this.createOverlayConfig());
-        this.handleBackdropClick();
-    }
-    open() {
-        const injector = Injector.create({
-            providers: [{ provide: OverlayRef, useValue: this.overlayRef }],
-            parent: this.datepickerInjector,
-        });
-        const portal = new ComponentPortal(this.componentType, this.viewContainerRef, injector);
-        this.updatePositionStrategy();
-        this.componentRef = this.overlayRef.attach(portal);
-    }
-    close() {
-        this.overlayRef.detach();
-    }
-    get isOpen() {
-        return this.overlayRef.hasAttached();
-    }
-    get opened() {
-        return merge(this.overlayRef?.attachments() || EMPTY).pipe(filter(() => this.overlayRef.hasAttached()));
-    }
-    get closed() {
-        return (this.overlayRef?.detachments() || EMPTY).pipe(filter(() => !this.overlayRef.hasAttached()));
-    }
-    get datepickerInjector() {
-        const parent = this.viewContainerRef.injector;
-        return Injector.create({
-            parent,
-            providers: [{ provide: WLCM_DATEPICKER_CONFIG, useValue: this.datepickerConfig }],
-        });
-    }
-    get defaultDatepickerConfig() {
-        return this.viewContainerRef.injector.get(WLCM_DATEPICKER_CONFIG, {}, { optional: true });
+    get defaultDatepickerConfig() {
+        return this.viewContainerRef.injector.get(WLCM_DATEPICKER_CONFIG, {}, { optional: true });
     }
     get datepickerConfig() {
         const config = this.defaultDatepickerConfig;
@@ -424,9 +126,6 @@ let WlcmDatepickerTrigger = class WlcmDatepickerTrigger {
         config.selectOnly = this.selectOnly();
         return config;
     }
-    get overlayOrigin() {
-        return new CdkOverlayOrigin(this.connectedTo);
-    }
     handleBackdropClick() {
         this.overlayRef
             .backdropClick()
@@ -434,8 +133,7 @@ let WlcmDatepickerTrigger = class WlcmDatepickerTrigger {
             .subscribe(() => this.close());
     }
     updatePositionStrategy() {
-        const origin = this.overlayOrigin.elementRef;
-        const strategy = this.overlay.position().flexibleConnectedTo(origin);
+        const strategy = this.overlay.position().flexibleConnectedTo(this.connectedTo);
         strategy.withPositions([
             { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
             { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
@@ -451,8 +149,8 @@ let WlcmDatepickerTrigger = class WlcmDatepickerTrigger {
             backdropClass: 'transparent',
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDatepickerTrigger, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i2$1.MatDateSelectionModel }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", 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: "18.2.6", type: WlcmDatepickerTrigger, 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(),
@@ -460,178 +158,13 @@ WlcmDatepickerTrigger = __decorate([
         ViewContainerRef,
         MatDateSelectionModel])
 ], WlcmDatepickerTrigger);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDatepickerTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmDatepickerTrigger, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i2$1.MatDateSelectionModel }], propDecorators: { isOnlySelect: [{
+        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i2.MatDateSelectionModel }], propDecorators: { isOnlySelect: [{
                 type: HostBinding,
                 args: ['class.wlcm-datepicker-select-only-mode']
             }] } });
 
-class WlcmCalendarDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmCalendarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: WlcmCalendarDirective, isStandalone: true, selector: "[wlcmCalendar]", host: { classAttribute: "wlcm-calendar" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmCalendarDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[wlcmCalendar]',
-                    host: { class: 'wlcm-calendar' },
-                    standalone: true,
-                }]
-        }] });
-
-let WlcmDateRangePickerComponent = class WlcmDateRangePickerComponent {
-    constructor(rangeConfig, rangeSelectionStrategy, localSelectionModel, triggerSelectionModel, trigger, datepickerConfig, dateAdapter) {
-        this.rangeConfig = rangeConfig;
-        this.rangeSelectionStrategy = rangeSelectionStrategy;
-        this.localSelectionModel = localSelectionModel;
-        this.triggerSelectionModel = triggerSelectionModel;
-        this.trigger = trigger;
-        this.datepickerConfig = datepickerConfig;
-        this.dateAdapter = dateAdapter;
-        this.headerComponent = WlcmDateRangeCalendarHeaderComponent;
-        this._isViewInitialized = false;
-        this._isComplete = signal(false);
-        this.isComplete = computed(() => this._isComplete());
-        this.startDate = signal(new Date());
-        this.leftCalendarYearViewActivated = signal(false);
-        this.rightCalendarYearViewActivated = signal(false);
-        this.handleSelectionChanged();
-        this.localSelectionModel.updateSelection(this.triggerSelectionModel.selection, this);
-        if (this.triggerSelectionModel.selection.start) {
-            this.startDate.set(this.triggerSelectionModel.selection.start);
-        }
-        if (this.rangeConfig.headerComponent) {
-            this.headerComponent = this.rangeConfig.headerComponent;
-        }
-        effect(() => {
-            if (!this._isViewInitialized)
-                return;
-            this.leftCalendar.activeDate = this.startDate();
-            this.rightCalendar.activeDate = this.dateAdapter.addCalendarMonths(this.startDate(), 1);
-            this.rightCalendar.startAt = this.dateAdapter.addCalendarMonths(this.startDate(), 1);
-        });
-    }
-    ngAfterViewInit() {
-        this._isViewInitialized = true;
-        this.leftCalendar.viewChanged.pipe(untilDestroyed(this)).subscribe((view) => {
-            this.leftCalendarYearViewActivated.set(view !== 'month');
-        });
-        this.rightCalendar.viewChanged.pipe(untilDestroyed(this)).subscribe((view) => {
-            this.rightCalendarYearViewActivated.set(view !== 'month');
-        });
-        this.handleRightCalendarPreviewChange();
-    }
-    calendarSelection(event) {
-        const newSelection = this.rangeSelectionStrategy.selectionFinished(event.value, this.localSelectionModel.selection, event.event);
-        this.localSelectionModel.updateSelection(newSelection, this);
-    }
-    calendarDragDrop(event) {
-        this.localSelectionModel.updateSelection(event.value, this);
-    }
-    apply() {
-        this.triggerSelectionModel.updateSelection(this.localSelectionModel.selection, this);
-        this.trigger.close();
-    }
-    reset() {
-        this.trigger.close();
-    }
-    get selected() {
-        return this.localSelectionModel.selection;
-    }
-    get leftCalendarActiveCell() {
-        return this.leftCalendarElement.nativeElement.querySelector('.mat-calendar-body-active');
-    }
-    handleSelectionChanged() {
-        this.localSelectionModel.selectionChanged
-            .pipe(untilDestroyed(this))
-            .subscribe(() => this._isComplete.set(this.localSelectionModel.isComplete()));
-    }
-    handleRightCalendarPreviewChange() {
-        const viewChanged = new Subject();
-        this.rightCalendar.viewChanged
-            .pipe(untilDestroyed(this))
-            .pipe(tap(() => viewChanged.next()))
-            .pipe(startWith(this.rightCalendar.currentView))
-            .subscribe((view) => {
-            if (view !== 'month')
-                return;
-            this.rightCalendar.monthView._matCalendarBody.previewChange
-                .pipe(takeUntil(viewChanged), untilDestroyed(this))
-                .subscribe(() => {
-                if (this.leftCalendar.currentView !== 'month' || !this.leftCalendar.monthView._rangeStart)
-                    return;
-                this.leftCalendar.monthView._previewStart = this.rightCalendar.monthView._previewStart;
-                this.leftCalendar.monthView._previewEnd = this.rightCalendar.monthView._previewEnd;
-                const activeCell = this.leftCalendarActiveCell;
-                if (activeCell && activeCell === document.activeElement)
-                    activeCell.blur();
-                this.leftCalendar.monthView._changeDetectorRef.markForCheck();
-            });
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDateRangePickerComponent, 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: i1.DateAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: WlcmDateRangePickerComponent, isStandalone: true, selector: "wlcm-date-range-picker", providers: [
-            {
-                provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
-                useClass: DefaultMatCalendarRangeStrategy,
-            },
-            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: "monthView", first: true, predicate: MatMonthView, descendants: true }], ngImport: i0, template: "<div class=\"wlcm-date-range-picker-panel\">\n  <div class=\"wlcm-date-range-picker-body\">\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\n  <wlcm-date-range-picker-bottom-panel></wlcm-date-range-picker-bottom-panel>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$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]" }, { kind: "component", type: WlcmDateRangePickerBottomPanelComponent, selector: "wlcm-date-range-picker-bottom-panel" }] }); }
-};
-WlcmDateRangePickerComponent = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [Object, Object, MatDateSelectionModel,
-        MatDateSelectionModel,
-        WlcmDatepickerTrigger, Object, DateAdapter])
-], WlcmDateRangePickerComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDateRangePickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wlcm-date-range-picker', standalone: true, imports: [
-                        CommonModule,
-                        MatDatepickerModule,
-                        WlcmCalendarDirective,
-                        WlcmLeftCalendarDirective,
-                        WlcmRightCalendarDirective,
-                        WlcmDateRangePickerBottomPanelComponent,
-                    ], providers: [
-                        {
-                            provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
-                            useClass: DefaultMatCalendarRangeStrategy,
-                        },
-                        WLCM_DATE_RANGE_SELECTION_MODEL_PROVIDER,
-                    ], template: "<div class=\"wlcm-date-range-picker-panel\">\n  <div class=\"wlcm-date-range-picker-body\">\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\n  <wlcm-date-range-picker-bottom-panel></wlcm-date-range-picker-bottom-panel>\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$1.MatDateSelectionModel, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATE_RANGE_SELECTION_MODEL]
-                }] }, { type: i2$1.MatDateSelectionModel, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
-                }] }, { type: WlcmDatepickerTrigger }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATEPICKER_CONFIG]
-                }] }, { type: i1.DateAdapter }], propDecorators: { leftCalendar: [{
-                type: ViewChild,
-                args: [WlcmLeftCalendarDirective, { read: MatCalendar }]
-            }], rightCalendar: [{
-                type: ViewChild,
-                args: [WlcmRightCalendarDirective, { read: MatCalendar }]
-            }], leftCalendarElement: [{
-                type: ViewChild,
-                args: [WlcmLeftCalendarDirective, { read: ElementRef }]
-            }], monthView: [{
-                type: ViewChild,
-                args: [MatMonthView]
-            }] } });
-
 class WlcmDatepickerInputBase {
     handleBlur() {
         this.updateSelection();
@@ -710,12 +243,12 @@ class WlcmDatepickerInputBase {
         }
         this.inputElement.value = newValue;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDatepickerInputBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", 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: "18.2.6", ngImport: i0, type: WlcmDatepickerInputBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: WlcmDatepickerInputBase, host: { listeners: { "blur": "handleBlur()", "input": "handleInput()" }, properties: { "class": "this.datepickerInputClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDatepickerInputBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmDatepickerInputBase, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DateAdapter }, { type: undefined }, { type: WlcmDatepickerTrigger }], propDecorators: { handleBlur: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: undefined }, { type: WlcmDatepickerTrigger }], propDecorators: { handleBlur: [{
                 type: HostListener,
                 args: ['blur']
             }], handleInput: [{
@@ -753,9 +286,11 @@ class WlcmDateRangePickerInputBase extends WlcmDatepickerInputBase {
         this.changeInputSize();
     }
     changeInputSize() {
-        const value = this.currentValue || this.inputElement.placeholder;
-        this._inputMirror.innerHTML = value;
-        this.inputElement.style.width = `${this._inputMirror.offsetWidth + 2}px`;
+        requestAnimationFrame(() => {
+            const value = this.currentValue || this.inputElement.placeholder;
+            this._inputMirror.innerHTML = value;
+            this.inputElement.style.width = `${this._inputMirror.offsetWidth + 2}px`;
+        });
     }
     createInputMirror() {
         const inputMirror = document.createElement('div');
@@ -768,19 +303,19 @@ 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.1.4", ngImport: i0, type: WlcmDateRangePickerInputBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: WlcmDateRangePickerInputBase, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmDateRangePickerInputBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: WlcmDateRangePickerInputBase, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDateRangePickerInputBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmDateRangePickerInputBase, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DateAdapter }, { type: undefined }, { type: WlcmDatepickerTrigger }] });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: undefined }, { type: WlcmDatepickerTrigger }] });
 
 var WlcmDateRangeValidation;
 (function (WlcmDateRangeValidation) {
     WlcmDateRangeValidation["StartExceedsEnd"] = "wlcmDateRangeStartExceedsEnd";
 })(WlcmDateRangeValidation || (WlcmDateRangeValidation = {}));
 
-let DateRangePickerInputEndDirective = class DateRangePickerInputEndDirective extends WlcmDateRangePickerInputBase {
+let DateRangePickerInputStartDirective = class DateRangePickerInputStartDirective extends WlcmDateRangePickerInputBase {
     constructor(element, dateAdapter, dateFormats, selectionModel, trigger) {
         super(element, dateAdapter, dateFormats, trigger);
         this.element = element;
@@ -789,16 +324,16 @@ let DateRangePickerInputEndDirective = class DateRangePickerInputEndDirective ex
         this.selectionModel = selectionModel;
         this.trigger = trigger;
         this.updateSelection = () => {
-            let end = this.parseCurrentValue();
-            this.selectionModel.updateSelection(new DateRange(this.selectionModel.selection.start, end), this);
+            let start = this.parseCurrentValue();
+            this.selectionModel.updateSelection(new DateRange(start, this.selectionModel.selection.end), this);
         };
         this.handleSelectionChange();
     }
     validate() {
         const defaultErrors = super.validate();
-        if (isValid(this.selectionModel.selection.start)) {
-            const endDate = this.parseCurrentValue();
-            if (endDate && isAfter(this.selectionModel.selection.start, endDate)) {
+        if (this.selectionModel.isComplete() && isValid(this.selectionModel.selection.end)) {
+            const startDate = this.parseCurrentValue();
+            if (startDate && isAfter(startDate, this.selectionModel.selection.end)) {
                 return { [WlcmDateRangeValidation.StartExceedsEnd]: true, ...(defaultErrors ?? {}) };
             }
         }
@@ -806,46 +341,237 @@ let DateRangePickerInputEndDirective = class DateRangePickerInputEndDirective ex
     }
     handleSelectionChange() {
         this.selectionModel.selectionChanged.pipe(untilDestroyed(this)).subscribe(({ selection }) => {
-            const validDate = this.dateAdapter.getValidDateOrNull(selection.end);
+            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.1.4", ngImport: i0, type: DateRangePickerInputEndDirective, deps: [{ token: i0.ElementRef }, { token: i1.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.1.4", 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 },
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", 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: "18.2.6", 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 }); }
 };
-DateRangePickerInputEndDirective = __decorate([
+DateRangePickerInputStartDirective = __decorate([
     UntilDestroy(),
     __metadata("design:paramtypes", [ElementRef,
         DateAdapter, Object, MatDateSelectionModel,
         WlcmDatepickerTrigger])
-], DateRangePickerInputEndDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DateRangePickerInputEndDirective, decorators: [{
+], DateRangePickerInputStartDirective);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DateRangePickerInputStartDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[wlcmDateRangePickerInputEnd]',
+                    selector: '[wlcmDateRangePickerInputStart]',
                     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 },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePickerInputStartDirective), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateRangePickerInputStartDirective), multi: true },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DateAdapter }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [MAT_DATE_FORMATS]
-                }] }, { type: i2$1.MatDateSelectionModel, decorators: [{
+                }] }, { type: i2.MatDateSelectionModel, decorators: [{
                     type: Inject,
                     args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
                 }] }, { type: WlcmDatepickerTrigger }] });
 
-let DateRangePickerInputStartDirective = class DateRangePickerInputStartDirective extends WlcmDateRangePickerInputBase {
+const WLCM_DATE_RANGE_SELECTION_MODEL = new InjectionToken('WLCM_DATE_RANGE_SELECTION_MODEL');
+const WLCM_DATE_RANGE_SELECTION_MODEL_PROVIDER = {
+    provide: WLCM_DATE_RANGE_SELECTION_MODEL,
+    useFactory: (adapter) => new MatRangeDateSelectionModel(adapter),
+    deps: [DateAdapter],
+};
+
+class WlcmDateRangePicker {
+    constructor(localSelectionModel, rangeSelectionStrategy) {
+        this.localSelectionModel = localSelectionModel;
+        this.rangeSelectionStrategy = rangeSelectionStrategy;
+        this._isComplete = signal(false);
+        this.isComplete = computed(() => this._isComplete());
+        this.handleSelectionChanged();
+    }
+    calendarSelection(event) {
+        const newSelection = this.rangeSelectionStrategy.selectionFinished(event.value, this.localSelectionModel.selection, event.event);
+        this.localSelectionModel.updateSelection(newSelection, this);
+    }
+    calendarDragDrop(event) {
+        this.localSelectionModel.updateSelection(event.value, this);
+    }
+    get selected() {
+        return this.localSelectionModel.selection;
+    }
+    handleSelectionChanged() {
+        this.localSelectionModel.selectionChanged
+            .pipe(untilDestroyed(this))
+            .subscribe(() => this._isComplete.set(this.localSelectionModel.isComplete()));
+    }
+}
+
+class WlcmDateRangePickerBottomPanelComponent {
+    constructor(picker) {
+        this.picker = picker;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmDateRangePickerBottomPanelComponent, deps: [{ token: WlcmDateRangePicker }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", 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", "isDisabled", "isLoading"], outputs: ["clicked"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", 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 }] });
+
+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 });
+
+class WlcmCalendarHeaderComponent {
+    constructor(dateAdapter, dateFormats, calendar) {
+        this.dateAdapter = dateAdapter;
+        this.dateFormats = dateFormats;
+        this.calendar = calendar;
+        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);
+    }
+    previousClicked() {
+        if (this.previous())
+            return this.previous()();
+        this.calendar.activeDate =
+            this.calendar.currentView == 'month'
+                ? this.dateAdapter.addCalendarMonths(this.calendar.activeDate, -1)
+                : this.dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? -1 : -yearsPerPage);
+    }
+    nextClicked() {
+        if (this.next())
+            return this.next()();
+        this.calendar.activeDate =
+            this.calendar.currentView == 'month'
+                ? this.dateAdapter.addCalendarMonths(this.calendar.activeDate, 1)
+                : this.dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? 1 : yearsPerPage);
+    }
+    changeCalendarView() {
+        if (this.calendar.currentView === 'multi-year') {
+            this.calendar.currentView = 'month';
+            return;
+        }
+        this.calendar.currentView = 'multi-year';
+    }
+    get periodLabel() {
+        return this.dateAdapter.format(this.calendar.activeDate, this.dateFormats.display.monthYearLabel);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", 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: "18.2.6", 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", 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)]
+                }] }] });
+
+class WlcmCalendarDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmCalendarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: WlcmCalendarDirective, isStandalone: true, selector: "[wlcmCalendar]", host: { classAttribute: "wlcm-calendar" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", 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;
+        this.headerComponent = WlcmCalendarHeaderComponent;
+        this.localSelectionModel.updateSelection(this.triggerSelectionModel.selection, this);
+    }
+    ngAfterViewInit() {
+        this.bottomPanelContainer.createComponent(this.pickerBottomPanel);
+    }
+    get minDate() {
+        return this.datepickerConfig.minDate?.();
+    }
+    get maxDate() {
+        return this.datepickerConfig.maxDate?.();
+    }
+    apply() {
+        this.triggerSelectionModel.updateSelection(this.localSelectionModel.selection, this);
+        this.trigger.close();
+    }
+    reset() {
+        this.trigger.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", 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: "18.2.6", 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: "18.2.6", ngImport: i0, type: SingleCalendarRangePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wlcm-single-calendar-range-picker', imports: [CommonModule, MatDatepickerModule, WlcmCalendarDirective], standalone: true, providers: [
+                        {
+                            provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
+                            useClass: DefaultMatCalendarRangeStrategy,
+                        },
+                        { 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 }]
+            }] } });
+
+let DateRangePickerInputEndDirective = class DateRangePickerInputEndDirective extends WlcmDateRangePickerInputBase {
     constructor(element, dateAdapter, dateFormats, selectionModel, trigger) {
         super(element, dateAdapter, dateFormats, trigger);
         this.element = element;
@@ -854,16 +580,16 @@ let DateRangePickerInputStartDirective = class DateRangePickerInputStartDirectiv
         this.selectionModel = selectionModel;
         this.trigger = trigger;
         this.updateSelection = () => {
-            let start = this.parseCurrentValue();
-            this.selectionModel.updateSelection(new DateRange(start, this.selectionModel.selection.end), this);
+            let end = this.parseCurrentValue();
+            this.selectionModel.updateSelection(new DateRange(this.selectionModel.selection.start, end), this);
         };
         this.handleSelectionChange();
     }
     validate() {
         const defaultErrors = super.validate();
-        if (this.selectionModel.isComplete() && isValid(this.selectionModel.selection.end)) {
-            const startDate = this.parseCurrentValue();
-            if (startDate && isAfter(startDate, this.selectionModel.selection.end)) {
+        if (isValid(this.selectionModel.selection.start)) {
+            const endDate = this.parseCurrentValue();
+            if (endDate && isAfter(this.selectionModel.selection.start, endDate)) {
                 return { [WlcmDateRangeValidation.StartExceedsEnd]: true, ...(defaultErrors ?? {}) };
             }
         }
@@ -871,41 +597,41 @@ let DateRangePickerInputStartDirective = class DateRangePickerInputStartDirectiv
     }
     handleSelectionChange() {
         this.selectionModel.selectionChanged.pipe(untilDestroyed(this)).subscribe(({ selection }) => {
-            const validDate = this.dateAdapter.getValidDateOrNull(selection.start);
+            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.1.4", ngImport: i0, type: DateRangePickerInputStartDirective, deps: [{ token: i0.ElementRef }, { token: i1.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.1.4", 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 },
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", 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: "18.2.6", 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 }); }
 };
-DateRangePickerInputStartDirective = __decorate([
+DateRangePickerInputEndDirective = __decorate([
     UntilDestroy(),
     __metadata("design:paramtypes", [ElementRef,
         DateAdapter, Object, MatDateSelectionModel,
         WlcmDatepickerTrigger])
-], DateRangePickerInputStartDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DateRangePickerInputStartDirective, decorators: [{
+], DateRangePickerInputEndDirective);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DateRangePickerInputEndDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[wlcmDateRangePickerInputStart]',
+                    selector: '[wlcmDateRangePickerInputEnd]',
                     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 },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePickerInputEndDirective), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateRangePickerInputEndDirective), multi: true },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DateAdapter }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [MAT_DATE_FORMATS]
-                }] }, { type: i2$1.MatDateSelectionModel, decorators: [{
+                }] }, { type: i2.MatDateSelectionModel, decorators: [{
                     type: Inject,
                     args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
                 }] }, { type: WlcmDatepickerTrigger }] });
@@ -931,7 +657,7 @@ class WlcmDateRangePickerInputComponent extends WlcmDatepickerTrigger {
         this._blurStream$ = new BehaviorSubject(EMPTY);
         this.focus$ = this._focusStream$.pipe(switchMap((stream) => stream));
         this.blur$ = this._blurStream$.pipe(switchMap((stream) => stream));
-        this.componentType = WlcmDateRangePickerComponent;
+        this.componentType = SingleCalendarRangePickerComponent;
     }
     ngAfterContentInit() {
         this.checkInputs();
@@ -977,8 +703,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.1.4", ngImport: i0, type: WlcmDateRangePickerInputComponent, deps: [{ token: i1$1.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.1.4", type: WlcmDateRangePickerInputComponent, isStandalone: true, selector: "wlcm-date-range-picker-input", host: { classAttribute: "wlcm-date-range-picker-input" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", 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: "18.2.6", type: WlcmDateRangePickerInputComponent, isStandalone: true, selector: "wlcm-date-range-picker-input", inputs: { componentType: "componentType" }, host: { classAttribute: "wlcm-date-range-picker-input" }, providers: [
             WLCM_FORM_CONTROL_PROVIDER,
             WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL_PROVIDER,
             {
@@ -991,7 +717,7 @@ 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 }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDateRangePickerInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", 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, DateRangePickerInputStartDirective, DateRangePickerInputEndDirective], providers: [
                         WLCM_FORM_CONTROL_PROVIDER,
@@ -1005,7 +731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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$1.Overlay }, { type: i0.ViewContainerRef }, { type: i2$1.MatDateSelectionModel, decorators: [{
+        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i2.MatDateSelectionModel, decorators: [{
                     type: Inject,
                     args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
                 }] }, { type: undefined, decorators: [{
@@ -1018,7 +744,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 }, {
                     type: Inject,
                     args: [ControlContainer]
-                }] }], propDecorators: { startInput: [{
+                }] }], propDecorators: { componentType: [{
+                type: Input
+            }], startInput: [{
                 type: ContentChild,
                 args: [DateRangePickerInputStartDirective]
             }], endInput: [{
@@ -1026,6 +754,374 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 args: [DateRangePickerInputEndDirective]
             }] } });
 
+class WlcmDataRangeCalendar {
+    constructor(location, element, calendar, dateAdapter, datepickerConfig) {
+        this.element = element;
+        this.calendar = calendar;
+        this.dateAdapter = dateAdapter;
+        this.datepickerConfig = datepickerConfig;
+        this.dateChange = output();
+        this.viewChange = output();
+        this.disabled = input(false);
+        this.location = location;
+        effect(() => {
+            if (this.disabled()) {
+                this.element.nativeElement.classList.add('wlcm-calendar-disabled');
+            }
+            else {
+                this.element.nativeElement.classList.remove('wlcm-calendar-disabled');
+            }
+        });
+        this.handleConfigValues();
+    }
+    get minDate() {
+        return this.datepickerConfig.minDate?.();
+    }
+    get maxDate() {
+        return this.datepickerConfig.maxDate?.();
+    }
+    prevMonth() {
+        this.dateChange.emit(this.dateAdapter.addCalendarMonths(this.calendar.activeDate, -1));
+    }
+    nextMonth() {
+        this.dateChange.emit(this.dateAdapter.addCalendarMonths(this.calendar.activeDate, 1));
+    }
+    prevYear() {
+        this.dateChange.emit(this.dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? -1 : -yearsPerPage));
+    }
+    nextYear() {
+        this.dateChange.emit(this.dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? 1 : yearsPerPage));
+    }
+    handleConfigValues() {
+        this.calendar.dateFilter = (date) => {
+            if (this.minDate && isBefore(startOfDay(date), startOfDay(this.minDate)))
+                return false;
+            if (this.maxDate && isAfter(startOfDay(date), startOfDay(this.maxDate)))
+                return false;
+            return true;
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmDataRangeCalendar, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.6", type: WlcmDataRangeCalendar, 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: "18.2.6", ngImport: i0, type: WlcmDataRangeCalendar, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: undefined }, { type: i0.ElementRef }, { type: i2.MatCalendar }, { type: i1$1.DateAdapter }, { type: undefined }] });
+
+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;
+        this.handleYearChange();
+        this.handleMonthChange();
+    }
+    handleYearChange() {
+        this.calendar.yearSelected.pipe(untilDestroyed(this)).subscribe((date) => this.dateChange.emit(date));
+    }
+    handleMonthChange() {
+        this.calendar.monthSelected.pipe(untilDestroyed(this)).subscribe((date) => this.dateChange.emit(date));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", 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: "18.2.6", 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: "18.2.6", 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]
+                }] }] });
+
+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;
+        this.handleYearChange();
+        this.handleMonthChange();
+    }
+    handleYearChange() {
+        this.calendar.yearSelected
+            .pipe(untilDestroyed(this))
+            .subscribe((date) => this.dateChange.emit(this.dateAdapter.addCalendarMonths(date, -1)));
+    }
+    handleMonthChange() {
+        this.calendar.monthSelected
+            .pipe(untilDestroyed(this))
+            .subscribe((date) => this.dateChange.emit(this.dateAdapter.addCalendarMonths(date, -1)));
+    }
+    nextMonth() {
+        this.dateChange.emit(this.calendar.activeDate);
+    }
+    prevYear() {
+        this.dateChange.emit(this.dateAdapter.addCalendarMonths(this.dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? -1 : -yearsPerPage), -1));
+    }
+    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: "18.2.6", 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: "18.2.6", 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: "18.2.6", 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]
+                }] }] });
+
+class WlcmDateRangeCalendarHeaderComponent {
+    constructor(rangeCalendar, dateFormats, calendar, datepickerConfig) {
+        this.rangeCalendar = rangeCalendar;
+        this.dateFormats = dateFormats;
+        this.calendar = calendar;
+        this.datepickerConfig = datepickerConfig;
+        this.WlcmIconName = WlcmIconName;
+        this.previous = () => {
+            if (this.isPreviousDisabled)
+                return;
+            if (this.calendar.currentView !== 'month') {
+                return this.rangeCalendar.prevYear();
+            }
+            return this.rangeCalendar.prevMonth();
+        };
+        this.next = () => {
+            if (this.isNextDisabled)
+                return;
+            if (this.calendar.currentView !== 'month') {
+                return this.rangeCalendar.nextYear();
+            }
+            return this.rangeCalendar.nextMonth();
+        };
+    }
+    get minDate() {
+        return this.datepickerConfig.minDate?.();
+    }
+    get maxDate() {
+        return this.datepickerConfig.maxDate?.();
+    }
+    get isPreviousDisabled() {
+        if (!this.minDate)
+            return false;
+        let previousPeriod = endOfMonth(add(this.calendar.activeDate, { months: -1 }));
+        if (this.calendar.currentView !== 'month') {
+            previousPeriod = add(this.calendar.activeDate, { years: -1 });
+        }
+        return isBefore(previousPeriod, this.minDate);
+    }
+    get isNextDisabled() {
+        if (!this.maxDate)
+            return false;
+        let nextPeriod = startOfMonth(add(this.calendar.activeDate, { months: 1 }));
+        if (this.calendar.currentView !== 'month') {
+            nextPeriod = add(this.calendar.activeDate, { years: 1 });
+        }
+        return isBefore(this.maxDate, nextPeriod);
+    }
+    get canDisplayLeftArrow() {
+        return !this.rangeCalendar || this.rangeCalendar.location === 'left' || this.calendar.currentView !== 'month';
+    }
+    get canDisplayRightArrow() {
+        return !this.rangeCalendar || this.rangeCalendar.location === 'right' || this.calendar.currentView !== 'month';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", 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: "18.2.6", 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmDateRangeCalendarHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wlcm-date-range-calendar-header', standalone: true, imports: [CommonModule, WlcmCalendarHeaderComponent, WlcmIconDirective], 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]
+                }] }] });
+
+let DoubleCalendarRangePickerComponent = class DoubleCalendarRangePickerComponent extends WlcmDateRangePicker {
+    constructor(rangeConfig, rangeSelectionStrategy, localSelectionModel, triggerSelectionModel, trigger, datepickerConfig, pickerBottomPanel, 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.dateAdapter = dateAdapter;
+        this.headerComponent = WlcmDateRangeCalendarHeaderComponent;
+        this._isViewInitialized = signal(false);
+        this.startDate = signal(new Date());
+        this.leftCalendarYearViewActivated = signal(false);
+        this.rightCalendarYearViewActivated = signal(false);
+        this.localSelectionModel.updateSelection(this.triggerSelectionModel.selection, this);
+        if (this.triggerSelectionModel.selection.start) {
+            this.startDate.set(this.triggerSelectionModel.selection.start);
+        }
+        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;
+        });
+    }
+    ngAfterViewInit() {
+        this._isViewInitialized.set(true);
+        this.leftCalendar.viewChanged.pipe(untilDestroyed(this)).subscribe((view) => {
+            this.leftCalendarYearViewActivated.set(view !== 'month');
+        });
+        this.rightCalendar.viewChanged.pipe(untilDestroyed(this)).subscribe((view) => {
+            this.rightCalendarYearViewActivated.set(view !== 'month');
+        });
+        this.bottomPanelContainer.createComponent(this.pickerBottomPanel);
+        this.handleRightCalendarPreviewChange();
+    }
+    apply() {
+        this.triggerSelectionModel.updateSelection(this.localSelectionModel.selection, this);
+        this.trigger.close();
+    }
+    reset() {
+        this.trigger.close();
+    }
+    get leftCalendarActiveCell() {
+        return this.leftCalendarElement.nativeElement.querySelector('.mat-calendar-body-active');
+    }
+    handleRightCalendarPreviewChange() {
+        const viewChanged = new Subject();
+        this.rightCalendar.viewChanged
+            .pipe(untilDestroyed(this))
+            .pipe(tap(() => viewChanged.next()))
+            .pipe(startWith(this.rightCalendar.currentView))
+            .subscribe((view) => {
+            if (view !== 'month')
+                return;
+            this.rightCalendar.monthView._matCalendarBody.previewChange
+                .pipe(takeUntil(viewChanged), untilDestroyed(this))
+                .subscribe(() => {
+                if (this.leftCalendar.currentView !== 'month' || !this.leftCalendar.monthView._rangeStart)
+                    return;
+                this.leftCalendar.monthView._previewStart = this.rightCalendar.monthView._previewStart;
+                this.leftCalendar.monthView._previewEnd = this.rightCalendar.monthView._previewEnd;
+                const activeCell = this.leftCalendarActiveCell;
+                if (activeCell && activeCell === document.activeElement)
+                    activeCell.blur();
+                this.leftCalendar.monthView._changeDetectorRef.markForCheck();
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", 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: i1$1.DateAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", 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: "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    <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\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,
+        DateAdapter])
+], DoubleCalendarRangePickerComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DoubleCalendarRangePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wlcm-double-calendar-range-picker', imports: [
+                        CommonModule,
+                        MatDatepickerModule,
+                        WlcmCalendarDirective,
+                        WlcmLeftCalendarDirective,
+                        WlcmRightCalendarDirective,
+                    ], standalone: true, providers: [
+                        {
+                            provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
+                            useClass: DefaultMatCalendarRangeStrategy,
+                        },
+                        { 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    <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\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: 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 }]
+            }], monthView: [{
+                type: ViewChild,
+                args: [MatMonthView]
+            }] } });
+
 let WlcmDatepickerInputDirective = class WlcmDatepickerInputDirective extends WlcmDatepickerInputBase {
     constructor(element, dateAdapter, dateFormats, selectionModel, trigger) {
         super(element, dateAdapter, dateFormats, trigger);
@@ -1051,8 +1147,8 @@ let WlcmDatepickerInputDirective = class WlcmDatepickerInputDirective extends Wl
             this._touched?.();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDatepickerInputDirective, deps: [{ token: i0.ElementRef }, { token: i1.DateAdapter }, { token: MAT_DATE_FORMATS }, { token: i2$1.MatDateSelectionModel }, { token: WlcmDatepickerTrigger }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: WlcmDatepickerInputDirective, isStandalone: true, selector: "[wlcmDatepickerInput]", host: { classAttribute: "wlcm-form-field-input" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", 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: "18.2.6", 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 }); }
@@ -1063,7 +1159,7 @@ WlcmDatepickerInputDirective = __decorate([
         DateAdapter, Object, MatDateSelectionModel,
         WlcmDatepickerTrigger])
 ], WlcmDatepickerInputDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDatepickerInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmDatepickerInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wlcmDatepickerInput]',
@@ -1075,10 +1171,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmDatepickerInputDirective), multi: true },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DateAdapter }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DATE_FORMATS]
-                }] }, { type: i2$1.MatDateSelectionModel }, { type: WlcmDatepickerTrigger }] });
+                }] }, { type: i2.MatDateSelectionModel }, { type: WlcmDatepickerTrigger }] });
 
 class WlcmDatepickerPanelComponent {
     constructor(selectionModel, trigger, config) {
@@ -1092,13 +1188,13 @@ class WlcmDatepickerPanelComponent {
         this.selectionModel.updateSelection(date, this);
         this.trigger.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDatepickerPanelComponent, deps: [{ token: i2$1.MatDateSelectionModel }, { token: WlcmDatepickerTrigger }, { token: WLCM_DATEPICKER_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", 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$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]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", 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: "18.2.6", 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]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDatepickerPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", 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$1.MatDateSelectionModel }, { type: WlcmDatepickerTrigger }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i2.MatDateSelectionModel }, { type: WlcmDatepickerTrigger }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [WLCM_DATEPICKER_CONFIG]
                 }] }] });
@@ -1145,8 +1241,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.1.4", ngImport: i0, type: WlcmDatepickerInputContainerComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i2$1.MatDateSelectionModel }, { token: WLCM_FORM_FIELD, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", 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: "18.2.6", 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: "18.2.6", type: WlcmDatepickerInputContainerComponent, isStandalone: true, selector: "wlcm-datepicker-input-container", host: { classAttribute: "wlcm-datepicker-input-container" }, providers: [
             {
                 provide: WLCM_INPUT_BINDER,
                 useFactory: () => {
@@ -1160,7 +1256,7 @@ class WlcmDatepickerInputContainerComponent extends WlcmDatepickerTrigger {
             { 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 }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDatepickerInputContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", 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: [
                         {
@@ -1175,7 +1271,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         { provide: WlcmDatepickerTrigger, useExisting: forwardRef(() => WlcmDatepickerInputContainerComponent) },
                         { provide: MatDateSelectionModel, useClass: MatSingleDateSelectionModel },
                     ], template: "<ng-content select=\"[wlcmDatepickerInput]\"></ng-content>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i2$1.MatDateSelectionModel }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i2.MatDateSelectionModel }, { type: undefined, decorators: [{
                     type: Host
                 }, {
                     type: Inject,
@@ -1204,15 +1300,15 @@ const publicDirectives = [
     DateRangePickerInputEndDirective,
 ];
 class WlcmDatepickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: WlcmDatepickerModule, imports: [CommonModule, WlcmDatepickerInputContainerComponent, WlcmDateRangePickerInputComponent, WlcmDatepickerInputDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.6", 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.1.4", ngImport: i0, type: WlcmDatepickerModule, providers: [...WLCM_DEFAULT_DATEPICKER_PROVIDERS], imports: [CommonModule, publicComponents] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmDatepickerModule, providers: [...WLCM_DEFAULT_DATEPICKER_PROVIDERS], imports: [CommonModule, publicComponents] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmDatepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ...publicComponents, ...publicDirectives],
@@ -1225,5 +1321,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DateRangePickerInputEndDirective, DateRangePickerInputStartDirective, WLCM_DATEPICKER_CONFIG, WlcmDateRangeInputValidator, WlcmDateRangePickerInputComponent, WlcmDateRangeValidation, WlcmDateValidation, WlcmDatepickerInputContainerComponent, WlcmDatepickerInputDirective, WlcmDatepickerModule };
+export { DateRangePickerInputEndDirective, DateRangePickerInputStartDirective, DoubleCalendarRangePickerComponent, SingleCalendarRangePickerComponent, WLCM_DATEPICKER_CONFIG, WlcmDateRangeInputValidator, WlcmDateRangePicker, WlcmDateRangePickerInputComponent, WlcmDateRangeValidation, WlcmDateValidation, WlcmDatepickerInputContainerComponent, WlcmDatepickerInputDirective, WlcmDatepickerModule };
 //# sourceMappingURL=wlcm-angular-datepicker.mjs.map