nexheal-lib 0.0.11 → 0.0.13

package/fesm2022/nexheal-lib.mjs

@@ -28,28 +28,12 @@ class AutocompleteControl {
     addNewItemClicked = new EventEmitter();
     blurEvent = new EventEmitter();
     optionPatched = new EventEmitter();
-    loadAllOnOpen = false;
     readonly = false;
     _disabled = false;
     _options = [];
     set options(value) {
         this._options = value || [];
         this.processValueBuffer();
-        if (this.hasFocus && this.isDropdownOpen) {
-            const val = this.inputControl.value || "";
-            if (val === "" && this.loadAllOnOpen) {
-                this.filteredSuggestions = [...this._options];
-            }
-            else if (val !== "") {
-                const filterValue = val.toString().toLowerCase();
-                this.filteredSuggestions = this._options.filter((suggestion) => suggestion[this.optionDisplayProperty]?.toLowerCase().includes(filterValue));
-            }
-            this.highlightedIndex = this.filteredSuggestions.length > 0 ? 0 : null;
-            setTimeout(() => {
-                if (this.popperInstance)
-                    this.popperInstance.update();
-            }, 0);
-        }
     }
     get options() {
         return this._options;
@@ -96,13 +80,7 @@ class AutocompleteControl {
                 this.search.emit(filterValue);
             }
             else {
-                if (this.loadAllOnOpen && this.hasFocus) {
-                    this.filterSuggestions("");
-                    this.search.emit("");
-                }
-                else {
-                    this.isDropdownOpen = false;
-                }
+                this.isDropdownOpen = false;
             }
         });
     }
@@ -175,18 +153,8 @@ class AutocompleteControl {
             return;
         }
         if (value === "") {
-            if (this.loadAllOnOpen) {
-                this.filteredSuggestions = [...this.options];
-                this.highlightedIndex = this.filteredSuggestions.length > 0 ? 0 : null;
-                this.isDropdownOpen = true;
-                setTimeout(() => {
-                    this.createPopperInstance();
-                }, 0);
-            }
-            else {
-                this.filteredSuggestions = [];
-                this.isDropdownOpen = false;
-            }
+            this.filteredSuggestions = [];
+            this.isDropdownOpen = false;
             return;
         }
         const filterValue = value.toString().toLowerCase();
@@ -216,13 +184,6 @@ class AutocompleteControl {
     // events
     onFocus() {
         this.hasFocus = true;
-        if (this.readonly)
-            return;
-        if (this.loadAllOnOpen) {
-            const val = this.inputControl.value || "";
-            this.filterSuggestions(val);
-            this.search.emit(val);
-        }
     }
     onBlur() {
         this.blurEvent.emit();
@@ -343,7 +304,7 @@ class AutocompleteControl {
         this.optionSelected.emit(this.selectedItems);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AutocompleteControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AutocompleteControl, isStandalone: true, selector: "autocomplete-control", inputs: { title: "title", required: "required", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", field: "field", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", inputLoader: "inputLoader", isAddNewItem: "isAddNewItem", optionDisplayProperty: "optionDisplayProperty", loadAllOnOpen: "loadAllOnOpen", readonly: "readonly", options: "options", disabled: "disabled" }, outputs: { optionSelected: "optionSelected", search: "search", selectionCleared: "selectionCleared", addNewItemClicked: "addNewItemClicked", blurEvent: "blurEvent", optionPatched: "optionPatched" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AutocompleteControl, isStandalone: true, selector: "autocomplete-control", inputs: { title: "title", required: "required", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", field: "field", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", inputLoader: "inputLoader", isAddNewItem: "isAddNewItem", optionDisplayProperty: "optionDisplayProperty", readonly: "readonly", options: "options", disabled: "disabled" }, outputs: { optionSelected: "optionSelected", search: "search", selectionCleared: "selectionCleared", addNewItemClicked: "addNewItemClicked", blurEvent: "blurEvent", optionPatched: "optionPatched" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: AutocompleteControl,
@@ -396,8 +357,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                 type: Output
             }], optionPatched: [{
                 type: Output
-            }], loadAllOnOpen: [{
-                type: Input
             }], readonly: [{
                 type: Input
             }], options: [{
@@ -427,7 +386,21 @@ class CalendarControl {
     timeOnly = false;
     dateFormat = "dd/MM/yyyy";
     placeholder = "dd-mm-yyyy";
-    disabled = false;
+    _disabled = false;
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+        if (this.inputControl) {
+            if (value) {
+                this.inputControl.disable({ emitEvent: false });
+            }
+            else {
+                this.inputControl.enable({ emitEvent: false });
+            }
+        }
+    }
     readonly = false;
     submitted = false;
     inputPlaceholder = false;
@@ -1089,7 +1062,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\">\r\n  <label class=\"inp-label\" [ngClass]=\"{'required' : required}\" *ngIf=\"title\">{{ title }}</label>\r\n  <div class=\"form-group calendar\" #root  (click)=\"openCalendar()\" >\r\n    <input type=\"text\" #inputEl [placeholder]=\"(inputPlaceholder && placeholder) ? placeholder : ''\"\r\n      [formControl]=\"inputControl\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\"\r\n      (focus)=\"onFocus()\" [readonly]=\"readonly\" (click)=\"openCalendar(); $event.stopPropagation()\" (keydown)=\"onInputKeydown($event)\" />\r\n\r\n    <span class=\"focus-border\" *ngIf=\"deFocus\"></span>\r\n    <span class=\"calendar-icon\">\r\n      <i class=\"he\" [ngClass]=\"!timeOnly ? 'he-calendar-blank' : 'he-clock'\"></i>\r\n    </span>\r\n    <label class=\"clear\" *ngIf=\"!inputLoader && (selectedDate && !disabled && !readonly) && clearVal\" (click)=\"clearDate($event)\">\r\n      <i class=\"he he-close\"></i>\r\n    </label>\r\n    <label *ngIf=\"inputLoader\" class=\"loader input-loader\"></label>\r\n    <div *ngIf=\"error\" class=\"val-msg\">{{ errorMessage }}</div>\r\n\r\n    <div class=\"datepicker-group\" #datePicker *ngIf=\"isOpen\" (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()\"><i 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()\"><i 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()\"><i class=\"he he-chevron-up\"></i></button>\r\n            <div class=\"time-value\">{{ selectedMinute | number:'2.0' }}</div>\r\n            <button (click)=\"decrementMinute()\"><i 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\">\r\n          <div class=\"day-cell\" *ngFor=\"let day of daysInMonth\" (click)=\"selectDay(day)\"\r\n            [class.disabled]=\"day !== null && dayClassMap[day].disabled\"\r\n            [class.selected]=\"day !== null && dayClassMap[day].selected\" [class.today]=\"\r\n                      day !== null &&\r\n                      displayYear === todayYear   &&\r\n                      displayMonth === todayMonth &&\r\n                      day === todayDate\r\n                    \">\r\n            {{day ? day : ''}}\r\n          </div>\r\n        </div>\r\n        <ng-container *ngIf=\"showTime\">\r\n          <div class=\"time-picker\">\r\n            <div class=\"time-select\">\r\n              <button type=\"button\" (click)=\"incrementHour()\">\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()\">\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()\">\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()\">\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\">\r\n          <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear - 1\"><i\r\n              class=\"he he-chevron-left\"></i></button>\r\n          <div class=\"title\" (click)=\"goToYearRangeView()\">{{ displayYear }}</div>\r\n          <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear + 1\"><i\r\n              class=\"he he-chevron-right\"></i></button>\r\n        </div>\r\n        <div class=\"month-grid\">\r\n          <div class=\"month-cell\" *ngFor=\"let m of months; index as i\" (click)=\"selectMonth(i)\">{{ m }}\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- year range view -->\r\n      <ng-container *ngIf=\"!timeOnly && currentView === 'yearRange'\">\r\n        <div class=\"header\">\r\n          <button class=\"calendar-arrow\" (click)=\"prevYearRange()\"><i class=\"he he-chevron-left\"></i></button>\r\n          <div class=\"title\">{{ yearRange[0] }} ~ {{ yearRange[yearRangeSize-1] }}</div>\r\n          <button class=\"calendar-arrow\" (click)=\"nextYearRange()\"><i class=\"he he-chevron-right\"></i></button>\r\n        </div>\r\n        <div class=\"year-grid\">\r\n          <div class=\"year-cell\" *ngFor=\"let y of yearRange\" (click)=\"selectYear(y)\">{{ y }}</div>\r\n        </div>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </div>\r\n</div>", styles: [".form-group.calendar{position:relative}.form-group.calendar .clear{top:9px;right:34px}.form-group.calendar .datepicker-group{left:0;width:100%;z-index:1000;padding:.5rem;color:#495057;min-width:240px;border-radius:3px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.calendar .datepicker-group .header{display:flex;font-weight:600;padding:5px;align-items:center;justify-content:space-between;border-bottom:1px solid #dee2e6}.form-group.calendar .datepicker-group .header .title{gap:8px;display:flex;font-size:15px;cursor:pointer;font-weight:600}.form-group.calendar .datepicker-group .header .calendar-arrow{width:28px;height:28px;border:none;line-height:1;cursor:pointer;background:none}.form-group.calendar .datepicker-group .header .calendar-arrow i{font-size:14px}.form-group.calendar .datepicker-group .header .calendar-arrow:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .week-header{display:grid;padding:8px 0;font-size:13px;font-weight:700;text-align:center;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid,.form-group.calendar .datepicker-group .month-grid,.form-group.calendar .datepicker-group .year-grid{gap:3px;padding:5px;display:grid;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{display:flex;font-size:14px;cursor:pointer;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .days-grid .day-cell.today,.form-group.calendar .datepicker-group .days-grid .month-cell.today,.form-group.calendar .datepicker-group .days-grid .year-cell.today,.form-group.calendar .datepicker-group .month-grid .day-cell.today,.form-group.calendar .datepicker-group .month-grid .month-cell.today,.form-group.calendar .datepicker-group .month-grid .year-cell.today,.form-group.calendar .datepicker-group .year-grid .day-cell.today,.form-group.calendar .datepicker-group .year-grid .month-cell.today,.form-group.calendar .datepicker-group .year-grid .year-cell.today{color:#37c0b3;font-weight:700;border:1px solid #37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.selected,.form-group.calendar .datepicker-group .days-grid .day-cell:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.selected,.form-group.calendar .datepicker-group .days-grid .month-cell:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.selected,.form-group.calendar .datepicker-group .days-grid .year-cell:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.selected,.form-group.calendar .datepicker-group .month-grid .day-cell:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.selected,.form-group.calendar .datepicker-group .month-grid .month-cell:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.selected,.form-group.calendar .datepicker-group .month-grid .year-cell:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.selected,.form-group.calendar .datepicker-group .year-grid .day-cell:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.selected,.form-group.calendar .datepicker-group .year-grid .month-cell:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.selected,.form-group.calendar .datepicker-group .year-grid .year-cell:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled{color:#e0e0e0;background:none;-webkit-user-select:none;user-select:none;cursor:not-allowed}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today{color:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled:hover{color:#e0e0e0;background:transparent}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .day-cell{padding:5px 2px;border-radius:50%}.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{padding:8px 2px;border-radius:3px}.form-group.calendar .datepicker-group .month-grid{grid-template-columns:repeat(3,1fr)}.form-group.calendar .datepicker-group .year-grid{grid-template-columns:repeat(4,1fr)}.form-group.calendar .datepicker-group .time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle{gap:6px;display:flex;margin-left:1rem;flex-direction:column;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button{cursor:pointer;padding:3px 8px;font-size:.75rem;background:#fff;border:1px solid #cccccc}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button.active{color:#fff;border-color:#37c0b3;background-color:#37c0b3}.form-group.calendar .datepicker-group .time-picker .time-select{display:flex;margin:0 .75rem;align-items:center;flex-direction:column}.form-group.calendar .datepicker-group .time-picker .time-select button{border:none;cursor:pointer;padding:4px 8px;background:transparent}.form-group.calendar .datepicker-group .time-picker .time-select button i{font-size:1rem}.form-group.calendar .datepicker-group .time-picker .time-select button:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .time-picker .time-select .time-value{width:2rem;font-size:1rem;text-align:center;margin:2px 3px 4px}.form-group.calendar .datepicker-group .time-picker .time-separator{line-height:1;font-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] });
+        ], viewQueries: [{ propertyName: "rootElement", first: true, predicate: ["root"], descendants: true, static: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, static: true }, { propertyName: "datePickerEl", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<div class=\"form-group calendar\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" [class.disabled]=\"disabled\">\r\n  <label class=\"inp-label\" [ngClass]=\"{'required' : required}\" *ngIf=\"title\">{{ title }}</label>\r\n  <div class=\"form-group calendar\" #root  (click)=\"openCalendar()\" >\r\n    <input type=\"text\" #inputEl [placeholder]=\"(inputPlaceholder && placeholder) ? placeholder : ''\"\r\n      [formControl]=\"inputControl\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\"\r\n      (focus)=\"onFocus()\" [readonly]=\"readonly\" (click)=\"openCalendar(); $event.stopPropagation()\" (keydown)=\"onInputKeydown($event)\" />\r\n\r\n    <span class=\"focus-border\" *ngIf=\"deFocus\"></span>\r\n    <span class=\"calendar-icon\">\r\n      <i class=\"he\" [ngClass]=\"!timeOnly ? 'he-calendar-blank' : 'he-clock'\"></i>\r\n    </span>\r\n    <label class=\"clear\" *ngIf=\"!inputLoader && (selectedDate && !disabled && !readonly) && clearVal\" (click)=\"clearDate($event)\">\r\n      <i class=\"he he-close\"></i>\r\n    </label>\r\n    <label *ngIf=\"inputLoader\" class=\"loader input-loader\"></label>\r\n    <div *ngIf=\"error\" class=\"val-msg\">{{ errorMessage }}</div>\r\n\r\n    <div class=\"datepicker-group\" #datePicker *ngIf=\"isOpen\" (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()\"><i 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()\"><i 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()\"><i class=\"he he-chevron-up\"></i></button>\r\n            <div class=\"time-value\">{{ selectedMinute | number:'2.0' }}</div>\r\n            <button (click)=\"decrementMinute()\"><i 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\">\r\n          <div class=\"day-cell\" *ngFor=\"let day of daysInMonth\" (click)=\"selectDay(day)\"\r\n            [class.disabled]=\"day !== null && dayClassMap[day].disabled\"\r\n            [class.selected]=\"day !== null && dayClassMap[day].selected\" [class.today]=\"\r\n                      day !== null &&\r\n                      displayYear === todayYear   &&\r\n                      displayMonth === todayMonth &&\r\n                      day === todayDate\r\n                    \">\r\n            {{day ? day : ''}}\r\n          </div>\r\n        </div>\r\n        <ng-container *ngIf=\"showTime\">\r\n          <div class=\"time-picker\">\r\n            <div class=\"time-select\">\r\n              <button type=\"button\" (click)=\"incrementHour()\">\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()\">\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()\">\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()\">\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\">\r\n          <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear - 1\"><i\r\n              class=\"he he-chevron-left\"></i></button>\r\n          <div class=\"title\" (click)=\"goToYearRangeView()\">{{ displayYear }}</div>\r\n          <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear + 1\"><i\r\n              class=\"he he-chevron-right\"></i></button>\r\n        </div>\r\n        <div class=\"month-grid\">\r\n          <div class=\"month-cell\" *ngFor=\"let m of months; index as i\" (click)=\"selectMonth(i)\">{{ m }}\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- year range view -->\r\n      <ng-container *ngIf=\"!timeOnly && currentView === 'yearRange'\">\r\n        <div class=\"header\">\r\n          <button class=\"calendar-arrow\" (click)=\"prevYearRange()\"><i class=\"he he-chevron-left\"></i></button>\r\n          <div class=\"title\">{{ yearRange[0] }} ~ {{ yearRange[yearRangeSize-1] }}</div>\r\n          <button class=\"calendar-arrow\" (click)=\"nextYearRange()\"><i class=\"he he-chevron-right\"></i></button>\r\n        </div>\r\n        <div class=\"year-grid\">\r\n          <div class=\"year-cell\" *ngFor=\"let y of yearRange\" (click)=\"selectYear(y)\">{{ y }}</div>\r\n        </div>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </div>\r\n</div>", styles: [".form-group.calendar{position:relative}.form-group.calendar .clear{top:9px;right:34px}.form-group.calendar .datepicker-group{left:0;width:100%;z-index:1000;padding:.5rem;color:#495057;min-width:240px;border-radius:3px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.calendar .datepicker-group .header{display:flex;font-weight:600;padding:5px;align-items:center;justify-content:space-between;border-bottom:1px solid #dee2e6}.form-group.calendar .datepicker-group .header .title{gap:8px;display:flex;font-size:15px;cursor:pointer;font-weight:600}.form-group.calendar .datepicker-group .header .calendar-arrow{width:28px;height:28px;border:none;line-height:1;cursor:pointer;background:none}.form-group.calendar .datepicker-group .header .calendar-arrow i{font-size:14px}.form-group.calendar .datepicker-group .header .calendar-arrow:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .week-header{display:grid;padding:8px 0;font-size:13px;font-weight:700;text-align:center;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid,.form-group.calendar .datepicker-group .month-grid,.form-group.calendar .datepicker-group .year-grid{gap:3px;padding:5px;display:grid;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{display:flex;font-size:14px;cursor:pointer;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .days-grid .day-cell.today,.form-group.calendar .datepicker-group .days-grid .month-cell.today,.form-group.calendar .datepicker-group .days-grid .year-cell.today,.form-group.calendar .datepicker-group .month-grid .day-cell.today,.form-group.calendar .datepicker-group .month-grid .month-cell.today,.form-group.calendar .datepicker-group .month-grid .year-cell.today,.form-group.calendar .datepicker-group .year-grid .day-cell.today,.form-group.calendar .datepicker-group .year-grid .month-cell.today,.form-group.calendar .datepicker-group .year-grid .year-cell.today{color:#37c0b3;font-weight:700;border:1px solid #37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.selected,.form-group.calendar .datepicker-group .days-grid .day-cell:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.selected,.form-group.calendar .datepicker-group .days-grid .month-cell:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.selected,.form-group.calendar .datepicker-group .days-grid .year-cell:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.selected,.form-group.calendar .datepicker-group .month-grid .day-cell:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.selected,.form-group.calendar .datepicker-group .month-grid .month-cell:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.selected,.form-group.calendar .datepicker-group .month-grid .year-cell:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.selected,.form-group.calendar .datepicker-group .year-grid .day-cell:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.selected,.form-group.calendar .datepicker-group .year-grid .month-cell:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.selected,.form-group.calendar .datepicker-group .year-grid .year-cell:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled{color:#e0e0e0;background:none;-webkit-user-select:none;user-select:none;cursor:not-allowed}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today{color:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled:hover{color:#e0e0e0;background:transparent}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .day-cell{padding:5px 2px;border-radius:50%}.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{padding:8px 2px;border-radius:3px}.form-group.calendar .datepicker-group .month-grid{grid-template-columns:repeat(3,1fr)}.form-group.calendar .datepicker-group .year-grid{grid-template-columns:repeat(4,1fr)}.form-group.calendar .datepicker-group .time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle{gap:6px;display:flex;margin-left:1rem;flex-direction:column;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button{cursor:pointer;padding:3px 8px;font-size:.75rem;background:#fff;border:1px solid #cccccc}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button.active{color:#fff;border-color:#37c0b3;background-color:#37c0b3}.form-group.calendar .datepicker-group .time-picker .time-select{display:flex;margin:0 .75rem;align-items:center;flex-direction:column}.form-group.calendar .datepicker-group .time-picker .time-select button{border:none;cursor:pointer;padding:4px 8px;background:transparent}.form-group.calendar .datepicker-group .time-picker .time-select button i{font-size:1rem}.form-group.calendar .datepicker-group .time-picker .time-select button:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .time-picker .time-select .time-value{width:2rem;font-size:1rem;text-align:center;margin:2px 3px 4px}.form-group.calendar .datepicker-group .time-picker .time-separator{line-height:1;font-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CalendarControl, decorators: [{
             type: Component,
@@ -1104,7 +1077,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                             useExisting: forwardRef(() => CalendarControl),
                             multi: true,
                         },
-                    ], template: "<div class=\"form-group calendar\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\r\n  <label class=\"inp-label\" [ngClass]=\"{'required' : required}\" *ngIf=\"title\">{{ title }}</label>\r\n  <div class=\"form-group calendar\" #root  (click)=\"openCalendar()\" >\r\n    <input type=\"text\" #inputEl [placeholder]=\"(inputPlaceholder && placeholder) ? placeholder : ''\"\r\n      [formControl]=\"inputControl\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\"\r\n      (focus)=\"onFocus()\" [readonly]=\"readonly\" (click)=\"openCalendar(); $event.stopPropagation()\" (keydown)=\"onInputKeydown($event)\" />\r\n\r\n    <span class=\"focus-border\" *ngIf=\"deFocus\"></span>\r\n    <span class=\"calendar-icon\">\r\n      <i class=\"he\" [ngClass]=\"!timeOnly ? 'he-calendar-blank' : 'he-clock'\"></i>\r\n    </span>\r\n    <label class=\"clear\" *ngIf=\"!inputLoader && (selectedDate && !disabled && !readonly) && clearVal\" (click)=\"clearDate($event)\">\r\n      <i class=\"he he-close\"></i>\r\n    </label>\r\n    <label *ngIf=\"inputLoader\" class=\"loader input-loader\"></label>\r\n    <div *ngIf=\"error\" class=\"val-msg\">{{ errorMessage }}</div>\r\n\r\n    <div class=\"datepicker-group\" #datePicker *ngIf=\"isOpen\" (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()\"><i 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()\"><i 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()\"><i class=\"he he-chevron-up\"></i></button>\r\n            <div class=\"time-value\">{{ selectedMinute | number:'2.0' }}</div>\r\n            <button (click)=\"decrementMinute()\"><i 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\">\r\n          <div class=\"day-cell\" *ngFor=\"let day of daysInMonth\" (click)=\"selectDay(day)\"\r\n            [class.disabled]=\"day !== null && dayClassMap[day].disabled\"\r\n            [class.selected]=\"day !== null && dayClassMap[day].selected\" [class.today]=\"\r\n                      day !== null &&\r\n                      displayYear === todayYear   &&\r\n                      displayMonth === todayMonth &&\r\n                      day === todayDate\r\n                    \">\r\n            {{day ? day : ''}}\r\n          </div>\r\n        </div>\r\n        <ng-container *ngIf=\"showTime\">\r\n          <div class=\"time-picker\">\r\n            <div class=\"time-select\">\r\n              <button type=\"button\" (click)=\"incrementHour()\">\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()\">\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()\">\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()\">\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\">\r\n          <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear - 1\"><i\r\n              class=\"he he-chevron-left\"></i></button>\r\n          <div class=\"title\" (click)=\"goToYearRangeView()\">{{ displayYear }}</div>\r\n          <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear + 1\"><i\r\n              class=\"he he-chevron-right\"></i></button>\r\n        </div>\r\n        <div class=\"month-grid\">\r\n          <div class=\"month-cell\" *ngFor=\"let m of months; index as i\" (click)=\"selectMonth(i)\">{{ m }}\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- year range view -->\r\n      <ng-container *ngIf=\"!timeOnly && currentView === 'yearRange'\">\r\n        <div class=\"header\">\r\n          <button class=\"calendar-arrow\" (click)=\"prevYearRange()\"><i class=\"he he-chevron-left\"></i></button>\r\n          <div class=\"title\">{{ yearRange[0] }} ~ {{ yearRange[yearRangeSize-1] }}</div>\r\n          <button class=\"calendar-arrow\" (click)=\"nextYearRange()\"><i class=\"he he-chevron-right\"></i></button>\r\n        </div>\r\n        <div class=\"year-grid\">\r\n          <div class=\"year-cell\" *ngFor=\"let y of yearRange\" (click)=\"selectYear(y)\">{{ y }}</div>\r\n        </div>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </div>\r\n</div>", styles: [".form-group.calendar{position:relative}.form-group.calendar .clear{top:9px;right:34px}.form-group.calendar .datepicker-group{left:0;width:100%;z-index:1000;padding:.5rem;color:#495057;min-width:240px;border-radius:3px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.calendar .datepicker-group .header{display:flex;font-weight:600;padding:5px;align-items:center;justify-content:space-between;border-bottom:1px solid #dee2e6}.form-group.calendar .datepicker-group .header .title{gap:8px;display:flex;font-size:15px;cursor:pointer;font-weight:600}.form-group.calendar .datepicker-group .header .calendar-arrow{width:28px;height:28px;border:none;line-height:1;cursor:pointer;background:none}.form-group.calendar .datepicker-group .header .calendar-arrow i{font-size:14px}.form-group.calendar .datepicker-group .header .calendar-arrow:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .week-header{display:grid;padding:8px 0;font-size:13px;font-weight:700;text-align:center;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid,.form-group.calendar .datepicker-group .month-grid,.form-group.calendar .datepicker-group .year-grid{gap:3px;padding:5px;display:grid;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{display:flex;font-size:14px;cursor:pointer;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .days-grid .day-cell.today,.form-group.calendar .datepicker-group .days-grid .month-cell.today,.form-group.calendar .datepicker-group .days-grid .year-cell.today,.form-group.calendar .datepicker-group .month-grid .day-cell.today,.form-group.calendar .datepicker-group .month-grid .month-cell.today,.form-group.calendar .datepicker-group .month-grid .year-cell.today,.form-group.calendar .datepicker-group .year-grid .day-cell.today,.form-group.calendar .datepicker-group .year-grid .month-cell.today,.form-group.calendar .datepicker-group .year-grid .year-cell.today{color:#37c0b3;font-weight:700;border:1px solid #37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.selected,.form-group.calendar .datepicker-group .days-grid .day-cell:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.selected,.form-group.calendar .datepicker-group .days-grid .month-cell:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.selected,.form-group.calendar .datepicker-group .days-grid .year-cell:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.selected,.form-group.calendar .datepicker-group .month-grid .day-cell:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.selected,.form-group.calendar .datepicker-group .month-grid .month-cell:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.selected,.form-group.calendar .datepicker-group .month-grid .year-cell:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.selected,.form-group.calendar .datepicker-group .year-grid .day-cell:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.selected,.form-group.calendar .datepicker-group .year-grid .month-cell:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.selected,.form-group.calendar .datepicker-group .year-grid .year-cell:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled{color:#e0e0e0;background:none;-webkit-user-select:none;user-select:none;cursor:not-allowed}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today{color:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled:hover{color:#e0e0e0;background:transparent}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .day-cell{padding:5px 2px;border-radius:50%}.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{padding:8px 2px;border-radius:3px}.form-group.calendar .datepicker-group .month-grid{grid-template-columns:repeat(3,1fr)}.form-group.calendar .datepicker-group .year-grid{grid-template-columns:repeat(4,1fr)}.form-group.calendar .datepicker-group .time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle{gap:6px;display:flex;margin-left:1rem;flex-direction:column;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button{cursor:pointer;padding:3px 8px;font-size:.75rem;background:#fff;border:1px solid #cccccc}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button.active{color:#fff;border-color:#37c0b3;background-color:#37c0b3}.form-group.calendar .datepicker-group .time-picker .time-select{display:flex;margin:0 .75rem;align-items:center;flex-direction:column}.form-group.calendar .datepicker-group .time-picker .time-select button{border:none;cursor:pointer;padding:4px 8px;background:transparent}.form-group.calendar .datepicker-group .time-picker .time-select button i{font-size:1rem}.form-group.calendar .datepicker-group .time-picker .time-select button:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .time-picker .time-select .time-value{width:2rem;font-size:1rem;text-align:center;margin:2px 3px 4px}.form-group.calendar .datepicker-group .time-picker .time-separator{line-height:1;font-size:1rem}\n"] }]
+                    ], template: "<div class=\"form-group calendar\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" [class.disabled]=\"disabled\">\r\n  <label class=\"inp-label\" [ngClass]=\"{'required' : required}\" *ngIf=\"title\">{{ title }}</label>\r\n  <div class=\"form-group calendar\" #root  (click)=\"openCalendar()\" >\r\n    <input type=\"text\" #inputEl [placeholder]=\"(inputPlaceholder && placeholder) ? placeholder : ''\"\r\n      [formControl]=\"inputControl\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\"\r\n      (focus)=\"onFocus()\" [readonly]=\"readonly\" (click)=\"openCalendar(); $event.stopPropagation()\" (keydown)=\"onInputKeydown($event)\" />\r\n\r\n    <span class=\"focus-border\" *ngIf=\"deFocus\"></span>\r\n    <span class=\"calendar-icon\">\r\n      <i class=\"he\" [ngClass]=\"!timeOnly ? 'he-calendar-blank' : 'he-clock'\"></i>\r\n    </span>\r\n    <label class=\"clear\" *ngIf=\"!inputLoader && (selectedDate && !disabled && !readonly) && clearVal\" (click)=\"clearDate($event)\">\r\n      <i class=\"he he-close\"></i>\r\n    </label>\r\n    <label *ngIf=\"inputLoader\" class=\"loader input-loader\"></label>\r\n    <div *ngIf=\"error\" class=\"val-msg\">{{ errorMessage }}</div>\r\n\r\n    <div class=\"datepicker-group\" #datePicker *ngIf=\"isOpen\" (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()\"><i 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()\"><i 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()\"><i class=\"he he-chevron-up\"></i></button>\r\n            <div class=\"time-value\">{{ selectedMinute | number:'2.0' }}</div>\r\n            <button (click)=\"decrementMinute()\"><i 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\">\r\n          <div class=\"day-cell\" *ngFor=\"let day of daysInMonth\" (click)=\"selectDay(day)\"\r\n            [class.disabled]=\"day !== null && dayClassMap[day].disabled\"\r\n            [class.selected]=\"day !== null && dayClassMap[day].selected\" [class.today]=\"\r\n                      day !== null &&\r\n                      displayYear === todayYear   &&\r\n                      displayMonth === todayMonth &&\r\n                      day === todayDate\r\n                    \">\r\n            {{day ? day : ''}}\r\n          </div>\r\n        </div>\r\n        <ng-container *ngIf=\"showTime\">\r\n          <div class=\"time-picker\">\r\n            <div class=\"time-select\">\r\n              <button type=\"button\" (click)=\"incrementHour()\">\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()\">\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()\">\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()\">\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\">\r\n          <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear - 1\"><i\r\n              class=\"he he-chevron-left\"></i></button>\r\n          <div class=\"title\" (click)=\"goToYearRangeView()\">{{ displayYear }}</div>\r\n          <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear + 1\"><i\r\n              class=\"he he-chevron-right\"></i></button>\r\n        </div>\r\n        <div class=\"month-grid\">\r\n          <div class=\"month-cell\" *ngFor=\"let m of months; index as i\" (click)=\"selectMonth(i)\">{{ m }}\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- year range view -->\r\n      <ng-container *ngIf=\"!timeOnly && currentView === 'yearRange'\">\r\n        <div class=\"header\">\r\n          <button class=\"calendar-arrow\" (click)=\"prevYearRange()\"><i class=\"he he-chevron-left\"></i></button>\r\n          <div class=\"title\">{{ yearRange[0] }} ~ {{ yearRange[yearRangeSize-1] }}</div>\r\n          <button class=\"calendar-arrow\" (click)=\"nextYearRange()\"><i class=\"he he-chevron-right\"></i></button>\r\n        </div>\r\n        <div class=\"year-grid\">\r\n          <div class=\"year-cell\" *ngFor=\"let y of yearRange\" (click)=\"selectYear(y)\">{{ y }}</div>\r\n        </div>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </div>\r\n</div>", styles: [".form-group.calendar{position:relative}.form-group.calendar .clear{top:9px;right:34px}.form-group.calendar .datepicker-group{left:0;width:100%;z-index:1000;padding:.5rem;color:#495057;min-width:240px;border-radius:3px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.calendar .datepicker-group .header{display:flex;font-weight:600;padding:5px;align-items:center;justify-content:space-between;border-bottom:1px solid #dee2e6}.form-group.calendar .datepicker-group .header .title{gap:8px;display:flex;font-size:15px;cursor:pointer;font-weight:600}.form-group.calendar .datepicker-group .header .calendar-arrow{width:28px;height:28px;border:none;line-height:1;cursor:pointer;background:none}.form-group.calendar .datepicker-group .header .calendar-arrow i{font-size:14px}.form-group.calendar .datepicker-group .header .calendar-arrow:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .week-header{display:grid;padding:8px 0;font-size:13px;font-weight:700;text-align:center;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid,.form-group.calendar .datepicker-group .month-grid,.form-group.calendar .datepicker-group .year-grid{gap:3px;padding:5px;display:grid;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{display:flex;font-size:14px;cursor:pointer;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .days-grid .day-cell.today,.form-group.calendar .datepicker-group .days-grid .month-cell.today,.form-group.calendar .datepicker-group .days-grid .year-cell.today,.form-group.calendar .datepicker-group .month-grid .day-cell.today,.form-group.calendar .datepicker-group .month-grid .month-cell.today,.form-group.calendar .datepicker-group .month-grid .year-cell.today,.form-group.calendar .datepicker-group .year-grid .day-cell.today,.form-group.calendar .datepicker-group .year-grid .month-cell.today,.form-group.calendar .datepicker-group .year-grid .year-cell.today{color:#37c0b3;font-weight:700;border:1px solid #37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.selected,.form-group.calendar .datepicker-group .days-grid .day-cell:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.selected,.form-group.calendar .datepicker-group .days-grid .month-cell:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.selected,.form-group.calendar .datepicker-group .days-grid .year-cell:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.selected,.form-group.calendar .datepicker-group .month-grid .day-cell:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.selected,.form-group.calendar .datepicker-group .month-grid .month-cell:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.selected,.form-group.calendar .datepicker-group .month-grid .year-cell:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.selected,.form-group.calendar .datepicker-group .year-grid .day-cell:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.selected,.form-group.calendar .datepicker-group .year-grid .month-cell:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.selected,.form-group.calendar .datepicker-group .year-grid .year-cell:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled{color:#e0e0e0;background:none;-webkit-user-select:none;user-select:none;cursor:not-allowed}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today{color:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled:hover{color:#e0e0e0;background:transparent}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .day-cell{padding:5px 2px;border-radius:50%}.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{padding:8px 2px;border-radius:3px}.form-group.calendar .datepicker-group .month-grid{grid-template-columns:repeat(3,1fr)}.form-group.calendar .datepicker-group .year-grid{grid-template-columns:repeat(4,1fr)}.form-group.calendar .datepicker-group .time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle{gap:6px;display:flex;margin-left:1rem;flex-direction:column;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button{cursor:pointer;padding:3px 8px;font-size:.75rem;background:#fff;border:1px solid #cccccc}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button.active{color:#fff;border-color:#37c0b3;background-color:#37c0b3}.form-group.calendar .datepicker-group .time-picker .time-select{display:flex;margin:0 .75rem;align-items:center;flex-direction:column}.form-group.calendar .datepicker-group .time-picker .time-select button{border:none;cursor:pointer;padding:4px 8px;background:transparent}.form-group.calendar .datepicker-group .time-picker .time-select button i{font-size:1rem}.form-group.calendar .datepicker-group .time-picker .time-select button:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .time-picker .time-select .time-value{width:2rem;font-size:1rem;text-align:center;margin:2px 3px 4px}.form-group.calendar .datepicker-group .time-picker .time-separator{line-height:1;font-size:1rem}\n"] }]
         }], ctorParameters: () => [{ type: i1.DatePipe }], propDecorators: { title: [{
                 type: Input
             }], required: [{
@@ -2499,24 +2472,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                 args: ['switchContainer']
             }] } });
 
+/**
+ * Lightweight rich-text editor built on a `contenteditable` element and the
+ * browser's `document.execCommand` rich-editing API (the de-facto standard for
+ * simple in-browser editors).
+ *
+ * Implemented as a `ControlValueAccessor`, so it works with `[(ngModel)]`,
+ * `formControlName` and `[formControl]`. The emitted value is the editor's
+ * inner HTML string.
+ */
 class TextEditor {
     header = true;
     media = true;
     link = true;
     placeholder = 'Type here...';
     readonly = false;
+    /** Disabled state, set by Reactive Forms through `setDisabledState`. */
+    disabled = false;
     editorRef;
     onChange = () => { };
     onTouch = () => { };
-    undoStack = [];
-    redoStack = [];
-    ngOnInit() { }
+    /** HTML received via `writeValue` before the view (and `editorRef`) is ready. */
+    pendingValue = '';
+    viewInitialized = false;
+    /** Last selection range observed inside the editor (restored before commands). */
+    savedRange = null;
     ngAfterViewInit() {
-        this.saveState();
+        this.viewInitialized = true;
+        this.editorRef.nativeElement.innerHTML = this.pendingValue;
     }
+    // ---- ControlValueAccessor ----
     writeValue(value) {
-        this.editorRef.nativeElement.innerHTML = value || '';
-        this.saveState();
+        this.pendingValue = value ?? '';
+        if (this.viewInitialized && this.editorRef) {
+            this.editorRef.nativeElement.innerHTML = this.pendingValue;
+        }
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -2524,256 +2514,126 @@ class TextEditor {
     registerOnTouched(fn) {
         this.onTouch = fn;
     }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    // ---- Editor events (wired from the template) ----
     onInput() {
-        const html = this.editorRef.nativeElement.innerHTML;
-        this.onChange(html);
-        this.saveState();
+        this.onChange(this.editorRef.nativeElement.innerHTML);
     }
-    // events
     onTouched() {
         this.onTouch();
     }
-    setDisabledState(isDisabled) {
-        this.editorRef.nativeElement.contentEditable = (!isDisabled).toString();
-    }
-    // ---- Selection & Range Utilities ----
-    getSelectionRange() {
+    /** Remember the caret/selection whenever it sits inside the editor. */
+    saveSelection() {
         const selection = window.getSelection();
-        if (selection && selection.rangeCount > 0) {
-            return selection.getRangeAt(0);
-        }
-        return null;
-    }
-    wrapSelection(htmlTag, style) {
-        const range = this.getSelectionRange();
-        if (!range || range.collapsed)
-            return; // no selection
-        const selectedText = range.extractContents();
-        const el = document.createElement(htmlTag);
-        if (style) {
-            el.setAttribute('style', style);
-        }
-        el.appendChild(selectedText);
-        range.insertNode(el);
-        this.mergeAdjacentSimilarElements(el);
-        this.onInput();
-    }
-    // Merges adjacent spans with the same style to avoid clutter
-    mergeAdjacentSimilarElements(el) {
-        const parent = el.parentElement;
-        if (!parent)
+        if (!selection || selection.rangeCount === 0 || !this.editorRef)
             return;
-        const siblings = Array.from(parent.childNodes);
-        for (let i = 0; i < siblings.length - 1; i++) {
-            const current = siblings[i];
-            const next = siblings[i + 1];
-            if (current.nodeType === 1 && next?.nodeType === 1) {
-                if (current.tagName === next.tagName && current.getAttribute('style') === next.getAttribute('style')) {
-                    // merge them
-                    while (next.firstChild) {
-                        current.appendChild(next.firstChild);
-                    }
-                    next.remove();
-                }
-            }
+        const range = selection.getRangeAt(0);
+        if (this.editorRef.nativeElement.contains(range.commonAncestorContainer)) {
+            this.savedRange = range.cloneRange();
         }
     }
-    // ---- Inline Formatting ----
-    // applyInlineStyle() toggles inline styles by wrapping selection in a styled span
-    applyInlineStyle(styleType) {
-        let style = '';
-        if (styleType === 'bold')
-            style = 'font-weight:bold;';
-        else if (styleType === 'italic')
-            style = 'font-style:italic;';
-        else if (styleType === 'underline')
-            style = 'text-decoration:underline;';
-        this.wrapSelection('span', style);
+    // ---- Inline formatting ----
+    applyInlineStyle(style) {
+        this.exec(style);
     }
-    applyColor(event) {
-        const input = event.target;
-        const color = input.value;
-        // Now `color` is a string and `input` is never null
-        this.wrapSelection('span', `color:${color};`);
+    // ---- Block formatting (headings / paragraph) ----
+    applyBlockFormat(block) {
+        this.exec('formatBlock', `<${block}>`);
     }
-    applyHighlight(event) {
-        const input = event.target;
-        const color = input.value;
-        this.wrapSelection('span', `background-color:${color};`);
-    }
-    // ---- Block Formatting (Headings, Paragraph) ----
-    // Replaces the parent block element containing selection with a new block type
-    applyBlockFormat(blockTag) {
-        const range = this.getSelectionRange();
-        if (!range)
-            return;
-        // Find the nearest block element
-        let block = this.findBlockAncestor(range.commonAncestorContainer);
-        if (!block) {
-            // If no block found, wrap the selection in a block
-            const wrapper = document.createElement(blockTag);
-            wrapper.appendChild(range.extractContents());
-            range.insertNode(wrapper);
-        }
-        else {
-            // Replace the block with a new block type
-            const newBlock = document.createElement(blockTag);
-            // Move children
-            while (block.firstChild) {
-                newBlock.appendChild(block.firstChild);
-            }
-            block.replaceWith(newBlock);
-        }
-        this.onInput();
+    // ---- Lists ----
+    applyList(listType) {
+        this.exec(listType === 'ul' ? 'insertUnorderedList' : 'insertOrderedList');
     }
-    findBlockAncestor(node) {
-        while (node && node !== this.editorRef.nativeElement) {
-            if (this.isBlockElement(node)) {
-                return node;
-            }
-            node = node.parentNode;
-        }
-        return null;
+    // ---- Indentation ----
+    indent() {
+        this.exec('indent');
     }
-    isBlockElement(node) {
-        if (node.nodeType !== 1)
-            return false;
-        const display = window.getComputedStyle(node).display;
-        return display === 'block' || display === 'list-item';
+    outdent() {
+        this.exec('outdent');
     }
-    // ---- Lists ----
-    // Convert selected lines into a list
-    applyList(listType) {
-        const range = this.getSelectionRange();
-        if (!range)
-            return;
-        const commonBlock = this.findBlockAncestor(range.commonAncestorContainer);
-        // Get the text in the selection
-        const content = range.extractContents();
-        const lines = this.splitContentByLine(content);
-        const listEl = document.createElement(listType);
-        for (const line of lines) {
-            const li = document.createElement('li');
-            li.appendChild(line);
-            listEl.appendChild(li);
-        }
-        if (commonBlock) {
-            // Insert the list right where the block was or at the selection
-            range.insertNode(listEl);
-        }
-        else {
-            // If no common block, just insert at current position
-            range.insertNode(listEl);
-        }
-        this.onInput();
+    // ---- Alignment ----
+    setAlignment(alignment) {
+        const command = {
+            left: 'justifyLeft',
+            center: 'justifyCenter',
+            right: 'justifyRight',
+            justify: 'justifyFull',
+        }[alignment];
+        this.exec(command);
+    }
+    // ---- Color / highlight ----
+    applyColor(event) {
+        this.exec('foreColor', event.target.value, true);
     }
-    splitContentByLine(fragment) {
-        // A very naive approach: split by <br> or block elements.
-        // For advanced logic, detect line breaks more thoroughly.
-        const lines = [];
-        let currentFrag = document.createDocumentFragment();
-        Array.from(fragment.childNodes).forEach((node) => {
-            if (node.nodeName === 'BR' || this.isBlockElement(node)) {
-                // This node signifies a new line
-                lines.push(currentFrag);
-                currentFrag = document.createDocumentFragment();
-                if (this.isBlockElement(node)) {
-                    while (node.firstChild) {
-                        currentFrag.appendChild(node.firstChild);
-                    }
-                    lines.push(currentFrag);
-                    currentFrag = document.createDocumentFragment();
-                }
-            }
-            else {
-                currentFrag.appendChild(node);
-            }
-        });
-        if (currentFrag.childNodes.length > 0) {
-            lines.push(currentFrag);
-        }
-        return lines;
+    applyHighlight(event) {
+        this.exec('hiliteColor', event.target.value, true);
     }
-    // ---- Links ----
+    // ---- Links / images ----
     createLink() {
         const url = prompt('Enter URL', 'https://');
         if (!url)
             return;
-        const range = this.getSelectionRange();
-        if (!range || range.collapsed)
-            return;
-        const selectedContent = range.extractContents();
-        const a = document.createElement('a');
-        a.href = url;
-        a.appendChild(selectedContent);
-        range.insertNode(a);
-        this.onInput();
+        this.exec('createLink', url);
     }
-    // ---- Images ----
     insertImage() {
         const url = prompt('Enter image URL:');
         if (!url)
             return;
-        const range = this.getSelectionRange();
-        if (!range)
-            return;
-        const img = document.createElement('img');
-        img.src = url;
-        range.insertNode(img);
-        this.onInput();
+        this.exec('insertImage', url);
     }
-    // ---- Alignment ----
-    setAlignment(alignment) {
-        // Find the block and set text-align
-        const range = this.getSelectionRange();
-        if (!range)
-            return;
-        const block = this.findBlockAncestor(range.commonAncestorContainer);
-        if (block) {
-            block.style.textAlign = alignment;
-            this.onInput();
-        }
+    // ---- Undo / redo / clear ----
+    undo() {
+        this.exec('undo');
     }
-    // ---- Clear Formatting ----
-    clearFormatting() {
-        const html = this.editorRef.nativeElement.innerText;
-        // Convert innerText to a plain <p> block for simplicity
-        this.editorRef.nativeElement.innerHTML = `<p>${html}</p>`;
-        this.onInput();
+    redo() {
+        this.exec('redo');
     }
-    // ---- Undo/Redo ----
-    saveState() {
-        const currentHtml = this.editorRef.nativeElement.innerHTML;
-        if (this.undoStack.length === 0 || this.undoStack[this.undoStack.length - 1].html !== currentHtml) {
-            this.undoStack.push({ html: currentHtml });
-            this.redoStack = []; // clear redo on new input
-        }
+    clearFormatting() {
+        this.exec('removeFormat');
     }
-    // clear options
-    undo() {
-        if (this.undoStack.length > 1) {
-            const current = this.undoStack.pop();
-            this.redoStack.push(current);
-            const previous = this.undoStack[this.undoStack.length - 1];
-            this.editorRef.nativeElement.innerHTML = previous.html;
-            this.onChange(previous.html);
-        }
+    /**
+     * Focus the editor, restore the last selection, run a rich-text command and
+     * propagate the resulting HTML. No-op while readonly/disabled.
+     */
+    exec(command, value, useCss = false) {
+        if (this.disabled || this.readonly)
+            return;
+        this.editorRef.nativeElement.focus();
+        this.restoreSelection();
+        // `useCss` keeps colors as inline styles; semantic tags (<b>, <i>…) otherwise.
+        document.execCommand('styleWithCSS', false, String(useCss));
+        document.execCommand(command, false, value);
+        this.onInput();
     }
-    redo() {
-        if (this.redoStack.length > 0) {
-            const state = this.redoStack.pop();
-            this.undoStack.push(state);
-            this.editorRef.nativeElement.innerHTML = state.html;
-            this.onChange(state.html);
-        }
+    restoreSelection() {
+        if (!this.savedRange)
+            return;
+        const selection = window.getSelection();
+        if (!selection)
+            return;
+        selection.removeAllRanges();
+        selection.addRange(this.savedRange);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TextEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: TextEditor, isStandalone: true, selector: "app-text-editor", inputs: { header: "header", media: "media", link: "link", placeholder: "placeholder", readonly: "readonly" }, viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<div class=\"text-editor\" [ngClass]=\"{'readonly': readonly}\">\r\n    <div class=\"toolbar\" *ngIf=\"!readonly\">\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"applyInlineStyle('bold')\" tooltip=\"Bold\">\r\n                <i class=\"he he-bold\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyInlineStyle('italic')\" tooltip=\"italic\">\r\n                <i class=\"he he-italics\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyInlineStyle('underline')\" tooltip=\"Underline\">\r\n                <i class=\"he he-underline\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"header\">\r\n            <button type=\"button\" (click)=\"applyBlockFormat('h1')\" tooltip=\"Header 1\">\r\n                <i class=\"he he-heading-1\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyBlockFormat('h2')\" tooltip=\"Header 2\">\r\n                <i class=\"he he-heading-2\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items more-gap\">\r\n            <div class=\"input-wrap\" tooltip=\"Text Color\">\r\n                <i class=\"he he-text-drop\"></i>\r\n                <input type=\"color\" (change)=\"applyColor($event)\" />\r\n            </div>\r\n            <div class=\"input-wrap\" tooltip=\"Background Color\">\r\n                <i class=\"he he-background-drop\"></i>\r\n                <input type=\"color\" (change)=\"applyHighlight($event)\" />\r\n            </div>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"setAlignment('left')\" tooltip=\"Justify Left\">\r\n                <i class=\"he he-left-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('center')\" tooltip=\"Justify Center\">\r\n                <i class=\"he he-center-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('right')\" tooltip=\"Justify Right\">\r\n                <i class=\"he he-right-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('justify')\" tooltip=\"Justify Full\">\r\n                <i class=\"he he-justify\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" tooltip=\"Indent\">\r\n                <i class=\"he he-text-indent-left\"></i>\r\n            </button>\r\n            <button type=\"button\" tooltip=\"Outdent\">\r\n                <i class=\"he he-text-indent-right\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"media\">\r\n            <button type=\"button\" (click)=\"applyList('ul')\" tooltip=\"Unordered list\">\r\n                <i class=\"he he-unordered-list\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyList('ol')\" tooltip=\"Ordered list\">\r\n                <i class=\"he he-ordered-list\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"link\">\r\n            <button type=\"button\" (click)=\"createLink()\" tooltip=\"Link\">\r\n                <i class=\"he he-link\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"insertImage()\" tooltip=\"Image\">\r\n                <i class=\"he he-image\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"undo()\" tooltip=\"Undo\">\r\n                <i class=\"he he-undo\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"redo()\" tooltip=\"Redo\">\r\n                <i class=\"he he-redo\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"clearFormatting()\" tooltip=\"Clear Formatting\">\r\n                <i class=\"he he-text-clear-format\"></i>\r\n            </button>\r\n        </div>\r\n    </div>\r\n\r\n    <div #editor class=\"editor-content\" [attr.contenteditable]=\"readonly ? 'false' : 'true'\" (input)=\"onInput()\" (blur)=\"onTouched()\"\r\n        [attr.data-placeholder]=\"placeholder\">\r\n    </div>\r\n</div>", styles: [".text-editor{border:1px solid #ccc}.text-editor .toolbar{gap:.75rem;display:flex;flex-wrap:wrap;background:#f8f8f8;padding:.75rem;border-bottom:1px solid #cccccc}.text-editor .toolbar .toolbar-items{height:18px;display:flex;flex-wrap:wrap;align-items:center;padding-right:.75rem;border-right:1px solid #969090}.text-editor .toolbar .toolbar-items button,.text-editor .toolbar .toolbar-items .input-wrap{cursor:pointer;min-width:25px;min-height:20px}.text-editor .toolbar .toolbar-items button:hover i,.text-editor .toolbar .toolbar-items .input-wrap:hover i{color:#000}.text-editor .toolbar .toolbar-items button{border:0;display:grid;place-items:center;background:transparent}.text-editor .toolbar .toolbar-items button:hover{background:#eee}.text-editor .toolbar .toolbar-items .input-wrap{gap:2px;display:flex;cursor:pointer;align-items:center;flex-direction:column;justify-content:center}.text-editor .toolbar .toolbar-items .input-wrap input[type=color]{width:80%;padding:0;height:2px;border:none;cursor:inherit}.text-editor .toolbar .toolbar-items i{font-size:13px;color:#3c4148}.text-editor .toolbar .toolbar-items i.he-bold{font-weight:600}.text-editor .toolbar .toolbar-items i.he-underline{font-size:14px}.text-editor .toolbar .toolbar-items i.he-text-drop{font-size:12px}.text-editor .toolbar .toolbar-items i.he-background-drop{top:-1px;font-size:12px}.text-editor .toolbar .toolbar-items i.he-heading-1,.text-editor .toolbar .toolbar-items i.he-link,.text-editor .toolbar .toolbar-items i.he-left-align,.text-editor .toolbar .toolbar-items i.he-center-align,.text-editor .toolbar .toolbar-items i.he-right-align,.text-editor .toolbar .toolbar-items i.he-justify{font-size:16px}.text-editor .toolbar .toolbar-items i.he-text-indent-left,.text-editor .toolbar .toolbar-items i.he-text-indent-right{font-size:17px}.text-editor .toolbar .toolbar-items i.he-heading-2{top:1px;font-size:16px}.text-editor .toolbar .toolbar-items i.he-unordered-list,.text-editor .toolbar .toolbar-items i.he-ordered-list{top:-1px;font-size:20px}.text-editor .toolbar .toolbar-items i.he-image{font-size:15px;font-weight:600}.text-editor .toolbar .toolbar-items i.he-redo,.text-editor .toolbar .toolbar-items i.he-undo{top:-1px;font-size:14px}.text-editor .toolbar .toolbar-items.more-gap{gap:5px}.text-editor .toolbar .toolbar-items:last-child{border-right:0}.text-editor .editor-content{outline:none;min-height:200px;position:relative;background:#fff;padding:.75rem}.text-editor .editor-content[data-placeholder]:empty:before{content:attr(data-placeholder);color:#aaa;pointer-events:none;position:absolute;left:.75rem;top:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: TextEditor, isStandalone: true, selector: "app-text-editor", inputs: { header: "header", media: "media", link: "link", placeholder: "placeholder", readonly: "readonly" }, host: { listeners: { "document:selectionchange": "saveSelection()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TextEditor),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<div class=\"text-editor\" [ngClass]=\"{'readonly': readonly || disabled}\">\n    <div class=\"toolbar\" *ngIf=\"!readonly && !disabled\">\n        <div class=\"toolbar-items\">\n            <button type=\"button\" (click)=\"applyInlineStyle('bold')\" tooltip=\"Bold\">\n                <i class=\"he he-bold\"></i>\n            </button>\n            <button type=\"button\" (click)=\"applyInlineStyle('italic')\" tooltip=\"italic\">\n                <i class=\"he he-italics\"></i>\n            </button>\n            <button type=\"button\" (click)=\"applyInlineStyle('underline')\" tooltip=\"Underline\">\n                <i class=\"he he-underline\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\" *ngIf=\"header\">\n            <button type=\"button\" (click)=\"applyBlockFormat('h1')\" tooltip=\"Header 1\">\n                <i class=\"he he-heading-1\"></i>\n            </button>\n            <button type=\"button\" (click)=\"applyBlockFormat('h2')\" tooltip=\"Header 2\">\n                <i class=\"he he-heading-2\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items more-gap\">\n            <div class=\"input-wrap\" tooltip=\"Text Color\">\n                <i class=\"he he-text-drop\"></i>\n                <input type=\"color\" (change)=\"applyColor($event)\" />\n            </div>\n            <div class=\"input-wrap\" tooltip=\"Background Color\">\n                <i class=\"he he-background-drop\"></i>\n                <input type=\"color\" (change)=\"applyHighlight($event)\" />\n            </div>\n        </div>\n        <div class=\"toolbar-items\">\n            <button type=\"button\" (click)=\"setAlignment('left')\" tooltip=\"Justify Left\">\n                <i class=\"he he-left-align\"></i>\n            </button>\n            <button type=\"button\" (click)=\"setAlignment('center')\" tooltip=\"Justify Center\">\n                <i class=\"he he-center-align\"></i>\n            </button>\n            <button type=\"button\" (click)=\"setAlignment('right')\" tooltip=\"Justify Right\">\n                <i class=\"he he-right-align\"></i>\n            </button>\n            <button type=\"button\" (click)=\"setAlignment('justify')\" tooltip=\"Justify Full\">\n                <i class=\"he he-justify\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\">\n            <button type=\"button\" (click)=\"indent()\" tooltip=\"Indent\">\n                <i class=\"he he-text-indent-left\"></i>\n            </button>\n            <button type=\"button\" (click)=\"outdent()\" tooltip=\"Outdent\">\n                <i class=\"he he-text-indent-right\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\" *ngIf=\"media\">\n            <button type=\"button\" (click)=\"applyList('ul')\" tooltip=\"Unordered list\">\n                <i class=\"he he-unordered-list\"></i>\n            </button>\n            <button type=\"button\" (click)=\"applyList('ol')\" tooltip=\"Ordered list\">\n                <i class=\"he he-ordered-list\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\" *ngIf=\"link\">\n            <button type=\"button\" (click)=\"createLink()\" tooltip=\"Link\">\n                <i class=\"he he-link\"></i>\n            </button>\n            <button type=\"button\" (click)=\"insertImage()\" tooltip=\"Image\">\n                <i class=\"he he-image\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\">\n            <button type=\"button\" (click)=\"undo()\" tooltip=\"Undo\">\n                <i class=\"he he-undo\"></i>\n            </button>\n            <button type=\"button\" (click)=\"redo()\" tooltip=\"Redo\">\n                <i class=\"he he-redo\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\">\n            <button type=\"button\" (click)=\"clearFormatting()\" tooltip=\"Clear Formatting\">\n                <i class=\"he he-text-clear-format\"></i>\n            </button>\n        </div>\n    </div>\n\n    <div #editor class=\"editor-content\" [attr.contenteditable]=\"(readonly || disabled) ? 'false' : 'true'\" (input)=\"onInput()\" (blur)=\"onTouched()\"\n        [attr.data-placeholder]=\"placeholder\">\n    </div>\n</div>\n", styles: [".text-editor{border:1px solid #ccc}.text-editor .toolbar{gap:.75rem;display:flex;flex-wrap:wrap;background:#f8f8f8;padding:.75rem;border-bottom:1px solid #cccccc}.text-editor .toolbar .toolbar-items{height:18px;display:flex;flex-wrap:wrap;align-items:center;padding-right:.75rem;border-right:1px solid #969090}.text-editor .toolbar .toolbar-items button,.text-editor .toolbar .toolbar-items .input-wrap{cursor:pointer;min-width:25px;min-height:20px}.text-editor .toolbar .toolbar-items button:hover i,.text-editor .toolbar .toolbar-items .input-wrap:hover i{color:#000}.text-editor .toolbar .toolbar-items button{border:0;display:grid;place-items:center;background:transparent}.text-editor .toolbar .toolbar-items button:hover{background:#eee}.text-editor .toolbar .toolbar-items .input-wrap{gap:2px;display:flex;cursor:pointer;align-items:center;flex-direction:column;justify-content:center}.text-editor .toolbar .toolbar-items .input-wrap input[type=color]{width:80%;padding:0;height:2px;border:none;cursor:inherit}.text-editor .toolbar .toolbar-items i{font-size:13px;color:#3c4148}.text-editor .toolbar .toolbar-items i.he-bold{font-weight:600}.text-editor .toolbar .toolbar-items i.he-underline{font-size:14px}.text-editor .toolbar .toolbar-items i.he-text-drop{font-size:12px}.text-editor .toolbar .toolbar-items i.he-background-drop{top:-1px;font-size:12px}.text-editor .toolbar .toolbar-items i.he-heading-1,.text-editor .toolbar .toolbar-items i.he-link,.text-editor .toolbar .toolbar-items i.he-left-align,.text-editor .toolbar .toolbar-items i.he-center-align,.text-editor .toolbar .toolbar-items i.he-right-align,.text-editor .toolbar .toolbar-items i.he-justify{font-size:16px}.text-editor .toolbar .toolbar-items i.he-text-indent-left,.text-editor .toolbar .toolbar-items i.he-text-indent-right{font-size:17px}.text-editor .toolbar .toolbar-items i.he-heading-2{top:1px;font-size:16px}.text-editor .toolbar .toolbar-items i.he-unordered-list,.text-editor .toolbar .toolbar-items i.he-ordered-list{top:-1px;font-size:20px}.text-editor .toolbar .toolbar-items i.he-image{font-size:15px;font-weight:600}.text-editor .toolbar .toolbar-items i.he-redo,.text-editor .toolbar .toolbar-items i.he-undo{top:-1px;font-size:14px}.text-editor .toolbar .toolbar-items.more-gap{gap:5px}.text-editor .toolbar .toolbar-items:last-child{border-right:0}.text-editor .editor-content{outline:none;min-height:200px;position:relative;background:#fff;padding:.75rem}.text-editor .editor-content[data-placeholder]:empty:before{content:attr(data-placeholder);color:#aaa;pointer-events:none;position:absolute;left:.75rem;top:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TextEditor, decorators: [{
             type: Component,
-            args: [{ selector: 'app-text-editor', imports: [CommonModule,
-                    ], template: "<div class=\"text-editor\" [ngClass]=\"{'readonly': readonly}\">\r\n    <div class=\"toolbar\" *ngIf=\"!readonly\">\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"applyInlineStyle('bold')\" tooltip=\"Bold\">\r\n                <i class=\"he he-bold\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyInlineStyle('italic')\" tooltip=\"italic\">\r\n                <i class=\"he he-italics\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyInlineStyle('underline')\" tooltip=\"Underline\">\r\n                <i class=\"he he-underline\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"header\">\r\n            <button type=\"button\" (click)=\"applyBlockFormat('h1')\" tooltip=\"Header 1\">\r\n                <i class=\"he he-heading-1\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyBlockFormat('h2')\" tooltip=\"Header 2\">\r\n                <i class=\"he he-heading-2\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items more-gap\">\r\n            <div class=\"input-wrap\" tooltip=\"Text Color\">\r\n                <i class=\"he he-text-drop\"></i>\r\n                <input type=\"color\" (change)=\"applyColor($event)\" />\r\n            </div>\r\n            <div class=\"input-wrap\" tooltip=\"Background Color\">\r\n                <i class=\"he he-background-drop\"></i>\r\n                <input type=\"color\" (change)=\"applyHighlight($event)\" />\r\n            </div>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"setAlignment('left')\" tooltip=\"Justify Left\">\r\n                <i class=\"he he-left-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('center')\" tooltip=\"Justify Center\">\r\n                <i class=\"he he-center-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('right')\" tooltip=\"Justify Right\">\r\n                <i class=\"he he-right-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('justify')\" tooltip=\"Justify Full\">\r\n                <i class=\"he he-justify\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" tooltip=\"Indent\">\r\n                <i class=\"he he-text-indent-left\"></i>\r\n            </button>\r\n            <button type=\"button\" tooltip=\"Outdent\">\r\n                <i class=\"he he-text-indent-right\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"media\">\r\n            <button type=\"button\" (click)=\"applyList('ul')\" tooltip=\"Unordered list\">\r\n                <i class=\"he he-unordered-list\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyList('ol')\" tooltip=\"Ordered list\">\r\n                <i class=\"he he-ordered-list\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"link\">\r\n            <button type=\"button\" (click)=\"createLink()\" tooltip=\"Link\">\r\n                <i class=\"he he-link\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"insertImage()\" tooltip=\"Image\">\r\n                <i class=\"he he-image\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"undo()\" tooltip=\"Undo\">\r\n                <i class=\"he he-undo\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"redo()\" tooltip=\"Redo\">\r\n                <i class=\"he he-redo\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"clearFormatting()\" tooltip=\"Clear Formatting\">\r\n                <i class=\"he he-text-clear-format\"></i>\r\n            </button>\r\n        </div>\r\n    </div>\r\n\r\n    <div #editor class=\"editor-content\" [attr.contenteditable]=\"readonly ? 'false' : 'true'\" (input)=\"onInput()\" (blur)=\"onTouched()\"\r\n        [attr.data-placeholder]=\"placeholder\">\r\n    </div>\r\n</div>", styles: [".text-editor{border:1px solid #ccc}.text-editor .toolbar{gap:.75rem;display:flex;flex-wrap:wrap;background:#f8f8f8;padding:.75rem;border-bottom:1px solid #cccccc}.text-editor .toolbar .toolbar-items{height:18px;display:flex;flex-wrap:wrap;align-items:center;padding-right:.75rem;border-right:1px solid #969090}.text-editor .toolbar .toolbar-items button,.text-editor .toolbar .toolbar-items .input-wrap{cursor:pointer;min-width:25px;min-height:20px}.text-editor .toolbar .toolbar-items button:hover i,.text-editor .toolbar .toolbar-items .input-wrap:hover i{color:#000}.text-editor .toolbar .toolbar-items button{border:0;display:grid;place-items:center;background:transparent}.text-editor .toolbar .toolbar-items button:hover{background:#eee}.text-editor .toolbar .toolbar-items .input-wrap{gap:2px;display:flex;cursor:pointer;align-items:center;flex-direction:column;justify-content:center}.text-editor .toolbar .toolbar-items .input-wrap input[type=color]{width:80%;padding:0;height:2px;border:none;cursor:inherit}.text-editor .toolbar .toolbar-items i{font-size:13px;color:#3c4148}.text-editor .toolbar .toolbar-items i.he-bold{font-weight:600}.text-editor .toolbar .toolbar-items i.he-underline{font-size:14px}.text-editor .toolbar .toolbar-items i.he-text-drop{font-size:12px}.text-editor .toolbar .toolbar-items i.he-background-drop{top:-1px;font-size:12px}.text-editor .toolbar .toolbar-items i.he-heading-1,.text-editor .toolbar .toolbar-items i.he-link,.text-editor .toolbar .toolbar-items i.he-left-align,.text-editor .toolbar .toolbar-items i.he-center-align,.text-editor .toolbar .toolbar-items i.he-right-align,.text-editor .toolbar .toolbar-items i.he-justify{font-size:16px}.text-editor .toolbar .toolbar-items i.he-text-indent-left,.text-editor .toolbar .toolbar-items i.he-text-indent-right{font-size:17px}.text-editor .toolbar .toolbar-items i.he-heading-2{top:1px;font-size:16px}.text-editor .toolbar .toolbar-items i.he-unordered-list,.text-editor .toolbar .toolbar-items i.he-ordered-list{top:-1px;font-size:20px}.text-editor .toolbar .toolbar-items i.he-image{font-size:15px;font-weight:600}.text-editor .toolbar .toolbar-items i.he-redo,.text-editor .toolbar .toolbar-items i.he-undo{top:-1px;font-size:14px}.text-editor .toolbar .toolbar-items.more-gap{gap:5px}.text-editor .toolbar .toolbar-items:last-child{border-right:0}.text-editor .editor-content{outline:none;min-height:200px;position:relative;background:#fff;padding:.75rem}.text-editor .editor-content[data-placeholder]:empty:before{content:attr(data-placeholder);color:#aaa;pointer-events:none;position:absolute;left:.75rem;top:.75rem}\n"] }]
+            args: [{ selector: 'app-text-editor', standalone: true, imports: [CommonModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TextEditor),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"text-editor\" [ngClass]=\"{'readonly': readonly || disabled}\">\n    <div class=\"toolbar\" *ngIf=\"!readonly && !disabled\">\n        <div class=\"toolbar-items\">\n            <button type=\"button\" (click)=\"applyInlineStyle('bold')\" tooltip=\"Bold\">\n                <i class=\"he he-bold\"></i>\n            </button>\n            <button type=\"button\" (click)=\"applyInlineStyle('italic')\" tooltip=\"italic\">\n                <i class=\"he he-italics\"></i>\n            </button>\n            <button type=\"button\" (click)=\"applyInlineStyle('underline')\" tooltip=\"Underline\">\n                <i class=\"he he-underline\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\" *ngIf=\"header\">\n            <button type=\"button\" (click)=\"applyBlockFormat('h1')\" tooltip=\"Header 1\">\n                <i class=\"he he-heading-1\"></i>\n            </button>\n            <button type=\"button\" (click)=\"applyBlockFormat('h2')\" tooltip=\"Header 2\">\n                <i class=\"he he-heading-2\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items more-gap\">\n            <div class=\"input-wrap\" tooltip=\"Text Color\">\n                <i class=\"he he-text-drop\"></i>\n                <input type=\"color\" (change)=\"applyColor($event)\" />\n            </div>\n            <div class=\"input-wrap\" tooltip=\"Background Color\">\n                <i class=\"he he-background-drop\"></i>\n                <input type=\"color\" (change)=\"applyHighlight($event)\" />\n            </div>\n        </div>\n        <div class=\"toolbar-items\">\n            <button type=\"button\" (click)=\"setAlignment('left')\" tooltip=\"Justify Left\">\n                <i class=\"he he-left-align\"></i>\n            </button>\n            <button type=\"button\" (click)=\"setAlignment('center')\" tooltip=\"Justify Center\">\n                <i class=\"he he-center-align\"></i>\n            </button>\n            <button type=\"button\" (click)=\"setAlignment('right')\" tooltip=\"Justify Right\">\n                <i class=\"he he-right-align\"></i>\n            </button>\n            <button type=\"button\" (click)=\"setAlignment('justify')\" tooltip=\"Justify Full\">\n                <i class=\"he he-justify\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\">\n            <button type=\"button\" (click)=\"indent()\" tooltip=\"Indent\">\n                <i class=\"he he-text-indent-left\"></i>\n            </button>\n            <button type=\"button\" (click)=\"outdent()\" tooltip=\"Outdent\">\n                <i class=\"he he-text-indent-right\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\" *ngIf=\"media\">\n            <button type=\"button\" (click)=\"applyList('ul')\" tooltip=\"Unordered list\">\n                <i class=\"he he-unordered-list\"></i>\n            </button>\n            <button type=\"button\" (click)=\"applyList('ol')\" tooltip=\"Ordered list\">\n                <i class=\"he he-ordered-list\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\" *ngIf=\"link\">\n            <button type=\"button\" (click)=\"createLink()\" tooltip=\"Link\">\n                <i class=\"he he-link\"></i>\n            </button>\n            <button type=\"button\" (click)=\"insertImage()\" tooltip=\"Image\">\n                <i class=\"he he-image\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\">\n            <button type=\"button\" (click)=\"undo()\" tooltip=\"Undo\">\n                <i class=\"he he-undo\"></i>\n            </button>\n            <button type=\"button\" (click)=\"redo()\" tooltip=\"Redo\">\n                <i class=\"he he-redo\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\">\n            <button type=\"button\" (click)=\"clearFormatting()\" tooltip=\"Clear Formatting\">\n                <i class=\"he he-text-clear-format\"></i>\n            </button>\n        </div>\n    </div>\n\n    <div #editor class=\"editor-content\" [attr.contenteditable]=\"(readonly || disabled) ? 'false' : 'true'\" (input)=\"onInput()\" (blur)=\"onTouched()\"\n        [attr.data-placeholder]=\"placeholder\">\n    </div>\n</div>\n", styles: [".text-editor{border:1px solid #ccc}.text-editor .toolbar{gap:.75rem;display:flex;flex-wrap:wrap;background:#f8f8f8;padding:.75rem;border-bottom:1px solid #cccccc}.text-editor .toolbar .toolbar-items{height:18px;display:flex;flex-wrap:wrap;align-items:center;padding-right:.75rem;border-right:1px solid #969090}.text-editor .toolbar .toolbar-items button,.text-editor .toolbar .toolbar-items .input-wrap{cursor:pointer;min-width:25px;min-height:20px}.text-editor .toolbar .toolbar-items button:hover i,.text-editor .toolbar .toolbar-items .input-wrap:hover i{color:#000}.text-editor .toolbar .toolbar-items button{border:0;display:grid;place-items:center;background:transparent}.text-editor .toolbar .toolbar-items button:hover{background:#eee}.text-editor .toolbar .toolbar-items .input-wrap{gap:2px;display:flex;cursor:pointer;align-items:center;flex-direction:column;justify-content:center}.text-editor .toolbar .toolbar-items .input-wrap input[type=color]{width:80%;padding:0;height:2px;border:none;cursor:inherit}.text-editor .toolbar .toolbar-items i{font-size:13px;color:#3c4148}.text-editor .toolbar .toolbar-items i.he-bold{font-weight:600}.text-editor .toolbar .toolbar-items i.he-underline{font-size:14px}.text-editor .toolbar .toolbar-items i.he-text-drop{font-size:12px}.text-editor .toolbar .toolbar-items i.he-background-drop{top:-1px;font-size:12px}.text-editor .toolbar .toolbar-items i.he-heading-1,.text-editor .toolbar .toolbar-items i.he-link,.text-editor .toolbar .toolbar-items i.he-left-align,.text-editor .toolbar .toolbar-items i.he-center-align,.text-editor .toolbar .toolbar-items i.he-right-align,.text-editor .toolbar .toolbar-items i.he-justify{font-size:16px}.text-editor .toolbar .toolbar-items i.he-text-indent-left,.text-editor .toolbar .toolbar-items i.he-text-indent-right{font-size:17px}.text-editor .toolbar .toolbar-items i.he-heading-2{top:1px;font-size:16px}.text-editor .toolbar .toolbar-items i.he-unordered-list,.text-editor .toolbar .toolbar-items i.he-ordered-list{top:-1px;font-size:20px}.text-editor .toolbar .toolbar-items i.he-image{font-size:15px;font-weight:600}.text-editor .toolbar .toolbar-items i.he-redo,.text-editor .toolbar .toolbar-items i.he-undo{top:-1px;font-size:14px}.text-editor .toolbar .toolbar-items.more-gap{gap:5px}.text-editor .toolbar .toolbar-items:last-child{border-right:0}.text-editor .editor-content{outline:none;min-height:200px;position:relative;background:#fff;padding:.75rem}.text-editor .editor-content[data-placeholder]:empty:before{content:attr(data-placeholder);color:#aaa;pointer-events:none;position:absolute;left:.75rem;top:.75rem}\n"] }]
         }], propDecorators: { header: [{
                 type: Input
             }], media: [{
@@ -2787,6 +2647,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
             }], editorRef: [{
                 type: ViewChild,
                 args: ['editor']
+            }], saveSelection: [{
+                type: HostListener,
+                args: ['document:selectionchange']
             }] } });
 
 class TextareaControl {