nexheal-lib 0.0.57 → 0.0.59

package/fesm2022/nexheal-lib.mjs

@@ -452,7 +452,7 @@ class CalendarControl {
     dateSelected = new EventEmitter();
     /** Emitted in `selectionMode="week"` with the selected week's start/end (or null when cleared). */
     weekSelected = new EventEmitter();
-    /** Emitted in `selectionMode="range"` with the selected start/end (or null when cleared). */
+    /** Emitted in `selectionMode="range"` with the selected range's start/end (or null when cleared). */
     rangeSelected = new EventEmitter();
     _defaultDate;
     get defaultDate() {
@@ -505,11 +505,12 @@ class CalendarControl {
     selectedWeekEnd = null;
     hoverWeekStart = null;
     hoverWeekEnd = null;
+    // ── range mode state ──
     rangeStart = null;
     rangeEnd = null;
-    hoverDate = null;
-    committedRangeStart = null;
-    committedRangeEnd = null;
+    rangeHoverEnd = null;
+    /** Tracks whether the user is picking the end date (true) or the start date (false). */
+    rangePicking = 'start';
     today = new Date();
     todayYear = this.today.getFullYear();
     todayMonth = this.today.getMonth();
@@ -550,10 +551,17 @@ class CalendarControl {
             this.selectedDate = null;
             this.selectedWeekStart = null;
             this.selectedWeekEnd = null;
-            this.applyDateRange(null, null, false);
+            this.rangeStart = null;
+            this.rangeEnd = null;
+            this.rangePicking = 'start';
             this.inputControl.setValue("", { emitEvent: false });
             return;
         }
+        // Range mode: delegate to separate handler
+        if (this.selectionMode === "range") {
+            this.writeValueRange(value);
+            return;
+        }
         // Week mode: value is a "start - end" range string
         if (this.selectionMode === "week") {
             const raw = String(value);
@@ -575,20 +583,6 @@ class CalendarControl {
             this.inputControl.setValue(this.formatWeek(start, end), { emitEvent: false });
             return;
         }
-        if (this.selectionMode === "range") {
-            const parsedRange = this.parseIncomingRange(value);
-            if (!parsedRange) {
-                this.applyDateRange(null, null, false);
-                this.selectedDate = null;
-                this.inputControl.setValue("", { emitEvent: false });
-                return;
-            }
-            this.applyDateRange(parsedRange.start, parsedRange.end, false);
-            this.selectedDate = parsedRange.start;
-            this.displayMonth = parsedRange.start.getMonth();
-            this.displayYear = parsedRange.start.getFullYear();
-            return;
-        }
         if (this.timeOnly) {
             let hours, mins;
             if (typeof value === "string") {
@@ -717,6 +711,11 @@ class CalendarControl {
     // events
     onBlur() {
         this.onTouchedFn();
+        // Range mode: delegate to separate handler
+        if (this.selectionMode === "range") {
+            this.onBlurRange();
+            return;
+        }
         // Week mode keeps a "start - end" range string; the single-date parsing
         // below would fail to parse it and wipe the selection, so handle it here.
         if (this.selectionMode === "week") {
@@ -761,10 +760,6 @@ class CalendarControl {
             this.blurEvent.emit();
             return;
         }
-        if (this.selectionMode === "range") {
-            this.onRangeBlur();
-            return;
-        }
         const raw = (this.inputControl.value || "");
         let currentFormatted = "";
         if (this.selectedDate) {
@@ -906,10 +901,7 @@ class CalendarControl {
                 this.toggleCalendar();
                 break;
             case "Escape":
-                if (this.selectionMode === "range")
-                    this.closeCalendar();
-                else
-                    this.isOpen = false;
+                this.isOpen = false;
                 break;
             case " ":
             case "Spacebar":
@@ -917,10 +909,7 @@ class CalendarControl {
                 this.toggleCalendar();
                 break;
             case "Tab":
-                if (this.selectionMode === "range")
-                    this.closeCalendar();
-                else
-                    this.isOpen = false;
+                this.isOpen = false;
                 break;
         }
     }
@@ -929,6 +918,11 @@ class CalendarControl {
         if (!cell || cell.disabled)
             return;
         const base = cell.date;
+        // Range mode: delegate to separate handler
+        if (this.selectionMode === "range") {
+            this.selectDayRange(cell);
+            return;
+        }
         // Week mode: select the whole week containing the clicked day
         if (this.selectionMode === "week") {
             const { start, end } = this.getWeekRange(base);
@@ -944,10 +938,6 @@ class CalendarControl {
             this.isOpen = false;
             return;
         }
-        if (this.selectionMode === "range") {
-            this.selectRangeDay(cell);
-            return;
-        }
         const picked = this.showTime
             ? new Date(base.getFullYear(), base.getMonth(), base.getDate(), this.selectedHour, this.selectedMinute)
             : new Date(base.getFullYear(), base.getMonth(), base.getDate());
@@ -971,20 +961,36 @@ class CalendarControl {
         start.setDate(1 - firstOfMonth.getDay());
         const end = new Date(lastOfMonth);
         end.setDate(lastOfMonth.getDate() + (6 - lastOfMonth.getDay()));
+        const isRange = this.selectionMode === "range";
         const cells = [];
         const cursor = new Date(start);
         while (cursor <= end) {
             const date = new Date(cursor.getFullYear(), cursor.getMonth(), cursor.getDate());
-            cells.push({
+            const cell = {
                 date,
                 day: date.getDate(),
                 otherMonth: date.getMonth() !== this.displayMonth,
                 disabled: this.isDateDisabled(date),
-                selected: this.isCellSelected(date),
+                selected: isRange
+                    ? this.isRangeEdge(date)
+                    : this.selectionMode === "week"
+                        ? this.isWithin(date, this.selectedWeekStart, this.selectedWeekEnd)
+                        : !!this.selectedDate &&
+                            this.selectedDate.getFullYear() === date.getFullYear() &&
+                            this.selectedDate.getMonth() === date.getMonth() &&
+                            this.selectedDate.getDate() === date.getDate(),
                 today: this.todayYear === date.getFullYear() &&
                     this.todayMonth === date.getMonth() &&
                     this.todayDate === date.getDate(),
-            });
+            };
+            // Populate range-specific flags
+            if (isRange) {
+                cell.isRangeStart = this.isSameDay(date, this.rangeStart);
+                cell.isRangeEnd = this.isSameDay(date, this.rangeEnd);
+                cell.isInRange = this.isInFinalRange(date);
+                cell.isInHoverRange = this.isInHoverRange(date);
+            }
+            cells.push(cell);
             cursor.setDate(cursor.getDate() + 1);
         }
         return cells;
@@ -1068,222 +1074,186 @@ class CalendarControl {
         return this.isWithin(date, this.hoverWeekStart, this.hoverWeekEnd);
     }
     onDayHover(cell) {
-        if (this.selectionMode === "week") {
-            const { start, end } = this.getWeekRange(cell.date);
-            this.hoverWeekStart = start;
-            this.hoverWeekEnd = end;
-            return;
-        }
         if (this.selectionMode === "range") {
-            if (!this.rangeStart || this.rangeEnd)
-                return;
-            this.hoverDate = cell.date;
+            this.onDayHoverRange(cell);
+            return;
         }
+        if (this.selectionMode !== "week")
+            return;
+        const { start, end } = this.getWeekRange(cell.date);
+        this.hoverWeekStart = start;
+        this.hoverWeekEnd = end;
     }
     onDayLeave() {
         this.hoverWeekStart = null;
         this.hoverWeekEnd = null;
-        this.hoverDate = null;
+        this.rangeHoverEnd = null;
     }
     /** Stable identity for day cells so they aren't re-created every change-detection. */
     trackByDate = (_, cell) => cell.date.getTime();
-    isCellSelected(date) {
-        if (this.selectionMode === "week") {
-            return this.isWithin(date, this.selectedWeekStart, this.selectedWeekEnd);
-        }
-        if (this.selectionMode === "range") {
-            return this.isRangeStart(date) || this.isRangeEnd(date);
+    // ══════════════════════════════════════════════════════════════════════
+    // ── Range Mode Methods (selectionMode === 'range') ──────────────────
+    // ══════════════════════════════════════════════════════════════════════
+    /** Handle day click in range mode. First click = start, second click = end. */
+    selectDayRange(cell) {
+        if (!cell || cell.disabled)
+            return;
+        const clicked = new Date(cell.date.getFullYear(), cell.date.getMonth(), cell.date.getDate());
+        if (this.rangePicking === 'start' || (this.rangeStart && this.rangeEnd)) {
+            // Starting a new range (or restarting after a complete range)
+            this.rangeStart = clicked;
+            this.rangeEnd = null;
+            this.rangePicking = 'end';
+            // Follow click into adjacent month
+            this.displayMonth = clicked.getMonth();
+            this.displayYear = clicked.getFullYear();
+            return; // keep the picker open for the end date
+        }
+        // Picking the end date
+        let start = this.rangeStart;
+        let end = clicked;
+        // Auto-swap if end < start
+        if (end < start) {
+            const tmp = start;
+            start = end;
+            end = tmp;
         }
-        return (!!this.selectedDate &&
-            this.selectedDate.getFullYear() === date.getFullYear() &&
-            this.selectedDate.getMonth() === date.getMonth() &&
-            this.selectedDate.getDate() === date.getDate());
-    }
-    isRangeStart(date) {
-        if (this.selectionMode !== "range" || !this.rangeStart)
-            return false;
-        return this.isSameDay(date, this.rangeStart);
-    }
-    isRangeEnd(date) {
-        if (this.selectionMode !== "range")
-            return false;
-        if (this.rangeEnd)
-            return this.isSameDay(date, this.rangeEnd);
-        return !!this.rangeStart && !!this.hoverDate && this.isSameDay(date, this.hoverDate);
+        this.rangeStart = start;
+        this.rangeEnd = end;
+        this.rangePicking = 'start';
+        this.rangeHoverEnd = null;
+        this.selectedDate = start; // keep selectedDate in sync for the clear button
+        const out = this.formatRange(start, end);
+        this.inputControl.setValue(out, { emitEvent: false });
+        this.onChangeFn(out);
+        this.onTouchedFn();
+        this.rangeSelected.emit({ start, end });
+        this.dateSelected.emit(start);
+        this.isOpen = false;
     }
-    isInSelectedRange(date) {
-        if (this.selectionMode !== "range" || !this.rangeStart || !this.rangeEnd)
-            return false;
-        return this.isWithinDayRange(date, this.rangeStart, this.rangeEnd);
+    /** Hover handler for range mode — shows preview band while picking end date. */
+    onDayHoverRange(cell) {
+        if (this.rangePicking === 'end' && this.rangeStart) {
+            this.rangeHoverEnd = cell.date;
+        }
     }
-    isInHoverRange(date) {
-        if (this.selectionMode !== "range" || !this.rangeStart || this.rangeEnd || !this.hoverDate)
-            return false;
-        const ordered = this.orderDateRange(this.rangeStart, this.hoverDate);
-        return this.isWithinDayRange(date, ordered.start, ordered.end);
+    /** Format a range as "start - end" using the configured dateFormat. */
+    formatRange(start, end) {
+        return `${this.datePipe.transform(start, this.dateFormat)} - ${this.datePipe.transform(end, this.dateFormat)}`;
     }
-    selectRangeDay(cell) {
-        const picked = this.startOfDay(cell.date);
-        if (!this.rangeStart || this.rangeEnd) {
-            this.rangeStart = picked;
+    /** writeValue delegate for range mode. */
+    writeValueRange(value) {
+        const raw = String(value);
+        const parts = raw.split(" - ");
+        if (parts.length === 2) {
+            const s = this.parseDate(parts[0].trim());
+            const e = this.parseDate(parts[1].trim());
+            if (s && e) {
+                this.rangeStart = s;
+                this.rangeEnd = e;
+                this.selectedDate = s;
+                this.rangePicking = 'start';
+                this.displayMonth = s.getMonth();
+                this.displayYear = s.getFullYear();
+                this.inputControl.setValue(this.formatRange(s, e), { emitEvent: false });
+                return;
+            }
+        }
+        // single date fallback — treat as rangeStart only
+        const parsed = this.parseDate(raw);
+        if (parsed) {
+            this.rangeStart = parsed;
             this.rangeEnd = null;
-            this.hoverDate = null;
-            this.selectedDate = picked;
-            this.displayMonth = picked.getMonth();
-            this.displayYear = picked.getFullYear();
-            this.inputControl.setValue(this.formatInProgressRange(picked), { emitEvent: false });
-            return;
+            this.selectedDate = parsed;
+            this.rangePicking = 'end';
+            this.displayMonth = parsed.getMonth();
+            this.displayYear = parsed.getFullYear();
+            this.inputControl.setValue(this.datePipe.transform(parsed, this.dateFormat), { emitEvent: false });
+        }
+        else {
+            this.rangeStart = null;
+            this.rangeEnd = null;
+            this.selectedDate = null;
+            this.rangePicking = 'start';
+            this.inputControl.setValue("", { emitEvent: false });
         }
-        const ordered = this.orderDateRange(this.rangeStart, picked);
-        this.applyDateRange(ordered.start, ordered.end, true);
-        this.selectedDate = ordered.start;
-        this.displayMonth = ordered.start.getMonth();
-        this.displayYear = ordered.start.getFullYear();
-        this.onTouchedFn();
-        this.rangeSelected.emit({ start: ordered.start, end: ordered.end });
-        this.dateSelected.emit(ordered.start);
-        this.closeCalendar();
     }
-    onRangeBlur() {
+    /** onBlur delegate for range mode. */
+    onBlurRange() {
         const raw = (this.inputControl.value || "").trim();
-        const current = this.formatCommittedRangeInput();
+        const current = this.rangeStart && this.rangeEnd
+            ? this.formatRange(this.rangeStart, this.rangeEnd)
+            : "";
+        // Unchanged — keep selection
         if (raw === current) {
             this.blurEvent.emit();
             return;
         }
+        // Cleared by user
         if (!raw) {
-            this.applyDateRange(null, null, true);
+            this.rangeStart = null;
+            this.rangeEnd = null;
             this.selectedDate = null;
+            this.rangePicking = 'start';
+            this.onChangeFn(null);
             this.rangeSelected.emit(null);
             this.dateSelected.emit(null);
             this.blurEvent.emit();
             return;
         }
-        const parsed = this.parseIncomingRange(raw);
-        if (parsed) {
-            this.applyDateRange(parsed.start, parsed.end, true);
-            this.selectedDate = parsed.start;
-            this.displayMonth = parsed.start.getMonth();
-            this.displayYear = parsed.start.getFullYear();
-            this.rangeSelected.emit({ start: parsed.start, end: parsed.end });
-            this.dateSelected.emit(parsed.start);
-            this.blurEvent.emit();
-            return;
-        }
-        const startOnly = this.parseDate(raw.replace(/\s*-\s*$/, "").trim());
-        if (startOnly && !this.rangeEnd) {
-            this.rangeStart = this.startOfDay(startOnly);
-            this.selectedDate = this.rangeStart;
-            this.inputControl.setValue(this.formatInProgressRange(this.rangeStart), { emitEvent: false });
-            this.blurEvent.emit();
-            return;
+        // Try to parse what the user typed
+        const parts = raw.split(" - ");
+        if (parts.length === 2) {
+            const s = this.parseDate(parts[0].trim());
+            const e = this.parseDate(parts[1].trim());
+            if (s && e) {
+                const start = s < e ? s : e;
+                const end = s < e ? e : s;
+                this.rangeStart = start;
+                this.rangeEnd = end;
+                this.selectedDate = start;
+                this.rangePicking = 'start';
+                this.displayMonth = start.getMonth();
+                this.displayYear = start.getFullYear();
+                const out = this.formatRange(start, end);
+                this.inputControl.setValue(out, { emitEvent: false });
+                this.onChangeFn(out);
+                this.rangeSelected.emit({ start, end });
+                this.dateSelected.emit(start);
+                this.blurEvent.emit();
+                return;
+            }
         }
+        // Invalid — revert
         this.inputControl.setValue(current, { emitEvent: false });
-        this.rangeStart = this.committedRangeStart;
-        this.rangeEnd = this.committedRangeEnd;
-        this.selectedDate = this.rangeStart;
         this.blurEvent.emit();
     }
-    applyDateRange(start, end, emit) {
-        this.rangeStart = start;
-        this.rangeEnd = end;
-        this.hoverDate = null;
-        this.committedRangeStart = start;
-        this.committedRangeEnd = end;
-        const out = start && end ? this.formatWeek(start, end) : "";
-        this.inputControl.setValue(out, { emitEvent: false });
-        if (emit) {
-            this.onChangeFn(out || null);
-        }
-    }
-    formatInProgressRange(start) {
-        return `${this.datePipe.transform(start, this.dateFormat)} - `;
-    }
-    formatCommittedRangeInput() {
-        if (this.committedRangeStart && this.committedRangeEnd) {
-            return this.formatWeek(this.committedRangeStart, this.committedRangeEnd);
-        }
-        if (this.rangeStart && !this.rangeEnd) {
-            return this.formatInProgressRange(this.rangeStart);
-        }
-        return "";
+    // ── Range helper predicates ──
+    /** True when `date` matches either rangeStart or rangeEnd (day-level). */
+    isRangeEdge(date) {
+        return this.isSameDay(date, this.rangeStart) || this.isSameDay(date, this.rangeEnd);
     }
-    parseIncomingRange(value) {
-        if (Array.isArray(value) && value.length >= 2) {
-            const start = this.parseDate(value[0]);
-            const end = this.parseDate(value[1]);
-            if (start && end)
-                return this.orderDateRange(start, end);
-            return null;
-        }
-        if (value && typeof value === "object" && !(value instanceof Date) && value.start && value.end) {
-            const start = this.parseDate(value.start);
-            const end = this.parseDate(value.end);
-            if (start && end)
-                return this.orderDateRange(start, end);
-            return null;
-        }
-        if (typeof value === "string") {
-            const parts = value.split(" - ").map((part) => part.trim()).filter(Boolean);
-            if (parts.length === 2) {
-                const start = this.parseDate(parts[0]);
-                const end = this.parseDate(parts[1]);
-                if (start && end)
-                    return this.orderDateRange(start, end);
-            }
-        }
-        return null;
-    }
-    orderDateRange(a, b) {
-        const start = this.startOfDay(a);
-        const end = this.startOfDay(b);
-        if (this.toDayKey(end) < this.toDayKey(start)) {
-            return { start: end, end: start };
-        }
-        return { start, end };
-    }
-    startOfDay(d) {
-        return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+    /** True when `date` falls strictly between the finalised rangeStart and rangeEnd. */
+    isInFinalRange(date) {
+        if (!this.rangeStart || !this.rangeEnd)
+            return false;
+        return date > this.rangeStart && date < this.rangeEnd;
     }
-    toDayKey(d) {
-        return d.getFullYear() * 10000 + d.getMonth() * 100 + d.getDate();
+    /** True during the "pick end" phase, for hover preview highlighting. */
+    isInHoverRange(date) {
+        if (this.rangePicking !== 'end' || !this.rangeStart || !this.rangeHoverEnd)
+            return false;
+        const lo = this.rangeStart < this.rangeHoverEnd ? this.rangeStart : this.rangeHoverEnd;
+        const hi = this.rangeStart < this.rangeHoverEnd ? this.rangeHoverEnd : this.rangeStart;
+        return date >= lo && date <= hi;
     }
+    /** Day-level equality check (ignores time). */
     isSameDay(a, b) {
-        return this.toDayKey(a) === this.toDayKey(b);
-    }
-    isWithinDayRange(date, start, end) {
-        const key = this.toDayKey(date);
-        return key >= this.toDayKey(start) && key <= this.toDayKey(end);
-    }
-    rangeCoversMonth(year, monthIndex) {
-        if (!this.rangeStart)
-            return false;
-        const start = this.rangeStart;
-        const end = this.rangeEnd || this.rangeStart;
-        const monthStart = new Date(year, monthIndex, 1);
-        const monthEnd = new Date(year, monthIndex + 1, 0);
-        return this.toDayKey(start) <= this.toDayKey(monthEnd) && this.toDayKey(end) >= this.toDayKey(monthStart);
-    }
-    rangeCoversYear(year) {
-        if (!this.rangeStart)
+        if (!b)
             return false;
-        const startYear = this.rangeStart.getFullYear();
-        const endYear = (this.rangeEnd || this.rangeStart).getFullYear();
-        return year >= startYear && year <= endYear;
-    }
-    restoreIncompleteRange() {
-        if (this.selectionMode !== "range")
-            return;
-        if (!this.rangeStart || this.rangeEnd)
-            return;
-        this.rangeStart = this.committedRangeStart;
-        this.rangeEnd = this.committedRangeEnd;
-        this.hoverDate = null;
-        this.selectedDate = this.rangeStart;
-        const out = this.committedRangeStart && this.committedRangeEnd
-            ? this.formatWeek(this.committedRangeStart, this.committedRangeEnd)
-            : "";
-        this.inputControl.setValue(out, { emitEvent: false });
+        return a.getFullYear() === b.getFullYear() &&
+            a.getMonth() === b.getMonth() &&
+            a.getDate() === b.getDate();
     }
     // month
     goToMonthView() {
@@ -1325,9 +1295,6 @@ class CalendarControl {
         return this.months[this.displayMonth];
     }
     isMonthSelected(monthIndex) {
-        if (this.selectionMode === "range") {
-            return this.rangeCoversMonth(this.displayYear, monthIndex);
-        }
         return (!!this.selectedDate &&
             this.selectedDate.getFullYear() === this.displayYear &&
             this.selectedDate.getMonth() === monthIndex);
@@ -1336,9 +1303,6 @@ class CalendarControl {
         return this.todayYear === this.displayYear && this.todayMonth === monthIndex;
     }
     isYearSelected(year) {
-        if (this.selectionMode === "range") {
-            return this.rangeCoversYear(year);
-        }
         return !!this.selectedDate && this.selectedDate.getFullYear() === year;
     }
     isYearCurrent(year) {
@@ -1640,9 +1604,6 @@ class CalendarControl {
             }
         }
         else {
-            if (this.selectionMode === "range") {
-                this.restoreIncompleteRange();
-            }
             this.destroyPopper();
         }
     }
@@ -1653,18 +1614,10 @@ class CalendarControl {
     }
     clickOutside(event) {
         if (!this.rootElement.nativeElement.contains(event.target) && this.isOpen) {
-            if (this.selectionMode === "range") {
-                this.closeCalendar();
-            }
-            else {
-                this.isOpen = false;
-            }
+            this.isOpen = false;
         }
     }
     closeCalendar() {
-        if (this.selectionMode === "range") {
-            this.restoreIncompleteRange();
-        }
         this.destroyPopper();
         this.isOpen = false;
         if (CalendarControl._currentlyOpen === this) {
@@ -1677,7 +1630,11 @@ class CalendarControl {
         this.selectedDate = null;
         this.selectedWeekStart = null;
         this.selectedWeekEnd = null;
-        this.applyDateRange(null, null, false);
+        // Clear range state
+        this.rangeStart = null;
+        this.rangeEnd = null;
+        this.rangeHoverEnd = null;
+        this.rangePicking = 'start';
         if (this._minDate) {
             const parsed = new Date(this._minDate);
             if (!isNaN(parsed.getTime())) {
@@ -1713,7 +1670,7 @@ class CalendarControl {
                 useExisting: forwardRef(() => CalendarControl),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "rootElement", first: true, predicate: ["root"], descendants: true, static: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, static: true }, { propertyName: "datePickerEl", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<div class=\"form-group calendar\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" [class.disabled]=\"disabled\" #root\r\n  (click)=\"openCalendar()\">\r\n  <label class=\"inp-label\" [ngClass]=\"{'required' : required}\" *ngIf=\"title\">{{ title }}</label>\r\n  <input type=\"text\" #inputEl [placeholder]=\"placeholder\" [formControl]=\"inputControl\" class=\"form-control\"\r\n    [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\" (focus)=\"onFocus()\" [readonly]=\"readonly\"\r\n    (click)=\"openCalendar(); $event.stopPropagation()\" (keydown)=\"onInputKeydown($event)\" />\r\n\r\n  <span class=\"focus-border\" *ngIf=\"deFocus\"></span>\r\n  @if(!inputLoader) {\r\n  <span class=\"calendar-icon\">\r\n    <i class=\"he\" [ngClass]=\"!timeOnly ? 'he-calendar-blank' : 'he-clock'\"></i>\r\n  </span>\r\n  }\r\n\r\n  @if(!inputLoader &&(selectedDate && !disabled && !readonly) && clearVal) {\r\n  <label class=\"clear\" (click)=\"clearDate($event)\">\r\n    <i class=\"he he-close\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if(inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n  @if(error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n\r\n  <div class=\"datepicker-group\" #datePicker *ngIf=\"isOpen\" (mousedown)=\"$event.preventDefault()\"\r\n    (click)=\"$event.stopPropagation()\">\r\n\r\n    <!-- time picker -->\r\n    <ng-container *ngIf=\"timeOnly\">\r\n      <div class=\"time-picker\">\r\n        <div class=\"time-select\">\r\n          <button (click)=\"incrementHour()\" [disabled]=\"!isIncrementHourValid()\"><i\r\n              class=\"he he-chevron-up\"></i></button>\r\n          <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n            <div class=\"time-value\">\r\n              {{ ((selectedHour % 12) || 12) | number:'2.0' }}\r\n            </div>\r\n          </ng-container>\r\n          <ng-template #show24>\r\n            <div class=\"time-value\">\r\n              {{ selectedHour | number:'2.0' }}\r\n            </div>\r\n          </ng-template>\r\n\r\n          <button (click)=\"decrementHour()\" [disabled]=\"!isDecrementHourValid()\"><i\r\n              class=\"he he-chevron-down\"></i></button>\r\n        </div>\r\n        <span class=\"time-separator\">:</span>\r\n        <div class=\"time-select\">\r\n          <button (click)=\"incrementMinute()\" [disabled]=\"!isIncrementMinuteValid()\"><i\r\n              class=\"he he-chevron-up\"></i></button>\r\n          <div class=\"time-value\">{{ selectedMinute | number:'2.0' }}</div>\r\n          <button (click)=\"decrementMinute()\" [disabled]=\"!isDecrementMinuteValid()\"><i\r\n              class=\"he he-chevron-down\"></i></button>\r\n        </div>\r\n        <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n          <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n          <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!-- day view -->\r\n    <ng-container *ngIf=\"!timeOnly && currentView === 'day'\">\r\n      <div class=\"header\">\r\n        <button class=\"calendar-arrow\" (click)=\"prevMonth()\"><i class=\"he he-chevron-left\"></i></button>\r\n        <div class=\"title\" (click)=\"goToMonthView()\">\r\n          <div>{{ displayMonthName }}</div>\r\n          <div>{{ displayYear }}</div>\r\n        </div>\r\n        <button class=\"calendar-arrow\" (click)=\"nextMonth()\"><i class=\"he he-chevron-right\"></i></button>\r\n      </div>\r\n      <div class=\"week-header\">\r\n        <div>Sun</div>\r\n        <div>Mon</div>\r\n        <div>Tue</div>\r\n        <div>Wed</div>\r\n        <div>Thu</div>\r\n        <div>Fri</div>\r\n        <div>Sat</div>\r\n      </div>\r\n      <div class=\"days-grid\" [class.week-mode]=\"selectionMode === 'week'\"\r\n        [class.range-mode]=\"selectionMode === 'range'\" (mouseleave)=\"onDayLeave()\">\r\n        <div class=\"day-cell\" *ngFor=\"let cell of daysInMonth; trackBy: trackByDate\" (click)=\"selectDay(cell)\"\r\n          (mouseenter)=\"onDayHover(cell)\" (mouseleave)=\"onDayLeave()\"\r\n          [class.other-month]=\"cell.otherMonth\"\r\n          [class.disabled]=\"cell.disabled\"\r\n          [class.selected]=\"cell.selected\"\r\n          [class.week-hover]=\"isInHoverWeek(cell.date)\"\r\n          [class.range-start]=\"isRangeStart(cell.date)\"\r\n          [class.range-end]=\"isRangeEnd(cell.date)\"\r\n          [class.in-range]=\"isInSelectedRange(cell.date)\"\r\n          [class.range-hover]=\"isInHoverRange(cell.date)\"\r\n          [class.today]=\"cell.today\">\r\n          {{ cell.day }}\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"showTime\">\r\n        <div class=\"time-picker\">\r\n          <div class=\"time-select\">\r\n            <button type=\"button\" (click)=\"incrementHour()\" [disabled]=\"!isIncrementHourValid()\">\r\n              <i class=\"he he-chevron-up\"></i>\r\n            </button>\r\n            <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n              <div class=\"time-value\">\r\n                {{\r\n                selectedHour % 12 === 0\r\n                ? 12\r\n                : selectedHour % 12\r\n                | number:'2.0' }}\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #show24>\r\n              <div class=\"time-value\">{{ selectedHour | number:'2.0' }}</div>\r\n            </ng-template>\r\n            <button type=\"button\" (click)=\"decrementHour()\" [disabled]=\"!isDecrementHourValid()\">\r\n              <i class=\"he he-chevron-down\"></i>\r\n            </button>\r\n          </div>\r\n          <span class=\"time-separator\">:</span>\r\n          <div class=\"time-select\">\r\n            <button type=\"button\" (click)=\"incrementMinute()\" [disabled]=\"!isIncrementMinuteValid()\">\r\n              <i class=\"he he-chevron-up\"></i>\r\n            </button>\r\n            <div class=\"time-value\">\r\n              {{ selectedMinute < 10 ? '0' +selectedMinute : selectedMinute }} </div>\r\n                <button type=\"button\" (click)=\"decrementMinute()\" [disabled]=\"!isDecrementMinuteValid()\">\r\n                  <i class=\"he he-chevron-down\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n              <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n              <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n            </div>\r\n          </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <!-- month view -->\r\n    <ng-container *ngIf=\"!timeOnly && currentView === 'month'\">\r\n      <div class=\"header\" *ngIf=\"viewMode !== 'month'\">\r\n        <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear - 1\"><i\r\n            class=\"he he-chevron-left\"></i></button>\r\n        <div class=\"title\" (click)=\"goToYearRangeView()\">{{ displayYear }}</div>\r\n        <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear + 1\"><i\r\n            class=\"he he-chevron-right\"></i></button>\r\n      </div>\r\n      <div class=\"month-grid\">\r\n        <div class=\"month-cell\" *ngFor=\"let m of months; index as i\" (click)=\"selectMonth(i)\"\r\n          [class.selected]=\"isMonthSelected(i)\" [class.today]=\"isMonthCurrent(i)\">{{ m }}\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!-- year range view -->\r\n    <ng-container *ngIf=\"!timeOnly && currentView === 'yearRange'\">\r\n      <div class=\"header\">\r\n        <button class=\"calendar-arrow\" (click)=\"prevYearRange()\"><i class=\"he he-chevron-left\"></i></button>\r\n        <div class=\"title\">{{ yearRange[0] }} ~ {{ yearRange[yearRangeSize-1] }}</div>\r\n        <button class=\"calendar-arrow\" (click)=\"nextYearRange()\"><i class=\"he he-chevron-right\"></i></button>\r\n      </div>\r\n      <div class=\"year-grid\">\r\n        <div class=\"year-cell\" *ngFor=\"let y of yearRange\" (click)=\"selectYear(y)\"\r\n          [class.selected]=\"isYearSelected(y)\" [class.today]=\"isYearCurrent(y)\">{{ y }}</div>\r\n      </div>\r\n    </ng-container>\r\n\r\n  </div>\r\n</div>", styles: [".form-group.calendar{position:relative}.form-group.calendar .datepicker-group{left:0;width:100%;z-index:1000;padding:.5rem;color:#495057;min-width:240px;max-width:260px;border-radius:3px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.calendar .datepicker-group .header{display:flex;font-weight:600;padding:5px;align-items:center;justify-content:space-between;border-bottom:1px solid #dee2e6}.form-group.calendar .datepicker-group .header .title{gap:8px;display:flex;font-size:15px;cursor:pointer;font-weight:600}.form-group.calendar .datepicker-group .header .calendar-arrow{width:28px;height:28px;border:none;line-height:1;cursor:pointer;background:none}.form-group.calendar .datepicker-group .header .calendar-arrow i{font-size:14px}.form-group.calendar .datepicker-group .header .calendar-arrow:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .week-header{display:grid;padding:8px 0;font-size:13px;font-weight:700;text-align:center;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid,.form-group.calendar .datepicker-group .month-grid,.form-group.calendar .datepicker-group .year-grid{gap:3px;padding:5px;display:grid;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{display:flex;font-size:14px;cursor:pointer;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .days-grid .day-cell.today,.form-group.calendar .datepicker-group .days-grid .month-cell.today,.form-group.calendar .datepicker-group .days-grid .year-cell.today,.form-group.calendar .datepicker-group .month-grid .day-cell.today,.form-group.calendar .datepicker-group .month-grid .month-cell.today,.form-group.calendar .datepicker-group .month-grid .year-cell.today,.form-group.calendar .datepicker-group .year-grid .day-cell.today,.form-group.calendar .datepicker-group .year-grid .month-cell.today,.form-group.calendar .datepicker-group .year-grid .year-cell.today{color:#37c0b3;font-weight:700;border:1px solid #37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.selected,.form-group.calendar .datepicker-group .days-grid .day-cell:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.selected,.form-group.calendar .datepicker-group .days-grid .month-cell:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.selected,.form-group.calendar .datepicker-group .days-grid .year-cell:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.selected,.form-group.calendar .datepicker-group .month-grid .day-cell:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.selected,.form-group.calendar .datepicker-group .month-grid .month-cell:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.selected,.form-group.calendar .datepicker-group .month-grid .year-cell:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.selected,.form-group.calendar .datepicker-group .year-grid .day-cell:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.selected,.form-group.calendar .datepicker-group .year-grid .month-cell:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.selected,.form-group.calendar .datepicker-group .year-grid .year-cell:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled{color:#e0e0e0;background:none;-webkit-user-select:none;user-select:none;cursor:not-allowed}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today{color:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled:hover{color:#e0e0e0;background:transparent}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .day-cell{padding:5px 2px;border-radius:50%}.form-group.calendar .datepicker-group .days-grid .day-cell.other-month:not(.selected):not(:hover),.form-group.calendar .datepicker-group .month-grid .day-cell.other-month:not(.selected):not(:hover),.form-group.calendar .datepicker-group .year-grid .day-cell.other-month:not(.selected):not(:hover){color:#c5c5c5}.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{padding:8px 2px;border-radius:3px}.form-group.calendar .datepicker-group .days-grid.week-mode .day-cell{border-radius:4px}.form-group.calendar .datepicker-group .days-grid.week-mode .day-cell.week-hover:not(.selected){color:#0d6f7d;background:#e6f5f3}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell{border-radius:4px}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.in-range:not(.range-start):not(.range-end),.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-hover:not(.range-start):not(.range-end){color:#0d6f7d;background:#e6f5f3;border-radius:0}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.other-month.in-range:not(.range-start):not(.range-end),.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.other-month.range-hover:not(.range-start):not(.range-end){color:#0d6f7d}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-start,.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-end,.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.selected{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-start:not(.range-end){border-radius:4px 0 0 4px}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-end:not(.range-start){border-radius:0 4px 4px 0}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell:hover:not(.disabled):not(.range-start):not(.range-end){color:#0d6f7d;background:#e6f5f3}.form-group.calendar .datepicker-group .month-grid{grid-template-columns:repeat(3,1fr)}.form-group.calendar .datepicker-group .year-grid{grid-template-columns:repeat(4,1fr)}.form-group.calendar .datepicker-group .time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle{gap:6px;display:flex;margin-left:1rem;flex-direction:column;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button{cursor:pointer;padding:3px 8px;font-size:.75rem;background:#fff;border:1px solid #cccccc}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button.active{color:#fff;border-color:#37c0b3;background-color:#37c0b3}.form-group.calendar .datepicker-group .time-picker .time-select{display:flex;margin:0 .75rem;align-items:center;flex-direction:column}.form-group.calendar .datepicker-group .time-picker .time-select button{border:none;cursor:pointer;padding:4px 8px;background:transparent}.form-group.calendar .datepicker-group .time-picker .time-select button i{font-size:1rem}.form-group.calendar .datepicker-group .time-picker .time-select button:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .time-picker .time-select .time-value{width:2rem;font-size:1rem;text-align:center;margin:2px 3px 4px}.form-group.calendar .datepicker-group .time-picker .time-separator{line-height:1;font-size:1rem}.form-group.calendar .clear{right:35px}.form-group.calendar.group-sm .clear{top:7px;right:35px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] });
+        ], viewQueries: [{ propertyName: "rootElement", first: true, predicate: ["root"], descendants: true, static: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, static: true }, { propertyName: "datePickerEl", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<div class=\"form-group calendar\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" [class.disabled]=\"disabled\" #root\r\n  (click)=\"openCalendar()\">\r\n  <label class=\"inp-label\" [ngClass]=\"{'required' : required}\" *ngIf=\"title\">{{ title }}</label>\r\n  <input type=\"text\" #inputEl [placeholder]=\"placeholder\" [formControl]=\"inputControl\" class=\"form-control\"\r\n    [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\" (focus)=\"onFocus()\" [readonly]=\"readonly\"\r\n    (click)=\"openCalendar(); $event.stopPropagation()\" (keydown)=\"onInputKeydown($event)\" />\r\n\r\n  <span class=\"focus-border\" *ngIf=\"deFocus\"></span>\r\n  @if(!inputLoader) {\r\n  <span class=\"calendar-icon\">\r\n    <i class=\"he\" [ngClass]=\"!timeOnly ? 'he-calendar-blank' : 'he-clock'\"></i>\r\n  </span>\r\n  }\r\n\r\n  @if(!inputLoader &&((selectedDate || rangeStart) && !disabled && !readonly) && clearVal) {\r\n  <label class=\"clear\" (click)=\"clearDate($event)\">\r\n    <i class=\"he he-close\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if(inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n  @if(error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n\r\n  <div class=\"datepicker-group\" #datePicker *ngIf=\"isOpen\" (mousedown)=\"$event.preventDefault()\"\r\n    (click)=\"$event.stopPropagation()\">\r\n\r\n    <!-- time picker -->\r\n    <ng-container *ngIf=\"timeOnly\">\r\n      <div class=\"time-picker\">\r\n        <div class=\"time-select\">\r\n          <button (click)=\"incrementHour()\" [disabled]=\"!isIncrementHourValid()\"><i\r\n              class=\"he he-chevron-up\"></i></button>\r\n          <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n            <div class=\"time-value\">\r\n              {{ ((selectedHour % 12) || 12) | number:'2.0' }}\r\n            </div>\r\n          </ng-container>\r\n          <ng-template #show24>\r\n            <div class=\"time-value\">\r\n              {{ selectedHour | number:'2.0' }}\r\n            </div>\r\n          </ng-template>\r\n\r\n          <button (click)=\"decrementHour()\" [disabled]=\"!isDecrementHourValid()\"><i\r\n              class=\"he he-chevron-down\"></i></button>\r\n        </div>\r\n        <span class=\"time-separator\">:</span>\r\n        <div class=\"time-select\">\r\n          <button (click)=\"incrementMinute()\" [disabled]=\"!isIncrementMinuteValid()\"><i\r\n              class=\"he he-chevron-up\"></i></button>\r\n          <div class=\"time-value\">{{ selectedMinute | number:'2.0' }}</div>\r\n          <button (click)=\"decrementMinute()\" [disabled]=\"!isDecrementMinuteValid()\"><i\r\n              class=\"he he-chevron-down\"></i></button>\r\n        </div>\r\n        <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n          <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n          <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!-- day view (single / week modes) -->\r\n    <ng-container *ngIf=\"!timeOnly && currentView === 'day' && selectionMode !== 'range'\">\r\n      <div class=\"header\">\r\n        <button class=\"calendar-arrow\" (click)=\"prevMonth()\"><i class=\"he he-chevron-left\"></i></button>\r\n        <div class=\"title\" (click)=\"goToMonthView()\">\r\n          <div>{{ displayMonthName }}</div>\r\n          <div>{{ displayYear }}</div>\r\n        </div>\r\n        <button class=\"calendar-arrow\" (click)=\"nextMonth()\"><i class=\"he he-chevron-right\"></i></button>\r\n      </div>\r\n      <div class=\"week-header\">\r\n        <div>Sun</div>\r\n        <div>Mon</div>\r\n        <div>Tue</div>\r\n        <div>Wed</div>\r\n        <div>Thu</div>\r\n        <div>Fri</div>\r\n        <div>Sat</div>\r\n      </div>\r\n      <div class=\"days-grid\" [class.week-mode]=\"selectionMode === 'week'\">\r\n        <div class=\"day-cell\" *ngFor=\"let cell of daysInMonth; trackBy: trackByDate\" (click)=\"selectDay(cell)\"\r\n          (mouseenter)=\"onDayHover(cell)\" (mouseleave)=\"onDayLeave()\"\r\n          [class.other-month]=\"cell.otherMonth\"\r\n          [class.disabled]=\"cell.disabled\"\r\n          [class.selected]=\"cell.selected\"\r\n          [class.week-hover]=\"isInHoverWeek(cell.date)\"\r\n          [class.today]=\"cell.today\">\r\n          {{ cell.day }}\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"showTime\">\r\n        <div class=\"time-picker\">\r\n          <div class=\"time-select\">\r\n            <button type=\"button\" (click)=\"incrementHour()\" [disabled]=\"!isIncrementHourValid()\">\r\n              <i class=\"he he-chevron-up\"></i>\r\n            </button>\r\n            <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n              <div class=\"time-value\">\r\n                {{\r\n                selectedHour % 12 === 0\r\n                ? 12\r\n                : selectedHour % 12\r\n                | number:'2.0' }}\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #show24>\r\n              <div class=\"time-value\">{{ selectedHour | number:'2.0' }}</div>\r\n            </ng-template>\r\n            <button type=\"button\" (click)=\"decrementHour()\" [disabled]=\"!isDecrementHourValid()\">\r\n              <i class=\"he he-chevron-down\"></i>\r\n            </button>\r\n          </div>\r\n          <span class=\"time-separator\">:</span>\r\n          <div class=\"time-select\">\r\n            <button type=\"button\" (click)=\"incrementMinute()\" [disabled]=\"!isIncrementMinuteValid()\">\r\n              <i class=\"he he-chevron-up\"></i>\r\n            </button>\r\n            <div class=\"time-value\">\r\n              {{ selectedMinute < 10 ? '0' +selectedMinute : selectedMinute }} </div>\r\n                <button type=\"button\" (click)=\"decrementMinute()\" [disabled]=\"!isDecrementMinuteValid()\">\r\n                  <i class=\"he he-chevron-down\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n              <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n              <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n            </div>\r\n          </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <!-- day view (range mode) -->\r\n    <ng-container *ngIf=\"!timeOnly && currentView === 'day' && selectionMode === 'range'\">\r\n      <div class=\"header\">\r\n        <button class=\"calendar-arrow\" (click)=\"prevMonth()\"><i class=\"he he-chevron-left\"></i></button>\r\n        <div class=\"title\" (click)=\"goToMonthView()\">\r\n          <div>{{ displayMonthName }}</div>\r\n          <div>{{ displayYear }}</div>\r\n        </div>\r\n        <button class=\"calendar-arrow\" (click)=\"nextMonth()\"><i class=\"he he-chevron-right\"></i></button>\r\n      </div>\r\n      <div class=\"week-header\">\r\n        <div>Sun</div>\r\n        <div>Mon</div>\r\n        <div>Tue</div>\r\n        <div>Wed</div>\r\n        <div>Thu</div>\r\n        <div>Fri</div>\r\n        <div>Sat</div>\r\n      </div>\r\n      <div class=\"days-grid range-mode\">\r\n        <div class=\"day-cell\" *ngFor=\"let cell of daysInMonth; trackBy: trackByDate\" (click)=\"selectDay(cell)\"\r\n          (mouseenter)=\"onDayHover(cell)\" (mouseleave)=\"onDayLeave()\"\r\n          [class.other-month]=\"cell.otherMonth\"\r\n          [class.disabled]=\"cell.disabled\"\r\n          [class.selected]=\"cell.selected\"\r\n          [class.range-start]=\"cell.isRangeStart\"\r\n          [class.range-end]=\"cell.isRangeEnd\"\r\n          [class.in-range]=\"cell.isInRange\"\r\n          [class.range-hover]=\"cell.isInHoverRange\"\r\n          [class.today]=\"cell.today\">\r\n          {{ cell.day }}\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!-- month view -->\r\n    <ng-container *ngIf=\"!timeOnly && currentView === 'month'\">\r\n      <div class=\"header\" *ngIf=\"viewMode !== 'month'\">\r\n        <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear - 1\"><i\r\n            class=\"he he-chevron-left\"></i></button>\r\n        <div class=\"title\" (click)=\"goToYearRangeView()\">{{ displayYear }}</div>\r\n        <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear + 1\"><i\r\n            class=\"he he-chevron-right\"></i></button>\r\n      </div>\r\n      <div class=\"month-grid\">\r\n        <div class=\"month-cell\" *ngFor=\"let m of months; index as i\" (click)=\"selectMonth(i)\"\r\n          [class.selected]=\"isMonthSelected(i)\" [class.today]=\"isMonthCurrent(i)\">{{ m }}\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!-- year range view -->\r\n    <ng-container *ngIf=\"!timeOnly && currentView === 'yearRange'\">\r\n      <div class=\"header\">\r\n        <button class=\"calendar-arrow\" (click)=\"prevYearRange()\"><i class=\"he he-chevron-left\"></i></button>\r\n        <div class=\"title\">{{ yearRange[0] }} ~ {{ yearRange[yearRangeSize-1] }}</div>\r\n        <button class=\"calendar-arrow\" (click)=\"nextYearRange()\"><i class=\"he he-chevron-right\"></i></button>\r\n      </div>\r\n      <div class=\"year-grid\">\r\n        <div class=\"year-cell\" *ngFor=\"let y of yearRange\" (click)=\"selectYear(y)\"\r\n          [class.selected]=\"isYearSelected(y)\" [class.today]=\"isYearCurrent(y)\">{{ y }}</div>\r\n      </div>\r\n    </ng-container>\r\n\r\n  </div>\r\n</div>", styles: [".form-group.calendar{position:relative}.form-group.calendar .datepicker-group{left:0;width:100%;z-index:1000;padding:.5rem;color:#495057;min-width:240px;max-width:260px;border-radius:3px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.calendar .datepicker-group .header{display:flex;font-weight:600;padding:5px;align-items:center;justify-content:space-between;border-bottom:1px solid #dee2e6}.form-group.calendar .datepicker-group .header .title{gap:8px;display:flex;font-size:15px;cursor:pointer;font-weight:600}.form-group.calendar .datepicker-group .header .calendar-arrow{width:28px;height:28px;border:none;line-height:1;cursor:pointer;background:none}.form-group.calendar .datepicker-group .header .calendar-arrow i{font-size:14px}.form-group.calendar .datepicker-group .header .calendar-arrow:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .week-header{display:grid;padding:8px 0;font-size:13px;font-weight:700;text-align:center;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid,.form-group.calendar .datepicker-group .month-grid,.form-group.calendar .datepicker-group .year-grid{gap:3px;padding:5px;display:grid;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{display:flex;font-size:14px;cursor:pointer;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .days-grid .day-cell.today,.form-group.calendar .datepicker-group .days-grid .month-cell.today,.form-group.calendar .datepicker-group .days-grid .year-cell.today,.form-group.calendar .datepicker-group .month-grid .day-cell.today,.form-group.calendar .datepicker-group .month-grid .month-cell.today,.form-group.calendar .datepicker-group .month-grid .year-cell.today,.form-group.calendar .datepicker-group .year-grid .day-cell.today,.form-group.calendar .datepicker-group .year-grid .month-cell.today,.form-group.calendar .datepicker-group .year-grid .year-cell.today{color:#37c0b3;font-weight:700;border:1px solid #37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.selected,.form-group.calendar .datepicker-group .days-grid .day-cell:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.selected,.form-group.calendar .datepicker-group .days-grid .month-cell:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.selected,.form-group.calendar .datepicker-group .days-grid .year-cell:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.selected,.form-group.calendar .datepicker-group .month-grid .day-cell:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.selected,.form-group.calendar .datepicker-group .month-grid .month-cell:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.selected,.form-group.calendar .datepicker-group .month-grid .year-cell:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.selected,.form-group.calendar .datepicker-group .year-grid .day-cell:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.selected,.form-group.calendar .datepicker-group .year-grid .month-cell:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.selected,.form-group.calendar .datepicker-group .year-grid .year-cell:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled{color:#e0e0e0;background:none;-webkit-user-select:none;user-select:none;cursor:not-allowed}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today{color:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled:hover{color:#e0e0e0;background:transparent}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .day-cell{padding:5px 2px;border-radius:50%}.form-group.calendar .datepicker-group .days-grid .day-cell.other-month:not(.selected):not(:hover),.form-group.calendar .datepicker-group .month-grid .day-cell.other-month:not(.selected):not(:hover),.form-group.calendar .datepicker-group .year-grid .day-cell.other-month:not(.selected):not(:hover){color:#c5c5c5}.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{padding:8px 2px;border-radius:3px}.form-group.calendar .datepicker-group .days-grid.week-mode .day-cell{border-radius:4px}.form-group.calendar .datepicker-group .days-grid.week-mode .day-cell.week-hover:not(.selected){color:#0d6f7d;background:#e6f5f3}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell{border-radius:0}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-start{border-radius:50% 0 0 50%;color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-end{border-radius:0 50% 50% 0;color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-start.range-end{border-radius:50%}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.in-range:not(.range-start):not(.range-end){background:#e6f5f3;color:#0d6f7d}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-hover:not(.in-range):not(.range-start):not(.range-end):not(.selected){background:#f0faf9;color:#0d6f7d}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.selected:not(.range-start):not(.range-end):not(.in-range){color:#fff;background:#37c0b3;border-radius:50%}.form-group.calendar .datepicker-group .month-grid{grid-template-columns:repeat(3,1fr)}.form-group.calendar .datepicker-group .year-grid{grid-template-columns:repeat(4,1fr)}.form-group.calendar .datepicker-group .time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle{gap:6px;display:flex;margin-left:1rem;flex-direction:column;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button{cursor:pointer;padding:3px 8px;font-size:.75rem;background:#fff;border:1px solid #cccccc}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button.active{color:#fff;border-color:#37c0b3;background-color:#37c0b3}.form-group.calendar .datepicker-group .time-picker .time-select{display:flex;margin:0 .75rem;align-items:center;flex-direction:column}.form-group.calendar .datepicker-group .time-picker .time-select button{border:none;cursor:pointer;padding:4px 8px;background:transparent}.form-group.calendar .datepicker-group .time-picker .time-select button i{font-size:1rem}.form-group.calendar .datepicker-group .time-picker .time-select button:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .time-picker .time-select .time-value{width:2rem;font-size:1rem;text-align:center;margin:2px 3px 4px}.form-group.calendar .datepicker-group .time-picker .time-separator{line-height:1;font-size:1rem}.form-group.calendar .clear{right:35px}.form-group.calendar.group-sm .clear{top:7px;right:35px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CalendarControl, decorators: [{
             type: Component,
@@ -1728,7 +1685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                             useExisting: forwardRef(() => CalendarControl),
                             multi: true,
                         },
-                    ], template: "<div class=\"form-group calendar\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" [class.disabled]=\"disabled\" #root\r\n  (click)=\"openCalendar()\">\r\n  <label class=\"inp-label\" [ngClass]=\"{'required' : required}\" *ngIf=\"title\">{{ title }}</label>\r\n  <input type=\"text\" #inputEl [placeholder]=\"placeholder\" [formControl]=\"inputControl\" class=\"form-control\"\r\n    [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\" (focus)=\"onFocus()\" [readonly]=\"readonly\"\r\n    (click)=\"openCalendar(); $event.stopPropagation()\" (keydown)=\"onInputKeydown($event)\" />\r\n\r\n  <span class=\"focus-border\" *ngIf=\"deFocus\"></span>\r\n  @if(!inputLoader) {\r\n  <span class=\"calendar-icon\">\r\n    <i class=\"he\" [ngClass]=\"!timeOnly ? 'he-calendar-blank' : 'he-clock'\"></i>\r\n  </span>\r\n  }\r\n\r\n  @if(!inputLoader &&(selectedDate && !disabled && !readonly) && clearVal) {\r\n  <label class=\"clear\" (click)=\"clearDate($event)\">\r\n    <i class=\"he he-close\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if(inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n  @if(error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n\r\n  <div class=\"datepicker-group\" #datePicker *ngIf=\"isOpen\" (mousedown)=\"$event.preventDefault()\"\r\n    (click)=\"$event.stopPropagation()\">\r\n\r\n    <!-- time picker -->\r\n    <ng-container *ngIf=\"timeOnly\">\r\n      <div class=\"time-picker\">\r\n        <div class=\"time-select\">\r\n          <button (click)=\"incrementHour()\" [disabled]=\"!isIncrementHourValid()\"><i\r\n              class=\"he he-chevron-up\"></i></button>\r\n          <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n            <div class=\"time-value\">\r\n              {{ ((selectedHour % 12) || 12) | number:'2.0' }}\r\n            </div>\r\n          </ng-container>\r\n          <ng-template #show24>\r\n            <div class=\"time-value\">\r\n              {{ selectedHour | number:'2.0' }}\r\n            </div>\r\n          </ng-template>\r\n\r\n          <button (click)=\"decrementHour()\" [disabled]=\"!isDecrementHourValid()\"><i\r\n              class=\"he he-chevron-down\"></i></button>\r\n        </div>\r\n        <span class=\"time-separator\">:</span>\r\n        <div class=\"time-select\">\r\n          <button (click)=\"incrementMinute()\" [disabled]=\"!isIncrementMinuteValid()\"><i\r\n              class=\"he he-chevron-up\"></i></button>\r\n          <div class=\"time-value\">{{ selectedMinute | number:'2.0' }}</div>\r\n          <button (click)=\"decrementMinute()\" [disabled]=\"!isDecrementMinuteValid()\"><i\r\n              class=\"he he-chevron-down\"></i></button>\r\n        </div>\r\n        <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n          <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n          <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!-- day view -->\r\n    <ng-container *ngIf=\"!timeOnly && currentView === 'day'\">\r\n      <div class=\"header\">\r\n        <button class=\"calendar-arrow\" (click)=\"prevMonth()\"><i class=\"he he-chevron-left\"></i></button>\r\n        <div class=\"title\" (click)=\"goToMonthView()\">\r\n          <div>{{ displayMonthName }}</div>\r\n          <div>{{ displayYear }}</div>\r\n        </div>\r\n        <button class=\"calendar-arrow\" (click)=\"nextMonth()\"><i class=\"he he-chevron-right\"></i></button>\r\n      </div>\r\n      <div class=\"week-header\">\r\n        <div>Sun</div>\r\n        <div>Mon</div>\r\n        <div>Tue</div>\r\n        <div>Wed</div>\r\n        <div>Thu</div>\r\n        <div>Fri</div>\r\n        <div>Sat</div>\r\n      </div>\r\n      <div class=\"days-grid\" [class.week-mode]=\"selectionMode === 'week'\"\r\n        [class.range-mode]=\"selectionMode === 'range'\" (mouseleave)=\"onDayLeave()\">\r\n        <div class=\"day-cell\" *ngFor=\"let cell of daysInMonth; trackBy: trackByDate\" (click)=\"selectDay(cell)\"\r\n          (mouseenter)=\"onDayHover(cell)\" (mouseleave)=\"onDayLeave()\"\r\n          [class.other-month]=\"cell.otherMonth\"\r\n          [class.disabled]=\"cell.disabled\"\r\n          [class.selected]=\"cell.selected\"\r\n          [class.week-hover]=\"isInHoverWeek(cell.date)\"\r\n          [class.range-start]=\"isRangeStart(cell.date)\"\r\n          [class.range-end]=\"isRangeEnd(cell.date)\"\r\n          [class.in-range]=\"isInSelectedRange(cell.date)\"\r\n          [class.range-hover]=\"isInHoverRange(cell.date)\"\r\n          [class.today]=\"cell.today\">\r\n          {{ cell.day }}\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"showTime\">\r\n        <div class=\"time-picker\">\r\n          <div class=\"time-select\">\r\n            <button type=\"button\" (click)=\"incrementHour()\" [disabled]=\"!isIncrementHourValid()\">\r\n              <i class=\"he he-chevron-up\"></i>\r\n            </button>\r\n            <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n              <div class=\"time-value\">\r\n                {{\r\n                selectedHour % 12 === 0\r\n                ? 12\r\n                : selectedHour % 12\r\n                | number:'2.0' }}\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #show24>\r\n              <div class=\"time-value\">{{ selectedHour | number:'2.0' }}</div>\r\n            </ng-template>\r\n            <button type=\"button\" (click)=\"decrementHour()\" [disabled]=\"!isDecrementHourValid()\">\r\n              <i class=\"he he-chevron-down\"></i>\r\n            </button>\r\n          </div>\r\n          <span class=\"time-separator\">:</span>\r\n          <div class=\"time-select\">\r\n            <button type=\"button\" (click)=\"incrementMinute()\" [disabled]=\"!isIncrementMinuteValid()\">\r\n              <i class=\"he he-chevron-up\"></i>\r\n            </button>\r\n            <div class=\"time-value\">\r\n              {{ selectedMinute < 10 ? '0' +selectedMinute : selectedMinute }} </div>\r\n                <button type=\"button\" (click)=\"decrementMinute()\" [disabled]=\"!isDecrementMinuteValid()\">\r\n                  <i class=\"he he-chevron-down\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n              <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n              <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n            </div>\r\n          </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <!-- month view -->\r\n    <ng-container *ngIf=\"!timeOnly && currentView === 'month'\">\r\n      <div class=\"header\" *ngIf=\"viewMode !== 'month'\">\r\n        <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear - 1\"><i\r\n            class=\"he he-chevron-left\"></i></button>\r\n        <div class=\"title\" (click)=\"goToYearRangeView()\">{{ displayYear }}</div>\r\n        <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear + 1\"><i\r\n            class=\"he he-chevron-right\"></i></button>\r\n      </div>\r\n      <div class=\"month-grid\">\r\n        <div class=\"month-cell\" *ngFor=\"let m of months; index as i\" (click)=\"selectMonth(i)\"\r\n          [class.selected]=\"isMonthSelected(i)\" [class.today]=\"isMonthCurrent(i)\">{{ m }}\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!-- year range view -->\r\n    <ng-container *ngIf=\"!timeOnly && currentView === 'yearRange'\">\r\n      <div class=\"header\">\r\n        <button class=\"calendar-arrow\" (click)=\"prevYearRange()\"><i class=\"he he-chevron-left\"></i></button>\r\n        <div class=\"title\">{{ yearRange[0] }} ~ {{ yearRange[yearRangeSize-1] }}</div>\r\n        <button class=\"calendar-arrow\" (click)=\"nextYearRange()\"><i class=\"he he-chevron-right\"></i></button>\r\n      </div>\r\n      <div class=\"year-grid\">\r\n        <div class=\"year-cell\" *ngFor=\"let y of yearRange\" (click)=\"selectYear(y)\"\r\n          [class.selected]=\"isYearSelected(y)\" [class.today]=\"isYearCurrent(y)\">{{ y }}</div>\r\n      </div>\r\n    </ng-container>\r\n\r\n  </div>\r\n</div>", styles: [".form-group.calendar{position:relative}.form-group.calendar .datepicker-group{left:0;width:100%;z-index:1000;padding:.5rem;color:#495057;min-width:240px;max-width:260px;border-radius:3px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.calendar .datepicker-group .header{display:flex;font-weight:600;padding:5px;align-items:center;justify-content:space-between;border-bottom:1px solid #dee2e6}.form-group.calendar .datepicker-group .header .title{gap:8px;display:flex;font-size:15px;cursor:pointer;font-weight:600}.form-group.calendar .datepicker-group .header .calendar-arrow{width:28px;height:28px;border:none;line-height:1;cursor:pointer;background:none}.form-group.calendar .datepicker-group .header .calendar-arrow i{font-size:14px}.form-group.calendar .datepicker-group .header .calendar-arrow:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .week-header{display:grid;padding:8px 0;font-size:13px;font-weight:700;text-align:center;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid,.form-group.calendar .datepicker-group .month-grid,.form-group.calendar .datepicker-group .year-grid{gap:3px;padding:5px;display:grid;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{display:flex;font-size:14px;cursor:pointer;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .days-grid .day-cell.today,.form-group.calendar .datepicker-group .days-grid .month-cell.today,.form-group.calendar .datepicker-group .days-grid .year-cell.today,.form-group.calendar .datepicker-group .month-grid .day-cell.today,.form-group.calendar .datepicker-group .month-grid .month-cell.today,.form-group.calendar .datepicker-group .month-grid .year-cell.today,.form-group.calendar .datepicker-group .year-grid .day-cell.today,.form-group.calendar .datepicker-group .year-grid .month-cell.today,.form-group.calendar .datepicker-group .year-grid .year-cell.today{color:#37c0b3;font-weight:700;border:1px solid #37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.selected,.form-group.calendar .datepicker-group .days-grid .day-cell:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.selected,.form-group.calendar .datepicker-group .days-grid .month-cell:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.selected,.form-group.calendar .datepicker-group .days-grid .year-cell:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.selected,.form-group.calendar .datepicker-group .month-grid .day-cell:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.selected,.form-group.calendar .datepicker-group .month-grid .month-cell:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.selected,.form-group.calendar .datepicker-group .month-grid .year-cell:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.selected,.form-group.calendar .datepicker-group .year-grid .day-cell:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.selected,.form-group.calendar .datepicker-group .year-grid .month-cell:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.selected,.form-group.calendar .datepicker-group .year-grid .year-cell:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled{color:#e0e0e0;background:none;-webkit-user-select:none;user-select:none;cursor:not-allowed}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today{color:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled:hover{color:#e0e0e0;background:transparent}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .day-cell{padding:5px 2px;border-radius:50%}.form-group.calendar .datepicker-group .days-grid .day-cell.other-month:not(.selected):not(:hover),.form-group.calendar .datepicker-group .month-grid .day-cell.other-month:not(.selected):not(:hover),.form-group.calendar .datepicker-group .year-grid .day-cell.other-month:not(.selected):not(:hover){color:#c5c5c5}.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{padding:8px 2px;border-radius:3px}.form-group.calendar .datepicker-group .days-grid.week-mode .day-cell{border-radius:4px}.form-group.calendar .datepicker-group .days-grid.week-mode .day-cell.week-hover:not(.selected){color:#0d6f7d;background:#e6f5f3}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell{border-radius:4px}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.in-range:not(.range-start):not(.range-end),.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-hover:not(.range-start):not(.range-end){color:#0d6f7d;background:#e6f5f3;border-radius:0}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.other-month.in-range:not(.range-start):not(.range-end),.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.other-month.range-hover:not(.range-start):not(.range-end){color:#0d6f7d}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-start,.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-end,.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.selected{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-start:not(.range-end){border-radius:4px 0 0 4px}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-end:not(.range-start){border-radius:0 4px 4px 0}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell:hover:not(.disabled):not(.range-start):not(.range-end){color:#0d6f7d;background:#e6f5f3}.form-group.calendar .datepicker-group .month-grid{grid-template-columns:repeat(3,1fr)}.form-group.calendar .datepicker-group .year-grid{grid-template-columns:repeat(4,1fr)}.form-group.calendar .datepicker-group .time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle{gap:6px;display:flex;margin-left:1rem;flex-direction:column;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button{cursor:pointer;padding:3px 8px;font-size:.75rem;background:#fff;border:1px solid #cccccc}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button.active{color:#fff;border-color:#37c0b3;background-color:#37c0b3}.form-group.calendar .datepicker-group .time-picker .time-select{display:flex;margin:0 .75rem;align-items:center;flex-direction:column}.form-group.calendar .datepicker-group .time-picker .time-select button{border:none;cursor:pointer;padding:4px 8px;background:transparent}.form-group.calendar .datepicker-group .time-picker .time-select button i{font-size:1rem}.form-group.calendar .datepicker-group .time-picker .time-select button:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .time-picker .time-select .time-value{width:2rem;font-size:1rem;text-align:center;margin:2px 3px 4px}.form-group.calendar .datepicker-group .time-picker .time-separator{line-height:1;font-size:1rem}.form-group.calendar .clear{right:35px}.form-group.calendar.group-sm .clear{top:7px;right:35px}\n"] }]
+                    ], template: "<div class=\"form-group calendar\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" [class.disabled]=\"disabled\" #root\r\n  (click)=\"openCalendar()\">\r\n  <label class=\"inp-label\" [ngClass]=\"{'required' : required}\" *ngIf=\"title\">{{ title }}</label>\r\n  <input type=\"text\" #inputEl [placeholder]=\"placeholder\" [formControl]=\"inputControl\" class=\"form-control\"\r\n    [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\" (focus)=\"onFocus()\" [readonly]=\"readonly\"\r\n    (click)=\"openCalendar(); $event.stopPropagation()\" (keydown)=\"onInputKeydown($event)\" />\r\n\r\n  <span class=\"focus-border\" *ngIf=\"deFocus\"></span>\r\n  @if(!inputLoader) {\r\n  <span class=\"calendar-icon\">\r\n    <i class=\"he\" [ngClass]=\"!timeOnly ? 'he-calendar-blank' : 'he-clock'\"></i>\r\n  </span>\r\n  }\r\n\r\n  @if(!inputLoader &&((selectedDate || rangeStart) && !disabled && !readonly) && clearVal) {\r\n  <label class=\"clear\" (click)=\"clearDate($event)\">\r\n    <i class=\"he he-close\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if(inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n  @if(error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n\r\n  <div class=\"datepicker-group\" #datePicker *ngIf=\"isOpen\" (mousedown)=\"$event.preventDefault()\"\r\n    (click)=\"$event.stopPropagation()\">\r\n\r\n    <!-- time picker -->\r\n    <ng-container *ngIf=\"timeOnly\">\r\n      <div class=\"time-picker\">\r\n        <div class=\"time-select\">\r\n          <button (click)=\"incrementHour()\" [disabled]=\"!isIncrementHourValid()\"><i\r\n              class=\"he he-chevron-up\"></i></button>\r\n          <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n            <div class=\"time-value\">\r\n              {{ ((selectedHour % 12) || 12) | number:'2.0' }}\r\n            </div>\r\n          </ng-container>\r\n          <ng-template #show24>\r\n            <div class=\"time-value\">\r\n              {{ selectedHour | number:'2.0' }}\r\n            </div>\r\n          </ng-template>\r\n\r\n          <button (click)=\"decrementHour()\" [disabled]=\"!isDecrementHourValid()\"><i\r\n              class=\"he he-chevron-down\"></i></button>\r\n        </div>\r\n        <span class=\"time-separator\">:</span>\r\n        <div class=\"time-select\">\r\n          <button (click)=\"incrementMinute()\" [disabled]=\"!isIncrementMinuteValid()\"><i\r\n              class=\"he he-chevron-up\"></i></button>\r\n          <div class=\"time-value\">{{ selectedMinute | number:'2.0' }}</div>\r\n          <button (click)=\"decrementMinute()\" [disabled]=\"!isDecrementMinuteValid()\"><i\r\n              class=\"he he-chevron-down\"></i></button>\r\n        </div>\r\n        <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n          <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n          <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!-- day view (single / week modes) -->\r\n    <ng-container *ngIf=\"!timeOnly && currentView === 'day' && selectionMode !== 'range'\">\r\n      <div class=\"header\">\r\n        <button class=\"calendar-arrow\" (click)=\"prevMonth()\"><i class=\"he he-chevron-left\"></i></button>\r\n        <div class=\"title\" (click)=\"goToMonthView()\">\r\n          <div>{{ displayMonthName }}</div>\r\n          <div>{{ displayYear }}</div>\r\n        </div>\r\n        <button class=\"calendar-arrow\" (click)=\"nextMonth()\"><i class=\"he he-chevron-right\"></i></button>\r\n      </div>\r\n      <div class=\"week-header\">\r\n        <div>Sun</div>\r\n        <div>Mon</div>\r\n        <div>Tue</div>\r\n        <div>Wed</div>\r\n        <div>Thu</div>\r\n        <div>Fri</div>\r\n        <div>Sat</div>\r\n      </div>\r\n      <div class=\"days-grid\" [class.week-mode]=\"selectionMode === 'week'\">\r\n        <div class=\"day-cell\" *ngFor=\"let cell of daysInMonth; trackBy: trackByDate\" (click)=\"selectDay(cell)\"\r\n          (mouseenter)=\"onDayHover(cell)\" (mouseleave)=\"onDayLeave()\"\r\n          [class.other-month]=\"cell.otherMonth\"\r\n          [class.disabled]=\"cell.disabled\"\r\n          [class.selected]=\"cell.selected\"\r\n          [class.week-hover]=\"isInHoverWeek(cell.date)\"\r\n          [class.today]=\"cell.today\">\r\n          {{ cell.day }}\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"showTime\">\r\n        <div class=\"time-picker\">\r\n          <div class=\"time-select\">\r\n            <button type=\"button\" (click)=\"incrementHour()\" [disabled]=\"!isIncrementHourValid()\">\r\n              <i class=\"he he-chevron-up\"></i>\r\n            </button>\r\n            <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n              <div class=\"time-value\">\r\n                {{\r\n                selectedHour % 12 === 0\r\n                ? 12\r\n                : selectedHour % 12\r\n                | number:'2.0' }}\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #show24>\r\n              <div class=\"time-value\">{{ selectedHour | number:'2.0' }}</div>\r\n            </ng-template>\r\n            <button type=\"button\" (click)=\"decrementHour()\" [disabled]=\"!isDecrementHourValid()\">\r\n              <i class=\"he he-chevron-down\"></i>\r\n            </button>\r\n          </div>\r\n          <span class=\"time-separator\">:</span>\r\n          <div class=\"time-select\">\r\n            <button type=\"button\" (click)=\"incrementMinute()\" [disabled]=\"!isIncrementMinuteValid()\">\r\n              <i class=\"he he-chevron-up\"></i>\r\n            </button>\r\n            <div class=\"time-value\">\r\n              {{ selectedMinute < 10 ? '0' +selectedMinute : selectedMinute }} </div>\r\n                <button type=\"button\" (click)=\"decrementMinute()\" [disabled]=\"!isDecrementMinuteValid()\">\r\n                  <i class=\"he he-chevron-down\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n              <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n              <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n            </div>\r\n          </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <!-- day view (range mode) -->\r\n    <ng-container *ngIf=\"!timeOnly && currentView === 'day' && selectionMode === 'range'\">\r\n      <div class=\"header\">\r\n        <button class=\"calendar-arrow\" (click)=\"prevMonth()\"><i class=\"he he-chevron-left\"></i></button>\r\n        <div class=\"title\" (click)=\"goToMonthView()\">\r\n          <div>{{ displayMonthName }}</div>\r\n          <div>{{ displayYear }}</div>\r\n        </div>\r\n        <button class=\"calendar-arrow\" (click)=\"nextMonth()\"><i class=\"he he-chevron-right\"></i></button>\r\n      </div>\r\n      <div class=\"week-header\">\r\n        <div>Sun</div>\r\n        <div>Mon</div>\r\n        <div>Tue</div>\r\n        <div>Wed</div>\r\n        <div>Thu</div>\r\n        <div>Fri</div>\r\n        <div>Sat</div>\r\n      </div>\r\n      <div class=\"days-grid range-mode\">\r\n        <div class=\"day-cell\" *ngFor=\"let cell of daysInMonth; trackBy: trackByDate\" (click)=\"selectDay(cell)\"\r\n          (mouseenter)=\"onDayHover(cell)\" (mouseleave)=\"onDayLeave()\"\r\n          [class.other-month]=\"cell.otherMonth\"\r\n          [class.disabled]=\"cell.disabled\"\r\n          [class.selected]=\"cell.selected\"\r\n          [class.range-start]=\"cell.isRangeStart\"\r\n          [class.range-end]=\"cell.isRangeEnd\"\r\n          [class.in-range]=\"cell.isInRange\"\r\n          [class.range-hover]=\"cell.isInHoverRange\"\r\n          [class.today]=\"cell.today\">\r\n          {{ cell.day }}\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!-- month view -->\r\n    <ng-container *ngIf=\"!timeOnly && currentView === 'month'\">\r\n      <div class=\"header\" *ngIf=\"viewMode !== 'month'\">\r\n        <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear - 1\"><i\r\n            class=\"he he-chevron-left\"></i></button>\r\n        <div class=\"title\" (click)=\"goToYearRangeView()\">{{ displayYear }}</div>\r\n        <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear + 1\"><i\r\n            class=\"he he-chevron-right\"></i></button>\r\n      </div>\r\n      <div class=\"month-grid\">\r\n        <div class=\"month-cell\" *ngFor=\"let m of months; index as i\" (click)=\"selectMonth(i)\"\r\n          [class.selected]=\"isMonthSelected(i)\" [class.today]=\"isMonthCurrent(i)\">{{ m }}\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!-- year range view -->\r\n    <ng-container *ngIf=\"!timeOnly && currentView === 'yearRange'\">\r\n      <div class=\"header\">\r\n        <button class=\"calendar-arrow\" (click)=\"prevYearRange()\"><i class=\"he he-chevron-left\"></i></button>\r\n        <div class=\"title\">{{ yearRange[0] }} ~ {{ yearRange[yearRangeSize-1] }}</div>\r\n        <button class=\"calendar-arrow\" (click)=\"nextYearRange()\"><i class=\"he he-chevron-right\"></i></button>\r\n      </div>\r\n      <div class=\"year-grid\">\r\n        <div class=\"year-cell\" *ngFor=\"let y of yearRange\" (click)=\"selectYear(y)\"\r\n          [class.selected]=\"isYearSelected(y)\" [class.today]=\"isYearCurrent(y)\">{{ y }}</div>\r\n      </div>\r\n    </ng-container>\r\n\r\n  </div>\r\n</div>", styles: [".form-group.calendar{position:relative}.form-group.calendar .datepicker-group{left:0;width:100%;z-index:1000;padding:.5rem;color:#495057;min-width:240px;max-width:260px;border-radius:3px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.calendar .datepicker-group .header{display:flex;font-weight:600;padding:5px;align-items:center;justify-content:space-between;border-bottom:1px solid #dee2e6}.form-group.calendar .datepicker-group .header .title{gap:8px;display:flex;font-size:15px;cursor:pointer;font-weight:600}.form-group.calendar .datepicker-group .header .calendar-arrow{width:28px;height:28px;border:none;line-height:1;cursor:pointer;background:none}.form-group.calendar .datepicker-group .header .calendar-arrow i{font-size:14px}.form-group.calendar .datepicker-group .header .calendar-arrow:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .week-header{display:grid;padding:8px 0;font-size:13px;font-weight:700;text-align:center;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid,.form-group.calendar .datepicker-group .month-grid,.form-group.calendar .datepicker-group .year-grid{gap:3px;padding:5px;display:grid;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{display:flex;font-size:14px;cursor:pointer;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .days-grid .day-cell.today,.form-group.calendar .datepicker-group .days-grid .month-cell.today,.form-group.calendar .datepicker-group .days-grid .year-cell.today,.form-group.calendar .datepicker-group .month-grid .day-cell.today,.form-group.calendar .datepicker-group .month-grid .month-cell.today,.form-group.calendar .datepicker-group .month-grid .year-cell.today,.form-group.calendar .datepicker-group .year-grid .day-cell.today,.form-group.calendar .datepicker-group .year-grid .month-cell.today,.form-group.calendar .datepicker-group .year-grid .year-cell.today{color:#37c0b3;font-weight:700;border:1px solid #37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.selected,.form-group.calendar .datepicker-group .days-grid .day-cell:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.selected,.form-group.calendar .datepicker-group .days-grid .month-cell:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.selected,.form-group.calendar .datepicker-group .days-grid .year-cell:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.selected,.form-group.calendar .datepicker-group .month-grid .day-cell:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.selected,.form-group.calendar .datepicker-group .month-grid .month-cell:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.selected,.form-group.calendar .datepicker-group .month-grid .year-cell:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.selected,.form-group.calendar .datepicker-group .year-grid .day-cell:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.selected,.form-group.calendar .datepicker-group .year-grid .month-cell:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.selected,.form-group.calendar .datepicker-group .year-grid .year-cell:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled{color:#e0e0e0;background:none;-webkit-user-select:none;user-select:none;cursor:not-allowed}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today{color:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled:hover{color:#e0e0e0;background:transparent}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .day-cell{padding:5px 2px;border-radius:50%}.form-group.calendar .datepicker-group .days-grid .day-cell.other-month:not(.selected):not(:hover),.form-group.calendar .datepicker-group .month-grid .day-cell.other-month:not(.selected):not(:hover),.form-group.calendar .datepicker-group .year-grid .day-cell.other-month:not(.selected):not(:hover){color:#c5c5c5}.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{padding:8px 2px;border-radius:3px}.form-group.calendar .datepicker-group .days-grid.week-mode .day-cell{border-radius:4px}.form-group.calendar .datepicker-group .days-grid.week-mode .day-cell.week-hover:not(.selected){color:#0d6f7d;background:#e6f5f3}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell{border-radius:0}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-start{border-radius:50% 0 0 50%;color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-end{border-radius:0 50% 50% 0;color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-start.range-end{border-radius:50%}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.in-range:not(.range-start):not(.range-end){background:#e6f5f3;color:#0d6f7d}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-hover:not(.in-range):not(.range-start):not(.range-end):not(.selected){background:#f0faf9;color:#0d6f7d}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.selected:not(.range-start):not(.range-end):not(.in-range){color:#fff;background:#37c0b3;border-radius:50%}.form-group.calendar .datepicker-group .month-grid{grid-template-columns:repeat(3,1fr)}.form-group.calendar .datepicker-group .year-grid{grid-template-columns:repeat(4,1fr)}.form-group.calendar .datepicker-group .time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle{gap:6px;display:flex;margin-left:1rem;flex-direction:column;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button{cursor:pointer;padding:3px 8px;font-size:.75rem;background:#fff;border:1px solid #cccccc}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button.active{color:#fff;border-color:#37c0b3;background-color:#37c0b3}.form-group.calendar .datepicker-group .time-picker .time-select{display:flex;margin:0 .75rem;align-items:center;flex-direction:column}.form-group.calendar .datepicker-group .time-picker .time-select button{border:none;cursor:pointer;padding:4px 8px;background:transparent}.form-group.calendar .datepicker-group .time-picker .time-select button i{font-size:1rem}.form-group.calendar .datepicker-group .time-picker .time-select button:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .time-picker .time-select .time-value{width:2rem;font-size:1rem;text-align:center;margin:2px 3px 4px}.form-group.calendar .datepicker-group .time-picker .time-separator{line-height:1;font-size:1rem}.form-group.calendar .clear{right:35px}.form-group.calendar.group-sm .clear{top:7px;right:35px}\n"] }]
         }], ctorParameters: () => [{ type: i1.DatePipe }], propDecorators: { title: [{
                 type: Input
             }], required: [{
@@ -2958,6 +2915,9 @@ class MultiselectControl {
                 .map((item) => item[this.optionDisplayProperty])
                 .join(", ");
         }
+        // Sync the form control value so the input displays the selected items
+        // (formControl binding overrides [value], so we must set it explicitly)
+        this.inputControl.setValue(this.selectedItemList, { emitEvent: false });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiselectControl, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: MultiselectControl, isStandalone: true, selector: "multiselect-control", inputs: { title: "title", selectedItems: "selectedItems", required: "required", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", deFocus: "deFocus", optionValueProperty: "optionValueProperty", inputLoader: "inputLoader", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", showSearch: "showSearch", optionDisplayProperty: "optionDisplayProperty", options: "options", readonly: "readonly", disabled: "disabled" }, outputs: { optionsSelected: "optionsSelected", selectionCleared: "selectionCleared", blurEvent: "blurEvent" }, host: { listeners: { "window:keydown": "handleWindowKeydown($event)" } }, providers: [