@wlcm/angular 17.5.13 → 17.5.15

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

@@ -1,5 +1,5 @@
 import * as i0 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 { Component, output, input, effect, Directive, forwardRef, Optional, Inject, Injectable, InjectionToken, ElementRef, Injector, ViewContainerRef, signal, computed, ViewChild, HostListener, inject, Host, ContentChild, viewChild, contentChild, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/material/datepicker';
 import { yearsPerPage, MatCalendar, MatRangeDateSelectionModel, MatDateSelectionModel, MAT_DATE_RANGE_SELECTION_STRATEGY, DefaultMatCalendarRangeStrategy, MatMonthView, MatDatepickerModule, DateRange, MatSingleDateSelectionModel } from '@angular/material/datepicker';
@@ -12,14 +12,14 @@ import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import * as i2 from '@wlcm/angular/button';
 import { WlcmButtonModule } from '@wlcm/angular/button';
 import * as i1 from '@angular/material/core';
-import { MAT_DATE_FORMATS, DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
+import { MAT_DATE_FORMATS, MAT_DATE_LOCALE, DateAdapter } from '@angular/material/core';
+import { isBefore, startOfDay, isAfter, format, endOfMonth, add, startOfMonth, parse, isValid } from 'date-fns';
 import { WlcmIconName, WlcmIconDirective } from '@wlcm/angular/core';
+import { DateFnsAdapter } from '@angular/material-date-fns-adapter';
+import { enUS } from 'date-fns/locale';
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, ControlContainer } from '@angular/forms';
-import { format, parse, isValid, isAfter } from 'date-fns';
-import { DateFnsAdapter } from '@angular/material-date-fns-adapter';
-import { enUS } from 'date-fns/locale';
 
 class WlcmDateRangePickerBottomPanelComponent {
     constructor(picker) {
@@ -34,10 +34,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
         }], ctorParameters: () => [{ type: WlcmDateRangePickerComponent }] });
 
 class WlcmDataRangeCalendar {
-    constructor(location, element, calendar, dateAdapter) {
+    constructor(location, element, calendar, dateAdapter, datepickerConfig) {
         this.element = element;
         this.calendar = calendar;
         this.dateAdapter = dateAdapter;
+        this.datepickerConfig = datepickerConfig;
         this.dateChange = output();
         this.viewChange = output();
         this.disabled = input(false);
@@ -50,6 +51,13 @@ class WlcmDataRangeCalendar {
                 this.element.nativeElement.classList.remove('wlcm-calendar-disabled');
             }
         });
+        this.handleConfigValues();
+    }
+    get minDate() {
+        return this.datepickerConfig.minDate?.();
+    }
+    get maxDate() {
+        return this.datepickerConfig.maxDate?.();
     }
     prevMonth() {
         this.dateChange.emit(this.dateAdapter.addCalendarMonths(this.calendar.activeDate, -1));
@@ -63,12 +71,21 @@ class WlcmDataRangeCalendar {
     nextYear() {
         this.dateChange.emit(this.dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? 1 : yearsPerPage));
     }
+    handleConfigValues() {
+        this.calendar.dateFilter = (date) => {
+            if (this.minDate && isBefore(startOfDay(date), startOfDay(this.minDate)))
+                return false;
+            if (this.maxDate && isAfter(startOfDay(date), startOfDay(this.maxDate)))
+                return false;
+            return true;
+        };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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 }] });
+        }], ctorParameters: () => [{ type: undefined }, { type: i0.ElementRef }, { type: i2$1.MatCalendar }, { type: i1.DateAdapter }, { type: undefined }] });
 
 class WlcmCalendarHeaderComponent {
     constructor(dateAdapter, dateFormats, calendar) {
@@ -78,6 +95,8 @@ class WlcmCalendarHeaderComponent {
         this.WlcmIconName = WlcmIconName;
         this.next = input();
         this.previous = input();
+        this.disableLeftArrow = input(false);
+        this.disableRightArrow = input(false);
         this.displayLeftArrow = input(true);
         this.displayRightArrow = input(true);
     }
@@ -94,8 +113,8 @@ class WlcmCalendarHeaderComponent {
             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);
+                ? 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') {
@@ -108,11 +127,11 @@ class WlcmCalendarHeaderComponent {
         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"] }] }); }
+    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 }, disableLeftArrow: { classPropertyName: "disableLeftArrow", publicName: "disableLeftArrow", isSignal: true, isRequired: false, transformFunction: null }, disableRightArrow: { classPropertyName: "disableRightArrow", publicName: "disableRightArrow", isSignal: true, isRequired: false, transformFunction: null }, displayLeftArrow: { classPropertyName: "displayLeftArrow", publicName: "displayLeftArrow", isSignal: true, isRequired: false, transformFunction: null }, displayRightArrow: { classPropertyName: "displayRightArrow", publicName: "displayRightArrow", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wlcm-calendar-header" }, ngImport: i0, template: "<div class=\"wlcm-calendar-header-button-container\">\n  @if(displayLeftArrow()) {\n  <button\n    class=\"wlcm-calendar-header-button wlcm-calendar-header-button-left\"\n    [disabled]=\"disableLeftArrow()\"\n    (click)=\"previousClicked()\"\n  >\n    <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n  </button>\n  }\n</div>\n\n<button\n  class=\"wlcm-calendar-header-change-view-button\"\n  (click)=\"changeCalendarView()\"\n>\n  <div class=\"wlcm-calendar-header-period-label\">\n    {{ periodLabel }}\n  </div>\n\n  <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n</button>\n\n<div class=\"wlcm-calendar-header-button-container\">\n  @if(displayRightArrow()) {\n  <button\n    class=\"wlcm-calendar-header-button wlcm-calendar-header-button-right\"\n    [disabled]=\"disableRightArrow()\"\n    (click)=\"nextClicked()\"\n  >\n    <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n  </button>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: WlcmIconDirective, selector: "[wlcmIcon]", inputs: ["wlcmIcon", "wlcmIconStopPropagation"], outputs: ["wlcmIconClicked"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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" }]
+            args: [{ selector: 'wlcm-calendar-header', host: { class: 'wlcm-calendar-header' }, standalone: true, imports: [CommonModule, WlcmIconDirective], template: "<div class=\"wlcm-calendar-header-button-container\">\n  @if(displayLeftArrow()) {\n  <button\n    class=\"wlcm-calendar-header-button wlcm-calendar-header-button-left\"\n    [disabled]=\"disableLeftArrow()\"\n    (click)=\"previousClicked()\"\n  >\n    <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n  </button>\n  }\n</div>\n\n<button\n  class=\"wlcm-calendar-header-change-view-button\"\n  (click)=\"changeCalendarView()\"\n>\n  <div class=\"wlcm-calendar-header-period-label\">\n    {{ periodLabel }}\n  </div>\n\n  <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n</button>\n\n<div class=\"wlcm-calendar-header-button-container\">\n  @if(displayRightArrow()) {\n  <button\n    class=\"wlcm-calendar-header-button wlcm-calendar-header-button-right\"\n    [disabled]=\"disableRightArrow()\"\n    (click)=\"nextClicked()\"\n  >\n    <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n  </button>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.DateAdapter }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -123,37 +142,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                     args: [forwardRef(() => MatCalendar)]
                 }] }] });
 
+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["MinDate"] = "WlcmDateIsBeforeMinDate";
+    WlcmDateValidation["MaxDate"] = "WlcmDateIsAfterMaxDate";
+})(WlcmDateValidation || (WlcmDateValidation = {}));
+
+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 WLCM_DATEPICKER_CONFIG = new InjectionToken('WLCM_DATEPICKER_CONFIG', { providedIn: 'root', factory: () => ({}) });
+
 class WlcmDateRangeCalendarHeaderComponent {
-    constructor(rangeCalendar, dateFormats, calendar) {
+    constructor(rangeCalendar, dateFormats, calendar, datepickerConfig) {
         this.rangeCalendar = rangeCalendar;
         this.dateFormats = dateFormats;
         this.calendar = calendar;
+        this.datepickerConfig = datepickerConfig;
         this.WlcmIconName = WlcmIconName;
         this.previous = () => {
+            if (this.isPreviousDisabled)
+                return;
             if (this.calendar.currentView !== 'month') {
                 return this.rangeCalendar.prevYear();
             }
             return this.rangeCalendar.prevMonth();
         };
         this.next = () => {
+            if (this.isNextDisabled)
+                return;
             if (this.calendar.currentView !== 'month') {
                 return this.rangeCalendar.nextYear();
             }
             return this.rangeCalendar.nextMonth();
         };
     }
+    get minDate() {
+        return this.datepickerConfig.minDate?.();
+    }
+    get maxDate() {
+        return this.datepickerConfig.maxDate?.();
+    }
+    get isPreviousDisabled() {
+        if (!this.minDate)
+            return false;
+        let previousPeriod = endOfMonth(add(this.calendar.activeDate, { months: -1 }));
+        if (this.calendar.currentView !== 'month') {
+            previousPeriod = add(this.calendar.activeDate, { years: -1 });
+        }
+        return isBefore(previousPeriod, this.minDate);
+    }
+    get isNextDisabled() {
+        if (!this.maxDate)
+            return false;
+        let nextPeriod = startOfMonth(add(this.calendar.activeDate, { months: 1 }));
+        if (this.calendar.currentView !== 'month') {
+            nextPeriod = add(this.calendar.activeDate, { years: 1 });
+        }
+        return isBefore(this.maxDate, nextPeriod);
+    }
     get canDisplayLeftArrow() {
         return !this.rangeCalendar || this.rangeCalendar.location === 'left' || this.calendar.currentView !== 'month';
     }
     get canDisplayRightArrow() {
         return !this.rangeCalendar || this.rangeCalendar.location === 'right' || this.calendar.currentView !== 'month';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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"] }] }); }
+    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) }, { token: WLCM_DATEPICKER_CONFIG }], 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  [disableLeftArrow]=\"isPreviousDisabled\"\n  [disableRightArrow]=\"isNextDisabled\"\n  [displayLeftArrow]=\"canDisplayLeftArrow && !rangeCalendar.disabled()\"\n  [displayRightArrow]=\"canDisplayRightArrow && !rangeCalendar.disabled()\"\n></wlcm-calendar-header>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WlcmCalendarHeaderComponent, selector: "wlcm-calendar-header", inputs: ["next", "previous", "disableLeftArrow", "disableRightArrow", "displayLeftArrow", "displayRightArrow"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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" }]
+            args: [{ selector: 'wlcm-date-range-calendar-header', standalone: true, imports: [CommonModule, WlcmCalendarHeaderComponent, WlcmIconDirective], template: "<wlcm-calendar-header\n  [next]=\"next\"\n  [previous]=\"previous\"\n  [disableLeftArrow]=\"isPreviousDisabled\"\n  [disableRightArrow]=\"isNextDisabled\"\n  [displayLeftArrow]=\"canDisplayLeftArrow && !rangeCalendar.disabled()\"\n  [displayRightArrow]=\"canDisplayRightArrow && !rangeCalendar.disabled()\"\n></wlcm-calendar-header>\n" }]
         }], ctorParameters: () => [{ type: WlcmDataRangeCalendar, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -164,6 +255,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 }] }, { type: i2$1.MatCalendar, decorators: [{
                     type: Inject,
                     args: [forwardRef(() => MatCalendar)]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [WLCM_DATEPICKER_CONFIG]
                 }] }] });
 
 const WLCM_DATE_RANGE_PICKER_CONFIG = new InjectionToken('WLCM_DATE_RANGE_PICKER_CONFIG', { providedIn: 'root', factory: () => ({}) });
@@ -183,11 +277,12 @@ const WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL_PROVIDER = {
 };
 
 let WlcmLeftCalendarDirective = class WlcmLeftCalendarDirective extends WlcmDataRangeCalendar {
-    constructor(element, dateAdapter, calendar) {
-        super('left', element, calendar, dateAdapter);
+    constructor(element, dateAdapter, calendar, datepickerConfig) {
+        super('left', element, calendar, dateAdapter, datepickerConfig);
         this.element = element;
         this.dateAdapter = dateAdapter;
         this.calendar = calendar;
+        this.datepickerConfig = datepickerConfig;
         this.handleYearChange();
         this.handleMonthChange();
     }
@@ -197,14 +292,14 @@ let WlcmLeftCalendarDirective = class WlcmLeftCalendarDirective extends WlcmData
     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.ɵ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) }, { token: WLCM_DATEPICKER_CONFIG }], 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])
+        MatCalendar, Object])
 ], WlcmLeftCalendarDirective);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmLeftCalendarDirective, decorators: [{
             type: Directive,
@@ -216,14 +311,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DateAdapter }, { type: i2$1.MatCalendar, decorators: [{
                     type: Inject,
                     args: [forwardRef(() => MatCalendar)]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [WLCM_DATEPICKER_CONFIG]
                 }] }] });
 
 let WlcmRightCalendarDirective = class WlcmRightCalendarDirective extends WlcmDataRangeCalendar {
-    constructor(element, dateAdapter, calendar) {
-        super('right', element, calendar, dateAdapter);
+    constructor(element, dateAdapter, calendar, datepickerConfig) {
+        super('right', element, calendar, dateAdapter, datepickerConfig);
         this.element = element;
         this.dateAdapter = dateAdapter;
         this.calendar = calendar;
+        this.datepickerConfig = datepickerConfig;
         this.handleYearChange();
         this.handleMonthChange();
     }
@@ -246,14 +345,14 @@ let WlcmRightCalendarDirective = class WlcmRightCalendarDirective extends WlcmDa
     nextYear() {
         this.dateChange.emit(this.dateAdapter.addCalendarMonths(this.dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? 1 : yearsPerPage), -1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmRightCalendarDirective, deps: [{ token: i0.ElementRef }, { token: i1.DateAdapter }, { token: forwardRef(() => MatCalendar) }], target: i0.ɵɵFactoryTarget.Directive }); }
+    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) }, { token: WLCM_DATEPICKER_CONFIG }], 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])
+        MatCalendar, Object])
 ], WlcmRightCalendarDirective);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmRightCalendarDirective, decorators: [{
             type: Directive,
@@ -265,6 +364,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DateAdapter }, { type: i2$1.MatCalendar, decorators: [{
                     type: Inject,
                     args: [forwardRef(() => MatCalendar)]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [WLCM_DATEPICKER_CONFIG]
                 }] }] });
 
 let WlcmDatepickerTrigger = class WlcmDatepickerTrigger {
@@ -272,13 +374,15 @@ let WlcmDatepickerTrigger = class WlcmDatepickerTrigger {
         this.overlay = overlay;
         this.viewContainerRef = viewContainerRef;
         this.selectionModel = selectionModel;
+        this.minDate = input();
+        this.maxDate = input();
         this.overlayRef = this.overlay.create(this.createOverlayConfig());
         this.handleBackdropClick();
     }
     open() {
         const injector = Injector.create({
             providers: [{ provide: OverlayRef, useValue: this.overlayRef }],
-            parent: this.viewContainerRef.injector,
+            parent: this.datepickerInjector,
         });
         const portal = new ComponentPortal(this.componentType, this.viewContainerRef, injector);
         this.updatePositionStrategy();
@@ -296,6 +400,22 @@ let WlcmDatepickerTrigger = class WlcmDatepickerTrigger {
     get closed() {
         return (this.overlayRef?.detachments() || EMPTY).pipe(filter(() => !this.overlayRef.hasAttached()));
     }
+    get datepickerInjector() {
+        const parent = this.viewContainerRef.injector;
+        return Injector.create({
+            parent,
+            providers: [{ provide: WLCM_DATEPICKER_CONFIG, useValue: this.datepickerConfig }],
+        });
+    }
+    get datepickerConfig() {
+        const parent = this.viewContainerRef.injector;
+        const config = parent.get(WLCM_DATEPICKER_CONFIG, {}, { optional: true });
+        if (this.minDate())
+            config.minDate = this.minDate;
+        if (this.maxDate())
+            config.maxDate = this.maxDate;
+        return config;
+    }
     get overlayOrigin() {
         return new CdkOverlayOrigin(this.connectedTo);
     }
@@ -324,7 +444,7 @@ let WlcmDatepickerTrigger = class WlcmDatepickerTrigger {
         });
     }
     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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.5", type: WlcmDatepickerTrigger, inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 };
 WlcmDatepickerTrigger = __decorate([
     UntilDestroy(),
@@ -350,12 +470,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
         }] });
 
 let WlcmDateRangePickerComponent = class WlcmDateRangePickerComponent {
-    constructor(config, rangeSelectionStrategy, localSelectionModel, triggerSelectionModel, trigger, dateAdapter) {
-        this.config = config;
+    constructor(rangeConfig, rangeSelectionStrategy, localSelectionModel, triggerSelectionModel, trigger, datepickerConfig, dateAdapter) {
+        this.rangeConfig = rangeConfig;
         this.rangeSelectionStrategy = rangeSelectionStrategy;
         this.localSelectionModel = localSelectionModel;
         this.triggerSelectionModel = triggerSelectionModel;
         this.trigger = trigger;
+        this.datepickerConfig = datepickerConfig;
         this.dateAdapter = dateAdapter;
         this.headerComponent = WlcmDateRangeCalendarHeaderComponent;
         this._isViewInitialized = false;
@@ -369,14 +490,15 @@ let WlcmDateRangePickerComponent = class WlcmDateRangePickerComponent {
         if (this.triggerSelectionModel.selection.start) {
             this.startDate.set(this.triggerSelectionModel.selection.start);
         }
-        if (this.config.headerComponent) {
-            this.headerComponent = this.config.headerComponent;
+        if (this.rangeConfig.headerComponent) {
+            this.headerComponent = this.rangeConfig.headerComponent;
         }
         effect(() => {
             if (!this._isViewInitialized)
                 return;
             this.leftCalendar.activeDate = this.startDate();
             this.rightCalendar.activeDate = this.dateAdapter.addCalendarMonths(this.startDate(), 1);
+            this.rightCalendar.startAt = this.dateAdapter.addCalendarMonths(this.startDate(), 1);
         });
     }
     ngAfterViewInit() {
@@ -437,7 +559,7 @@ let WlcmDateRangePickerComponent = class WlcmDateRangePickerComponent {
             });
         });
     }
-    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.ɵ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: WLCM_DATEPICKER_CONFIG }, { 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,
@@ -450,8 +572,7 @@ WlcmDateRangePickerComponent = __decorate([
     UntilDestroy(),
     __metadata("design:paramtypes", [Object, Object, MatDateSelectionModel,
         MatDateSelectionModel,
-        WlcmDatepickerTrigger,
-        DateAdapter])
+        WlcmDatepickerTrigger, Object, DateAdapter])
 ], WlcmDateRangePickerComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerComponent, decorators: [{
             type: Component,
@@ -483,7 +604,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 }] }, { type: i2$1.MatDateSelectionModel, decorators: [{
                     type: Inject,
                     args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
-                }] }, { type: WlcmDatepickerTrigger }, { type: i1.DateAdapter }], propDecorators: { leftCalendar: [{
+                }] }, { type: WlcmDatepickerTrigger }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [WLCM_DATEPICKER_CONFIG]
+                }] }, { type: i1.DateAdapter }], propDecorators: { leftCalendar: [{
                 type: ViewChild,
                 args: [WlcmLeftCalendarDirective, { read: MatCalendar }]
             }], rightCalendar: [{
@@ -497,29 +621,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 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();
@@ -531,10 +632,11 @@ class WlcmDatepickerInputBase {
         }
         this._validatorChanged?.();
     }
-    constructor(element, dateAdapter, dateFormats) {
+    constructor(element, dateAdapter, dateFormats, trigger) {
         this.element = element;
         this.dateAdapter = dateAdapter;
         this.dateFormats = dateFormats;
+        this.trigger = trigger;
     }
     writeValue(value) {
         this.updateInputValue(value);
@@ -558,6 +660,13 @@ class WlcmDatepickerInputBase {
                 required: false,
             };
         }
+        const date = this.parseCurrentValue();
+        if (this.minDate && isBefore(startOfDay(date), startOfDay(this.minDate))) {
+            return { [WlcmDateValidation.MinDate]: { minDate: this.minDate, currentDate: date } };
+        }
+        if (this.maxDate && isAfter(startOfDay(date), startOfDay(this.maxDate))) {
+            return { [WlcmDateValidation.MaxDate]: { maxDate: this.maxDate, currentDate: date } };
+        }
         return null;
     }
     parseCurrentValue() {
@@ -568,6 +677,12 @@ class WlcmDatepickerInputBase {
         const parsedDate = parse(value, pattern, new Date());
         return isValid(parsedDate) && value === format(parsedDate, pattern);
     }
+    get minDate() {
+        return this.trigger.minDate?.();
+    }
+    get maxDate() {
+        return this.trigger.maxDate?.();
+    }
     get inputElement() {
         return this.element.nativeElement;
     }
@@ -586,7 +701,7 @@ class WlcmDatepickerInputBase {
 }
 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: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DateAdapter }, { type: undefined }, { type: WlcmDatepickerTrigger }], propDecorators: { handleBlur: [{
                 type: HostListener,
                 args: ['blur']
             }], handleInput: [{
@@ -595,11 +710,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
             }] } });
 
 class WlcmDateRangePickerInputBase extends WlcmDatepickerInputBase {
-    constructor(element, dateAdapter, dateFormats) {
-        super(element, dateAdapter, dateFormats);
+    constructor(element, dateAdapter, dateFormats, trigger) {
+        super(element, dateAdapter, dateFormats, trigger);
         this.element = element;
         this.dateAdapter = dateAdapter;
         this.dateFormats = dateFormats;
+        this.trigger = trigger;
         this._inputMirror = this.createInputMirror();
     }
     ngAfterViewInit() {
@@ -636,7 +752,7 @@ class WlcmDateRangePickerInputBase extends WlcmDatepickerInputBase {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerInputBase, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DateAdapter }, { type: undefined }] });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DateAdapter }, { type: undefined }, { type: WlcmDatepickerTrigger }] });
 
 var WlcmDateRangeValidation;
 (function (WlcmDateRangeValidation) {
@@ -644,12 +760,13 @@ var WlcmDateRangeValidation;
 })(WlcmDateRangeValidation || (WlcmDateRangeValidation = {}));
 
 let DateRangePickerInputEndDirective = class DateRangePickerInputEndDirective extends WlcmDateRangePickerInputBase {
-    constructor(element, dateAdapter, dateFormats, selectionModel) {
-        super(element, dateAdapter, dateFormats);
+    constructor(element, dateAdapter, dateFormats, selectionModel, trigger) {
+        super(element, dateAdapter, dateFormats, trigger);
         this.element = element;
         this.dateAdapter = dateAdapter;
         this.dateFormats = dateFormats;
         this.selectionModel = selectionModel;
+        this.trigger = trigger;
         this.updateSelection = () => {
             let end = this.parseCurrentValue();
             this.selectionModel.updateSelection(new DateRange(this.selectionModel.selection.start, end), this);
@@ -674,7 +791,7 @@ 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.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 }, { token: WlcmDatepickerTrigger }], 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 },
@@ -683,7 +800,8 @@ let DateRangePickerInputEndDirective = class DateRangePickerInputEndDirective ex
 DateRangePickerInputEndDirective = __decorate([
     UntilDestroy(),
     __metadata("design:paramtypes", [ElementRef,
-        DateAdapter, Object, MatDateSelectionModel])
+        DateAdapter, Object, MatDateSelectionModel,
+        WlcmDatepickerTrigger])
 ], DateRangePickerInputEndDirective);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: DateRangePickerInputEndDirective, decorators: [{
             type: Directive,
@@ -704,15 +822,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 }] }, { type: i2$1.MatDateSelectionModel, decorators: [{
                     type: Inject,
                     args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
-                }] }] });
+                }] }, { type: WlcmDatepickerTrigger }] });
 
 let DateRangePickerInputStartDirective = class DateRangePickerInputStartDirective extends WlcmDateRangePickerInputBase {
-    constructor(element, dateAdapter, dateFormats, selectionModel) {
-        super(element, dateAdapter, dateFormats);
+    constructor(element, dateAdapter, dateFormats, selectionModel, trigger) {
+        super(element, dateAdapter, dateFormats, trigger);
         this.element = element;
         this.dateAdapter = dateAdapter;
         this.dateFormats = dateFormats;
         this.selectionModel = selectionModel;
+        this.trigger = trigger;
         this.updateSelection = () => {
             let start = this.parseCurrentValue();
             this.selectionModel.updateSelection(new DateRange(start, this.selectionModel.selection.end), this);
@@ -737,7 +856,7 @@ let DateRangePickerInputStartDirective = class DateRangePickerInputStartDirectiv
             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.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: DateRangePickerInputStartDirective, deps: [{ token: i0.ElementRef }, { token: i1.DateAdapter }, { token: MAT_DATE_FORMATS, optional: true }, { token: WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL }, { token: WlcmDatepickerTrigger }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "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 },
@@ -746,7 +865,8 @@ let DateRangePickerInputStartDirective = class DateRangePickerInputStartDirectiv
 DateRangePickerInputStartDirective = __decorate([
     UntilDestroy(),
     __metadata("design:paramtypes", [ElementRef,
-        DateAdapter, Object, MatDateSelectionModel])
+        DateAdapter, Object, MatDateSelectionModel,
+        WlcmDatepickerTrigger])
 ], DateRangePickerInputStartDirective);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: DateRangePickerInputStartDirective, decorators: [{
             type: Directive,
@@ -767,7 +887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 }] }, { type: i2$1.MatDateSelectionModel, decorators: [{
                     type: Inject,
                     args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
-                }] }] });
+                }] }, { type: WlcmDatepickerTrigger }] });
 
 class DateRangePickerErrors {
     static throwNoStartInputError() {
@@ -885,7 +1005,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
 
 let WlcmDatepickerInputDirective = class WlcmDatepickerInputDirective extends WlcmDatepickerInputBase {
     constructor(element, dateAdapter, dateFormats, selectionModel, trigger) {
-        super(element, dateAdapter, dateFormats);
+        super(element, dateAdapter, dateFormats, trigger);
         this.element = element;
         this.dateAdapter = dateAdapter;
         this.dateFormats = dateFormats;
@@ -938,22 +1058,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 }] }, { type: i2$1.MatDateSelectionModel }, { type: WlcmDatepickerTrigger }] });
 
 class WlcmDatepickerPanelComponent {
-    constructor(selectionModel, trigger) {
+    constructor(selectionModel, trigger, config) {
         this.selectionModel = selectionModel;
         this.trigger = trigger;
+        this.config = config;
         this.headerComponent = WlcmCalendarHeaderComponent;
+        this.matCalendar = viewChild(MatCalendar);
     }
     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]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDatepickerPanelComponent, deps: [{ token: i2$1.MatDateSelectionModel }, { token: WlcmDatepickerTrigger }, { token: WLCM_DATEPICKER_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.5", type: WlcmDatepickerPanelComponent, isStandalone: true, selector: "wlcm-datepicker-panel", host: { classAttribute: "wlcm-datepicker-panel" }, viewQueries: [{ propertyName: "matCalendar", first: true, predicate: MatCalendar, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-calendar\n  wlcmCalendar\n  [minDate]=\"config.minDate?.()\"\n  [maxDate]=\"config.maxDate?.()\"\n  [startAt]=\"selectionModel.selection\"\n  [selected]=\"selectionModel.selection\"\n  [headerComponent]=\"headerComponent\"\n  (selectedChange)=\"select($event)\"\n></mat-calendar>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: 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: 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 }] });
+            args: [{ selector: 'wlcm-datepicker-panel', host: { class: 'wlcm-datepicker-panel' }, standalone: true, imports: [CommonModule, MatDatepickerModule, WlcmCalendarDirective], template: "<mat-calendar\n  wlcmCalendar\n  [minDate]=\"config.minDate?.()\"\n  [maxDate]=\"config.maxDate?.()\"\n  [startAt]=\"selectionModel.selection\"\n  [selected]=\"selectionModel.selection\"\n  [headerComponent]=\"headerComponent\"\n  (selectedChange)=\"select($event)\"\n></mat-calendar>\n" }]
+        }], ctorParameters: () => [{ type: i2$1.MatDateSelectionModel }, { type: WlcmDatepickerTrigger }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [WLCM_DATEPICKER_CONFIG]
+                }] }] });
 
 class WlcmDatepickerInputContainerComponent extends WlcmDatepickerTrigger {
     constructor(overlay, viewContainerRef, selectionModel, formField) {
@@ -1045,23 +1170,6 @@ function WlcmDateRangeInputValidator() {
     };
 }
 
-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,