nexheal-lib 0.0.43 → 0.0.45

package/fesm2022/nexheal-lib.mjs

@@ -1457,7 +1457,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 cell of daysInMonth; trackBy: trackByDate\" (click)=\"selectDay(cell)\"\r\n          (mouseenter)=\"onDayHover(cell)\" (mouseleave)=\"onDayLeave()\"\r\n          [class.other-month]=\"cell.otherMonth\"\r\n          [class.disabled]=\"cell.disabled\"\r\n          [class.selected]=\"cell.selected\"\r\n          [class.week-hover]=\"isInHoverWeek(cell.date)\"\r\n          [class.today]=\"cell.today\">\r\n          {{ cell.day }}\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"showTime\">\r\n        <div class=\"time-picker\">\r\n          <div class=\"time-select\">\r\n            <button type=\"button\" (click)=\"incrementHour()\" [disabled]=\"!isIncrementHourValid()\">\r\n              <i class=\"he he-chevron-up\"></i>\r\n            </button>\r\n            <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n              <div class=\"time-value\">\r\n                {{\r\n                selectedHour % 12 === 0\r\n                ? 12\r\n                : selectedHour % 12\r\n                | number:'2.0' }}\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #show24>\r\n              <div class=\"time-value\">{{ selectedHour | number:'2.0' }}</div>\r\n            </ng-template>\r\n            <button type=\"button\" (click)=\"decrementHour()\" [disabled]=\"!isDecrementHourValid()\">\r\n              <i class=\"he he-chevron-down\"></i>\r\n            </button>\r\n          </div>\r\n          <span class=\"time-separator\">:</span>\r\n          <div class=\"time-select\">\r\n            <button type=\"button\" (click)=\"incrementMinute()\" [disabled]=\"!isIncrementMinuteValid()\">\r\n              <i class=\"he he-chevron-up\"></i>\r\n            </button>\r\n            <div class=\"time-value\">\r\n              {{ selectedMinute < 10 ? '0' +selectedMinute : selectedMinute }} </div>\r\n                <button type=\"button\" (click)=\"decrementMinute()\" [disabled]=\"!isDecrementMinuteValid()\">\r\n                  <i class=\"he he-chevron-down\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n              <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n              <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n            </div>\r\n          </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <!-- 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 .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.group-sm .clear{top:9px;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]=\"selectionMode === 'week'\">\r\n        <div class=\"day-cell\" *ngFor=\"let cell of daysInMonth; trackBy: trackByDate\" (click)=\"selectDay(cell)\"\r\n          (mouseenter)=\"onDayHover(cell)\" (mouseleave)=\"onDayLeave()\"\r\n          [class.other-month]=\"cell.otherMonth\"\r\n          [class.disabled]=\"cell.disabled\"\r\n          [class.selected]=\"cell.selected\"\r\n          [class.week-hover]=\"isInHoverWeek(cell.date)\"\r\n          [class.today]=\"cell.today\">\r\n          {{ cell.day }}\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"showTime\">\r\n        <div class=\"time-picker\">\r\n          <div class=\"time-select\">\r\n            <button type=\"button\" (click)=\"incrementHour()\" [disabled]=\"!isIncrementHourValid()\">\r\n              <i class=\"he he-chevron-up\"></i>\r\n            </button>\r\n            <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n              <div class=\"time-value\">\r\n                {{\r\n                selectedHour % 12 === 0\r\n                ? 12\r\n                : selectedHour % 12\r\n                | number:'2.0' }}\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #show24>\r\n              <div class=\"time-value\">{{ selectedHour | number:'2.0' }}</div>\r\n            </ng-template>\r\n            <button type=\"button\" (click)=\"decrementHour()\" [disabled]=\"!isDecrementHourValid()\">\r\n              <i class=\"he he-chevron-down\"></i>\r\n            </button>\r\n          </div>\r\n          <span class=\"time-separator\">:</span>\r\n          <div class=\"time-select\">\r\n            <button type=\"button\" (click)=\"incrementMinute()\" [disabled]=\"!isIncrementMinuteValid()\">\r\n              <i class=\"he he-chevron-up\"></i>\r\n            </button>\r\n            <div class=\"time-value\">\r\n              {{ selectedMinute < 10 ? '0' +selectedMinute : selectedMinute }} </div>\r\n                <button type=\"button\" (click)=\"decrementMinute()\" [disabled]=\"!isDecrementMinuteValid()\">\r\n                  <i class=\"he he-chevron-down\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n              <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n              <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n            </div>\r\n          </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <!-- 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 .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,
@@ -1472,7 +1472,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 cell of daysInMonth; trackBy: trackByDate\" (click)=\"selectDay(cell)\"\r\n          (mouseenter)=\"onDayHover(cell)\" (mouseleave)=\"onDayLeave()\"\r\n          [class.other-month]=\"cell.otherMonth\"\r\n          [class.disabled]=\"cell.disabled\"\r\n          [class.selected]=\"cell.selected\"\r\n          [class.week-hover]=\"isInHoverWeek(cell.date)\"\r\n          [class.today]=\"cell.today\">\r\n          {{ cell.day }}\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"showTime\">\r\n        <div class=\"time-picker\">\r\n          <div class=\"time-select\">\r\n            <button type=\"button\" (click)=\"incrementHour()\" [disabled]=\"!isIncrementHourValid()\">\r\n              <i class=\"he he-chevron-up\"></i>\r\n            </button>\r\n            <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n              <div class=\"time-value\">\r\n                {{\r\n                selectedHour % 12 === 0\r\n                ? 12\r\n                : selectedHour % 12\r\n                | number:'2.0' }}\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #show24>\r\n              <div class=\"time-value\">{{ selectedHour | number:'2.0' }}</div>\r\n            </ng-template>\r\n            <button type=\"button\" (click)=\"decrementHour()\" [disabled]=\"!isDecrementHourValid()\">\r\n              <i class=\"he he-chevron-down\"></i>\r\n            </button>\r\n          </div>\r\n          <span class=\"time-separator\">:</span>\r\n          <div class=\"time-select\">\r\n            <button type=\"button\" (click)=\"incrementMinute()\" [disabled]=\"!isIncrementMinuteValid()\">\r\n              <i class=\"he he-chevron-up\"></i>\r\n            </button>\r\n            <div class=\"time-value\">\r\n              {{ selectedMinute < 10 ? '0' +selectedMinute : selectedMinute }} </div>\r\n                <button type=\"button\" (click)=\"decrementMinute()\" [disabled]=\"!isDecrementMinuteValid()\">\r\n                  <i class=\"he he-chevron-down\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n              <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n              <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n            </div>\r\n          </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <!-- 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 .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.group-sm .clear{top:9px;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]=\"selectionMode === 'week'\">\r\n        <div class=\"day-cell\" *ngFor=\"let cell of daysInMonth; trackBy: trackByDate\" (click)=\"selectDay(cell)\"\r\n          (mouseenter)=\"onDayHover(cell)\" (mouseleave)=\"onDayLeave()\"\r\n          [class.other-month]=\"cell.otherMonth\"\r\n          [class.disabled]=\"cell.disabled\"\r\n          [class.selected]=\"cell.selected\"\r\n          [class.week-hover]=\"isInHoverWeek(cell.date)\"\r\n          [class.today]=\"cell.today\">\r\n          {{ cell.day }}\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"showTime\">\r\n        <div class=\"time-picker\">\r\n          <div class=\"time-select\">\r\n            <button type=\"button\" (click)=\"incrementHour()\" [disabled]=\"!isIncrementHourValid()\">\r\n              <i class=\"he he-chevron-up\"></i>\r\n            </button>\r\n            <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n              <div class=\"time-value\">\r\n                {{\r\n                selectedHour % 12 === 0\r\n                ? 12\r\n                : selectedHour % 12\r\n                | number:'2.0' }}\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #show24>\r\n              <div class=\"time-value\">{{ selectedHour | number:'2.0' }}</div>\r\n            </ng-template>\r\n            <button type=\"button\" (click)=\"decrementHour()\" [disabled]=\"!isDecrementHourValid()\">\r\n              <i class=\"he he-chevron-down\"></i>\r\n            </button>\r\n          </div>\r\n          <span class=\"time-separator\">:</span>\r\n          <div class=\"time-select\">\r\n            <button type=\"button\" (click)=\"incrementMinute()\" [disabled]=\"!isIncrementMinuteValid()\">\r\n              <i class=\"he he-chevron-up\"></i>\r\n            </button>\r\n            <div class=\"time-value\">\r\n              {{ selectedMinute < 10 ? '0' +selectedMinute : selectedMinute }} </div>\r\n                <button type=\"button\" (click)=\"decrementMinute()\" [disabled]=\"!isDecrementMinuteValid()\">\r\n                  <i class=\"he he-chevron-down\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n              <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n              <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n            </div>\r\n          </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <!-- 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 .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: [{
@@ -2774,6 +2774,415 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 args: ["window:keydown", ["$event"]]
             }] } });
 
+class PaginatedAutocompleteControl {
+    subscription = new Subscription();
+    title;
+    required = false;
+    placeholder = "";
+    customClass = '';
+    clearVal = true;
+    error = false;
+    errorMessage = "";
+    autocomplete = "";
+    inputLoader = false;
+    readonly = false;
+    optionDisplayProperty = "displayname";
+    /** 'scroll' = infinite scroll, 'click' = "Load more" button */
+    paginationType = 'scroll';
+    pageSize = 10;
+    searchDebounce = 300;
+    /** Total record count for the current search, from the API response */
+    totalCount = 0;
+    _disabled = false;
+    _pendingPage = 1;
+    /** Items of the page just loaded. Page 1 replaces the list, later pages append. */
+    _displayedOptions = [];
+    set options(value) {
+        const incoming = value || [];
+        if (this._pendingPage <= 1) {
+            this._displayedOptions = [...incoming];
+        }
+        else {
+            // Append, de-duplicating by id in case of overlapping pages
+            const existingIds = new Set(this._displayedOptions.map((o) => o.id));
+            this._displayedOptions = [
+                ...this._displayedOptions,
+                ...incoming.filter((o) => !existingIds.has(o.id)),
+            ];
+        }
+        this.isPageLoading = false;
+        this.processValueBuffer();
+        if (this.isDropdownOpen) {
+            if (this._pendingPage <= 1) {
+                this.highlightedIndex = this._displayedOptions.length > 0 ? 0 : null;
+            }
+            setTimeout(() => {
+                if (this.popperInstance)
+                    this.popperInstance.update();
+            }, 0);
+        }
+    }
+    get options() {
+        return this._displayedOptions;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+        if (this.inputControl) {
+            if (value) {
+                this.inputControl.disable();
+            }
+            else {
+                this.inputControl.enable();
+            }
+        }
+    }
+    pageChange = new EventEmitter();
+    optionSelected = new EventEmitter();
+    selectionCleared = new EventEmitter();
+    blurEvent = new EventEmitter();
+    optionPatched = new EventEmitter();
+    valueBuffer = null;
+    popperInstance;
+    preventDropdownReopen = false;
+    preventClearOnBlur = false;
+    onChange = () => { };
+    onTouched = () => { };
+    inputElement;
+    dropdownElement;
+    inputControl = new FormControl("");
+    isDropdownOpen = false;
+    hasFocus = false;
+    isPageLoading = false;
+    selectedItems;
+    highlightedIndex = null;
+    currentPage = 1;
+    get hasMore() {
+        return this._displayedOptions.length < this.totalCount;
+    }
+    constructor() { }
+    ngOnInit() {
+        this.inputControl.markAsPristine();
+        this.subscription.add(this.inputControl.valueChanges
+            .pipe(debounceTime(this.searchDebounce), distinctUntilChanged())
+            .subscribe((value) => {
+            if (this.preventDropdownReopen) {
+                this.preventDropdownReopen = false;
+                return;
+            }
+            if (this.readonly || !this.hasFocus)
+                return;
+            this.loadPage(1, value || "");
+        }));
+    }
+    ngAfterViewInit() {
+        this.createPopperInstance();
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+        }
+    }
+    // CVA
+    writeValue(value) {
+        this.preventDropdownReopen = true;
+        if (value == null) {
+            this.valueBuffer = null;
+            this.selectedItems = null;
+            this.inputControl.setValue("", { emitEvent: false });
+        }
+        else {
+            this.valueBuffer = value;
+            this.processValueBuffer();
+        }
+    }
+    processValueBuffer() {
+        if (this.valueBuffer == null) {
+            return;
+        }
+        if (this._displayedOptions.length > 0) {
+            const matchedSuggestion = this._displayedOptions.find((s) => s.id === this.valueBuffer);
+            if (matchedSuggestion) {
+                this.preventDropdownReopen = true;
+                this.inputControl.setValue(matchedSuggestion[this.optionDisplayProperty], { emitEvent: false });
+                this.selectedItems = matchedSuggestion;
+                this.onChange(matchedSuggestion.id);
+                this.optionPatched.emit(matchedSuggestion);
+                this.valueBuffer = null;
+            }
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.inputControl.disable();
+        }
+        else {
+            this.inputControl.enable();
+        }
+    }
+    // paging
+    loadPage(page, search) {
+        this.currentPage = page;
+        this._pendingPage = page;
+        this.isPageLoading = true;
+        if (page === 1) {
+            this.openDropdown();
+        }
+        this.pageChange.emit({
+            search: search,
+            page: page,
+            pageSize: this.pageSize,
+        });
+    }
+    loadNextPage() {
+        if (!this.hasMore || this.isPageLoading)
+            return;
+        this.loadPage(this.currentPage + 1, this.inputControl.value || "");
+    }
+    onListScroll(event) {
+        if (this.paginationType !== 'scroll')
+            return;
+        const el = event.target;
+        if (el.scrollTop + el.clientHeight >= el.scrollHeight - 40) {
+            this.loadNextPage();
+        }
+    }
+    onLoadMoreClick(event) {
+        event.stopPropagation();
+        this.loadNextPage();
+    }
+    openDropdown() {
+        if (this.isDropdownOpen)
+            return;
+        this.isDropdownOpen = true;
+        this.highlightedIndex = null;
+        setTimeout(() => {
+            this.createPopperInstance();
+        }, 0);
+    }
+    // selection
+    selectSuggestion(suggestion) {
+        this.preventDropdownReopen = true;
+        this.inputControl.setValue(suggestion[this.optionDisplayProperty], {
+            emitEvent: false,
+        });
+        this.onChange(suggestion.id);
+        this.inputControl.markAsTouched();
+        this.inputControl.updateValueAndValidity();
+        this.isDropdownOpen = false;
+        if (this.selectedItems?.id !== suggestion.id) {
+            this.selectedItems = suggestion;
+            this.optionSelected.emit(suggestion);
+        }
+    }
+    // events
+    onFocus() {
+        this.hasFocus = true;
+        if (this.readonly)
+            return;
+        this.loadPage(1, this.inputControl.value || "");
+    }
+    onInputClick() {
+        if (this.readonly || this.isDropdownOpen)
+            return;
+        if (this.hasFocus) {
+            this.loadPage(1, this.inputControl.value || "");
+        }
+    }
+    onBlur() {
+        this.blurEvent.emit();
+        this.onTouched();
+        // Delay so option / load-more mousedown and click can occur first.
+        setTimeout(() => {
+            if (this.preventClearOnBlur) {
+                this.preventClearOnBlur = false;
+                // Keep the dropdown alive for load-more clicks
+                if (this.inputElement) {
+                    this.inputElement.nativeElement.focus();
+                }
+                return;
+            }
+            this.hasFocus = false;
+            this.isDropdownOpen = false;
+            this.isPageLoading = false;
+            const currentValue = this.inputControl.value;
+            const found = this._displayedOptions.find((opt) => String(opt[this.optionDisplayProperty]).toLowerCase() ===
+                String(currentValue).toLowerCase());
+            if (!found) {
+                this.inputControl.setValue("", { emitEvent: false });
+                this.selectedItems = null;
+                this.onChange(null);
+            }
+        }, 300);
+    }
+    onKeyDown(event) {
+        if (!this.isDropdownOpen) {
+            return;
+        }
+        switch (event.key) {
+            case "ArrowDown":
+                this.highlightedIndex =
+                    this.highlightedIndex === null ||
+                        this.highlightedIndex === this._displayedOptions.length - 1
+                        ? 0
+                        : this.highlightedIndex + 1;
+                event.preventDefault();
+                this.scrollHighlightedItemIntoView();
+                break;
+            case "ArrowUp":
+                this.highlightedIndex =
+                    this.highlightedIndex === null || this.highlightedIndex === 0
+                        ? this._displayedOptions.length - 1
+                        : this.highlightedIndex - 1;
+                event.preventDefault();
+                this.scrollHighlightedItemIntoView();
+                break;
+            case "Enter":
+                if (this.highlightedIndex !== null &&
+                    this._displayedOptions.length > 0) {
+                    this.selectSuggestion(this._displayedOptions[this.highlightedIndex]);
+                }
+                else {
+                    this.isDropdownOpen = false;
+                }
+                event.preventDefault();
+                break;
+            case "Escape":
+                this.isDropdownOpen = false;
+                break;
+            default:
+                break;
+        }
+    }
+    onOptionMouseDown() {
+        this.preventClearOnBlur = true;
+    }
+    onMouseOver(index) {
+        this.highlightedIndex = index;
+    }
+    // popper
+    createPopperInstance() {
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+        }
+        if (this.inputElement && this.dropdownElement) {
+            this.popperInstance = createPopper(this.inputElement.nativeElement, this.dropdownElement.nativeElement, {
+                placement: "bottom-start",
+                modifiers: [
+                    {
+                        name: "offset",
+                        options: {
+                            offset: [0, 1],
+                        },
+                    },
+                    {
+                        name: "flip",
+                        options: {
+                            fallbackPlacements: ["top-start", "bottom-start"],
+                        },
+                    },
+                ],
+            });
+        }
+    }
+    scrollHighlightedItemIntoView() {
+        if (this.highlightedIndex !== null) {
+            const highlightedItem = this.dropdownElement.nativeElement.querySelectorAll(".list-item")[this.highlightedIndex];
+            if (highlightedItem) {
+                highlightedItem.scrollIntoView({ block: "nearest" });
+            }
+        }
+    }
+    // clear
+    resetInput() {
+        this.inputControl.setValue("", { emitEvent: false });
+        this.selectedItems = null;
+        this.valueBuffer = null;
+        this.onChange(null);
+        this.selectionCleared.emit();
+        if (this.hasFocus) {
+            this.loadPage(1, "");
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PaginatedAutocompleteControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PaginatedAutocompleteControl, isStandalone: true, selector: "paginated-autocomplete-control", inputs: { title: "title", required: "required", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", inputLoader: "inputLoader", readonly: "readonly", optionDisplayProperty: "optionDisplayProperty", paginationType: "paginationType", pageSize: "pageSize", searchDebounce: "searchDebounce", totalCount: "totalCount", options: "options", disabled: "disabled" }, outputs: { pageChange: "pageChange", optionSelected: "optionSelected", selectionCleared: "selectionCleared", blurEvent: "blurEvent", optionPatched: "optionPatched" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: PaginatedAutocompleteControl,
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }], ngImport: i0, template: "<div class=\"form-group auto-complete paginated-autocomplete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\n  @if (title) {\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n  }\n\n  <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\n    (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" (click)=\"onInputClick()\"\n    [ngClass]=\"{'is-invalid': error}\" [attr.autocomplete]=\"autocomplete || null\" [readonly]=\"readonly\" />\n\n  <span class=\"focus-border\"></span>\n\n  @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\n  <label class=\"clear\" (mousedown)=\"onOptionMouseDown()\" (click)=\"resetInput()\">\n    <i class=\"he he-close\"></i>\n  </label>\n  }\n\n  @if (isDropdownOpen) {\n  <div #dropdownElement class=\"option-list\" (scroll)=\"onListScroll($event)\">\n    @if (options.length === 0 && !isPageLoading) {\n    <div class=\"no-results\">\n      <div>No results found</div>\n    </div>\n    } @else {\n    @for (suggestion of options; track suggestion.id; let i = $index) {\n    <div class=\"list-item\" [ngClass]=\"{\n                'active': suggestion === selectedItems,\n                'highlighted': highlightedIndex === i\n              }\" (mousedown)=\"onOptionMouseDown()\" (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\n      {{ suggestion[optionDisplayProperty] }}\n    </div>\n    }\n\n    @if (isPageLoading) {\n    <div class=\"list-loading\">Loading...</div>\n    }\n\n    @if (paginationType === 'click' && hasMore && !isPageLoading) {\n    <div class=\"load-more\" (mousedown)=\"onOptionMouseDown()\" (click)=\"onLoadMoreClick($event)\">\n      Load more ({{ options.length }} of {{ totalCount }})\n    </div>\n    }\n    }\n  </div>\n  }\n\n  @if (inputLoader) {\n  <label class=\"loader input-loader\"></label>\n  }\n\n  @if (error) {\n  <div class=\"val-msg\">{{ errorMessage }}</div>\n  }\n</div>\n", styles: [".form-group.paginated-autocomplete .form-control{padding-right:unset}.form-group.paginated-autocomplete .clear{right:7px}.form-group.paginated-autocomplete .option-list{max-height:220px;overflow-y:auto}.form-group.paginated-autocomplete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.paginated-autocomplete .option-list .list-loading{padding:8px 10px;color:#9b9b9b;text-align:center;font-size:12px}.form-group.paginated-autocomplete .option-list .load-more{padding:8px 10px;text-align:center;cursor:pointer;color:#0d6efd;font-size:13px;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.paginated-autocomplete .option-list .load-more:hover{background-color:#f5f5f5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PaginatedAutocompleteControl, decorators: [{
+            type: Component,
+            args: [{ selector: "paginated-autocomplete-control", standalone: true, imports: [CommonModule, ReactiveFormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: PaginatedAutocompleteControl,
+                            multi: true,
+                        },
+                    ], template: "<div class=\"form-group auto-complete paginated-autocomplete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\n  @if (title) {\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n  }\n\n  <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\n    (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" (click)=\"onInputClick()\"\n    [ngClass]=\"{'is-invalid': error}\" [attr.autocomplete]=\"autocomplete || null\" [readonly]=\"readonly\" />\n\n  <span class=\"focus-border\"></span>\n\n  @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\n  <label class=\"clear\" (mousedown)=\"onOptionMouseDown()\" (click)=\"resetInput()\">\n    <i class=\"he he-close\"></i>\n  </label>\n  }\n\n  @if (isDropdownOpen) {\n  <div #dropdownElement class=\"option-list\" (scroll)=\"onListScroll($event)\">\n    @if (options.length === 0 && !isPageLoading) {\n    <div class=\"no-results\">\n      <div>No results found</div>\n    </div>\n    } @else {\n    @for (suggestion of options; track suggestion.id; let i = $index) {\n    <div class=\"list-item\" [ngClass]=\"{\n                'active': suggestion === selectedItems,\n                'highlighted': highlightedIndex === i\n              }\" (mousedown)=\"onOptionMouseDown()\" (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\n      {{ suggestion[optionDisplayProperty] }}\n    </div>\n    }\n\n    @if (isPageLoading) {\n    <div class=\"list-loading\">Loading...</div>\n    }\n\n    @if (paginationType === 'click' && hasMore && !isPageLoading) {\n    <div class=\"load-more\" (mousedown)=\"onOptionMouseDown()\" (click)=\"onLoadMoreClick($event)\">\n      Load more ({{ options.length }} of {{ totalCount }})\n    </div>\n    }\n    }\n  </div>\n  }\n\n  @if (inputLoader) {\n  <label class=\"loader input-loader\"></label>\n  }\n\n  @if (error) {\n  <div class=\"val-msg\">{{ errorMessage }}</div>\n  }\n</div>\n", styles: [".form-group.paginated-autocomplete .form-control{padding-right:unset}.form-group.paginated-autocomplete .clear{right:7px}.form-group.paginated-autocomplete .option-list{max-height:220px;overflow-y:auto}.form-group.paginated-autocomplete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.paginated-autocomplete .option-list .list-loading{padding:8px 10px;color:#9b9b9b;text-align:center;font-size:12px}.form-group.paginated-autocomplete .option-list .load-more{padding:8px 10px;text-align:center;cursor:pointer;color:#0d6efd;font-size:13px;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.paginated-autocomplete .option-list .load-more:hover{background-color:#f5f5f5}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], clearVal: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], inputLoader: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], optionDisplayProperty: [{
+                type: Input
+            }], paginationType: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], searchDebounce: [{
+                type: Input
+            }], totalCount: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }], optionSelected: [{
+                type: Output
+            }], selectionCleared: [{
+                type: Output
+            }], blurEvent: [{
+                type: Output
+            }], optionPatched: [{
+                type: Output
+            }], inputElement: [{
+                type: ViewChild,
+                args: ["inputElement"]
+            }], dropdownElement: [{
+                type: ViewChild,
+                args: ["dropdownElement"]
+            }] } });
+
 /**
  * A custom radio-button group.
  *
@@ -3750,5 +4159,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AutocompleteControl, CalendarControl, CheckboxControl, ColorPicker, InputControl, MultiselectControl, RadioControl, RichTextEditor, SelectControl, SwitchControl, TextareaControl };
+export { AutocompleteControl, CalendarControl, CheckboxControl, ColorPicker, InputControl, MultiselectControl, PaginatedAutocompleteControl, RadioControl, RichTextEditor, SelectControl, SwitchControl, TextareaControl };
 //# sourceMappingURL=nexheal-lib.mjs.map