ngx-kit 8.3.4 → 8.3.5

package/fesm2022/ngx-kit-date-picker.mjs

@@ -1,17 +1,36 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, signal, input, model, EventEmitter, forwardRef, Output, Input, Component, ViewContainerRef, Renderer2, HostListener, Directive, viewChild, ChangeDetectionStrategy } from '@angular/core';
+import { InjectionToken, inject, Injectable, input, model, signal, effect, Directive, EventEmitter, forwardRef, Output, Component, output, ViewContainerRef, Renderer2, HostListener, Input, viewChild, ChangeDetectionStrategy } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { OverlayService } from 'ngx-kit/core';
 
-class NgxDatePickerConfig {
+class NgxCalendarLocalization {
+    clear = 'Clear';
+    today = 'Today';
+    /** Range picker labels. */
+    rangeStart = 'Start date';
+    rangeEnd = 'End date';
+    day = 'Day';
+    month = 'Month';
+    week = 'Week';
+    year = 'Year';
+    event = 'Event';
+}
+class NgxDateConfig {
+    localization = new NgxCalendarLocalization();
     previousButtonTemplate;
     nextButtonTemplate;
     caretDownIconTemplate;
     todayButton = true;
     clearButton = true;
+    locale = 'en';
+    adapters;
 }
+const DEFAULT_DATE_CONFIG = new NgxDateConfig();
+const NGX_DATE_CONFIG = new InjectionToken('ngx-kit-date-config', {
+    factory: () => DEFAULT_DATE_CONFIG,
+});
 
 /**
  * Matches strings that have the form of a valid RFC 3339 string
@@ -1430,18 +1449,21 @@ class ChineseAdapter {
     }
 }
 
-const DATE_ADAPTERS = new InjectionToken('DATE_ADAPTERS');
-const DEFAULT_DATE_ADAPTERS = Object.freeze([
+const DEFAULT_DATE_ADAPTERS = [
     { locale: 'en', useClass: GregorianAdapter },
     { locale: 'fa', useClass: JalaliAdapter },
     { locale: 'hi', useClass: HijriAdapter },
     { locale: 'zh', useClass: ChineseAdapter },
-]);
+];
 function getLocals() {
     const adapters = inject(DATE_ADAPTERS);
     return adapters.map((m) => m.locale);
 }
 
+const DATE_ADAPTERS = new InjectionToken('ngx-date-adapters', {
+    factory: () => DEFAULT_DATE_ADAPTERS,
+});
+
 class DateAdapterRegistry {
     adapters = inject(DATE_ADAPTERS);
     resolve(locale) {
@@ -1484,9 +1506,17 @@ function convertNumberToTime(num) {
 }
 
 class NgxDatePickerBase {
-    _locale = 'en';
+    _config = inject(NGX_DATE_CONFIG);
+    locale = input(this._config.locale ?? 'en', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    localize = input(this._config.localization ?? new NgxCalendarLocalization(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "localize" }] : /* istanbul ignore next */ []));
+    config = model(this._config, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
     dateAdapterRegistry = inject(DateAdapterRegistry);
-    adapter = this.dateAdapterRegistry.resolve(this._locale);
+    adapter = this.dateAdapterRegistry.resolve(this.locale());
+    min = input(null, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: deserialize });
+    max = input(null, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: deserialize });
     currYear = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "currYear" }] : /* istanbul ignore next */ []));
     currMonth = signal(0, /* @ts-ignore */
@@ -1504,6 +1534,20 @@ class NgxDatePickerBase {
     ...(ngDevMode ? [{ debugName: "displayMonth" }] : /* istanbul ignore next */ []));
     minDate = null;
     maxDate = null;
+    constructor() {
+        effect(() => {
+            const minDate = this.min();
+            const maxDate = this.max();
+            const minChanged = !sameDate(minDate, this.minDate);
+            const maxChanged = !sameDate(maxDate, this.maxDate);
+            if (!minChanged && !maxChanged)
+                return;
+            this.minDate = minDate;
+            this.maxDate = maxDate;
+            this.onDateBoundsChange();
+        });
+    }
+    onDateBoundsChange() { }
     renderCalendar(view, selected, events, callback) {
         switch (view) {
             case 'month':
@@ -1613,7 +1657,7 @@ class NgxDatePickerBase {
         for (let i = firstDayOfMonth; i > 0; i--) {
             const day = lastDateOfLastMonth - i + 1;
             const date = this.adapter.getDate({
-                locale: this._locale,
+                locale: this.locale(),
                 year: this.currYear(),
                 month: this.currMonth() - 1,
                 day,
@@ -1631,7 +1675,7 @@ class NgxDatePickerBase {
             const today = this.adapter.today();
             const isToday = day === today.day && this.currMonth() === today.month && this.currYear() === today.year;
             const date = this.adapter.getDate({
-                locale: this._locale,
+                locale: this.locale(),
                 year: this.currYear(),
                 month: this.currMonth(),
                 day,
@@ -1650,7 +1694,7 @@ class NgxDatePickerBase {
         for (let i = lastDayOfMonth; i < 6; i++) {
             const day = i - lastDayOfMonth + 1;
             const date = this.adapter.getDate({
-                locale: this._locale,
+                locale: this.locale(),
                 year: this.currYear(),
                 month: this.currMonth() + 1,
                 day,
@@ -1670,9 +1714,9 @@ class NgxDatePickerBase {
         return c === 0;
     }
     checkActiveMonth(year, month) {
-        const fd = this.adapter.getDate({ locale: this._locale, year, month, day: 1 });
+        const fd = this.adapter.getDate({ locale: this.locale(), year, month, day: 1 });
         const ld = this.adapter.getDate({
-            locale: this._locale,
+            locale: this.locale(),
             year,
             month,
             day: this.adapter.lastDateofMonth(year, month),
@@ -1682,7 +1726,7 @@ class NgxDatePickerBase {
         return clampMonth(fd, min, max) === 0 && clampMonth(ld, min, max) === 0;
     }
     checkActiveYear(year) {
-        const d = this.adapter.getDate({ locale: this._locale, year, month: 1, day: 1 });
+        const d = this.adapter.getDate({ locale: this.locale(), year, month: 1, day: 1 });
         return clampYear(d, this.minDate, this.maxDate) === 0;
     }
     getEvents(date, events) {
@@ -1714,56 +1758,14 @@ class NgxDatePickerBase {
             };
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDatePickerBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxDatePickerBase, isStandalone: true, inputs: { locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, localize: { classPropertyName: "localize", publicName: "localize", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange" }, ngImport: i0 });
 }
-
-const NGX_CALENDAR_LOCALIZATION = new InjectionToken('ngx-calendar-localization', {
-    factory: () => DEFAULT_NGX_CALENDAR_LOCALIZATION,
-});
-class NgxCalendarLocalization {
-    clear = 'Clear';
-    today = 'Today';
-    /** Range picker labels. */
-    rangeStart = 'Start date';
-    rangeEnd = 'End date';
-    day = 'Day';
-    month = 'Month';
-    week = 'Week';
-    year = 'Year';
-    event = 'Event';
-}
-const DEFAULT_NGX_CALENDAR_LOCALIZATION = new NgxCalendarLocalization();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDatePickerBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], localize: [{ type: i0.Input, args: [{ isSignal: true, alias: "localize", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }, { type: i0.Output, args: ["configChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
 
 class NgxInputDatePickerComponent extends NgxDatePickerBase {
-    defaultLocalization = inject(NGX_CALENDAR_LOCALIZATION);
-    localize = input(this.defaultLocalization, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "localize" }] : /* istanbul ignore next */ []));
-    config = new NgxDatePickerConfig();
-    set setConfig(val) {
-        this.config = { ...new NgxDatePickerConfig(), ...val };
-    }
-    set locale(val) {
-        this._locale = val;
-        this.adapter = this.dateAdapterRegistry.resolve(this._locale);
-        this.init();
-    }
-    /** The minimum valid date. */
-    set setMin(value) {
-        const validValue = deserialize(value);
-        if (!sameDate(validValue, this.minDate)) {
-            this.minDate = validValue;
-            this._validatorOnChange();
-            this.init();
-        }
-    }
-    /** The maximum valid date. */
-    set setMax(value) {
-        const validValue = deserialize(value);
-        if (!sameDate(validValue, this.maxDate)) {
-            this.maxDate = validValue;
-            this._validatorOnChange();
-            this.init();
-        }
-    }
     view = model('day', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
     change = new EventEmitter();
@@ -1777,12 +1779,20 @@ class NgxInputDatePickerComponent extends NgxDatePickerBase {
     _validatorOnChange = () => { };
     constructor() {
         super();
+        effect(() => {
+            this.adapter = this.dateAdapterRegistry.resolve(this.locale());
+            this.init();
+        });
     }
     ngOnInit() {
         this.init();
     }
+    onDateBoundsChange() {
+        this._validatorOnChange();
+        this.init();
+    }
     updateConfig(val) {
-        this.config = { ...new NgxDatePickerConfig(), ...val };
+        this.config.set({ ...this.config(), ...val });
     }
     init() {
         this.months = this.adapter.longMonths;
@@ -1900,7 +1910,7 @@ class NgxInputDatePickerComponent extends NgxDatePickerBase {
         ev.stopPropagation();
         if (item.active) {
             this.selected = {
-                locale: this._locale,
+                locale: this.locale(),
                 year: this.currYear(),
                 month: this.currMonth(),
                 day: item.day,
@@ -1931,7 +1941,7 @@ class NgxInputDatePickerComponent extends NgxDatePickerBase {
         ev.stopPropagation();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxInputDatePickerComponent, isStandalone: true, selector: "ngx-date-picker", inputs: { localize: { classPropertyName: "localize", publicName: "localize", isSignal: true, isRequired: false, transformFunction: null }, setConfig: { classPropertyName: "setConfig", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, setMin: { classPropertyName: "setMin", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, setMax: { classPropertyName: "setMax", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", change: "change" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxInputDatePickerComponent, isStandalone: true, selector: "ngx-date-picker", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", change: "change" }, providers: [
             DateAdapterRegistry,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1943,7 +1953,7 @@ class NgxInputDatePickerComponent extends NgxDatePickerBase {
                 useExisting: forwardRef(() => NgxInputDatePickerComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" #datepickerWrapper (click)=\"stopPagination($event)\">\n  <div class=\"header\">\n    <svg\n      class=\"calendar-icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M16 2V6M8 2V6\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n      <path\n        d=\"M13 4H11C7.22876 4 5.34315 4 4.17157 5.17157C3 6.34315 3 8.22876 3 12V14C3 17.7712 3 19.6569 4.17157 20.8284C5.34315 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 19.6569 21 17.7712 21 14V12C21 8.22876 21 6.34315 19.8284 5.17157C18.6569 4 16.7712 4 13 4Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n      <path\n        d=\"M3 10H21\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n      <path\n        d=\"M11.9955 14H12.0045M11.9955 18H12.0045M15.991 14H16M8 14H8.00897M8 18H8.00897\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n    </svg>\n    {{ calendarHeader() }}\n  </div>\n  <div class=\"sub-header\">\n    <div class=\"icons\">\n      <span id=\"prev\" (click)=\"previous()\">\n        <ng-template\n          [ngTemplateOutlet]=\"\n            config.previousButtonTemplate || defaultPreviousBTNTemplate\n          \"></ng-template>\n      </span>\n    </div>\n    <span class=\"current-date\">\n      <span (click)=\"changeView('year')\">\n        {{ currYear() }}\n        <ng-template\n          [ngTemplateOutlet]=\"config.caretDownIconTemplate || defaultCaretDownIcon\"></ng-template>\n      </span>\n      <span (click)=\"changeView('month')\">\n        {{ displayMonth() }}\n        <ng-template\n          [ngTemplateOutlet]=\"config.caretDownIconTemplate || defaultCaretDownIcon\"></ng-template>\n      </span>\n    </span>\n    <div class=\"icons\">\n      <span id=\"next\" (click)=\"next()\">\n        <ng-template\n          [ngTemplateOutlet]=\"config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\n      </span>\n    </div>\n  </div>\n  <div class=\"calendar\">\n    @if (view() === 'day') {\n      <ul class=\"weeks\">\n        @for (w of weekDays; track $index) {\n          <li [title]=\"w.name\">\n            {{ w.min }}\n          </li>\n        }\n      </ul>\n      <ul class=\"days\">\n        @for (item of viewDays; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectDay($event, item)\">\n            {{ item.day }}\n          </li>\n        }\n      </ul>\n    } @else if (view() === 'month') {\n      <ul class=\"months\">\n        @for (item of viewMonths; track $index; let i = $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectMonth($event, item)\">\n            {{ i + 1 }}.{{ item.displayMonth }}\n          </li>\n        }\n      </ul>\n    } @else if (view() === 'year') {\n      <ul class=\"years\">\n        @for (item of viewYears; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectYear($event, item)\">\n            {{ item.year }}\n          </li>\n        }\n      </ul>\n    }\n    <!-- <pre>\n      currYear={{currYear}}\n      currMonth={{currMonth}}\n      {{selected|json}}\n    </pre> -->\n    <div class=\"calendar-footer\">\n      @if (config.clearButton) {\n        <button (click)=\"clear()\">\n          {{ localize().clear }}\n        </button>\n      }\n      @if (config.todayButton) {\n        <button (click)=\"gotoToday()\">\n          {{ localize().today }}\n        </button>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultPreviousBTNTemplate>\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultNextBTNTemplate>\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultCaretDownIcon>\n  <svg width=\"10px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z\" />\n  </svg>\n</ng-template>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #0e1428);--ngx-color-text: light-dark(#000, #fff);--ngx-border-color: light-dark(#c0c0c0, #c0c0c0);--ngx-datepicker-header-bg: light-dark( linear-gradient(to right, #643edf, #865bf3), linear-gradient(to right, #34158c, #441ba8) );--ngx-datepicker-header-text: light-dark(#fff, #fff);--ngx-datepicker-subheader-bg: light-dark(#e0d5ef, #0f1529);--ngx-datepicker-subheader-text: light-dark(#272727, #d2b9f9);--ngx-datepicker-font-size: 12px;--ngx-datepicker-active-bg: light-dark( linear-gradient(to bottom, #8753ff, #5325c9), linear-gradient(to bottom, #8753ff, #5325c9) );--ngx-datepicker-active-text: light-dark(#fff, #fff);--ngx-datepicker-today-color: light-dark(#5325c9, #5325c9)}.wrapper{background:var(--ngx-color-bg);box-shadow:0 15px 40px #0000001f;color:var(--ngx-color-text);border-radius:6px;overflow:hidden;font-size:var(--ngx-datepicker-font-size);width:330px}.wrapper .header{display:flex;align-items:center;justify-content:center;text-align:center;padding:15px 15px 10px;background:var(--ngx-datepicker-header-bg);color:var(--ngx-datepicker-header-text);font-size:1.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wrapper .calendar-icon{background-color:#f3f3f33f;border-radius:29px;padding:6px;width:40px;min-width:40px;height:40px;corner-shape:squircle;margin:0 6px}.wrapper .sub-header{display:flex;align-items:center;padding:5px 10px;background-color:var(--ngx-datepicker-subheader-bg);color:var(--ngx-datepicker-subheader-text)}.wrapper .sub-header .current-date{font-size:1.5em;flex:auto;display:flex;align-items:center}.wrapper .sub-header .current-date span{flex:auto;text-align:center}.wrapper .sub-header .icons{display:flex}.wrapper .sub-header .icons span{height:38px;width:38px;margin:0 1px;cursor:pointer;color:#878787;text-align:center;line-height:38px;font-size:1.9rem;-webkit-user-select:none;user-select:none;border:1px rgba(176,176,176,.0901960784) solid;border-radius:5px}.wrapper .sub-header .icons span:hover{background:#f2f2f225}.wrapper .calendar-footer{display:flex;justify-content:space-between;gap:5px}.wrapper .calendar-footer button{outline:none;background:none;color:inherit;border:none;border-radius:4px;padding:8px 15px;box-shadow:none;transition:all .3s;border:1px rgba(168,168,168,.1411764706) solid}.wrapper .calendar-footer button:not([disabled]):hover{cursor:pointer;background:#816ef175}.calendar{padding:10px}.calendar ul{display:flex;flex-wrap:wrap;list-style:none;text-align:center;padding:0;margin:0}.calendar .days{margin-bottom:20px}.calendar .days li{width:14.2857142857%;aspect-ratio:1/1}.calendar .months{margin-bottom:20px}.calendar .months li{width:33.3333333333%;height:44px}.calendar .years{margin-bottom:20px}.calendar .years li{width:25%;height:44px}.calendar li{z-index:1;cursor:pointer;position:relative;color:#333;font-size:1.2em;border-radius:50px;display:flex;align-items:center;justify-content:center;border:1px transparent solid;transition:all .3s;color:inherit}.calendar li:not(.active):hover{background:#dfdfdf68}.calendar li.de-active{opacity:.2}.calendar li.selected{background:var(--ngx-datepicker-active-bg)!important;color:var(--ngx-datepicker-active-text)}.calendar li.today{border:1px var(--ngx-datepicker-today-color) solid!important}.calendar .weeks{border-bottom:1px rgba(231,231,231,.3450980392) solid;margin-bottom:10px;padding-bottom:5px}.calendar .weeks li{font-weight:500;cursor:default;flex:auto;flex-wrap:nowrap}.calendar .weeks li:hover{background:none}::ng-deep body[dir=rtl] .wrapper .sub-header .icons #next,::ng-deep body[dir=rtl] .wrapper .sub-header .icons #prev,::ng-deep html[dir=rtl] .wrapper .sub-header .icons #next,::ng-deep html[dir=rtl] .wrapper .sub-header .icons #prev{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" #datepickerWrapper (click)=\"stopPagination($event)\">\n  <div class=\"header\">\n    <svg\n      class=\"calendar-icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M16 2V6M8 2V6\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n      <path\n        d=\"M13 4H11C7.22876 4 5.34315 4 4.17157 5.17157C3 6.34315 3 8.22876 3 12V14C3 17.7712 3 19.6569 4.17157 20.8284C5.34315 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 19.6569 21 17.7712 21 14V12C21 8.22876 21 6.34315 19.8284 5.17157C18.6569 4 16.7712 4 13 4Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n      <path\n        d=\"M3 10H21\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n      <path\n        d=\"M11.9955 14H12.0045M11.9955 18H12.0045M15.991 14H16M8 14H8.00897M8 18H8.00897\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n    </svg>\n    {{ calendarHeader() }}\n  </div>\n  <div class=\"sub-header\">\n    <div class=\"icons\">\n      <span id=\"prev\" (click)=\"previous()\">\n        <ng-template\n          [ngTemplateOutlet]=\"\n            config().previousButtonTemplate || defaultPreviousBTNTemplate\n          \"></ng-template>\n      </span>\n    </div>\n    <span class=\"current-date\">\n      <span (click)=\"changeView('year')\">\n        {{ currYear() }}\n        <ng-template\n          [ngTemplateOutlet]=\"config().caretDownIconTemplate || defaultCaretDownIcon\"></ng-template>\n      </span>\n      <span (click)=\"changeView('month')\">\n        {{ displayMonth() }}\n        <ng-template\n          [ngTemplateOutlet]=\"config().caretDownIconTemplate || defaultCaretDownIcon\"></ng-template>\n      </span>\n    </span>\n    <div class=\"icons\">\n      <span id=\"next\" (click)=\"next()\">\n        <ng-template\n          [ngTemplateOutlet]=\"config().nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\n      </span>\n    </div>\n  </div>\n  <div class=\"calendar\">\n    @if (view() === 'day') {\n      <ul class=\"weeks\">\n        @for (w of weekDays; track $index) {\n          <li [title]=\"w.name\">\n            {{ w.min }}\n          </li>\n        }\n      </ul>\n      <ul class=\"days\">\n        @for (item of viewDays; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectDay($event, item)\">\n            {{ item.day }}\n          </li>\n        }\n      </ul>\n    } @else if (view() === 'month') {\n      <ul class=\"months\">\n        @for (item of viewMonths; track $index; let i = $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectMonth($event, item)\">\n            {{ i + 1 }}.{{ item.displayMonth }}\n          </li>\n        }\n      </ul>\n    } @else if (view() === 'year') {\n      <ul class=\"years\">\n        @for (item of viewYears; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectYear($event, item)\">\n            {{ item.year }}\n          </li>\n        }\n      </ul>\n    }\n    <!-- <pre>\n      currYear={{currYear}}\n      currMonth={{currMonth}}\n      {{selected|json}}\n    </pre> -->\n    <div class=\"calendar-footer\">\n      @if (config().clearButton) {\n        <button (click)=\"clear()\">\n          {{ localize().clear }}\n        </button>\n      }\n      @if (config().todayButton) {\n        <button (click)=\"gotoToday()\">\n          {{ localize().today }}\n        </button>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultPreviousBTNTemplate>\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultNextBTNTemplate>\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultCaretDownIcon>\n  <svg width=\"10px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z\" />\n  </svg>\n</ng-template>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #0e1428);--ngx-color-text: light-dark(#000, #fff);--ngx-border-color: light-dark(#c0c0c0, #c0c0c0);--ngx-datepicker-header-bg: light-dark( linear-gradient(to right, #643edf, #865bf3), linear-gradient(to right, #34158c, #441ba8) );--ngx-datepicker-header-text: light-dark(#fff, #fff);--ngx-datepicker-subheader-bg: light-dark(#e0d5ef, #0f1529);--ngx-datepicker-subheader-text: light-dark(#272727, #d2b9f9);--ngx-datepicker-font-size: 12px;--ngx-datepicker-active-bg: light-dark( linear-gradient(to bottom, #8753ff, #5325c9), linear-gradient(to bottom, #8753ff, #5325c9) );--ngx-datepicker-active-text: light-dark(#fff, #fff);--ngx-datepicker-today-color: light-dark(#5325c9, #5325c9)}.wrapper{background:var(--ngx-color-bg);box-shadow:0 15px 40px #0000001f;color:var(--ngx-color-text);border-radius:6px;overflow:hidden;font-size:var(--ngx-datepicker-font-size);width:330px}.wrapper .header{display:flex;align-items:center;justify-content:center;text-align:center;padding:5px 15px;background:var(--ngx-datepicker-header-bg);color:var(--ngx-datepicker-header-text);font-size:1.3em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wrapper .calendar-icon{background-color:#f3f3f33f;border-radius:29px;padding:6px;width:40px;min-width:40px;height:40px;corner-shape:squircle;margin:0 6px}.wrapper .sub-header{display:flex;align-items:center;padding:5px 10px;background-color:var(--ngx-datepicker-subheader-bg);color:var(--ngx-datepicker-subheader-text)}.wrapper .sub-header .current-date{font-size:1.3em;flex:auto;display:flex;align-items:center}.wrapper .sub-header .current-date span{flex:auto;text-align:center}.wrapper .sub-header .icons{display:flex}.wrapper .sub-header .icons span{height:38px;width:38px;margin:0 1px;cursor:pointer;color:#878787;text-align:center;line-height:38px;font-size:1.9rem;-webkit-user-select:none;user-select:none;border:1px rgba(176,176,176,.0901960784) solid;border-radius:5px}.wrapper .sub-header .icons span:hover{background:#f2f2f225}.wrapper .calendar-footer{display:flex;justify-content:space-between;gap:5px}.wrapper .calendar-footer button{outline:none;background:none;color:inherit;border:none;border-radius:4px;padding:8px 15px;box-shadow:none;transition:all .3s;border:1px rgba(168,168,168,.1411764706) solid}.wrapper .calendar-footer button:not([disabled]):hover{cursor:pointer;background:#816ef175}.calendar{padding:10px}.calendar ul{display:flex;flex-wrap:wrap;list-style:none;text-align:center;padding:0;margin:0}.calendar .days{margin-bottom:20px}.calendar .days li{width:14.2857142857%;aspect-ratio:1/1}.calendar .months{margin-bottom:20px}.calendar .months li{width:33.3333333333%;height:44px}.calendar .years{margin-bottom:20px}.calendar .years li{width:25%;height:44px}.calendar li{z-index:1;cursor:pointer;position:relative;color:#333;font-size:1em;border-radius:50px;display:flex;align-items:center;justify-content:center;border:1px transparent solid;transition:all .3s;color:inherit}.calendar li:not(.active):hover{background:#dfdfdf68}.calendar li.de-active{opacity:.2}.calendar li.selected{background:var(--ngx-datepicker-active-bg)!important;color:var(--ngx-datepicker-active-text)}.calendar li.today{border:1px var(--ngx-datepicker-today-color) solid!important}.calendar .weeks{border-bottom:1px rgba(231,231,231,.3450980392) solid;margin-bottom:10px;padding-bottom:5px}.calendar .weeks li{font-weight:500;cursor:default;flex:auto;flex-wrap:nowrap}.calendar .weeks li:hover{background:none}::ng-deep body[dir=rtl] .wrapper .sub-header .icons #next,::ng-deep body[dir=rtl] .wrapper .sub-header .icons #prev,::ng-deep html[dir=rtl] .wrapper .sub-header .icons #next,::ng-deep html[dir=rtl] .wrapper .sub-header .icons #prev{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputDatePickerComponent, decorators: [{
             type: Component,
@@ -1959,37 +1969,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                             useExisting: forwardRef(() => NgxInputDatePickerComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"wrapper\" #datepickerWrapper (click)=\"stopPagination($event)\">\n  <div class=\"header\">\n    <svg\n      class=\"calendar-icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M16 2V6M8 2V6\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n      <path\n        d=\"M13 4H11C7.22876 4 5.34315 4 4.17157 5.17157C3 6.34315 3 8.22876 3 12V14C3 17.7712 3 19.6569 4.17157 20.8284C5.34315 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 19.6569 21 17.7712 21 14V12C21 8.22876 21 6.34315 19.8284 5.17157C18.6569 4 16.7712 4 13 4Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n      <path\n        d=\"M3 10H21\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n      <path\n        d=\"M11.9955 14H12.0045M11.9955 18H12.0045M15.991 14H16M8 14H8.00897M8 18H8.00897\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n    </svg>\n    {{ calendarHeader() }}\n  </div>\n  <div class=\"sub-header\">\n    <div class=\"icons\">\n      <span id=\"prev\" (click)=\"previous()\">\n        <ng-template\n          [ngTemplateOutlet]=\"\n            config.previousButtonTemplate || defaultPreviousBTNTemplate\n          \"></ng-template>\n      </span>\n    </div>\n    <span class=\"current-date\">\n      <span (click)=\"changeView('year')\">\n        {{ currYear() }}\n        <ng-template\n          [ngTemplateOutlet]=\"config.caretDownIconTemplate || defaultCaretDownIcon\"></ng-template>\n      </span>\n      <span (click)=\"changeView('month')\">\n        {{ displayMonth() }}\n        <ng-template\n          [ngTemplateOutlet]=\"config.caretDownIconTemplate || defaultCaretDownIcon\"></ng-template>\n      </span>\n    </span>\n    <div class=\"icons\">\n      <span id=\"next\" (click)=\"next()\">\n        <ng-template\n          [ngTemplateOutlet]=\"config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\n      </span>\n    </div>\n  </div>\n  <div class=\"calendar\">\n    @if (view() === 'day') {\n      <ul class=\"weeks\">\n        @for (w of weekDays; track $index) {\n          <li [title]=\"w.name\">\n            {{ w.min }}\n          </li>\n        }\n      </ul>\n      <ul class=\"days\">\n        @for (item of viewDays; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectDay($event, item)\">\n            {{ item.day }}\n          </li>\n        }\n      </ul>\n    } @else if (view() === 'month') {\n      <ul class=\"months\">\n        @for (item of viewMonths; track $index; let i = $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectMonth($event, item)\">\n            {{ i + 1 }}.{{ item.displayMonth }}\n          </li>\n        }\n      </ul>\n    } @else if (view() === 'year') {\n      <ul class=\"years\">\n        @for (item of viewYears; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectYear($event, item)\">\n            {{ item.year }}\n          </li>\n        }\n      </ul>\n    }\n    <!-- <pre>\n      currYear={{currYear}}\n      currMonth={{currMonth}}\n      {{selected|json}}\n    </pre> -->\n    <div class=\"calendar-footer\">\n      @if (config.clearButton) {\n        <button (click)=\"clear()\">\n          {{ localize().clear }}\n        </button>\n      }\n      @if (config.todayButton) {\n        <button (click)=\"gotoToday()\">\n          {{ localize().today }}\n        </button>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultPreviousBTNTemplate>\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultNextBTNTemplate>\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultCaretDownIcon>\n  <svg width=\"10px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z\" />\n  </svg>\n</ng-template>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #0e1428);--ngx-color-text: light-dark(#000, #fff);--ngx-border-color: light-dark(#c0c0c0, #c0c0c0);--ngx-datepicker-header-bg: light-dark( linear-gradient(to right, #643edf, #865bf3), linear-gradient(to right, #34158c, #441ba8) );--ngx-datepicker-header-text: light-dark(#fff, #fff);--ngx-datepicker-subheader-bg: light-dark(#e0d5ef, #0f1529);--ngx-datepicker-subheader-text: light-dark(#272727, #d2b9f9);--ngx-datepicker-font-size: 12px;--ngx-datepicker-active-bg: light-dark( linear-gradient(to bottom, #8753ff, #5325c9), linear-gradient(to bottom, #8753ff, #5325c9) );--ngx-datepicker-active-text: light-dark(#fff, #fff);--ngx-datepicker-today-color: light-dark(#5325c9, #5325c9)}.wrapper{background:var(--ngx-color-bg);box-shadow:0 15px 40px #0000001f;color:var(--ngx-color-text);border-radius:6px;overflow:hidden;font-size:var(--ngx-datepicker-font-size);width:330px}.wrapper .header{display:flex;align-items:center;justify-content:center;text-align:center;padding:15px 15px 10px;background:var(--ngx-datepicker-header-bg);color:var(--ngx-datepicker-header-text);font-size:1.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wrapper .calendar-icon{background-color:#f3f3f33f;border-radius:29px;padding:6px;width:40px;min-width:40px;height:40px;corner-shape:squircle;margin:0 6px}.wrapper .sub-header{display:flex;align-items:center;padding:5px 10px;background-color:var(--ngx-datepicker-subheader-bg);color:var(--ngx-datepicker-subheader-text)}.wrapper .sub-header .current-date{font-size:1.5em;flex:auto;display:flex;align-items:center}.wrapper .sub-header .current-date span{flex:auto;text-align:center}.wrapper .sub-header .icons{display:flex}.wrapper .sub-header .icons span{height:38px;width:38px;margin:0 1px;cursor:pointer;color:#878787;text-align:center;line-height:38px;font-size:1.9rem;-webkit-user-select:none;user-select:none;border:1px rgba(176,176,176,.0901960784) solid;border-radius:5px}.wrapper .sub-header .icons span:hover{background:#f2f2f225}.wrapper .calendar-footer{display:flex;justify-content:space-between;gap:5px}.wrapper .calendar-footer button{outline:none;background:none;color:inherit;border:none;border-radius:4px;padding:8px 15px;box-shadow:none;transition:all .3s;border:1px rgba(168,168,168,.1411764706) solid}.wrapper .calendar-footer button:not([disabled]):hover{cursor:pointer;background:#816ef175}.calendar{padding:10px}.calendar ul{display:flex;flex-wrap:wrap;list-style:none;text-align:center;padding:0;margin:0}.calendar .days{margin-bottom:20px}.calendar .days li{width:14.2857142857%;aspect-ratio:1/1}.calendar .months{margin-bottom:20px}.calendar .months li{width:33.3333333333%;height:44px}.calendar .years{margin-bottom:20px}.calendar .years li{width:25%;height:44px}.calendar li{z-index:1;cursor:pointer;position:relative;color:#333;font-size:1.2em;border-radius:50px;display:flex;align-items:center;justify-content:center;border:1px transparent solid;transition:all .3s;color:inherit}.calendar li:not(.active):hover{background:#dfdfdf68}.calendar li.de-active{opacity:.2}.calendar li.selected{background:var(--ngx-datepicker-active-bg)!important;color:var(--ngx-datepicker-active-text)}.calendar li.today{border:1px var(--ngx-datepicker-today-color) solid!important}.calendar .weeks{border-bottom:1px rgba(231,231,231,.3450980392) solid;margin-bottom:10px;padding-bottom:5px}.calendar .weeks li{font-weight:500;cursor:default;flex:auto;flex-wrap:nowrap}.calendar .weeks li:hover{background:none}::ng-deep body[dir=rtl] .wrapper .sub-header .icons #next,::ng-deep body[dir=rtl] .wrapper .sub-header .icons #prev,::ng-deep html[dir=rtl] .wrapper .sub-header .icons #next,::ng-deep html[dir=rtl] .wrapper .sub-header .icons #prev{transform:rotate(180deg)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { localize: [{ type: i0.Input, args: [{ isSignal: true, alias: "localize", required: false }] }], setConfig: [{
-                type: Input,
-                args: ['config']
-            }], locale: [{
-                type: Input
-            }], setMin: [{
-                type: Input,
-                args: ['min']
-            }], setMax: [{
-                type: Input,
-                args: ['max']
-            }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], change: [{
+                    ], template: "<div class=\"wrapper\" #datepickerWrapper (click)=\"stopPagination($event)\">\n  <div class=\"header\">\n    <svg\n      class=\"calendar-icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M16 2V6M8 2V6\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n      <path\n        d=\"M13 4H11C7.22876 4 5.34315 4 4.17157 5.17157C3 6.34315 3 8.22876 3 12V14C3 17.7712 3 19.6569 4.17157 20.8284C5.34315 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 19.6569 21 17.7712 21 14V12C21 8.22876 21 6.34315 19.8284 5.17157C18.6569 4 16.7712 4 13 4Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n      <path\n        d=\"M3 10H21\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n      <path\n        d=\"M11.9955 14H12.0045M11.9955 18H12.0045M15.991 14H16M8 14H8.00897M8 18H8.00897\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n    </svg>\n    {{ calendarHeader() }}\n  </div>\n  <div class=\"sub-header\">\n    <div class=\"icons\">\n      <span id=\"prev\" (click)=\"previous()\">\n        <ng-template\n          [ngTemplateOutlet]=\"\n            config().previousButtonTemplate || defaultPreviousBTNTemplate\n          \"></ng-template>\n      </span>\n    </div>\n    <span class=\"current-date\">\n      <span (click)=\"changeView('year')\">\n        {{ currYear() }}\n        <ng-template\n          [ngTemplateOutlet]=\"config().caretDownIconTemplate || defaultCaretDownIcon\"></ng-template>\n      </span>\n      <span (click)=\"changeView('month')\">\n        {{ displayMonth() }}\n        <ng-template\n          [ngTemplateOutlet]=\"config().caretDownIconTemplate || defaultCaretDownIcon\"></ng-template>\n      </span>\n    </span>\n    <div class=\"icons\">\n      <span id=\"next\" (click)=\"next()\">\n        <ng-template\n          [ngTemplateOutlet]=\"config().nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\n      </span>\n    </div>\n  </div>\n  <div class=\"calendar\">\n    @if (view() === 'day') {\n      <ul class=\"weeks\">\n        @for (w of weekDays; track $index) {\n          <li [title]=\"w.name\">\n            {{ w.min }}\n          </li>\n        }\n      </ul>\n      <ul class=\"days\">\n        @for (item of viewDays; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectDay($event, item)\">\n            {{ item.day }}\n          </li>\n        }\n      </ul>\n    } @else if (view() === 'month') {\n      <ul class=\"months\">\n        @for (item of viewMonths; track $index; let i = $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectMonth($event, item)\">\n            {{ i + 1 }}.{{ item.displayMonth }}\n          </li>\n        }\n      </ul>\n    } @else if (view() === 'year') {\n      <ul class=\"years\">\n        @for (item of viewYears; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectYear($event, item)\">\n            {{ item.year }}\n          </li>\n        }\n      </ul>\n    }\n    <!-- <pre>\n      currYear={{currYear}}\n      currMonth={{currMonth}}\n      {{selected|json}}\n    </pre> -->\n    <div class=\"calendar-footer\">\n      @if (config().clearButton) {\n        <button (click)=\"clear()\">\n          {{ localize().clear }}\n        </button>\n      }\n      @if (config().todayButton) {\n        <button (click)=\"gotoToday()\">\n          {{ localize().today }}\n        </button>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultPreviousBTNTemplate>\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultNextBTNTemplate>\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultCaretDownIcon>\n  <svg width=\"10px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z\" />\n  </svg>\n</ng-template>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #0e1428);--ngx-color-text: light-dark(#000, #fff);--ngx-border-color: light-dark(#c0c0c0, #c0c0c0);--ngx-datepicker-header-bg: light-dark( linear-gradient(to right, #643edf, #865bf3), linear-gradient(to right, #34158c, #441ba8) );--ngx-datepicker-header-text: light-dark(#fff, #fff);--ngx-datepicker-subheader-bg: light-dark(#e0d5ef, #0f1529);--ngx-datepicker-subheader-text: light-dark(#272727, #d2b9f9);--ngx-datepicker-font-size: 12px;--ngx-datepicker-active-bg: light-dark( linear-gradient(to bottom, #8753ff, #5325c9), linear-gradient(to bottom, #8753ff, #5325c9) );--ngx-datepicker-active-text: light-dark(#fff, #fff);--ngx-datepicker-today-color: light-dark(#5325c9, #5325c9)}.wrapper{background:var(--ngx-color-bg);box-shadow:0 15px 40px #0000001f;color:var(--ngx-color-text);border-radius:6px;overflow:hidden;font-size:var(--ngx-datepicker-font-size);width:330px}.wrapper .header{display:flex;align-items:center;justify-content:center;text-align:center;padding:5px 15px;background:var(--ngx-datepicker-header-bg);color:var(--ngx-datepicker-header-text);font-size:1.3em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wrapper .calendar-icon{background-color:#f3f3f33f;border-radius:29px;padding:6px;width:40px;min-width:40px;height:40px;corner-shape:squircle;margin:0 6px}.wrapper .sub-header{display:flex;align-items:center;padding:5px 10px;background-color:var(--ngx-datepicker-subheader-bg);color:var(--ngx-datepicker-subheader-text)}.wrapper .sub-header .current-date{font-size:1.3em;flex:auto;display:flex;align-items:center}.wrapper .sub-header .current-date span{flex:auto;text-align:center}.wrapper .sub-header .icons{display:flex}.wrapper .sub-header .icons span{height:38px;width:38px;margin:0 1px;cursor:pointer;color:#878787;text-align:center;line-height:38px;font-size:1.9rem;-webkit-user-select:none;user-select:none;border:1px rgba(176,176,176,.0901960784) solid;border-radius:5px}.wrapper .sub-header .icons span:hover{background:#f2f2f225}.wrapper .calendar-footer{display:flex;justify-content:space-between;gap:5px}.wrapper .calendar-footer button{outline:none;background:none;color:inherit;border:none;border-radius:4px;padding:8px 15px;box-shadow:none;transition:all .3s;border:1px rgba(168,168,168,.1411764706) solid}.wrapper .calendar-footer button:not([disabled]):hover{cursor:pointer;background:#816ef175}.calendar{padding:10px}.calendar ul{display:flex;flex-wrap:wrap;list-style:none;text-align:center;padding:0;margin:0}.calendar .days{margin-bottom:20px}.calendar .days li{width:14.2857142857%;aspect-ratio:1/1}.calendar .months{margin-bottom:20px}.calendar .months li{width:33.3333333333%;height:44px}.calendar .years{margin-bottom:20px}.calendar .years li{width:25%;height:44px}.calendar li{z-index:1;cursor:pointer;position:relative;color:#333;font-size:1em;border-radius:50px;display:flex;align-items:center;justify-content:center;border:1px transparent solid;transition:all .3s;color:inherit}.calendar li:not(.active):hover{background:#dfdfdf68}.calendar li.de-active{opacity:.2}.calendar li.selected{background:var(--ngx-datepicker-active-bg)!important;color:var(--ngx-datepicker-active-text)}.calendar li.today{border:1px var(--ngx-datepicker-today-color) solid!important}.calendar .weeks{border-bottom:1px rgba(231,231,231,.3450980392) solid;margin-bottom:10px;padding-bottom:5px}.calendar .weeks li{font-weight:500;cursor:default;flex:auto;flex-wrap:nowrap}.calendar .weeks li:hover{background:none}::ng-deep body[dir=rtl] .wrapper .sub-header .icons #next,::ng-deep body[dir=rtl] .wrapper .sub-header .icons #prev,::ng-deep html[dir=rtl] .wrapper .sub-header .icons #next,::ng-deep html[dir=rtl] .wrapper .sub-header .icons #prev{transform:rotate(180deg)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], change: [{
                 type: Output
             }] } });
 
 class NgxInputDatePicker {
     el;
     dateAdapterRegistry = inject(DateAdapterRegistry);
+    _config = inject(NGX_DATE_CONFIG);
     openOnCLick = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "openOnCLick" }] : /* istanbul ignore next */ []));
-    change = new EventEmitter();
+    change = output();
     value;
     pickerRef;
     adapter;
-    _locale = 'en';
-    set locale(val) {
-        this._locale = val || 'en';
-        this.adapter = this.dateAdapterRegistry.resolve(this._locale);
-        this._formatValue(this.value);
-    }
+    config = model(this._config, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    locale = input(this.config().locale ?? 'en', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
     _onChange = (value) => { };
     _onTouched = () => { };
     _validatorOnChange = () => { };
@@ -1997,39 +1995,36 @@ class NgxInputDatePicker {
      * display format in input
      */
     displayFormat = 'yyyy/MM/dd';
-    min = null;
-    /** The minimum valid date. */
-    set setMin(value) {
-        const validValue = deserialize(value);
-        if (!sameDate(validValue, this.min)) {
-            this.min = validValue;
-            this._validatorOnChange();
-        }
-    }
-    max = null;
-    /** The maximum valid date. */
-    set setMax(value) {
-        const validValue = deserialize(value);
-        if (!sameDate(validValue, this.max)) {
-            this.max = validValue;
-            this._validatorOnChange();
-        }
-    }
-    config = new NgxDatePickerConfig();
-    set setConfig(val) {
-        this.config = { ...new NgxDatePickerConfig(), ...val };
-    }
+    /** The minimum and maximum valid dates. */
+    min = input(null, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: deserialize });
+    max = input(null, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: deserialize });
+    minDate = null;
+    maxDate = null;
     isDisabled = false;
     overlayService = inject(OverlayService);
     viewContainerRef = inject(ViewContainerRef);
     renderer = inject(Renderer2);
     constructor(el) {
         this.el = el;
+        effect(() => {
+            const locale = this.locale();
+            this.adapter = this.dateAdapterRegistry.resolve(locale);
+            this._formatValue(this.value);
+        });
+        effect(() => {
+            const minDate = this.min();
+            const maxDate = this.max();
+            if (sameDate(minDate, this.minDate) && sameDate(maxDate, this.maxDate))
+                return;
+            this.minDate = minDate;
+            this.maxDate = maxDate;
+            this._validatorOnChange();
+        });
     }
     updateConfig(val) {
-        this.config = { ...new NgxDatePickerConfig(), ...val };
+        this.config.set({ ...this.config(), ...val });
         if (this.pickerRef && this.pickerRef.componentRef) {
-            this.pickerRef.componentRef.instance.updateConfig(this.config);
+            this.pickerRef.componentRef.instance.updateConfig(this.config());
         }
     }
     ngOnDestroy() {
@@ -2088,10 +2083,10 @@ class NgxInputDatePicker {
             placement: 'bottom',
             margin: 2,
             configure: (instance, ref) => {
-                instance.locale = this._locale;
-                instance.minDate = this.min;
-                instance.maxDate = this.max;
-                instance.updateConfig(this.config);
+                ref.componentRef?.setInput('locale', this.locale());
+                ref.componentRef?.setInput('min', this.minDate);
+                ref.componentRef?.setInput('max', this.maxDate);
+                instance.updateConfig(this.config());
                 instance.writeValue(this.value);
                 instance.change.subscribe((c) => {
                     this.value = c;
@@ -2122,17 +2117,17 @@ class NgxInputDatePicker {
                     invalid: true,
                 };
             }
-            let c = clampDate(this.value, this.min, this.max);
+            let c = clampDate(this.value, this.minDate, this.maxDate);
             if (c < 0) {
                 return {
                     invalid: true,
-                    min: this.min,
+                    min: this.minDate,
                 };
             }
             else if (c > 0) {
                 return {
                     invalid: true,
-                    max: this.max,
+                    max: this.maxDate,
                 };
             }
         }
@@ -2151,7 +2146,7 @@ class NgxInputDatePicker {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputDatePicker, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxInputDatePicker, isStandalone: true, selector: "[ngxInputDatePicker]", inputs: { openOnCLick: { classPropertyName: "openOnCLick", publicName: "openOnCLick", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: false, isRequired: false, transformFunction: null }, setMin: { classPropertyName: "setMin", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, setMax: { classPropertyName: "setMax", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, setConfig: { classPropertyName: "setConfig", publicName: "config", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "click": "onClick($event)", "input": "onInput($event)", "blur": "onBlur()" }, properties: { "attr.readOnly": "true" }, classAttribute: "ngx-datepicker-input" }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxInputDatePicker, isStandalone: true, selector: "[ngxInputDatePicker]", inputs: { openOnCLick: { classPropertyName: "openOnCLick", publicName: "openOnCLick", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", config: "configChange" }, host: { listeners: { "click": "onClick($event)", "input": "onInput($event)", "blur": "onBlur()" }, properties: { "attr.readOnly": "true" }, classAttribute: "ngx-datepicker-input" }, providers: [
             DateAdapterRegistry,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -2188,22 +2183,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { openOnCLick: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnCLick", required: false }] }], change: [{
-                type: Output
-            }], locale: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { openOnCLick: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnCLick", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }, { type: i0.Output, args: ["configChange"] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], displayFormat: [{
                 type: Input
-            }], displayFormat: [{
-                type: Input
-            }], setMin: [{
-                type: Input,
-                args: ['min']
-            }], setMax: [{
-                type: Input,
-                args: ['max']
-            }], setConfig: [{
-                type: Input,
-                args: ['config']
-            }], onClick: [{
+            }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }], onInput: [{
@@ -2220,36 +2202,8 @@ const MIN_EVENT_MINUTES = 30;
 const MONTH_ROW_COUNT = 6;
 const MONTH_COLUMN_COUNT = 7;
 class NgxCalendarComponent extends NgxDatePickerBase {
-    defaultLocalization = inject(NGX_CALENDAR_LOCALIZATION);
-    localize = input(this.defaultLocalization, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "localize" }] : /* istanbul ignore next */ []));
     resizeAndMovable = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resizeAndMovable" }] : /* istanbul ignore next */ []));
-    _config = new NgxDatePickerConfig();
-    set config(val) {
-        this._config = { ...new NgxDatePickerConfig(), ...val };
-    }
-    set locale(val) {
-        this._locale = val || 'en';
-        this.adapter = this.dateAdapterRegistry.resolve(this._locale);
-        if (this.currYear() !== undefined)
-            this.syncAnchorToLocale();
-        this.renderCalendar(this.view);
-    }
-    set setMin(value) {
-        const validValue = deserialize(value);
-        if (!sameDate(validValue, this.minDate)) {
-            this.minDate = validValue;
-            this.renderCalendar(this.view);
-        }
-    }
-    set setMax(value) {
-        const validValue = deserialize(value);
-        if (!sameDate(validValue, this.maxDate)) {
-            this.maxDate = validValue;
-            this.renderCalendar(this.view);
-        }
-    }
     view = 'month';
     _events = [];
     set events(val) {
@@ -2282,6 +2236,12 @@ class NgxCalendarComponent extends NgxDatePickerBase {
     interaction = null;
     constructor() {
         super();
+        effect(() => {
+            this.adapter = this.dateAdapterRegistry.resolve(this.locale());
+            if (this.currYear() !== undefined)
+                this.syncAnchorToLocale();
+            this.renderCalendar(this.view);
+        });
     }
     ngOnInit() {
         this.months = this.adapter.longMonths;
@@ -2290,6 +2250,9 @@ class NgxCalendarComponent extends NgxDatePickerBase {
         this.syncAnchorToLocale();
         this.renderCalendar(this.view);
     }
+    onDateBoundsChange() {
+        this.renderCalendar(this.view);
+    }
     onResize() {
         this.calcCellSize();
     }
@@ -2551,13 +2514,13 @@ class NgxCalendarComponent extends NgxDatePickerBase {
     }
     renderEventView() {
         const monthStart = this.adapter.getDate({
-            locale: this._locale,
+            locale: this.locale(),
             year: this.currYear(),
             month: this.currMonth(),
             day: 1,
         });
         const monthEnd = this.adapter.getDate({
-            locale: this._locale,
+            locale: this.locale(),
             year: this.currYear(),
             month: this.currMonth(),
             day: this.adapter.lastDateofMonth(this.currYear(), this.currMonth()),
@@ -2631,7 +2594,7 @@ class NgxCalendarComponent extends NgxDatePickerBase {
         if (this.view === 'month' || this.view === 'event') {
             const locale = this.adapter.toLocale(d);
             this.anchorDate.set(this.adapter.getDate({
-                locale: this._locale,
+                locale: this.locale(),
                 year: locale.year,
                 month: locale.month + direction,
                 day: 1,
@@ -2853,22 +2816,12 @@ class NgxCalendarComponent extends NgxDatePickerBase {
     defaultHeight = 600;
     minHeight = this.defaultHeight;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxCalendarComponent, isStandalone: true, selector: "ngx-calendar", inputs: { localize: { classPropertyName: "localize", publicName: "localize", isSignal: true, isRequired: false, transformFunction: null }, resizeAndMovable: { classPropertyName: "resizeAndMovable", publicName: "resizeAndMovable", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, setMin: { classPropertyName: "setMin", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, setMax: { classPropertyName: "setMax", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", selectEvent: "selectEvent", eventChange: "eventChange", eventsChange: "eventsChange" }, host: { listeners: { "window:resize": "onResize()", "document:pointermove": "onDocumentPointerMove($event)", "document:pointerup": "onDocumentPointerUp($event)", "document:pointercancel": "onDocumentPointerCancel($event)" } }, providers: [DateAdapterRegistry], viewQueries: [{ propertyName: "calendarWrapper", first: true, predicate: ["calendarWrapper"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" [class.is-interacting]=\"!!interaction\">\n  <div class=\"header\">\n    <div class=\"nxt-prv-buttons\">\n      <button type=\"button\" class=\"previous dtp-btn\" (click)=\"previous()\" title=\"Previous\">\n        <ng-template\n          [ngTemplateOutlet]=\"\n            _config.previousButtonTemplate || defaultPreviousBTNTemplate\n          \"></ng-template>\n      </button>\n      @if (_config.todayButton) {\n        <button type=\"button\" class=\"today dtp-btn\" (click)=\"gotoToday()\">\n          {{ localize().today }}\n        </button>\n      }\n      <button type=\"button\" class=\"next dtp-btn\" (click)=\"next()\" title=\"Next\">\n        <ng-template\n          [ngTemplateOutlet]=\"_config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\n      </button>\n    </div>\n\n    <div class=\"current-date\" aria-live=\"polite\">{{ headerText }}</div>\n\n    <div class=\"view-mode\">\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('month')\"\n        [class.active]=\"view === 'month'\">\n        {{ localize().month }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('week')\"\n        [class.active]=\"view === 'week'\">\n        {{ localize().week }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('day')\"\n        [class.active]=\"view === 'day'\">\n        {{ localize().day }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('event')\"\n        [class.active]=\"view === 'event'\">\n        {{ localize().event }}\n      </button>\n    </div>\n  </div>\n\n  <div class=\"calendar\" #calendarWrapper>\n    @switch (view) {\n      @case ('month') {\n        <ul class=\"weeks\">\n          @for (w of weeks; track $index) {\n            <li>{{ w }}</li>\n          }\n        </ul>\n\n        <div class=\"month-grid\" [style.minHeight.px]=\"minHeight\">\n          @for (row of monthEventRows; track $index; let rowIndex = $index) {\n            <div class=\"month-row\">\n              @for (\n                item of viewDays.slice(rowIndex * 7, rowIndex * 7 + 7);\n                track item.date?.getTime() ?? $index\n              ) {\n                <button\n                  type=\"button\"\n                  class=\"month-day\"\n                  [class.de-active]=\"!item.active\"\n                  [class.today]=\"item.isToday\"\n                  [class.selected]=\"item.selected\"\n                  (click)=\"selectDay($event, item)\">\n                  <span class=\"day-number\">{{ item.day }}</span>\n                </button>\n              }\n\n              <div class=\"month-event-layer\" aria-live=\"polite\">\n                @for (event of row; track event.id ?? event.start.getTime() ?? $index) {\n                  <button\n                    type=\"button\"\n                    class=\"month-event\"\n                    [class.continues-before]=\"event.continuesBefore\"\n                    [class.continues-after]=\"event.continuesAfter\"\n                    [class.event-start]=\"event.isStart\"\n                    [class.event-end]=\"event.isEnd\"\n                    [class.is-dragging]=\"\n                      interaction?.source === event ||\n                      (interaction?.source?.id != null && interaction?.source?.id === event.id)\n                    \"\n                    [style.gridColumn]=\"event.startColumn + 1 + ' / ' + (event.endColumn + 2)\"\n                    [style.gridRow]=\"event.lane + 1\"\n                    [style.background]=\"event.backgroundColor || event.color || null\"\n                    [style.borderColor]=\"event.borderColor || event.color || null\"\n                    [style.color]=\"event.textColor || null\"\n                    [title]=\"event.title || ''\"\n                    (pointerdown)=\"startMonthEventInteraction($event, event)\"\n                    (click)=\"\n                      onclickEvent($event, { date: event.start, day: 0, active: true }, event)\n                    \">\n                    @if (event.isStart) {\n                      <span class=\"event-title\">{{ event.title || 'Untitled event' }}</span>\n                    } @else {\n                      <span class=\"event-title continuation-title\">{{ event.title || '' }}</span>\n                    }\n                    @if (resizeAndMovable()) {\n                      @if (event.isStart) {\n                        <span\n                          class=\"resize-handle resize-handle-h resize-start\"\n                          title=\"Resize start\"\n                          (pointerdown)=\"\n                            startMonthEventInteraction($event, event, 'resize-start')\n                          \"></span>\n                      }\n                      @if (event.isEnd) {\n                        <span\n                          class=\"resize-handle resize-handle-h resize-end\"\n                          title=\"Resize end\"\n                          (pointerdown)=\"\n                            startMonthEventInteraction($event, event, 'resize-end')\n                          \"></span>\n                      }\n                    }\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @case ('week') {\n        <ng-container [ngTemplateOutlet]=\"timedCalendar\"></ng-container>\n      }\n\n      @case ('day') {\n        <ng-container [ngTemplateOutlet]=\"timedCalendar\"></ng-container>\n      }\n\n      @case ('event') {\n        <div class=\"event-list\">\n          @if (eventViewItems.length) {\n            @for (item of eventViewItems; track item.event.id ?? item.start.getTime()) {\n              <button\n                type=\"button\"\n                class=\"event-list-item\"\n                (click)=\"\n                  onclickEvent($event, { date: item.start, day: 0, active: true }, item.event)\n                \">\n                <span\n                  class=\"event-dot\"\n                  [style.background]=\"\n                    item.event.backgroundColor || item.event.color || null\n                  \"></span>\n                <span class=\"event-copy\">\n                  <strong>{{ item.event.title || 'Untitled event' }}</strong>\n                  <small>\n                    {{ formatEventDate(item.start) }}\n                    @if (item.end.getTime() !== item.start.getTime()) {\n                      \u2013 {{ formatEventDate(item.end) }}\n                    }\n                  </small>\n                </span>\n              </button>\n            }\n          } @else {\n            <div class=\"empty-events\">No events for this month.</div>\n          }\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<ng-template #timedCalendar>\n  <div class=\"timed-calendar\">\n    <div\n      class=\"timed-header\"\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\n      <div class=\"corner\"></div>\n      @for (day of weekDays; track day.date.getTime()) {\n        <button\n          type=\"button\"\n          class=\"day-header\"\n          [class.today]=\"day.isToday\"\n          (click)=\"selectDay($event, { date: day.date, day: 0, active: true })\">\n          <span>{{ day.label }}</span>\n          <strong>{{ day.dayNumber }}</strong>\n        </button>\n      }\n    </div>\n\n    <div\n      class=\"all-day-row\"\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\n      <div class=\"all-day-label\">All day</div>\n      @for (day of weekDays; track day.date.getTime(); let i = $index) {\n        <div class=\"all-day-cell\">\n          @for (\n            event of allDayByColumn[i];\n            track event.id ?? event.title ?? event.start.getTime()\n          ) {\n            <button\n              type=\"button\"\n              class=\"timed-event all-day-event\"\n              [class.continues-before]=\"event.continuesBefore\"\n              [class.continues-after]=\"event.continuesAfter\"\n              [style.background]=\"event.backgroundColor || event.color || null\"\n              [style.borderColor]=\"event.borderColor || event.color || null\"\n              [style.color]=\"event.textColor || null\"\n              [title]=\"event.title || ''\"\n              (pointerdown)=\"startTimedEventInteraction($event, event)\"\n              (click)=\"onTimedEventClick($event, event, day.date)\">\n              <span>{{ event.title || 'Untitled event' }}</span>\n              @if (resizeAndMovable()) {\n                @if (event.isStart) {\n                  <span\n                    class=\"resize-handle resize-handle-h resize-start\"\n                    title=\"Resize start\"\n                    (pointerdown)=\"\n                      startTimedEventInteraction($event, event, 'resize-start')\n                    \"></span>\n                }\n                @if (event.isEnd) {\n                  <span\n                    class=\"resize-handle resize-handle-h resize-end\"\n                    title=\"Resize end\"\n                    (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\n                }\n              }\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    <div\n      class=\"time-grid\"\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\n      <div class=\"time-axis\">\n        @for (minutes of timeSlots; track minutes) {\n          <div class=\"time-label\" [style.top.px]=\"(minutes / 60) * hourHeight\">\n            @if (minutes % 60 === 0) {\n              {{ formatTime(minutes) }}\n            }\n          </div>\n        }\n      </div>\n\n      @for (day of weekDays; track day.date.getTime()) {\n        <div class=\"day-column\">\n          @for (minutes of timeSlots; track minutes) {\n            <div class=\"time-slot\" [class.hour]=\"minutes % 60 === 0\"></div>\n          }\n\n          @for (event of day.events; track event.id ?? event.title ?? event.start.getTime()) {\n            <button\n              type=\"button\"\n              class=\"timed-event\"\n              [class.continues-before]=\"event.continuesBefore\"\n              [class.continues-after]=\"event.continuesAfter\"\n              [style.top.px]=\"event.top\"\n              [style.height.px]=\"event.height\"\n              [style.insetInlineStart.%]=\"event.column * (100 / event.columnCount)\"\n              [style.width.%]=\"100 / event.columnCount - 1\"\n              [style.background]=\"event.backgroundColor || event.color || null\"\n              [style.borderColor]=\"event.borderColor || event.color || null\"\n              [style.color]=\"event.textColor || null\"\n              [title]=\"event.title || ''\"\n              (pointerdown)=\"startTimedEventInteraction($event, event)\"\n              (click)=\"onTimedEventClick($event, event, day.date)\">\n              <strong>{{ event.title || 'Untitled event' }}</strong>\n              @if (event.height >= 42) {\n                <small>\n                  {{ formatTime(event.start.getHours() * 60 + event.start.getMinutes()) }}\n                </small>\n              }\n              @if (resizeAndMovable()) {\n                @if (event.isStart) {\n                  <span\n                    class=\"resize-handle resize-handle-v resize-start\"\n                    title=\"Resize start\"\n                    (pointerdown)=\"\n                      startTimedEventInteraction($event, event, 'resize-start')\n                    \"></span>\n                }\n                @if (event.isEnd) {\n                  <span\n                    class=\"resize-handle resize-handle-v resize-end\"\n                    title=\"Resize end\"\n                    (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\n                }\n              }\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultPreviousBTNTemplate>\n  <svg width=\"15px\" height=\"30px\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultNextBTNTemplate>\n  <svg width=\"15px\" height=\"30px\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\n  </svg>\n</ng-template>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #171a24);--ngx-color-text: light-dark(#16181d, #f7f7f8);--ngx-border-color: light-dark(#e1e4ea, #303541);--ngx-muted: color-mix(in srgb, var(--ngx-color-text) 55%, transparent);--ngx-event-bg: light-dark(#eef0ff, #2f3150);--ngx-event-text: light-dark(#3547a4, #dce1ff);--ngx-today: #3f51b5}.wrapper{background:var(--ngx-color-bg);color:var(--ngx-color-text);border:1px solid var(--ngx-border-color);border-radius:10px;overflow:hidden}.wrapper .dtp-btn{background:none;border:none;color:inherit;border-radius:6px;padding:5px 12px;box-shadow:0 0 4px #0000001f;transition:background .16s ease,transform .16s ease;display:inline-flex;align-items:center;justify-content:center}.wrapper .dtp-btn:not([disabled]):hover{cursor:pointer;background:#7f7fa02e}.wrapper .dtp-btn.active{background:#7f7fa03d}.wrapper .dtp-btn svg{fill:currentColor}.wrapper .header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-bottom:1px solid var(--ngx-border-color)}.wrapper .header .current-date{text-align:center;flex:1;min-width:0;font-weight:700}.wrapper .nxt-prv-buttons,.wrapper .view-mode{display:flex;align-items:center;gap:4px}.calendar{padding:10px;min-width:0}.weeks{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));list-style:none;padding:0;margin:0 0 8px;border-inline-start:1px solid var(--ngx-border-color)}.weeks li{padding:7px 4px;text-align:center;color:var(--ngx-muted);font-size:11px;font-weight:700;border-inline-end:1px solid var(--ngx-border-color)}.month-grid{display:grid;grid-template-rows:repeat(6,minmax(92px,1fr));border-inline-start:1px solid var(--ngx-border-color);border-top:1px solid var(--ngx-border-color);position:relative}.month-row{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-height:92px;border-bottom:1px solid var(--ngx-border-color)}.month-day{position:relative;min-width:0;min-height:92px;overflow:hidden;padding:4px;border:0;border-inline-end:1px solid var(--ngx-border-color);background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer;transition:background .15s ease}.month-day:hover{background:#7f7fa00d}.month-day.de-active{opacity:.48}.month-day.selected{outline:2px solid rgba(63,81,181,.3);outline-offset:-2px}.month-day.today .day-number{background:#3f51b51a;color:var(--ngx-today);font-weight:800}.day-number{width:27px;height:27px;display:grid;place-items:center;margin-inline-start:auto;border-radius:50%;font-size:12px;font-weight:600}.month-event-layer{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(4,26px);pointer-events:none;padding-top:34px}.month-event{position:relative;z-index:3;min-width:0;height:22px;margin-inline:2px;padding:2px 7px;border:1px solid transparent;border-radius:5px;overflow:hidden;background:var(--ngx-event-bg);color:var(--ngx-event-text);font:inherit;font-size:11px;font-weight:600;line-height:17px;text-align:start;white-space:nowrap;text-overflow:ellipsis;pointer-events:auto;cursor:grab;touch-action:none;box-sizing:border-box}.month-event:active{cursor:grabbing}.month-event:hover{filter:brightness(.97);box-shadow:0 2px 7px #00000024}.month-event.is-dragging{opacity:.78;box-shadow:0 5px 14px #0003}.month-event.continues-before{border-start-start-radius:2px;border-end-start-radius:2px;margin-inline-start:0}.month-event.continues-after{border-start-end-radius:2px;border-end-end-radius:2px;margin-inline-end:0}.event-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.continuation-title{opacity:.85}.resize-handle{position:absolute;z-index:5;touch-action:none;background:transparent}.resize-handle-h{top:0;bottom:0;width:11px;cursor:ew-resize}.resize-handle-h:after{content:\"\";position:absolute;top:5px;bottom:5px;inset-inline-start:4px;width:2px;border-radius:2px;background:currentColor;opacity:.45}.resize-handle-h.resize-start{inset-inline-start:-2px}.resize-handle-h.resize-end{inset-inline-end:-2px}.resize-handle-v{inset-inline:0;height:8px;cursor:ns-resize}.resize-handle-v:after{content:\"\";position:absolute;inset-inline:5px;height:2px;border-radius:2px;background:currentColor;opacity:.45}.resize-handle-v.resize-start{top:-2px}.resize-handle-v.resize-start:after{top:4px}.resize-handle-v.resize-end{bottom:-2px}.resize-handle-v.resize-end:after{bottom:4px}.timed-calendar{min-width:0;border:1px solid var(--ngx-border-color);border-radius:8px;overflow:auto}.timed-header,.all-day-row,.time-grid{display:grid;min-width:620px}.timed-header{position:sticky;top:0;z-index:5;background:var(--ngx-color-bg);border-bottom:1px solid var(--ngx-border-color)}.corner{border-inline-end:1px solid var(--ngx-border-color)}.day-header{min-width:0;height:58px;padding:6px;border:0;border-inline-end:1px solid var(--ngx-border-color);background:transparent;color:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.day-header span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--ngx-muted)}.day-header strong{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-size:14px}.day-header.today strong{background:var(--ngx-today);color:#fff}.day-header:hover{background:#7f7fa012}.all-day-row{min-height:34px;border-bottom:1px solid var(--ngx-border-color);background:color-mix(in srgb,var(--ngx-color-bg) 94%,currentColor)}.all-day-row .all-day-label{padding:8px 5px;color:var(--ngx-muted);font-size:10px;border-inline-end:1px solid var(--ngx-border-color);text-align:center}.all-day-row .all-day-cell{min-width:0;padding:4px;border-inline-end:1px solid var(--ngx-border-color);display:flex;flex-direction:column;gap:3px}.time-grid{position:relative;align-items:stretch;min-height:1536px}.time-axis{position:relative;border-inline-end:1px solid var(--ngx-border-color);background:var(--ngx-color-bg)}.time-label{position:absolute;inset-inline:0 5px;transform:translateY(-50%);text-align:end;color:var(--ngx-muted);font-size:10px;pointer-events:none}.day-column{position:relative;min-width:0;height:1536px;border-inline-end:1px solid var(--ngx-border-color);background:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,var(--ngx-border-color) 32px,transparent 33px,transparent 63px,var(--ngx-border-color) 64px)}.time-slot{height:32px;pointer-events:none;border-bottom:1px dashed color-mix(in srgb,var(--ngx-border-color) 55%,transparent)}.time-slot.hour{border-bottom-style:solid;border-bottom-color:var(--ngx-border-color)}.timed-event{position:absolute;z-index:2;min-width:24px;padding:4px 7px;border:1px solid transparent;border-radius:5px;overflow:hidden;background:var(--ngx-event-bg);color:var(--ngx-event-text);font:inherit;font-size:11px;line-height:15px;text-align:start;cursor:grab;box-sizing:border-box;touch-action:none;transition:filter .12s ease,box-shadow .12s ease}.timed-event:hover{filter:brightness(.97);box-shadow:0 2px 7px #00000024;z-index:4}.timed-event strong,.timed-event small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timed-event small{opacity:.72;font-size:10px}.timed-event.continues-before{border-start-start-radius:2px;border-end-start-radius:2px}.timed-event.continues-after{border-start-end-radius:2px;border-end-end-radius:2px}.timed-event.all-day-event{cursor:grab;position:relative;inset:auto!important;width:100%!important;min-height:24px;height:24px;padding-block:2px}.event-list{display:flex;flex-direction:column;gap:6px}.event-list-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--ngx-border-color);border-radius:8px;background:transparent;color:inherit;text-align:start;cursor:pointer}.event-list-item:hover{background:#7f7fa014}.event-list-item .event-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--ngx-today)}.event-list-item .event-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.event-list-item .event-copy strong,.event-list-item .event-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-list-item .event-copy small{opacity:.58}.empty-events{padding:30px;text-align:center;opacity:.55}:host-context([dir=rtl]) .nxt-prv-buttons .previous svg{transform:rotate(180deg)}:host-context([dir=rtl]) .nxt-prv-buttons .next svg{transform:rotate(180deg)}@media(max-width:700px){.wrapper .header{flex-wrap:wrap}.wrapper .header .current-date{order:-1;flex-basis:100%}.view-mode{width:100%;justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxCalendarComponent, isStandalone: true, selector: "ngx-calendar", inputs: { resizeAndMovable: { classPropertyName: "resizeAndMovable", publicName: "resizeAndMovable", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", selectEvent: "selectEvent", eventChange: "eventChange", eventsChange: "eventsChange" }, host: { listeners: { "window:resize": "onResize()", "document:pointermove": "onDocumentPointerMove($event)", "document:pointerup": "onDocumentPointerUp($event)", "document:pointercancel": "onDocumentPointerCancel($event)" } }, providers: [DateAdapterRegistry], viewQueries: [{ propertyName: "calendarWrapper", first: true, predicate: ["calendarWrapper"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" [class.is-interacting]=\"!!interaction\">\n  <div class=\"header\">\n    <div class=\"nxt-prv-buttons\">\n      <button type=\"button\" class=\"previous dtp-btn\" (click)=\"previous()\" title=\"Previous\">\n        <ng-template\n          [ngTemplateOutlet]=\"\n            _config.previousButtonTemplate || defaultPreviousBTNTemplate\n          \"></ng-template>\n      </button>\n      @if (_config.todayButton) {\n        <button type=\"button\" class=\"today dtp-btn\" (click)=\"gotoToday()\">\n          {{ localize().today }}\n        </button>\n      }\n      <button type=\"button\" class=\"next dtp-btn\" (click)=\"next()\" title=\"Next\">\n        <ng-template\n          [ngTemplateOutlet]=\"_config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\n      </button>\n    </div>\n\n    <div class=\"current-date\" aria-live=\"polite\">{{ headerText }}</div>\n\n    <div class=\"view-mode\">\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('month')\"\n        [class.active]=\"view === 'month'\">\n        {{ localize().month }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('week')\"\n        [class.active]=\"view === 'week'\">\n        {{ localize().week }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('day')\"\n        [class.active]=\"view === 'day'\">\n        {{ localize().day }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('event')\"\n        [class.active]=\"view === 'event'\">\n        {{ localize().event }}\n      </button>\n    </div>\n  </div>\n\n  <div class=\"calendar\" #calendarWrapper>\n    @switch (view) {\n      @case ('month') {\n        <ul class=\"weeks\">\n          @for (w of weeks; track $index) {\n            <li>{{ w }}</li>\n          }\n        </ul>\n\n        <div class=\"month-grid\" [style.minHeight.px]=\"minHeight\">\n          @for (row of monthEventRows; track $index; let rowIndex = $index) {\n            <div class=\"month-row\">\n              @for (\n                item of viewDays.slice(rowIndex * 7, rowIndex * 7 + 7);\n                track item.date?.getTime() ?? $index\n              ) {\n                <button\n                  type=\"button\"\n                  class=\"month-day\"\n                  [class.de-active]=\"!item.active\"\n                  [class.today]=\"item.isToday\"\n                  [class.selected]=\"item.selected\"\n                  (click)=\"selectDay($event, item)\">\n                  <span class=\"day-number\">{{ item.day }}</span>\n                </button>\n              }\n\n              <div class=\"month-event-layer\" aria-live=\"polite\">\n                @for (event of row; track event.id ?? event.start.getTime() ?? $index) {\n                  <button\n                    type=\"button\"\n                    class=\"month-event\"\n                    [class.continues-before]=\"event.continuesBefore\"\n                    [class.continues-after]=\"event.continuesAfter\"\n                    [class.event-start]=\"event.isStart\"\n                    [class.event-end]=\"event.isEnd\"\n                    [class.is-dragging]=\"\n                      interaction?.source === event ||\n                      (interaction?.source?.id != null && interaction?.source?.id === event.id)\n                    \"\n                    [style.gridColumn]=\"event.startColumn + 1 + ' / ' + (event.endColumn + 2)\"\n                    [style.gridRow]=\"event.lane + 1\"\n                    [style.background]=\"event.backgroundColor || event.color || null\"\n                    [style.borderColor]=\"event.borderColor || event.color || null\"\n                    [style.color]=\"event.textColor || null\"\n                    [title]=\"event.title || ''\"\n                    (pointerdown)=\"startMonthEventInteraction($event, event)\"\n                    (click)=\"\n                      onclickEvent($event, { date: event.start, day: 0, active: true }, event)\n                    \">\n                    @if (event.isStart) {\n                      <span class=\"event-title\">{{ event.title || 'Untitled event' }}</span>\n                    } @else {\n                      <span class=\"event-title continuation-title\">{{ event.title || '' }}</span>\n                    }\n                    @if (resizeAndMovable()) {\n                      @if (event.isStart) {\n                        <span\n                          class=\"resize-handle resize-handle-h resize-start\"\n                          title=\"Resize start\"\n                          (pointerdown)=\"\n                            startMonthEventInteraction($event, event, 'resize-start')\n                          \"></span>\n                      }\n                      @if (event.isEnd) {\n                        <span\n                          class=\"resize-handle resize-handle-h resize-end\"\n                          title=\"Resize end\"\n                          (pointerdown)=\"\n                            startMonthEventInteraction($event, event, 'resize-end')\n                          \"></span>\n                      }\n                    }\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @case ('week') {\n        <ng-container [ngTemplateOutlet]=\"timedCalendar\"></ng-container>\n      }\n\n      @case ('day') {\n        <ng-container [ngTemplateOutlet]=\"timedCalendar\"></ng-container>\n      }\n\n      @case ('event') {\n        <div class=\"event-list\">\n          @if (eventViewItems.length) {\n            @for (item of eventViewItems; track item.event.id ?? item.start.getTime()) {\n              <button\n                type=\"button\"\n                class=\"event-list-item\"\n                (click)=\"\n                  onclickEvent($event, { date: item.start, day: 0, active: true }, item.event)\n                \">\n                <span\n                  class=\"event-dot\"\n                  [style.background]=\"\n                    item.event.backgroundColor || item.event.color || null\n                  \"></span>\n                <span class=\"event-copy\">\n                  <strong>{{ item.event.title || 'Untitled event' }}</strong>\n                  <small>\n                    {{ formatEventDate(item.start) }}\n                    @if (item.end.getTime() !== item.start.getTime()) {\n                      \u2013 {{ formatEventDate(item.end) }}\n                    }\n                  </small>\n                </span>\n              </button>\n            }\n          } @else {\n            <div class=\"empty-events\">No events for this month.</div>\n          }\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<ng-template #timedCalendar>\n  <div class=\"timed-calendar\">\n    <div\n      class=\"timed-header\"\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\n      <div class=\"corner\"></div>\n      @for (day of weekDays; track day.date.getTime()) {\n        <button\n          type=\"button\"\n          class=\"day-header\"\n          [class.today]=\"day.isToday\"\n          (click)=\"selectDay($event, { date: day.date, day: 0, active: true })\">\n          <span>{{ day.label }}</span>\n          <strong>{{ day.dayNumber }}</strong>\n        </button>\n      }\n    </div>\n\n    <div\n      class=\"all-day-row\"\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\n      <div class=\"all-day-label\">All day</div>\n      @for (day of weekDays; track day.date.getTime(); let i = $index) {\n        <div class=\"all-day-cell\">\n          @for (\n            event of allDayByColumn[i];\n            track event.id ?? event.title ?? event.start.getTime()\n          ) {\n            <button\n              type=\"button\"\n              class=\"timed-event all-day-event\"\n              [class.continues-before]=\"event.continuesBefore\"\n              [class.continues-after]=\"event.continuesAfter\"\n              [style.background]=\"event.backgroundColor || event.color || null\"\n              [style.borderColor]=\"event.borderColor || event.color || null\"\n              [style.color]=\"event.textColor || null\"\n              [title]=\"event.title || ''\"\n              (pointerdown)=\"startTimedEventInteraction($event, event)\"\n              (click)=\"onTimedEventClick($event, event, day.date)\">\n              <span>{{ event.title || 'Untitled event' }}</span>\n              @if (resizeAndMovable()) {\n                @if (event.isStart) {\n                  <span\n                    class=\"resize-handle resize-handle-h resize-start\"\n                    title=\"Resize start\"\n                    (pointerdown)=\"\n                      startTimedEventInteraction($event, event, 'resize-start')\n                    \"></span>\n                }\n                @if (event.isEnd) {\n                  <span\n                    class=\"resize-handle resize-handle-h resize-end\"\n                    title=\"Resize end\"\n                    (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\n                }\n              }\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    <div\n      class=\"time-grid\"\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\n      <div class=\"time-axis\">\n        @for (minutes of timeSlots; track minutes) {\n          <div class=\"time-label\" [style.top.px]=\"(minutes / 60) * hourHeight\">\n            @if (minutes % 60 === 0) {\n              {{ formatTime(minutes) }}\n            }\n          </div>\n        }\n      </div>\n\n      @for (day of weekDays; track day.date.getTime()) {\n        <div class=\"day-column\">\n          @for (minutes of timeSlots; track minutes) {\n            <div class=\"time-slot\" [class.hour]=\"minutes % 60 === 0\"></div>\n          }\n\n          @for (event of day.events; track event.id ?? event.title ?? event.start.getTime()) {\n            <button\n              type=\"button\"\n              class=\"timed-event\"\n              [class.continues-before]=\"event.continuesBefore\"\n              [class.continues-after]=\"event.continuesAfter\"\n              [style.top.px]=\"event.top\"\n              [style.height.px]=\"event.height\"\n              [style.insetInlineStart.%]=\"event.column * (100 / event.columnCount)\"\n              [style.width.%]=\"100 / event.columnCount - 1\"\n              [style.background]=\"event.backgroundColor || event.color || null\"\n              [style.borderColor]=\"event.borderColor || event.color || null\"\n              [style.color]=\"event.textColor || null\"\n              [title]=\"event.title || ''\"\n              (pointerdown)=\"startTimedEventInteraction($event, event)\"\n              (click)=\"onTimedEventClick($event, event, day.date)\">\n              <strong>{{ event.title || 'Untitled event' }}</strong>\n              @if (event.height >= 42) {\n                <small>\n                  {{ formatTime(event.start.getHours() * 60 + event.start.getMinutes()) }}\n                </small>\n              }\n              @if (resizeAndMovable()) {\n                @if (event.isStart) {\n                  <span\n                    class=\"resize-handle resize-handle-v resize-start\"\n                    title=\"Resize start\"\n                    (pointerdown)=\"\n                      startTimedEventInteraction($event, event, 'resize-start')\n                    \"></span>\n                }\n                @if (event.isEnd) {\n                  <span\n                    class=\"resize-handle resize-handle-v resize-end\"\n                    title=\"Resize end\"\n                    (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\n                }\n              }\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultPreviousBTNTemplate>\n  <svg width=\"15px\" height=\"30px\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultNextBTNTemplate>\n  <svg width=\"15px\" height=\"30px\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\n  </svg>\n</ng-template>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #171a24);--ngx-color-text: light-dark(#16181d, #f7f7f8);--ngx-border-color: light-dark(#e1e4ea, #303541);--ngx-muted: color-mix(in srgb, var(--ngx-color-text) 55%, transparent);--ngx-event-bg: light-dark(#eef0ff, #2f3150);--ngx-event-text: light-dark(#3547a4, #dce1ff);--ngx-today: #3f51b5}.wrapper{background:var(--ngx-color-bg);color:var(--ngx-color-text);border:1px solid var(--ngx-border-color);border-radius:10px;overflow:hidden}.wrapper .dtp-btn{background:none;border:none;color:inherit;border-radius:6px;padding:5px 12px;box-shadow:0 0 4px #0000001f;transition:background .16s ease,transform .16s ease;display:inline-flex;align-items:center;justify-content:center}.wrapper .dtp-btn:not([disabled]):hover{cursor:pointer;background:#7f7fa02e}.wrapper .dtp-btn.active{background:#7f7fa03d}.wrapper .dtp-btn svg{fill:currentColor}.wrapper .header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-bottom:1px solid var(--ngx-border-color)}.wrapper .header .current-date{text-align:center;flex:1;min-width:0;font-weight:700}.wrapper .nxt-prv-buttons,.wrapper .view-mode{display:flex;align-items:center;gap:4px}.calendar{padding:10px;min-width:0}.weeks{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));list-style:none;padding:0;margin:0 0 8px;border-inline-start:1px solid var(--ngx-border-color)}.weeks li{padding:7px 4px;text-align:center;color:var(--ngx-muted);font-size:11px;font-weight:700;border-inline-end:1px solid var(--ngx-border-color)}.month-grid{display:grid;grid-template-rows:repeat(6,minmax(92px,1fr));border-inline-start:1px solid var(--ngx-border-color);border-top:1px solid var(--ngx-border-color);position:relative}.month-row{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-height:92px;border-bottom:1px solid var(--ngx-border-color)}.month-day{position:relative;min-width:0;min-height:92px;overflow:hidden;padding:4px;border:0;border-inline-end:1px solid var(--ngx-border-color);background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer;transition:background .15s ease}.month-day:hover{background:#7f7fa00d}.month-day.de-active{opacity:.48}.month-day.selected{outline:2px solid rgba(63,81,181,.3);outline-offset:-2px}.month-day.today .day-number{background:#3f51b51a;color:var(--ngx-today);font-weight:800}.day-number{width:27px;height:27px;display:grid;place-items:center;margin-inline-start:auto;border-radius:50%;font-size:12px;font-weight:600}.month-event-layer{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(4,26px);pointer-events:none;padding-top:34px}.month-event{position:relative;z-index:3;min-width:0;height:22px;margin-inline:2px;padding:2px 7px;border:1px solid transparent;border-radius:5px;overflow:hidden;background:var(--ngx-event-bg);color:var(--ngx-event-text);font:inherit;font-size:11px;font-weight:600;line-height:17px;text-align:start;white-space:nowrap;text-overflow:ellipsis;pointer-events:auto;cursor:grab;touch-action:none;box-sizing:border-box}.month-event:active{cursor:grabbing}.month-event:hover{filter:brightness(.97);box-shadow:0 2px 7px #00000024}.month-event.is-dragging{opacity:.78;box-shadow:0 5px 14px #0003}.month-event.continues-before{border-start-start-radius:2px;border-end-start-radius:2px;margin-inline-start:0}.month-event.continues-after{border-start-end-radius:2px;border-end-end-radius:2px;margin-inline-end:0}.event-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.continuation-title{opacity:.85}.resize-handle{position:absolute;z-index:5;touch-action:none;background:transparent}.resize-handle-h{top:0;bottom:0;width:11px;cursor:ew-resize}.resize-handle-h:after{content:\"\";position:absolute;top:5px;bottom:5px;inset-inline-start:4px;width:2px;border-radius:2px;background:currentColor;opacity:.45}.resize-handle-h.resize-start{inset-inline-start:-2px}.resize-handle-h.resize-end{inset-inline-end:-2px}.resize-handle-v{inset-inline:0;height:8px;cursor:ns-resize}.resize-handle-v:after{content:\"\";position:absolute;inset-inline:5px;height:2px;border-radius:2px;background:currentColor;opacity:.45}.resize-handle-v.resize-start{top:-2px}.resize-handle-v.resize-start:after{top:4px}.resize-handle-v.resize-end{bottom:-2px}.resize-handle-v.resize-end:after{bottom:4px}.timed-calendar{min-width:0;border:1px solid var(--ngx-border-color);border-radius:8px;overflow:auto}.timed-header,.all-day-row,.time-grid{display:grid;min-width:620px}.timed-header{position:sticky;top:0;z-index:5;background:var(--ngx-color-bg);border-bottom:1px solid var(--ngx-border-color)}.corner{border-inline-end:1px solid var(--ngx-border-color)}.day-header{min-width:0;height:58px;padding:6px;border:0;border-inline-end:1px solid var(--ngx-border-color);background:transparent;color:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.day-header span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--ngx-muted)}.day-header strong{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-size:14px}.day-header.today strong{background:var(--ngx-today);color:#fff}.day-header:hover{background:#7f7fa012}.all-day-row{min-height:34px;border-bottom:1px solid var(--ngx-border-color);background:color-mix(in srgb,var(--ngx-color-bg) 94%,currentColor)}.all-day-row .all-day-label{padding:8px 5px;color:var(--ngx-muted);font-size:10px;border-inline-end:1px solid var(--ngx-border-color);text-align:center}.all-day-row .all-day-cell{min-width:0;padding:4px;border-inline-end:1px solid var(--ngx-border-color);display:flex;flex-direction:column;gap:3px}.time-grid{position:relative;align-items:stretch;min-height:1536px}.time-axis{position:relative;border-inline-end:1px solid var(--ngx-border-color);background:var(--ngx-color-bg)}.time-label{position:absolute;inset-inline:0 5px;transform:translateY(-50%);text-align:end;color:var(--ngx-muted);font-size:10px;pointer-events:none}.day-column{position:relative;min-width:0;height:1536px;border-inline-end:1px solid var(--ngx-border-color);background:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,var(--ngx-border-color) 32px,transparent 33px,transparent 63px,var(--ngx-border-color) 64px)}.time-slot{height:32px;pointer-events:none;border-bottom:1px dashed color-mix(in srgb,var(--ngx-border-color) 55%,transparent)}.time-slot.hour{border-bottom-style:solid;border-bottom-color:var(--ngx-border-color)}.timed-event{position:absolute;z-index:2;min-width:24px;padding:4px 7px;border:1px solid transparent;border-radius:5px;overflow:hidden;background:var(--ngx-event-bg);color:var(--ngx-event-text);font:inherit;font-size:11px;line-height:15px;text-align:start;cursor:grab;box-sizing:border-box;touch-action:none;transition:filter .12s ease,box-shadow .12s ease}.timed-event:hover{filter:brightness(.97);box-shadow:0 2px 7px #00000024;z-index:4}.timed-event strong,.timed-event small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timed-event small{opacity:.72;font-size:10px}.timed-event.continues-before{border-start-start-radius:2px;border-end-start-radius:2px}.timed-event.continues-after{border-start-end-radius:2px;border-end-end-radius:2px}.timed-event.all-day-event{cursor:grab;position:relative;inset:auto!important;width:100%!important;min-height:24px;height:24px;padding-block:2px}.event-list{display:flex;flex-direction:column;gap:6px}.event-list-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--ngx-border-color);border-radius:8px;background:transparent;color:inherit;text-align:start;cursor:pointer}.event-list-item:hover{background:#7f7fa014}.event-list-item .event-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--ngx-today)}.event-list-item .event-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.event-list-item .event-copy strong,.event-list-item .event-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-list-item .event-copy small{opacity:.58}.empty-events{padding:30px;text-align:center;opacity:.55}:host-context([dir=rtl]) .nxt-prv-buttons .previous svg{transform:rotate(180deg)}:host-context([dir=rtl]) .nxt-prv-buttons .next svg{transform:rotate(180deg)}@media(max-width:700px){.wrapper .header{flex-wrap:wrap}.wrapper .header .current-date{order:-1;flex-basis:100%}.view-mode{width:100%;justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-calendar', imports: [CommonModule], providers: [DateAdapterRegistry], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wrapper\" [class.is-interacting]=\"!!interaction\">\n  <div class=\"header\">\n    <div class=\"nxt-prv-buttons\">\n      <button type=\"button\" class=\"previous dtp-btn\" (click)=\"previous()\" title=\"Previous\">\n        <ng-template\n          [ngTemplateOutlet]=\"\n            _config.previousButtonTemplate || defaultPreviousBTNTemplate\n          \"></ng-template>\n      </button>\n      @if (_config.todayButton) {\n        <button type=\"button\" class=\"today dtp-btn\" (click)=\"gotoToday()\">\n          {{ localize().today }}\n        </button>\n      }\n      <button type=\"button\" class=\"next dtp-btn\" (click)=\"next()\" title=\"Next\">\n        <ng-template\n          [ngTemplateOutlet]=\"_config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\n      </button>\n    </div>\n\n    <div class=\"current-date\" aria-live=\"polite\">{{ headerText }}</div>\n\n    <div class=\"view-mode\">\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('month')\"\n        [class.active]=\"view === 'month'\">\n        {{ localize().month }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('week')\"\n        [class.active]=\"view === 'week'\">\n        {{ localize().week }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('day')\"\n        [class.active]=\"view === 'day'\">\n        {{ localize().day }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('event')\"\n        [class.active]=\"view === 'event'\">\n        {{ localize().event }}\n      </button>\n    </div>\n  </div>\n\n  <div class=\"calendar\" #calendarWrapper>\n    @switch (view) {\n      @case ('month') {\n        <ul class=\"weeks\">\n          @for (w of weeks; track $index) {\n            <li>{{ w }}</li>\n          }\n        </ul>\n\n        <div class=\"month-grid\" [style.minHeight.px]=\"minHeight\">\n          @for (row of monthEventRows; track $index; let rowIndex = $index) {\n            <div class=\"month-row\">\n              @for (\n                item of viewDays.slice(rowIndex * 7, rowIndex * 7 + 7);\n                track item.date?.getTime() ?? $index\n              ) {\n                <button\n                  type=\"button\"\n                  class=\"month-day\"\n                  [class.de-active]=\"!item.active\"\n                  [class.today]=\"item.isToday\"\n                  [class.selected]=\"item.selected\"\n                  (click)=\"selectDay($event, item)\">\n                  <span class=\"day-number\">{{ item.day }}</span>\n                </button>\n              }\n\n              <div class=\"month-event-layer\" aria-live=\"polite\">\n                @for (event of row; track event.id ?? event.start.getTime() ?? $index) {\n                  <button\n                    type=\"button\"\n                    class=\"month-event\"\n                    [class.continues-before]=\"event.continuesBefore\"\n                    [class.continues-after]=\"event.continuesAfter\"\n                    [class.event-start]=\"event.isStart\"\n                    [class.event-end]=\"event.isEnd\"\n                    [class.is-dragging]=\"\n                      interaction?.source === event ||\n                      (interaction?.source?.id != null && interaction?.source?.id === event.id)\n                    \"\n                    [style.gridColumn]=\"event.startColumn + 1 + ' / ' + (event.endColumn + 2)\"\n                    [style.gridRow]=\"event.lane + 1\"\n                    [style.background]=\"event.backgroundColor || event.color || null\"\n                    [style.borderColor]=\"event.borderColor || event.color || null\"\n                    [style.color]=\"event.textColor || null\"\n                    [title]=\"event.title || ''\"\n                    (pointerdown)=\"startMonthEventInteraction($event, event)\"\n                    (click)=\"\n                      onclickEvent($event, { date: event.start, day: 0, active: true }, event)\n                    \">\n                    @if (event.isStart) {\n                      <span class=\"event-title\">{{ event.title || 'Untitled event' }}</span>\n                    } @else {\n                      <span class=\"event-title continuation-title\">{{ event.title || '' }}</span>\n                    }\n                    @if (resizeAndMovable()) {\n                      @if (event.isStart) {\n                        <span\n                          class=\"resize-handle resize-handle-h resize-start\"\n                          title=\"Resize start\"\n                          (pointerdown)=\"\n                            startMonthEventInteraction($event, event, 'resize-start')\n                          \"></span>\n                      }\n                      @if (event.isEnd) {\n                        <span\n                          class=\"resize-handle resize-handle-h resize-end\"\n                          title=\"Resize end\"\n                          (pointerdown)=\"\n                            startMonthEventInteraction($event, event, 'resize-end')\n                          \"></span>\n                      }\n                    }\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @case ('week') {\n        <ng-container [ngTemplateOutlet]=\"timedCalendar\"></ng-container>\n      }\n\n      @case ('day') {\n        <ng-container [ngTemplateOutlet]=\"timedCalendar\"></ng-container>\n      }\n\n      @case ('event') {\n        <div class=\"event-list\">\n          @if (eventViewItems.length) {\n            @for (item of eventViewItems; track item.event.id ?? item.start.getTime()) {\n              <button\n                type=\"button\"\n                class=\"event-list-item\"\n                (click)=\"\n                  onclickEvent($event, { date: item.start, day: 0, active: true }, item.event)\n                \">\n                <span\n                  class=\"event-dot\"\n                  [style.background]=\"\n                    item.event.backgroundColor || item.event.color || null\n                  \"></span>\n                <span class=\"event-copy\">\n                  <strong>{{ item.event.title || 'Untitled event' }}</strong>\n                  <small>\n                    {{ formatEventDate(item.start) }}\n                    @if (item.end.getTime() !== item.start.getTime()) {\n                      \u2013 {{ formatEventDate(item.end) }}\n                    }\n                  </small>\n                </span>\n              </button>\n            }\n          } @else {\n            <div class=\"empty-events\">No events for this month.</div>\n          }\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<ng-template #timedCalendar>\n  <div class=\"timed-calendar\">\n    <div\n      class=\"timed-header\"\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\n      <div class=\"corner\"></div>\n      @for (day of weekDays; track day.date.getTime()) {\n        <button\n          type=\"button\"\n          class=\"day-header\"\n          [class.today]=\"day.isToday\"\n          (click)=\"selectDay($event, { date: day.date, day: 0, active: true })\">\n          <span>{{ day.label }}</span>\n          <strong>{{ day.dayNumber }}</strong>\n        </button>\n      }\n    </div>\n\n    <div\n      class=\"all-day-row\"\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\n      <div class=\"all-day-label\">All day</div>\n      @for (day of weekDays; track day.date.getTime(); let i = $index) {\n        <div class=\"all-day-cell\">\n          @for (\n            event of allDayByColumn[i];\n            track event.id ?? event.title ?? event.start.getTime()\n          ) {\n            <button\n              type=\"button\"\n              class=\"timed-event all-day-event\"\n              [class.continues-before]=\"event.continuesBefore\"\n              [class.continues-after]=\"event.continuesAfter\"\n              [style.background]=\"event.backgroundColor || event.color || null\"\n              [style.borderColor]=\"event.borderColor || event.color || null\"\n              [style.color]=\"event.textColor || null\"\n              [title]=\"event.title || ''\"\n              (pointerdown)=\"startTimedEventInteraction($event, event)\"\n              (click)=\"onTimedEventClick($event, event, day.date)\">\n              <span>{{ event.title || 'Untitled event' }}</span>\n              @if (resizeAndMovable()) {\n                @if (event.isStart) {\n                  <span\n                    class=\"resize-handle resize-handle-h resize-start\"\n                    title=\"Resize start\"\n                    (pointerdown)=\"\n                      startTimedEventInteraction($event, event, 'resize-start')\n                    \"></span>\n                }\n                @if (event.isEnd) {\n                  <span\n                    class=\"resize-handle resize-handle-h resize-end\"\n                    title=\"Resize end\"\n                    (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\n                }\n              }\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    <div\n      class=\"time-grid\"\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\n      <div class=\"time-axis\">\n        @for (minutes of timeSlots; track minutes) {\n          <div class=\"time-label\" [style.top.px]=\"(minutes / 60) * hourHeight\">\n            @if (minutes % 60 === 0) {\n              {{ formatTime(minutes) }}\n            }\n          </div>\n        }\n      </div>\n\n      @for (day of weekDays; track day.date.getTime()) {\n        <div class=\"day-column\">\n          @for (minutes of timeSlots; track minutes) {\n            <div class=\"time-slot\" [class.hour]=\"minutes % 60 === 0\"></div>\n          }\n\n          @for (event of day.events; track event.id ?? event.title ?? event.start.getTime()) {\n            <button\n              type=\"button\"\n              class=\"timed-event\"\n              [class.continues-before]=\"event.continuesBefore\"\n              [class.continues-after]=\"event.continuesAfter\"\n              [style.top.px]=\"event.top\"\n              [style.height.px]=\"event.height\"\n              [style.insetInlineStart.%]=\"event.column * (100 / event.columnCount)\"\n              [style.width.%]=\"100 / event.columnCount - 1\"\n              [style.background]=\"event.backgroundColor || event.color || null\"\n              [style.borderColor]=\"event.borderColor || event.color || null\"\n              [style.color]=\"event.textColor || null\"\n              [title]=\"event.title || ''\"\n              (pointerdown)=\"startTimedEventInteraction($event, event)\"\n              (click)=\"onTimedEventClick($event, event, day.date)\">\n              <strong>{{ event.title || 'Untitled event' }}</strong>\n              @if (event.height >= 42) {\n                <small>\n                  {{ formatTime(event.start.getHours() * 60 + event.start.getMinutes()) }}\n                </small>\n              }\n              @if (resizeAndMovable()) {\n                @if (event.isStart) {\n                  <span\n                    class=\"resize-handle resize-handle-v resize-start\"\n                    title=\"Resize start\"\n                    (pointerdown)=\"\n                      startTimedEventInteraction($event, event, 'resize-start')\n                    \"></span>\n                }\n                @if (event.isEnd) {\n                  <span\n                    class=\"resize-handle resize-handle-v resize-end\"\n                    title=\"Resize end\"\n                    (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\n                }\n              }\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultPreviousBTNTemplate>\n  <svg width=\"15px\" height=\"30px\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultNextBTNTemplate>\n  <svg width=\"15px\" height=\"30px\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\n  </svg>\n</ng-template>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #171a24);--ngx-color-text: light-dark(#16181d, #f7f7f8);--ngx-border-color: light-dark(#e1e4ea, #303541);--ngx-muted: color-mix(in srgb, var(--ngx-color-text) 55%, transparent);--ngx-event-bg: light-dark(#eef0ff, #2f3150);--ngx-event-text: light-dark(#3547a4, #dce1ff);--ngx-today: #3f51b5}.wrapper{background:var(--ngx-color-bg);color:var(--ngx-color-text);border:1px solid var(--ngx-border-color);border-radius:10px;overflow:hidden}.wrapper .dtp-btn{background:none;border:none;color:inherit;border-radius:6px;padding:5px 12px;box-shadow:0 0 4px #0000001f;transition:background .16s ease,transform .16s ease;display:inline-flex;align-items:center;justify-content:center}.wrapper .dtp-btn:not([disabled]):hover{cursor:pointer;background:#7f7fa02e}.wrapper .dtp-btn.active{background:#7f7fa03d}.wrapper .dtp-btn svg{fill:currentColor}.wrapper .header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-bottom:1px solid var(--ngx-border-color)}.wrapper .header .current-date{text-align:center;flex:1;min-width:0;font-weight:700}.wrapper .nxt-prv-buttons,.wrapper .view-mode{display:flex;align-items:center;gap:4px}.calendar{padding:10px;min-width:0}.weeks{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));list-style:none;padding:0;margin:0 0 8px;border-inline-start:1px solid var(--ngx-border-color)}.weeks li{padding:7px 4px;text-align:center;color:var(--ngx-muted);font-size:11px;font-weight:700;border-inline-end:1px solid var(--ngx-border-color)}.month-grid{display:grid;grid-template-rows:repeat(6,minmax(92px,1fr));border-inline-start:1px solid var(--ngx-border-color);border-top:1px solid var(--ngx-border-color);position:relative}.month-row{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-height:92px;border-bottom:1px solid var(--ngx-border-color)}.month-day{position:relative;min-width:0;min-height:92px;overflow:hidden;padding:4px;border:0;border-inline-end:1px solid var(--ngx-border-color);background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer;transition:background .15s ease}.month-day:hover{background:#7f7fa00d}.month-day.de-active{opacity:.48}.month-day.selected{outline:2px solid rgba(63,81,181,.3);outline-offset:-2px}.month-day.today .day-number{background:#3f51b51a;color:var(--ngx-today);font-weight:800}.day-number{width:27px;height:27px;display:grid;place-items:center;margin-inline-start:auto;border-radius:50%;font-size:12px;font-weight:600}.month-event-layer{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(4,26px);pointer-events:none;padding-top:34px}.month-event{position:relative;z-index:3;min-width:0;height:22px;margin-inline:2px;padding:2px 7px;border:1px solid transparent;border-radius:5px;overflow:hidden;background:var(--ngx-event-bg);color:var(--ngx-event-text);font:inherit;font-size:11px;font-weight:600;line-height:17px;text-align:start;white-space:nowrap;text-overflow:ellipsis;pointer-events:auto;cursor:grab;touch-action:none;box-sizing:border-box}.month-event:active{cursor:grabbing}.month-event:hover{filter:brightness(.97);box-shadow:0 2px 7px #00000024}.month-event.is-dragging{opacity:.78;box-shadow:0 5px 14px #0003}.month-event.continues-before{border-start-start-radius:2px;border-end-start-radius:2px;margin-inline-start:0}.month-event.continues-after{border-start-end-radius:2px;border-end-end-radius:2px;margin-inline-end:0}.event-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.continuation-title{opacity:.85}.resize-handle{position:absolute;z-index:5;touch-action:none;background:transparent}.resize-handle-h{top:0;bottom:0;width:11px;cursor:ew-resize}.resize-handle-h:after{content:\"\";position:absolute;top:5px;bottom:5px;inset-inline-start:4px;width:2px;border-radius:2px;background:currentColor;opacity:.45}.resize-handle-h.resize-start{inset-inline-start:-2px}.resize-handle-h.resize-end{inset-inline-end:-2px}.resize-handle-v{inset-inline:0;height:8px;cursor:ns-resize}.resize-handle-v:after{content:\"\";position:absolute;inset-inline:5px;height:2px;border-radius:2px;background:currentColor;opacity:.45}.resize-handle-v.resize-start{top:-2px}.resize-handle-v.resize-start:after{top:4px}.resize-handle-v.resize-end{bottom:-2px}.resize-handle-v.resize-end:after{bottom:4px}.timed-calendar{min-width:0;border:1px solid var(--ngx-border-color);border-radius:8px;overflow:auto}.timed-header,.all-day-row,.time-grid{display:grid;min-width:620px}.timed-header{position:sticky;top:0;z-index:5;background:var(--ngx-color-bg);border-bottom:1px solid var(--ngx-border-color)}.corner{border-inline-end:1px solid var(--ngx-border-color)}.day-header{min-width:0;height:58px;padding:6px;border:0;border-inline-end:1px solid var(--ngx-border-color);background:transparent;color:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.day-header span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--ngx-muted)}.day-header strong{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-size:14px}.day-header.today strong{background:var(--ngx-today);color:#fff}.day-header:hover{background:#7f7fa012}.all-day-row{min-height:34px;border-bottom:1px solid var(--ngx-border-color);background:color-mix(in srgb,var(--ngx-color-bg) 94%,currentColor)}.all-day-row .all-day-label{padding:8px 5px;color:var(--ngx-muted);font-size:10px;border-inline-end:1px solid var(--ngx-border-color);text-align:center}.all-day-row .all-day-cell{min-width:0;padding:4px;border-inline-end:1px solid var(--ngx-border-color);display:flex;flex-direction:column;gap:3px}.time-grid{position:relative;align-items:stretch;min-height:1536px}.time-axis{position:relative;border-inline-end:1px solid var(--ngx-border-color);background:var(--ngx-color-bg)}.time-label{position:absolute;inset-inline:0 5px;transform:translateY(-50%);text-align:end;color:var(--ngx-muted);font-size:10px;pointer-events:none}.day-column{position:relative;min-width:0;height:1536px;border-inline-end:1px solid var(--ngx-border-color);background:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,var(--ngx-border-color) 32px,transparent 33px,transparent 63px,var(--ngx-border-color) 64px)}.time-slot{height:32px;pointer-events:none;border-bottom:1px dashed color-mix(in srgb,var(--ngx-border-color) 55%,transparent)}.time-slot.hour{border-bottom-style:solid;border-bottom-color:var(--ngx-border-color)}.timed-event{position:absolute;z-index:2;min-width:24px;padding:4px 7px;border:1px solid transparent;border-radius:5px;overflow:hidden;background:var(--ngx-event-bg);color:var(--ngx-event-text);font:inherit;font-size:11px;line-height:15px;text-align:start;cursor:grab;box-sizing:border-box;touch-action:none;transition:filter .12s ease,box-shadow .12s ease}.timed-event:hover{filter:brightness(.97);box-shadow:0 2px 7px #00000024;z-index:4}.timed-event strong,.timed-event small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timed-event small{opacity:.72;font-size:10px}.timed-event.continues-before{border-start-start-radius:2px;border-end-start-radius:2px}.timed-event.continues-after{border-start-end-radius:2px;border-end-end-radius:2px}.timed-event.all-day-event{cursor:grab;position:relative;inset:auto!important;width:100%!important;min-height:24px;height:24px;padding-block:2px}.event-list{display:flex;flex-direction:column;gap:6px}.event-list-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--ngx-border-color);border-radius:8px;background:transparent;color:inherit;text-align:start;cursor:pointer}.event-list-item:hover{background:#7f7fa014}.event-list-item .event-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--ngx-today)}.event-list-item .event-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.event-list-item .event-copy strong,.event-list-item .event-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-list-item .event-copy small{opacity:.58}.empty-events{padding:30px;text-align:center;opacity:.55}:host-context([dir=rtl]) .nxt-prv-buttons .previous svg{transform:rotate(180deg)}:host-context([dir=rtl]) .nxt-prv-buttons .next svg{transform:rotate(180deg)}@media(max-width:700px){.wrapper .header{flex-wrap:wrap}.wrapper .header .current-date{order:-1;flex-basis:100%}.view-mode{width:100%;justify-content:center}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { localize: [{ type: i0.Input, args: [{ isSignal: true, alias: "localize", required: false }] }], resizeAndMovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeAndMovable", required: false }] }], config: [{
-                type: Input
-            }], locale: [{
-                type: Input
-            }], setMin: [{
-                type: Input,
-                args: ['min']
-            }], setMax: [{
-                type: Input,
-                args: ['max']
-            }], view: [{
+        }], ctorParameters: () => [], propDecorators: { resizeAndMovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeAndMovable", required: false }] }], view: [{
                 type: Input
             }], events: [{
                 type: Input
@@ -2897,13 +2850,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
 function dedupeAdapters(adapters) {
     return Array.from(new Map(adapters.map((a) => [a.locale, a])).values());
 }
-function provideDateAdapters(...additional) {
-    const all = dedupeAdapters([...DEFAULT_DATE_ADAPTERS, ...additional]);
-    return all.map((adapter) => ({
+function provideDateAdapters(configs) {
+    const adapters = configs?.adapters ?? [];
+    const all = dedupeAdapters([...DEFAULT_DATE_ADAPTERS, ...adapters]);
+    const c = { ...DEFAULT_DATE_CONFIG, ...configs };
+    const d = all.map((adapter) => ({
         provide: DATE_ADAPTERS,
         multi: true,
         useValue: adapter,
     }));
+    return [
+        ...d,
+        {
+            provide: NGX_DATE_CONFIG,
+            multi: true,
+            useValue: c,
+        },
+    ];
 }
 
 function createDateRange(start = null, end = null) {
@@ -2965,31 +2928,6 @@ function isDateInPreviewRange(date, start, previewEnd) {
 }
 
 class NgxDateRangePickerComponent extends NgxDatePickerBase {
-    defaultLocalization = inject(NGX_CALENDAR_LOCALIZATION);
-    localize = input(this.defaultLocalization, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "localize" }] : /* istanbul ignore next */ []));
-    config = new NgxDatePickerConfig();
-    set locale(value) {
-        this._locale = value || 'en';
-        this.adapter = this.dateAdapterRegistry.resolve(this._locale);
-        this.init();
-    }
-    set min(value) {
-        const next = deserialize(value);
-        if (!sameDate(next, this.minDate)) {
-            this.minDate = next;
-            this._validatorOnChange();
-            this.renderِDatePicker(this.view());
-        }
-    }
-    set max(value) {
-        const next = deserialize(value);
-        if (!sameDate(next, this.maxDate)) {
-            this.maxDate = next;
-            this._validatorOnChange();
-            this.renderِDatePicker(this.view());
-        }
-    }
     view = model('day', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
     rangeChange = new EventEmitter();
@@ -3003,11 +2941,22 @@ class NgxDateRangePickerComponent extends NgxDatePickerBase {
     _onTouched = () => { };
     _validatorOnChange = () => { };
     isDisabled = false;
+    constructor() {
+        super();
+        effect(() => {
+            this.adapter = this.dateAdapterRegistry.resolve(this.locale());
+            this.init();
+        });
+    }
     ngOnInit() {
         this.init();
     }
-    updateConfig(value) {
-        this.config = { ...new NgxDatePickerConfig(), ...value };
+    onDateBoundsChange() {
+        this._validatorOnChange();
+        this.renderِDatePicker(this.view());
+    }
+    updateConfig(val) {
+        this.config.set({ ...this.config(), ...val });
     }
     writeValue(value) {
         this.range = normalizeDateRange(value);
@@ -3199,8 +3148,8 @@ class NgxDateRangePickerComponent extends NgxDatePickerBase {
     stopPagination(event) {
         event.stopPropagation();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDateRangePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxDateRangePickerComponent, isStandalone: true, selector: "ngx-date-range-picker", inputs: { localize: { classPropertyName: "localize", publicName: "localize", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", rangeChange: "rangeChange", change: "change" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxDateRangePickerComponent, isStandalone: true, selector: "ngx-date-range-picker", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", rangeChange: "rangeChange", change: "change" }, providers: [
             DateAdapterRegistry,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -3212,7 +3161,7 @@ class NgxDateRangePickerComponent extends NgxDatePickerBase {
                 useExisting: forwardRef(() => NgxDateRangePickerComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" (click)=\"stopPagination($event)\">\n  <div class=\"header\">\n    <div class=\"calendar-icon\" aria-hidden=\"true\">\n      <svg fill=\"currentColor\" viewBox=\"0 0 448 512\">\n        <path\n          d=\"M384 272C384 280.8 376.8 288 368 288H208C199.2 288 192 280.8 192 272C192 263.2 199.2 256 208 256H368C376.8 256 384 263.2 384 272zM80 416C71.16 416 64 408.8 64 400C64 391.2 71.16 384 80 384H240C248.8 384 256 391.2 256 400C256 408.8 248.8 416 240 416H80zM160 272C160 298.5 138.5 320 112 320C85.49 320 64 298.5 64 272C64 245.5 85.49 224 112 224C138.5 224 160 245.5 160 272zM96 272C96 280.8 103.2 288 112 288C120.8 288 128 280.8 128 272C128 263.2 120.8 256 112 256C103.2 256 96 263.2 96 272zM288 400C288 373.5 309.5 352 336 352C362.5 352 384 373.5 384 400C384 426.5 362.5 448 336 448C309.5 448 288 426.5 288 400zM352 400C352 391.2 344.8 384 336 384C327.2 384 320 391.2 320 400C320 408.8 327.2 416 336 416C344.8 416 352 408.8 352 400zM112 0C120.8 0 128 7.164 128 16V64H320V16C320 7.164 327.2 0 336 0C344.8 0 352 7.164 352 16V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H96V16C96 7.164 103.2 0 112 0zM416 192H32V448C32 465.7 46.33 480 64 480H384C401.7 480 416 465.7 416 448V192zM384 96H64C46.33 96 32 110.3 32 128V160H416V128C416 110.3 401.7 96 384 96z\" />\n      </svg>\n    </div>\n    <div class=\"header-copy\">\n      <div class=\"header-title\">Date range</div>\n      <div class=\"header-value\">{{ calendarHeader() }}</div>\n    </div>\n  </div>\n\n  <div class=\"sub-header\">\n    <button type=\"button\" class=\"nav-button\" id=\"prev\" (click)=\"previous()\" aria-label=\"Previous\">\n      <ng-template\n        [ngTemplateOutlet]=\"\n          config.previousButtonTemplate || defaultPreviousBTNTemplate\n        \"></ng-template>\n    </button>\n\n    <button type=\"button\" class=\"current-date\" (click)=\"changeView('month')\">\n      <span>{{ displayMonth() }}</span>\n      <span>{{ currYear() }}</span>\n    </button>\n\n    <button type=\"button\" class=\"nav-button\" id=\"next\" (click)=\"next()\" aria-label=\"Next\">\n      <ng-template\n        [ngTemplateOutlet]=\"config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\n    </button>\n  </div>\n\n  <div class=\"calendar\">\n    @if (view() === 'day') {\n      <ul class=\"weeks\">\n        @for (w of weekDays; track $index) {\n          <li [title]=\"w.name\">{{ w.min }}</li>\n        }\n      </ul>\n\n      <ul class=\"days\">\n        @for (item of viewDays; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.in-range]=\"item.inRange\"\n            [class.in-range-preview]=\"item.inRangePreview\"\n            [class.range-start]=\"item.rangeStart\"\n            [class.range-end]=\"item.rangeEnd\"\n            [class.range-single]=\"item.rangeStart && item.rangeEnd\"\n            (mouseenter)=\"onDayEnter(item)\"\n            (mouseleave)=\"onDayLeave()\"\n            (click)=\"selectDay($event, item)\"\n            [attr.aria-selected]=\"\n              item.rangeStart || item.rangeEnd || item.inRange || item.inRangePreview\n            \">\n            <span class=\"day-number\">{{ item.day }}</span>\n          </li>\n        }\n      </ul>\n    } @else if (view() === 'month') {\n      <ul class=\"months\">\n        @for (item of viewMonths; track $index; let i = $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectMonth($event, item)\">\n            {{ i + 1 }}.{{ item.displayMonth }}\n          </li>\n        }\n      </ul>\n    } @else {\n      <ul class=\"years\">\n        @for (item of viewYears; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectYear($event, item)\">\n            {{ item.year }}\n          </li>\n        }\n      </ul>\n    }\n\n    <div class=\"calendar-footer\">\n      @if (config.clearButton) {\n        <button type=\"button\" (click)=\"clear()\">{{ localize().clear }}</button>\n      }\n      @if (config.todayButton) {\n        <button type=\"button\" (click)=\"gotoToday()\">{{ localize().today }}</button>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultPreviousBTNTemplate>\n  <svg width=\"14\" height=\"28\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultNextBTNTemplate>\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\n  </svg>\n</ng-template>\n", styles: [":host{--ngx-range-bg: light-dark(#ffffff, #10162b);--ngx-range-text: light-dark(#171717, #f4f4f5);--ngx-range-muted: light-dark(#8a8f98, #72798a);--ngx-range-border: light-dark(#e6e8ee, #272d40);--ngx-range-accent: light-dark(#6544e8, #8d6cff);--ngx-range-accent-soft: light-dark(#eeeaff, #2b2252);--ngx-range-hover: light-dark(#f4f2ff, #211b38)}.wrapper{width:336px;overflow:hidden;border:1px solid var(--ngx-range-border);border-radius:14px;background:var(--ngx-range-bg);color:var(--ngx-range-text);box-shadow:0 18px 55px #0000002e;font-size:13px}.header{display:flex;gap:12px;padding:15px 16px;background:linear-gradient(135deg,#6747e9,#8b64f5);color:#fff}.header .calendar-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#ffffff29}.header .header-copy{min-width:0;flex:1}.header .header-title{opacity:.75;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.header .header-value{margin-top:3px;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sub-header{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--ngx-range-border)}.sub-header button{color:inherit;border:0;background:transparent;cursor:pointer}.sub-header .nav-button{width:36px;height:36px;display:grid;place-items:center;border-radius:9px}.sub-header .nav-button:hover{background:var(--ngx-range-hover)}.sub-header .current-date{display:flex;justify-content:center;gap:6px;font-weight:700;font-size:14px}.calendar{padding:10px 12px 12px}.calendar ul{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0}.calendar .weeks li,.calendar .days li{width:14.2857142857%}.calendar .weeks{margin-bottom:4px}.calendar .weeks li{height:30px;display:grid;place-items:center;color:var(--ngx-range-muted);font-size:11px;font-weight:700}.calendar .days li{position:relative;height:40px;display:grid;place-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.calendar .days li:before{content:\"\";position:absolute;inset:4px 0;background:transparent;z-index:0}.calendar .days li .day-number{position:relative;z-index:2;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;transition:transform .12s ease,background .12s ease}.calendar .days li:not(.de-active):hover .day-number{background:var(--ngx-range-hover)}.calendar .days li.de-active{color:var(--ngx-range-muted);opacity:.45;cursor:default}.calendar .days li.in-range:before,.calendar .days li.in-range-preview:before{background:var(--ngx-range-accent-soft)}.calendar .days li.range-start:before{border-radius:20px 0 0 20px}.calendar .days li.range-end:before{border-radius:0 20px 20px 0}.calendar .days li:nth-last-child(1 of.in-range-preview):before{border-radius:0 20px 20px 0}.calendar .days li.range-start.range-end:before{border-radius:20px}.calendar .days li.range-start .day-number,.calendar .days li.range-end .day-number{background:var(--ngx-range-accent);color:#fff;font-weight:700;box-shadow:0 3px 10px #6544e847}.calendar .days li.range-single .day-number{box-shadow:none}.calendar .days li.today:not(.range-start):not(.range-end) .day-number{outline:1.5px solid var(--ngx-range-accent);outline-offset:-1px}.calendar .days li.in-range:not(.range-start):not(.range-end) .day-number{color:var(--ngx-range-text)}.calendar .months li,.calendar .years li{height:46px;width:33.333%;display:grid;place-items:center;border-radius:10px;cursor:pointer}.calendar .months li:hover,.calendar .years li:hover{background:var(--ngx-range-hover)}.calendar .months li.selected,.calendar .years li.selected{background:var(--ngx-range-accent);color:#fff}.calendar .months li.de-active,.calendar .years li.de-active{opacity:.4}.calendar .years li{width:25%}.calendar .calendar-footer{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--ngx-range-border)}.calendar .calendar-footer button{min-height:34px;padding:0 13px;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer;font-weight:600}.calendar .calendar-footer button:hover{background:var(--ngx-range-hover)}::ng-deep [dir=rtl] ngx-date-range-picker .days li.range-start:before{border-radius:0 20px 20px 0!important}::ng-deep [dir=rtl] ngx-date-range-picker .days li.range-end:before{border-radius:20px 0 0 20px!important}::ng-deep [dir=rtl] ngx-date-range-picker .days li:nth-last-child(1 of.in-range-preview):before{border-radius:20px 0 0 20px!important}::ng-deep [dir=rtl] ngx-date-range-picker .days li.range-start.range-end:before{border-radius:20px!important}::ng-deep [dir=rtl] ngx-date-range-picker #prev,::ng-deep [dir=rtl] ngx-date-range-picker #next{transform:rotate(180deg)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" (click)=\"stopPagination($event)\">\n  <div class=\"header\">\n    <div class=\"calendar-icon\" aria-hidden=\"true\">\n      <svg fill=\"currentColor\" viewBox=\"0 0 448 512\">\n        <path\n          d=\"M384 272C384 280.8 376.8 288 368 288H208C199.2 288 192 280.8 192 272C192 263.2 199.2 256 208 256H368C376.8 256 384 263.2 384 272zM80 416C71.16 416 64 408.8 64 400C64 391.2 71.16 384 80 384H240C248.8 384 256 391.2 256 400C256 408.8 248.8 416 240 416H80zM160 272C160 298.5 138.5 320 112 320C85.49 320 64 298.5 64 272C64 245.5 85.49 224 112 224C138.5 224 160 245.5 160 272zM96 272C96 280.8 103.2 288 112 288C120.8 288 128 280.8 128 272C128 263.2 120.8 256 112 256C103.2 256 96 263.2 96 272zM288 400C288 373.5 309.5 352 336 352C362.5 352 384 373.5 384 400C384 426.5 362.5 448 336 448C309.5 448 288 426.5 288 400zM352 400C352 391.2 344.8 384 336 384C327.2 384 320 391.2 320 400C320 408.8 327.2 416 336 416C344.8 416 352 408.8 352 400zM112 0C120.8 0 128 7.164 128 16V64H320V16C320 7.164 327.2 0 336 0C344.8 0 352 7.164 352 16V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H96V16C96 7.164 103.2 0 112 0zM416 192H32V448C32 465.7 46.33 480 64 480H384C401.7 480 416 465.7 416 448V192zM384 96H64C46.33 96 32 110.3 32 128V160H416V128C416 110.3 401.7 96 384 96z\" />\n      </svg>\n    </div>\n    <div class=\"header-copy\">\n      <div class=\"header-title\">Date range</div>\n      <div class=\"header-value\">{{ calendarHeader() }}</div>\n    </div>\n  </div>\n\n  <div class=\"sub-header\">\n    <button type=\"button\" class=\"nav-button\" id=\"prev\" (click)=\"previous()\" aria-label=\"Previous\">\n      <ng-template\n        [ngTemplateOutlet]=\"\n          config().previousButtonTemplate || defaultPreviousBTNTemplate\n        \"></ng-template>\n    </button>\n\n    <button type=\"button\" class=\"current-date\" (click)=\"changeView('month')\">\n      <span>{{ displayMonth() }}</span>\n      <span>{{ currYear() }}</span>\n    </button>\n\n    <button type=\"button\" class=\"nav-button\" id=\"next\" (click)=\"next()\" aria-label=\"Next\">\n      <ng-template\n        [ngTemplateOutlet]=\"config().nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\n    </button>\n  </div>\n\n  <div class=\"calendar\">\n    @if (view() === 'day') {\n      <ul class=\"weeks\">\n        @for (w of weekDays; track $index) {\n          <li [title]=\"w.name\">{{ w.min }}</li>\n        }\n      </ul>\n\n      <ul class=\"days\">\n        @for (item of viewDays; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.in-range]=\"item.inRange\"\n            [class.in-range-preview]=\"item.inRangePreview\"\n            [class.range-start]=\"item.rangeStart\"\n            [class.range-end]=\"item.rangeEnd\"\n            [class.range-single]=\"item.rangeStart && item.rangeEnd\"\n            (mouseenter)=\"onDayEnter(item)\"\n            (mouseleave)=\"onDayLeave()\"\n            (click)=\"selectDay($event, item)\"\n            [attr.aria-selected]=\"\n              item.rangeStart || item.rangeEnd || item.inRange || item.inRangePreview\n            \">\n            <span class=\"day-number\">{{ item.day }}</span>\n          </li>\n        }\n      </ul>\n    } @else if (view() === 'month') {\n      <ul class=\"months\">\n        @for (item of viewMonths; track $index; let i = $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectMonth($event, item)\">\n            {{ i + 1 }}.{{ item.displayMonth }}\n          </li>\n        }\n      </ul>\n    } @else {\n      <ul class=\"years\">\n        @for (item of viewYears; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectYear($event, item)\">\n            {{ item.year }}\n          </li>\n        }\n      </ul>\n    }\n\n    <div class=\"calendar-footer\">\n      @if (config().clearButton) {\n        <button type=\"button\" (click)=\"clear()\">{{ localize().clear }}</button>\n      }\n      @if (config().todayButton) {\n        <button type=\"button\" (click)=\"gotoToday()\">{{ localize().today }}</button>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultPreviousBTNTemplate>\n  <svg width=\"14\" height=\"28\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultNextBTNTemplate>\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\n  </svg>\n</ng-template>\n", styles: [":host{--ngx-range-bg: light-dark(#ffffff, #10162b);--ngx-range-text: light-dark(#171717, #f4f4f5);--ngx-range-muted: light-dark(#8a8f98, #72798a);--ngx-range-border: light-dark(#e6e8ee, #272d40);--ngx-range-accent: light-dark(#6544e8, #8d6cff);--ngx-range-accent-soft: light-dark(#eeeaff, #2b2252);--ngx-range-hover: light-dark(#f4f2ff, #211b38)}.wrapper{width:336px;overflow:hidden;border:1px solid var(--ngx-range-border);border-radius:14px;background:var(--ngx-range-bg);color:var(--ngx-range-text);box-shadow:0 18px 55px #0000002e;font-size:13px}.header{display:flex;gap:12px;padding:15px 16px;background:linear-gradient(135deg,#6747e9,#8b64f5);color:#fff}.header .calendar-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#ffffff29}.header .header-copy{min-width:0;flex:1}.header .header-title{opacity:.75;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.header .header-value{margin-top:3px;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sub-header{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--ngx-range-border)}.sub-header button{color:inherit;border:0;background:transparent;cursor:pointer}.sub-header .nav-button{width:36px;height:36px;display:grid;place-items:center;border-radius:9px}.sub-header .nav-button:hover{background:var(--ngx-range-hover)}.sub-header .current-date{display:flex;justify-content:center;gap:6px;font-weight:700;font-size:14px}.calendar{padding:10px 12px 12px}.calendar ul{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0}.calendar .weeks li,.calendar .days li{width:14.2857142857%}.calendar .weeks{margin-bottom:4px}.calendar .weeks li{height:30px;display:grid;place-items:center;color:var(--ngx-range-muted);font-size:11px;font-weight:700}.calendar .days li{position:relative;height:40px;display:grid;place-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.calendar .days li:before{content:\"\";position:absolute;inset:4px 0;background:transparent;z-index:0}.calendar .days li .day-number{position:relative;z-index:2;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;transition:transform .12s ease,background .12s ease}.calendar .days li:not(.de-active):hover .day-number{background:var(--ngx-range-hover)}.calendar .days li.de-active{color:var(--ngx-range-muted);opacity:.45;cursor:default}.calendar .days li.in-range:before,.calendar .days li.in-range-preview:before{background:var(--ngx-range-accent-soft)}.calendar .days li.range-start:before{border-radius:20px 0 0 20px}.calendar .days li.range-end:before{border-radius:0 20px 20px 0}.calendar .days li:nth-last-child(1 of.in-range-preview):before{border-radius:0 20px 20px 0}.calendar .days li.range-start.range-end:before{border-radius:20px}.calendar .days li.range-start .day-number,.calendar .days li.range-end .day-number{background:var(--ngx-range-accent);color:#fff;font-weight:700;box-shadow:0 3px 10px #6544e847}.calendar .days li.range-single .day-number{box-shadow:none}.calendar .days li.today:not(.range-start):not(.range-end) .day-number{outline:1.5px solid var(--ngx-range-accent);outline-offset:-1px}.calendar .days li.in-range:not(.range-start):not(.range-end) .day-number{color:var(--ngx-range-text)}.calendar .months li,.calendar .years li{height:46px;width:33.333%;display:grid;place-items:center;border-radius:10px;cursor:pointer}.calendar .months li:hover,.calendar .years li:hover{background:var(--ngx-range-hover)}.calendar .months li.selected,.calendar .years li.selected{background:var(--ngx-range-accent);color:#fff}.calendar .months li.de-active,.calendar .years li.de-active{opacity:.4}.calendar .years li{width:25%}.calendar .calendar-footer{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--ngx-range-border)}.calendar .calendar-footer button{min-height:34px;padding:0 13px;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer;font-weight:600}.calendar .calendar-footer button:hover{background:var(--ngx-range-hover)}::ng-deep [dir=rtl] ngx-date-range-picker .days li.range-start:before{border-radius:0 20px 20px 0!important}::ng-deep [dir=rtl] ngx-date-range-picker .days li.range-end:before{border-radius:20px 0 0 20px!important}::ng-deep [dir=rtl] ngx-date-range-picker .days li:nth-last-child(1 of.in-range-preview):before{border-radius:20px 0 0 20px!important}::ng-deep [dir=rtl] ngx-date-range-picker .days li.range-start.range-end:before{border-radius:20px!important}::ng-deep [dir=rtl] ngx-date-range-picker #prev,::ng-deep [dir=rtl] ngx-date-range-picker #next{transform:rotate(180deg)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDateRangePickerComponent, decorators: [{
             type: Component,
@@ -3228,14 +3177,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                             useExisting: forwardRef(() => NgxDateRangePickerComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"wrapper\" (click)=\"stopPagination($event)\">\n  <div class=\"header\">\n    <div class=\"calendar-icon\" aria-hidden=\"true\">\n      <svg fill=\"currentColor\" viewBox=\"0 0 448 512\">\n        <path\n          d=\"M384 272C384 280.8 376.8 288 368 288H208C199.2 288 192 280.8 192 272C192 263.2 199.2 256 208 256H368C376.8 256 384 263.2 384 272zM80 416C71.16 416 64 408.8 64 400C64 391.2 71.16 384 80 384H240C248.8 384 256 391.2 256 400C256 408.8 248.8 416 240 416H80zM160 272C160 298.5 138.5 320 112 320C85.49 320 64 298.5 64 272C64 245.5 85.49 224 112 224C138.5 224 160 245.5 160 272zM96 272C96 280.8 103.2 288 112 288C120.8 288 128 280.8 128 272C128 263.2 120.8 256 112 256C103.2 256 96 263.2 96 272zM288 400C288 373.5 309.5 352 336 352C362.5 352 384 373.5 384 400C384 426.5 362.5 448 336 448C309.5 448 288 426.5 288 400zM352 400C352 391.2 344.8 384 336 384C327.2 384 320 391.2 320 400C320 408.8 327.2 416 336 416C344.8 416 352 408.8 352 400zM112 0C120.8 0 128 7.164 128 16V64H320V16C320 7.164 327.2 0 336 0C344.8 0 352 7.164 352 16V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H96V16C96 7.164 103.2 0 112 0zM416 192H32V448C32 465.7 46.33 480 64 480H384C401.7 480 416 465.7 416 448V192zM384 96H64C46.33 96 32 110.3 32 128V160H416V128C416 110.3 401.7 96 384 96z\" />\n      </svg>\n    </div>\n    <div class=\"header-copy\">\n      <div class=\"header-title\">Date range</div>\n      <div class=\"header-value\">{{ calendarHeader() }}</div>\n    </div>\n  </div>\n\n  <div class=\"sub-header\">\n    <button type=\"button\" class=\"nav-button\" id=\"prev\" (click)=\"previous()\" aria-label=\"Previous\">\n      <ng-template\n        [ngTemplateOutlet]=\"\n          config.previousButtonTemplate || defaultPreviousBTNTemplate\n        \"></ng-template>\n    </button>\n\n    <button type=\"button\" class=\"current-date\" (click)=\"changeView('month')\">\n      <span>{{ displayMonth() }}</span>\n      <span>{{ currYear() }}</span>\n    </button>\n\n    <button type=\"button\" class=\"nav-button\" id=\"next\" (click)=\"next()\" aria-label=\"Next\">\n      <ng-template\n        [ngTemplateOutlet]=\"config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\n    </button>\n  </div>\n\n  <div class=\"calendar\">\n    @if (view() === 'day') {\n      <ul class=\"weeks\">\n        @for (w of weekDays; track $index) {\n          <li [title]=\"w.name\">{{ w.min }}</li>\n        }\n      </ul>\n\n      <ul class=\"days\">\n        @for (item of viewDays; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.in-range]=\"item.inRange\"\n            [class.in-range-preview]=\"item.inRangePreview\"\n            [class.range-start]=\"item.rangeStart\"\n            [class.range-end]=\"item.rangeEnd\"\n            [class.range-single]=\"item.rangeStart && item.rangeEnd\"\n            (mouseenter)=\"onDayEnter(item)\"\n            (mouseleave)=\"onDayLeave()\"\n            (click)=\"selectDay($event, item)\"\n            [attr.aria-selected]=\"\n              item.rangeStart || item.rangeEnd || item.inRange || item.inRangePreview\n            \">\n            <span class=\"day-number\">{{ item.day }}</span>\n          </li>\n        }\n      </ul>\n    } @else if (view() === 'month') {\n      <ul class=\"months\">\n        @for (item of viewMonths; track $index; let i = $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectMonth($event, item)\">\n            {{ i + 1 }}.{{ item.displayMonth }}\n          </li>\n        }\n      </ul>\n    } @else {\n      <ul class=\"years\">\n        @for (item of viewYears; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectYear($event, item)\">\n            {{ item.year }}\n          </li>\n        }\n      </ul>\n    }\n\n    <div class=\"calendar-footer\">\n      @if (config.clearButton) {\n        <button type=\"button\" (click)=\"clear()\">{{ localize().clear }}</button>\n      }\n      @if (config.todayButton) {\n        <button type=\"button\" (click)=\"gotoToday()\">{{ localize().today }}</button>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultPreviousBTNTemplate>\n  <svg width=\"14\" height=\"28\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultNextBTNTemplate>\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\n  </svg>\n</ng-template>\n", styles: [":host{--ngx-range-bg: light-dark(#ffffff, #10162b);--ngx-range-text: light-dark(#171717, #f4f4f5);--ngx-range-muted: light-dark(#8a8f98, #72798a);--ngx-range-border: light-dark(#e6e8ee, #272d40);--ngx-range-accent: light-dark(#6544e8, #8d6cff);--ngx-range-accent-soft: light-dark(#eeeaff, #2b2252);--ngx-range-hover: light-dark(#f4f2ff, #211b38)}.wrapper{width:336px;overflow:hidden;border:1px solid var(--ngx-range-border);border-radius:14px;background:var(--ngx-range-bg);color:var(--ngx-range-text);box-shadow:0 18px 55px #0000002e;font-size:13px}.header{display:flex;gap:12px;padding:15px 16px;background:linear-gradient(135deg,#6747e9,#8b64f5);color:#fff}.header .calendar-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#ffffff29}.header .header-copy{min-width:0;flex:1}.header .header-title{opacity:.75;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.header .header-value{margin-top:3px;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sub-header{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--ngx-range-border)}.sub-header button{color:inherit;border:0;background:transparent;cursor:pointer}.sub-header .nav-button{width:36px;height:36px;display:grid;place-items:center;border-radius:9px}.sub-header .nav-button:hover{background:var(--ngx-range-hover)}.sub-header .current-date{display:flex;justify-content:center;gap:6px;font-weight:700;font-size:14px}.calendar{padding:10px 12px 12px}.calendar ul{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0}.calendar .weeks li,.calendar .days li{width:14.2857142857%}.calendar .weeks{margin-bottom:4px}.calendar .weeks li{height:30px;display:grid;place-items:center;color:var(--ngx-range-muted);font-size:11px;font-weight:700}.calendar .days li{position:relative;height:40px;display:grid;place-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.calendar .days li:before{content:\"\";position:absolute;inset:4px 0;background:transparent;z-index:0}.calendar .days li .day-number{position:relative;z-index:2;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;transition:transform .12s ease,background .12s ease}.calendar .days li:not(.de-active):hover .day-number{background:var(--ngx-range-hover)}.calendar .days li.de-active{color:var(--ngx-range-muted);opacity:.45;cursor:default}.calendar .days li.in-range:before,.calendar .days li.in-range-preview:before{background:var(--ngx-range-accent-soft)}.calendar .days li.range-start:before{border-radius:20px 0 0 20px}.calendar .days li.range-end:before{border-radius:0 20px 20px 0}.calendar .days li:nth-last-child(1 of.in-range-preview):before{border-radius:0 20px 20px 0}.calendar .days li.range-start.range-end:before{border-radius:20px}.calendar .days li.range-start .day-number,.calendar .days li.range-end .day-number{background:var(--ngx-range-accent);color:#fff;font-weight:700;box-shadow:0 3px 10px #6544e847}.calendar .days li.range-single .day-number{box-shadow:none}.calendar .days li.today:not(.range-start):not(.range-end) .day-number{outline:1.5px solid var(--ngx-range-accent);outline-offset:-1px}.calendar .days li.in-range:not(.range-start):not(.range-end) .day-number{color:var(--ngx-range-text)}.calendar .months li,.calendar .years li{height:46px;width:33.333%;display:grid;place-items:center;border-radius:10px;cursor:pointer}.calendar .months li:hover,.calendar .years li:hover{background:var(--ngx-range-hover)}.calendar .months li.selected,.calendar .years li.selected{background:var(--ngx-range-accent);color:#fff}.calendar .months li.de-active,.calendar .years li.de-active{opacity:.4}.calendar .years li{width:25%}.calendar .calendar-footer{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--ngx-range-border)}.calendar .calendar-footer button{min-height:34px;padding:0 13px;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer;font-weight:600}.calendar .calendar-footer button:hover{background:var(--ngx-range-hover)}::ng-deep [dir=rtl] ngx-date-range-picker .days li.range-start:before{border-radius:0 20px 20px 0!important}::ng-deep [dir=rtl] ngx-date-range-picker .days li.range-end:before{border-radius:20px 0 0 20px!important}::ng-deep [dir=rtl] ngx-date-range-picker .days li:nth-last-child(1 of.in-range-preview):before{border-radius:20px 0 0 20px!important}::ng-deep [dir=rtl] ngx-date-range-picker .days li.range-start.range-end:before{border-radius:20px!important}::ng-deep [dir=rtl] ngx-date-range-picker #prev,::ng-deep [dir=rtl] ngx-date-range-picker #next{transform:rotate(180deg)!important}\n"] }]
-        }], propDecorators: { localize: [{ type: i0.Input, args: [{ isSignal: true, alias: "localize", required: false }] }], locale: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], rangeChange: [{
+                    ], template: "<div class=\"wrapper\" (click)=\"stopPagination($event)\">\n  <div class=\"header\">\n    <div class=\"calendar-icon\" aria-hidden=\"true\">\n      <svg fill=\"currentColor\" viewBox=\"0 0 448 512\">\n        <path\n          d=\"M384 272C384 280.8 376.8 288 368 288H208C199.2 288 192 280.8 192 272C192 263.2 199.2 256 208 256H368C376.8 256 384 263.2 384 272zM80 416C71.16 416 64 408.8 64 400C64 391.2 71.16 384 80 384H240C248.8 384 256 391.2 256 400C256 408.8 248.8 416 240 416H80zM160 272C160 298.5 138.5 320 112 320C85.49 320 64 298.5 64 272C64 245.5 85.49 224 112 224C138.5 224 160 245.5 160 272zM96 272C96 280.8 103.2 288 112 288C120.8 288 128 280.8 128 272C128 263.2 120.8 256 112 256C103.2 256 96 263.2 96 272zM288 400C288 373.5 309.5 352 336 352C362.5 352 384 373.5 384 400C384 426.5 362.5 448 336 448C309.5 448 288 426.5 288 400zM352 400C352 391.2 344.8 384 336 384C327.2 384 320 391.2 320 400C320 408.8 327.2 416 336 416C344.8 416 352 408.8 352 400zM112 0C120.8 0 128 7.164 128 16V64H320V16C320 7.164 327.2 0 336 0C344.8 0 352 7.164 352 16V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H96V16C96 7.164 103.2 0 112 0zM416 192H32V448C32 465.7 46.33 480 64 480H384C401.7 480 416 465.7 416 448V192zM384 96H64C46.33 96 32 110.3 32 128V160H416V128C416 110.3 401.7 96 384 96z\" />\n      </svg>\n    </div>\n    <div class=\"header-copy\">\n      <div class=\"header-title\">Date range</div>\n      <div class=\"header-value\">{{ calendarHeader() }}</div>\n    </div>\n  </div>\n\n  <div class=\"sub-header\">\n    <button type=\"button\" class=\"nav-button\" id=\"prev\" (click)=\"previous()\" aria-label=\"Previous\">\n      <ng-template\n        [ngTemplateOutlet]=\"\n          config().previousButtonTemplate || defaultPreviousBTNTemplate\n        \"></ng-template>\n    </button>\n\n    <button type=\"button\" class=\"current-date\" (click)=\"changeView('month')\">\n      <span>{{ displayMonth() }}</span>\n      <span>{{ currYear() }}</span>\n    </button>\n\n    <button type=\"button\" class=\"nav-button\" id=\"next\" (click)=\"next()\" aria-label=\"Next\">\n      <ng-template\n        [ngTemplateOutlet]=\"config().nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\n    </button>\n  </div>\n\n  <div class=\"calendar\">\n    @if (view() === 'day') {\n      <ul class=\"weeks\">\n        @for (w of weekDays; track $index) {\n          <li [title]=\"w.name\">{{ w.min }}</li>\n        }\n      </ul>\n\n      <ul class=\"days\">\n        @for (item of viewDays; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.in-range]=\"item.inRange\"\n            [class.in-range-preview]=\"item.inRangePreview\"\n            [class.range-start]=\"item.rangeStart\"\n            [class.range-end]=\"item.rangeEnd\"\n            [class.range-single]=\"item.rangeStart && item.rangeEnd\"\n            (mouseenter)=\"onDayEnter(item)\"\n            (mouseleave)=\"onDayLeave()\"\n            (click)=\"selectDay($event, item)\"\n            [attr.aria-selected]=\"\n              item.rangeStart || item.rangeEnd || item.inRange || item.inRangePreview\n            \">\n            <span class=\"day-number\">{{ item.day }}</span>\n          </li>\n        }\n      </ul>\n    } @else if (view() === 'month') {\n      <ul class=\"months\">\n        @for (item of viewMonths; track $index; let i = $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectMonth($event, item)\">\n            {{ i + 1 }}.{{ item.displayMonth }}\n          </li>\n        }\n      </ul>\n    } @else {\n      <ul class=\"years\">\n        @for (item of viewYears; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectYear($event, item)\">\n            {{ item.year }}\n          </li>\n        }\n      </ul>\n    }\n\n    <div class=\"calendar-footer\">\n      @if (config().clearButton) {\n        <button type=\"button\" (click)=\"clear()\">{{ localize().clear }}</button>\n      }\n      @if (config().todayButton) {\n        <button type=\"button\" (click)=\"gotoToday()\">{{ localize().today }}</button>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultPreviousBTNTemplate>\n  <svg width=\"14\" height=\"28\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultNextBTNTemplate>\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\n  </svg>\n</ng-template>\n", styles: [":host{--ngx-range-bg: light-dark(#ffffff, #10162b);--ngx-range-text: light-dark(#171717, #f4f4f5);--ngx-range-muted: light-dark(#8a8f98, #72798a);--ngx-range-border: light-dark(#e6e8ee, #272d40);--ngx-range-accent: light-dark(#6544e8, #8d6cff);--ngx-range-accent-soft: light-dark(#eeeaff, #2b2252);--ngx-range-hover: light-dark(#f4f2ff, #211b38)}.wrapper{width:336px;overflow:hidden;border:1px solid var(--ngx-range-border);border-radius:14px;background:var(--ngx-range-bg);color:var(--ngx-range-text);box-shadow:0 18px 55px #0000002e;font-size:13px}.header{display:flex;gap:12px;padding:15px 16px;background:linear-gradient(135deg,#6747e9,#8b64f5);color:#fff}.header .calendar-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#ffffff29}.header .header-copy{min-width:0;flex:1}.header .header-title{opacity:.75;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.header .header-value{margin-top:3px;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sub-header{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--ngx-range-border)}.sub-header button{color:inherit;border:0;background:transparent;cursor:pointer}.sub-header .nav-button{width:36px;height:36px;display:grid;place-items:center;border-radius:9px}.sub-header .nav-button:hover{background:var(--ngx-range-hover)}.sub-header .current-date{display:flex;justify-content:center;gap:6px;font-weight:700;font-size:14px}.calendar{padding:10px 12px 12px}.calendar ul{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0}.calendar .weeks li,.calendar .days li{width:14.2857142857%}.calendar .weeks{margin-bottom:4px}.calendar .weeks li{height:30px;display:grid;place-items:center;color:var(--ngx-range-muted);font-size:11px;font-weight:700}.calendar .days li{position:relative;height:40px;display:grid;place-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.calendar .days li:before{content:\"\";position:absolute;inset:4px 0;background:transparent;z-index:0}.calendar .days li .day-number{position:relative;z-index:2;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;transition:transform .12s ease,background .12s ease}.calendar .days li:not(.de-active):hover .day-number{background:var(--ngx-range-hover)}.calendar .days li.de-active{color:var(--ngx-range-muted);opacity:.45;cursor:default}.calendar .days li.in-range:before,.calendar .days li.in-range-preview:before{background:var(--ngx-range-accent-soft)}.calendar .days li.range-start:before{border-radius:20px 0 0 20px}.calendar .days li.range-end:before{border-radius:0 20px 20px 0}.calendar .days li:nth-last-child(1 of.in-range-preview):before{border-radius:0 20px 20px 0}.calendar .days li.range-start.range-end:before{border-radius:20px}.calendar .days li.range-start .day-number,.calendar .days li.range-end .day-number{background:var(--ngx-range-accent);color:#fff;font-weight:700;box-shadow:0 3px 10px #6544e847}.calendar .days li.range-single .day-number{box-shadow:none}.calendar .days li.today:not(.range-start):not(.range-end) .day-number{outline:1.5px solid var(--ngx-range-accent);outline-offset:-1px}.calendar .days li.in-range:not(.range-start):not(.range-end) .day-number{color:var(--ngx-range-text)}.calendar .months li,.calendar .years li{height:46px;width:33.333%;display:grid;place-items:center;border-radius:10px;cursor:pointer}.calendar .months li:hover,.calendar .years li:hover{background:var(--ngx-range-hover)}.calendar .months li.selected,.calendar .years li.selected{background:var(--ngx-range-accent);color:#fff}.calendar .months li.de-active,.calendar .years li.de-active{opacity:.4}.calendar .years li{width:25%}.calendar .calendar-footer{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--ngx-range-border)}.calendar .calendar-footer button{min-height:34px;padding:0 13px;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer;font-weight:600}.calendar .calendar-footer button:hover{background:var(--ngx-range-hover)}::ng-deep [dir=rtl] ngx-date-range-picker .days li.range-start:before{border-radius:0 20px 20px 0!important}::ng-deep [dir=rtl] ngx-date-range-picker .days li.range-end:before{border-radius:20px 0 0 20px!important}::ng-deep [dir=rtl] ngx-date-range-picker .days li:nth-last-child(1 of.in-range-preview):before{border-radius:20px 0 0 20px!important}::ng-deep [dir=rtl] ngx-date-range-picker .days li.range-start.range-end:before{border-radius:20px!important}::ng-deep [dir=rtl] ngx-date-range-picker #prev,::ng-deep [dir=rtl] ngx-date-range-picker #next{transform:rotate(180deg)!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], rangeChange: [{
                 type: Output
             }], change: [{
                 type: Output
@@ -3243,6 +3186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
 
 class NgxInputDateRangePicker {
     el;
+    _config = inject(NGX_DATE_CONFIG);
     dateAdapterRegistry = inject(DateAdapterRegistry);
     overlayService = inject(OverlayService);
     viewContainerRef = inject(ViewContainerRef);
@@ -3250,27 +3194,15 @@ class NgxInputDateRangePicker {
     openOnClick = true;
     displayFormat = 'yyyy/MM/dd';
     rangeSeparator = ' – ';
-    _locale = 'en';
-    set locale(value) {
-        this._locale = value || 'en';
-        this.adapter = this.dateAdapterRegistry.resolve(this._locale);
-        this.formatValue();
-    }
-    get locale() {
-        return this._locale;
-    }
-    set setMin(value) {
-        this.min = deserialize(value);
-        this._validatorOnChange();
-    }
-    set setMax(value) {
-        this.max = deserialize(value);
-        this._validatorOnChange();
-    }
-    config = new NgxDatePickerConfig();
+    config = model(this._config, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    locale = input(this._config.locale ?? 'en', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    min = input(null, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: deserialize });
+    max = input(null, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: deserialize });
     change = new EventEmitter();
-    min = null;
-    max = null;
+    minDate = null;
+    maxDate = null;
     value = { start: null, end: null };
     pickerRef;
     isDisabled = false;
@@ -3280,11 +3212,20 @@ class NgxInputDateRangePicker {
     _validatorOnChange = () => { };
     constructor(el) {
         this.el = el;
-        this.adapter = this.dateAdapterRegistry.resolve(this.locale);
-    }
-    ngOnChanges() {
-        this.adapter = this.dateAdapterRegistry.resolve(this.locale);
-        this.formatValue();
+        effect(() => {
+            const locale = this.locale();
+            this.adapter = this.dateAdapterRegistry.resolve(locale);
+            this.formatValue();
+        });
+        effect(() => {
+            const minDate = this.min();
+            const maxDate = this.max();
+            if (sameDate(minDate, this.minDate) && sameDate(maxDate, this.maxDate))
+                return;
+            this.minDate = minDate;
+            this.maxDate = maxDate;
+            this._validatorOnChange();
+        });
     }
     onClick(event) {
         if (!this.openOnClick || this.isDisabled)
@@ -3320,7 +3261,6 @@ class NgxInputDateRangePicker {
             this.destroyDatePicker();
             return;
         }
-        this.adapter = this.dateAdapterRegistry.resolve(this.locale);
         this.pickerRef = this.overlayService.open({
             anchor: this.el.nativeElement,
             component: NgxDateRangePickerComponent,
@@ -3328,11 +3268,11 @@ class NgxInputDateRangePicker {
             alignment: 'center',
             placement: 'bottom',
             margin: 4,
-            configure: (instance) => {
-                instance.locale = this.locale;
-                instance.min = this.min;
-                instance.max = this.max;
-                instance.updateConfig(this.config);
+            configure: (instance, ref) => {
+                ref.componentRef?.setInput('locale', this.locale());
+                ref.componentRef?.setInput('min', this.minDate);
+                ref.componentRef?.setInput('max', this.maxDate);
+                instance.updateConfig(this.config());
                 instance.writeValue(this.value);
                 instance.rangeChange.subscribe((value) => {
                     this.value = normalizeDateRange(value);
@@ -3352,11 +3292,11 @@ class NgxInputDateRangePicker {
     }
     validate(_control) {
         const { start, end } = this.value;
-        if (start && this.min && compareDate(start, this.min) < 0) {
-            return { min: this.min };
+        if (start && this.minDate && compareDate(start, this.minDate) < 0) {
+            return { min: this.minDate };
         }
-        if (end && this.max && compareDate(end, this.max) > 0) {
-            return { max: this.max };
+        if (end && this.maxDate && compareDate(end, this.maxDate) > 0) {
+            return { max: this.maxDate };
         }
         if (start && end && compareDate(start, end) > 0) {
             return { range: true };
@@ -3382,7 +3322,7 @@ class NgxInputDateRangePicker {
         this.pickerRef = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputDateRangePicker, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxInputDateRangePicker, isStandalone: true, selector: "input[ngxInputDateRangePicker]", inputs: { openOnClick: "openOnClick", displayFormat: "displayFormat", rangeSeparator: "rangeSeparator", locale: "locale", setMin: ["min", "setMin"], setMax: ["max", "setMax"], config: "config" }, outputs: { change: "change" }, host: { listeners: { "click": "onClick($event)", "blur": "onBlur()" }, properties: { "attr.readOnly": "true" }, classAttribute: "ngx-datepicker-input" }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxInputDateRangePicker, isStandalone: true, selector: "input[ngxInputDateRangePicker]", inputs: { openOnClick: { classPropertyName: "openOnClick", publicName: "openOnClick", isSignal: false, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: false, isRequired: false, transformFunction: null }, rangeSeparator: { classPropertyName: "rangeSeparator", publicName: "rangeSeparator", isSignal: false, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange", change: "change" }, host: { listeners: { "click": "onClick($event)", "blur": "onBlur()" }, properties: { "attr.readOnly": "true" }, classAttribute: "ngx-datepicker-input" }, providers: [
             DateAdapterRegistry,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -3394,7 +3334,7 @@ class NgxInputDateRangePicker {
                 useExisting: forwardRef(() => NgxInputDateRangePicker),
                 multi: true,
             },
-        ], exportAs: ["ngxInputDateRangePicker"], usesOnChanges: true, ngImport: i0 });
+        ], exportAs: ["ngxInputDateRangePicker"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputDateRangePicker, decorators: [{
             type: Directive,
@@ -3425,17 +3365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 type: Input
             }], rangeSeparator: [{
                 type: Input
-            }], locale: [{
-                type: Input
-            }], setMin: [{
-                type: Input,
-                args: ['min']
-            }], setMax: [{
-                type: Input,
-                args: ['max']
-            }], config: [{
-                type: Input
-            }], change: [{
+            }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }, { type: i0.Output, args: ["configChange"] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], change: [{
                 type: Output
             }], onClick: [{
                 type: HostListener,
@@ -3449,5 +3379,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DATE_ADAPTERS, DEFAULT_DATE_ADAPTERS, DateModel, DateViewDay, DateViewMonth, DateViewWeek, DateViewYear, NgxCalendarComponent, NgxDatePickerConfig, NgxDateRangePickerComponent, NgxInputDatePicker, NgxInputDatePickerComponent, NgxInputDateRangePicker, createDateRange, getLocals, isCompleteDateRange, isDateInPreviewRange, isDateInRange, normalizeDateRange, provideDateAdapters };
+export { DATE_ADAPTERS, DEFAULT_DATE_ADAPTERS, DEFAULT_DATE_CONFIG, DateModel, DateViewDay, DateViewMonth, DateViewWeek, DateViewYear, NGX_DATE_CONFIG, NgxCalendarComponent, NgxCalendarLocalization, NgxDateConfig, NgxDateRangePickerComponent, NgxInputDatePicker, NgxInputDatePickerComponent, NgxInputDateRangePicker, createDateRange, getLocals, isCompleteDateRange, isDateInPreviewRange, isDateInRange, normalizeDateRange, provideDateAdapters };
 //# sourceMappingURL=ngx-kit-date-picker.mjs.map