@wlcm/angular 17.4.1 → 17.5.4

package/{date-range-picker/fesm2022/wlcm-angular-date-range-picker.mjs → datepicker/fesm2022/wlcm-angular-datepicker.mjs}

@@ -1,27 +1,273 @@
 import * as i0 from '@angular/core';
-import { Injector, ViewContainerRef, Directive, HostListener, InjectionToken, forwardRef, ElementRef, Optional, Inject, output, input, effect, Component, signal, computed, ViewChild, inject, Host, ContentChild, Injectable, NgModule } from '@angular/core';
+import { Component, output, input, effect, Directive, forwardRef, Optional, Inject, InjectionToken, ElementRef, Injector, ViewContainerRef, signal, computed, ViewChild, Injectable, HostListener, inject, Host, ContentChild, contentChild, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { __decorate, __metadata } from 'tslib';
-import * as i1 from '@angular/cdk/overlay';
+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 { 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 { ComponentPortal } from '@angular/cdk/portal';
-import * as i2 from '@angular/material/datepicker';
-import { MatDateSelectionModel, MatRangeDateSelectionModel, DateRange, yearsPerPage, MatCalendar, MAT_DATE_RANGE_SELECTION_STRATEGY, DefaultMatCalendarRangeStrategy, MatMonthView, MatDatepickerModule } from '@angular/material/datepicker';
+import { __decorate, __metadata } from 'tslib';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
-import { merge, EMPTY, filter, Subject, tap, startWith, takeUntil, BehaviorSubject, switchMap, fromEvent, map } from 'rxjs';
-import { WLCM_FORM_FIELD, WLCM_FORM_CONTROL_PROVIDER, WLCM_INPUT_BINDER, WlcmFormsModule } from '@wlcm/angular/forms';
-import * as i1$1 from '@angular/material/core';
-import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+import * as i2 from '@wlcm/angular/button';
+import { WlcmButtonModule } from '@wlcm/angular/button';
+import * as i1 from '@angular/material/core';
+import { MAT_DATE_FORMATS, DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
+import { WlcmIconName, WlcmIconDirective } from '@wlcm/angular/core';
+import { ComponentPortal } from '@angular/cdk/portal';
 import * as i3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, ControlContainer } from '@angular/forms';
-import { WlcmIconName, WlcmIconDirective } from '@wlcm/angular/core';
-import * as i2$1 from '@wlcm/angular/button';
-import { WlcmButtonModule } from '@wlcm/angular/button';
-import { enUS } from 'date-fns/locale';
+import { format, parse, isValid, isAfter } from 'date-fns';
 import { DateFnsAdapter } from '@angular/material-date-fns-adapter';
-import { format } from 'date-fns';
+import { enUS } from 'date-fns/locale';
+
+class WlcmDateRangePickerBottomPanelComponent {
+    constructor(picker) {
+        this.picker = picker;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerBottomPanelComponent, deps: [{ token: WlcmDateRangePickerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: WlcmDateRangePickerBottomPanelComponent, isStandalone: true, selector: "wlcm-date-range-picker-bottom-panel", ngImport: i0, template: "<div class=\"wlcm-date-range-picker-bottom-panel\">\n  <wlcm-button 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: "17.3.5", ngImport: i0, type: WlcmDateRangePickerBottomPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wlcm-date-range-picker-bottom-panel', standalone: true, imports: [CommonModule, WlcmButtonModule], template: "<div class=\"wlcm-date-range-picker-bottom-panel\">\n  <wlcm-button type=\"paddingless\" (clicked)=\"picker.reset()\">Reset</wlcm-button>\n\n  <wlcm-button (clicked)=\"picker.apply()\" [isDisabled]=\"!picker.isComplete()\">\n    Apply\n  </wlcm-button>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: WlcmDateRangePickerComponent }] });
+
+class WlcmDataRangeCalendar {
+    constructor(location, element, calendar, dateAdapter) {
+        this.element = element;
+        this.calendar = calendar;
+        this.dateAdapter = dateAdapter;
+        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');
+            }
+        });
+    }
+    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));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDataRangeCalendar, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.5", 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: "17.3.5", ngImport: i0, type: WlcmDataRangeCalendar, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: undefined }, { type: i0.ElementRef }, { type: i2$1.MatCalendar }, { type: i1.DateAdapter }] });
+
+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.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: "17.3.5", 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: "17.3.5", type: WlcmCalendarHeaderComponent, isStandalone: true, selector: "wlcm-calendar-header", inputs: { next: { classPropertyName: "next", publicName: "next", isSignal: true, isRequired: false, transformFunction: null }, previous: { classPropertyName: "previous", publicName: "previous", isSignal: true, isRequired: false, transformFunction: null }, 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    (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    (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: "17.3.5", ngImport: i0, type: WlcmCalendarHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wlcm-calendar-header', host: { class: 'wlcm-calendar-header' }, standalone: true, imports: [CommonModule, WlcmIconDirective], template: "<div class=\"wlcm-calendar-header-button-container\">\n  @if(displayLeftArrow()) {\n  <button\n    class=\"wlcm-calendar-header-button wlcm-calendar-header-button-left\"\n    (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    (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)]
+                }] }] });
+
+class WlcmDateRangeCalendarHeaderComponent {
+    constructor(rangeCalendar, dateFormats, calendar) {
+        this.rangeCalendar = rangeCalendar;
+        this.dateFormats = dateFormats;
+        this.calendar = calendar;
+        this.WlcmIconName = WlcmIconName;
+        this.previous = () => {
+            if (this.calendar.currentView !== 'month') {
+                return this.rangeCalendar.prevYear();
+            }
+            return this.rangeCalendar.prevMonth();
+        };
+        this.next = () => {
+            if (this.calendar.currentView !== 'month') {
+                return this.rangeCalendar.nextYear();
+            }
+            return this.rangeCalendar.nextMonth();
+        };
+    }
+    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: "17.3.5", ngImport: i0, type: WlcmDateRangeCalendarHeaderComponent, deps: [{ token: WlcmDataRangeCalendar, optional: true }, { token: MAT_DATE_FORMATS, optional: true }, { token: forwardRef(() => MatCalendar) }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: WlcmDateRangeCalendarHeaderComponent, isStandalone: true, selector: "wlcm-date-range-calendar-header", ngImport: i0, template: "<wlcm-calendar-header\n  [next]=\"next\"\n  [previous]=\"previous\"\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", "displayLeftArrow", "displayRightArrow"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", 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  [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)]
+                }] }] });
+
+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) {
+        super('left', element, calendar, dateAdapter);
+        this.element = element;
+        this.dateAdapter = dateAdapter;
+        this.calendar = calendar;
+        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: "17.3.5", ngImport: i0, type: WlcmLeftCalendarDirective, deps: [{ token: i0.ElementRef }, { token: i1.DateAdapter }, { token: forwardRef(() => MatCalendar) }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", 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])
+], WlcmLeftCalendarDirective);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmLeftCalendarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wlcmLeftCalendar]',
+                    standalone: true,
+                    providers: [{ provide: WlcmDataRangeCalendar, useExisting: forwardRef(() => WlcmLeftCalendarDirective) }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DateAdapter }, { type: i2$1.MatCalendar, decorators: [{
+                    type: Inject,
+                    args: [forwardRef(() => MatCalendar)]
+                }] }] });
+
+let WlcmRightCalendarDirective = class WlcmRightCalendarDirective extends WlcmDataRangeCalendar {
+    constructor(element, dateAdapter, calendar) {
+        super('right', element, calendar, dateAdapter);
+        this.element = element;
+        this.dateAdapter = dateAdapter;
+        this.calendar = calendar;
+        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: "17.3.5", ngImport: i0, type: WlcmRightCalendarDirective, deps: [{ token: i0.ElementRef }, { token: i1.DateAdapter }, { token: forwardRef(() => MatCalendar) }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", 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])
+], WlcmRightCalendarDirective);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmRightCalendarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wlcmRightCalendar]',
+                    standalone: true,
+                    providers: [{ provide: WlcmDataRangeCalendar, useExisting: forwardRef(() => WlcmRightCalendarDirective) }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DateAdapter }, { type: i2$1.MatCalendar, decorators: [{
+                    type: Inject,
+                    args: [forwardRef(() => MatCalendar)]
+                }] }] });
 
-let WlcmDateRangePickerTrigger = class WlcmDateRangePickerTrigger {
+let WlcmDatepickerTrigger = class WlcmDatepickerTrigger {
     constructor(overlay, viewContainerRef, selectionModel) {
         this.overlay = overlay;
         this.viewContainerRef = viewContainerRef;
@@ -77,55 +323,221 @@ let WlcmDateRangePickerTrigger = class WlcmDateRangePickerTrigger {
             backdropClass: 'transparent',
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerTrigger, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i2.MatDateSelectionModel }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: WlcmDateRangePickerTrigger, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", 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: "14.0.0", version: "17.3.5", type: WlcmDatepickerTrigger, ngImport: i0 }); }
 };
-WlcmDateRangePickerTrigger = __decorate([
+WlcmDatepickerTrigger = __decorate([
     UntilDestroy(),
     __metadata("design:paramtypes", [Overlay,
         ViewContainerRef,
         MatDateSelectionModel])
-], WlcmDateRangePickerTrigger);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerTrigger, decorators: [{
+], WlcmDatepickerTrigger);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDatepickerTrigger, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i2.MatDateSelectionModel }] });
+        }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i2$1.MatDateSelectionModel }] });
 
-var WlcmDateRangeValidation;
-(function (WlcmDateRangeValidation) {
-    WlcmDateRangeValidation["format"] = "wlcmDateRangeFormat";
-})(WlcmDateRangeValidation || (WlcmDateRangeValidation = {}));
+class WlcmCalendarDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmCalendarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: WlcmCalendarDirective, isStandalone: true, selector: "[wlcmCalendar]", host: { classAttribute: "wlcm-calendar" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmCalendarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wlcmCalendar]',
+                    host: { class: 'wlcm-calendar' },
+                    standalone: true,
+                }]
+        }] });
 
-class DateRangePickerInputBase {
-    constructor(element, dateAdapter, dateFormats) {
-        this.element = element;
+let WlcmDateRangePickerComponent = class WlcmDateRangePickerComponent {
+    constructor(config, rangeSelectionStrategy, localSelectionModel, triggerSelectionModel, trigger, dateAdapter) {
+        this.config = config;
+        this.rangeSelectionStrategy = rangeSelectionStrategy;
+        this.localSelectionModel = localSelectionModel;
+        this.triggerSelectionModel = triggerSelectionModel;
+        this.trigger = trigger;
         this.dateAdapter = dateAdapter;
-        this.dateFormats = dateFormats;
-        this.handleBlur = () => { };
-        this.handleInput = () => {
-            this.changeInputSize();
-            this._validatorChanged?.();
-        };
-        this._inputMirror = this.createInputMirror();
+        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.config.headerComponent) {
+            this.headerComponent = this.config.headerComponent;
+        }
+        effect(() => {
+            if (!this._isViewInitialized)
+                return;
+            this.leftCalendar.activeDate = this.startDate();
+            this.rightCalendar.activeDate = this.dateAdapter.addCalendarMonths(this.startDate(), 1);
+        });
     }
     ngAfterViewInit() {
-        this.inputElement.parentElement?.appendChild(this._inputMirror);
-        this.copyInputElementStyles(this._inputMirror);
-        document.fonts.ready.then(() => this.changeInputSize());
-    }
-    writeValue(value) {
-        if (!value)
-            return;
-        this.updateInputValue(value);
+        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();
     }
-    validate() {
-        const value = this.currentValue;
-        if (!value)
-            return null;
-        const parsed = this.dateAdapter.parse(value, this.dateFormats.parse.dateInput);
-        if (!this.dateAdapter.isValid(parsed)) {
-            return { [WlcmDateRangeValidation.format]: { value, format: this.dateFormats.parse.dateInput }, required: false };
+    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: "17.3.5", 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: i1.DateAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", 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,
+        DateAdapter])
+], WlcmDateRangePickerComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", 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: 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]
+            }] } });
+
+function range(length, valueFunction) {
+    const valuesArray = Array(length);
+    for (let i = 0; i < length; i++) {
+        valuesArray[i] = valueFunction(i);
+    }
+    return valuesArray;
+}
+class WlcmDateAdapter extends DateFnsAdapter {
+    getDayOfWeekNames(style) {
+        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: "17.3.5", ngImport: i0, type: WlcmDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateAdapter }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateAdapter, decorators: [{
+            type: Injectable
+        }] });
+var WlcmDateValidation;
+(function (WlcmDateValidation) {
+    WlcmDateValidation["Format"] = "WlcmInvalidDateFormat";
+})(WlcmDateValidation || (WlcmDateValidation = {}));
+
+class WlcmDatepickerInputBase {
+    handleBlur() {
+        this.updateSelection();
+        this._touched?.();
+    }
+    handleInput() {
+        if (this.isValidFormat(this.currentValue, this.dateFormats.parse.dateInput)) {
+            this.updateSelection();
         }
-        return null;
+        this._validatorChanged?.();
+    }
+    constructor(element, dateAdapter, dateFormats) {
+        this.element = element;
+        this.dateAdapter = dateAdapter;
+        this.dateFormats = dateFormats;
+    }
+    writeValue(value) {
+        this.updateInputValue(value);
     }
     registerOnChange(callback) {
         this._changed = callback;
@@ -136,16 +548,71 @@ class DateRangePickerInputBase {
     registerOnValidatorChange(callback) {
         this._validatorChanged = callback;
     }
+    validate() {
+        if (!this.currentValue)
+            return null;
+        const isValid = this.isValidFormat(this.currentValue, this.dateFormats.parse.dateInput);
+        if (!isValid) {
+            return {
+                [WlcmDateValidation.Format]: { value: this.currentValue, format: this.dateFormats.parse.dateInput },
+                required: false,
+            };
+        }
+        return null;
+    }
     parseCurrentValue() {
         const date = this.dateAdapter.parse(this.currentValue, this.dateFormats.parse.dateInput);
         return this.dateAdapter.getValidDateOrNull(date);
     }
+    isValidFormat(value, pattern) {
+        const parsedDate = parse(value, pattern, new Date());
+        return isValid(parsedDate) && value === format(parsedDate, pattern);
+    }
+    get inputElement() {
+        return this.element.nativeElement;
+    }
+    get currentValue() {
+        return this.inputElement.value;
+    }
     updateInputValue(value) {
         let newValue = '';
         if (value) {
             newValue = this.dateAdapter.format(value, this.dateFormats.display.dateInput);
         }
         this.inputElement.value = newValue;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDatepickerInputBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: WlcmDatepickerInputBase, host: { listeners: { "blur": "handleBlur()", "input": "handleInput()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDatepickerInputBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DateAdapter }, { type: undefined }], propDecorators: { handleBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }], handleInput: [{
+                type: HostListener,
+                args: ['input']
+            }] } });
+
+class WlcmDateRangePickerInputBase extends WlcmDatepickerInputBase {
+    constructor(element, dateAdapter, dateFormats) {
+        super(element, dateAdapter, dateFormats);
+        this.element = element;
+        this.dateAdapter = dateAdapter;
+        this.dateFormats = dateFormats;
+        this._inputMirror = this.createInputMirror();
+    }
+    ngAfterViewInit() {
+        this.inputElement.parentElement?.appendChild(this._inputMirror);
+        this.copyInputElementStyles(this._inputMirror);
+        document.fonts.ready.then(() => this.changeInputSize());
+    }
+    handleInput() {
+        this.changeInputSize();
+        super.handleInput();
+    }
+    updateInputValue(value) {
+        super.updateInputValue(value);
         this.changeInputSize();
     }
     changeInputSize() {
@@ -164,98 +631,41 @@ class DateRangePickerInputBase {
         target.style.fontFamily = inputElementStyles.fontFamily;
         target.style.letterSpacing = inputElementStyles.letterSpacing;
     }
-    get inputElement() {
-        return this.element.nativeElement;
-    }
-    get currentValue() {
-        return this.inputElement.value;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: DateRangePickerInputBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: DateRangePickerInputBase, host: { listeners: { "blur": "handleBlur()", "input": "handleInput()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerInputBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: WlcmDateRangePickerInputBase, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: DateRangePickerInputBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerInputBase, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: undefined }], propDecorators: { handleBlur: [{
-                type: HostListener,
-                args: ['blur']
-            }], handleInput: [{
-                type: HostListener,
-                args: ['input']
-            }] } });
-
-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],
-};
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DateAdapter }, { type: undefined }] });
 
-let DateRangePickerInputStartDirective = class DateRangePickerInputStartDirective extends DateRangePickerInputBase {
-    constructor(element, dateAdapter, dateFormats, selectionModel) {
-        super(element, dateAdapter, dateFormats);
-        this.element = element;
-        this.dateAdapter = dateAdapter;
-        this.dateFormats = dateFormats;
-        this.selectionModel = selectionModel;
-        this.handleBlur = () => {
-            let start = this.parseCurrentValue();
-            this.selectionModel.updateSelection(new DateRange(start, this.selectionModel.selection.end), this);
-        };
-        this.handleSelectionChange();
-    }
-    handleSelectionChange() {
-        this.selectionModel.selectionChanged.pipe(untilDestroyed(this)).subscribe(({ selection }) => {
-            const validDate = this.dateAdapter.getValidDateOrNull(selection.start);
-            this._changed?.(validDate);
-            this.updateInputValue(validDate);
-            this._validatorChanged?.();
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", 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 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: DateRangePickerInputStartDirective, isStandalone: true, selector: "[wlcmDateRangePickerInputStart]", host: { classAttribute: "wlcm-date-range-picker-input-field" }, providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePickerInputStartDirective), multi: true },
-            { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateRangePickerInputStartDirective), multi: true },
-        ], usesInheritance: true, ngImport: i0 }); }
-};
-DateRangePickerInputStartDirective = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [ElementRef,
-        DateAdapter, Object, MatDateSelectionModel])
-], DateRangePickerInputStartDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: DateRangePickerInputStartDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[wlcmDateRangePickerInputStart]',
-                    host: { class: 'wlcm-date-range-picker-input-field' },
-                    standalone: true,
-                    providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePickerInputStartDirective), multi: true },
-                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateRangePickerInputStartDirective), multi: true },
-                    ],
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_DATE_FORMATS]
-                }] }, { type: i2.MatDateSelectionModel, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
-                }] }] });
+var WlcmDateRangeValidation;
+(function (WlcmDateRangeValidation) {
+    WlcmDateRangeValidation["StartExceedsEnd"] = "wlcmDateRangeStartExceedsEnd";
+})(WlcmDateRangeValidation || (WlcmDateRangeValidation = {}));
 
-let DateRangePickerInputEndDirective = class DateRangePickerInputEndDirective extends DateRangePickerInputBase {
+let DateRangePickerInputEndDirective = class DateRangePickerInputEndDirective extends WlcmDateRangePickerInputBase {
     constructor(element, dateAdapter, dateFormats, selectionModel) {
         super(element, dateAdapter, dateFormats);
         this.element = element;
         this.dateAdapter = dateAdapter;
         this.dateFormats = dateFormats;
         this.selectionModel = selectionModel;
-        this.handleBlur = () => {
+        this.updateSelection = () => {
             let end = this.parseCurrentValue();
             this.selectionModel.updateSelection(new DateRange(this.selectionModel.selection.start, 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)) {
+                return { [WlcmDateRangeValidation.StartExceedsEnd]: true, ...(defaultErrors ?? {}) };
+            }
+        }
+        return defaultErrors;
+    }
     handleSelectionChange() {
         this.selectionModel.selectionChanged.pipe(untilDestroyed(this)).subscribe(({ selection }) => {
             const validDate = this.dateAdapter.getValidDateOrNull(selection.end);
@@ -264,379 +674,111 @@ let DateRangePickerInputEndDirective = class DateRangePickerInputEndDirective ex
             this._validatorChanged?.();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", 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 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: DateRangePickerInputEndDirective, deps: [{ token: i0.ElementRef }, { token: i1.DateAdapter }, { token: MAT_DATE_FORMATS, optional: true }, { token: WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: DateRangePickerInputEndDirective, isStandalone: true, selector: "[wlcmDateRangePickerInputEnd]", host: { classAttribute: "wlcm-date-range-picker-input-field" }, providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePickerInputEndDirective), multi: true },
-            { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateRangePickerInputEndDirective), multi: true },
-        ], usesInheritance: true, ngImport: i0 }); }
-};
-DateRangePickerInputEndDirective = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [ElementRef,
-        DateAdapter, Object, MatDateSelectionModel])
-], DateRangePickerInputEndDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: DateRangePickerInputEndDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[wlcmDateRangePickerInputEnd]',
-                    host: { class: 'wlcm-date-range-picker-input-field' },
-                    standalone: true,
-                    providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePickerInputEndDirective), multi: true },
-                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateRangePickerInputEndDirective), multi: true },
-                    ],
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_DATE_FORMATS]
-                }] }, { type: i2.MatDateSelectionModel, decorators: [{
-                    type: Inject,
-                    args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
-                }] }] });
-
-class DateRangePickerErrors {
-    static throwNoStartInputError() {
-        throw new Error('The input element with the wlcmDateRangePickerInputStart directive is missing');
-    }
-    static throwNoEndInputError() {
-        throw new Error('The input element with the wlcmDateRangePickerInputEnd directive is missing');
-    }
-}
-
-class WlcmDataRangeCalendar {
-    constructor(location, element, calendar, dateAdapter) {
-        this.element = element;
-        this.calendar = calendar;
-        this.dateAdapter = dateAdapter;
-        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');
-            }
-        });
-    }
-    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));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDataRangeCalendar, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.5", 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: "17.3.5", ngImport: i0, type: WlcmDataRangeCalendar, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: undefined }, { type: i0.ElementRef }, { type: i2.MatCalendar }, { type: i1$1.DateAdapter }] });
-
-class WlcmCalendarHeaderComponent {
-    constructor(dateAdapter, rangeCalendar, dateFormats, calendar) {
-        this.dateAdapter = dateAdapter;
-        this.rangeCalendar = rangeCalendar;
-        this.dateFormats = dateFormats;
-        this.calendar = calendar;
-        this.WlcmIconName = WlcmIconName;
-    }
-    prev() {
-        if (this.rangeCalendar) {
-            if (this.calendar.currentView !== 'month') {
-                return this.rangeCalendar.prevYear();
-            }
-            return this.rangeCalendar.prevMonth();
-        }
-    }
-    next() {
-        if (this.rangeCalendar) {
-            if (this.calendar.currentView !== 'month') {
-                return this.rangeCalendar.nextYear();
-            }
-            return this.rangeCalendar.nextMonth();
-        }
-    }
-    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: "17.3.5", ngImport: i0, type: WlcmCalendarHeaderComponent, deps: [{ token: i1$1.DateAdapter }, { token: WlcmDataRangeCalendar, optional: true }, { token: MAT_DATE_FORMATS, optional: true }, { token: forwardRef(() => MatCalendar) }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: WlcmCalendarHeaderComponent, isStandalone: true, selector: "wlcm-calendar-header", ngImport: i0, template: "<div class=\"wlcm-calendar-header\">\n  <div class=\"wlcm-calendar-header-button-container\">\n    @if(((!rangeCalendar || rangeCalendar.location === 'left') ||\n    calendar.currentView !== 'month') && !rangeCalendar.disabled()) {\n    <button\n      class=\"wlcm-calendar-header-button wlcm-calendar-header-button-left\"\n      (click)=\"prev()\"\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(((!rangeCalendar || rangeCalendar.location === 'right') ||\n    calendar.currentView !== 'month') && !rangeCalendar.disabled()) {\n    <button\n      class=\"wlcm-calendar-header-button wlcm-calendar-header-button-right\"\n      (click)=\"next()\"\n    >\n      <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n    </button>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: WlcmIconDirective, selector: "[wlcmIcon]", inputs: ["wlcmIcon"], outputs: ["wlcmIconClicked"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmCalendarHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wlcm-calendar-header', standalone: true, imports: [CommonModule, WlcmIconDirective], template: "<div class=\"wlcm-calendar-header\">\n  <div class=\"wlcm-calendar-header-button-container\">\n    @if(((!rangeCalendar || rangeCalendar.location === 'left') ||\n    calendar.currentView !== 'month') && !rangeCalendar.disabled()) {\n    <button\n      class=\"wlcm-calendar-header-button wlcm-calendar-header-button-left\"\n      (click)=\"prev()\"\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(((!rangeCalendar || rangeCalendar.location === 'right') ||\n    calendar.currentView !== 'month') && !rangeCalendar.disabled()) {\n    <button\n      class=\"wlcm-calendar-header-button wlcm-calendar-header-button-right\"\n      (click)=\"next()\"\n    >\n      <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n    </button>\n    }\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.DateAdapter }, { 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)]
-                }] }] });
-
-let WlcmLeftCalendarDirective = class WlcmLeftCalendarDirective extends WlcmDataRangeCalendar {
-    constructor(element, dateAdapter, calendar) {
-        super('left', element, calendar, dateAdapter);
-        this.element = element;
-        this.dateAdapter = dateAdapter;
-        this.calendar = calendar;
-        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: "17.3.5", ngImport: i0, type: WlcmLeftCalendarDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.DateAdapter }, { token: forwardRef(() => MatCalendar) }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", 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])
-], WlcmLeftCalendarDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmLeftCalendarDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[wlcmLeftCalendar]',
-                    standalone: true,
-                    providers: [{ provide: WlcmDataRangeCalendar, useExisting: forwardRef(() => WlcmLeftCalendarDirective) }],
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: i2.MatCalendar, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => MatCalendar)]
-                }] }] });
-
-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],
-};
-
-let WlcmRightCalendarDirective = class WlcmRightCalendarDirective extends WlcmDataRangeCalendar {
-    constructor(element, dateAdapter, calendar) {
-        super('right', element, calendar, dateAdapter);
-        this.element = element;
-        this.dateAdapter = dateAdapter;
-        this.calendar = calendar;
-        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: "17.3.5", ngImport: i0, type: WlcmRightCalendarDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.DateAdapter }, { token: forwardRef(() => MatCalendar) }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", 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])
-], WlcmRightCalendarDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmRightCalendarDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[wlcmRightCalendar]',
-                    standalone: true,
-                    providers: [{ provide: WlcmDataRangeCalendar, useExisting: forwardRef(() => WlcmRightCalendarDirective) }],
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: i2.MatCalendar, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => MatCalendar)]
-                }] }] });
-
-class WlcmDateRangePickerBottomPanelComponent {
-    constructor(picker) {
-        this.picker = picker;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerBottomPanelComponent, deps: [{ token: WlcmDateRangePickerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: WlcmDateRangePickerBottomPanelComponent, isStandalone: true, selector: "wlcm-date-range-picker-bottom-panel", ngImport: i0, template: "<div class=\"wlcm-date-range-picker-bottom-panel\">\n  <wlcm-button 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: "17.3.5", ngImport: i0, type: WlcmDateRangePickerBottomPanelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wlcm-date-range-picker-bottom-panel', standalone: true, imports: [CommonModule, WlcmButtonModule], template: "<div class=\"wlcm-date-range-picker-bottom-panel\">\n  <wlcm-button type=\"paddingless\" (clicked)=\"picker.reset()\">Reset</wlcm-button>\n\n  <wlcm-button (clicked)=\"picker.apply()\" [isDisabled]=\"!picker.isComplete()\">\n    Apply\n  </wlcm-button>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: WlcmDateRangePickerComponent }] });
-
-let WlcmDateRangePickerComponent = class WlcmDateRangePickerComponent {
-    constructor(rangeSelectionStrategy, localSelectionModel, triggerSelectionModel, dateAdapter, trigger) {
-        this.rangeSelectionStrategy = rangeSelectionStrategy;
-        this.localSelectionModel = localSelectionModel;
-        this.triggerSelectionModel = triggerSelectionModel;
-        this.dateAdapter = dateAdapter;
-        this.trigger = trigger;
-        this.WlcmCalendarHeaderComponent = WlcmCalendarHeaderComponent;
-        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);
-        }
-        effect(() => {
-            if (!this._isViewInitialized)
-                return;
-            this.leftCalendar.activeDate = this.startDate();
-            this.rightCalendar.activeDate = 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');
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePickerInputEndDirective), multi: true },
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateRangePickerInputEndDirective), multi: true },
+        ], usesInheritance: true, ngImport: i0 }); }
+};
+DateRangePickerInputEndDirective = __decorate([
+    UntilDestroy(),
+    __metadata("design:paramtypes", [ElementRef,
+        DateAdapter, Object, MatDateSelectionModel])
+], DateRangePickerInputEndDirective);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: DateRangePickerInputEndDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wlcmDateRangePickerInputEnd]',
+                    host: { class: 'wlcm-date-range-picker-input-field' },
+                    standalone: true,
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePickerInputEndDirective), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateRangePickerInputEndDirective), multi: true },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DateAdapter }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_DATE_FORMATS]
+                }] }, { type: i2$1.MatDateSelectionModel, decorators: [{
+                    type: Inject,
+                    args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
+                }] }] });
+
+let DateRangePickerInputStartDirective = class DateRangePickerInputStartDirective extends WlcmDateRangePickerInputBase {
+    constructor(element, dateAdapter, dateFormats, selectionModel) {
+        super(element, dateAdapter, dateFormats);
+        this.element = element;
+        this.dateAdapter = dateAdapter;
+        this.dateFormats = dateFormats;
+        this.selectionModel = selectionModel;
+        this.updateSelection = () => {
+            let start = this.parseCurrentValue();
+            this.selectionModel.updateSelection(new DateRange(start, this.selectionModel.selection.end), this);
+        };
+        this.handleSelectionChange();
     }
-    handleSelectionChanged() {
-        this.localSelectionModel.selectionChanged
-            .pipe(untilDestroyed(this))
-            .subscribe(() => this._isComplete.set(this.localSelectionModel.isComplete()));
+    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)) {
+                return { [WlcmDateRangeValidation.StartExceedsEnd]: true, ...(defaultErrors ?? {}) };
+            }
+        }
+        return defaultErrors;
     }
-    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();
-            });
+    handleSelectionChange() {
+        this.selectionModel.selectionChanged.pipe(untilDestroyed(this)).subscribe(({ selection }) => {
+            const validDate = this.dateAdapter.getValidDateOrNull(selection.start);
+            this._changed?.(validDate);
+            this.updateInputValue(validDate);
+            this._validatorChanged?.();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerComponent, deps: [{ token: MAT_DATE_RANGE_SELECTION_STRATEGY }, { token: WLCM_DATE_RANGE_SELECTION_MODEL }, { token: WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL }, { token: i1$1.DateAdapter }, { token: WlcmDateRangePickerTrigger }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", 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      wlcmLeftCalendar\n      [selected]=\"selected\"\n      [disabled]=\"rightCalendarYearViewActivated()\"\n      [headerComponent]=\"WlcmCalendarHeaderComponent\"\n      (_userSelection)=\"calendarSelection($event)\"\n      (_userDragDrop)=\"calendarDragDrop($event)\"\n      (dateChange)=\"startDate.set($event)\"\n    ></mat-calendar>\n\n    <mat-calendar\n      wlcmRightCalendar\n      [selected]=\"selected\"\n      [disabled]=\"leftCalendarYearViewActivated()\"\n      [headerComponent]=\"WlcmCalendarHeaderComponent\"\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.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: WlcmLeftCalendarDirective, selector: "[wlcmLeftCalendar]" }, { kind: "directive", type: WlcmRightCalendarDirective, selector: "[wlcmRightCalendar]" }, { kind: "component", type: WlcmDateRangePickerBottomPanelComponent, selector: "wlcm-date-range-picker-bottom-panel" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: DateRangePickerInputStartDirective, deps: [{ token: i0.ElementRef }, { token: i1.DateAdapter }, { token: MAT_DATE_FORMATS, optional: true }, { token: WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: DateRangePickerInputStartDirective, isStandalone: true, selector: "[wlcmDateRangePickerInputStart]", host: { classAttribute: "wlcm-date-range-picker-input-field" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePickerInputStartDirective), multi: true },
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateRangePickerInputStartDirective), multi: true },
+        ], usesInheritance: true, ngImport: i0 }); }
 };
-WlcmDateRangePickerComponent = __decorate([
+DateRangePickerInputStartDirective = __decorate([
     UntilDestroy(),
-    __metadata("design:paramtypes", [Object, MatDateSelectionModel,
-        MatDateSelectionModel,
-        DateAdapter,
-        WlcmDateRangePickerTrigger])
-], WlcmDateRangePickerComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wlcm-date-range-picker', standalone: true, imports: [
-                        CommonModule,
-                        MatDatepickerModule,
-                        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      wlcmLeftCalendar\n      [selected]=\"selected\"\n      [disabled]=\"rightCalendarYearViewActivated()\"\n      [headerComponent]=\"WlcmCalendarHeaderComponent\"\n      (_userSelection)=\"calendarSelection($event)\"\n      (_userDragDrop)=\"calendarDragDrop($event)\"\n      (dateChange)=\"startDate.set($event)\"\n    ></mat-calendar>\n\n    <mat-calendar\n      wlcmRightCalendar\n      [selected]=\"selected\"\n      [disabled]=\"leftCalendarYearViewActivated()\"\n      [headerComponent]=\"WlcmCalendarHeaderComponent\"\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: Inject,
-                    args: [MAT_DATE_RANGE_SELECTION_STRATEGY]
-                }] }, { type: i2.MatDateSelectionModel, decorators: [{
+    __metadata("design:paramtypes", [ElementRef,
+        DateAdapter, Object, MatDateSelectionModel])
+], DateRangePickerInputStartDirective);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: DateRangePickerInputStartDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wlcmDateRangePickerInputStart]',
+                    host: { class: 'wlcm-date-range-picker-input-field' },
+                    standalone: true,
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePickerInputStartDirective), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateRangePickerInputStartDirective), multi: true },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DateAdapter }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
                     type: Inject,
-                    args: [WLCM_DATE_RANGE_SELECTION_MODEL]
-                }] }, { type: i2.MatDateSelectionModel, decorators: [{
+                    args: [MAT_DATE_FORMATS]
+                }] }, { type: i2$1.MatDateSelectionModel, decorators: [{
                     type: Inject,
                     args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
-                }] }, { type: i1$1.DateAdapter }, { type: WlcmDateRangePickerTrigger }], 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 DateRangePickerErrors {
+    static throwNoStartInputError() {
+        throw new Error('The input element with the wlcmDateRangePickerInputStart directive is missing');
+    }
+    static throwNoEndInputError() {
+        throw new Error('The input element with the wlcmDateRangePickerInputEnd directive is missing');
+    }
+}
 
-class WlcmDateRangePickerInputComponent extends WlcmDateRangePickerTrigger {
+class WlcmDateRangePickerInputComponent extends WlcmDatepickerTrigger {
     constructor(overlay, viewContainerRef, selectionModel, formField, controlContainer) {
         super(overlay, viewContainerRef, selectionModel);
         this.overlay = overlay;
@@ -692,7 +834,7 @@ class WlcmDateRangePickerInputComponent extends WlcmDateRangePickerTrigger {
         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: "17.3.5", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", 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: "17.3.5", type: WlcmDateRangePickerInputComponent, isStandalone: true, selector: "wlcm-date-range-picker-input", host: { classAttribute: "wlcm-date-range-picker-input" }, providers: [
             WLCM_FORM_CONTROL_PROVIDER,
             WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL_PROVIDER,
@@ -703,7 +845,7 @@ class WlcmDateRangePickerInputComponent extends WlcmDateRangePickerTrigger {
                     return { bind: () => input };
                 },
             },
-            { provide: WlcmDateRangePickerTrigger, useExisting: forwardRef(() => WlcmDateRangePickerInputComponent) },
+            { 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: "17.3.5", ngImport: i0, type: WlcmDateRangePickerInputComponent, decorators: [{
@@ -718,9 +860,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                                 return { bind: () => input };
                             },
                         },
-                        { provide: WlcmDateRangePickerTrigger, useExisting: forwardRef(() => WlcmDateRangePickerInputComponent) },
+                        { provide: WlcmDatepickerTrigger, useExisting: forwardRef(() => WlcmDateRangePickerInputComponent) },
                     ], template: "<div class=\"wlcm-date-range-picker-inputs-container\">\n  <div class=\"wlcm-date-range-picker-input-field-wrapper\">\n    <ng-content select=\"[wlcmDateRangePickerInputStart]\"></ng-content>\n  </div>\n\n  <div class=\"wlcm-date-range-picker-input-dash\"></div>\n\n  <div class=\"wlcm-date-range-picker-input-field-wrapper\">\n    <ng-content select=\"[wlcmDateRangePickerInputEnd]\"></ng-content>\n  </div>\n</div>\n", styles: [".wlcm-date-range-picker-inputs-container{display:flex;align-items:center}\n"] }]
-        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i2.MatDateSelectionModel, decorators: [{
+        }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i2$1.MatDateSelectionModel, decorators: [{
                     type: Inject,
                     args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
                 }] }, { type: undefined, decorators: [{
@@ -741,82 +883,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 args: [DateRangePickerInputEndDirective]
             }] } });
 
-function range(length, valueFunction) {
-    const valuesArray = Array(length);
-    for (let i = 0; i < length; i++) {
-        valuesArray[i] = valueFunction(i);
+let WlcmDatepickerInputDirective = class WlcmDatepickerInputDirective extends WlcmDatepickerInputBase {
+    constructor(element, dateAdapter, dateFormats, selectionModel, trigger) {
+        super(element, dateAdapter, dateFormats);
+        this.element = element;
+        this.dateAdapter = dateAdapter;
+        this.dateFormats = dateFormats;
+        this.selectionModel = selectionModel;
+        this.trigger = trigger;
+        this.handleSelectionChange();
+        this.handleClosePanel();
     }
-    return valuesArray;
-}
-class WlcmDateRangeAdapter extends DateFnsAdapter {
-    getDayOfWeekNames(style) {
-        const formatString = style === 'long' ? 'EEEE' : 'EEEEEE';
-        return range(7, (i) => format(new Date(2017, 0, i + 1), formatString));
+    updateSelection() {
+        let date = this.parseCurrentValue();
+        this.selectionModel.updateSelection(date, this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangeAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangeAdapter }); }
+    handleClosePanel() {
+        this.trigger.closed.pipe(untilDestroyed(this)).subscribe(() => this._touched?.());
+    }
+    handleSelectionChange() {
+        this.selectionModel.selectionChanged.pipe(untilDestroyed(this)).subscribe(({ selection }) => {
+            this.updateInputValue(selection);
+            this._changed?.(selection);
+            this._touched?.();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", 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: "17.3.5", type: WlcmDatepickerInputDirective, isStandalone: true, selector: "[wlcmDatepickerInput]", host: { classAttribute: "wlcm-form-field-input" }, providers: [
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmDatepickerInputDirective), multi: true },
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmDatepickerInputDirective), multi: true },
+        ], exportAs: ["wlcmDatepickerInput"], usesInheritance: true, ngImport: i0 }); }
+};
+WlcmDatepickerInputDirective = __decorate([
+    UntilDestroy(),
+    __metadata("design:paramtypes", [ElementRef,
+        DateAdapter, Object, MatDateSelectionModel,
+        WlcmDatepickerTrigger])
+], WlcmDatepickerInputDirective);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDatepickerInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wlcmDatepickerInput]',
+                    exportAs: 'wlcmDatepickerInput',
+                    host: { class: 'wlcm-form-field-input' },
+                    standalone: true,
+                    providers: [
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmDatepickerInputDirective), multi: true },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmDatepickerInputDirective), multi: true },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DateAdapter }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DATE_FORMATS]
+                }] }, { type: i2$1.MatDateSelectionModel }, { type: WlcmDatepickerTrigger }] });
+
+class WlcmDatepickerPanelComponent {
+    constructor(selectionModel, trigger) {
+        this.selectionModel = selectionModel;
+        this.trigger = trigger;
+        this.headerComponent = WlcmCalendarHeaderComponent;
+    }
+    select(date) {
+        this.selectionModel.updateSelection(date, this);
+        this.trigger.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDatepickerPanelComponent, deps: [{ token: i2$1.MatDateSelectionModel }, { token: WlcmDatepickerTrigger }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: WlcmDatepickerPanelComponent, isStandalone: true, selector: "wlcm-datepicker-panel", host: { classAttribute: "wlcm-datepicker-panel" }, ngImport: i0, template: "<mat-calendar\n  wlcmCalendar\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]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangeAdapter, decorators: [{
-            type: Injectable
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDatepickerPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wlcm-datepicker-panel', host: { class: 'wlcm-datepicker-panel' }, standalone: true, imports: [CommonModule, MatDatepickerModule, WlcmCalendarDirective], template: "<mat-calendar\n  wlcmCalendar\n  [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 }] });
 
-const DEFAULT_DATE_FORMATS = {
-    parse: {
-        dateInput: 'MMM/dd/yyyy',
-    },
-    display: {
-        dateInput: 'MMM/dd/yyyy',
-        monthYearLabel: 'MMMM yyyy',
-        dateA11yLabel: 'MMM/dd/yyyy',
-        monthYearA11yLabel: 'MMM yyyy',
-    },
-};
-const directives = [DateRangePickerInputStartDirective, DateRangePickerInputEndDirective];
-class WlcmDateRangePickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerModule, imports: [CommonModule, WlcmDateRangePickerInputComponent, DateRangePickerInputStartDirective, DateRangePickerInputEndDirective], exports: [WlcmDateRangePickerInputComponent, DateRangePickerInputStartDirective, DateRangePickerInputEndDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerModule, providers: [
-            { provide: MAT_DATE_LOCALE, useValue: enUS },
-            {
-                provide: DateAdapter,
-                useClass: WlcmDateRangeAdapter,
-                deps: [MAT_DATE_LOCALE],
-            },
+class WlcmDatepickerInputContainerComponent extends WlcmDatepickerTrigger {
+    constructor(overlay, viewContainerRef, selectionModel, formField) {
+        super(overlay, viewContainerRef, selectionModel);
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.selectionModel = selectionModel;
+        this.formField = formField;
+        this._focusStream$ = new BehaviorSubject(EMPTY);
+        this._blurStream$ = new BehaviorSubject(EMPTY);
+        this.focus$ = this._focusStream$.pipe(switchMap((stream) => stream));
+        this.blur$ = this._blurStream$.pipe(switchMap((stream) => stream));
+        this.inputRef = contentChild(WlcmDatepickerInputDirective, {
+            read: ElementRef,
+        });
+        this.componentType = WlcmDatepickerPanelComponent;
+        this.focus = () => this.inputElement?.focus();
+        this.isFocused = () => {
+            return this.inputElement === document.activeElement || this.isOpen;
+        };
+    }
+    ngAfterContentInit() {
+        this.attachFocusBlurListeners();
+    }
+    ngAfterViewInit() {
+        this.connectedTo = this.formField.inputContainer;
+    }
+    get inputElement() {
+        return this.inputRef()?.nativeElement;
+    }
+    attachFocusBlurListeners() {
+        const voidFn = () => { };
+        const inputFocus = fromEvent(this.inputElement, 'focus');
+        const inputBlur = fromEvent(this.inputElement, 'blur');
+        const focusObservables = [inputFocus, this.opened];
+        const blurObservables = [inputBlur, this.closed];
+        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: "17.3.5", 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: "17.3.5", type: WlcmDatepickerInputContainerComponent, isStandalone: true, selector: "wlcm-datepicker-input-container", host: { classAttribute: "wlcm-datepicker-input-container" }, providers: [
             {
-                provide: MAT_DATE_FORMATS,
+                provide: WLCM_INPUT_BINDER,
                 useFactory: () => {
-                    const externalFormats = inject(MAT_DATE_FORMATS, { skipSelf: true, optional: true });
-                    if (externalFormats)
-                        return externalFormats;
-                    return DEFAULT_DATE_FORMATS;
+                    const input = inject(WlcmDatepickerInputContainerComponent, { self: true });
+                    return { bind: () => input };
                 },
             },
-        ], imports: [CommonModule, WlcmDateRangePickerInputComponent] }); }
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmDatepickerInputContainerComponent), multi: true },
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmDatepickerInputContainerComponent), multi: true },
+            { provide: WlcmDatepickerTrigger, useExisting: forwardRef(() => WlcmDatepickerInputContainerComponent) },
+            { provide: MatDateSelectionModel, useClass: MatSingleDateSelectionModel },
+        ], queries: [{ propertyName: "inputRef", first: true, predicate: WlcmDatepickerInputDirective, descendants: true, read: ElementRef, isSignal: true }], exportAs: ["wlcmDatepicker"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[wlcmDatepickerInput]\"></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, WlcmDateRangePickerInputComponent, ...directives],
-                    exports: [WlcmDateRangePickerInputComponent, ...directives],
-                    providers: [
-                        { provide: MAT_DATE_LOCALE, useValue: enUS },
-                        {
-                            provide: DateAdapter,
-                            useClass: WlcmDateRangeAdapter,
-                            deps: [MAT_DATE_LOCALE],
-                        },
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDatepickerInputContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wlcm-datepicker-input-container', host: { class: 'wlcm-datepicker-input-container' }, exportAs: 'wlcmDatepicker', standalone: true, imports: [CommonModule], providers: [
                         {
-                            provide: MAT_DATE_FORMATS,
+                            provide: WLCM_INPUT_BINDER,
                             useFactory: () => {
-                                const externalFormats = inject(MAT_DATE_FORMATS, { skipSelf: true, optional: true });
-                                if (externalFormats)
-                                    return externalFormats;
-                                return DEFAULT_DATE_FORMATS;
+                                const input = inject(WlcmDatepickerInputContainerComponent, { self: true });
+                                return { bind: () => input };
                             },
                         },
-                    ],
-                }]
-        }] });
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmDatepickerInputContainerComponent), multi: true },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmDatepickerInputContainerComponent), multi: true },
+                        { 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: [{
+                    type: Host
+                }, {
+                    type: Inject,
+                    args: [WLCM_FORM_FIELD]
+                }] }] });
 
 function WlcmDateRangeInputValidator() {
     return (control) => {
@@ -826,16 +1038,57 @@ function WlcmDateRangeInputValidator() {
             errors = { ...errors, ...childControl.errors };
         }
         errors = Object.keys(errors).length > 0 ? errors : null;
-        if (errors instanceof Object && errors[WlcmDateRangeValidation.format] && errors['required']) {
+        if (errors instanceof Object && errors[WlcmDateValidation.Format] && errors['required']) {
             errors['required'] = false;
         }
         return errors;
     };
 }
 
+const WLCM_DEFAULT_DATE_FORMATS = {
+    parse: {
+        dateInput: 'MMM/dd/yyyy',
+    },
+    display: {
+        dateInput: 'MMM/dd/yyyy',
+        monthYearLabel: 'MMMM yyyy',
+        dateA11yLabel: 'MMM/dd/yyyy',
+        monthYearA11yLabel: 'MMM yyyy',
+    },
+};
+const WLCM_DEFAULT_DATEPICKER_PROVIDERS = [
+    { provide: MAT_DATE_LOCALE, useValue: enUS },
+    { provide: MAT_DATE_FORMATS, useValue: WLCM_DEFAULT_DATE_FORMATS },
+    { provide: DateAdapter, useClass: WlcmDateAdapter, deps: [MAT_DATE_LOCALE] },
+];
+
+const publicComponents = [WlcmDatepickerInputContainerComponent, WlcmDateRangePickerInputComponent];
+const publicDirectives = [
+    WlcmDatepickerInputDirective,
+    DateRangePickerInputStartDirective,
+    DateRangePickerInputEndDirective,
+];
+class WlcmDatepickerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.5", ngImport: i0, type: WlcmDatepickerModule, imports: [CommonModule, WlcmDatepickerInputContainerComponent, WlcmDateRangePickerInputComponent, WlcmDatepickerInputDirective,
+            DateRangePickerInputStartDirective,
+            DateRangePickerInputEndDirective], exports: [WlcmDatepickerInputContainerComponent, WlcmDateRangePickerInputComponent, WlcmDatepickerInputDirective,
+            DateRangePickerInputStartDirective,
+            DateRangePickerInputEndDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDatepickerModule, providers: [...WLCM_DEFAULT_DATEPICKER_PROVIDERS], imports: [CommonModule, publicComponents] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDatepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ...publicComponents, ...publicDirectives],
+                    exports: [...publicComponents, ...publicDirectives],
+                    providers: [...WLCM_DEFAULT_DATEPICKER_PROVIDERS],
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DateRangePickerInputEndDirective, DateRangePickerInputStartDirective, WlcmDateRangeInputValidator, WlcmDateRangePickerInputComponent, WlcmDateRangePickerModule, WlcmDateRangeValidation };
-//# sourceMappingURL=wlcm-angular-date-range-picker.mjs.map
+export { DateRangePickerInputEndDirective, DateRangePickerInputStartDirective, WlcmDateRangeInputValidator, WlcmDateRangePickerInputComponent, WlcmDateRangeValidation, WlcmDateValidation, WlcmDatepickerInputContainerComponent, WlcmDatepickerInputDirective, WlcmDatepickerModule };
+//# sourceMappingURL=wlcm-angular-datepicker.mjs.map