nexheal-lib 0.0.36 → 0.0.37

package/fesm2022/nexheal-lib.mjs

@@ -509,7 +509,6 @@ class CalendarControl {
     todayDate = this.today.getDate();
     selectedHour = this.today.getHours();
     selectedMinute = this.today.getMinutes();
-    dayClassMap = {};
     inputVal = null; // Replace with the appropriate type and default value
     yearRangeSize = 15; // The year range view shows a chunk of years, for example 15 years at a time.
     currentView = "day";
@@ -850,15 +849,13 @@ class CalendarControl {
         }
     }
     // day
-    selectDay(day) {
-        if (!day)
+    selectDay(cell) {
+        if (!cell || cell.disabled)
             return;
+        const base = cell.date;
         // Week mode: select the whole week containing the clicked day
         if (this.selectionMode === "week") {
-            const clicked = new Date(this.displayYear, this.displayMonth, day);
-            if (this.isDateDisabled(clicked))
-                return;
-            const { start, end } = this.getWeekRange(clicked);
+            const { start, end } = this.getWeekRange(base);
             this.selectedWeekStart = start;
             this.selectedWeekEnd = end;
             this.selectedDate = start;
@@ -872,11 +869,12 @@ class CalendarControl {
             return;
         }
         const picked = this.showTime
-            ? this.buildDateWithTime(day)
-            : new Date(this.displayYear, this.displayMonth, day);
-        if (this.isDateDisabled(picked))
-            return;
+            ? new Date(base.getFullYear(), base.getMonth(), base.getDate(), this.selectedHour, this.selectedMinute)
+            : new Date(base.getFullYear(), base.getMonth(), base.getDate());
         this.selectedDate = picked;
+        // follow the click into the adjacent month when a spill-over day is picked
+        this.displayMonth = picked.getMonth();
+        this.displayYear = picked.getFullYear();
         const out = this.formatOutput(picked);
         this.inputControl.setValue(out, { emitEvent: false });
         this.onChangeFn(out);
@@ -885,27 +883,36 @@ class CalendarControl {
         this.isOpen = false;
     }
     get daysInMonth() {
-        const firstDay = new Date(this.displayYear, this.displayMonth, 1).getDay();
-        const totalDays = new Date(this.displayYear, this.displayMonth + 1, 0).getDate();
-        const offset = firstDay;
-        const daysArray = Array(offset).fill(null);
-        this.dayClassMap = {}; // Reset
-        for (let i = 1; i <= totalDays; i++) {
-            const date = new Date(this.displayYear, this.displayMonth, i);
-            this.dayClassMap[i] = {
+        const firstOfMonth = new Date(this.displayYear, this.displayMonth, 1);
+        const lastOfMonth = new Date(this.displayYear, this.displayMonth + 1, 0);
+        // Start on the Sunday on/before the 1st, end on the Saturday on/after the last day,
+        // so leading/trailing cells show the adjacent months' days.
+        const start = new Date(firstOfMonth);
+        start.setDate(1 - firstOfMonth.getDay());
+        const end = new Date(lastOfMonth);
+        end.setDate(lastOfMonth.getDate() + (6 - lastOfMonth.getDay()));
+        const cells = [];
+        const cursor = new Date(start);
+        while (cursor <= end) {
+            const date = new Date(cursor.getFullYear(), cursor.getMonth(), cursor.getDate());
+            cells.push({
+                date,
+                day: date.getDate(),
+                otherMonth: date.getMonth() !== this.displayMonth,
                 disabled: this.isDateDisabled(date),
                 selected: this.selectionMode === "week"
                     ? this.isWithin(date, this.selectedWeekStart, this.selectedWeekEnd)
-                    : this.selectedDate?.getFullYear() === this.displayYear &&
-                        this.selectedDate?.getMonth() === this.displayMonth &&
-                        this.selectedDate?.getDate() === i,
-                today: this.todayYear === this.displayYear &&
-                    this.todayMonth === this.displayMonth &&
-                    this.todayDate === i,
-            };
-            daysArray.push(i);
+                    : !!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(),
+            });
+            cursor.setDate(cursor.getDate() + 1);
         }
-        return daysArray;
+        return cells;
     }
     parseDate(val) {
         if (typeof val === "string") {
@@ -980,15 +987,15 @@ class CalendarControl {
             return false;
         return date >= start && date <= end;
     }
-    isInHoverWeek(day) {
-        if (day === null || this.selectionMode !== "week")
+    isInHoverWeek(date) {
+        if (this.selectionMode !== "week")
             return false;
-        return this.isWithin(new Date(this.displayYear, this.displayMonth, day), this.hoverWeekStart, this.hoverWeekEnd);
+        return this.isWithin(date, this.hoverWeekStart, this.hoverWeekEnd);
     }
-    onDayHover(day) {
-        if (day === null || this.selectionMode !== "week")
+    onDayHover(cell) {
+        if (this.selectionMode !== "week")
             return;
-        const { start, end } = this.getWeekRange(new Date(this.displayYear, this.displayMonth, day));
+        const { start, end } = this.getWeekRange(cell.date);
         this.hoverWeekStart = start;
         this.hoverWeekEnd = end;
     }
@@ -1390,7 +1397,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        <div class=\"day-cell\" *ngFor=\"let day of daysInMonth\" (click)=\"selectDay(day)\"\r\n          (mouseenter)=\"onDayHover(day)\" (mouseleave)=\"onDayLeave()\"\r\n          [class.disabled]=\"day !== null && dayClassMap[day].disabled\"\r\n          [class.selected]=\"day !== null && dayClassMap[day].selected\"\r\n          [class.week-hover]=\"day !== null && isInHoverWeek(day)\" [class.today]=\"\r\n                    day !== null &&\r\n                    displayYear === todayYear   &&\r\n                    displayMonth === todayMonth &&\r\n                    day === todayDate\r\n                  \">\r\n          {{day ? 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)\">{{ 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)\">{{ 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 .clear{top:9px;right:34px}.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 .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 .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}\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]=\"selectionMode === 'week'\">\r\n        <div class=\"day-cell\" *ngFor=\"let cell of daysInMonth\" (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    <!-- 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)\">{{ 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)\">{{ 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 .clear{top:9px;right:34px}.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 .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}\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,
@@ -1405,7 +1412,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        <div class=\"day-cell\" *ngFor=\"let day of daysInMonth\" (click)=\"selectDay(day)\"\r\n          (mouseenter)=\"onDayHover(day)\" (mouseleave)=\"onDayLeave()\"\r\n          [class.disabled]=\"day !== null && dayClassMap[day].disabled\"\r\n          [class.selected]=\"day !== null && dayClassMap[day].selected\"\r\n          [class.week-hover]=\"day !== null && isInHoverWeek(day)\" [class.today]=\"\r\n                    day !== null &&\r\n                    displayYear === todayYear   &&\r\n                    displayMonth === todayMonth &&\r\n                    day === todayDate\r\n                  \">\r\n          {{day ? 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)\">{{ 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)\">{{ 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 .clear{top:9px;right:34px}.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 .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 .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}\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]=\"selectionMode === 'week'\">\r\n        <div class=\"day-cell\" *ngFor=\"let cell of daysInMonth\" (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    <!-- 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)\">{{ 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)\">{{ 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 .clear{top:9px;right:34px}.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 .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}\n"] }]
         }], ctorParameters: () => [{ type: i1.DatePipe }], propDecorators: { title: [{
                 type: Input
             }], required: [{