nexheal-lib 0.0.57 → 0.0.58

package/fesm2022/nexheal-lib.mjs

@@ -423,6 +423,10 @@ class CalendarControl {
     errorMessage = "";
     hourFormat = "24";
     selectionMode = "single";
+    /** `week` = Sun–Sat calendar week. `sevenDays` = clicked date through +6 days. */
+    get isWeekLikeMode() {
+        return this.selectionMode === "week" || this.selectionMode === "sevenDays";
+    }
     timeOnly = false;
     dateFormat = "dd/MM/yyyy";
     placeholder = "";
@@ -450,7 +454,7 @@ class CalendarControl {
     selectionCleared = new EventEmitter();
     blurEvent = new EventEmitter();
     dateSelected = new EventEmitter();
-    /** Emitted in `selectionMode="week"` with the selected week's start/end (or null when cleared). */
+    /** Emitted in `selectionMode="week"` (Sun–Sat) and `"sevenDays"` (clicked date through +6 days). */
     weekSelected = new EventEmitter();
     /** Emitted in `selectionMode="range"` with the selected start/end (or null when cleared). */
     rangeSelected = new EventEmitter();
@@ -555,10 +559,8 @@ class CalendarControl {
             return;
         }
         // Week mode: value is a "start - end" range string
-        if (this.selectionMode === "week") {
-            const raw = String(value);
-            const firstPart = raw.split(" - ")[0].trim();
-            const parsed = this.parseDate(firstPart) || this.parseDate(raw);
+        if (this.isWeekLikeMode) {
+            const parsed = this.parseWeekAnchor(value);
             if (!parsed) {
                 this.selectedWeekStart = null;
                 this.selectedWeekEnd = null;
@@ -719,7 +721,7 @@ class CalendarControl {
         this.onTouchedFn();
         // 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") {
+        if (this.isWeekLikeMode) {
             const rawWeek = (this.inputControl.value || "").trim();
             const current = this.selectedWeekStart && this.selectedWeekEnd
                 ? this.formatWeek(this.selectedWeekStart, this.selectedWeekEnd)
@@ -740,8 +742,8 @@ class CalendarControl {
                 this.blurEvent.emit();
                 return;
             }
-            // typed a different value -> recompute the week from the first date, else revert
-            const parsed = this.parseDate(rawWeek.split(" - ")[0].trim());
+            // typed a different value -> recompute the week, else revert
+            const parsed = this.parseWeekAnchor(rawWeek);
             if (!parsed) {
                 this.inputControl.setValue(current, { emitEvent: false });
                 this.blurEvent.emit();
@@ -929,8 +931,8 @@ class CalendarControl {
         if (!cell || cell.disabled)
             return;
         const base = cell.date;
-        // Week mode: select the whole week containing the clicked day
-        if (this.selectionMode === "week") {
+        // Week / sevenDays: select a 7-day span from the clicked date
+        if (this.isWeekLikeMode) {
             const { start, end } = this.getWeekRange(base);
             this.selectedWeekStart = start;
             this.selectedWeekEnd = end;
@@ -1005,6 +1007,11 @@ class CalendarControl {
                 const d = +m[1], mo = +m[2] - 1, y = +m[3];
                 return new Date(y, mo, d);
             }
+            // Date-only ISO must be local; `new Date("yyyy-MM-dd")` is UTC and shifts the day in IST.
+            const isoDateOnly = val.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+            if (isoDateOnly) {
+                return new Date(+isoDateOnly[1], +isoDateOnly[2] - 1, +isoDateOnly[3]);
+            }
         }
         // fallback
         const date = new Date(val);
@@ -1044,31 +1051,77 @@ class CalendarControl {
             this.isDateDisabled(new Date(this.displayYear, this.displayMonth, day)));
     }
     // week
-    /** The Sun–Sat range for the week containing `date`. */
+    /**
+     * `week`: Sun–Sat containing `date`.
+     * `sevenDays`: `date` through the next 6 days.
+     */
     getWeekRange(date) {
-        const start = new Date(date);
-        start.setHours(0, 0, 0, 0);
-        start.setDate(start.getDate() - start.getDay()); // back to Sunday
-        const end = new Date(start);
-        end.setDate(start.getDate() + 6); // Saturday
-        end.setHours(23, 59, 59, 999);
+        const day = this.startOfDay(date);
+        if (this.selectionMode === "sevenDays") {
+            const start = day;
+            const end = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 6, 23, 59, 59, 999);
+            return { start, end };
+        }
+        const start = new Date(day.getFullYear(), day.getMonth(), day.getDate() - day.getDay());
+        const end = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 6, 23, 59, 59, 999);
         return { start, end };
     }
+    /**
+     * `sevenDays` anchors on the start date (clicked day).
+     * `week` (Sun–Sat) prefers the end date when both are present so Sunday 00:00 IST
+     * does not snap the previous UTC day back a calendar week.
+     */
+    parseWeekAnchor(value) {
+        if (value instanceof Date && !isNaN(value.getTime())) {
+            return this.startOfDay(value);
+        }
+        if (Array.isArray(value) && value.length) {
+            if (this.selectionMode === "week" && value[1] != null) {
+                const end = this.parseDate(value[1]);
+                if (end)
+                    return end;
+            }
+            return this.parseWeekAnchor(value[0]);
+        }
+        if (value && typeof value === "object" && !(value instanceof Date) && (value.start || value.end)) {
+            if (this.selectionMode === "week" && value.end) {
+                const end = this.parseDate(value.end);
+                if (end)
+                    return end;
+            }
+            return this.parseWeekAnchor(value.start);
+        }
+        const raw = String(value ?? "").trim();
+        if (!raw)
+            return null;
+        const parts = raw.split(/\s+[-–—]\s+/).map((part) => part.trim()).filter(Boolean);
+        if (this.selectionMode === "week" && parts.length >= 2) {
+            const end = this.parseDate(parts[1]);
+            if (end)
+                return end;
+        }
+        if (parts.length >= 1) {
+            const start = this.parseDate(parts[0]);
+            if (start)
+                return start;
+        }
+        return this.parseDate(raw);
+    }
     formatWeek(start, end) {
         return `${this.datePipe.transform(start, this.dateFormat)} - ${this.datePipe.transform(end, this.dateFormat)}`;
     }
     isWithin(date, start, end) {
         if (!start || !end)
             return false;
-        return date >= start && date <= end;
+        return this.isWithinDayRange(date, start, end);
     }
     isInHoverWeek(date) {
-        if (this.selectionMode !== "week")
+        if (!this.isWeekLikeMode)
             return false;
         return this.isWithin(date, this.hoverWeekStart, this.hoverWeekEnd);
     }
     onDayHover(cell) {
-        if (this.selectionMode === "week") {
+        if (this.isWeekLikeMode) {
             const { start, end } = this.getWeekRange(cell.date);
             this.hoverWeekStart = start;
             this.hoverWeekEnd = end;
@@ -1088,7 +1141,7 @@ class CalendarControl {
     /** 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") {
+        if (this.isWeekLikeMode) {
             return this.isWithin(date, this.selectedWeekStart, this.selectedWeekEnd);
         }
         if (this.selectionMode === "range") {
@@ -1700,7 +1753,7 @@ class CalendarControl {
         this.onChangeFn(null);
         this.onTouchedFn();
         this.dateSelected.emit(null);
-        if (this.selectionMode === "week")
+        if (this.isWeekLikeMode)
             this.weekSelected.emit(null);
         if (this.selectionMode === "range")
             this.rangeSelected.emit(null);
@@ -1713,7 +1766,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 && !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]=\"isWeekLikeMode\"\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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CalendarControl, decorators: [{
             type: Component,
@@ -1728,7 +1781,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 && !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]=\"isWeekLikeMode\"\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"] }]
         }], ctorParameters: () => [{ type: i1.DatePipe }], propDecorators: { title: [{
                 type: Input
             }], required: [{