ngx-kit 7.2.0 → 7.3.1

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, input, EventEmitter, forwardRef, Output, Input, Component, ViewContainerRef, Renderer2, HostListener, Directive, viewChild, ChangeDetectionStrategy } 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 { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { OverlayService } from 'ngx-kit/shared';
+import { OverlayService } from 'ngx-kit/core';
 
 class NgxDatePickerConfig {
     previousButtonTemplate;
@@ -257,32 +257,32 @@ class GregorianAdapter {
     lastDateofLastMonth(year, month) {
         return new Date(year, month, 0).getDate();
     }
-    // TODO
     /**
      * month start with zero
      * @param date
      * @returns
      */
     getDate(date) {
-        let str = date.year + '-' + (date.month ? date.month + 1 : 1) + '-' + (date.day ?? 1);
-        str = str
-            .split('-')
-            .map((i) => {
-            return i.length < 2 ? '0' + i : i;
-        })
-            .join('-');
-        if (date.hours || date.minutes || date.seconds || date.milliseconds) {
-            str +=
-                ' ' +
-                    (date.hours ?? 0) +
-                    ':' +
-                    (date.minutes ?? 0) +
-                    ':' +
-                    (date.seconds ?? 0) +
-                    ':' +
-                    (date.milliseconds ?? 0);
-        }
-        return new Date(str);
+        // let str = date.year + '-' + (date.month ? date.month + 1 : 1) + '-' + (date.day ?? 1);
+        // str = str
+        //   .split('-')
+        //   .map((i) => {
+        //     return i.length < 2 ? '0' + i : i;
+        //   })
+        //   .join('-');
+        // if (date.hours || date.minutes || date.seconds || date.milliseconds) {
+        //   str +=
+        //     ' ' +
+        //     (date.hours ?? 0) +
+        //     ':' +
+        //     (date.minutes ?? 0) +
+        //     ':' +
+        //     (date.seconds ?? 0) +
+        //     ':' +
+        //     (date.milliseconds ?? 0);
+        // }
+        // return new Date(str);
+        return new Date(date.year, date.month ?? 0, date.day ?? 1, date.hours ?? 0, date.minutes ?? 0, date.seconds ?? 0, date.milliseconds ?? 0);
     }
     formatDate(date, format) {
         if (!date) {
@@ -641,7 +641,7 @@ class JalaliAdapter {
             'اردیبهشت',
             'خرداد',
             'تیر',
-            'مرداد',
+            'مردادا',
             'شهریور',
             'مهر',
             'آبان',
@@ -1487,16 +1487,21 @@ class NgxDatePickerBase {
     _locale = 'en';
     dateAdapterRegistry = inject(DateAdapterRegistry);
     adapter = this.dateAdapterRegistry.resolve(this._locale);
-    currYear;
-    currMonth;
-    currentWeek;
+    currYear = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currYear" }] : /* istanbul ignore next */ []));
+    currMonth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currMonth" }] : /* istanbul ignore next */ []));
+    currentWeek = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentWeek" }] : /* istanbul ignore next */ []));
     months = [];
     weeks = [];
+    // Todo: change to signal
     viewDays = [];
     viewMonths = [];
     viewYears = [];
     viewWeeks = [];
-    displayMonth = '';
+    displayMonth = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayMonth" }] : /* istanbul ignore next */ []));
     minDate = null;
     maxDate = null;
     renderCalendar(view, selected, events, callback) {
@@ -1511,7 +1516,7 @@ class NgxDatePickerBase {
                 this.renderWeek();
                 break;
         }
-        this.displayMonth = this.months[this.currMonth] ?? '';
+        this.displayMonth.set(this.months[this.currMonth()] ?? '');
         if (callback)
             callback();
     }
@@ -1527,18 +1532,18 @@ class NgxDatePickerBase {
                 this.renderYear();
                 break;
         }
-        this.displayMonth = this.months[this.currMonth] ?? '';
+        this.displayMonth.set(this.months[this.currMonth()] ?? '');
         if (callback)
             callback();
     }
     renderYear() {
         this.viewYears = [];
-        const s = this.currYear - 10;
-        const e = this.currYear + 10;
+        const s = this.currYear() - 10;
+        const e = this.currYear() + 10;
         for (let i = s; i < e; i++) {
             this.viewYears.push({
                 year: i,
-                selected: i === this.currYear,
+                selected: i === this.currYear(),
                 active: this.checkActiveYear(i),
             });
         }
@@ -1549,8 +1554,8 @@ class NgxDatePickerBase {
             this.viewMonths.push({
                 month: i,
                 displayMonth: this.months[i],
-                selected: i === this.currMonth,
-                active: this.checkActiveMonth(this.currYear, i),
+                selected: i === this.currMonth(),
+                active: this.checkActiveMonth(this.currYear(), i),
             });
         }
     }
@@ -1601,16 +1606,16 @@ class NgxDatePickerBase {
      */
     renderDay(selected, events) {
         this.viewDays = [];
-        const firstDayOfMonth = this.adapter.firstDayofMonth(this.currYear, this.currMonth);
-        const lastDateOfMonth = this.adapter.lastDateofMonth(this.currYear, this.currMonth);
-        const lastDayOfMonth = this.adapter.lastDayofMonth(this.currYear, this.currMonth);
-        const lastDateOfLastMonth = this.adapter.lastDateofLastMonth(this.currYear, this.currMonth);
+        const firstDayOfMonth = this.adapter.firstDayofMonth(this.currYear(), this.currMonth());
+        const lastDateOfMonth = this.adapter.lastDateofMonth(this.currYear(), this.currMonth());
+        const lastDayOfMonth = this.adapter.lastDayofMonth(this.currYear(), this.currMonth());
+        const lastDateOfLastMonth = this.adapter.lastDateofLastMonth(this.currYear(), this.currMonth());
         for (let i = firstDayOfMonth; i > 0; i--) {
             const day = lastDateOfLastMonth - i + 1;
             const date = this.adapter.getDate({
                 locale: this._locale,
-                year: this.currYear,
-                month: this.currMonth - 1,
+                year: this.currYear(),
+                month: this.currMonth() - 1,
                 day,
             });
             this.viewDays.push({
@@ -1624,11 +1629,11 @@ class NgxDatePickerBase {
         }
         for (let day = 1; day <= lastDateOfMonth; day++) {
             const today = this.adapter.today();
-            const isToday = day === today.day && this.currMonth === today.month && this.currYear === today.year;
+            const isToday = day === today.day && this.currMonth() === today.month && this.currYear() === today.year;
             const date = this.adapter.getDate({
                 locale: this._locale,
-                year: this.currYear,
-                month: this.currMonth,
+                year: this.currYear(),
+                month: this.currMonth(),
                 day,
             });
             this.viewDays.push({
@@ -1636,8 +1641,8 @@ class NgxDatePickerBase {
                 active: this.checkActiveDate(date),
                 isToday,
                 selected: day === selected?.day &&
-                    selected.month === this.currMonth &&
-                    selected.year === this.currYear,
+                    selected.month === this.currMonth() &&
+                    selected.year === this.currYear(),
                 date,
                 events: this.getEvents(date, events),
             });
@@ -1646,8 +1651,8 @@ class NgxDatePickerBase {
             const day = i - lastDayOfMonth + 1;
             const date = this.adapter.getDate({
                 locale: this._locale,
-                year: this.currYear,
-                month: this.currMonth + 1,
+                year: this.currYear(),
+                month: this.currMonth() + 1,
                 day,
             });
             this.viewDays.push({
@@ -1759,10 +1764,12 @@ class NgxInputDatePickerComponent extends NgxDatePickerBase {
             this.init();
         }
     }
-    view = 'day';
+    view = model('day', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
     change = new EventEmitter();
     selected;
-    calendarHeader = '';
+    calendarHeader = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarHeader" }] : /* istanbul ignore next */ []));
     isDisabled = false;
     weekDays = [];
     _onChange = (value) => { };
@@ -1787,9 +1794,9 @@ class NgxInputDatePickerComponent extends NgxDatePickerBase {
         }
         else {
             let l = this.adapter.toLocale(this.selected.date);
-            this.currYear = l.year;
-            this.currMonth = l.month ?? 1;
-            this.renderِDatePicker(this.view);
+            this.currYear.set(l.year);
+            this.currMonth.set(l.month ?? 1);
+            this.renderِDatePicker(this.view());
         }
     }
     writeValue(value) {
@@ -1840,63 +1847,62 @@ class NgxInputDatePickerComponent extends NgxDatePickerBase {
     renderِDatePicker(view) {
         super.renderِDatePicker(view, this.selected, [], () => {
             let d = this.selected?.date;
-            this.calendarHeader =
-                (d && this.adapter.formatDate(this.adapter.toLocale(d), 'EEEE - d MMMM, yyyy')) ?? '';
+            this.calendarHeader.set((d && this.adapter.formatDate(this.adapter.toLocale(d), 'EEEE - d MMMM, yyyy')) ?? '');
         });
     }
     gotoToday() {
         let today = this.adapter.today();
         this.selected = today;
-        this.currYear = today.year;
-        this.currMonth = today.month ?? 1;
-        this.calendarHeader = this.adapter.formatDate(today, 'EEEE, d MMMM, yyyy') ?? '';
+        this.currYear.set(today.year);
+        this.currMonth.set(today.month ?? 1);
+        this.calendarHeader.set(this.adapter.formatDate(today, 'EEEE, d MMMM, yyyy') ?? '');
         this.changeView('day');
     }
     changeView(v) {
-        this.view = v;
-        this.renderِDatePicker(this.view);
+        this.view.set(v);
+        this.renderِDatePicker(this.view());
     }
     next() {
-        if (this.view === 'year') {
-            this.currYear += 20;
+        if (this.view() === 'year') {
+            this.currYear.update((u) => (u += 20));
         }
-        else if (this.view === 'month') {
-            this.currYear++;
+        else if (this.view() === 'month') {
+            this.currYear.update((u) => u++);
         }
         else {
-            this.currMonth++;
+            this.currMonth.update((u) => u++);
         }
-        if (this.currMonth < 0 || this.currMonth > 11) {
-            let date = new Date(this.currYear, this.currMonth);
-            this.currYear = date.getFullYear();
-            this.currMonth = date.getMonth();
+        if (this.currMonth() < 0 || this.currMonth() > 11) {
+            let date = new Date(this.currYear(), this.currMonth());
+            this.currYear.set(date.getFullYear());
+            this.currMonth.set(date.getMonth());
         }
-        this.renderِDatePicker(this.view);
+        this.renderِDatePicker(this.view());
     }
     previous() {
-        if (this.view === 'year') {
-            this.currYear -= 20;
+        if (this.view() === 'year') {
+            this.currYear.update((u) => (u -= 20));
         }
-        else if (this.view === 'month') {
-            this.currYear--;
+        else if (this.view() === 'month') {
+            this.currYear.update((u) => u--);
         }
         else {
-            this.currMonth--;
+            this.currMonth.update((u) => u--);
         }
-        if (this.currMonth < 0 || this.currMonth > 11) {
-            let date = new Date(this.currYear, this.currMonth);
-            this.currYear = date.getFullYear();
-            this.currMonth = date.getMonth();
+        if (this.currMonth() < 0 || this.currMonth() > 11) {
+            let date = new Date(this.currYear(), this.currMonth());
+            this.currYear.set(date.getFullYear());
+            this.currMonth.set(date.getMonth());
         }
-        this.renderِDatePicker(this.view);
+        this.renderِDatePicker(this.view());
     }
     selectDay(ev, item) {
         ev.stopPropagation();
         if (item.active) {
             this.selected = {
                 locale: this._locale,
-                year: this.currYear,
-                month: this.currMonth,
+                year: this.currYear(),
+                month: this.currMonth(),
                 day: item.day,
                 date: item.date,
             };
@@ -1906,14 +1912,14 @@ class NgxInputDatePickerComponent extends NgxDatePickerBase {
     selectMonth(ev, item) {
         ev.stopPropagation();
         if (item.active) {
-            this.currMonth = item.month;
+            this.currMonth.set(item.month);
             this.changeView('day');
         }
     }
     selectYear(ev, item) {
         ev.stopPropagation();
         if (item.active) {
-            this.currYear = item.year;
+            this.currYear.set(item.year);
             this.changeView('month');
         }
     }
@@ -1925,7 +1931,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: false, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, providers: [
+    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: [
             DateAdapterRegistry,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1937,7 +1943,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;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: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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputDatePickerComponent, decorators: [{
             type: Component,
@@ -1953,7 +1959,7 @@ 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;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"] }]
+                    ], 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']
@@ -1965,9 +1971,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             }], setMax: [{
                 type: Input,
                 args: ['max']
-            }], view: [{
-                type: Input
-            }], change: [{
+            }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], change: [{
                 type: Output
             }] } });
 
@@ -1982,8 +1986,9 @@ class NgxInputDatePicker {
     adapter;
     _locale = 'en';
     set locale(val) {
-        this._locale = val;
+        this._locale = val || 'en';
         this.adapter = this.dateAdapterRegistry.resolve(this._locale);
+        this._formatValue(this.value);
     }
     _onChange = (value) => { };
     _onTouched = () => { };
@@ -2260,10 +2265,12 @@ class NgxCalendarComponent extends NgxDatePickerBase {
     eventChange = new EventEmitter();
     eventsChange = new EventEmitter();
     selected;
+    // Todo: change to signal
     anchorDate;
     eventViewItems = [];
     monthEventSegments = [];
     monthEventRows = Array.from({ length: MONTH_ROW_COUNT }, () => []);
+    // Todo: change to signal
     weekDays = [];
     allDayByColumn = [];
     timeSlots = Array.from({ length: 48 }, (_, i) => i * 30);
@@ -2324,7 +2331,7 @@ class NgxCalendarComponent extends NgxDatePickerBase {
                 this.renderEventView();
                 break;
         }
-        this.displayMonth = this.months[this.currMonth] ?? '';
+        this.displayMonth.set(this.months[this.currMonth()] ?? '');
         queueMicrotask(() => this.calcCellSize());
     }
     get renderEvents() {
@@ -2332,8 +2339,8 @@ class NgxCalendarComponent extends NgxDatePickerBase {
     }
     syncAnchorToLocale() {
         const localeDate = this.adapter.toLocale(this.anchorDate);
-        this.currYear = localeDate.year;
-        this.currMonth = localeDate.month ?? 0;
+        this.currYear.set(localeDate.year);
+        this.currMonth.set(localeDate.month ?? 0);
         this.months = this.adapter.longMonths;
         this.weeks = this.adapter.longDays;
     }
@@ -2542,15 +2549,15 @@ class NgxCalendarComponent extends NgxDatePickerBase {
     renderEventView() {
         const monthStart = this.adapter.getDate({
             locale: this._locale,
-            year: this.currYear,
-            month: this.currMonth,
+            year: this.currYear(),
+            month: this.currMonth(),
             day: 1,
         });
         const monthEnd = this.adapter.getDate({
             locale: this._locale,
-            year: this.currYear,
-            month: this.currMonth,
-            day: this.adapter.lastDateofMonth(this.currYear, this.currMonth),
+            year: this.currYear(),
+            month: this.currMonth(),
+            day: this.adapter.lastDateofMonth(this.currYear(), this.currMonth()),
         });
         this.eventViewItems = this.renderEventSources()
             .map((event) => {
@@ -2967,7 +2974,7 @@ class NgxDateRangePickerComponent extends NgxDatePickerBase {
         if (!sameDate(next, this.minDate)) {
             this.minDate = next;
             this._validatorOnChange();
-            this.renderِDatePicker(this.view);
+            this.renderِDatePicker(this.view());
         }
     }
     set max(value) {
@@ -2975,16 +2982,18 @@ class NgxDateRangePickerComponent extends NgxDatePickerBase {
         if (!sameDate(next, this.maxDate)) {
             this.maxDate = next;
             this._validatorOnChange();
-            this.renderِDatePicker(this.view);
+            this.renderِDatePicker(this.view());
         }
     }
-    view = 'day';
+    view = model('day', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
     rangeChange = new EventEmitter();
     change = new EventEmitter();
     range = { start: null, end: null };
     hoverDate = null;
     weekDays = [];
-    calendarHeader = '';
+    calendarHeader = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarHeader" }] : /* istanbul ignore next */ []));
     _onChange = (_value) => { };
     _onTouched = () => { };
     _validatorOnChange = () => { };
@@ -3037,19 +3046,17 @@ class NgxDateRangePickerComponent extends NgxDatePickerBase {
     renderِDatePicker(view) {
         super.renderِDatePicker(view, undefined, [], () => {
             this.applyRangeState();
-            const start = this.range.start;
-            const end = this.range.end;
-            const startText = start
-                ? this.adapter.formatDate(this.adapter.toLocale(start), 'EEEE, d MMMM, yyyy')
-                : '';
-            const endText = end
-                ? this.adapter.formatDate(this.adapter.toLocale(end), 'EEEE, d MMMM, yyyy')
-                : '';
-            this.calendarHeader = endText
-                ? `${startText} – ${endText}`
-                : startText || 'Select date range';
         });
     }
+    updateHeader() {
+        const start = this.range.start || this.hoverDate;
+        const end = this.range.end || this.hoverDate;
+        const startText = start
+            ? this.adapter.formatDate(this.adapter.toLocale(start), 'yyyy/MM/dd')
+            : '';
+        const endText = end ? this.adapter.formatDate(this.adapter.toLocale(end), 'yyyy/MM/dd') : '';
+        this.calendarHeader.set(endText ? `${startText} – ${endText}` : startText || 'Select date range');
+    }
     init() {
         this.months = this.adapter.longMonths;
         const shortDays = this.adapter.shortDays;
@@ -3057,19 +3064,19 @@ class NgxDateRangePickerComponent extends NgxDatePickerBase {
         this.weekDays = shortDays.map((min, i) => ({ min, name: longDays[i] }));
         const anchor = this.range.end || this.range.start || this.adapter.getDate(this.adapter.today());
         const locale = this.adapter.toLocale(anchor);
-        this.currYear = locale.year;
-        this.currMonth = locale.month ?? 0;
-        this.renderِDatePicker(this.view);
+        this.currYear.set(locale.year);
+        this.currMonth.set(locale.month ?? 0);
+        this.renderِDatePicker(this.view());
     }
     changeView(view) {
-        this.view = view;
+        this.view.set(view);
         this.renderِDatePicker(view);
     }
     gotoToday() {
         const today = this.adapter.today();
         const date = today.date ?? this.adapter.getDate(today);
-        this.currYear = today.year;
-        this.currMonth = today.month ?? 0;
+        this.currYear.set(today.year);
+        this.currMonth.set(today.month ?? 0);
         // Keep an existing completed range; today is only a navigation shortcut.
         if (!this.range.start || this.range.end) {
             this.range = { start: date, end: null };
@@ -3078,38 +3085,38 @@ class NgxDateRangePickerComponent extends NgxDatePickerBase {
         this.changeView('day');
     }
     next() {
-        if (this.view === 'year') {
-            this.currYear += 20;
+        if (this.view() === 'year') {
+            this.currYear.update((u) => (u += 20));
         }
-        else if (this.view === 'month') {
-            this.currYear++;
+        else if (this.view() === 'month') {
+            this.currYear.update((u) => u++);
         }
         else {
-            this.currMonth++;
+            this.currMonth.update((u) => u++);
         }
-        if (this.currMonth < 0 || this.currMonth > 11) {
-            let date = new Date(this.currYear, this.currMonth);
-            this.currYear = date.getFullYear();
-            this.currMonth = date.getMonth();
+        if (this.currMonth() < 0 || this.currMonth() > 11) {
+            let date = new Date(this.currYear(), this.currMonth());
+            this.currYear.set(date.getFullYear());
+            this.currMonth.set(date.getMonth());
         }
-        this.renderِDatePicker(this.view);
+        this.renderِDatePicker(this.view());
     }
     previous() {
-        if (this.view === 'year') {
-            this.currYear -= 20;
+        if (this.view() === 'year') {
+            this.currYear.update((u) => (u -= 20));
         }
-        else if (this.view === 'month') {
-            this.currYear--;
+        else if (this.view() === 'month') {
+            this.currYear.update((u) => u--);
         }
         else {
-            this.currMonth--;
+            this.currMonth.update((u) => u--);
         }
-        if (this.currMonth < 0 || this.currMonth > 11) {
-            let date = new Date(this.currYear, this.currMonth);
-            this.currYear = date.getFullYear();
-            this.currMonth = date.getMonth();
+        if (this.currMonth() < 0 || this.currMonth() > 11) {
+            let date = new Date(this.currYear(), this.currMonth());
+            this.currYear.set(date.getFullYear());
+            this.currMonth.set(date.getMonth());
         }
-        this.renderِDatePicker(this.view);
+        this.renderِDatePicker(this.view());
     }
     selectDay(event, item) {
         event.stopPropagation();
@@ -3135,14 +3142,14 @@ class NgxDateRangePickerComponent extends NgxDatePickerBase {
     selectMonth(event, item) {
         event.stopPropagation();
         if (item.active) {
-            this.currMonth = item.month;
+            this.currMonth.set(item.month);
             this.changeView('day');
         }
     }
     selectYear(event, item) {
         event.stopPropagation();
         if (item.active) {
-            this.currYear = item.year;
+            this.currYear.set(item.year);
             this.changeView('month');
         }
     }
@@ -3176,6 +3183,7 @@ class NgxDateRangePickerComponent extends NgxDatePickerBase {
                 !this.range.end && isDateInPreviewRange(item.date, this.range.start, this.hoverDate);
             item.selected = !!item.rangeStart || !!item.rangeEnd;
         }
+        this.updateHeader();
     }
     emitValue() {
         const value = { ...this.range };
@@ -3187,7 +3195,7 @@ class NgxDateRangePickerComponent extends NgxDatePickerBase {
         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: false, isRequired: false, transformFunction: null } }, outputs: { rangeChange: "rangeChange", change: "change" }, providers: [
+    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: [
             DateAdapterRegistry,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -3199,7 +3207,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 width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M16 2V6M8 2V6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"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 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 17.7712 21 14V12C21 8.22876 19.8284 5.17157 19.8284 5.17157C4 4 13 4 13 4Z\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\" />\n        <path d=\"M3 10H21\" stroke=\"currentColor\" stroke-width=\"1.5\" />\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=\"14\" height=\"28\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375L73.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.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)}:host-context([dir=rtl]) .days li.range-start:before{border-radius:0 20px 20px 0}:host-context([dir=rtl]) .days li.range-end:before{border-radius:20px 0 0 20px}:host-context([dir=rtl]) .days li.range-start.range-end:before{border-radius:20px}:host-context([dir=rtl]) #prev,:host-context([dir=rtl]) #next{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\" (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,
@@ -3215,16 +3223,14 @@ 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 width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M16 2V6M8 2V6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"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 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 17.7712 21 14V12C21 8.22876 19.8284 5.17157 19.8284 5.17157C4 4 13 4 13 4Z\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\" />\n        <path d=\"M3 10H21\" stroke=\"currentColor\" stroke-width=\"1.5\" />\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=\"14\" height=\"28\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375L73.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.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)}:host-context([dir=rtl]) .days li.range-start:before{border-radius:0 20px 20px 0}:host-context([dir=rtl]) .days li.range-end:before{border-radius:20px 0 0 20px}:host-context([dir=rtl]) .days li.range-start.range-end:before{border-radius:20px}:host-context([dir=rtl]) #prev,:host-context([dir=rtl]) #next{transform:rotate(180deg)}\n"] }]
+                    ], 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: Input
-            }], rangeChange: [{
+            }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], rangeChange: [{
                 type: Output
             }], change: [{
                 type: Output