@wlcm/angular 1.1.2 → 17.1.1

package/date-range-picker/fesm2022/wlcm-angular-date-range-picker.mjs

@@ -0,0 +1,822 @@
+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, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { __decorate, __metadata } from 'tslib';
+import * as i1 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 { 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 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 * as moment from 'moment';
+import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
+
+let WlcmDateRangePickerTrigger = class WlcmDateRangePickerTrigger {
+    constructor(overlay, viewContainerRef, selectionModel) {
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.selectionModel = selectionModel;
+        this.overlayRef = this.overlay.create(this.createOverlayConfig());
+        this.handleBackdropClick();
+    }
+    open() {
+        const injector = Injector.create({
+            providers: [{ provide: OverlayRef, useValue: this.overlayRef }],
+            parent: this.viewContainerRef.injector,
+        });
+        const portal = new ComponentPortal(this.componentType, this.viewContainerRef, injector);
+        this.updatePositionStrategy();
+        this.componentRef = this.overlayRef.attach(portal);
+    }
+    close() {
+        this.overlayRef.detach();
+    }
+    get isOpen() {
+        return this.overlayRef.hasAttached();
+    }
+    get opened() {
+        return merge(this.overlayRef?.attachments() || EMPTY).pipe(filter(() => this.overlayRef.hasAttached()));
+    }
+    get closed() {
+        return (this.overlayRef?.detachments() || EMPTY).pipe(filter(() => !this.overlayRef.hasAttached()));
+    }
+    get overlayOrigin() {
+        return new CdkOverlayOrigin(this.connectedTo);
+    }
+    handleBackdropClick() {
+        this.overlayRef
+            .backdropClick()
+            .pipe(untilDestroyed(this))
+            .subscribe(() => this.close());
+    }
+    updatePositionStrategy() {
+        const origin = this.overlayOrigin.elementRef;
+        const strategy = this.overlay.position().flexibleConnectedTo(origin);
+        strategy.withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+        ]);
+        strategy.withLockedPosition(false);
+        strategy.withDefaultOffsetY(4);
+        this.overlayRef.updatePositionStrategy(strategy);
+    }
+    createOverlayConfig() {
+        return new OverlayConfig({
+            hasBackdrop: true,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            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 }); }
+};
+WlcmDateRangePickerTrigger = __decorate([
+    UntilDestroy(),
+    __metadata("design:paramtypes", [Overlay,
+        ViewContainerRef,
+        MatDateSelectionModel])
+], WlcmDateRangePickerTrigger);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerTrigger, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i2.MatDateSelectionModel }] });
+
+var WlcmDateRangeValidation;
+(function (WlcmDateRangeValidation) {
+    WlcmDateRangeValidation["format"] = "wlcmDateRangeFormat";
+})(WlcmDateRangeValidation || (WlcmDateRangeValidation = {}));
+
+class DateRangePickerInputBase {
+    constructor(element, dateAdapter, dateFormats) {
+        this.element = element;
+        this.dateAdapter = dateAdapter;
+        this.dateFormats = dateFormats;
+        this.handleBlur = () => { };
+        this.handleInput = () => {
+            this.changeInputSize();
+            this._validatorChanged?.();
+        };
+        this._inputMirror = this.createInputMirror();
+    }
+    ngAfterViewInit() {
+        this.inputElement.parentElement?.appendChild(this._inputMirror);
+        this.copyInputElementStyles(this._inputMirror);
+    }
+    writeValue(value) {
+        if (!value)
+            return;
+        this.updateInputValue(value);
+    }
+    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 };
+        }
+        return null;
+    }
+    registerOnChange(callback) {
+        this._changed = callback;
+    }
+    registerOnTouched(callback) {
+        this._touched = callback;
+    }
+    registerOnValidatorChange(callback) {
+        this._validatorChanged = callback;
+    }
+    parseCurrentValue() {
+        const date = this.dateAdapter.parse(this.currentValue, this.dateFormats.parse.dateInput);
+        return this.dateAdapter.getValidDateOrNull(date);
+    }
+    updateInputValue(value) {
+        let newValue = '';
+        if (value) {
+            newValue = this.dateAdapter.format(value, this.dateFormats.display.dateInput);
+        }
+        this.inputElement.value = newValue;
+        this.changeInputSize();
+    }
+    changeInputSize() {
+        const value = this.currentValue || this.inputElement.placeholder;
+        this._inputMirror.innerHTML = value;
+        this.inputElement.style.width = `${this._inputMirror.offsetWidth + 2}px`;
+    }
+    createInputMirror() {
+        const inputMirror = document.createElement('div');
+        inputMirror.classList.add('wlcm-date-range-picker-input-field-mirror');
+        return inputMirror;
+    }
+    copyInputElementStyles(target) {
+        const inputElementStyles = window.getComputedStyle(this.inputElement);
+        target.style.fontSize = inputElementStyles.fontSize;
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: DateRangePickerInputBase, 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],
+};
+
+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]
+                }] }] });
+
+let DateRangePickerInputEndDirective = class DateRangePickerInputEndDirective 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 end = this.parseCurrentValue();
+            this.selectionModel.updateSelection(new DateRange(this.selectionModel.selection.start, end), this);
+        };
+        this.handleSelectionChange();
+    }
+    handleSelectionChange() {
+        this.selectionModel.selectionChanged.pipe(untilDestroyed(this)).subscribe(({ selection }) => {
+            const validDate = this.dateAdapter.getValidDateOrNull(selection.end);
+            this._changed?.(validDate);
+            this.updateInputValue(validDate);
+            this._validatorChanged?.();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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.ɵ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(moment());
+        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');
+    }
+    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: 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" }] }); }
+};
+WlcmDateRangePickerComponent = __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: [{
+                    type: Inject,
+                    args: [WLCM_DATE_RANGE_SELECTION_MODEL]
+                }] }, { type: i2.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 WlcmDateRangePickerInputComponent extends WlcmDateRangePickerTrigger {
+    constructor(overlay, viewContainerRef, selectionModel, formField, controlContainer) {
+        super(overlay, viewContainerRef, selectionModel);
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.selectionModel = selectionModel;
+        this.formField = formField;
+        this.controlContainer = controlContainer;
+        this._focusStream$ = new BehaviorSubject(EMPTY);
+        this._blurStream$ = new BehaviorSubject(EMPTY);
+        this.focus$ = this._focusStream$.pipe(switchMap((stream) => stream));
+        this.blur$ = this._blurStream$.pipe(switchMap((stream) => stream));
+        this.componentType = WlcmDateRangePickerComponent;
+    }
+    ngAfterContentInit() {
+        this.checkInputs();
+        this.attachFocusBlurListeners();
+    }
+    ngAfterViewInit() {
+        this.connectedTo = this.formField.inputContainer;
+    }
+    isFocused() {
+        return (this.startInputElement === document.activeElement ||
+            this.endInputElement === document.activeElement ||
+            this.isOpen);
+    }
+    focus() {
+        if (!this.isFocused())
+            this.startInputElement.focus();
+    }
+    get control() {
+        return this.controlContainer?.control;
+    }
+    get startInputElement() {
+        return this.startInput.element.nativeElement;
+    }
+    get endInputElement() {
+        return this.endInput.element.nativeElement;
+    }
+    checkInputs() {
+        if (!this.startInput)
+            DateRangePickerErrors.throwNoStartInputError();
+        if (!this.endInput)
+            DateRangePickerErrors.throwNoEndInputError();
+    }
+    attachFocusBlurListeners() {
+        const voidFn = () => { };
+        const startInputFocus = fromEvent(this.startInputElement, 'focus');
+        const endInputFocus = fromEvent(this.endInputElement, 'focus');
+        const startInputBlur = fromEvent(this.startInputElement, 'blur');
+        const endInputBlur = fromEvent(this.endInputElement, 'blur');
+        const focusObservables = [startInputFocus, endInputFocus, this.opened];
+        const blurObservables = [startInputBlur, endInputBlur, this.closed];
+        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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: WlcmDateRangePickerInputComponent, isStandalone: true, selector: "wlcm-date-range-picker-input", providers: [
+            WLCM_FORM_CONTROL_PROVIDER,
+            WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL_PROVIDER,
+            {
+                provide: WLCM_INPUT_BINDER,
+                useFactory: () => {
+                    const input = inject(WlcmDateRangePickerInputComponent, { self: true });
+                    return { bind: () => input };
+                },
+            },
+            { provide: WlcmDateRangePickerTrigger, 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: [{
+            type: Component,
+            args: [{ selector: 'wlcm-date-range-picker-input', exportAs: 'wlcmDateRangePickerInput', standalone: true, imports: [CommonModule, WlcmFormsModule, DateRangePickerInputStartDirective, DateRangePickerInputEndDirective], providers: [
+                        WLCM_FORM_CONTROL_PROVIDER,
+                        WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL_PROVIDER,
+                        {
+                            provide: WLCM_INPUT_BINDER,
+                            useFactory: () => {
+                                const input = inject(WlcmDateRangePickerInputComponent, { self: true });
+                                return { bind: () => input };
+                            },
+                        },
+                        { provide: WlcmDateRangePickerTrigger, useExisting: forwardRef(() => WlcmDateRangePickerInputComponent) },
+                    ], template: "<div class=\"wlcm-date-range-picker-inputs-container\">\n  <div class=\"wlcm-date-range-picker-input-field-wrapper\">\n    <ng-content select=\"[wlcmDateRangePickerInputStart]\"></ng-content>\n  </div>\n\n  <div class=\"wlcm-date-range-picker-input-dash\"></div>\n\n  <div class=\"wlcm-date-range-picker-input-field-wrapper\">\n    <ng-content select=\"[wlcmDateRangePickerInputEnd]\"></ng-content>\n  </div>\n</div>\n", styles: [".wlcm-date-range-picker-inputs-container{display:flex;align-items:center}\n"] }]
+        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i2.MatDateSelectionModel, decorators: [{
+                    type: Inject,
+                    args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
+                }] }, { type: undefined, decorators: [{
+                    type: Host
+                }, {
+                    type: Inject,
+                    args: [WLCM_FORM_FIELD]
+                }] }, { type: i3.ControlContainer, decorators: [{
+                    type: Host
+                }, {
+                    type: Inject,
+                    args: [ControlContainer]
+                }] }], propDecorators: { startInput: [{
+                type: ContentChild,
+                args: [DateRangePickerInputStartDirective]
+            }], endInput: [{
+                type: ContentChild,
+                args: [DateRangePickerInputEndDirective]
+            }] } });
+
+const DEFAULT_DATE_FORMATS = {
+    parse: {
+        dateInput: 'MMM/DD/YYYY',
+    },
+    display: {
+        dateInput: 'MMM/DD/YYYY',
+        monthYearLabel: 'MMMM YYYY',
+        dateA11yLabel: 'LL',
+        monthYearA11yLabel: 'MMMM 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: DateAdapter,
+                useClass: MomentDateAdapter,
+                deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
+            },
+            {
+                provide: MAT_DATE_FORMATS,
+                useFactory: () => {
+                    const externalFormats = inject(MAT_DATE_FORMATS, { skipSelf: true, optional: true });
+                    if (externalFormats)
+                        return externalFormats;
+                    return DEFAULT_DATE_FORMATS;
+                },
+            },
+        ], imports: [CommonModule, WlcmDateRangePickerInputComponent] }); }
+}
+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: DateAdapter,
+                            useClass: MomentDateAdapter,
+                            deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
+                        },
+                        {
+                            provide: MAT_DATE_FORMATS,
+                            useFactory: () => {
+                                const externalFormats = inject(MAT_DATE_FORMATS, { skipSelf: true, optional: true });
+                                if (externalFormats)
+                                    return externalFormats;
+                                return DEFAULT_DATE_FORMATS;
+                            },
+                        },
+                    ],
+                }]
+        }] });
+
+function WlcmDateRangeInputValidator() {
+    return (control) => {
+        const formGroup = control;
+        let errors = {};
+        for (const childControl of Object.values(formGroup.controls)) {
+            errors = { ...errors, ...childControl.errors };
+        }
+        errors = Object.keys(errors).length > 0 ? errors : null;
+        if (errors instanceof Object && errors[WlcmDateRangeValidation.format] && errors['required']) {
+            errors['required'] = false;
+        }
+        return errors;
+    };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DateRangePickerInputEndDirective, DateRangePickerInputStartDirective, WlcmDateRangeInputValidator, WlcmDateRangePickerInputComponent, WlcmDateRangePickerModule, WlcmDateRangeValidation };
+//# sourceMappingURL=wlcm-angular-date-range-picker.mjs.map