ngx-kit 6.1.0 → 6.2.0

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, EventEmitter, forwardRef, Output, Input, Component, input, ViewContainerRef, Renderer2, HostListener, Directive, viewChild } from '@angular/core';
+import { InjectionToken, inject, Injectable, input, 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 { BrowserService, OverlayService } from 'ngx-kit/shared';
+import { OverlayService } from 'ngx-kit/shared';
 
 class NgxDatePickerConfig {
     previousButtonTemplate;
@@ -11,8 +11,6 @@ class NgxDatePickerConfig {
     caretDownIconTemplate;
     todayButton = true;
     clearButton = true;
-    clearButtonText = 'Clear';
-    todayButtonText = 'Today';
 }
 
 /**
@@ -185,6 +183,7 @@ function twoDigitPad(num) {
 
 class GregorianAdapter {
     startOfWeek = 0;
+    weekStartDay = 0;
     get longMonths() {
         return [
             'January',
@@ -299,13 +298,26 @@ class GregorianAdapter {
         // return new Date(date).toLocaleDateString('en-US', option);
         return genFormatDate(date, format, this.longMonths, this.longDays);
     }
+    getStartOfWeek(date) {
+        const d = new Date(date);
+        d.setHours(0, 0, 0, 0);
+        const delta = (d.getDay() - this.weekStartDay + 7) % 7;
+        d.setDate(d.getDate() - delta);
+        return d;
+    }
+    getEndOfWeek(date) {
+        const d = this.getStartOfWeek(date);
+        d.setDate(d.getDate() + 6);
+        d.setHours(23, 59, 59, 999);
+        return d;
+    }
     getStartOf(date, t) {
         if (!date) {
             return date;
         }
         switch (t) {
             case 'year':
-                return new Date(date.getFullYear(), 1, 1);
+                return new Date(date.getFullYear(), 0, 1);
             case 'month':
                 return new Date(date.getFullYear(), date.getMonth(), 1);
             case 'day':
@@ -615,6 +627,7 @@ var Jalali;
 class JalaliAdapter {
     // shanbeh
     startOfWeek = 1;
+    weekStartDay = 6;
     dariMonth = false;
     get longMonths() {
         return [
@@ -654,7 +667,7 @@ class JalaliAdapter {
             minutes: date.getMinutes(),
             seconds: date.getSeconds(),
             milliseconds: date.getMilliseconds(),
-            dayOfWeek: date.getDay() + this.startOfWeek,
+            dayOfWeek: (date.getDay() + this.startOfWeek) % 7,
         };
     }
     today() {
@@ -763,6 +776,19 @@ class JalaliAdapter {
         return genFormatDate(date, format, this.longMonths, this.longDays);
     }
     // _______________________________________________________________________________________
+    getStartOfWeek(date) {
+        const d = new Date(date);
+        d.setHours(0, 0, 0, 0);
+        const delta = (d.getDay() - this.weekStartDay + 7) % 7;
+        d.setDate(d.getDate() - delta);
+        return d;
+    }
+    getEndOfWeek(date) {
+        const d = this.getStartOfWeek(date);
+        d.setDate(d.getDate() + 6);
+        d.setHours(23, 59, 59, 999);
+        return d;
+    }
     getStartOf(date, t) {
         if (!date) {
             return date;
@@ -925,6 +951,7 @@ var HijriConverter;
 class HijriAdapter {
     /** یکشنبه = 0 (هم‌خوان با تقویم میلادی برای سادگی) */
     startOfWeek = 0;
+    weekStartDay = 0;
     get longMonths() {
         return [
             'محرم',
@@ -1010,6 +1037,19 @@ class HijriAdapter {
         }
         return new Intl.DateTimeFormat('ar-SA-u-ca-islamic-umalqura', options).format(jsDate);
     }
+    getStartOfWeek(date) {
+        const d = new Date(date);
+        d.setHours(0, 0, 0, 0);
+        const delta = (d.getDay() - this.weekStartDay + 7) % 7;
+        d.setDate(d.getDate() - delta);
+        return d;
+    }
+    getEndOfWeek(date) {
+        const d = this.getStartOfWeek(date);
+        d.setDate(d.getDate() + 6);
+        d.setHours(23, 59, 59, 999);
+        return d;
+    }
     getStartOf(date, t) {
         if (!date)
             return date;
@@ -1252,6 +1292,7 @@ var ChineseConverter;
 class ChineseAdapter {
     /** یکشنبه = 0 */
     startOfWeek = 0;
+    weekStartDay = 0;
     get longMonths() {
         return [
             '正月',
@@ -1342,6 +1383,19 @@ class ChineseAdapter {
         }
         return new Intl.DateTimeFormat('zh-CN-u-ca-chinese', options).format(jsDate);
     }
+    getStartOfWeek(date) {
+        const d = new Date(date);
+        d.setHours(0, 0, 0, 0);
+        const delta = (d.getDay() - this.weekStartDay + 7) % 7;
+        d.setDate(d.getDate() - delta);
+        return d;
+    }
+    getEndOfWeek(date) {
+        const d = this.getStartOfWeek(date);
+        d.setDate(d.getDate() + 6);
+        d.setHours(23, 59, 59, 999);
+        return d;
+    }
     getStartOf(date, t) {
         if (!date)
             return date;
@@ -1440,6 +1494,22 @@ class NgxDatePickerBase {
     minDate = null;
     maxDate = null;
     renderCalendar(view, selected, events, callback) {
+        switch (view) {
+            case 'month':
+                this.renderDay(selected, events);
+                break;
+            case 'week':
+                this.renderWeek();
+                break;
+            case 'day':
+                this.renderWeek();
+                break;
+        }
+        this.displayMonth = this.months[this.currMonth] ?? '';
+        if (callback)
+            callback();
+    }
+    renderِDatePicker(view, selected, events, callback) {
         switch (view) {
             case 'day':
                 this.renderDay(selected, events);
@@ -1450,14 +1520,10 @@ class NgxDatePickerBase {
             case 'year':
                 this.renderYear();
                 break;
-            case 'week':
-                this.renderWeek();
-                break;
         }
-        this.displayMonth = this.months[this.currMonth];
-        if (callback) {
+        this.displayMonth = this.months[this.currMonth] ?? '';
+        if (callback)
             callback();
-        }
     }
     renderYear() {
         this.viewYears = [];
@@ -1482,10 +1548,9 @@ class NgxDatePickerBase {
             });
         }
     }
-    /** only in calendar view */
-    renderWeek() {
+    renderWeek(anchorDate) {
         this.viewWeeks = [];
-        for (let t = 0; t <= 24; t = t + 0.5) {
+        for (let t = 0; t < 24; t += 0.5) {
             this.viewWeeks.push({
                 time: t,
                 displayTime: convertNumberToTime(t),
@@ -1495,134 +1560,172 @@ class NgxDatePickerBase {
             });
         }
     }
-    renderDay(selected, _events) {
+    /** Returns the seven real dates belonging to the locale's week. */
+    getWeekDates(anchor) {
+        const start = this.adapter.getStartOfWeek(anchor);
+        return Array.from({ length: 7 }, (_, index) => {
+            const d = new Date(start);
+            d.setDate(start.getDate() + index);
+            d.setHours(0, 0, 0, 0);
+            return d;
+        });
+    }
+    getEventsForDate(date, events) {
+        return this.getEvents(date, events);
+    }
+    normalizeEvent(event) {
+        const start = event.start instanceof Date ? new Date(event.start) : new Date(event.start);
+        const rawEnd = event.end
+            ? event.end instanceof Date
+                ? new Date(event.end)
+                : new Date(event.end)
+            : new Date(start);
+        if (Number.isNaN(start.getTime()))
+            return { event, start: new Date(NaN), end: new Date(NaN) };
+        // Day-calendar events use an inclusive end date. For timed events, the actual
+        // end instant is respected. An omitted end means a one-day event.
+        const end = Number.isNaN(rawEnd.getTime()) ? new Date(start) : rawEnd;
+        return { event, start, end: end < start ? new Date(start) : end };
+    }
+    /**
+     * Renders a 6-row month grid and attaches events to every visible day.
+     *
+     * The event list is normalized to MsEventViewer so the template can draw
+     * continuation edges similar to FullCalendar's month view.
+     */
+    renderDay(selected, events) {
         this.viewDays = [];
-        let firstDayofMonth = this.adapter.firstDayofMonth(this.currYear, this.currMonth);
-        let lastDateofMonth = this.adapter.lastDateofMonth(this.currYear, this.currMonth);
-        let lastDayofMonth = this.adapter.lastDayofMonth(this.currYear, this.currMonth);
-        let lastDateofLastMonth = this.adapter.lastDateofLastMonth(this.currYear, this.currMonth);
-        for (let i = firstDayofMonth; i > 0; i--) {
-            const d = lastDateofLastMonth - i + 1;
+        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,
-                day: d,
+                day,
             });
             this.viewDays.push({
-                day: d,
+                day,
                 active: false,
                 isToday: false,
                 selected: false,
                 date,
+                events: this.getEvents(date, events),
             });
         }
-        // console.log('selected', this.selected);
-        for (let i = 1; i <= lastDateofMonth; i++) {
-            let today = this.adapter.today();
-            let isToday = i === today.day && this.currMonth === today.month && this.currYear === today.year;
+        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 date = this.adapter.getDate({
                 locale: this._locale,
                 year: this.currYear,
                 month: this.currMonth,
-                day: i,
+                day,
             });
-            const events = this.getEvents(date, _events);
             this.viewDays.push({
-                day: i,
+                day,
                 active: this.checkActiveDate(date),
-                isToday: isToday,
-                selected: i === selected?.day &&
+                isToday,
+                selected: day === selected?.day &&
                     selected.month === this.currMonth &&
                     selected.year === this.currYear,
                 date,
-                events,
+                events: this.getEvents(date, events),
             });
         }
-        for (let i = lastDayofMonth; i < 6; i++) {
-            const d = i - lastDayofMonth + 1;
+        for (let i = lastDayOfMonth; i < 6; i++) {
+            const day = i - lastDayOfMonth + 1;
             const date = this.adapter.getDate({
                 locale: this._locale,
                 year: this.currYear,
                 month: this.currMonth + 1,
-                day: d,
+                day,
             });
             this.viewDays.push({
-                day: d,
+                day,
                 active: false,
                 isToday: false,
                 selected: false,
                 date,
+                events: this.getEvents(date, events),
             });
         }
     }
     checkActiveDate(date) {
-        let c = clampDate(date, this.minDate, this.maxDate);
-        if (c < 0) {
-            return false;
-        }
-        else if (c > 0) {
-            return false;
-        }
-        return true;
+        const c = clampDate(date, this.minDate, this.maxDate);
+        return c === 0;
     }
     checkActiveMonth(year, month) {
-        let fd = this.adapter.getDate({ locale: this._locale, year, month, day: 1 });
-        let ld = this.adapter.getDate({
+        const fd = this.adapter.getDate({ locale: this._locale, year, month, day: 1 });
+        const ld = this.adapter.getDate({
             locale: this._locale,
             year,
             month,
             day: this.adapter.lastDateofMonth(year, month),
         });
-        let min = this.adapter.getStartOf(this.minDate, 'month');
-        let max = this.adapter.getLastOf(this.maxDate, 'month');
+        const min = this.adapter.getStartOf(this.minDate, 'month');
+        const max = this.adapter.getLastOf(this.maxDate, 'month');
         return clampMonth(fd, min, max) === 0 && clampMonth(ld, min, max) === 0;
     }
-    // g(d: Date | null) {
-    //   if (d)
-    //     return d.getFullYear() + '/' + d.getMonth() + '/' + d.getDate();
-    //   else return '';
-    // }
     checkActiveYear(year) {
         const d = this.adapter.getDate({ locale: this._locale, year, month: 1, day: 1 });
-        let c = clampYear(d, this.minDate, this.maxDate);
-        if (c < 0) {
-            return false;
-        }
-        else if (c > 0) {
-            return false;
-        }
-        return true;
+        return clampYear(d, this.minDate, this.maxDate) === 0;
     }
     getEvents(date, events) {
-        if (!events || events.length == 0)
+        if (!events?.length)
             return [];
-        let eventList = [];
-        eventList = events.filter((x) => {
-            let s = compareDate(date, x.start);
-            let e = x.end ? compareDate(date, x.end) : s;
-            //  console.info('compare', date, '<=>', x.start, 's', s, e);
-            if (s >= 0 && e <= 0)
-                return true;
-            else
-                return false;
+        return events
+            .filter((event) => {
+            const start = event.start instanceof Date ? event.start : new Date(event.start);
+            const end = event.end
+                ? event.end instanceof Date
+                    ? event.end
+                    : new Date(event.end)
+                : start;
+            return compareDate(date, start) >= 0 && compareDate(date, end) <= 0;
+        })
+            .map((event) => {
+            const start = event.start instanceof Date ? event.start : new Date(event.start);
+            const end = event.end
+                ? event.end instanceof Date
+                    ? event.end
+                    : new Date(event.end)
+                : start;
+            return {
+                ...event,
+                continuesBefore: compareDate(start, date) < 0,
+                continuesAfter: compareDate(end, date) > 0,
+                isStart: compareDate(start, date) === 0,
+                isEnd: compareDate(end, date) === 0,
+            };
         });
-        // console.log('event', date, eventList);
-        return eventList;
     }
 }
 
+const NGX_CALENDAR_LOCALIZATION = new InjectionToken('ngx-calendar-localization', {
+    factory: () => DEFAULT_NGX_CALENDAR_LOCALIZATION,
+});
+class NgxCalendarLocalization {
+    clear = 'Clear';
+    today = 'Today';
+    /** Range picker labels. */
+    rangeStart = 'Start date';
+    rangeEnd = 'End date';
+    day = 'Day';
+    month = 'Month';
+    week = 'Week';
+    year = 'Year';
+    event = 'Event';
+}
+const DEFAULT_NGX_CALENDAR_LOCALIZATION = new NgxCalendarLocalization();
+
 class NgxInputDatePickerComponent extends NgxDatePickerBase {
-    browserService = inject(BrowserService);
-    theme = this.browserService.prefersDarkMode ? 'dark' : 'light';
-    set setTheme(val) {
-        if (!val || val == 'auto') {
-            this.theme = this.browserService.prefersDarkMode ? 'dark' : 'light';
-        }
-        else {
-            this.theme = val;
-        }
-    }
+    defaultLocalization = inject(NGX_CALENDAR_LOCALIZATION);
+    localize = input(this.defaultLocalization, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "localize" }] : /* istanbul ignore next */ []));
     config = new NgxDatePickerConfig();
     set setConfig(val) {
         this.config = { ...new NgxDatePickerConfig(), ...val };
@@ -1652,7 +1755,6 @@ class NgxInputDatePickerComponent extends NgxDatePickerBase {
     }
     view = 'day';
     change = new EventEmitter();
-    wrapperWidth = 40 * 7 + 20;
     selected;
     calendarHeader = '';
     isDisabled = false;
@@ -1681,7 +1783,7 @@ class NgxInputDatePickerComponent extends NgxDatePickerBase {
             let l = this.adapter.toLocale(this.selected.date);
             this.currYear = l.year;
             this.currMonth = l.month ?? 1;
-            this.renderCalendar(this.view);
+            this.renderِDatePicker(this.view);
         }
     }
     writeValue(value) {
@@ -1729,8 +1831,8 @@ class NgxInputDatePickerComponent extends NgxDatePickerBase {
     setDisabledState(disabled) {
         this.isDisabled = disabled;
     }
-    renderCalendar(view) {
-        super.renderCalendar(view, this.selected, [], () => {
+    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')) ?? '';
@@ -1746,7 +1848,7 @@ class NgxInputDatePickerComponent extends NgxDatePickerBase {
     }
     changeView(v) {
         this.view = v;
-        this.renderCalendar(this.view);
+        this.renderِDatePicker(this.view);
     }
     next() {
         if (this.view === 'year') {
@@ -1763,7 +1865,7 @@ class NgxInputDatePickerComponent extends NgxDatePickerBase {
             this.currYear = date.getFullYear();
             this.currMonth = date.getMonth();
         }
-        this.renderCalendar(this.view);
+        this.renderِDatePicker(this.view);
     }
     previous() {
         if (this.view === 'year') {
@@ -1780,7 +1882,7 @@ class NgxInputDatePickerComponent extends NgxDatePickerBase {
             this.currYear = date.getFullYear();
             this.currMonth = date.getMonth();
         }
-        this.renderCalendar(this.view);
+        this.renderِDatePicker(this.view);
     }
     selectDay(ev, item) {
         ev.stopPropagation();
@@ -1817,7 +1919,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: { 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: { 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: [
             DateAdapterRegistry,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1829,7 +1931,7 @@ class NgxInputDatePickerComponent extends NgxDatePickerBase {
                 useExisting: forwardRef(() => NgxInputDatePickerComponent),
                 multi: true,
             },
-        ], 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"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" #datepickerWrapper (click)=\"stopPagination($event)\">\r\n  <div class=\"header\">\r\n    <svg\r\n      class=\"calendar-icon\"\r\n      width=\"24\"\r\n      height=\"24\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M16 2V6M8 2V6\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\" />\r\n      <path\r\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\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\" />\r\n      <path\r\n        d=\"M3 10H21\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\" />\r\n      <path\r\n        d=\"M11.9955 14H12.0045M11.9955 18H12.0045M15.991 14H16M8 14H8.00897M8 18H8.00897\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\" />\r\n    </svg>\r\n    {{ calendarHeader }}\r\n  </div>\r\n  <div class=\"sub-header\">\r\n    <div class=\"icons\">\r\n      <span id=\"prev\" (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\" (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          {{ localize().clear }}\r\n        </button>\r\n      }\r\n      @if (config.todayButton) {\r\n        <button (click)=\"gotoToday()\">\r\n          {{ localize().today }}\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      fill=\"currentColor\"\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      fill=\"currentColor\"\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      fill=\"currentColor\"\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: 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputDatePickerComponent, decorators: [{
             type: Component,
@@ -1845,13 +1947,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                             useExisting: forwardRef(() => NgxInputDatePickerComponent),
                             multi: true,
                         },
-                    ], host: {
-                        '[class.dark]': 'theme=="dark"',
-                    }, 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']
-            }], setConfig: [{
+                    ], template: "<div class=\"wrapper\" #datepickerWrapper (click)=\"stopPagination($event)\">\r\n  <div class=\"header\">\r\n    <svg\r\n      class=\"calendar-icon\"\r\n      width=\"24\"\r\n      height=\"24\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M16 2V6M8 2V6\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\" />\r\n      <path\r\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\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\" />\r\n      <path\r\n        d=\"M3 10H21\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\" />\r\n      <path\r\n        d=\"M11.9955 14H12.0045M11.9955 18H12.0045M15.991 14H16M8 14H8.00897M8 18H8.00897\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\" />\r\n    </svg>\r\n    {{ calendarHeader }}\r\n  </div>\r\n  <div class=\"sub-header\">\r\n    <div class=\"icons\">\r\n      <span id=\"prev\" (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\" (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          {{ localize().clear }}\r\n        </button>\r\n      }\r\n      @if (config.todayButton) {\r\n        <button (click)=\"gotoToday()\">\r\n          {{ localize().today }}\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      fill=\"currentColor\"\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      fill=\"currentColor\"\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      fill=\"currentColor\"\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: 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"] }]
+        }], ctorParameters: () => [], propDecorators: { localize: [{ type: i0.Input, args: [{ isSignal: true, alias: "localize", required: false }] }], setConfig: [{
                 type: Input,
                 args: ['config']
             }], locale: [{
@@ -1871,7 +1968,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
 class NgxInputDatePicker {
     el;
     dateAdapterRegistry = inject(DateAdapterRegistry);
-    theme = 'auto';
     openOnCLick = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "openOnCLick" }] : /* istanbul ignore next */ []));
     change = new EventEmitter();
@@ -1984,7 +2080,6 @@ class NgxInputDatePicker {
                 instance.locale = this._locale;
                 instance.minDate = this.min;
                 instance.maxDate = this.max;
-                instance.setTheme = this.theme;
                 instance.updateConfig(this.config);
                 instance.writeValue(this.value);
                 instance.change.subscribe((c) => {
@@ -2045,7 +2140,7 @@ class NgxInputDatePicker {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputDatePicker, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxInputDatePicker, isStandalone: true, selector: "[ngxInputDatePicker]", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: false, isRequired: false, transformFunction: null }, openOnCLick: { classPropertyName: "openOnCLick", publicName: "openOnCLick", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: false, isRequired: false, transformFunction: null }, setMin: { classPropertyName: "setMin", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, setMax: { classPropertyName: "setMax", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, setConfig: { classPropertyName: "setConfig", publicName: "config", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "click": "onClick($event)", "input": "onInput($event)", "blur": "onBlur()" }, properties: { "attr.readOnly": "true" }, classAttribute: "ngx-datepicker-input" }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxInputDatePicker, isStandalone: true, selector: "[ngxInputDatePicker]", inputs: { openOnCLick: { classPropertyName: "openOnCLick", publicName: "openOnCLick", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: false, isRequired: false, transformFunction: null }, setMin: { classPropertyName: "setMin", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, setMax: { classPropertyName: "setMax", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, setConfig: { classPropertyName: "setConfig", publicName: "config", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "click": "onClick($event)", "input": "onInput($event)", "blur": "onBlur()" }, properties: { "attr.readOnly": "true" }, classAttribute: "ngx-datepicker-input" }, providers: [
             DateAdapterRegistry,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -2082,9 +2177,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { theme: [{
-                type: Input
-            }], openOnCLick: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnCLick", required: false }] }], change: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { openOnCLick: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnCLick", required: false }] }], change: [{
                 type: Output
             }], locale: [{
                 type: Input
@@ -2110,17 +2203,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 args: ['blur']
             }] } });
 
+const HOUR_HEIGHT = 64;
+const HALF_HOUR_HEIGHT = HOUR_HEIGHT / 2;
+const MIN_EVENT_MINUTES = 30;
+const MONTH_ROW_COUNT = 6;
+const MONTH_COLUMN_COUNT = 7;
 class NgxCalendarComponent extends NgxDatePickerBase {
-    browserService = inject(BrowserService);
-    theme = this.browserService.prefersDarkMode ? 'dark' : 'light';
-    set setTheme(val) {
-        if (!val || val == 'auto') {
-            this.theme = this.browserService.prefersDarkMode ? 'dark' : 'light';
-        }
-        else {
-            this.theme = val;
-        }
-    }
+    defaultLocalization = inject(NGX_CALENDAR_LOCALIZATION);
+    localize = input(this.defaultLocalization, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "localize" }] : /* istanbul ignore next */ []));
     _config = new NgxDatePickerConfig();
     set config(val) {
         this._config = { ...new NgxDatePickerConfig(), ...val };
@@ -2128,150 +2219,626 @@ class NgxCalendarComponent extends NgxDatePickerBase {
     set locale(val) {
         this._locale = val;
         this.adapter = this.dateAdapterRegistry.resolve(this._locale);
-        this.ngOnInit();
+        if (this.currYear !== undefined)
+            this.syncAnchorToLocale();
+        this.renderCalendar(this.view);
     }
-    /** The minimum valid date. */
     set setMin(value) {
         const validValue = deserialize(value);
         if (!sameDate(validValue, this.minDate)) {
             this.minDate = validValue;
+            this.renderCalendar(this.view);
         }
     }
-    /** The maximum valid date. */
     set setMax(value) {
         const validValue = deserialize(value);
         if (!sameDate(validValue, this.maxDate)) {
             this.maxDate = validValue;
+            this.renderCalendar(this.view);
         }
     }
-    view = 'day';
+    view = 'month';
     _events = [];
     set events(val) {
-        if (val && Array.isArray(val)) {
-            this._events = val;
-        }
+        this._events = Array.isArray(val) ? val : [];
+        if (this.anchorDate)
+            this.renderCalendar(this.view);
+    }
+    get events() {
+        return this._events;
     }
     dateChange = new EventEmitter();
     selectEvent = new EventEmitter();
-    defaultHeight = 600;
-    minHeight = this.defaultHeight;
+    eventChange = new EventEmitter();
+    eventsChange = new EventEmitter();
     selected;
+    anchorDate;
+    eventViewItems = [];
+    monthEventSegments = [];
+    monthEventRows = Array.from({ length: MONTH_ROW_COUNT }, () => []);
+    weekDays = [];
+    allDayByColumn = [];
+    timeSlots = Array.from({ length: 48 }, (_, i) => i * 30);
+    hourHeight = HOUR_HEIGHT;
+    timeColumnWidth = 64;
     calendarWrapper = viewChild('calendarWrapper', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "calendarWrapper" }] : /* istanbul ignore next */ []));
+    interaction = null;
     constructor() {
         super();
     }
     ngOnInit() {
         this.months = this.adapter.longMonths;
         this.weeks = this.adapter.longDays;
-        if (this.selected) {
-            let converted = this.adapter.toLocale(this.selected);
-            this.currYear = converted.year;
-            this.currMonth = converted.month;
-            this.renderCalendar(this.view);
-        }
-        else {
-            this.gotoToday();
-        }
+        this.anchorDate = this.selected
+            ? new Date(this.selected)
+            : this.adapter.getDate(this.adapter.today());
+        this.syncAnchorToLocale();
+        this.renderCalendar(this.view);
     }
-    ngAfterViewInit() {
+    onResize() {
         this.calcCellSize();
     }
-    onResize(ev) {
-        this.calcCellSize();
+    onDocumentPointerMove(event) {
+        if (!this.interaction || event.pointerId !== this.interaction.pointerId)
+            return;
+        this.updateEventInteraction(event);
+    }
+    onDocumentPointerUp(event) {
+        if (!this.interaction || event.pointerId !== this.interaction.pointerId)
+            return;
+        this.finishEventInteraction(event, false);
+    }
+    onDocumentPointerCancel(event) {
+        if (!this.interaction || event.pointerId !== this.interaction.pointerId)
+            return;
+        this.finishEventInteraction(event, true);
     }
     calcCellSize() {
         const fullWidth = this.calendarWrapper()?.nativeElement?.clientWidth ?? 0;
-        const cellHeight = fullWidth / 6;
-        this.minHeight = fullWidth > this.defaultHeight ? this.defaultHeight : fullWidth;
-        if (fullWidth <= 500) {
-            this.weeks = this.adapter.shortDays;
+        this.minHeight = fullWidth > this.defaultHeight ? this.defaultHeight : Math.max(fullWidth, 320);
+        this.weeks = fullWidth <= 500 ? this.adapter.shortDays : this.adapter.longDays;
+    }
+    renderCalendar(view) {
+        if (!this.anchorDate)
+            return;
+        this.syncAnchorToLocale();
+        switch (view) {
+            case 'month':
+                super.renderCalendar('month', undefined, this.renderEvents);
+                this.buildMonthEventSegments();
+                break;
+            case 'week':
+            case 'day':
+                this.renderTimedView();
+                break;
+            case 'event':
+                this.renderEventView();
+                break;
+        }
+        this.displayMonth = this.months[this.currMonth] ?? '';
+        queueMicrotask(() => this.calcCellSize());
+    }
+    get renderEvents() {
+        return this._events;
+    }
+    syncAnchorToLocale() {
+        const localeDate = this.adapter.toLocale(this.anchorDate);
+        this.currYear = localeDate.year;
+        this.currMonth = localeDate.month ?? 0;
+        this.months = this.adapter.longMonths;
+        this.weeks = this.adapter.longDays;
+    }
+    renderTimedView() {
+        const dates = this.getWeekDates(this.anchorDate);
+        const visibleDates = this.view === 'day' ? [new Date(this.startOfDay(this.anchorDate))] : dates;
+        this.weekDays = visibleDates.map((date, column) => ({
+            date,
+            label: this.adapter.formatDate(this.adapter.toLocale(date), 'full') ?? '',
+            dayNumber: String(this.adapter.toLocale(date).day),
+            isToday: sameDate(date, this.adapter.getDate(this.adapter.today())),
+            events: this.buildTimedEventsForDay(date, column, visibleDates.length),
+        }));
+        this.allDayByColumn = this.weekDays.map((day, column) => this.buildAllDayEventsForDay(day.date, column));
+        this.viewWeeks = this.timeSlots.map((minutes) => ({
+            time: minutes / 60,
+            displayTime: this.formatTime(minutes),
+            weeks: visibleDates.map(() => ''),
+            active: true,
+            selected: false,
+        }));
+    }
+    /**
+     * Builds a collision layout per overlap cluster. Each cluster gets its own
+     * column count, which prevents a short 09:00 event from being unnecessarily
+     * squeezed because another event overlaps at 15:00.
+     */
+    buildTimedEventsForDay(date, column, columnCount) {
+        const dayStart = this.startOfDay(date);
+        const dayEnd = this.endOfDay(date);
+        const candidates = this.normalizedEvents()
+            .filter(({ start, end, source }) => !source.allDay &&
+            !Number.isNaN(start.getTime()) &&
+            end.getTime() >= dayStart.getTime() &&
+            start.getTime() <= dayEnd.getTime())
+            .map(({ source, start, end }) => {
+            const segmentStart = new Date(Math.max(start.getTime(), dayStart.getTime()));
+            const segmentEnd = new Date(Math.min(end.getTime(), dayEnd.getTime()));
+            return {
+                ...source,
+                start,
+                end,
+                segmentStart,
+                segmentEnd,
+                allDay: false,
+                continuesBefore: start.getTime() < dayStart.getTime(),
+                continuesAfter: end.getTime() > dayEnd.getTime(),
+                isStart: start.getTime() >= dayStart.getTime() && start.getTime() <= dayEnd.getTime(),
+                isEnd: end.getTime() >= dayStart.getTime() && end.getTime() <= dayEnd.getTime(),
+                column,
+                columnCount,
+            };
+        })
+            .sort((a, b) => a.segmentStart.getTime() - b.segmentStart.getTime() ||
+            b.segmentEnd.getTime() - a.segmentEnd.getTime());
+        const result = [];
+        let cluster = [];
+        let clusterLanes = [];
+        let clusterEnd = -Infinity;
+        const flushCluster = () => {
+            if (!cluster.length)
+                return;
+            const laneCount = clusterLanes.length;
+            for (const item of cluster) {
+                item.columnCount = laneCount;
+            }
+            result.push(...cluster);
+            cluster = [];
+            clusterLanes = [];
+            clusterEnd = -Infinity;
+        };
+        for (const e of candidates) {
+            const start = e.segmentStart.getTime();
+            if (cluster.length && start > clusterEnd)
+                flushCluster();
+            let lane = clusterLanes.findIndex((items) => {
+                const last = items[items.length - 1];
+                return last.segmentEnd.getTime() <= start;
+            });
+            if (lane < 0) {
+                lane = clusterLanes.length;
+                clusterLanes.push([]);
+            }
+            const positioned = { ...e, lane, column: lane };
+            clusterLanes[lane].push(positioned);
+            cluster.push(positioned);
+            clusterEnd = Math.max(clusterEnd, e.segmentEnd.getTime());
+            const startMinutes = e.segmentStart.getHours() * 60 + e.segmentStart.getMinutes();
+            const endMinutes = e.segmentEnd.getHours() * 60 + e.segmentEnd.getMinutes();
+            const effectiveEnd = Math.max(endMinutes, startMinutes + MIN_EVENT_MINUTES);
+            positioned.top = (startMinutes / 60) * HOUR_HEIGHT;
+            positioned.height = Math.max(((effectiveEnd - startMinutes) / 60) * HOUR_HEIGHT, 28);
+        }
+        flushCluster();
+        return result
+            .concat(cluster)
+            .map(({ lane, segmentStart, segmentEnd, ...event }) => event);
+    }
+    buildAllDayEventsForDay(date, column) {
+        const dayStart = this.startOfDay(date);
+        const dayEnd = this.endOfDay(date);
+        return this.normalizedEvents()
+            .filter(({ source, start, end }) => !!source.allDay &&
+            !Number.isNaN(start.getTime()) &&
+            end.getTime() >= dayStart.getTime() &&
+            start.getTime() <= dayEnd.getTime())
+            .map(({ source, start, end }) => ({
+            ...source,
+            start,
+            end,
+            top: 0,
+            height: 24,
+            allDay: true,
+            column,
+            columnCount: 1,
+            continuesBefore: start.getTime() < dayStart.getTime(),
+            continuesAfter: end.getTime() > dayEnd.getTime(),
+            isStart: start.getTime() >= dayStart.getTime() && start.getTime() <= dayEnd.getTime(),
+            isEnd: end.getTime() >= dayStart.getTime() && end.getTime() <= dayEnd.getTime(),
+        }));
+    }
+    /** Creates FullCalendar-style horizontal segments for the six visible month rows. */
+    buildMonthEventSegments() {
+        const visibleDays = this.viewDays;
+        if (!visibleDays.length) {
+            this.monthEventSegments = [];
+            this.monthEventRows = Array.from({ length: MONTH_ROW_COUNT }, () => []);
+            return;
         }
-        else if (fullWidth > 500) {
-            this.weeks = this.adapter.longDays;
+        const gridStart = this.startOfDay(visibleDays[0].date);
+        const gridEnd = this.endOfDay(visibleDays[visibleDays.length - 1].date);
+        const segments = [];
+        for (const { source, start, end } of this.normalizedEvents()) {
+            if (Number.isNaN(start.getTime()) ||
+                end.getTime() < gridStart.getTime() ||
+                start.getTime() > gridEnd.getTime())
+                continue;
+            const clippedStart = new Date(Math.max(start.getTime(), gridStart.getTime()));
+            const clippedEnd = new Date(Math.min(end.getTime(), gridEnd.getTime()));
+            const firstIndex = this.dayIndexInMonthGrid(clippedStart, gridStart);
+            const lastIndex = this.dayIndexInMonthGrid(clippedEnd, gridStart);
+            for (let index = Math.max(0, firstIndex); index <= Math.min(visibleDays.length - 1, lastIndex);) {
+                const row = Math.floor(index / MONTH_COLUMN_COUNT);
+                const rowEndIndex = Math.min((row + 1) * MONTH_COLUMN_COUNT - 1, lastIndex);
+                const startColumn = index % MONTH_COLUMN_COUNT;
+                const endColumn = rowEndIndex % MONTH_COLUMN_COUNT;
+                const segmentStart = new Date(visibleDays[index].date);
+                const segmentEnd = this.endOfDay(visibleDays[rowEndIndex].date);
+                segments.push({
+                    ...source,
+                    start,
+                    end,
+                    row,
+                    startColumn,
+                    endColumn,
+                    continuesBefore: start.getTime() < segmentStart.getTime(),
+                    continuesAfter: end.getTime() > segmentEnd.getTime(),
+                    isStart: start.getTime() >= segmentStart.getTime() && start.getTime() <= segmentEnd.getTime(),
+                    isEnd: end.getTime() >= segmentStart.getTime() && end.getTime() <= segmentEnd.getTime(),
+                    lane: 0,
+                });
+                index = rowEndIndex + 1;
+            }
         }
+        // Stable ordering makes the same events keep the same visual lane while navigating.
+        segments.sort((a, b) => a.row - b.row ||
+            a.startColumn - b.startColumn ||
+            a.start.getTime() - b.start.getTime() ||
+            String(a.title ?? '').localeCompare(String(b.title ?? '')));
+        // Assign lanes independently inside every week row.
+        const lanesByRow = new Map();
+        for (const segment of segments) {
+            const lanes = lanesByRow.get(segment.row) ?? [];
+            let lane = lanes.findIndex((items) => items.every((item) => item.endColumn < segment.startColumn));
+            if (lane < 0) {
+                lane = lanes.length;
+                lanes.push([]);
+            }
+            segment.lane = lane;
+            lanes[lane].push(segment);
+            lanesByRow.set(segment.row, lanes);
+        }
+        this.monthEventSegments = segments;
+        this.monthEventRows = Array.from({ length: MONTH_ROW_COUNT }, () => []);
+        for (const segment of segments)
+            this.monthEventRows[segment.row].push(segment);
+    }
+    dayIndexInMonthGrid(date, gridStart) {
+        const a = this.startOfDay(date);
+        const b = this.startOfDay(gridStart);
+        const aUtc = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
+        const bUtc = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
+        return Math.round((aUtc - bUtc) / 86_400_000);
+    }
+    normalizedEvents() {
+        return this.renderEventSources().map((source) => {
+            const normalized = this.normalizeEvent(source);
+            return { source, start: normalized.start, end: normalized.end };
+        });
     }
-    renderCalendar(view) {
-        // console.log('_events', this._events);
-        super.renderCalendar(view, undefined, this._events, () => { });
+    renderEventSources() {
+        if (!this.interaction?.active)
+            return this._events;
+        return this._events.map((event) => this.sameEvent(event, this.interaction.source) ? this.interaction.preview : event);
+    }
+    renderEventView() {
+        const monthStart = this.adapter.getDate({
+            locale: this._locale,
+            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),
+        });
+        this.eventViewItems = this.renderEventSources()
+            .map((event) => {
+            const n = this.normalizeEvent(event);
+            return { event: event, start: n.start, end: n.end };
+        })
+            .filter(({ start, end }) => compareDate(end, monthStart) >= 0 && compareDate(start, monthEnd) <= 0)
+            .sort((a, b) => a.start.getTime() - b.start.getTime());
+    }
+    get headerText() {
+        if (!this.anchorDate)
+            return '';
+        if (this.view === 'day') {
+            return this.adapter.formatDate(this.adapter.toLocale(this.anchorDate), 'full') ?? '';
+        }
+        if (this.view === 'week') {
+            const days = this.getWeekDates(this.anchorDate);
+            return this.formatDateRange(days[0], days[6]);
+        }
+        return `${this.displayMonth} ${this.currYear}`;
+    }
+    formatDateRange(start, end) {
+        const s = this.adapter.toLocale(start);
+        const e = this.adapter.toLocale(end);
+        const startText = this.adapter.formatDate(s, 'd MMMM') ?? '';
+        const endText = this.adapter.formatDate(e, 'd MMMM') ?? '';
+        return s.year === e.year
+            ? `${startText} – ${endText}, ${s.year}`
+            : `${startText}, ${s.year} – ${endText}, ${e.year}`;
+    }
+    formatEventDate(date) {
+        return this.adapter.formatDate(this.adapter.toLocale(date), 'd MMMM, yyyy') ?? '';
+    }
+    formatTime(minutes) {
+        return `${String(Math.floor(minutes / 60)).padStart(2, '0')}:${String(minutes % 60).padStart(2, '0')}`;
     }
     changeView(v) {
+        this.cancelEventInteraction();
         this.view = v;
-        this.renderCalendar(this.view);
+        this.renderCalendar(v);
     }
     gotoToday() {
-        let today = this.adapter.today();
-        this.selected = this.adapter.getDate(today);
-        this.currYear = today.year;
-        this.currMonth = today.month ?? 1;
-        this.changeView(this.view);
+        this.cancelEventInteraction();
+        this.anchorDate = this.adapter.getDate(this.adapter.today());
+        this.selected = new Date(this.anchorDate);
+        this.syncAnchorToLocale();
+        this.renderCalendar(this.view);
     }
     selectDay(ev, item) {
         ev.stopPropagation();
         if (item.active) {
+            this.selected = item.date;
+            this.anchorDate = new Date(item.date);
             this.dateChange.emit(item);
+            this.renderCalendar(this.view);
         }
     }
-    selectMonth(ev, item) {
-        ev.stopPropagation();
-        if (item.active) {
-            this.currMonth = item.month;
-            this.changeView('day');
-        }
+    next() {
+        this.navigate(1);
     }
-    selectYear(ev, item) {
-        ev.stopPropagation();
-        if (item.active) {
-            this.currYear = item.year;
-            this.changeView('month');
-        }
+    previous() {
+        this.navigate(-1);
     }
-    next() {
-        if (this.view === 'month' || this.view == 'event') {
-            this.currMonth++;
-        }
-        else if (this.view == 'day' || this.view == 'week') {
-            this.currentWeek++;
+    navigate(direction) {
+        const d = new Date(this.anchorDate);
+        if (this.view === 'month' || this.view === 'event') {
+            const locale = this.adapter.toLocale(d);
+            this.anchorDate = this.adapter.getDate({
+                locale: this._locale,
+                year: locale.year,
+                month: locale.month + direction,
+                day: 1,
+            });
         }
-        if (this.currMonth < 0 || this.currMonth > 11) {
-            let date = new Date(this.currYear, this.currMonth);
-            this.currYear = date.getFullYear();
-            this.currMonth = date.getMonth();
+        else {
+            d.setDate(d.getDate() + direction * (this.view === 'week' ? 7 : 1));
+            this.anchorDate = d;
         }
+        this.syncAnchorToLocale();
         this.renderCalendar(this.view);
     }
-    previous() {
-        if (this.view === 'month' || this.view == 'event') {
-            this.currMonth--;
-        }
-        else if (this.view == 'day' || this.view == 'week') {
-            this.currentWeek--;
-        }
-        if (this.currMonth < 0 || this.currMonth > 11) {
-            let date = new Date(this.currYear, this.currMonth);
-            this.currYear = date.getFullYear();
-            this.currMonth = date.getMonth();
+    onclickEvent(ev, item, event) {
+        ev.stopPropagation();
+        this.selectEvent.emit({ date: item.date, event });
+    }
+    onTimedEventClick(ev, event, date) {
+        ev.stopPropagation();
+        if (this.interaction?.active)
+            return;
+        this.selectEvent.emit({ date, event });
+    }
+    startMonthEventInteraction(ev, segment, type = 'move') {
+        if (ev.button !== 0)
+            return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.beginInteraction(ev, segment, type, 'month');
+    }
+    startTimedEventInteraction(ev, event, type = 'move') {
+        if (ev.button !== 0)
+            return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.beginInteraction(ev, event, type, event.allDay ? 'all-day' : 'timed');
+    }
+    beginInteraction(ev, event, type, _surface) {
+        const source = this._events.find((candidate) => this.sameEvent(candidate, event));
+        if (!source)
+            return;
+        this.interaction = {
+            type,
+            source,
+            previousEvent: { ...source },
+            pointerId: ev.pointerId,
+            startX: ev.clientX,
+            startY: ev.clientY,
+            originColumn: 0,
+            originRow: 0,
+            preview: { ...source },
+            deltaDays: 0,
+            deltaMinutes: 0,
+            active: true,
+            surface: _surface,
+        };
+    }
+    updateEventInteraction(ev) {
+        const state = this.interaction;
+        if (!state)
+            return;
+        const monthMetrics = state.surface === 'month' ? this.monthPointerDelta(ev) : null;
+        const timedMetrics = state.surface === 'timed' ? this.timedPointerDelta(ev) : null;
+        const allDayMetrics = state.surface === 'all-day' ? this.allDayPointerDelta(ev) : null;
+        let deltaDays = monthMetrics?.days ?? timedMetrics?.days ?? allDayMetrics?.days ?? 0;
+        let deltaMinutes = timedMetrics?.minutes ?? 0;
+        const preview = this.applyEventDelta(state.source, state.type, deltaDays, deltaMinutes);
+        if (!this.isWithinBounds(preview))
+            return;
+        state.preview = preview;
+        state.deltaDays = deltaDays;
+        state.deltaMinutes = deltaMinutes;
+        this.renderCalendar(this.view);
+    }
+    finishEventInteraction(ev, cancelled) {
+        const state = this.interaction;
+        if (!state)
+            return;
+        if (!cancelled)
+            this.updateEventInteraction(ev);
+        const changed = !this.sameEventValue(state.source, state.preview);
+        this.interaction = null;
+        if (!cancelled && changed) {
+            const updated = this._events.map((event) => this.sameEvent(event, state.source) ? state.preview : event);
+            this._events = updated;
+            this.eventChange.emit({
+                event: state.preview,
+                previousEvent: state.previousEvent,
+                interaction: state.type,
+                deltaDays: state.deltaDays,
+                deltaMinutes: state.deltaMinutes,
+            });
+            this.eventsChange.emit(updated);
         }
         this.renderCalendar(this.view);
     }
-    onclickEvent(item, event) {
-        this.selectEvent.emit({
-            date: item.date,
-            event: event,
+    cancelEventInteraction() {
+        if (!this.interaction)
+            return;
+        this.interaction = null;
+    }
+    monthPointerDelta(ev) {
+        if (!this.interaction || this.view !== 'month')
+            return null;
+        const root = this.calendarWrapper()?.nativeElement.querySelector('.days');
+        if (!root)
+            return null;
+        const rect = root.getBoundingClientRect();
+        const cellWidth = rect.width / MONTH_COLUMN_COUNT;
+        const cellHeight = rect.height / MONTH_ROW_COUNT;
+        const startColumn = Math.max(0, Math.min(MONTH_COLUMN_COUNT - 1, Math.floor((this.interaction.startX - rect.left) / cellWidth)));
+        const currentColumn = Math.max(0, Math.min(MONTH_COLUMN_COUNT - 1, Math.floor((ev.clientX - rect.left) / cellWidth)));
+        const startRow = Math.max(0, Math.min(MONTH_ROW_COUNT - 1, Math.floor((this.interaction.startY - rect.top) / cellHeight)));
+        const currentRow = Math.max(0, Math.min(MONTH_ROW_COUNT - 1, Math.floor((ev.clientY - rect.top) / cellHeight)));
+        return { days: (currentRow - startRow) * 7 + (currentColumn - startColumn) };
+    }
+    allDayPointerDelta(ev) {
+        if (!this.interaction || this.view === 'month' || this.view === 'event')
+            return null;
+        const root = this.calendarWrapper()?.nativeElement.querySelector('.all-day-row');
+        if (!root)
+            return null;
+        const columns = Array.from(root.querySelectorAll('.all-day-cell'));
+        if (!columns.length)
+            return null;
+        const indexAt = (x) => {
+            const index = columns.findIndex((column) => {
+                const rect = column.getBoundingClientRect();
+                return x >= rect.left && x <= rect.right;
+            });
+            return index < 0 ? 0 : index;
+        };
+        return { days: indexAt(ev.clientX) - indexAt(this.interaction.startX) };
+    }
+    timedPointerDelta(ev) {
+        if (!this.interaction || (this.view !== 'day' && this.view !== 'week'))
+            return null;
+        const root = this.calendarWrapper()?.nativeElement.querySelector('.time-grid');
+        if (!root)
+            return null;
+        const columns = Array.from(root.querySelectorAll('.day-column'));
+        if (!columns.length)
+            return null;
+        const startColumn = this.columnAtPoint(columns, this.interaction.startX, this.interaction.startY);
+        const currentColumn = this.columnAtPoint(columns, ev.clientX, ev.clientY);
+        const startIndex = startColumn ?? 0;
+        const currentIndex = currentColumn ?? startIndex;
+        const rect = (columns[currentIndex] ?? columns[0]).getBoundingClientRect();
+        const startRect = (columns[startIndex] ?? columns[0]).getBoundingClientRect();
+        const startMinute = this.snapMinutes(((this.interaction.startY - startRect.top) / HALF_HOUR_HEIGHT) * 30);
+        const currentMinute = this.snapMinutes(((ev.clientY - rect.top) / HALF_HOUR_HEIGHT) * 30);
+        return { days: currentIndex - startIndex, minutes: currentMinute - startMinute };
+    }
+    columnAtPoint(columns, x, y) {
+        const index = columns.findIndex((column) => {
+            const rect = column.getBoundingClientRect();
+            return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
         });
+        return index < 0 ? null : index;
+    }
+    snapMinutes(minutes) {
+        return Math.max(0, Math.min(24 * 60, Math.round(minutes / 30) * 30));
+    }
+    applyEventDelta(source, type, deltaDays, deltaMinutes) {
+        const normalized = this.normalizeEvent(source);
+        let start = new Date(normalized.start);
+        let end = new Date(normalized.end);
+        if (type === 'move') {
+            start = this.addMinutes(this.addDays(start, deltaDays), deltaMinutes);
+            end = this.addMinutes(this.addDays(end, deltaDays), deltaMinutes);
+        }
+        else if (type === 'resize-start') {
+            start = this.addMinutes(this.addDays(start, deltaDays), deltaMinutes);
+            if (start.getTime() > end.getTime() - MIN_EVENT_MINUTES * 60_000) {
+                start = new Date(end.getTime() - MIN_EVENT_MINUTES * 60_000);
+            }
+        }
+        else {
+            end = this.addMinutes(this.addDays(end, deltaDays), deltaMinutes);
+            if (end.getTime() < start.getTime() + MIN_EVENT_MINUTES * 60_000) {
+                end = new Date(start.getTime() + MIN_EVENT_MINUTES * 60_000);
+            }
+        }
+        return { ...source, start, end };
+    }
+    addDays(date, days) {
+        const d = new Date(date);
+        d.setDate(d.getDate() + days);
+        return d;
+    }
+    addMinutes(date, minutes) {
+        return new Date(date.getTime() + minutes * 60_000);
+    }
+    isWithinBounds(event) {
+        const n = this.normalizeEvent(event);
+        if (this.minDate && compareDate(n.start, this.minDate) < 0)
+            return false;
+        if (this.maxDate && compareDate(n.end, this.maxDate) > 0)
+            return false;
+        return true;
+    }
+    sameEvent(a, b) {
+        return a.id != null && b.id != null ? a.id === b.id : a === b;
+    }
+    sameEventValue(a, b) {
+        const aa = this.normalizeEvent(a);
+        const bb = this.normalizeEvent(b);
+        return aa.start.getTime() === bb.start.getTime() && aa.end.getTime() === bb.end.getTime();
+    }
+    startOfDay(date) {
+        const d = new Date(date);
+        d.setHours(0, 0, 0, 0);
+        return d;
+    }
+    endOfDay(date) {
+        const d = new Date(date);
+        d.setHours(23, 59, 59, 999);
+        return d;
     }
+    defaultHeight = 600;
+    minHeight = this.defaultHeight;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxCalendarComponent, isStandalone: true, selector: "ngx-calendar", inputs: { setTheme: ["theme", "setTheme"], config: "config", locale: "locale", setMin: ["min", "setMin"], setMax: ["max", "setMax"], view: "view", events: "events" }, outputs: { dateChange: "dateChange", selectEvent: "selectEvent" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class.dark": "theme==\"dark\"" } }, providers: [DateAdapterRegistry], viewQueries: [{ propertyName: "calendarWrapper", first: true, predicate: ["calendarWrapper"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" #datepickerWrapper>\n  <div class=\"header\">\n    <div class=\"nxt-prv-buttons\">\n      <button id=\"prev\" class=\"previous dtp-btn\" (click)=\"previous()\" title=\"Previous\">\n        <ng-template\n          [ngTemplateOutlet]=\"\n            _config.previousButtonTemplate || defaultPreviousBTNTemplate\n          \"></ng-template>\n      </button>\n      @if (_config.todayButton) {\n        <button class=\"today dtp-btn\" (click)=\"gotoToday()\">\n          {{ _config.todayButtonText }}\n        </button>\n      }\n      <button id=\"next\" class=\"next dtp-btn\" (click)=\"next()\" title=\"Next\">\n        <ng-template\n          [ngTemplateOutlet]=\"_config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\n      </button>\n    </div>\n    <div class=\"current-date\">\n      <span>\n        {{ currYear }}\n      </span>\n      <span>\n        {{ displayMonth }}\n      </span>\n    </div>\n    <div class=\"view-mode\">\n      {{ view }}\n      <button\n        class=\"dayview dtp-btn\"\n        (click)=\"changeView('day')\"\n        [class.active]=\"view == 'day'\"\n        title=\"Month View\">\n        Month\n      </button>\n      <button\n        class=\"dayview dtp-btn\"\n        (click)=\"changeView('week')\"\n        [class.active]=\"view == 'week'\"\n        title=\"Week View\">\n        Week\n      </button>\n      <button\n        class=\"dayview dtp-btn\"\n        (click)=\"changeView('day')\"\n        [class.active]=\"view == 'day'\"\n        title=\"Day View\">\n        Day\n      </button>\n      <button\n        class=\"dayview dtp-btn\"\n        (click)=\"changeView('event')\"\n        [class.active]=\"view == 'event'\"\n        title=\"Day View\">\n        Event\n      </button>\n    </div>\n  </div>\n  <div class=\"calendar\" #calendarWrapper>\n    @if (view === 'day') {\n      <ul class=\"weeks\">\n        @for (w of weeks; track $index) {\n          <li>\n            {{ w }}\n          </li>\n        }\n      </ul>\n      <ul class=\"days\" [style.minHeight.px]=\"minHeight\">\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            <div>{{ item.day }}</div>\n            @if (item.events) {\n              <div class=\"ms-day-events\">\n                @for (event of item.events; track $index) {\n                  <a\n                    tabindex=\"0\"\n                    class=\"ms-day-event\"\n                    [title]=\"event.title\"\n                    (click)=\"onclickEvent(item, event)\">\n                    {{ event.title }}\n                  </a>\n                }\n              </div>\n            }\n          </li>\n        }\n      </ul>\n    } @else if (view == 'week' || view == 'month') {\n      <table>\n        <thead>\n          <tr>\n            <th></th>\n            @for (w of weeks; track $index) {\n              <th>{{ w }}</th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (item of viewWeeks; track $index; let i = $index) {\n            <tr>\n              <td [title]=\"item.displayTime\">{{ item.time % 1 == 0 ? item.time : '' }}</td>\n              @for (w of item.weeks; track $index) {\n                <td></td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    } @else if (view == 'event') {\n      not implemented\n    }\n  </div>\n</div>\n\n<ng-template #defaultPreviousBTNTemplate>\n  <svg width=\"15px\" height=\"30px\" 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=\"30px\" 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}:host-context(.dark){--ngx-color-bg: #222;--ngx-color-text: #fff;--ngx-border-color: #c0c0c0}.wrapper{background-color:var(--ngx-color-bg);color:var(--ngx-color-text);border-radius:5px}.wrapper .dtp-btn{background:none;border:none;color:inherit;border-radius:3px;padding:3px 15px;box-shadow:0 0 4px #0003;transition:all .3s;display:inline-flex;align-items:center}.wrapper .dtp-btn:not([disabled]):hover{cursor:pointer;background:#87879e}.wrapper .dtp-btn.active{background:#87879e}.wrapper .dtp-btn svg{fill:var(--ngx-color-text)}.wrapper .header{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 0}.wrapper .header .current-date{text-align:center;flex:auto}.wrapper .nxt-prv-buttons{display:flex;align-items:center}.wrapper .nxt-prv-buttons .dtp-btn{border-radius:0}.wrapper .nxt-prv-buttons .dtp-btn:first-child{border-radius:5px 0 0 5px}.wrapper .nxt-prv-buttons .dtp-btn:last-child{border-radius:0 5px 5px 0}.calendar{padding:10px}.calendar ul{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;border:1px var(--ngx-border-color) solid;border-bottom:none}.calendar .days{margin-bottom:20px}.calendar .days li{width:14.2857142857%;text-align:end;max-height:300px;overflow:auto}.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{position:relative;border-right:1px var(--ngx-border-color) solid;border-bottom:1px var(--ngx-border-color) solid;padding:4px}.calendar li.de-active{color:#cbcbcb}.calendar li.selected{border:1px #1216fa solid}.calendar li.today{background-color:#ff9d0130}.calendar .weeks li{cursor:default;width:14.2857142857%;text-align:center;font-weight:700}.calendar .weeks li:hover{background:none}.ms-day-events .ms-day-event{color:#3f51b5;background:var(--ngx-color-bg);border:1px rgba(63,81,181,.1215686275) solid;border-radius:4px;min-height:25px;padding:4px;margin:4px 0;text-decoration:none;display:block}::ng-deep html[dir=rtl] .wrapper .nxt-prv-buttons .dtp-btn:first-child,::ng-deep body[dir=rtl] .wrapper .nxt-prv-buttons .dtp-btn:first-child{border-radius:0 5px 5px 0!important}::ng-deep html[dir=rtl] .wrapper .nxt-prv-buttons .dtp-btn:last-child,::ng-deep body[dir=rtl] .wrapper .nxt-prv-buttons .dtp-btn:last-child{border-radius:5px 0 0 5px!important}::ng-deep html[dir=rtl] .wrapper .wrapper .dtp-btn.next,::ng-deep html[dir=rtl] .wrapper .wrapper .dtp-btn.previous,::ng-deep body[dir=rtl] .wrapper .wrapper .dtp-btn.next,::ng-deep body[dir=rtl] .wrapper .wrapper .dtp-btn.previous{transform:rotate(180deg)}table{width:100%;border-collapse:collapse}table td,table th{border:1px rgb(158,158,158) solid;padding:5px;height:1.5em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxCalendarComponent, isStandalone: true, selector: "ngx-calendar", inputs: { localize: { classPropertyName: "localize", publicName: "localize", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, setMin: { classPropertyName: "setMin", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, setMax: { classPropertyName: "setMax", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", selectEvent: "selectEvent", eventChange: "eventChange", eventsChange: "eventsChange" }, host: { listeners: { "window:resize": "onResize()", "document:pointermove": "onDocumentPointerMove($event)", "document:pointerup": "onDocumentPointerUp($event)", "document:pointercancel": "onDocumentPointerCancel($event)" } }, providers: [DateAdapterRegistry], viewQueries: [{ propertyName: "calendarWrapper", first: true, predicate: ["calendarWrapper"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" [class.is-interacting]=\"!!interaction\">\n  <div class=\"header\">\n    <div class=\"nxt-prv-buttons\">\n      <button type=\"button\" class=\"previous dtp-btn\" (click)=\"previous()\" title=\"Previous\">\n        <ng-template\n          [ngTemplateOutlet]=\"\n            _config.previousButtonTemplate || defaultPreviousBTNTemplate\n          \"></ng-template>\n      </button>\n      @if (_config.todayButton) {\n        <button type=\"button\" class=\"today dtp-btn\" (click)=\"gotoToday()\">\n          {{ localize().today }}\n        </button>\n      }\n      <button type=\"button\" class=\"next dtp-btn\" (click)=\"next()\" title=\"Next\">\n        <ng-template\n          [ngTemplateOutlet]=\"_config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\n      </button>\n    </div>\n\n    <div class=\"current-date\" aria-live=\"polite\">{{ headerText }}</div>\n\n    <div class=\"view-mode\">\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('month')\"\n        [class.active]=\"view === 'month'\">\n        {{ localize().month }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('week')\"\n        [class.active]=\"view === 'week'\">\n        {{ localize().week }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('day')\"\n        [class.active]=\"view === 'day'\">\n        {{ localize().day }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('event')\"\n        [class.active]=\"view === 'event'\">\n        {{ localize().event }}\n      </button>\n    </div>\n  </div>\n\n  <div class=\"calendar\" #calendarWrapper>\n    @switch (view) {\n      @case ('month') {\n        <ul class=\"weeks\">\n          @for (w of weeks; track $index) {\n            <li>{{ w }}</li>\n          }\n        </ul>\n\n        <div class=\"month-grid\" [style.minHeight.px]=\"minHeight\">\n          @for (row of monthEventRows; track $index; let rowIndex = $index) {\n            <div class=\"month-row\">\n              @for (\n                item of viewDays.slice(rowIndex * 7, rowIndex * 7 + 7);\n                track item.date?.getTime() ?? $index\n              ) {\n                <button\n                  type=\"button\"\n                  class=\"month-day\"\n                  [class.de-active]=\"!item.active\"\n                  [class.today]=\"item.isToday\"\n                  [class.selected]=\"item.selected\"\n                  (click)=\"selectDay($event, item)\">\n                  <span class=\"day-number\">{{ item.day }}</span>\n                </button>\n              }\n\n              <div class=\"month-event-layer\" aria-live=\"polite\">\n                @for (event of row; track event.id ?? event.start.getTime() ?? $index) {\n                  <button\n                    type=\"button\"\n                    class=\"month-event\"\n                    [class.continues-before]=\"event.continuesBefore\"\n                    [class.continues-after]=\"event.continuesAfter\"\n                    [class.event-start]=\"event.isStart\"\n                    [class.event-end]=\"event.isEnd\"\n                    [class.is-dragging]=\"\n                      interaction?.source === event ||\n                      (interaction?.source?.id != null && interaction?.source?.id === event.id)\n                    \"\n                    [style.gridColumn]=\"event.startColumn + 1 + ' / ' + (event.endColumn + 2)\"\n                    [style.gridRow]=\"event.lane + 1\"\n                    [style.background]=\"event.backgroundColor || event.color || null\"\n                    [style.borderColor]=\"event.borderColor || event.color || null\"\n                    [style.color]=\"event.textColor || null\"\n                    [title]=\"event.title || ''\"\n                    (pointerdown)=\"startMonthEventInteraction($event, event)\"\n                    (click)=\"\n                      onclickEvent($event, { date: event.start, day: 0, active: true }, event)\n                    \">\n                    @if (event.isStart) {\n                      <span class=\"event-title\">{{ event.title || 'Untitled event' }}</span>\n                    } @else {\n                      <span class=\"event-title continuation-title\">{{ event.title || '' }}</span>\n                    }\n\n                    @if (event.isStart) {\n                      <span\n                        class=\"resize-handle resize-start\"\n                        title=\"Resize start\"\n                        (pointerdown)=\"\n                          startMonthEventInteraction($event, event, 'resize-start')\n                        \"></span>\n                    }\n                    @if (event.isEnd) {\n                      <span\n                        class=\"resize-handle resize-end\"\n                        title=\"Resize end\"\n                        (pointerdown)=\"\n                          startMonthEventInteraction($event, event, 'resize-end')\n                        \"></span>\n                    }\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @case ('week') {\n        <ng-container [ngTemplateOutlet]=\"timedCalendar\"></ng-container>\n      }\n\n      @case ('day') {\n        <ng-container [ngTemplateOutlet]=\"timedCalendar\"></ng-container>\n      }\n\n      @case ('event') {\n        <div class=\"event-list\">\n          @if (eventViewItems.length) {\n            @for (item of eventViewItems; track item.event.id ?? item.start.getTime()) {\n              <button\n                type=\"button\"\n                class=\"event-list-item\"\n                (click)=\"\n                  onclickEvent($event, { date: item.start, day: 0, active: true }, item.event)\n                \">\n                <span\n                  class=\"event-dot\"\n                  [style.background]=\"\n                    item.event.backgroundColor || item.event.color || null\n                  \"></span>\n                <span class=\"event-copy\">\n                  <strong>{{ item.event.title || 'Untitled event' }}</strong>\n                  <small>\n                    {{ formatEventDate(item.start) }}\n                    @if (item.end.getTime() !== item.start.getTime()) {\n                      \u2013 {{ formatEventDate(item.end) }}\n                    }\n                  </small>\n                </span>\n              </button>\n            }\n          } @else {\n            <div class=\"empty-events\">No events for this month.</div>\n          }\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<ng-template #timedCalendar>\n  <div class=\"timed-calendar\">\n    <div\n      class=\"timed-header\"\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\n      <div class=\"corner\"></div>\n      @for (day of weekDays; track day.date.getTime()) {\n        <button\n          type=\"button\"\n          class=\"day-header\"\n          [class.today]=\"day.isToday\"\n          (click)=\"selectDay($event, { date: day.date, day: 0, active: true })\">\n          <span>{{ day.label }}</span>\n          <strong>{{ day.dayNumber }}</strong>\n        </button>\n      }\n    </div>\n\n    <div\n      class=\"all-day-row\"\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\n      <div class=\"all-day-label\">All day</div>\n      @for (day of weekDays; track day.date.getTime(); let i = $index) {\n        <div class=\"all-day-cell\">\n          @for (\n            event of allDayByColumn[i];\n            track event.id ?? event.title ?? event.start.getTime()\n          ) {\n            <button\n              type=\"button\"\n              class=\"timed-event all-day-event\"\n              [class.continues-before]=\"event.continuesBefore\"\n              [class.continues-after]=\"event.continuesAfter\"\n              [style.background]=\"event.backgroundColor || event.color || null\"\n              [style.borderColor]=\"event.borderColor || event.color || null\"\n              [style.color]=\"event.textColor || null\"\n              [title]=\"event.title || ''\"\n              (pointerdown)=\"startTimedEventInteraction($event, event)\"\n              (click)=\"onTimedEventClick($event, event, day.date)\">\n              <span>{{ event.title || 'Untitled event' }}</span>\n              @if (event.isStart) {\n                <span\n                  class=\"resize-handle resize-start\"\n                  (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-start')\"></span>\n              }\n              @if (event.isEnd) {\n                <span\n                  class=\"resize-handle resize-end\"\n                  (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\n              }\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    <div\n      class=\"time-grid\"\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\n      <div class=\"time-axis\">\n        @for (minutes of timeSlots; track minutes) {\n          <div class=\"time-label\" [style.top.px]=\"(minutes / 60) * hourHeight\">\n            @if (minutes % 60 === 0) {\n              {{ formatTime(minutes) }}\n            }\n          </div>\n        }\n      </div>\n\n      @for (day of weekDays; track day.date.getTime()) {\n        <div class=\"day-column\">\n          @for (minutes of timeSlots; track minutes) {\n            <div class=\"time-slot\" [class.hour]=\"minutes % 60 === 0\"></div>\n          }\n\n          @for (event of day.events; track event.id ?? event.title ?? event.start.getTime()) {\n            <button\n              type=\"button\"\n              class=\"timed-event\"\n              [class.continues-before]=\"event.continuesBefore\"\n              [class.continues-after]=\"event.continuesAfter\"\n              [style.top.px]=\"event.top\"\n              [style.height.px]=\"event.height\"\n              [style.insetInlineStart.%]=\"event.column * (100 / event.columnCount)\"\n              [style.width.%]=\"100 / event.columnCount - 1\"\n              [style.background]=\"event.backgroundColor || event.color || null\"\n              [style.borderColor]=\"event.borderColor || event.color || null\"\n              [style.color]=\"event.textColor || null\"\n              [title]=\"event.title || ''\"\n              (pointerdown)=\"startTimedEventInteraction($event, event)\"\n              (click)=\"onTimedEventClick($event, event, day.date)\">\n              <strong>{{ event.title || 'Untitled event' }}</strong>\n              @if (event.height >= 42) {\n                <small>\n                  {{ formatTime(event.start.getHours() * 60 + event.start.getMinutes()) }}\n                </small>\n              }\n              @if (event.isStart) {\n                <span\n                  class=\"resize-handle resize-start\"\n                  (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-start')\"></span>\n              }\n              @if (event.isEnd) {\n                <span\n                  class=\"resize-handle resize-end\"\n                  (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\n              }\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultPreviousBTNTemplate>\n  <svg width=\"15px\" height=\"30px\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultNextBTNTemplate>\n  <svg width=\"15px\" height=\"30px\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\n  </svg>\n</ng-template>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #171a24);--ngx-color-text: light-dark(#16181d, #f7f7f8);--ngx-border-color: light-dark(#e1e4ea, #303541);--ngx-muted: color-mix(in srgb, var(--ngx-color-text) 55%, transparent);--ngx-event-bg: light-dark(#eef0ff, #2f3150);--ngx-event-text: light-dark(#3547a4, #dce1ff);--ngx-today: #3f51b5}.wrapper{background:var(--ngx-color-bg);color:var(--ngx-color-text);border:1px solid var(--ngx-border-color);border-radius:10px;overflow:hidden}.wrapper .dtp-btn{background:none;border:none;color:inherit;border-radius:6px;padding:5px 12px;box-shadow:0 0 4px #0000001f;transition:background .16s ease,transform .16s ease;display:inline-flex;align-items:center;justify-content:center}.wrapper .dtp-btn:not([disabled]):hover{cursor:pointer;background:#7f7fa02e}.wrapper .dtp-btn.active{background:#7f7fa03d}.wrapper .dtp-btn svg{fill:currentColor}.wrapper .header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-bottom:1px solid var(--ngx-border-color)}.wrapper .header .current-date{text-align:center;flex:1;min-width:0;font-weight:700}.wrapper .nxt-prv-buttons,.wrapper .view-mode{display:flex;align-items:center;gap:4px}.calendar{padding:10px;min-width:0}.weeks{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));list-style:none;padding:0;margin:0 0 8px;border-inline-start:1px solid var(--ngx-border-color)}.weeks li{padding:7px 4px;text-align:center;color:var(--ngx-muted);font-size:11px;font-weight:700;border-inline-end:1px solid var(--ngx-border-color)}.month-grid{display:grid;grid-template-rows:repeat(6,minmax(92px,1fr));border-inline-start:1px solid var(--ngx-border-color);border-top:1px solid var(--ngx-border-color);position:relative}.month-row{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-height:92px;border-bottom:1px solid var(--ngx-border-color)}.month-day{position:relative;min-width:0;min-height:92px;overflow:hidden;padding:4px;border:0;border-inline-end:1px solid var(--ngx-border-color);background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer;transition:background .15s ease}.month-day:hover{background:#7f7fa00d}.month-day.de-active{opacity:.48}.month-day.selected{outline:2px solid rgba(63,81,181,.3);outline-offset:-2px}.month-day.today .day-number{background:#3f51b51a;color:var(--ngx-today);font-weight:800}.day-number{width:27px;height:27px;display:grid;place-items:center;margin-inline-start:auto;border-radius:50%;font-size:12px;font-weight:600}.month-event-layer{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(4,26px);pointer-events:none;padding-top:34px}.month-event{position:relative;z-index:3;min-width:0;height:22px;margin-inline:2px;padding:2px 7px;border:1px solid transparent;border-radius:5px;overflow:hidden;background:var(--ngx-event-bg);color:var(--ngx-event-text);font:inherit;font-size:11px;font-weight:600;line-height:17px;text-align:start;white-space:nowrap;text-overflow:ellipsis;pointer-events:auto;cursor:grab;touch-action:none;box-sizing:border-box}.month-event:active{cursor:grabbing}.month-event:hover{filter:brightness(.97);box-shadow:0 2px 7px #00000024}.month-event.is-dragging{opacity:.78;box-shadow:0 5px 14px #0003}.month-event.continues-before{border-start-start-radius:2px;border-end-start-radius:2px;margin-inline-start:0}.month-event.continues-after{border-start-end-radius:2px;border-end-end-radius:2px;margin-inline-end:0}.event-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.continuation-title{opacity:.85}.resize-handle{position:absolute;top:0;bottom:0;width:7px;z-index:5;cursor:ew-resize;touch-action:none}.resize-handle:after{content:\"\";position:absolute;top:5px;bottom:5px;inset-inline-start:3px;width:2px;border-radius:2px;background:currentColor;opacity:.45}.resize-start{inset-inline-start:0}.resize-end{inset-inline-end:0}.timed-calendar{min-width:0;border:1px solid var(--ngx-border-color);border-radius:8px;overflow:auto}.timed-header,.all-day-row,.time-grid{display:grid;min-width:620px}.timed-header{position:sticky;top:0;z-index:5;background:var(--ngx-color-bg);border-bottom:1px solid var(--ngx-border-color)}.corner{border-inline-end:1px solid var(--ngx-border-color)}.day-header{min-width:0;height:58px;padding:6px;border:0;border-inline-end:1px solid var(--ngx-border-color);background:transparent;color:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.day-header span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--ngx-muted)}.day-header strong{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-size:14px}.day-header.today strong{background:var(--ngx-today);color:#fff}.day-header:hover{background:#7f7fa012}.all-day-row{min-height:34px;border-bottom:1px solid var(--ngx-border-color);background:color-mix(in srgb,var(--ngx-color-bg) 94%,currentColor)}.all-day-row .all-day-label{padding:8px 5px;color:var(--ngx-muted);font-size:10px;border-inline-end:1px solid var(--ngx-border-color);text-align:center}.all-day-row .all-day-cell{min-width:0;padding:4px;border-inline-end:1px solid var(--ngx-border-color);display:flex;flex-direction:column;gap:3px}.time-grid{position:relative;align-items:stretch;min-height:1536px}.time-axis{position:relative;border-inline-end:1px solid var(--ngx-border-color);background:var(--ngx-color-bg)}.time-label{position:absolute;inset-inline:0 5px;transform:translateY(-50%);text-align:end;color:var(--ngx-muted);font-size:10px;pointer-events:none}.day-column{position:relative;min-width:0;height:1536px;border-inline-end:1px solid var(--ngx-border-color);background:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,var(--ngx-border-color) 32px,transparent 33px,transparent 63px,var(--ngx-border-color) 64px)}.time-slot{height:32px;pointer-events:none;border-bottom:1px dashed color-mix(in srgb,var(--ngx-border-color) 55%,transparent)}.time-slot.hour{border-bottom-style:solid;border-bottom-color:var(--ngx-border-color)}.timed-event{position:absolute;z-index:2;min-width:24px;padding:4px 7px;border:1px solid transparent;border-radius:5px;overflow:hidden;background:var(--ngx-event-bg);color:var(--ngx-event-text);font:inherit;font-size:11px;line-height:15px;text-align:start;cursor:grab;box-sizing:border-box;touch-action:none;transition:filter .12s ease,box-shadow .12s ease}.timed-event:hover{filter:brightness(.97);box-shadow:0 2px 7px #00000024;z-index:4}.timed-event strong,.timed-event small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timed-event small{opacity:.72;font-size:10px}.timed-event.continues-before{border-start-start-radius:2px;border-end-start-radius:2px}.timed-event.continues-after{border-start-end-radius:2px;border-end-end-radius:2px}.timed-event.all-day-event{cursor:grab;position:relative;inset:auto!important;width:100%!important;min-height:24px;height:24px;padding-block:2px}.event-list{display:flex;flex-direction:column;gap:6px}.event-list-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--ngx-border-color);border-radius:8px;background:transparent;color:inherit;text-align:start;cursor:pointer}.event-list-item:hover{background:#7f7fa014}.event-list-item .event-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--ngx-today)}.event-list-item .event-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.event-list-item .event-copy strong,.event-list-item .event-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-list-item .event-copy small{opacity:.58}.empty-events{padding:30px;text-align:center;opacity:.55}:host-context([dir=rtl]) .nxt-prv-buttons .previous svg{transform:rotate(180deg)}:host-context([dir=rtl]) .nxt-prv-buttons .next svg{transform:rotate(180deg)}@media(max-width:700px){.wrapper .header{flex-wrap:wrap}.wrapper .header .current-date{order:-1;flex-basis:100%}.view-mode{width:100%;justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-calendar', imports: [CommonModule], providers: [DateAdapterRegistry], host: {
-                        '[class.dark]': 'theme=="dark"',
-                    }, template: "<div class=\"wrapper\" #datepickerWrapper>\n  <div class=\"header\">\n    <div class=\"nxt-prv-buttons\">\n      <button id=\"prev\" class=\"previous dtp-btn\" (click)=\"previous()\" title=\"Previous\">\n        <ng-template\n          [ngTemplateOutlet]=\"\n            _config.previousButtonTemplate || defaultPreviousBTNTemplate\n          \"></ng-template>\n      </button>\n      @if (_config.todayButton) {\n        <button class=\"today dtp-btn\" (click)=\"gotoToday()\">\n          {{ _config.todayButtonText }}\n        </button>\n      }\n      <button id=\"next\" class=\"next dtp-btn\" (click)=\"next()\" title=\"Next\">\n        <ng-template\n          [ngTemplateOutlet]=\"_config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\n      </button>\n    </div>\n    <div class=\"current-date\">\n      <span>\n        {{ currYear }}\n      </span>\n      <span>\n        {{ displayMonth }}\n      </span>\n    </div>\n    <div class=\"view-mode\">\n      {{ view }}\n      <button\n        class=\"dayview dtp-btn\"\n        (click)=\"changeView('day')\"\n        [class.active]=\"view == 'day'\"\n        title=\"Month View\">\n        Month\n      </button>\n      <button\n        class=\"dayview dtp-btn\"\n        (click)=\"changeView('week')\"\n        [class.active]=\"view == 'week'\"\n        title=\"Week View\">\n        Week\n      </button>\n      <button\n        class=\"dayview dtp-btn\"\n        (click)=\"changeView('day')\"\n        [class.active]=\"view == 'day'\"\n        title=\"Day View\">\n        Day\n      </button>\n      <button\n        class=\"dayview dtp-btn\"\n        (click)=\"changeView('event')\"\n        [class.active]=\"view == 'event'\"\n        title=\"Day View\">\n        Event\n      </button>\n    </div>\n  </div>\n  <div class=\"calendar\" #calendarWrapper>\n    @if (view === 'day') {\n      <ul class=\"weeks\">\n        @for (w of weeks; track $index) {\n          <li>\n            {{ w }}\n          </li>\n        }\n      </ul>\n      <ul class=\"days\" [style.minHeight.px]=\"minHeight\">\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            <div>{{ item.day }}</div>\n            @if (item.events) {\n              <div class=\"ms-day-events\">\n                @for (event of item.events; track $index) {\n                  <a\n                    tabindex=\"0\"\n                    class=\"ms-day-event\"\n                    [title]=\"event.title\"\n                    (click)=\"onclickEvent(item, event)\">\n                    {{ event.title }}\n                  </a>\n                }\n              </div>\n            }\n          </li>\n        }\n      </ul>\n    } @else if (view == 'week' || view == 'month') {\n      <table>\n        <thead>\n          <tr>\n            <th></th>\n            @for (w of weeks; track $index) {\n              <th>{{ w }}</th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (item of viewWeeks; track $index; let i = $index) {\n            <tr>\n              <td [title]=\"item.displayTime\">{{ item.time % 1 == 0 ? item.time : '' }}</td>\n              @for (w of item.weeks; track $index) {\n                <td></td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    } @else if (view == 'event') {\n      not implemented\n    }\n  </div>\n</div>\n\n<ng-template #defaultPreviousBTNTemplate>\n  <svg width=\"15px\" height=\"30px\" 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=\"30px\" 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}:host-context(.dark){--ngx-color-bg: #222;--ngx-color-text: #fff;--ngx-border-color: #c0c0c0}.wrapper{background-color:var(--ngx-color-bg);color:var(--ngx-color-text);border-radius:5px}.wrapper .dtp-btn{background:none;border:none;color:inherit;border-radius:3px;padding:3px 15px;box-shadow:0 0 4px #0003;transition:all .3s;display:inline-flex;align-items:center}.wrapper .dtp-btn:not([disabled]):hover{cursor:pointer;background:#87879e}.wrapper .dtp-btn.active{background:#87879e}.wrapper .dtp-btn svg{fill:var(--ngx-color-text)}.wrapper .header{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 0}.wrapper .header .current-date{text-align:center;flex:auto}.wrapper .nxt-prv-buttons{display:flex;align-items:center}.wrapper .nxt-prv-buttons .dtp-btn{border-radius:0}.wrapper .nxt-prv-buttons .dtp-btn:first-child{border-radius:5px 0 0 5px}.wrapper .nxt-prv-buttons .dtp-btn:last-child{border-radius:0 5px 5px 0}.calendar{padding:10px}.calendar ul{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;border:1px var(--ngx-border-color) solid;border-bottom:none}.calendar .days{margin-bottom:20px}.calendar .days li{width:14.2857142857%;text-align:end;max-height:300px;overflow:auto}.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{position:relative;border-right:1px var(--ngx-border-color) solid;border-bottom:1px var(--ngx-border-color) solid;padding:4px}.calendar li.de-active{color:#cbcbcb}.calendar li.selected{border:1px #1216fa solid}.calendar li.today{background-color:#ff9d0130}.calendar .weeks li{cursor:default;width:14.2857142857%;text-align:center;font-weight:700}.calendar .weeks li:hover{background:none}.ms-day-events .ms-day-event{color:#3f51b5;background:var(--ngx-color-bg);border:1px rgba(63,81,181,.1215686275) solid;border-radius:4px;min-height:25px;padding:4px;margin:4px 0;text-decoration:none;display:block}::ng-deep html[dir=rtl] .wrapper .nxt-prv-buttons .dtp-btn:first-child,::ng-deep body[dir=rtl] .wrapper .nxt-prv-buttons .dtp-btn:first-child{border-radius:0 5px 5px 0!important}::ng-deep html[dir=rtl] .wrapper .nxt-prv-buttons .dtp-btn:last-child,::ng-deep body[dir=rtl] .wrapper .nxt-prv-buttons .dtp-btn:last-child{border-radius:5px 0 0 5px!important}::ng-deep html[dir=rtl] .wrapper .wrapper .dtp-btn.next,::ng-deep html[dir=rtl] .wrapper .wrapper .dtp-btn.previous,::ng-deep body[dir=rtl] .wrapper .wrapper .dtp-btn.next,::ng-deep body[dir=rtl] .wrapper .wrapper .dtp-btn.previous{transform:rotate(180deg)}table{width:100%;border-collapse:collapse}table td,table th{border:1px rgb(158,158,158) solid;padding:5px;height:1.5em}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { setTheme: [{
-                type: Input,
-                args: ['theme']
-            }], config: [{
+            args: [{ selector: 'ngx-calendar', imports: [CommonModule], providers: [DateAdapterRegistry], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wrapper\" [class.is-interacting]=\"!!interaction\">\n  <div class=\"header\">\n    <div class=\"nxt-prv-buttons\">\n      <button type=\"button\" class=\"previous dtp-btn\" (click)=\"previous()\" title=\"Previous\">\n        <ng-template\n          [ngTemplateOutlet]=\"\n            _config.previousButtonTemplate || defaultPreviousBTNTemplate\n          \"></ng-template>\n      </button>\n      @if (_config.todayButton) {\n        <button type=\"button\" class=\"today dtp-btn\" (click)=\"gotoToday()\">\n          {{ localize().today }}\n        </button>\n      }\n      <button type=\"button\" class=\"next dtp-btn\" (click)=\"next()\" title=\"Next\">\n        <ng-template\n          [ngTemplateOutlet]=\"_config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\n      </button>\n    </div>\n\n    <div class=\"current-date\" aria-live=\"polite\">{{ headerText }}</div>\n\n    <div class=\"view-mode\">\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('month')\"\n        [class.active]=\"view === 'month'\">\n        {{ localize().month }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('week')\"\n        [class.active]=\"view === 'week'\">\n        {{ localize().week }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('day')\"\n        [class.active]=\"view === 'day'\">\n        {{ localize().day }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('event')\"\n        [class.active]=\"view === 'event'\">\n        {{ localize().event }}\n      </button>\n    </div>\n  </div>\n\n  <div class=\"calendar\" #calendarWrapper>\n    @switch (view) {\n      @case ('month') {\n        <ul class=\"weeks\">\n          @for (w of weeks; track $index) {\n            <li>{{ w }}</li>\n          }\n        </ul>\n\n        <div class=\"month-grid\" [style.minHeight.px]=\"minHeight\">\n          @for (row of monthEventRows; track $index; let rowIndex = $index) {\n            <div class=\"month-row\">\n              @for (\n                item of viewDays.slice(rowIndex * 7, rowIndex * 7 + 7);\n                track item.date?.getTime() ?? $index\n              ) {\n                <button\n                  type=\"button\"\n                  class=\"month-day\"\n                  [class.de-active]=\"!item.active\"\n                  [class.today]=\"item.isToday\"\n                  [class.selected]=\"item.selected\"\n                  (click)=\"selectDay($event, item)\">\n                  <span class=\"day-number\">{{ item.day }}</span>\n                </button>\n              }\n\n              <div class=\"month-event-layer\" aria-live=\"polite\">\n                @for (event of row; track event.id ?? event.start.getTime() ?? $index) {\n                  <button\n                    type=\"button\"\n                    class=\"month-event\"\n                    [class.continues-before]=\"event.continuesBefore\"\n                    [class.continues-after]=\"event.continuesAfter\"\n                    [class.event-start]=\"event.isStart\"\n                    [class.event-end]=\"event.isEnd\"\n                    [class.is-dragging]=\"\n                      interaction?.source === event ||\n                      (interaction?.source?.id != null && interaction?.source?.id === event.id)\n                    \"\n                    [style.gridColumn]=\"event.startColumn + 1 + ' / ' + (event.endColumn + 2)\"\n                    [style.gridRow]=\"event.lane + 1\"\n                    [style.background]=\"event.backgroundColor || event.color || null\"\n                    [style.borderColor]=\"event.borderColor || event.color || null\"\n                    [style.color]=\"event.textColor || null\"\n                    [title]=\"event.title || ''\"\n                    (pointerdown)=\"startMonthEventInteraction($event, event)\"\n                    (click)=\"\n                      onclickEvent($event, { date: event.start, day: 0, active: true }, event)\n                    \">\n                    @if (event.isStart) {\n                      <span class=\"event-title\">{{ event.title || 'Untitled event' }}</span>\n                    } @else {\n                      <span class=\"event-title continuation-title\">{{ event.title || '' }}</span>\n                    }\n\n                    @if (event.isStart) {\n                      <span\n                        class=\"resize-handle resize-start\"\n                        title=\"Resize start\"\n                        (pointerdown)=\"\n                          startMonthEventInteraction($event, event, 'resize-start')\n                        \"></span>\n                    }\n                    @if (event.isEnd) {\n                      <span\n                        class=\"resize-handle resize-end\"\n                        title=\"Resize end\"\n                        (pointerdown)=\"\n                          startMonthEventInteraction($event, event, 'resize-end')\n                        \"></span>\n                    }\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @case ('week') {\n        <ng-container [ngTemplateOutlet]=\"timedCalendar\"></ng-container>\n      }\n\n      @case ('day') {\n        <ng-container [ngTemplateOutlet]=\"timedCalendar\"></ng-container>\n      }\n\n      @case ('event') {\n        <div class=\"event-list\">\n          @if (eventViewItems.length) {\n            @for (item of eventViewItems; track item.event.id ?? item.start.getTime()) {\n              <button\n                type=\"button\"\n                class=\"event-list-item\"\n                (click)=\"\n                  onclickEvent($event, { date: item.start, day: 0, active: true }, item.event)\n                \">\n                <span\n                  class=\"event-dot\"\n                  [style.background]=\"\n                    item.event.backgroundColor || item.event.color || null\n                  \"></span>\n                <span class=\"event-copy\">\n                  <strong>{{ item.event.title || 'Untitled event' }}</strong>\n                  <small>\n                    {{ formatEventDate(item.start) }}\n                    @if (item.end.getTime() !== item.start.getTime()) {\n                      \u2013 {{ formatEventDate(item.end) }}\n                    }\n                  </small>\n                </span>\n              </button>\n            }\n          } @else {\n            <div class=\"empty-events\">No events for this month.</div>\n          }\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<ng-template #timedCalendar>\n  <div class=\"timed-calendar\">\n    <div\n      class=\"timed-header\"\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\n      <div class=\"corner\"></div>\n      @for (day of weekDays; track day.date.getTime()) {\n        <button\n          type=\"button\"\n          class=\"day-header\"\n          [class.today]=\"day.isToday\"\n          (click)=\"selectDay($event, { date: day.date, day: 0, active: true })\">\n          <span>{{ day.label }}</span>\n          <strong>{{ day.dayNumber }}</strong>\n        </button>\n      }\n    </div>\n\n    <div\n      class=\"all-day-row\"\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\n      <div class=\"all-day-label\">All day</div>\n      @for (day of weekDays; track day.date.getTime(); let i = $index) {\n        <div class=\"all-day-cell\">\n          @for (\n            event of allDayByColumn[i];\n            track event.id ?? event.title ?? event.start.getTime()\n          ) {\n            <button\n              type=\"button\"\n              class=\"timed-event all-day-event\"\n              [class.continues-before]=\"event.continuesBefore\"\n              [class.continues-after]=\"event.continuesAfter\"\n              [style.background]=\"event.backgroundColor || event.color || null\"\n              [style.borderColor]=\"event.borderColor || event.color || null\"\n              [style.color]=\"event.textColor || null\"\n              [title]=\"event.title || ''\"\n              (pointerdown)=\"startTimedEventInteraction($event, event)\"\n              (click)=\"onTimedEventClick($event, event, day.date)\">\n              <span>{{ event.title || 'Untitled event' }}</span>\n              @if (event.isStart) {\n                <span\n                  class=\"resize-handle resize-start\"\n                  (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-start')\"></span>\n              }\n              @if (event.isEnd) {\n                <span\n                  class=\"resize-handle resize-end\"\n                  (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\n              }\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    <div\n      class=\"time-grid\"\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\n      <div class=\"time-axis\">\n        @for (minutes of timeSlots; track minutes) {\n          <div class=\"time-label\" [style.top.px]=\"(minutes / 60) * hourHeight\">\n            @if (minutes % 60 === 0) {\n              {{ formatTime(minutes) }}\n            }\n          </div>\n        }\n      </div>\n\n      @for (day of weekDays; track day.date.getTime()) {\n        <div class=\"day-column\">\n          @for (minutes of timeSlots; track minutes) {\n            <div class=\"time-slot\" [class.hour]=\"minutes % 60 === 0\"></div>\n          }\n\n          @for (event of day.events; track event.id ?? event.title ?? event.start.getTime()) {\n            <button\n              type=\"button\"\n              class=\"timed-event\"\n              [class.continues-before]=\"event.continuesBefore\"\n              [class.continues-after]=\"event.continuesAfter\"\n              [style.top.px]=\"event.top\"\n              [style.height.px]=\"event.height\"\n              [style.insetInlineStart.%]=\"event.column * (100 / event.columnCount)\"\n              [style.width.%]=\"100 / event.columnCount - 1\"\n              [style.background]=\"event.backgroundColor || event.color || null\"\n              [style.borderColor]=\"event.borderColor || event.color || null\"\n              [style.color]=\"event.textColor || null\"\n              [title]=\"event.title || ''\"\n              (pointerdown)=\"startTimedEventInteraction($event, event)\"\n              (click)=\"onTimedEventClick($event, event, day.date)\">\n              <strong>{{ event.title || 'Untitled event' }}</strong>\n              @if (event.height >= 42) {\n                <small>\n                  {{ formatTime(event.start.getHours() * 60 + event.start.getMinutes()) }}\n                </small>\n              }\n              @if (event.isStart) {\n                <span\n                  class=\"resize-handle resize-start\"\n                  (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-start')\"></span>\n              }\n              @if (event.isEnd) {\n                <span\n                  class=\"resize-handle resize-end\"\n                  (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\n              }\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultPreviousBTNTemplate>\n  <svg width=\"15px\" height=\"30px\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultNextBTNTemplate>\n  <svg width=\"15px\" height=\"30px\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\n  </svg>\n</ng-template>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #171a24);--ngx-color-text: light-dark(#16181d, #f7f7f8);--ngx-border-color: light-dark(#e1e4ea, #303541);--ngx-muted: color-mix(in srgb, var(--ngx-color-text) 55%, transparent);--ngx-event-bg: light-dark(#eef0ff, #2f3150);--ngx-event-text: light-dark(#3547a4, #dce1ff);--ngx-today: #3f51b5}.wrapper{background:var(--ngx-color-bg);color:var(--ngx-color-text);border:1px solid var(--ngx-border-color);border-radius:10px;overflow:hidden}.wrapper .dtp-btn{background:none;border:none;color:inherit;border-radius:6px;padding:5px 12px;box-shadow:0 0 4px #0000001f;transition:background .16s ease,transform .16s ease;display:inline-flex;align-items:center;justify-content:center}.wrapper .dtp-btn:not([disabled]):hover{cursor:pointer;background:#7f7fa02e}.wrapper .dtp-btn.active{background:#7f7fa03d}.wrapper .dtp-btn svg{fill:currentColor}.wrapper .header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-bottom:1px solid var(--ngx-border-color)}.wrapper .header .current-date{text-align:center;flex:1;min-width:0;font-weight:700}.wrapper .nxt-prv-buttons,.wrapper .view-mode{display:flex;align-items:center;gap:4px}.calendar{padding:10px;min-width:0}.weeks{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));list-style:none;padding:0;margin:0 0 8px;border-inline-start:1px solid var(--ngx-border-color)}.weeks li{padding:7px 4px;text-align:center;color:var(--ngx-muted);font-size:11px;font-weight:700;border-inline-end:1px solid var(--ngx-border-color)}.month-grid{display:grid;grid-template-rows:repeat(6,minmax(92px,1fr));border-inline-start:1px solid var(--ngx-border-color);border-top:1px solid var(--ngx-border-color);position:relative}.month-row{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-height:92px;border-bottom:1px solid var(--ngx-border-color)}.month-day{position:relative;min-width:0;min-height:92px;overflow:hidden;padding:4px;border:0;border-inline-end:1px solid var(--ngx-border-color);background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer;transition:background .15s ease}.month-day:hover{background:#7f7fa00d}.month-day.de-active{opacity:.48}.month-day.selected{outline:2px solid rgba(63,81,181,.3);outline-offset:-2px}.month-day.today .day-number{background:#3f51b51a;color:var(--ngx-today);font-weight:800}.day-number{width:27px;height:27px;display:grid;place-items:center;margin-inline-start:auto;border-radius:50%;font-size:12px;font-weight:600}.month-event-layer{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(4,26px);pointer-events:none;padding-top:34px}.month-event{position:relative;z-index:3;min-width:0;height:22px;margin-inline:2px;padding:2px 7px;border:1px solid transparent;border-radius:5px;overflow:hidden;background:var(--ngx-event-bg);color:var(--ngx-event-text);font:inherit;font-size:11px;font-weight:600;line-height:17px;text-align:start;white-space:nowrap;text-overflow:ellipsis;pointer-events:auto;cursor:grab;touch-action:none;box-sizing:border-box}.month-event:active{cursor:grabbing}.month-event:hover{filter:brightness(.97);box-shadow:0 2px 7px #00000024}.month-event.is-dragging{opacity:.78;box-shadow:0 5px 14px #0003}.month-event.continues-before{border-start-start-radius:2px;border-end-start-radius:2px;margin-inline-start:0}.month-event.continues-after{border-start-end-radius:2px;border-end-end-radius:2px;margin-inline-end:0}.event-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.continuation-title{opacity:.85}.resize-handle{position:absolute;top:0;bottom:0;width:7px;z-index:5;cursor:ew-resize;touch-action:none}.resize-handle:after{content:\"\";position:absolute;top:5px;bottom:5px;inset-inline-start:3px;width:2px;border-radius:2px;background:currentColor;opacity:.45}.resize-start{inset-inline-start:0}.resize-end{inset-inline-end:0}.timed-calendar{min-width:0;border:1px solid var(--ngx-border-color);border-radius:8px;overflow:auto}.timed-header,.all-day-row,.time-grid{display:grid;min-width:620px}.timed-header{position:sticky;top:0;z-index:5;background:var(--ngx-color-bg);border-bottom:1px solid var(--ngx-border-color)}.corner{border-inline-end:1px solid var(--ngx-border-color)}.day-header{min-width:0;height:58px;padding:6px;border:0;border-inline-end:1px solid var(--ngx-border-color);background:transparent;color:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.day-header span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--ngx-muted)}.day-header strong{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-size:14px}.day-header.today strong{background:var(--ngx-today);color:#fff}.day-header:hover{background:#7f7fa012}.all-day-row{min-height:34px;border-bottom:1px solid var(--ngx-border-color);background:color-mix(in srgb,var(--ngx-color-bg) 94%,currentColor)}.all-day-row .all-day-label{padding:8px 5px;color:var(--ngx-muted);font-size:10px;border-inline-end:1px solid var(--ngx-border-color);text-align:center}.all-day-row .all-day-cell{min-width:0;padding:4px;border-inline-end:1px solid var(--ngx-border-color);display:flex;flex-direction:column;gap:3px}.time-grid{position:relative;align-items:stretch;min-height:1536px}.time-axis{position:relative;border-inline-end:1px solid var(--ngx-border-color);background:var(--ngx-color-bg)}.time-label{position:absolute;inset-inline:0 5px;transform:translateY(-50%);text-align:end;color:var(--ngx-muted);font-size:10px;pointer-events:none}.day-column{position:relative;min-width:0;height:1536px;border-inline-end:1px solid var(--ngx-border-color);background:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,var(--ngx-border-color) 32px,transparent 33px,transparent 63px,var(--ngx-border-color) 64px)}.time-slot{height:32px;pointer-events:none;border-bottom:1px dashed color-mix(in srgb,var(--ngx-border-color) 55%,transparent)}.time-slot.hour{border-bottom-style:solid;border-bottom-color:var(--ngx-border-color)}.timed-event{position:absolute;z-index:2;min-width:24px;padding:4px 7px;border:1px solid transparent;border-radius:5px;overflow:hidden;background:var(--ngx-event-bg);color:var(--ngx-event-text);font:inherit;font-size:11px;line-height:15px;text-align:start;cursor:grab;box-sizing:border-box;touch-action:none;transition:filter .12s ease,box-shadow .12s ease}.timed-event:hover{filter:brightness(.97);box-shadow:0 2px 7px #00000024;z-index:4}.timed-event strong,.timed-event small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timed-event small{opacity:.72;font-size:10px}.timed-event.continues-before{border-start-start-radius:2px;border-end-start-radius:2px}.timed-event.continues-after{border-start-end-radius:2px;border-end-end-radius:2px}.timed-event.all-day-event{cursor:grab;position:relative;inset:auto!important;width:100%!important;min-height:24px;height:24px;padding-block:2px}.event-list{display:flex;flex-direction:column;gap:6px}.event-list-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--ngx-border-color);border-radius:8px;background:transparent;color:inherit;text-align:start;cursor:pointer}.event-list-item:hover{background:#7f7fa014}.event-list-item .event-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--ngx-today)}.event-list-item .event-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.event-list-item .event-copy strong,.event-list-item .event-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-list-item .event-copy small{opacity:.58}.empty-events{padding:30px;text-align:center;opacity:.55}:host-context([dir=rtl]) .nxt-prv-buttons .previous svg{transform:rotate(180deg)}:host-context([dir=rtl]) .nxt-prv-buttons .next svg{transform:rotate(180deg)}@media(max-width:700px){.wrapper .header{flex-wrap:wrap}.wrapper .header .current-date{order:-1;flex-basis:100%}.view-mode{width:100%;justify-content:center}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { localize: [{ type: i0.Input, args: [{ isSignal: true, alias: "localize", required: false }] }], config: [{
                 type: Input
             }], locale: [{
                 type: Input
@@ -2289,9 +2856,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 type: Output
             }], selectEvent: [{
                 type: Output
+            }], eventChange: [{
+                type: Output
+            }], eventsChange: [{
+                type: Output
             }], calendarWrapper: [{ type: i0.ViewChild, args: ['calendarWrapper', { isSignal: true }] }], onResize: [{
                 type: HostListener,
-                args: ['window:resize', ['$event']]
+                args: ['window:resize']
+            }], onDocumentPointerMove: [{
+                type: HostListener,
+                args: ['document:pointermove', ['$event']]
+            }], onDocumentPointerUp: [{
+                type: HostListener,
+                args: ['document:pointerup', ['$event']]
+            }], onDocumentPointerCancel: [{
+                type: HostListener,
+                args: ['document:pointercancel', ['$event']]
             }] } });
 
 function dedupeAdapters(adapters) {
@@ -2306,9 +2886,551 @@ function provideDateAdapters(...additional) {
     }));
 }
 
+function createDateRange(start = null, end = null) {
+    return { start, end };
+}
+
+class DateModel {
+    date;
+    active;
+    isToday;
+    selected;
+}
+class DateViewYear extends DateModel {
+    year;
+}
+class DateViewMonth extends DateModel {
+    month;
+    displayMonth;
+}
+class DateViewDay extends DateModel {
+    day;
+    events;
+    inRange;
+    rangeStart;
+    rangeEnd;
+    inRangePreview;
+}
+class DateViewWeek extends DateModel {
+    time;
+    weeks = [];
+    displayTime;
+}
+
+function normalizeDateRange(value) {
+    if (Array.isArray(value)) {
+        return normalizeDateRange({ start: value[0], end: value[1] });
+    }
+    const start = deserialize(value?.start);
+    const end = deserialize(value?.end);
+    if (start && end && compareDate(start, end) > 0) {
+        return { start: end, end: start };
+    }
+    return { start, end };
+}
+function isCompleteDateRange(range) {
+    return !!range.start && !!range.end && isValid(range.start) && isValid(range.end);
+}
+function isDateInRange(date, range) {
+    if (!range.start || !range.end)
+        return false;
+    return compareDate(date, range.start) >= 0 && compareDate(date, range.end) <= 0;
+}
+function isDateInPreviewRange(date, start, previewEnd) {
+    if (!start || !previewEnd)
+        return false;
+    const from = compareDate(start, previewEnd) <= 0 ? start : previewEnd;
+    const to = compareDate(start, previewEnd) <= 0 ? previewEnd : start;
+    return compareDate(date, from) >= 0 && compareDate(date, to) <= 0;
+}
+
+class NgxDateRangePickerComponent extends NgxDatePickerBase {
+    defaultLocalization = inject(NGX_CALENDAR_LOCALIZATION);
+    localize = input(this.defaultLocalization, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "localize" }] : /* istanbul ignore next */ []));
+    config = new NgxDatePickerConfig();
+    set locale(value) {
+        this._locale = value || 'en';
+        this.adapter = this.dateAdapterRegistry.resolve(this._locale);
+        this.init();
+    }
+    set min(value) {
+        const next = deserialize(value);
+        if (!sameDate(next, this.minDate)) {
+            this.minDate = next;
+            this._validatorOnChange();
+            this.renderِDatePicker(this.view);
+        }
+    }
+    set max(value) {
+        const next = deserialize(value);
+        if (!sameDate(next, this.maxDate)) {
+            this.maxDate = next;
+            this._validatorOnChange();
+            this.renderِDatePicker(this.view);
+        }
+    }
+    view = 'day';
+    rangeChange = new EventEmitter();
+    change = new EventEmitter();
+    range = { start: null, end: null };
+    hoverDate = null;
+    weekDays = [];
+    calendarHeader = '';
+    _onChange = (_value) => { };
+    _onTouched = () => { };
+    _validatorOnChange = () => { };
+    isDisabled = false;
+    ngOnInit() {
+        this.init();
+    }
+    updateConfig(value) {
+        this.config = { ...new NgxDatePickerConfig(), ...value };
+    }
+    writeValue(value) {
+        this.range = normalizeDateRange(value);
+        this.init();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    registerOnValidatorChange(fn) {
+        this._validatorOnChange = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled = disabled;
+    }
+    validate(_control) {
+        const { start, end } = this.range;
+        if (start && !isValid(start))
+            return { invalid: true };
+        if (end && !isValid(end))
+            return { invalid: true };
+        if (start && this.minDate && compareDate(start, this.minDate) < 0) {
+            return { min: this.minDate };
+        }
+        if (start && this.maxDate && compareDate(start, this.maxDate) > 0) {
+            return { max: this.maxDate };
+        }
+        if (end && this.minDate && compareDate(end, this.minDate) < 0) {
+            return { min: this.minDate };
+        }
+        if (end && this.maxDate && compareDate(end, this.maxDate) > 0) {
+            return { max: this.maxDate };
+        }
+        if (start && end && compareDate(start, end) > 0) {
+            return { range: true };
+        }
+        return null;
+    }
+    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';
+        });
+    }
+    init() {
+        this.months = this.adapter.longMonths;
+        const shortDays = this.adapter.shortDays;
+        const longDays = this.adapter.longDays;
+        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);
+    }
+    changeView(view) {
+        this.view = 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;
+        // Keep an existing completed range; today is only a navigation shortcut.
+        if (!this.range.start || this.range.end) {
+            this.range = { start: date, end: null };
+            this.emitValue();
+        }
+        this.changeView('day');
+    }
+    next() {
+        if (this.view === 'year') {
+            this.currYear += 20;
+        }
+        else if (this.view === 'month') {
+            this.currYear++;
+        }
+        else {
+            this.currMonth++;
+        }
+        if (this.currMonth < 0 || this.currMonth > 11) {
+            let date = new Date(this.currYear, this.currMonth);
+            this.currYear = date.getFullYear();
+            this.currMonth = date.getMonth();
+        }
+        this.renderِDatePicker(this.view);
+    }
+    previous() {
+        if (this.view === 'year') {
+            this.currYear -= 20;
+        }
+        else if (this.view === 'month') {
+            this.currYear--;
+        }
+        else {
+            this.currMonth--;
+        }
+        if (this.currMonth < 0 || this.currMonth > 11) {
+            let date = new Date(this.currYear, this.currMonth);
+            this.currYear = date.getFullYear();
+            this.currMonth = date.getMonth();
+        }
+        this.renderِDatePicker(this.view);
+    }
+    selectDay(event, item) {
+        event.stopPropagation();
+        if (!item.active || !item.date || this.isDisabled)
+            return;
+        const date = item.date;
+        if (!this.range.start || this.range.end) {
+            this.range = { start: date, end: null };
+        }
+        else {
+            this.range =
+                compareDate(date, this.range.start) < 0
+                    ? { start: date, end: this.range.start }
+                    : { start: this.range.start, end: date };
+            this.hoverDate = null;
+        }
+        this.applyRangeState();
+        this.emitValue();
+        if (isCompleteDateRange(this.range)) {
+            this._onTouched();
+        }
+    }
+    selectMonth(event, item) {
+        event.stopPropagation();
+        if (item.active) {
+            this.currMonth = item.month;
+            this.changeView('day');
+        }
+    }
+    selectYear(event, item) {
+        event.stopPropagation();
+        if (item.active) {
+            this.currYear = item.year;
+            this.changeView('month');
+        }
+    }
+    onDayEnter(item) {
+        if (this.range.start && !this.range.end && item.active) {
+            this.hoverDate = item.date ?? null;
+            this.applyRangeState();
+        }
+    }
+    onDayLeave() {
+        if (this.hoverDate) {
+            this.hoverDate = null;
+            this.applyRangeState();
+        }
+    }
+    clear() {
+        this.range = { start: null, end: null };
+        this.hoverDate = null;
+        this.applyRangeState();
+        this.emitValue();
+        this._onTouched();
+    }
+    applyRangeState() {
+        for (const item of this.viewDays) {
+            if (!item.date)
+                continue;
+            item.rangeStart = !!this.range.start && sameDate(item.date, this.range.start);
+            item.rangeEnd = !!this.range.end && sameDate(item.date, this.range.end);
+            item.inRange = isDateInRange(item.date, this.range);
+            item.inRangePreview =
+                !this.range.end && isDateInPreviewRange(item.date, this.range.start, this.hoverDate);
+            item.selected = !!item.rangeStart || !!item.rangeEnd;
+        }
+    }
+    emitValue() {
+        const value = { ...this.range };
+        this._onChange(value);
+        this.rangeChange.emit(value);
+        this.change.emit(value);
+    }
+    stopPagination(event) {
+        event.stopPropagation();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDateRangePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxDateRangePickerComponent, isStandalone: true, selector: "ngx-date-range-picker", inputs: { localize: { classPropertyName: "localize", publicName: "localize", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { rangeChange: "rangeChange", change: "change" }, providers: [
+            DateAdapterRegistry,
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NgxDateRangePickerComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDateRangePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-date-range-picker', standalone: true, imports: [CommonModule], providers: [
+                        DateAdapterRegistry,
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NgxDateRangePickerComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            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"] }]
+        }], 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: [{
+                type: Output
+            }], change: [{
+                type: Output
+            }] } });
+
+class NgxInputDateRangePicker {
+    el;
+    dateAdapterRegistry = inject(DateAdapterRegistry);
+    overlayService = inject(OverlayService);
+    viewContainerRef = inject(ViewContainerRef);
+    renderer = inject(Renderer2);
+    openOnClick = true;
+    displayFormat = 'yyyy/MM/dd';
+    rangeSeparator = ' – ';
+    _locale = 'en';
+    set locale(value) {
+        this._locale = value || 'en';
+        this.adapter = this.dateAdapterRegistry.resolve(this._locale);
+        this.formatValue();
+    }
+    get locale() {
+        return this._locale;
+    }
+    set setMin(value) {
+        this.min = deserialize(value);
+        this._validatorOnChange();
+    }
+    set setMax(value) {
+        this.max = deserialize(value);
+        this._validatorOnChange();
+    }
+    config = new NgxDatePickerConfig();
+    change = new EventEmitter();
+    min = null;
+    max = null;
+    value = { start: null, end: null };
+    pickerRef;
+    isDisabled = false;
+    adapter;
+    _onChange = (_value) => { };
+    _onTouched = () => { };
+    _validatorOnChange = () => { };
+    constructor(el) {
+        this.el = el;
+        this.adapter = this.dateAdapterRegistry.resolve(this.locale);
+    }
+    ngOnChanges() {
+        this.adapter = this.dateAdapterRegistry.resolve(this.locale);
+        this.formatValue();
+    }
+    onClick(event) {
+        if (!this.openOnClick || this.isDisabled)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.toggle();
+    }
+    onBlur() {
+        this._onTouched();
+    }
+    writeValue(value) {
+        this.value = normalizeDateRange(value);
+        this.formatValue();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    registerOnValidatorChange(fn) {
+        this._validatorOnChange = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled = disabled;
+        this.renderer.setProperty(this.el.nativeElement, 'disabled', disabled);
+    }
+    toggle() {
+        if (this.isDisabled)
+            return;
+        if (this.pickerRef) {
+            this.destroyDatePicker();
+            return;
+        }
+        this.adapter = this.dateAdapterRegistry.resolve(this.locale);
+        this.pickerRef = this.overlayService.open({
+            anchor: this.el.nativeElement,
+            component: NgxDateRangePickerComponent,
+            viewContainerRef: this.viewContainerRef,
+            alignment: 'center',
+            placement: 'bottom',
+            margin: 4,
+            configure: (instance) => {
+                instance.locale = this.locale;
+                instance.min = this.min;
+                instance.max = this.max;
+                instance.updateConfig(this.config);
+                instance.writeValue(this.value);
+                instance.rangeChange.subscribe((value) => {
+                    this.value = normalizeDateRange(value);
+                    this.formatValue();
+                    this._onChange(this.value);
+                    this.change.emit(this.value);
+                    if (this.value.start && this.value.end) {
+                        this._onTouched();
+                        this.destroyDatePicker();
+                    }
+                });
+            },
+            onClosed: () => {
+                this.pickerRef = undefined;
+            },
+        });
+    }
+    validate(_control) {
+        const { start, end } = this.value;
+        if (start && this.min && compareDate(start, this.min) < 0) {
+            return { min: this.min };
+        }
+        if (end && this.max && compareDate(end, this.max) > 0) {
+            return { max: this.max };
+        }
+        if (start && end && compareDate(start, end) > 0) {
+            return { range: true };
+        }
+        return null;
+    }
+    formatValue() {
+        const start = this.value.start;
+        const end = this.value.end;
+        const format = (value) => {
+            if (!value)
+                return '';
+            const locale = this.adapter.toLocale(value);
+            return this.adapter.formatDate(locale, this.displayFormat) ?? '';
+        };
+        const startText = format(start);
+        const endText = format(end);
+        const value = startText && endText
+            ? `${startText}${this.rangeSeparator}${endText}`
+            : startText;
+        this.renderer.setProperty(this.el.nativeElement, 'value', value);
+    }
+    destroyDatePicker() {
+        this.pickerRef?.close();
+        this.pickerRef = undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputDateRangePicker, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxInputDateRangePicker, isStandalone: true, selector: "input[ngxInputDateRangePicker]", inputs: { openOnClick: "openOnClick", displayFormat: "displayFormat", rangeSeparator: "rangeSeparator", locale: "locale", setMin: ["min", "setMin"], setMax: ["max", "setMax"], config: "config" }, outputs: { change: "change" }, host: { listeners: { "click": "onClick($event)", "blur": "onBlur()" }, properties: { "attr.readOnly": "true" }, classAttribute: "ngx-datepicker-input" }, providers: [
+            DateAdapterRegistry,
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NgxInputDateRangePicker),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => NgxInputDateRangePicker),
+                multi: true,
+            },
+        ], exportAs: ["ngxInputDateRangePicker"], usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputDateRangePicker, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[ngxInputDateRangePicker]',
+                    exportAs: 'ngxInputDateRangePicker',
+                    host: {
+                        class: 'ngx-datepicker-input',
+                        '[attr.readOnly]': 'true',
+                    },
+                    providers: [
+                        DateAdapterRegistry,
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NgxInputDateRangePicker),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => NgxInputDateRangePicker),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { openOnClick: [{
+                type: Input
+            }], displayFormat: [{
+                type: Input
+            }], rangeSeparator: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], setMin: [{
+                type: Input,
+                args: ['min']
+            }], setMax: [{
+                type: Input,
+                args: ['max']
+            }], config: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DATE_ADAPTERS, DEFAULT_DATE_ADAPTERS, NgxCalendarComponent, NgxDatePickerConfig, NgxInputDatePicker, NgxInputDatePickerComponent, getLocals, provideDateAdapters };
+export { DATE_ADAPTERS, DEFAULT_DATE_ADAPTERS, DateModel, DateViewDay, DateViewMonth, DateViewWeek, DateViewYear, NgxCalendarComponent, NgxDatePickerConfig, NgxDateRangePickerComponent, NgxInputDatePicker, NgxInputDatePickerComponent, NgxInputDateRangePicker, createDateRange, getLocals, isCompleteDateRange, isDateInPreviewRange, isDateInRange, normalizeDateRange, provideDateAdapters };
 //# sourceMappingURL=ngx-kit-date-picker.mjs.map