ngx-kit 4.0.0 → 6.0.0

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

@@ -330,14 +330,15 @@ class GregorianAdapter {
 var Jalali;
 (function (Jalali) {
     /*
-    Jalaali years starting the 33-year rule.
-  */
-    Jalali.breaks = [-61, 9, 38, 199, 426, 686, 756, 818, 1111, 1181, 1210,
-        1635, 2060, 2097, 2192, 2262, 2324, 2394, 2456, 3178
+      Jalaali years starting the 33-year rule.
+    */
+    Jalali.breaks = [
+        -61, 9, 38, 199, 426, 686, 756, 818, 1111, 1181, 1210, 1635, 2060, 2097, 2192, 2262, 2324, 2394,
+        2456, 3178,
     ];
     /*
-    Converts a Gregorian date to Jalaali.
-  */
+      Converts a Gregorian date to Jalaali.
+    */
     function toJalaali(date) {
         // if (Object.prototype.toString.call(date) === '[object Date]') {
         let gd = date.getDate();
@@ -349,31 +350,29 @@ var Jalali;
     }
     Jalali.toJalaali = toJalaali;
     /*
-      Converts a Jalaali date to Gregorian.
-    */
+        Converts a Jalaali date to Gregorian.
+      */
     function toGregorian(jy, jm, jd) {
         return d2g(j2d(jy, jm, jd));
     }
     Jalali.toGregorian = toGregorian;
     /*
-      Checks whether a Jalaali date is valid or not.
-    */
+        Checks whether a Jalaali date is valid or not.
+      */
     function isValidJalaaliDate(jy, jm, jd) {
-        return jy >= -61 && jy <= 3177 &&
-            jm >= 1 && jm <= 12 &&
-            jd >= 1 && jd <= jalaaliMonthLength(jy, jm);
+        return (jy >= -61 && jy <= 3177 && jm >= 1 && jm <= 12 && jd >= 1 && jd <= jalaaliMonthLength(jy, jm));
     }
     Jalali.isValidJalaaliDate = isValidJalaaliDate;
     /*
-      Is this a leap year or not?
-    */
+        Is this a leap year or not?
+      */
     function isLeapJalaaliYear(jy) {
         return jalCalLeap(jy) === 0;
     }
     Jalali.isLeapJalaaliYear = isLeapJalaaliYear;
     /*
-      Number of days in a given month in a Jalaali year.
-    */
+        Number of days in a given month in a Jalaali year.
+      */
     function jalaaliMonthLength(jy, jm) {
         if (jm <= 6)
             return 31;
@@ -385,11 +384,11 @@ var Jalali;
     }
     Jalali.jalaaliMonthLength = jalaaliMonthLength;
     /*
-        This function determines if the Jalaali (Persian) year is
-        leap (366-day long) or is the common year (365 days)
-        @param jy Jalaali calendar year (-61 to 3177)
-        @returns number of years since the last leap year (0 to 4)
-     */
+          This function determines if the Jalaali (Persian) year is
+          leap (366-day long) or is the common year (365 days)
+          @param jy Jalaali calendar year (-61 to 3177)
+          @returns number of years since the last leap year (0 to 4)
+       */
     function jalCalLeap(jy) {
         var bl = Jalali.breaks.length, jp = Jalali.breaks[0], jm, jump = 0, leap, n, i;
         if (jy < jp || jy >= Jalali.breaks[bl - 1])
@@ -412,19 +411,19 @@ var Jalali;
     }
     Jalali.jalCalLeap = jalCalLeap;
     /*
-      This function determines if the Jalaali (Persian) year is
-      leap (366-day long) or is the common year (365 days), and
-      finds the day in March (Gregorian calendar) of the first
-      day of the Jalaali year (jy).
-      @param jy Jalaali calendar year (-61 to 3177)
-      @param withoutLeap when don't need leap (true or false) default is false
-      @return
-        leap: number of years since the last leap year (0 to 4)
-        gy: Gregorian year of the beginning of Jalaali year
-        march: the March day of Farvardin the 1st (1st day of jy)
-      @see: http://www.astro.uni.torun.pl/~kb/Papers/EMP/PersianC-EMP.htm
-      @see: http://www.fourmilab.ch/documents/calendar/
-    */
+        This function determines if the Jalaali (Persian) year is
+        leap (366-day long) or is the common year (365 days), and
+        finds the day in March (Gregorian calendar) of the first
+        day of the Jalaali year (jy).
+        @param jy Jalaali calendar year (-61 to 3177)
+        @param withoutLeap when don't need leap (true or false) default is false
+        @return
+          leap: number of years since the last leap year (0 to 4)
+          gy: Gregorian year of the beginning of Jalaali year
+          march: the March day of Farvardin the 1st (1st day of jy)
+        @see: http://www.astro.uni.torun.pl/~kb/Papers/EMP/PersianC-EMP.htm
+        @see: http://www.fourmilab.ch/documents/calendar/
+      */
     function jalCal(jy, withoutLeap) {
         var bl = Jalali.breaks.length, gy = jy + 621, leapJ = -14, jp = Jalali.breaks[0], jm, jump = 0, leap, leapG, march, n, i;
         if (jy < jp || jy >= Jalali.breaks[bl - 1])
@@ -461,33 +460,33 @@ var Jalali;
         return {
             leap: leap,
             gy: gy,
-            march: march
+            march: march,
         };
     }
     Jalali.jalCal = jalCal;
     /*
-      Converts a date of the Jalaali calendar to the Julian Day number.
-      @param jy Jalaali year (1 to 3100)
-      @param jm Jalaali month (1 to 12)
-      @param jd Jalaali day (1 to 29/31)
-      @return Julian Day number
-    */
+        Converts a date of the Jalaali calendar to the Julian Day number.
+        @param jy Jalaali year (1 to 3100)
+        @param jm Jalaali month (1 to 12)
+        @param jd Jalaali day (1 to 29/31)
+        @return Julian Day number
+      */
     function j2d(jy, jm, jd) {
         var r = jalCal(jy, true);
         return g2d(r.gy, 3, r.march) + (jm - 1) * 31 - div(jm, 7) * (jm - 7) + jd - 1;
     }
     Jalali.j2d = j2d;
     /*
-      Converts the Julian Day number to a date in the Jalaali calendar.
-      @param jdn Julian Day number
-      @return
-        jy: Jalaali year (1 to 3100)
-        jm: Jalaali month (1 to 12)
-        jd: Jalaali day (1 to 29/31)
-    */
+        Converts the Julian Day number to a date in the Jalaali calendar.
+        @param jdn Julian Day number
+        @return
+          jy: Jalaali year (1 to 3100)
+          jm: Jalaali month (1 to 12)
+          jd: Jalaali day (1 to 29/31)
+      */
     function d2j(jdn) {
-        var gy = d2g(jdn).gy // Calculate Gregorian year (gy).
-        , jy = gy - 621, r = jalCal(jy, false), jdn1f = g2d(gy, 3, r.march), jd, jm, k;
+        var gy = d2g(jdn).gy, // Calculate Gregorian year (gy).
+        jy = gy - 621, r = jalCal(jy, false), jdn1f = g2d(gy, 3, r.march), jd, jm, k;
         // Find number of days that passed since 1 Farvardin.
         k = jdn - jdn1f;
         if (k >= 0) {
@@ -498,7 +497,7 @@ var Jalali;
                 return {
                     jy: jy,
                     jm: jm,
-                    jd: jd
+                    jd: jd,
                 };
             }
             else {
@@ -518,39 +517,40 @@ var Jalali;
         return {
             jy: jy,
             jm: jm,
-            jd: jd
+            jd: jd,
         };
     }
     Jalali.d2j = d2j;
     /*
-      Calculates the Julian Day number from Gregorian or Julian
-      calendar dates. This integer number corresponds to the noon of
-      the date (i.e. 12 hours of Universal Time).
-      The procedure was tested to be good since 1 March, -100100 (of both
-      calendars) up to a few million years into the future.
-      @param gy Calendar year (years BC numbered 0, -1, -2, ...)
-      @param gm Calendar month (1 to 12)
-      @param gd Calendar day of the month (1 to 28/29/30/31)
-      @return Julian Day number
-    */
+        Calculates the Julian Day number from Gregorian or Julian
+        calendar dates. This integer number corresponds to the noon of
+        the date (i.e. 12 hours of Universal Time).
+        The procedure was tested to be good since 1 March, -100100 (of both
+        calendars) up to a few million years into the future.
+        @param gy Calendar year (years BC numbered 0, -1, -2, ...)
+        @param gm Calendar month (1 to 12)
+        @param gd Calendar day of the month (1 to 28/29/30/31)
+        @return Julian Day number
+      */
     function g2d(gy, gm, gd) {
-        var d = div((gy + div(gm - 8, 6) + 100100) * 1461, 4)
-            + div(153 * mod(gm + 9, 12) + 2, 5)
-            + gd - 34840408;
+        var d = div((gy + div(gm - 8, 6) + 100100) * 1461, 4) +
+            div(153 * mod(gm + 9, 12) + 2, 5) +
+            gd -
+            34840408;
         d = d - div(div(gy + 100100 + div(gm - 8, 6), 100) * 3, 4) + 752;
         return d;
     }
     Jalali.g2d = g2d;
     /*
-      Calculates Gregorian and Julian calendar dates from the Julian Day number
-      (jdn) for the period since jdn=-34839655 (i.e. the year -100100 of both
-      calendars) to some millions years ahead of the present.
-      @param jdn Julian Day number
-      @return
-        gy: Calendar year (years BC numbered 0, -1, -2, ...)
-        gm: Calendar month (1 to 12)
-        gd: Calendar day of the month M (1 to 28/29/30/31)
-    */
+        Calculates Gregorian and Julian calendar dates from the Julian Day number
+        (jdn) for the period since jdn=-34839655 (i.e. the year -100100 of both
+        calendars) to some millions years ahead of the present.
+        @param jdn Julian Day number
+        @return
+          gy: Calendar year (years BC numbered 0, -1, -2, ...)
+          gm: Calendar month (1 to 12)
+          gd: Calendar day of the month M (1 to 28/29/30/31)
+      */
     function d2g(jdn) {
         var j, i, gd, gm, gy;
         j = 4 * jdn + 139361631;
@@ -562,7 +562,7 @@ var Jalali;
         return {
             gy: gy,
             gm: gm,
-            gd: gd
+            gd: gd,
         };
     }
     Jalali.d2g = d2g;
@@ -579,7 +579,7 @@ var Jalali;
         var endDayDifference = 6 + startDayDifference;
         return {
             saturday: d2j(j2d(jy, jm, jd + startDayDifference)),
-            friday: d2j(j2d(jy, jm, jd + endDayDifference))
+            friday: d2j(j2d(jy, jm, jd + endDayDifference)),
         };
     }
     Jalali.jalaaliWeek = jalaaliWeek;
@@ -600,8 +600,8 @@ var Jalali;
     }
     Jalali.jalaaliToDateObject = jalaaliToDateObject;
     /*
-      Utility helper functions.
-    */
+        Utility helper functions.
+      */
     function div(a, b) {
         return ~~(a / b);
     }
@@ -684,7 +684,7 @@ class JalaliAdapter {
             30,
             30,
             30,
-            (year - 1095) % 4 != 0 ? 29 : 30,
+            Jalali.isLeapJalaaliYear(year) ? 30 : 29,
         ];
         return monthLengths[month];
     }
@@ -717,7 +717,7 @@ class JalaliAdapter {
             30,
             30,
             30,
-            (year - 1095) % 4 != 0 ? 29 : 30,
+            Jalali.isLeapJalaaliYear(year) ? 30 : 29,
         ];
         return monthLengths[month];
     }
@@ -856,7 +856,21 @@ var HijriConverter;
      * از آن)، پس جستجوی «آخرین day1 در همان روز یا قبل‌تر» همیشه
      * دقیقاً day1 همان ماه هدف را پیدا می‌کند.
      */
+    // نتیجه‌ی firstDayOfMonth فقط تابعی از (year, month) هست و در طول عمر
+    // صفحه هیچ‌وقت عوض نمی‌شه، پس کش‌کردنش کاملاً امنه. اهمیتش اینجاست که
+    // renderCalendar (در ngx-date-picker-base.component) برای هر سلولِ روزِ
+    // نمایش‌داده‌شده در گرید ماه (~۳۰ تا ۴۲ تا) یک‌بار adapter.getDate() صدا
+    // می‌زنه، و هرکدوم به toGregorian() → firstDayOfMonth() ختم می‌شه — یعنی
+    // بدون کش، این جست‌وجوی نسبتاً سنگین (که خودش می‌تونه تا حدود ۱۲۰۰ بار
+    // تکرار داخلی و هر بار تا ۳۵ فراخوانی Intl.DateTimeFormat داشته باشه) به
+    // ازای هر بار رندر یک ماه، ده‌ها بار برای همون (year, month) تکرار می‌شد —
+    // مخصوصاً وقتی کاربر به سال‌های دور از «امروز» ناوبری می‌کنه، محسوس کند بود.
+    const firstDayOfMonthCache = new Map();
     function firstDayOfMonth(year, month) {
+        const cacheKey = `${year}-${month}`;
+        const cached = firstDayOfMonthCache.get(cacheKey);
+        if (cached)
+            return new Date(cached);
         let anchorDate = firstOfMonthAtOrBefore(new Date());
         let h = parse(anchorDate);
         // سقف ایمنی برای جلوگیری از لوپ بی‌نهایت (≈ 100 سال هجری)
@@ -871,6 +885,7 @@ var HijriConverter;
             h = parse(anchorDate);
             guard++;
         }
+        firstDayOfMonthCache.set(cacheKey, anchorDate);
         return anchorDate;
     }
     HijriConverter.firstDayOfMonth = firstDayOfMonth;
@@ -1149,7 +1164,18 @@ var ChineseConverter;
      * برای همین، اگر یک قدم هیچ پیشرفتی نداشت (anchor عوض نشد)،
      * قدم را بزرگ‌تر می‌کنیم تا از روی ماه کبیسه‌ی احتمالی بپرد.
      */
+    // نتیجه‌ی firstDayOfMonth فقط تابعی از (year, month) هست، پس کش‌کردنش
+    // امنه. دلیل اهمیتش دقیقاً مثل نسخه‌ی هجریه: renderCalendar برای هر
+    // سلولِ روزِ گرید ماه یک‌بار adapter.getDate() صدا می‌زنه که به
+    // toGregorian() → firstDayOfMonth() ختم می‌شه؛ بدون کش، این جست‌وجوی
+    // نسبتاً سنگین (که با وجود ماه‌های کبیسه می‌تونه چند برابر هجری هم سنگین‌تر
+    // باشه) به ازای هر رندر ماه، ده‌ها بار برای همون (year, month) تکرار می‌شد.
+    const firstDayOfMonthCache = new Map();
     function firstDayOfMonth(year, month) {
+        const cacheKey = `${year}-${month}`;
+        const cached = firstDayOfMonthCache.get(cacheKey);
+        if (cached)
+            return new Date(cached);
         let anchorDate = firstOfMonthAtOrBefore(new Date());
         let c = parse(anchorDate);
         // سقف ایمنی برای جلوگیری از لوپ بی‌نهایت (≈ 100 سال چینی)
@@ -1172,6 +1198,7 @@ var ChineseConverter;
             c = parse(anchorDate);
             guard++;
         }
+        firstDayOfMonthCache.set(cacheKey, anchorDate);
         return anchorDate;
     }
     ChineseConverter.firstDayOfMonth = firstDayOfMonth;
@@ -1191,7 +1218,12 @@ var ChineseConverter;
      * `Date.getDate()` میلادی، چون آن مقدار به اشتباه طول ماه را
      * بر اساس تقویم میلادی محاسبه می‌کرد.
      */
+    const daysInMonthCache = new Map();
     function daysInMonth(year, month) {
+        const cacheKey = `${year}-${month}`;
+        const cached = daysInMonthCache.get(cacheKey);
+        if (cached !== undefined)
+            return cached;
         const first = firstDayOfMonth(year, month);
         for (let i = 1; i <= 31; i++) {
             const test = new Date(first);
@@ -1200,7 +1232,9 @@ var ChineseConverter;
             if (c.year !== year || c.month !== month || c.isLeapMonth) {
                 const last = new Date(test);
                 last.setDate(last.getDate() - 1);
-                return parse(last).day;
+                const result = parse(last).day;
+                daysInMonthCache.set(cacheKey, result);
+                return result;
             }
         }
         return 29; // fallback ایمن
@@ -1783,7 +1817,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-datepicker", inputs: { setTheme: ["theme", "setTheme"], setConfig: ["config", "setConfig"], locale: "locale", setMin: ["min", "setMin"], setMax: ["max", "setMax"], view: "view" }, outputs: { change: "change" }, host: { properties: { "class.dark": "theme==\"dark\"" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxInputDatePickerComponent, isStandalone: true, selector: "ngx-date-picker", inputs: { setTheme: ["theme", "setTheme"], setConfig: ["config", "setConfig"], locale: "locale", setMin: ["min", "setMin"], setMax: ["max", "setMax"], view: "view" }, outputs: { change: "change" }, host: { properties: { "class.dark": "theme==\"dark\"" } }, providers: [
             DateAdapterRegistry,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1795,11 +1829,11 @@ class NgxInputDatePickerComponent extends NgxDatePickerBase {
                 useExisting: forwardRef(() => NgxInputDatePickerComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"wrapper\"\n  #datepickerWrapper\n  [style.width.px]=\"wrapperWidth\"\n  (click)=\"stopPagination($event)\">\n  <div class=\"header\">\n    {{ calendarHeader }}\n  </div>\n  <div class=\"sub-header\">\n    <div class=\"icons\">\n      <span id=\"prev\" class=\"material-symbols-rounded\" (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\" class=\"material-symbols-rounded\" (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 class=\"today dtp-btn\" (click)=\"clear()\">\n          {{ config.clearButtonText }}\n        </button>\n      }\n      @if (config.todayButton) {\n        <button class=\"today dtp-btn\" (click)=\"gotoToday()\">\n          {{ config.todayButtonText }}\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      class=\"fa-secondary\"\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      class=\"fa-secondary\"\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      class=\"fa-secondary\"\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: #fff;--ngx-color-text: #000;--ngx-border-color: #c0c0c0;--ngx-datepicker-header-bg: #6200ee;--ngx-datepicker-header-text: #fff;--ngx-datepicker-subheader-bg: #e0d5ef;--ngx-datepicker-subheader-text: #272727}:host-context(.dark){--ngx-color-bg: #222;--ngx-color-text: #fff;--ngx-border-color: #c0c0c0;--ngx-datepicker-header-bg: #6200ee;--ngx-datepicker-header-text: #fff;--ngx-datepicker-subheader-bg: #8e819e;--ngx-datepicker-subheader-text: #272727}.wrapper{background:var(--ngx-color-bg);box-shadow:0 15px 40px #0000001f;color:var(--ngx-color-text);border-radius:6px;overflow:hidden}.wrapper .header{display:block;padding:15px 15px 10px;background-color:var(--ngx-datepicker-header-bg);color:var(--ngx-datepicker-header-text);font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.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:1rem;font-weight:800;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-radius:50%}.wrapper .sub-header .icons span:hover{background:#f2f2f272}.wrapper .calendar-footer{display:flex;justify-content:space-between;gap:5px}.wrapper .calendar-footer .dtp-btn{background:none;color:inherit;border:1px rgba(159,159,159,.5450980392) solid;border-radius:3px;padding:3px 15px;box-shadow:0 0 4px #0003;transition:all .3s}.wrapper .calendar-footer .dtp-btn:not([disabled]):hover{cursor:pointer;background:#87879e}.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{height:40px;width:40px}.calendar .months{margin-bottom:20px}.calendar .months li{height:40px;width:33%}.calendar .years{margin-bottom:20px}.calendar .years li{height:40px;width:25%}.calendar li{z-index:1;cursor:pointer;position:relative;color:#333;font-size:12px;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{border:1px #1216fa solid}.calendar li.today{background-color:#9b59b6}.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\r\n  class=\"wrapper\"\r\n  #datepickerWrapper\r\n  [style.width.px]=\"wrapperWidth\"\r\n  (click)=\"stopPagination($event)\">\r\n  <div class=\"header\">\r\n    {{ calendarHeader }}\r\n  </div>\r\n  <div class=\"sub-header\">\r\n    <div class=\"icons\">\r\n      <span id=\"prev\" class=\"material-symbols-rounded\" (click)=\"previous()\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"\r\n            config.previousButtonTemplate || defaultPreviousBTNTemplate\r\n          \"></ng-template>\r\n      </span>\r\n    </div>\r\n    <span class=\"current-date\">\r\n      <span (click)=\"changeView('year')\">\r\n        {{ currYear }}\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"config.caretDownIconTemplate || defaultCaretDownIcon\"></ng-template>\r\n      </span>\r\n      <span (click)=\"changeView('month')\">\r\n        {{ displayMonth }}\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"config.caretDownIconTemplate || defaultCaretDownIcon\"></ng-template>\r\n      </span>\r\n    </span>\r\n    <div class=\"icons\">\r\n      <span id=\"next\" class=\"material-symbols-rounded\" (click)=\"next()\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\r\n      </span>\r\n    </div>\r\n  </div>\r\n  <div class=\"calendar\">\r\n    @if (view === 'day') {\r\n      <ul class=\"weeks\">\r\n        @for (w of weekDays; track $index) {\r\n          <li [title]=\"w.name\">\r\n            {{ w.min }}\r\n          </li>\r\n        }\r\n      </ul>\r\n      <ul class=\"days\">\r\n        @for (item of viewDays; track $index) {\r\n          <li\r\n            [class.de-active]=\"!item.active\"\r\n            [class.today]=\"item.isToday\"\r\n            [class.selected]=\"item.selected\"\r\n            (click)=\"selectDay($event, item)\">\r\n            {{ item.day }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    } @else if (view === 'month') {\r\n      <ul class=\"months\">\r\n        @for (item of viewMonths; track $index; let i = $index) {\r\n          <li\r\n            [class.de-active]=\"!item.active\"\r\n            [class.today]=\"item.isToday\"\r\n            [class.selected]=\"item.selected\"\r\n            (click)=\"selectMonth($event, item)\">\r\n            {{ i + 1 }}.{{ item.displayMonth }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    } @else if (view === 'year') {\r\n      <ul class=\"years\">\r\n        @for (item of viewYears; track $index) {\r\n          <li\r\n            [class.de-active]=\"!item.active\"\r\n            [class.today]=\"item.isToday\"\r\n            [class.selected]=\"item.selected\"\r\n            (click)=\"selectYear($event, item)\">\r\n            {{ item.year }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n    <!-- <pre>\r\n      currYear={{currYear}}\r\n      currMonth={{currMonth}}\r\n      {{selected|json}}\r\n    </pre> -->\r\n    <div class=\"calendar-footer\">\r\n      @if (config.clearButton) {\r\n        <button (click)=\"clear()\">\r\n          {{ config.clearButtonText }}\r\n        </button>\r\n      }\r\n      @if (config.todayButton) {\r\n        <button (click)=\"gotoToday()\">\r\n          {{ config.todayButtonText }}\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultPreviousBTNTemplate>\r\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n    <path\r\n      class=\"fa-secondary\"\r\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\" />\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #defaultNextBTNTemplate>\r\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n    <path\r\n      class=\"fa-secondary\"\r\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\" />\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #defaultCaretDownIcon>\r\n  <svg width=\"10px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n    <path\r\n      class=\"fa-secondary\"\r\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\" />\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{--ngx-color-bg: #fff;--ngx-color-text: #000;--ngx-border-color: #c0c0c0;--ngx-datepicker-header-bg: #6200ee;--ngx-datepicker-header-text: #fff;--ngx-datepicker-subheader-bg: #e0d5ef;--ngx-datepicker-subheader-text: #272727}:host-context(.dark){--ngx-color-bg: #222;--ngx-color-text: #fff;--ngx-border-color: #c0c0c0;--ngx-datepicker-header-bg: #6200ee;--ngx-datepicker-header-text: #fff;--ngx-datepicker-subheader-bg: #8e819e;--ngx-datepicker-subheader-text: #272727}.wrapper{background:var(--ngx-color-bg);box-shadow:0 15px 40px #0000001f;color:var(--ngx-color-text);border-radius:6px;overflow:hidden}.wrapper .header{display:block;padding:15px 15px 10px;background-color:var(--ngx-datepicker-header-bg);color:var(--ngx-datepicker-header-text);font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.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:1rem;font-weight:800;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-radius:50%}.wrapper .sub-header .icons span:hover{background:#f2f2f272}.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}.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{height:40px;width:40px}.calendar .months{margin-bottom:20px}.calendar .months li{height:40px;width:33%}.calendar .years{margin-bottom:20px}.calendar .years li{height:40px;width:25%}.calendar li{z-index:1;cursor:pointer;position:relative;color:#333;font-size:12px;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{border:1px #1216fa solid}.calendar li.today{background-color:#9b59b6}.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,
-            args: [{ selector: 'ngx-datepicker', imports: [CommonModule], providers: [
+            args: [{ selector: 'ngx-date-picker', imports: [CommonModule], providers: [
                         DateAdapterRegistry,
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -1813,7 +1847,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         },
                     ], host: {
                         '[class.dark]': 'theme=="dark"',
-                    }, template: "<div\n  class=\"wrapper\"\n  #datepickerWrapper\n  [style.width.px]=\"wrapperWidth\"\n  (click)=\"stopPagination($event)\">\n  <div class=\"header\">\n    {{ calendarHeader }}\n  </div>\n  <div class=\"sub-header\">\n    <div class=\"icons\">\n      <span id=\"prev\" class=\"material-symbols-rounded\" (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\" class=\"material-symbols-rounded\" (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 class=\"today dtp-btn\" (click)=\"clear()\">\n          {{ config.clearButtonText }}\n        </button>\n      }\n      @if (config.todayButton) {\n        <button class=\"today dtp-btn\" (click)=\"gotoToday()\">\n          {{ config.todayButtonText }}\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      class=\"fa-secondary\"\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      class=\"fa-secondary\"\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      class=\"fa-secondary\"\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: #fff;--ngx-color-text: #000;--ngx-border-color: #c0c0c0;--ngx-datepicker-header-bg: #6200ee;--ngx-datepicker-header-text: #fff;--ngx-datepicker-subheader-bg: #e0d5ef;--ngx-datepicker-subheader-text: #272727}:host-context(.dark){--ngx-color-bg: #222;--ngx-color-text: #fff;--ngx-border-color: #c0c0c0;--ngx-datepicker-header-bg: #6200ee;--ngx-datepicker-header-text: #fff;--ngx-datepicker-subheader-bg: #8e819e;--ngx-datepicker-subheader-text: #272727}.wrapper{background:var(--ngx-color-bg);box-shadow:0 15px 40px #0000001f;color:var(--ngx-color-text);border-radius:6px;overflow:hidden}.wrapper .header{display:block;padding:15px 15px 10px;background-color:var(--ngx-datepicker-header-bg);color:var(--ngx-datepicker-header-text);font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.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:1rem;font-weight:800;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-radius:50%}.wrapper .sub-header .icons span:hover{background:#f2f2f272}.wrapper .calendar-footer{display:flex;justify-content:space-between;gap:5px}.wrapper .calendar-footer .dtp-btn{background:none;color:inherit;border:1px rgba(159,159,159,.5450980392) solid;border-radius:3px;padding:3px 15px;box-shadow:0 0 4px #0003;transition:all .3s}.wrapper .calendar-footer .dtp-btn:not([disabled]):hover{cursor:pointer;background:#87879e}.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{height:40px;width:40px}.calendar .months{margin-bottom:20px}.calendar .months li{height:40px;width:33%}.calendar .years{margin-bottom:20px}.calendar .years li{height:40px;width:25%}.calendar li{z-index:1;cursor:pointer;position:relative;color:#333;font-size:12px;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{border:1px #1216fa solid}.calendar li.today{background-color:#9b59b6}.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\r\n  class=\"wrapper\"\r\n  #datepickerWrapper\r\n  [style.width.px]=\"wrapperWidth\"\r\n  (click)=\"stopPagination($event)\">\r\n  <div class=\"header\">\r\n    {{ calendarHeader }}\r\n  </div>\r\n  <div class=\"sub-header\">\r\n    <div class=\"icons\">\r\n      <span id=\"prev\" class=\"material-symbols-rounded\" (click)=\"previous()\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"\r\n            config.previousButtonTemplate || defaultPreviousBTNTemplate\r\n          \"></ng-template>\r\n      </span>\r\n    </div>\r\n    <span class=\"current-date\">\r\n      <span (click)=\"changeView('year')\">\r\n        {{ currYear }}\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"config.caretDownIconTemplate || defaultCaretDownIcon\"></ng-template>\r\n      </span>\r\n      <span (click)=\"changeView('month')\">\r\n        {{ displayMonth }}\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"config.caretDownIconTemplate || defaultCaretDownIcon\"></ng-template>\r\n      </span>\r\n    </span>\r\n    <div class=\"icons\">\r\n      <span id=\"next\" class=\"material-symbols-rounded\" (click)=\"next()\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\r\n      </span>\r\n    </div>\r\n  </div>\r\n  <div class=\"calendar\">\r\n    @if (view === 'day') {\r\n      <ul class=\"weeks\">\r\n        @for (w of weekDays; track $index) {\r\n          <li [title]=\"w.name\">\r\n            {{ w.min }}\r\n          </li>\r\n        }\r\n      </ul>\r\n      <ul class=\"days\">\r\n        @for (item of viewDays; track $index) {\r\n          <li\r\n            [class.de-active]=\"!item.active\"\r\n            [class.today]=\"item.isToday\"\r\n            [class.selected]=\"item.selected\"\r\n            (click)=\"selectDay($event, item)\">\r\n            {{ item.day }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    } @else if (view === 'month') {\r\n      <ul class=\"months\">\r\n        @for (item of viewMonths; track $index; let i = $index) {\r\n          <li\r\n            [class.de-active]=\"!item.active\"\r\n            [class.today]=\"item.isToday\"\r\n            [class.selected]=\"item.selected\"\r\n            (click)=\"selectMonth($event, item)\">\r\n            {{ i + 1 }}.{{ item.displayMonth }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    } @else if (view === 'year') {\r\n      <ul class=\"years\">\r\n        @for (item of viewYears; track $index) {\r\n          <li\r\n            [class.de-active]=\"!item.active\"\r\n            [class.today]=\"item.isToday\"\r\n            [class.selected]=\"item.selected\"\r\n            (click)=\"selectYear($event, item)\">\r\n            {{ item.year }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n    <!-- <pre>\r\n      currYear={{currYear}}\r\n      currMonth={{currMonth}}\r\n      {{selected|json}}\r\n    </pre> -->\r\n    <div class=\"calendar-footer\">\r\n      @if (config.clearButton) {\r\n        <button (click)=\"clear()\">\r\n          {{ config.clearButtonText }}\r\n        </button>\r\n      }\r\n      @if (config.todayButton) {\r\n        <button (click)=\"gotoToday()\">\r\n          {{ config.todayButtonText }}\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultPreviousBTNTemplate>\r\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n    <path\r\n      class=\"fa-secondary\"\r\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\" />\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #defaultNextBTNTemplate>\r\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n    <path\r\n      class=\"fa-secondary\"\r\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\" />\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #defaultCaretDownIcon>\r\n  <svg width=\"10px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n    <path\r\n      class=\"fa-secondary\"\r\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\" />\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{--ngx-color-bg: #fff;--ngx-color-text: #000;--ngx-border-color: #c0c0c0;--ngx-datepicker-header-bg: #6200ee;--ngx-datepicker-header-text: #fff;--ngx-datepicker-subheader-bg: #e0d5ef;--ngx-datepicker-subheader-text: #272727}:host-context(.dark){--ngx-color-bg: #222;--ngx-color-text: #fff;--ngx-border-color: #c0c0c0;--ngx-datepicker-header-bg: #6200ee;--ngx-datepicker-header-text: #fff;--ngx-datepicker-subheader-bg: #8e819e;--ngx-datepicker-subheader-text: #272727}.wrapper{background:var(--ngx-color-bg);box-shadow:0 15px 40px #0000001f;color:var(--ngx-color-text);border-radius:6px;overflow:hidden}.wrapper .header{display:block;padding:15px 15px 10px;background-color:var(--ngx-datepicker-header-bg);color:var(--ngx-datepicker-header-text);font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.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:1rem;font-weight:800;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-radius:50%}.wrapper .sub-header .icons span:hover{background:#f2f2f272}.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}.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{height:40px;width:40px}.calendar .months{margin-bottom:20px}.calendar .months li{height:40px;width:33%}.calendar .years{margin-bottom:20px}.calendar .years li{height:40px;width:25%}.calendar li{z-index:1;cursor:pointer;position:relative;color:#333;font-size:12px;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{border:1px #1216fa solid}.calendar li.today{background-color:#9b59b6}.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: { setTheme: [{
                 type: Input,
                 args: ['theme']