nexheal-lib 0.0.75 → 0.0.77

package/fesm2022/nexheal-lib.mjs

@@ -342,8 +342,8 @@ class AutocompleteControl {
         this.onChange(this.selectedItems);
         this.optionSelected.emit(this.selectedItems);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AutocompleteControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AutocompleteControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: AutocompleteControl,
@@ -351,7 +351,7 @@ class AutocompleteControl {
             },
         ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }], ngImport: i0, template: "<div class=\"form-group auto-complete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\r\n  @if (title) {\r\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n  }\r\n\r\n  <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\r\n    (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" [ngClass]=\"{'is-invalid': error}\"\r\n    [attr.autocomplete]=\"autocomplete || null\" [readonly]=\"readonly\" />\r\n\r\n  <span class=\"focus-border\"></span>\r\n\r\n  @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\r\n  <label class=\"clear\" (click)=\"resetInput()\">\r\n    <i class=\"he he-close\"></i>\r\n  </label>\r\n  }\r\n  @if (isDropdownOpen) {\r\n  <div #dropdownElement class=\"option-list\">\r\n    @if (filteredSuggestions.length === 0) {\r\n    <div class=\"no-results\">\r\n      <div>No results found</div>\r\n      @if (isAddNewItem) {\r\n      <div (click)=\"onAddNewItemClick()\" class=\"btn-new\">\r\n        Add New Item\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    @for (suggestion of filteredSuggestions; track suggestion[optionDisplayProperty]; let i = $index) {\r\n    <div class=\"list-item\" [ngClass]=\"{\r\n                'active': suggestion === selectedItems,\r\n                'highlighted': highlightedIndex === i\r\n              }\" (mousedown)=\"onOptionMouseDown()\" (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\r\n      @if (suggestion.countryCode) {\r\n      <img src=\"https://flagcdn.com/w80/{{ suggestion.countryCode }}.png\" width=\"20\"\r\n        alt=\"{{ suggestion.countryCode }} flag\" loading=\"lazy\" />\r\n      }\r\n      {{ suggestion[optionDisplayProperty] }}\r\n    </div>\r\n    }\r\n    }\r\n  </div>\r\n  }\r\n\r\n  @if (inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n\r\n  @if (error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n</div>", styles: [".form-group.auto-complete .form-control{padding-right:unset}.form-group.auto-complete .clear{right:7px}.form-group.auto-complete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.auto-complete .option-list .no-results .btn-new{padding:5px 0;cursor:pointer;color:#0d6efd}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AutocompleteControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AutocompleteControl, decorators: [{
             type: Component,
             args: [{ selector: "autocomplete-control", standalone: true, imports: [CommonModule, ReactiveFormsModule], providers: [
                         {
@@ -1714,8 +1714,8 @@ class CalendarControl {
         if (this.selectionMode === "range")
             this.rangeSelected.emit(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CalendarControl, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: CalendarControl, isStandalone: true, selector: "calendar-control", inputs: { title: "title", required: "required", customClass: "customClass", clearVal: "clearVal", deFocus: "deFocus", error: "error", errorMessage: "errorMessage", hourFormat: "hourFormat", selectionMode: "selectionMode", timeOnly: "timeOnly", dateFormat: "dateFormat", placeholder: "placeholder", viewMode: "viewMode", inputLoader: "inputLoader", disabled: "disabled", readonly: "readonly", submitted: "submitted", closeVal: ["close-val", "closeVal"], showTime: "showTime", defaultDate: "defaultDate", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectionCleared: "selectionCleared", blurEvent: "blurEvent", dateSelected: "dateSelected", weekSelected: "weekSelected", rangeSelected: "rangeSelected" }, host: { listeners: { "document:click": "clickOutside($event)" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: CalendarControl, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: CalendarControl, isStandalone: true, selector: "calendar-control", inputs: { title: "title", required: "required", customClass: "customClass", clearVal: "clearVal", deFocus: "deFocus", error: "error", errorMessage: "errorMessage", hourFormat: "hourFormat", selectionMode: "selectionMode", timeOnly: "timeOnly", dateFormat: "dateFormat", placeholder: "placeholder", viewMode: "viewMode", inputLoader: "inputLoader", disabled: "disabled", readonly: "readonly", submitted: "submitted", closeVal: ["close-val", "closeVal"], showTime: "showTime", defaultDate: "defaultDate", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectionCleared: "selectionCleared", blurEvent: "blurEvent", dateSelected: "dateSelected", weekSelected: "weekSelected", rangeSelected: "rangeSelected" }, host: { listeners: { "document:click": "clickOutside($event)" } }, providers: [
             DatePipe,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1724,7 +1724,7 @@ class CalendarControl {
             },
         ], viewQueries: [{ propertyName: "rootElement", first: true, predicate: ["root"], descendants: true, static: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, static: true }, { propertyName: "datePickerEl", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<div class=\"form-group calendar\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" [class.disabled]=\"disabled\" #root\r\n  (click)=\"openCalendar()\">\r\n  <label class=\"inp-label\" [ngClass]=\"{'required' : required}\" *ngIf=\"title\">{{ title }}</label>\r\n  <input type=\"text\" #inputEl [placeholder]=\"placeholder\" [formControl]=\"inputControl\" class=\"form-control\"\r\n    [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\" (focus)=\"onFocus()\" [readonly]=\"readonly\"\r\n    (click)=\"openCalendar(); $event.stopPropagation()\" (keydown)=\"onInputKeydown($event)\" />\r\n\r\n  <span class=\"focus-border\" *ngIf=\"deFocus\"></span>\r\n  @if(!inputLoader) {\r\n  <span class=\"calendar-icon\">\r\n    <i class=\"he\" [ngClass]=\"!timeOnly ? 'he-calendar-blank' : 'he-clock'\"></i>\r\n  </span>\r\n  }\r\n\r\n  @if(!inputLoader &&((selectedDate || rangeStart) && !disabled && !readonly) && clearVal) {\r\n  <label class=\"clear\" (click)=\"clearDate($event)\">\r\n    <i class=\"he he-close\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if(inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n  @if(error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n\r\n  <div class=\"datepicker-group\" #datePicker *ngIf=\"isOpen\" (mousedown)=\"$event.preventDefault()\"\r\n    (click)=\"$event.stopPropagation()\">\r\n\r\n    <!-- time picker -->\r\n    <ng-container *ngIf=\"timeOnly\">\r\n      <div class=\"time-picker\">\r\n        <div class=\"time-select\">\r\n          <button (click)=\"incrementHour()\" [disabled]=\"!isIncrementHourValid()\"><i\r\n              class=\"he he-chevron-up\"></i></button>\r\n          <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n            <div class=\"time-value\">\r\n              {{ ((selectedHour % 12) || 12) | number:'2.0' }}\r\n            </div>\r\n          </ng-container>\r\n          <ng-template #show24>\r\n            <div class=\"time-value\">\r\n              {{ selectedHour | number:'2.0' }}\r\n            </div>\r\n          </ng-template>\r\n\r\n          <button (click)=\"decrementHour()\" [disabled]=\"!isDecrementHourValid()\"><i\r\n              class=\"he he-chevron-down\"></i></button>\r\n        </div>\r\n        <span class=\"time-separator\">:</span>\r\n        <div class=\"time-select\">\r\n          <button (click)=\"incrementMinute()\" [disabled]=\"!isIncrementMinuteValid()\"><i\r\n              class=\"he he-chevron-up\"></i></button>\r\n          <div class=\"time-value\">{{ selectedMinute | number:'2.0' }}</div>\r\n          <button (click)=\"decrementMinute()\" [disabled]=\"!isDecrementMinuteValid()\"><i\r\n              class=\"he he-chevron-down\"></i></button>\r\n        </div>\r\n        <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n          <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n          <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!-- day view (single / week modes) -->\r\n    <ng-container *ngIf=\"!timeOnly && currentView === 'day' && selectionMode !== 'range'\">\r\n      <div class=\"header\">\r\n        <button class=\"calendar-arrow\" (click)=\"prevMonth()\"><i class=\"he he-chevron-left\"></i></button>\r\n        <div class=\"title\" (click)=\"goToMonthView()\">\r\n          <div>{{ displayMonthName }}</div>\r\n          <div>{{ displayYear }}</div>\r\n        </div>\r\n        <button class=\"calendar-arrow\" (click)=\"nextMonth()\"><i class=\"he he-chevron-right\"></i></button>\r\n      </div>\r\n      <div class=\"week-header\">\r\n        <div>Sun</div>\r\n        <div>Mon</div>\r\n        <div>Tue</div>\r\n        <div>Wed</div>\r\n        <div>Thu</div>\r\n        <div>Fri</div>\r\n        <div>Sat</div>\r\n      </div>\r\n      <div class=\"days-grid\" [class.week-mode]=\"selectionMode === 'week'\">\r\n        <div class=\"day-cell\" *ngFor=\"let cell of daysInMonth; trackBy: trackByDate\" (click)=\"selectDay(cell)\"\r\n          (mouseenter)=\"onDayHover(cell)\" (mouseleave)=\"onDayLeave()\"\r\n          [class.other-month]=\"cell.otherMonth\"\r\n          [class.disabled]=\"cell.disabled\"\r\n          [class.selected]=\"cell.selected\"\r\n          [class.week-hover]=\"isInHoverWeek(cell.date)\"\r\n          [class.today]=\"cell.today\">\r\n          {{ cell.day }}\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"showTime\">\r\n        <div class=\"time-picker\">\r\n          <div class=\"time-select\">\r\n            <button type=\"button\" (click)=\"incrementHour()\" [disabled]=\"!isIncrementHourValid()\">\r\n              <i class=\"he he-chevron-up\"></i>\r\n            </button>\r\n            <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n              <div class=\"time-value\">\r\n                {{\r\n                selectedHour % 12 === 0\r\n                ? 12\r\n                : selectedHour % 12\r\n                | number:'2.0' }}\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #show24>\r\n              <div class=\"time-value\">{{ selectedHour | number:'2.0' }}</div>\r\n            </ng-template>\r\n            <button type=\"button\" (click)=\"decrementHour()\" [disabled]=\"!isDecrementHourValid()\">\r\n              <i class=\"he he-chevron-down\"></i>\r\n            </button>\r\n          </div>\r\n          <span class=\"time-separator\">:</span>\r\n          <div class=\"time-select\">\r\n            <button type=\"button\" (click)=\"incrementMinute()\" [disabled]=\"!isIncrementMinuteValid()\">\r\n              <i class=\"he he-chevron-up\"></i>\r\n            </button>\r\n            <div class=\"time-value\">\r\n              {{ selectedMinute < 10 ? '0' +selectedMinute : selectedMinute }} </div>\r\n                <button type=\"button\" (click)=\"decrementMinute()\" [disabled]=\"!isDecrementMinuteValid()\">\r\n                  <i class=\"he he-chevron-down\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n              <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n              <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n            </div>\r\n          </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <!-- day view (range mode) -->\r\n    <ng-container *ngIf=\"!timeOnly && currentView === 'day' && selectionMode === 'range'\">\r\n      <div class=\"header\">\r\n        <button class=\"calendar-arrow\" (click)=\"prevMonth()\"><i class=\"he he-chevron-left\"></i></button>\r\n        <div class=\"title\" (click)=\"goToMonthView()\">\r\n          <div>{{ displayMonthName }}</div>\r\n          <div>{{ displayYear }}</div>\r\n        </div>\r\n        <button class=\"calendar-arrow\" (click)=\"nextMonth()\"><i class=\"he he-chevron-right\"></i></button>\r\n      </div>\r\n      <div class=\"week-header\">\r\n        <div>Sun</div>\r\n        <div>Mon</div>\r\n        <div>Tue</div>\r\n        <div>Wed</div>\r\n        <div>Thu</div>\r\n        <div>Fri</div>\r\n        <div>Sat</div>\r\n      </div>\r\n      <div class=\"days-grid range-mode\">\r\n        <div class=\"day-cell\" *ngFor=\"let cell of daysInMonth; trackBy: trackByDate\" (click)=\"selectDay(cell)\"\r\n          (mouseenter)=\"onDayHover(cell)\" (mouseleave)=\"onDayLeave()\"\r\n          [class.other-month]=\"cell.otherMonth\"\r\n          [class.disabled]=\"cell.disabled\"\r\n          [class.selected]=\"cell.selected\"\r\n          [class.range-start]=\"cell.isRangeStart\"\r\n          [class.range-end]=\"cell.isRangeEnd\"\r\n          [class.in-range]=\"cell.isInRange\"\r\n          [class.range-hover]=\"cell.isInHoverRange\"\r\n          [class.today]=\"cell.today\">\r\n          {{ cell.day }}\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!-- month view -->\r\n    <ng-container *ngIf=\"!timeOnly && currentView === 'month'\">\r\n      <div class=\"header\" *ngIf=\"viewMode !== 'month'\">\r\n        <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear - 1\"><i\r\n            class=\"he he-chevron-left\"></i></button>\r\n        <div class=\"title\" (click)=\"goToYearRangeView()\">{{ displayYear }}</div>\r\n        <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear + 1\"><i\r\n            class=\"he he-chevron-right\"></i></button>\r\n      </div>\r\n      <div class=\"month-grid\">\r\n        <div class=\"month-cell\" *ngFor=\"let m of months; index as i\" (click)=\"selectMonth(i)\"\r\n          [class.selected]=\"isMonthSelected(i)\" [class.today]=\"isMonthCurrent(i)\">{{ m }}\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!-- year range view -->\r\n    <ng-container *ngIf=\"!timeOnly && currentView === 'yearRange'\">\r\n      <div class=\"header\">\r\n        <button class=\"calendar-arrow\" (click)=\"prevYearRange()\"><i class=\"he he-chevron-left\"></i></button>\r\n        <div class=\"title\">{{ yearRange[0] }} ~ {{ yearRange[yearRangeSize-1] }}</div>\r\n        <button class=\"calendar-arrow\" (click)=\"nextYearRange()\"><i class=\"he he-chevron-right\"></i></button>\r\n      </div>\r\n      <div class=\"year-grid\">\r\n        <div class=\"year-cell\" *ngFor=\"let y of yearRange\" (click)=\"selectYear(y)\"\r\n          [class.selected]=\"isYearSelected(y)\" [class.today]=\"isYearCurrent(y)\">{{ y }}</div>\r\n      </div>\r\n    </ng-container>\r\n\r\n  </div>\r\n</div>", styles: [".form-group.calendar{position:relative}.form-group.calendar .datepicker-group{left:0;width:100%;z-index:1000;padding:.5rem;color:#495057;min-width:240px;max-width:260px;border-radius:3px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.calendar .datepicker-group .header{display:flex;font-weight:600;padding:5px;align-items:center;justify-content:space-between;border-bottom:1px solid #dee2e6}.form-group.calendar .datepicker-group .header .title{gap:8px;display:flex;font-size:15px;cursor:pointer;font-weight:600}.form-group.calendar .datepicker-group .header .calendar-arrow{width:28px;height:28px;border:none;line-height:1;cursor:pointer;background:none}.form-group.calendar .datepicker-group .header .calendar-arrow i{font-size:14px}.form-group.calendar .datepicker-group .header .calendar-arrow:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .week-header{display:grid;padding:8px 0;font-size:13px;font-weight:700;text-align:center;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid,.form-group.calendar .datepicker-group .month-grid,.form-group.calendar .datepicker-group .year-grid{gap:3px;padding:5px;display:grid;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{display:flex;font-size:14px;cursor:pointer;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .days-grid .day-cell.today,.form-group.calendar .datepicker-group .days-grid .month-cell.today,.form-group.calendar .datepicker-group .days-grid .year-cell.today,.form-group.calendar .datepicker-group .month-grid .day-cell.today,.form-group.calendar .datepicker-group .month-grid .month-cell.today,.form-group.calendar .datepicker-group .month-grid .year-cell.today,.form-group.calendar .datepicker-group .year-grid .day-cell.today,.form-group.calendar .datepicker-group .year-grid .month-cell.today,.form-group.calendar .datepicker-group .year-grid .year-cell.today{color:#37c0b3;font-weight:700;border:1px solid #37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.selected,.form-group.calendar .datepicker-group .days-grid .day-cell:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.selected,.form-group.calendar .datepicker-group .days-grid .month-cell:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.selected,.form-group.calendar .datepicker-group .days-grid .year-cell:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.selected,.form-group.calendar .datepicker-group .month-grid .day-cell:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.selected,.form-group.calendar .datepicker-group .month-grid .month-cell:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.selected,.form-group.calendar .datepicker-group .month-grid .year-cell:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.selected,.form-group.calendar .datepicker-group .year-grid .day-cell:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.selected,.form-group.calendar .datepicker-group .year-grid .month-cell:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.selected,.form-group.calendar .datepicker-group .year-grid .year-cell:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled{color:#e0e0e0;background:none;-webkit-user-select:none;user-select:none;cursor:not-allowed}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today{color:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled:hover{color:#e0e0e0;background:transparent}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .day-cell{padding:5px 2px;border-radius:50%}.form-group.calendar .datepicker-group .days-grid .day-cell.other-month:not(.selected):not(:hover),.form-group.calendar .datepicker-group .month-grid .day-cell.other-month:not(.selected):not(:hover),.form-group.calendar .datepicker-group .year-grid .day-cell.other-month:not(.selected):not(:hover){color:#c5c5c5}.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{padding:8px 2px;border-radius:3px}.form-group.calendar .datepicker-group .days-grid.week-mode .day-cell{border-radius:4px}.form-group.calendar .datepicker-group .days-grid.week-mode .day-cell.week-hover:not(.selected){color:#0d6f7d;background:#e6f5f3}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell{border-radius:0}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-start{border-radius:50% 0 0 50%;color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-end{border-radius:0 50% 50% 0;color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-start.range-end{border-radius:50%}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.in-range:not(.range-start):not(.range-end){background:#e6f5f3;color:#0d6f7d}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.range-hover:not(.in-range):not(.range-start):not(.range-end):not(.selected){background:#f0faf9;color:#0d6f7d}.form-group.calendar .datepicker-group .days-grid.range-mode .day-cell.selected:not(.range-start):not(.range-end):not(.in-range){color:#fff;background:#37c0b3;border-radius:50%}.form-group.calendar .datepicker-group .month-grid{grid-template-columns:repeat(3,1fr)}.form-group.calendar .datepicker-group .year-grid{grid-template-columns:repeat(4,1fr)}.form-group.calendar .datepicker-group .time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle{gap:6px;display:flex;margin-left:1rem;flex-direction:column;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button{cursor:pointer;padding:3px 8px;font-size:.75rem;background:#fff;border:1px solid #cccccc}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button.active{color:#fff;border-color:#37c0b3;background-color:#37c0b3}.form-group.calendar .datepicker-group .time-picker .time-select{display:flex;margin:0 .75rem;align-items:center;flex-direction:column}.form-group.calendar .datepicker-group .time-picker .time-select button{border:none;cursor:pointer;padding:4px 8px;background:transparent}.form-group.calendar .datepicker-group .time-picker .time-select button i{font-size:1rem}.form-group.calendar .datepicker-group .time-picker .time-select button:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .time-picker .time-select .time-value{width:2rem;font-size:1rem;text-align:center;margin:2px 3px 4px}.form-group.calendar .datepicker-group .time-picker .time-separator{line-height:1;font-size:1rem}.form-group.calendar .clear{right:35px}.form-group.calendar.group-sm .clear{top:7px;right:35px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CalendarControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: CalendarControl, decorators: [{
             type: Component,
             args: [{ selector: "calendar-control", standalone: true, imports: [
                         CommonModule,
@@ -1875,8 +1875,8 @@ class CheckboxControl {
             this.checkboxControl.enable();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CheckboxControl, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: CheckboxControl, isStandalone: true, selector: "checkbox-control", inputs: { title: "title", customClass: "customClass", type: "type", readonly: "readonly", disabled: "disabled" }, outputs: { checkboxChange: "checkboxChange", blurEvent: "blurEvent" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: CheckboxControl, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: CheckboxControl, isStandalone: true, selector: "checkbox-control", inputs: { title: "title", customClass: "customClass", type: "type", readonly: "readonly", disabled: "disabled" }, outputs: { checkboxChange: "checkboxChange", blurEvent: "blurEvent" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CheckboxControl),
@@ -1884,7 +1884,7 @@ class CheckboxControl {
             },
         ], viewQueries: [{ propertyName: "checkboxContainer", first: true, predicate: ["checkboxContainer"], descendants: true }], ngImport: i0, template: "<label class=\"checkbox-container\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" #checkboxContainer>\r\n    <input type=\"checkbox\" [formControl]=\"checkboxControl\" (focus)=\"onFocus($event)\" (blur)=\"onBlur()\" [attr.readonly]=\"readonly ? true : null\" />\r\n    <span class=\"checkmark\"></span>{{ title }}\r\n</label>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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 }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CheckboxControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: CheckboxControl, decorators: [{
             type: Component,
             args: [{ selector: 'checkbox-control', standalone: true, imports: [
                         CommonModule,
@@ -2261,8 +2261,8 @@ class ColorPicker {
         const toHex = (n) => n.toString(16).padStart(2, "0");
         return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ColorPicker, isStandalone: true, selector: "color-picker", inputs: { title: "title", required: "required", customClass: "customClass", inline: "inline", format: "format", defaultColor: "defaultColor", disabled: "disabled", readonly: "readonly", showValue: "showValue", valuePosition: "valuePosition", variant: "variant", placeholder: "placeholder" }, outputs: { onChange: "onChange", blurEvent: "blurEvent" }, host: { listeners: { "document:mousedown": "onDocumentPointerDown($event)", "document:touchstart": "onDocumentPointerDown($event)" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: ColorPicker, isStandalone: true, selector: "color-picker", inputs: { title: "title", required: "required", customClass: "customClass", inline: "inline", format: "format", defaultColor: "defaultColor", disabled: "disabled", readonly: "readonly", showValue: "showValue", valuePosition: "valuePosition", variant: "variant", placeholder: "placeholder" }, outputs: { onChange: "onChange", blurEvent: "blurEvent" }, host: { listeners: { "document:mousedown": "onDocumentPointerDown($event)", "document:touchstart": "onDocumentPointerDown($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ColorPicker),
@@ -2270,7 +2270,7 @@ class ColorPicker {
             },
         ], ngImport: i0, template: "<div class=\"form-group color-picker\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" [class.disabled]=\"disabled\">\n  @if (title) {\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n  }\n\n  <div class=\"cp-wrap\" [ngClass]=\"'cp-pos-' + valuePosition\" [class.cp-wrap-input]=\"variant === 'input'\">\n    @if (!inline) {\n      @if (variant === 'input') {\n      <button type=\"button\" class=\"cp-field form-control\" [disabled]=\"disabled\"\n        (click)=\"toggle()\" [attr.aria-label]=\"'Selected color ' + previewColor\">\n        <span class=\"cp-field-swatch\" [style.backgroundColor]=\"previewColor\"></span>\n        @if (hasValue) {\n        <span class=\"cp-field-value\">{{ displayValue }}</span>\n        } @else {\n        <span class=\"cp-field-placeholder\">{{ placeholder }}</span>\n        }\n      </button>\n      } @else {\n      <button #trigger type=\"button\" class=\"cp-preview\" [style.backgroundColor]=\"previewColor\" [disabled]=\"disabled\"\n        (click)=\"toggle()\" [attr.aria-label]=\"'Selected color ' + previewColor\"></button>\n      }\n    }\n\n    @if (inline || overlayVisible) {\n    <div class=\"cp-panel\" [class.cp-inline]=\"inline\">\n      <div class=\"cp-content\">\n        <div #selector class=\"cp-selector\" [style.background]=\"hueBackground\" (mousedown)=\"onSelectorDown($event)\"\n          (touchstart)=\"onSelectorDown($event)\">\n          <div class=\"cp-selector-white\"></div>\n          <div class=\"cp-selector-black\"></div>\n          <div class=\"cp-selector-handle\" [style.left.%]=\"satHandleLeft\" [style.top.%]=\"briHandleTop\"></div>\n        </div>\n        <div #hue class=\"cp-hue\" (mousedown)=\"onHueDown($event)\" (touchstart)=\"onHueDown($event)\">\n          <div class=\"cp-hue-handle\" [style.top.%]=\"hueHandleTop\"></div>\n        </div>\n      </div>\n\n      @if (supportsEyeDropper) {\n      <div class=\"cp-tools\">\n        <button type=\"button\" class=\"cp-eyedropper\" (click)=\"openEyeDropper()\" title=\"Pick a color from the screen\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"m2 22 1-1h3l9-9\" />\n            <path d=\"M3 21v-3l9-9\" />\n            <path d=\"m15 6 3.4-3.4a2.1 2.1 0 0 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 0 1 3-3l.4.4Z\" />\n          </svg>\n        </button>\n        <span class=\"cp-tools-swatch\" [style.backgroundColor]=\"previewColor\"></span>\n      </div>\n      }\n    </div>\n    }\n\n    @if (showValue && variant !== 'input') {\n    <span class=\"cp-value\" (click)=\"toggle()\">{{ displayValue }}</span>\n    }\n  </div>\n</div>\n", styles: [".form-group.color-picker{position:relative}.form-group.color-picker .cp-wrap{gap:8px;display:inline-flex;align-items:center}.form-group.color-picker .cp-wrap.cp-pos-right{flex-direction:row}.form-group.color-picker .cp-wrap.cp-pos-left{flex-direction:row-reverse}.form-group.color-picker .cp-wrap.cp-pos-bottom{flex-direction:column;align-items:flex-start}.form-group.color-picker .cp-value{cursor:pointer;font-size:.95em;color:#495057;-webkit-user-select:none;user-select:none;text-transform:lowercase}.form-group.color-picker .cp-wrap.cp-wrap-input{display:block;width:100%}.form-group.color-picker .cp-field{gap:8px;width:100%;display:flex;font:inherit;cursor:pointer;text-align:left;align-items:center}.form-group.color-picker .cp-field:disabled{cursor:not-allowed}.form-group.color-picker .cp-field-swatch{width:20px;height:20px;flex:0 0 20px;border-radius:4px;border:1px solid #d0d3da}.form-group.color-picker .cp-field-value{color:#495057;font-size:1.05em;text-transform:lowercase}.form-group.color-picker .cp-field-placeholder{color:#a8a8a8;font-size:1.025em}.form-group.color-picker .cp-preview{width:2rem;height:2rem;padding:0;cursor:pointer;border-radius:4px;border:1px solid #d0d3da;transition:box-shadow .15s ease-in-out}.form-group.color-picker .cp-preview:focus-visible{outline:none;box-shadow:0 0 0 2px #3399ff80}.form-group.color-picker.disabled .cp-preview{cursor:not-allowed;opacity:.6}.form-group.color-picker.readonly .cp-preview{cursor:default;pointer-events:none}.form-group.color-picker .cp-panel{top:calc(100% + 4px);left:0;z-index:1000;position:absolute;padding:.5rem;border-radius:4px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.color-picker .cp-panel.cp-inline{position:static;box-shadow:none;padding:0;border:1px solid #e7e7e7}.form-group.color-picker .cp-content{gap:8px;display:flex;align-items:stretch}.form-group.color-picker .cp-tools{gap:8px;display:flex;margin-top:8px;align-items:center}.form-group.color-picker .cp-eyedropper{width:28px;height:28px;padding:0;display:grid;cursor:pointer;color:#495057;border-radius:4px;place-items:center;background:#fff;border:1px solid #d0d3da}.form-group.color-picker .cp-eyedropper:hover{color:#000;background:#f0f0f0}.form-group.color-picker .cp-tools-swatch{width:24px;height:24px;border-radius:4px;border:1px solid #d0d3da}.form-group.color-picker .cp-selector{width:150px;height:150px;position:relative;cursor:crosshair;border-radius:3px;touch-action:none;overflow:hidden}.form-group.color-picker .cp-selector-white,.form-group.color-picker .cp-selector-black{inset:0;position:absolute;pointer-events:none}.form-group.color-picker .cp-selector-white{background:linear-gradient(to right,#fff,#fff0)}.form-group.color-picker .cp-selector-black{background:linear-gradient(to top,#000,#0000)}.form-group.color-picker .cp-selector-handle{width:12px;height:12px;position:absolute;border-radius:50%;pointer-events:none;border:2px solid #ffffff;transform:translate(-50%,-50%);box-shadow:0 0 1px 1px #0006}.form-group.color-picker .cp-hue{width:16px;height:150px;position:relative;cursor:pointer;border-radius:3px;touch-action:none;background:linear-gradient(to bottom,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.form-group.color-picker .cp-hue-handle{left:-2px;right:-2px;height:4px;position:absolute;pointer-events:none;border:1px solid #ffffff;transform:translateY(-50%);box-shadow:0 0 1px 1px #0006}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ColorPicker, decorators: [{
             type: Component,
             args: [{ selector: "color-picker", standalone: true, imports: [CommonModule], providers: [
                         {
@@ -2478,8 +2478,8 @@ class InputControl {
             this.ngModelChange.emit(this.ngModel);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: InputControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: InputControl, isStandalone: true, selector: "input-control", inputs: { type: "type", title: "title", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", required: "required", deFocus: "deFocus", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", readonly: "readonly", search: "search", price: "price", maxlength: "maxlength", ngModel: "ngModel", advSearch: "advSearch", inputLoader: "inputLoader", useReactiveForms: "useReactiveForms", disabled: "disabled" }, outputs: { blurEvent: "blurEvent", selectionCleared: "selectionCleared", inputChange: "inputChange", ngModelChange: "ngModelChange", searchClicked: "searchClicked", advSearchClicked: "advSearchClicked" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: InputControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: InputControl, isStandalone: true, selector: "input-control", inputs: { type: "type", title: "title", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", required: "required", deFocus: "deFocus", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", readonly: "readonly", search: "search", price: "price", maxlength: "maxlength", ngModel: "ngModel", advSearch: "advSearch", inputLoader: "inputLoader", useReactiveForms: "useReactiveForms", disabled: "disabled" }, outputs: { blurEvent: "blurEvent", selectionCleared: "selectionCleared", inputChange: "inputChange", ngModelChange: "ngModelChange", searchClicked: "searchClicked", advSearchClicked: "advSearchClicked" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputControl),
@@ -2487,7 +2487,7 @@ class InputControl {
             },
         ], ngImport: i0, template: "<div class=\"form-group input\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\r\n  @if (title) {\r\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n  }\r\n\r\n  @if (useReactiveForms) {\r\n  <input [type]=\"getInputType()\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\r\n    [ngClass]=\"{ 'is-invalid': error }\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [readonly]=\"readonly\"\r\n    (keypress)=\"onKeyPress($event)\" [attr.autocomplete]=\"autocomplete || null\" />\r\n  } @else {\r\n  <input [type]=\"getInputType()\" class=\"form-control\" [placeholder]=\"placeholder\" [(ngModel)]=\"ngModel\"\r\n    [ngClass]=\"{ 'is-invalid': error }\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [readonly]=\"readonly\"\r\n    (keypress)=\"onKeyPress($event)\" />\r\n  }\r\n  @if(deFocus){\r\n  <span class=\"focus-border\"></span>\r\n  }\r\n  @if (!inputLoader && showClearButton()) {\r\n  <label class=\"clear\" (click)=\"resetInput()\">\r\n    <i class=\"he he-close\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (price) {\r\n  <label class=\"ls-price\">\r\n    <i class=\"he he-rupee\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (type === 'search') {\r\n  <label class=\"ls-search\">\r\n    <i class=\"he he-search\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (advSearch) {\r\n  <label class=\"rs-search\" (click)=\"onAdvSearchClick()\">\r\n    <i class=\"he he-search-adv\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (search) {\r\n  <label class=\"rs-search\" (click)=\"onSearchClick()\">\r\n    <i class=\"he he-search\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (type === 'password' && !disabled) {\r\n  <label class=\"toggle-eye\" (click)=\"passwordVisible()\">\r\n    <i class=\"he\" [ngClass]=\"showPassword ? 'he-eye-off' : 'he-eye'\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n\r\n  @if (error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n</div>", styles: [".form-group .toggle-eye,.form-group ::ng-deep .toggle-eye{top:28px;right:10px;padding:5px;line-height:1;position:absolute}.form-group .toggle-eye .he,.form-group ::ng-deep .toggle-eye .he{font-size:18px}.form-group .toggle-eye .rb,.form-group ::ng-deep .toggle-eye .rb{font-size:17px;color:#5f6554}.form-group.no-label .toggle-eye{top:9px}.form-group.group-sm .toggle-eye{top:5px}.form-group.left-input-search .ls-search{top:9px;left:10px;position:absolute}.form-group.left-input-search .ls-search .he{font-size:1em;color:#807a7a;font-weight:600}.form-group.left-input-search .form-control{text-indent:1.25rem}.form-group.right-input-search .rs-search{top:27px;right:7px;padding:5px;width:30px;height:30px;display:grid;cursor:pointer;position:absolute;border-radius:5px;place-items:center}.form-group.right-input-search .rs-search i{font-size:16px;color:#807a7a}.form-group.right-input-search .rs-search:hover{background:#ff7f5d1a}.form-group.right-input-search .rs-search:hover i{color:#ff7f5d}.form-group.right-input-search .rs-search+.rs-search{right:37px}.form-group.right-input-search .clear{right:2.5rem}.form-group.right-input-search .form-control{padding-right:4rem}.form-group.right-input-search.no-label .rs-search{top:7px}.form-group.right-input-search.no-label .clear{top:10px}.form-group.right-input-search.group-sm.no-label .rs-search{top:4px;width:27px;height:27px}.form-group.right-input-search.group-sm.no-label .rs-search i{font-size:14px}.form-group.right-input-search.group-sm.no-label .clear{top:6px;right:2.25rem}.form-group.right-input-search.double-search .form-control{padding-right:6rem}.form-group.right-input-search.double-search .clear{right:4.5rem}.form-group.price-input .form-control{text-indent:1rem}.form-group.price-input .ls-price{top:21px;padding:8px;display:flex;color:#2ba599;position:absolute;align-items:center;height:calc(var(--input-height) - 2px)}.form-group.price-input .ls-price i{top:1px;color:inherit;cursor:default;font-size:12px}.form-group .clear{z-index:4;cursor:pointer;background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: InputControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: InputControl, decorators: [{
             type: Component,
             args: [{ selector: "input-control", standalone: true, imports: [
                         CommonModule,
@@ -2567,10 +2567,10 @@ class ClickOutsideDirective {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClickOutsideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clickOutside]',
@@ -2980,8 +2980,8 @@ class MultiselectControl {
             this.inputControl.setValue(this.selectedItemList, { emitEvent: false });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiselectControl, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: MultiselectControl, isStandalone: true, selector: "multiselect-control", inputs: { title: "title", selectedItems: "selectedItems", required: "required", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", deFocus: "deFocus", optionValueProperty: "optionValueProperty", inputLoader: "inputLoader", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", showSearch: "showSearch", showSelectAll: "showSelectAll", optionDisplayProperty: "optionDisplayProperty", options: "options", readonly: "readonly", disabled: "disabled" }, outputs: { optionsSelected: "optionsSelected", selectionCleared: "selectionCleared", blurEvent: "blurEvent" }, host: { listeners: { "window:keydown": "handleWindowKeydown($event)" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MultiselectControl, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: MultiselectControl, isStandalone: true, selector: "multiselect-control", inputs: { title: "title", selectedItems: "selectedItems", required: "required", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", deFocus: "deFocus", optionValueProperty: "optionValueProperty", inputLoader: "inputLoader", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", showSearch: "showSearch", showSelectAll: "showSelectAll", optionDisplayProperty: "optionDisplayProperty", options: "options", readonly: "readonly", disabled: "disabled" }, outputs: { optionsSelected: "optionsSelected", selectionCleared: "selectionCleared", blurEvent: "blurEvent" }, host: { listeners: { "window:keydown": "handleWindowKeydown($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MultiselectControl),
@@ -2989,7 +2989,7 @@ class MultiselectControl {
             },
         ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group multi-select\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\"\r\n  (clickOutside)=\"selectListOutsideClick()\">\r\n  @if (title) {\r\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n  }\r\n\r\n  <input #input type=\"text\" class=\"form-control\" placeholder=\"{{ placeholder }}\" [formControl]=\"inputControl\"\r\n    [ngClass]=\"{'is-invalid': error}\" (blur)=\"onBlur($event)\" (click)=\"toggleDropdown()\" readonly\r\n    [value]=\"selectedItemList\" (keydown)=\"onKeyDown($event)\" [attr.autocomplete]=\"autocomplete || null\" />\r\n\r\n  @if (deFocus) {\r\n  <span class=\"focus-border\"></span>\r\n  }\r\n\r\n  @if (!inputLoader && isDropdownOpen && clearVal && selectedItems.length > 0) {\r\n  <label class=\"clear\" (click)=\"resetSelection()\">\r\n    <i class=\"he he-close\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (!inputLoader) {\r\n  <label class=\"arrow\">\r\n    <i class=\"he he-chevron-down\"></i>\r\n  </label> }\r\n\r\n  @if (isDropdownOpen) {\r\n  <div #dropdown class=\"option-list\">\r\n    @if (showSearch && options.length > 0) {\r\n    <div class=\"list-filter\">\r\n      @if (showSelectAll) {\r\n      <div>\r\n        <label class=\"checkbox-container select-all\">\r\n          <input type=\"checkbox\" [checked]=\"selectAllChecked\" (change)=\"onSelectAllChange($event)\" tabindex=\"-1\" />\r\n          <span class=\"checkmark\"></span>\r\n        </label>\r\n      </div>\r\n      }\r\n      <div class=\"form-group\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search...\" (input)=\"handleInput($event) \"\r\n          (keydown)=\"onKeyDown($event)\" />\r\n      </div>\r\n      <div class=\"ms-close\">\r\n        <button type=\"button\" class=\"icon-button\">\r\n          <a (click)=\"onCloseDropdown()\"><i class=\"he he-close\"></i></a>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"list-wrap\">\r\n      @for (option of filteredOptions; track option[optionDisplayProperty]; let i = $index) {\r\n      <div class=\"list-item\" (change)=\"toggleCheckbox(option)\" [ngClass]=\"{ 'highlighted': i === highlightedIndex }\">\r\n        <label class=\"checkbox-container multi-select\">\r\n          <input type=\"checkbox\" [checked]=\"isSelected(option)\" tabindex=\"-1\" />\r\n          <span class=\"checkmark\"></span>\r\n          {{ option[optionDisplayProperty] }}\r\n        </label>\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    @if (filteredOptions.length === 0) {\r\n    <div class=\"no-results\">No results found</div>\r\n    }\r\n  </div>\r\n  }\r\n\r\n  @if (inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n\r\n  @if (error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n</div>", styles: [".form-group.multi-select .option-list .list-filter{gap:10px;display:flex;padding:9px 10px;align-items:center;border-bottom:1px solid #efefef}.form-group.multi-select .option-list .list-filter .checkbox-container.select-all{top:-10px;margin-bottom:0;padding-left:22px}.form-group.multi-select .option-list .list-filter .form-group{margin-bottom:0;flex:1;min-width:0}.form-group.multi-select .option-list .list-filter .form-group .form-control{height:34px;border-radius:5px;background:#fff;padding:.275rem .5rem;border:1px solid #cccccc!important}.form-group.multi-select .option-list .list-filter .form-group .form-control::placeholder{font-size:.925em}.form-group.multi-select .option-list .list-filter .ms-close .icon-button{background:#f0f0f0}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a{width:28px;height:28px;display:grid;cursor:pointer;position:relative;border-radius:5px;place-items:center;text-decoration:none;border:1px solid #efefef;box-shadow:0 0 3px #ebebeb}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a i{font-size:14px}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a:hover{background:#ff7f5d1a}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a:hover i{color:#ff7f5d}.form-group.multi-select .option-list .list-wrap{overflow:auto;max-height:180px}.form-group.multi-select .option-list .list-item{padding:0}.form-group.multi-select .option-list .list-item .checkbox-container.multi-select{width:100%;font-size:1em;margin-bottom:0;font-weight:400;color:#584e4e;letter-spacing:.015rem;padding:10px 10px 10px 40px}.form-group.multi-select .option-list .list-item .checkbox-container.multi-select .checkmark{top:9px;left:10px}.form-group.multi-select .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.multi-select .clear{right:30px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiselectControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MultiselectControl, decorators: [{
             type: Component,
             args: [{ selector: "multiselect-control", standalone: true, imports: [
                         CommonModule,
@@ -3070,6 +3070,7 @@ class PaginatedAutocompleteControl {
     readonly = false;
     isAddNewItem = false;
     optionDisplayProperty = "displayname";
+    showFavouriteIcon = false;
     /** 'scroll' = infinite scroll, 'click' = "Load more" button, 'arrow' = ←/→ keys */
     paginationType = 'scroll';
     pageSize = 10;
@@ -3145,6 +3146,7 @@ class PaginatedAutocompleteControl {
     }
     pageChange = new EventEmitter();
     optionSelected = new EventEmitter();
+    favouriteToggle = new EventEmitter();
     selectionCleared = new EventEmitter();
     blurEvent = new EventEmitter();
     optionPatched = new EventEmitter();
@@ -3502,7 +3504,17 @@ class PaginatedAutocompleteControl {
         }
         this.loadPage(1, term);
     }
-    onBlur() {
+    onFavouriteClick(event, option) {
+        event.stopPropagation();
+        if (!this.readonly && !this.controlDisabled) {
+            this.favouriteToggle.emit(option);
+        }
+    }
+    onBlur(event) {
+        const next = event?.relatedTarget;
+        if (next && (next === this.inputElement?.nativeElement ||
+            this.dropdownElement?.nativeElement.contains(next)))
+            return;
         this.blurEvent.emit();
         this.onTouched();
         // mousedown fires before blur — if no dropdown interaction flagged itself,
@@ -3680,16 +3692,16 @@ class PaginatedAutocompleteControl {
             this.loadPage(1, "");
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PaginatedAutocompleteControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PaginatedAutocompleteControl, isStandalone: true, selector: "paginated-autocomplete-control", inputs: { title: "title", required: "required", placeholder: "placeholder", customClass: "customClass", showSearchIcon: "showSearchIcon", clearVal: "clearVal", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", inputLoader: "inputLoader", readonly: "readonly", isAddNewItem: "isAddNewItem", optionDisplayProperty: "optionDisplayProperty", paginationType: "paginationType", pageSize: "pageSize", searchDebounce: "searchDebounce", minSearchLength: "minSearchLength", refreshOnOpen: "refreshOnOpen", totalCount: "totalCount", options: "options", disabled: "disabled" }, outputs: { pageChange: "pageChange", optionSelected: "optionSelected", selectionCleared: "selectionCleared", blurEvent: "blurEvent", optionPatched: "optionPatched", addNewItemClicked: "addNewItemClicked" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PaginatedAutocompleteControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: PaginatedAutocompleteControl, isStandalone: true, selector: "paginated-autocomplete-control", inputs: { title: "title", required: "required", placeholder: "placeholder", customClass: "customClass", showSearchIcon: "showSearchIcon", clearVal: "clearVal", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", inputLoader: "inputLoader", readonly: "readonly", isAddNewItem: "isAddNewItem", optionDisplayProperty: "optionDisplayProperty", showFavouriteIcon: "showFavouriteIcon", paginationType: "paginationType", pageSize: "pageSize", searchDebounce: "searchDebounce", minSearchLength: "minSearchLength", refreshOnOpen: "refreshOnOpen", totalCount: "totalCount", options: "options", disabled: "disabled" }, outputs: { pageChange: "pageChange", optionSelected: "optionSelected", favouriteToggle: "favouriteToggle", selectionCleared: "selectionCleared", blurEvent: "blurEvent", optionPatched: "optionPatched", addNewItemClicked: "addNewItemClicked" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: PaginatedAutocompleteControl,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }], ngImport: i0, template: "<div class=\"form-group auto-complete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\"\r\n  [class.no-label]=\"!title\" [class.with-search-icon]=\"showSearchIcon\">\r\n  @if (title) {\r\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n  }\r\n\r\n  <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\r\n    (input)=\"onUserType($event)\" (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" (click)=\"onInputClick()\"\r\n    [ngClass]=\"{'is-invalid': error}\" [attr.autocomplete]=\"autocomplete || null\" [readonly]=\"readonly\" />\r\n\r\n  <span class=\"focus-border\"></span>\r\n\r\n  @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\r\n  <label class=\"clear\" (mousedown)=\"onOptionMouseDown()\" (click)=\"resetInput()\">\r\n    <i class=\"he he-close\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (showSearchIcon && !readonly && !controlDisabled) {\r\n  <label class=\"rs-search\" (mousedown)=\"onOptionMouseDown()\" (click)=\"onSearchIconClick($event)\">\r\n    <i class=\"he he-search\"></i>\r\n  </label>\r\n  } @else if (!inputLoader) {\r\n  <label class=\"arrow\">\r\n    <i class=\"he he-chevron-down\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (isDropdownOpen) {\r\n  <div #dropdownElement class=\"option-list\" [class.fixed-height]=\"paginationType === 'arrow' && totalPages > 1\"\r\n    (mousedown)=\"onOptionMouseDown()\" (scroll)=\"onListScroll($event)\">\r\n    @if (options.length === 0 && !isPageLoading && !loadErrorMessage) {\r\n    <div class=\"no-results\">\r\n      <div>No results found</div>\r\n      @if (isAddNewItem) {\r\n      <div (click)=\"onAddNewItemClick()\" class=\"btn-new\">\r\n        Add New Item\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <div class=\"list-body\" (scroll)=\"onListBodyScroll($event)\">\r\n      @for (suggestion of options; track suggestion.id; let i = $index) {\r\n      <div class=\"list-item\" [ngClass]=\"{\r\n                'active': suggestion === selectedItems,\r\n                'highlighted': highlightedIndex === i\r\n              }\" (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\r\n        {{ suggestion[optionDisplayProperty] }}\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    @if (isPageLoading) {\r\n    <div class=\"list-loading\">Loading...</div>\r\n    }\r\n\r\n    @if (loadErrorMessage) {\r\n    <div class=\"load-error\" (click)=\"retryLoad($event)\">\r\n      {{ loadErrorMessage }} \u00B7 <span class=\"retry\">Retry</span>\r\n    </div>\r\n    }\r\n\r\n    @if (paginationType === 'click' && hasMore && !isPageLoading && !loadErrorMessage) {\r\n    <div class=\"load-more\" (click)=\"onLoadMoreClick($event)\">\r\n      Load more ({{ options.length }} of {{ totalCount }})\r\n    </div>\r\n    }\r\n\r\n    @if (totalCount > 0 && options.length > 0 && !loadErrorMessage && !(paginationType === 'click' && hasMore)) {\r\n    <div class=\"list-footer\" [class.pager-footer]=\"paginationType === 'arrow'\">\r\n      @if (paginationType === 'arrow') {\r\n      <span class=\"range\">{{ pageRangeStart }} - {{ pageRangeEnd }} of {{ totalCount }}</span>\r\n      <span class=\"pager-nav\">\r\n        <span class=\"pager-btn\" [class.disabled]=\"currentPage <= 1\" (click)=\"prevArrowPage()\">\r\n          <i class=\"he he-chevron-left\"></i>\r\n        </span>\r\n        <span class=\"pager-btn\" [class.disabled]=\"currentPage >= totalPages\" (click)=\"nextArrowPage()\">\r\n          <i class=\"he he-chevron-right\"></i>\r\n        </span>\r\n      </span>\r\n      } @else {\r\n      {{ options.length }} of {{ totalCount }}\r\n      @if (hasMore && paginationType === 'scroll') {\r\n      <span> \u00B7 scroll for more</span>\r\n      }\r\n      }\r\n    </div>\r\n    }\r\n    }\r\n  </div>\r\n  }\r\n\r\n  @if (inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n\r\n  @if (error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n</div>\r\n", styles: [".form-group.auto-complete.with-search-icon .form-control{padding-right:4rem}.form-group.auto-complete.with-search-icon .rs-search{top:34px;right:7px;z-index:2;padding:5px;width:30px;height:30px;display:grid;cursor:pointer;position:absolute;border-radius:5px;place-items:center}.form-group.auto-complete.with-search-icon .rs-search i{font-size:16px;color:#807a7a}.form-group.auto-complete.with-search-icon .rs-search:hover{background:#ff7f5d1a}.form-group.auto-complete.with-search-icon .rs-search:hover i{color:#ff7f5d}.form-group.auto-complete.with-search-icon .clear{right:2.5rem}.form-group.auto-complete.with-search-icon.no-label .rs-search{top:7px}.form-group.auto-complete.with-search-icon.no-label .clear{top:10px}.form-group.auto-complete.with-search-icon.group-sm .rs-search{top:29px}.form-group.auto-complete.with-search-icon.group-sm.no-label .rs-search{top:4px;width:27px;height:27px}.form-group.auto-complete.with-search-icon.group-sm.no-label .rs-search i{font-size:14px}.form-group.auto-complete.with-search-icon.group-sm.no-label .clear{top:6px;right:2.25rem}.form-group.auto-complete:not(.with-search-icon) .clear{right:7px}.form-group.auto-complete .option-list{max-height:234px;overflow-y:unset}.form-group.auto-complete .option-list.fixed-height{height:234px;display:flex;flex-direction:column}.form-group.auto-complete .option-list.fixed-height .list-item,.form-group.auto-complete .option-list.fixed-height .no-results,.form-group.auto-complete .option-list.fixed-height .list-loading,.form-group.auto-complete .option-list.fixed-height .load-error{flex-shrink:0}.form-group.auto-complete .option-list.fixed-height .list-footer{margin-top:auto}.form-group.auto-complete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.auto-complete .option-list .list-loading{padding:8px 10px;color:#9b9b9b;text-align:center;font-size:12px}.form-group.auto-complete .option-list .load-more{padding:8px 10px;text-align:center;cursor:pointer;color:#0d6efd;font-size:13px;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.auto-complete .option-list .load-more:hover{background-color:#f5f5f5}.form-group.auto-complete .option-list .load-error{padding:8px 10px;text-align:center;font-size:12px;color:#dc3545;cursor:pointer;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.auto-complete .option-list .load-error .retry{color:#0d6efd;text-decoration:underline}.form-group.auto-complete .option-list .load-error:hover{background-color:#f5f5f5}.form-group.auto-complete .option-list .list-body{overflow-y:auto;height:calc(100% - 38px);max-height:calc(100% - 38px)}.form-group.auto-complete .option-list .list-footer{bottom:0;position:sticky;padding:4px 10px;text-align:center;font-size:11px;color:#9b9b9b;background-color:#fff;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.auto-complete .option-list .list-footer .pager-nav{display:inline-flex;align-items:center;gap:6px}.form-group.auto-complete .option-list .list-footer .range{padding:0;color:#5f6368;font-size:12px}.form-group.auto-complete .option-list .list-footer .pager-btn{width:24px;height:24px;border-radius:4px;border:1px solid #dadce0;display:inline-flex;align-items:center;justify-content:center;line-height:1;cursor:pointer;background-color:#fff}.form-group.auto-complete .option-list .list-footer .pager-btn .he{top:.5px;font-size:9px;color:#2ba599;font-weight:600}.form-group.auto-complete .option-list .list-footer .pager-btn:hover{background-color:#f5f5f5}.form-group.auto-complete .option-list .list-footer .pager-btn.disabled{opacity:.65;cursor:not-allowed}.form-group.auto-complete .option-list .list-footer .pager-btn.disabled .he{color:#ccc;cursor:inherit}.form-group.auto-complete .option-list .list-footer.pager-footer{gap:1rem;height:38px;display:flex;justify-content:space-between;align-items:center;padding:0 10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }], ngImport: i0, template: "<div class=\"form-group auto-complete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\"\r\n  [class.no-label]=\"!title\" [class.with-search-icon]=\"showSearchIcon\">\r\n  @if (title) {\r\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n  }\r\n\r\n  <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\r\n    (input)=\"onUserType($event)\" (blur)=\"onBlur($event)\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" (click)=\"onInputClick()\"\r\n    [ngClass]=\"{'is-invalid': error}\" [attr.autocomplete]=\"autocomplete || null\" [readonly]=\"readonly\" />\r\n\r\n  <span class=\"focus-border\"></span>\r\n\r\n  @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\r\n  <label class=\"clear\" (mousedown)=\"onOptionMouseDown()\" (click)=\"resetInput()\">\r\n    <i class=\"he he-close\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (showSearchIcon && !readonly && !controlDisabled) {\r\n  <label class=\"rs-search\" (mousedown)=\"onOptionMouseDown()\" (click)=\"onSearchIconClick($event)\">\r\n    <i class=\"he he-search\"></i>\r\n  </label>\r\n  } @else if (!inputLoader) {\r\n  <label class=\"arrow\">\r\n    <i class=\"he he-chevron-down\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (isDropdownOpen) {\r\n  <div #dropdownElement class=\"option-list\" [class.fixed-height]=\"paginationType === 'arrow' && totalPages > 1\"\r\n    (mousedown)=\"onOptionMouseDown()\" (scroll)=\"onListScroll($event)\">\r\n    @if (options.length === 0 && !isPageLoading && !loadErrorMessage) {\r\n    <div class=\"no-results\">\r\n      <div>No results found</div>\r\n      @if (isAddNewItem) {\r\n      <div (click)=\"onAddNewItemClick()\" class=\"btn-new\">\r\n        Add New Item\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <div class=\"list-body\" (scroll)=\"onListBodyScroll($event)\">\r\n      @for (suggestion of options; track suggestion.id; let i = $index) {\r\n      <div class=\"list-item\" [ngClass]=\"{\r\n                'active': suggestion === selectedItems,\r\n                'highlighted': highlightedIndex === i\r\n              }\" [class.with-favourite]=\"showFavouriteIcon\"\r\n        (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\r\n        @if (showFavouriteIcon) {\r\n        @let isFavourite = !!suggestion.isFavourite;\r\n        <button type=\"button\" class=\"option-favourite\" [attr.aria-pressed]=\"isFavourite\"\r\n          [attr.aria-label]=\"'Favourite ' + suggestion[optionDisplayProperty]\"\r\n          [title]=\"isFavourite ? 'Remove favourite' : 'Add favourite'\"\r\n          [disabled]=\"readonly || controlDisabled\"\r\n          (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\r\n          (click)=\"onFavouriteClick($event, suggestion)\" (blur)=\"onBlur($event)\"\r\n          (keydown.escape)=\"$event.stopPropagation(); inputElement.focus(); isDropdownOpen = false\">\r\n          <i class=\"he\" [class.he-star-o]=\"isFavourite\" [class.he-star]=\"!isFavourite\" aria-hidden=\"true\"></i>\r\n        </button>\r\n        }\r\n        {{ suggestion[optionDisplayProperty] }}\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    @if (isPageLoading) {\r\n    <div class=\"list-loading\">Loading...</div>\r\n    }\r\n\r\n    @if (loadErrorMessage) {\r\n    <div class=\"load-error\" (click)=\"retryLoad($event)\">\r\n      {{ loadErrorMessage }} \u00B7 <span class=\"retry\">Retry</span>\r\n    </div>\r\n    }\r\n\r\n    @if (paginationType === 'click' && hasMore && !isPageLoading && !loadErrorMessage) {\r\n    <div class=\"load-more\" (click)=\"onLoadMoreClick($event)\">\r\n      Load more ({{ options.length }} of {{ totalCount }})\r\n    </div>\r\n    }\r\n\r\n    @if (totalCount > 0 && options.length > 0 && !loadErrorMessage && !(paginationType === 'click' && hasMore)) {\r\n    <div class=\"list-footer\" [class.pager-footer]=\"paginationType === 'arrow'\">\r\n      @if (paginationType === 'arrow') {\r\n      <span class=\"range\">{{ pageRangeStart }} - {{ pageRangeEnd }} of {{ totalCount }}</span>\r\n      <span class=\"pager-nav\">\r\n        <span class=\"pager-btn\" [class.disabled]=\"currentPage <= 1\" (click)=\"prevArrowPage()\">\r\n          <i class=\"he he-chevron-left\"></i>\r\n        </span>\r\n        <span class=\"pager-btn\" [class.disabled]=\"currentPage >= totalPages\" (click)=\"nextArrowPage()\">\r\n          <i class=\"he he-chevron-right\"></i>\r\n        </span>\r\n      </span>\r\n      } @else {\r\n      {{ options.length }} of {{ totalCount }}\r\n      @if (hasMore && paginationType === 'scroll') {\r\n      <span> \u00B7 scroll for more</span>\r\n      }\r\n      }\r\n    </div>\r\n    }\r\n    }\r\n  </div>\r\n  }\r\n\r\n  @if (inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n\r\n  @if (error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n</div>\r\n", styles: [".form-group.auto-complete.with-search-icon .form-control{padding-right:4rem}.form-group.auto-complete.with-search-icon .rs-search{top:34px;right:7px;z-index:2;padding:5px;width:30px;height:30px;display:grid;cursor:pointer;position:absolute;border-radius:5px;place-items:center}.form-group.auto-complete.with-search-icon .rs-search i{font-size:16px;color:#807a7a}.form-group.auto-complete.with-search-icon .rs-search:hover{background:#ff7f5d1a}.form-group.auto-complete.with-search-icon .rs-search:hover i{color:#ff7f5d}.form-group.auto-complete.with-search-icon .clear{right:2.5rem}.form-group.auto-complete.with-search-icon.no-label .rs-search{top:7px}.form-group.auto-complete.with-search-icon.no-label .clear{top:10px}.form-group.auto-complete.with-search-icon.group-sm .rs-search{top:29px}.form-group.auto-complete.with-search-icon.group-sm.no-label .rs-search{top:4px;width:27px;height:27px}.form-group.auto-complete.with-search-icon.group-sm.no-label .rs-search i{font-size:14px}.form-group.auto-complete.with-search-icon.group-sm.no-label .clear{top:6px;right:2.25rem}.form-group.auto-complete:not(.with-search-icon) .clear{right:7px}.form-group.auto-complete .option-list{max-height:234px;overflow-y:unset}.form-group.auto-complete .option-list .list-item.with-favourite{display:flex;align-items:center;gap:8px}.form-group.auto-complete .option-list .option-favourite{flex:0 0 24px;align-self:center;padding:0;border:0;background:transparent;color:#c43f00}.form-group.auto-complete .option-list .option-favourite .he{top:auto;color:inherit}.form-group.auto-complete .option-list.fixed-height{height:234px;display:flex;flex-direction:column}.form-group.auto-complete .option-list.fixed-height .list-item,.form-group.auto-complete .option-list.fixed-height .no-results,.form-group.auto-complete .option-list.fixed-height .list-loading,.form-group.auto-complete .option-list.fixed-height .load-error{flex-shrink:0}.form-group.auto-complete .option-list.fixed-height .list-footer{margin-top:auto}.form-group.auto-complete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.auto-complete .option-list .list-loading{padding:8px 10px;color:#9b9b9b;text-align:center;font-size:12px}.form-group.auto-complete .option-list .load-more{padding:8px 10px;text-align:center;cursor:pointer;color:#0d6efd;font-size:13px;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.auto-complete .option-list .load-more:hover{background-color:#f5f5f5}.form-group.auto-complete .option-list .load-error{padding:8px 10px;text-align:center;font-size:12px;color:#dc3545;cursor:pointer;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.auto-complete .option-list .load-error .retry{color:#0d6efd;text-decoration:underline}.form-group.auto-complete .option-list .load-error:hover{background-color:#f5f5f5}.form-group.auto-complete .option-list .list-body{overflow-y:auto;height:calc(100% - 38px);max-height:calc(100% - 38px)}.form-group.auto-complete .option-list .list-footer{bottom:0;position:sticky;padding:4px 10px;text-align:center;font-size:11px;color:#9b9b9b;background-color:#fff;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.auto-complete .option-list .list-footer .pager-nav{display:inline-flex;align-items:center;gap:6px}.form-group.auto-complete .option-list .list-footer .range{padding:0;color:#5f6368;font-size:12px}.form-group.auto-complete .option-list .list-footer .pager-btn{width:24px;height:24px;border-radius:4px;border:1px solid #dadce0;display:inline-flex;align-items:center;justify-content:center;line-height:1;cursor:pointer;background-color:#fff}.form-group.auto-complete .option-list .list-footer .pager-btn .he{top:.5px;font-size:9px;color:#2ba599;font-weight:600}.form-group.auto-complete .option-list .list-footer .pager-btn:hover{background-color:#f5f5f5}.form-group.auto-complete .option-list .list-footer .pager-btn.disabled{opacity:.65;cursor:not-allowed}.form-group.auto-complete .option-list .list-footer .pager-btn.disabled .he{color:#ccc;cursor:inherit}.form-group.auto-complete .option-list .list-footer.pager-footer{gap:1rem;height:38px;display:flex;justify-content:space-between;align-items:center;padding:0 10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PaginatedAutocompleteControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PaginatedAutocompleteControl, decorators: [{
             type: Component,
             args: [{ selector: "paginated-autocomplete-control", standalone: true, imports: [CommonModule, ReactiveFormsModule], providers: [
                         {
@@ -3697,7 +3709,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                             useExisting: PaginatedAutocompleteControl,
                             multi: true,
                         },
-                    ], template: "<div class=\"form-group auto-complete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\"\r\n  [class.no-label]=\"!title\" [class.with-search-icon]=\"showSearchIcon\">\r\n  @if (title) {\r\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n  }\r\n\r\n  <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\r\n    (input)=\"onUserType($event)\" (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" (click)=\"onInputClick()\"\r\n    [ngClass]=\"{'is-invalid': error}\" [attr.autocomplete]=\"autocomplete || null\" [readonly]=\"readonly\" />\r\n\r\n  <span class=\"focus-border\"></span>\r\n\r\n  @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\r\n  <label class=\"clear\" (mousedown)=\"onOptionMouseDown()\" (click)=\"resetInput()\">\r\n    <i class=\"he he-close\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (showSearchIcon && !readonly && !controlDisabled) {\r\n  <label class=\"rs-search\" (mousedown)=\"onOptionMouseDown()\" (click)=\"onSearchIconClick($event)\">\r\n    <i class=\"he he-search\"></i>\r\n  </label>\r\n  } @else if (!inputLoader) {\r\n  <label class=\"arrow\">\r\n    <i class=\"he he-chevron-down\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (isDropdownOpen) {\r\n  <div #dropdownElement class=\"option-list\" [class.fixed-height]=\"paginationType === 'arrow' && totalPages > 1\"\r\n    (mousedown)=\"onOptionMouseDown()\" (scroll)=\"onListScroll($event)\">\r\n    @if (options.length === 0 && !isPageLoading && !loadErrorMessage) {\r\n    <div class=\"no-results\">\r\n      <div>No results found</div>\r\n      @if (isAddNewItem) {\r\n      <div (click)=\"onAddNewItemClick()\" class=\"btn-new\">\r\n        Add New Item\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <div class=\"list-body\" (scroll)=\"onListBodyScroll($event)\">\r\n      @for (suggestion of options; track suggestion.id; let i = $index) {\r\n      <div class=\"list-item\" [ngClass]=\"{\r\n                'active': suggestion === selectedItems,\r\n                'highlighted': highlightedIndex === i\r\n              }\" (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\r\n        {{ suggestion[optionDisplayProperty] }}\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    @if (isPageLoading) {\r\n    <div class=\"list-loading\">Loading...</div>\r\n    }\r\n\r\n    @if (loadErrorMessage) {\r\n    <div class=\"load-error\" (click)=\"retryLoad($event)\">\r\n      {{ loadErrorMessage }} \u00B7 <span class=\"retry\">Retry</span>\r\n    </div>\r\n    }\r\n\r\n    @if (paginationType === 'click' && hasMore && !isPageLoading && !loadErrorMessage) {\r\n    <div class=\"load-more\" (click)=\"onLoadMoreClick($event)\">\r\n      Load more ({{ options.length }} of {{ totalCount }})\r\n    </div>\r\n    }\r\n\r\n    @if (totalCount > 0 && options.length > 0 && !loadErrorMessage && !(paginationType === 'click' && hasMore)) {\r\n    <div class=\"list-footer\" [class.pager-footer]=\"paginationType === 'arrow'\">\r\n      @if (paginationType === 'arrow') {\r\n      <span class=\"range\">{{ pageRangeStart }} - {{ pageRangeEnd }} of {{ totalCount }}</span>\r\n      <span class=\"pager-nav\">\r\n        <span class=\"pager-btn\" [class.disabled]=\"currentPage <= 1\" (click)=\"prevArrowPage()\">\r\n          <i class=\"he he-chevron-left\"></i>\r\n        </span>\r\n        <span class=\"pager-btn\" [class.disabled]=\"currentPage >= totalPages\" (click)=\"nextArrowPage()\">\r\n          <i class=\"he he-chevron-right\"></i>\r\n        </span>\r\n      </span>\r\n      } @else {\r\n      {{ options.length }} of {{ totalCount }}\r\n      @if (hasMore && paginationType === 'scroll') {\r\n      <span> \u00B7 scroll for more</span>\r\n      }\r\n      }\r\n    </div>\r\n    }\r\n    }\r\n  </div>\r\n  }\r\n\r\n  @if (inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n\r\n  @if (error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n</div>\r\n", styles: [".form-group.auto-complete.with-search-icon .form-control{padding-right:4rem}.form-group.auto-complete.with-search-icon .rs-search{top:34px;right:7px;z-index:2;padding:5px;width:30px;height:30px;display:grid;cursor:pointer;position:absolute;border-radius:5px;place-items:center}.form-group.auto-complete.with-search-icon .rs-search i{font-size:16px;color:#807a7a}.form-group.auto-complete.with-search-icon .rs-search:hover{background:#ff7f5d1a}.form-group.auto-complete.with-search-icon .rs-search:hover i{color:#ff7f5d}.form-group.auto-complete.with-search-icon .clear{right:2.5rem}.form-group.auto-complete.with-search-icon.no-label .rs-search{top:7px}.form-group.auto-complete.with-search-icon.no-label .clear{top:10px}.form-group.auto-complete.with-search-icon.group-sm .rs-search{top:29px}.form-group.auto-complete.with-search-icon.group-sm.no-label .rs-search{top:4px;width:27px;height:27px}.form-group.auto-complete.with-search-icon.group-sm.no-label .rs-search i{font-size:14px}.form-group.auto-complete.with-search-icon.group-sm.no-label .clear{top:6px;right:2.25rem}.form-group.auto-complete:not(.with-search-icon) .clear{right:7px}.form-group.auto-complete .option-list{max-height:234px;overflow-y:unset}.form-group.auto-complete .option-list.fixed-height{height:234px;display:flex;flex-direction:column}.form-group.auto-complete .option-list.fixed-height .list-item,.form-group.auto-complete .option-list.fixed-height .no-results,.form-group.auto-complete .option-list.fixed-height .list-loading,.form-group.auto-complete .option-list.fixed-height .load-error{flex-shrink:0}.form-group.auto-complete .option-list.fixed-height .list-footer{margin-top:auto}.form-group.auto-complete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.auto-complete .option-list .list-loading{padding:8px 10px;color:#9b9b9b;text-align:center;font-size:12px}.form-group.auto-complete .option-list .load-more{padding:8px 10px;text-align:center;cursor:pointer;color:#0d6efd;font-size:13px;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.auto-complete .option-list .load-more:hover{background-color:#f5f5f5}.form-group.auto-complete .option-list .load-error{padding:8px 10px;text-align:center;font-size:12px;color:#dc3545;cursor:pointer;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.auto-complete .option-list .load-error .retry{color:#0d6efd;text-decoration:underline}.form-group.auto-complete .option-list .load-error:hover{background-color:#f5f5f5}.form-group.auto-complete .option-list .list-body{overflow-y:auto;height:calc(100% - 38px);max-height:calc(100% - 38px)}.form-group.auto-complete .option-list .list-footer{bottom:0;position:sticky;padding:4px 10px;text-align:center;font-size:11px;color:#9b9b9b;background-color:#fff;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.auto-complete .option-list .list-footer .pager-nav{display:inline-flex;align-items:center;gap:6px}.form-group.auto-complete .option-list .list-footer .range{padding:0;color:#5f6368;font-size:12px}.form-group.auto-complete .option-list .list-footer .pager-btn{width:24px;height:24px;border-radius:4px;border:1px solid #dadce0;display:inline-flex;align-items:center;justify-content:center;line-height:1;cursor:pointer;background-color:#fff}.form-group.auto-complete .option-list .list-footer .pager-btn .he{top:.5px;font-size:9px;color:#2ba599;font-weight:600}.form-group.auto-complete .option-list .list-footer .pager-btn:hover{background-color:#f5f5f5}.form-group.auto-complete .option-list .list-footer .pager-btn.disabled{opacity:.65;cursor:not-allowed}.form-group.auto-complete .option-list .list-footer .pager-btn.disabled .he{color:#ccc;cursor:inherit}.form-group.auto-complete .option-list .list-footer.pager-footer{gap:1rem;height:38px;display:flex;justify-content:space-between;align-items:center;padding:0 10px}\n"] }]
+                    ], template: "<div class=\"form-group auto-complete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\"\r\n  [class.no-label]=\"!title\" [class.with-search-icon]=\"showSearchIcon\">\r\n  @if (title) {\r\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n  }\r\n\r\n  <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\r\n    (input)=\"onUserType($event)\" (blur)=\"onBlur($event)\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" (click)=\"onInputClick()\"\r\n    [ngClass]=\"{'is-invalid': error}\" [attr.autocomplete]=\"autocomplete || null\" [readonly]=\"readonly\" />\r\n\r\n  <span class=\"focus-border\"></span>\r\n\r\n  @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\r\n  <label class=\"clear\" (mousedown)=\"onOptionMouseDown()\" (click)=\"resetInput()\">\r\n    <i class=\"he he-close\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (showSearchIcon && !readonly && !controlDisabled) {\r\n  <label class=\"rs-search\" (mousedown)=\"onOptionMouseDown()\" (click)=\"onSearchIconClick($event)\">\r\n    <i class=\"he he-search\"></i>\r\n  </label>\r\n  } @else if (!inputLoader) {\r\n  <label class=\"arrow\">\r\n    <i class=\"he he-chevron-down\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (isDropdownOpen) {\r\n  <div #dropdownElement class=\"option-list\" [class.fixed-height]=\"paginationType === 'arrow' && totalPages > 1\"\r\n    (mousedown)=\"onOptionMouseDown()\" (scroll)=\"onListScroll($event)\">\r\n    @if (options.length === 0 && !isPageLoading && !loadErrorMessage) {\r\n    <div class=\"no-results\">\r\n      <div>No results found</div>\r\n      @if (isAddNewItem) {\r\n      <div (click)=\"onAddNewItemClick()\" class=\"btn-new\">\r\n        Add New Item\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <div class=\"list-body\" (scroll)=\"onListBodyScroll($event)\">\r\n      @for (suggestion of options; track suggestion.id; let i = $index) {\r\n      <div class=\"list-item\" [ngClass]=\"{\r\n                'active': suggestion === selectedItems,\r\n                'highlighted': highlightedIndex === i\r\n              }\" [class.with-favourite]=\"showFavouriteIcon\"\r\n        (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\r\n        @if (showFavouriteIcon) {\r\n        @let isFavourite = !!suggestion.isFavourite;\r\n        <button type=\"button\" class=\"option-favourite\" [attr.aria-pressed]=\"isFavourite\"\r\n          [attr.aria-label]=\"'Favourite ' + suggestion[optionDisplayProperty]\"\r\n          [title]=\"isFavourite ? 'Remove favourite' : 'Add favourite'\"\r\n          [disabled]=\"readonly || controlDisabled\"\r\n          (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\r\n          (click)=\"onFavouriteClick($event, suggestion)\" (blur)=\"onBlur($event)\"\r\n          (keydown.escape)=\"$event.stopPropagation(); inputElement.focus(); isDropdownOpen = false\">\r\n          <i class=\"he\" [class.he-star-o]=\"isFavourite\" [class.he-star]=\"!isFavourite\" aria-hidden=\"true\"></i>\r\n        </button>\r\n        }\r\n        {{ suggestion[optionDisplayProperty] }}\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    @if (isPageLoading) {\r\n    <div class=\"list-loading\">Loading...</div>\r\n    }\r\n\r\n    @if (loadErrorMessage) {\r\n    <div class=\"load-error\" (click)=\"retryLoad($event)\">\r\n      {{ loadErrorMessage }} \u00B7 <span class=\"retry\">Retry</span>\r\n    </div>\r\n    }\r\n\r\n    @if (paginationType === 'click' && hasMore && !isPageLoading && !loadErrorMessage) {\r\n    <div class=\"load-more\" (click)=\"onLoadMoreClick($event)\">\r\n      Load more ({{ options.length }} of {{ totalCount }})\r\n    </div>\r\n    }\r\n\r\n    @if (totalCount > 0 && options.length > 0 && !loadErrorMessage && !(paginationType === 'click' && hasMore)) {\r\n    <div class=\"list-footer\" [class.pager-footer]=\"paginationType === 'arrow'\">\r\n      @if (paginationType === 'arrow') {\r\n      <span class=\"range\">{{ pageRangeStart }} - {{ pageRangeEnd }} of {{ totalCount }}</span>\r\n      <span class=\"pager-nav\">\r\n        <span class=\"pager-btn\" [class.disabled]=\"currentPage <= 1\" (click)=\"prevArrowPage()\">\r\n          <i class=\"he he-chevron-left\"></i>\r\n        </span>\r\n        <span class=\"pager-btn\" [class.disabled]=\"currentPage >= totalPages\" (click)=\"nextArrowPage()\">\r\n          <i class=\"he he-chevron-right\"></i>\r\n        </span>\r\n      </span>\r\n      } @else {\r\n      {{ options.length }} of {{ totalCount }}\r\n      @if (hasMore && paginationType === 'scroll') {\r\n      <span> \u00B7 scroll for more</span>\r\n      }\r\n      }\r\n    </div>\r\n    }\r\n    }\r\n  </div>\r\n  }\r\n\r\n  @if (inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n\r\n  @if (error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n</div>\r\n", styles: [".form-group.auto-complete.with-search-icon .form-control{padding-right:4rem}.form-group.auto-complete.with-search-icon .rs-search{top:34px;right:7px;z-index:2;padding:5px;width:30px;height:30px;display:grid;cursor:pointer;position:absolute;border-radius:5px;place-items:center}.form-group.auto-complete.with-search-icon .rs-search i{font-size:16px;color:#807a7a}.form-group.auto-complete.with-search-icon .rs-search:hover{background:#ff7f5d1a}.form-group.auto-complete.with-search-icon .rs-search:hover i{color:#ff7f5d}.form-group.auto-complete.with-search-icon .clear{right:2.5rem}.form-group.auto-complete.with-search-icon.no-label .rs-search{top:7px}.form-group.auto-complete.with-search-icon.no-label .clear{top:10px}.form-group.auto-complete.with-search-icon.group-sm .rs-search{top:29px}.form-group.auto-complete.with-search-icon.group-sm.no-label .rs-search{top:4px;width:27px;height:27px}.form-group.auto-complete.with-search-icon.group-sm.no-label .rs-search i{font-size:14px}.form-group.auto-complete.with-search-icon.group-sm.no-label .clear{top:6px;right:2.25rem}.form-group.auto-complete:not(.with-search-icon) .clear{right:7px}.form-group.auto-complete .option-list{max-height:234px;overflow-y:unset}.form-group.auto-complete .option-list .list-item.with-favourite{display:flex;align-items:center;gap:8px}.form-group.auto-complete .option-list .option-favourite{flex:0 0 24px;align-self:center;padding:0;border:0;background:transparent;color:#c43f00}.form-group.auto-complete .option-list .option-favourite .he{top:auto;color:inherit}.form-group.auto-complete .option-list.fixed-height{height:234px;display:flex;flex-direction:column}.form-group.auto-complete .option-list.fixed-height .list-item,.form-group.auto-complete .option-list.fixed-height .no-results,.form-group.auto-complete .option-list.fixed-height .list-loading,.form-group.auto-complete .option-list.fixed-height .load-error{flex-shrink:0}.form-group.auto-complete .option-list.fixed-height .list-footer{margin-top:auto}.form-group.auto-complete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.auto-complete .option-list .list-loading{padding:8px 10px;color:#9b9b9b;text-align:center;font-size:12px}.form-group.auto-complete .option-list .load-more{padding:8px 10px;text-align:center;cursor:pointer;color:#0d6efd;font-size:13px;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.auto-complete .option-list .load-more:hover{background-color:#f5f5f5}.form-group.auto-complete .option-list .load-error{padding:8px 10px;text-align:center;font-size:12px;color:#dc3545;cursor:pointer;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.auto-complete .option-list .load-error .retry{color:#0d6efd;text-decoration:underline}.form-group.auto-complete .option-list .load-error:hover{background-color:#f5f5f5}.form-group.auto-complete .option-list .list-body{overflow-y:auto;height:calc(100% - 38px);max-height:calc(100% - 38px)}.form-group.auto-complete .option-list .list-footer{bottom:0;position:sticky;padding:4px 10px;text-align:center;font-size:11px;color:#9b9b9b;background-color:#fff;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.auto-complete .option-list .list-footer .pager-nav{display:inline-flex;align-items:center;gap:6px}.form-group.auto-complete .option-list .list-footer .range{padding:0;color:#5f6368;font-size:12px}.form-group.auto-complete .option-list .list-footer .pager-btn{width:24px;height:24px;border-radius:4px;border:1px solid #dadce0;display:inline-flex;align-items:center;justify-content:center;line-height:1;cursor:pointer;background-color:#fff}.form-group.auto-complete .option-list .list-footer .pager-btn .he{top:.5px;font-size:9px;color:#2ba599;font-weight:600}.form-group.auto-complete .option-list .list-footer .pager-btn:hover{background-color:#f5f5f5}.form-group.auto-complete .option-list .list-footer .pager-btn.disabled{opacity:.65;cursor:not-allowed}.form-group.auto-complete .option-list .list-footer .pager-btn.disabled .he{color:#ccc;cursor:inherit}.form-group.auto-complete .option-list .list-footer.pager-footer{gap:1rem;height:38px;display:flex;justify-content:space-between;align-items:center;padding:0 10px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { title: [{
                 type: Input
             }], required: [{
@@ -3724,6 +3736,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], optionDisplayProperty: [{
                 type: Input
+            }], showFavouriteIcon: [{
+                type: Input
             }], paginationType: [{
                 type: Input
             }], pageSize: [{
@@ -3744,6 +3758,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Output
             }], optionSelected: [{
                 type: Output
+            }], favouriteToggle: [{
+                type: Output
             }], selectionCleared: [{
                 type: Output
             }], blurEvent: [{
@@ -3831,8 +3847,8 @@ class RadioControl {
     onBlur() {
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RadioControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: RadioControl, isStandalone: true, selector: "radio-control", inputs: { title: "title", options: "options", optionValueProperty: "optionValueProperty", optionDisplayProperty: "optionDisplayProperty", customClass: "customClass", direction: "direction", readonly: "readonly", disabled: "disabled", required: "required", error: "error", errorMessage: "errorMessage", name: "name" }, outputs: { radioChange: "radioChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RadioControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: RadioControl, isStandalone: true, selector: "radio-control", inputs: { title: "title", options: "options", optionValueProperty: "optionValueProperty", optionDisplayProperty: "optionDisplayProperty", customClass: "customClass", direction: "direction", readonly: "readonly", disabled: "disabled", required: "required", error: "error", errorMessage: "errorMessage", name: "name" }, outputs: { radioChange: "radioChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RadioControl),
@@ -3840,7 +3856,7 @@ class RadioControl {
             },
         ], ngImport: i0, template: "<div class=\"form-group radio\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" [class.disabled]=\"disabled\">\n  @if (title) {\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n  }\n\n  <div class=\"radio-group\" [class.vertical]=\"direction === 'vertical'\">\n    @for (option of options; track getValue(option)) {\n    <label class=\"radio-option\" [class.disabled]=\"disabled || readonly\" [class.checked]=\"isSelected(option)\">\n      <input type=\"radio\" [name]=\"name\" [checked]=\"isSelected(option)\" [disabled]=\"disabled || readonly\"\n        (change)=\"select(option)\" (blur)=\"onBlur()\" />\n      <span class=\"radio-mark\"></span>\n      <span class=\"radio-label\">{{ getLabel(option) }}</span>\n    </label>\n    }\n  </div>\n\n  @if (error) {\n  <div class=\"val-msg\">{{ errorMessage }}</div>\n  }\n</div>\n", styles: [".form-group.radio{position:relative;margin-bottom:1.25rem}.form-group.radio .radio-group{gap:.6rem 1.5rem;display:flex;flex-wrap:wrap;align-items:center;margin-top:4px}.form-group.radio .radio-group.vertical{flex-direction:column;align-items:flex-start}.form-group.radio .radio-option{gap:8px;display:inline-flex;cursor:pointer;color:#3c4148;min-height:20px;position:relative;padding-left:28px;align-items:center;-webkit-user-select:none;user-select:none;font-size:.975em}.form-group.radio .radio-option input[type=radio]{width:0;height:0;opacity:0;position:absolute;cursor:pointer}.form-group.radio .radio-option .radio-mark{top:50%;left:0;width:18px;height:18px;position:absolute;border-radius:50%;background:#fff;border:2px solid #b0b0b0;transform:translateY(-50%);transition:border-color .15s ease,box-shadow .15s ease}.form-group.radio .radio-option .radio-mark:after{top:50%;left:50%;width:10px;height:10px;content:\"\";position:absolute;border-radius:50%;background:#0d6f7d;transition:transform .15s ease;transform:translate(-50%,-50%) scale(0)}.form-group.radio .radio-option:hover input:not(:disabled)~.radio-mark{border-color:#0d6f7d}.form-group.radio .radio-option input:checked~.radio-mark{border-color:#0d6f7d}.form-group.radio .radio-option input:checked~.radio-mark:after{transform:translate(-50%,-50%) scale(1)}.form-group.radio .radio-option input:focus-visible~.radio-mark{box-shadow:0 0 0 3px #0d6f7d40}.form-group.radio .radio-option.disabled{opacity:.6;cursor:not-allowed}.form-group.radio .radio-option.disabled .radio-mark{cursor:not-allowed}.form-group.radio .val-msg{position:static;display:block;margin-top:6px;font-size:.9em;color:red;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RadioControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RadioControl, decorators: [{
             type: Component,
             args: [{ selector: "radio-control", standalone: true, imports: [CommonModule], providers: [
                         {
@@ -4192,16 +4208,16 @@ class SelectControl {
         this.valueBuffer = null;
         this.isDropdownOpen = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SelectControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SelectControl, isStandalone: true, selector: "select-control", inputs: { optionDisplayProperty: "optionDisplayProperty", required: "required", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", deFocus: "deFocus", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", inputLoader: "inputLoader", isAddNewItem: "isAddNewItem", title: "title", options: "options", readonly: "readonly", disabled: "disabled" }, outputs: { optionSelected: "optionSelected", selectionCleared: "selectionCleared", addNewItemClicked: "addNewItemClicked", blurEvent: "blurEvent", optionPatched: "optionPatched" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SelectControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: SelectControl, isStandalone: true, selector: "select-control", inputs: { optionDisplayProperty: "optionDisplayProperty", required: "required", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", deFocus: "deFocus", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", inputLoader: "inputLoader", isAddNewItem: "isAddNewItem", title: "title", options: "options", readonly: "readonly", disabled: "disabled" }, outputs: { optionSelected: "optionSelected", selectionCleared: "selectionCleared", addNewItemClicked: "addNewItemClicked", blurEvent: "blurEvent", optionPatched: "optionPatched" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectControl),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group select\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" (clickOutside)=\"selectListOutsideClick($event)\">\r\n  @if (title) {\r\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n  }\r\n\r\n  <input #input type=\"text\" class=\"form-control\" [placeholder]=\"placeholder ? placeholder : ''\"\r\n    [formControl]=\"inputControl\" [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\" (click)=\"toggleDropdown()\"\r\n    (keydown)=\"onKeyDown($event)\" readonly [attr.autocomplete]=\"autocomplete || null\" />\r\n\r\n  @if (deFocus) {\r\n  <span class=\"focus-border\"></span>\r\n  }\r\n\r\n  @if (!inputLoader && isDropdownOpen && selectedItem && clearVal) {\r\n  <label class=\"clear\" (click)=\"resetSelection()\">\r\n    <i class=\"he he-close\"></i>\r\n  </label> }\r\n  @if (!inputLoader) {\r\n  <label class=\"arrow\">\r\n    <i class=\"he he-chevron-down\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (isDropdownOpen) {\r\n  <div #dropdown class=\"option-list\">\r\n    <div class=\"no-results\" *ngIf=\"filteredOptions.length === 0\">\r\n      <div>No results found</div>\r\n      <div *ngIf=\"isAddNewItem\" (click)=\"onAddNewItemClick()\" class=\"btn-new\">Add New Item</div>\r\n    </div>\r\n\r\n    @for (option of filteredOptions; track option[optionDisplayProperty]; let idx = $index) {\r\n    <div class=\"list-item\" [ngClass]=\"{\r\n              'active': option === selectedItem,\r\n              'highlighted': idx === highlightedIndex\r\n            }\" (click)=\"selectOption(option)\">\r\n      @if (option.countryCode) {\r\n      <img src=\"https://flagcdn.com/w80/{{ option.countryCode }}.png\" width=\"20\" alt=\"{{ option.countryCode }} flag\" loading=\"lazy\" />\r\n      }\r\n      {{ option[optionDisplayProperty] }}\r\n    </div>\r\n    }\r\n\r\n  </div>\r\n  }\r\n\r\n  @if (inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n\r\n  @if (error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n</div>", styles: [".form-group.select .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.select .option-list .no-results .btn-new{padding:5px 0;cursor:pointer;color:#0d6efd}.form-group.select .clear{right:30px}\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"] }, { 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: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }] });
+        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group select\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" (clickOutside)=\"selectListOutsideClick($event)\">\n  @if (title) {\n    <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n  }\n\n  <input #input type=\"text\" class=\"form-control\" [placeholder]=\"placeholder ? placeholder : ''\"\n    [formControl]=\"inputControl\" [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\" (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeyDown($event)\" readonly [attr.autocomplete]=\"autocomplete || null\" />\n\n    @if (deFocus) {\n      <span class=\"focus-border\"></span>\n    }\n\n    @if (!inputLoader && isDropdownOpen && selectedItem && clearVal) {\n      <label class=\"clear\" (click)=\"resetSelection()\">\n        <i class=\"he he-close\"></i>\n      </label> }\n      @if (!inputLoader) {\n        <label class=\"arrow\">\n          <i class=\"he he-chevron-down\"></i>\n        </label>\n      }\n\n      @if (isDropdownOpen) {\n        <div #dropdown class=\"option-list\">\n          @if (filteredOptions.length === 0) {\n            <div class=\"no-results\">\n              <div>No results found</div>\n              @if (isAddNewItem) {\n                <div (click)=\"onAddNewItemClick()\" class=\"btn-new\">Add New Item</div>\n              }\n            </div>\n          }\n\n          @for (option of filteredOptions; track option[optionDisplayProperty]; let idx = $index) {\n    <div class=\"list-item\" [ngClass]=\"{\r\n              'active': option === selectedItem,\r\n              'highlighted': idx === highlightedIndex\r\n            }\" (click)=\"selectOption(option)\">\r\n              @if (option.countryCode) {\n                <img src=\"https://flagcdn.com/w80/{{ option.countryCode }}.png\" width=\"20\" alt=\"{{ option.countryCode }} flag\" loading=\"lazy\" />\n              }\n              {{ option[optionDisplayProperty] }}\n            </div>\n          }\n\n        </div>\n      }\n\n      @if (inputLoader) {\n        <label class=\"loader input-loader\"></label>\n      }\n\n      @if (error) {\n        <div class=\"val-msg\">{{ errorMessage }}</div>\n      }\n    </div>", styles: [".form-group.select .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.select .option-list .no-results .btn-new{padding:5px 0;cursor:pointer;color:#0d6efd}.form-group.select .clear{right:30px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SelectControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SelectControl, decorators: [{
             type: Component,
             args: [{ selector: "select-control", standalone: true, imports: [
                         CommonModule,
@@ -4213,7 +4229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                             useExisting: forwardRef(() => SelectControl),
                             multi: true,
                         },
-                    ], template: "<div class=\"form-group select\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" (clickOutside)=\"selectListOutsideClick($event)\">\r\n  @if (title) {\r\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n  }\r\n\r\n  <input #input type=\"text\" class=\"form-control\" [placeholder]=\"placeholder ? placeholder : ''\"\r\n    [formControl]=\"inputControl\" [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\" (click)=\"toggleDropdown()\"\r\n    (keydown)=\"onKeyDown($event)\" readonly [attr.autocomplete]=\"autocomplete || null\" />\r\n\r\n  @if (deFocus) {\r\n  <span class=\"focus-border\"></span>\r\n  }\r\n\r\n  @if (!inputLoader && isDropdownOpen && selectedItem && clearVal) {\r\n  <label class=\"clear\" (click)=\"resetSelection()\">\r\n    <i class=\"he he-close\"></i>\r\n  </label> }\r\n  @if (!inputLoader) {\r\n  <label class=\"arrow\">\r\n    <i class=\"he he-chevron-down\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (isDropdownOpen) {\r\n  <div #dropdown class=\"option-list\">\r\n    <div class=\"no-results\" *ngIf=\"filteredOptions.length === 0\">\r\n      <div>No results found</div>\r\n      <div *ngIf=\"isAddNewItem\" (click)=\"onAddNewItemClick()\" class=\"btn-new\">Add New Item</div>\r\n    </div>\r\n\r\n    @for (option of filteredOptions; track option[optionDisplayProperty]; let idx = $index) {\r\n    <div class=\"list-item\" [ngClass]=\"{\r\n              'active': option === selectedItem,\r\n              'highlighted': idx === highlightedIndex\r\n            }\" (click)=\"selectOption(option)\">\r\n      @if (option.countryCode) {\r\n      <img src=\"https://flagcdn.com/w80/{{ option.countryCode }}.png\" width=\"20\" alt=\"{{ option.countryCode }} flag\" loading=\"lazy\" />\r\n      }\r\n      {{ option[optionDisplayProperty] }}\r\n    </div>\r\n    }\r\n\r\n  </div>\r\n  }\r\n\r\n  @if (inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n\r\n  @if (error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n</div>", styles: [".form-group.select .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.select .option-list .no-results .btn-new{padding:5px 0;cursor:pointer;color:#0d6efd}.form-group.select .clear{right:30px}\n"] }]
+                    ], template: "<div class=\"form-group select\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" (clickOutside)=\"selectListOutsideClick($event)\">\n  @if (title) {\n    <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n  }\n\n  <input #input type=\"text\" class=\"form-control\" [placeholder]=\"placeholder ? placeholder : ''\"\n    [formControl]=\"inputControl\" [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\" (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeyDown($event)\" readonly [attr.autocomplete]=\"autocomplete || null\" />\n\n    @if (deFocus) {\n      <span class=\"focus-border\"></span>\n    }\n\n    @if (!inputLoader && isDropdownOpen && selectedItem && clearVal) {\n      <label class=\"clear\" (click)=\"resetSelection()\">\n        <i class=\"he he-close\"></i>\n      </label> }\n      @if (!inputLoader) {\n        <label class=\"arrow\">\n          <i class=\"he he-chevron-down\"></i>\n        </label>\n      }\n\n      @if (isDropdownOpen) {\n        <div #dropdown class=\"option-list\">\n          @if (filteredOptions.length === 0) {\n            <div class=\"no-results\">\n              <div>No results found</div>\n              @if (isAddNewItem) {\n                <div (click)=\"onAddNewItemClick()\" class=\"btn-new\">Add New Item</div>\n              }\n            </div>\n          }\n\n          @for (option of filteredOptions; track option[optionDisplayProperty]; let idx = $index) {\n    <div class=\"list-item\" [ngClass]=\"{\r\n              'active': option === selectedItem,\r\n              'highlighted': idx === highlightedIndex\r\n            }\" (click)=\"selectOption(option)\">\r\n              @if (option.countryCode) {\n                <img src=\"https://flagcdn.com/w80/{{ option.countryCode }}.png\" width=\"20\" alt=\"{{ option.countryCode }} flag\" loading=\"lazy\" />\n              }\n              {{ option[optionDisplayProperty] }}\n            </div>\n          }\n\n        </div>\n      }\n\n      @if (inputLoader) {\n        <label class=\"loader input-loader\"></label>\n      }\n\n      @if (error) {\n        <div class=\"val-msg\">{{ errorMessage }}</div>\n      }\n    </div>", styles: [".form-group.select .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.select .option-list .no-results .btn-new{padding:5px 0;cursor:pointer;color:#0d6efd}.form-group.select .clear{right:30px}\n"] }]
         }], propDecorators: { optionDisplayProperty: [{
                 type: Input
             }], required: [{
@@ -4327,8 +4343,8 @@ class SwitchControl {
             this.switchControl.enable();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SwitchControl, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SwitchControl, isStandalone: true, selector: "switch-control", inputs: { title: "title", customClass: "customClass", readonly: "readonly", disabled: "disabled", checked: "checked" }, outputs: { switchChange: "switchChange", blurEvent: "blurEvent" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SwitchControl, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: SwitchControl, isStandalone: true, selector: "switch-control", inputs: { title: "title", customClass: "customClass", readonly: "readonly", disabled: "disabled", checked: "checked" }, outputs: { switchChange: "switchChange", blurEvent: "blurEvent" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SwitchControl),
@@ -4336,7 +4352,7 @@ class SwitchControl {
             },
         ], viewQueries: [{ propertyName: "switchContainer", first: true, predicate: ["switchContainer"], descendants: true }], ngImport: i0, template: "<label class=\"switch-container\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" #switchContainer>\r\n    <input type=\"checkbox\" [formControl]=\"switchControl\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\r\n    <span class=\"switch-slider\"></span>\r\n</label>", styles: [".switch-container{top:4px;width:32px;height:14px;position:relative;display:inline-block}.switch-container .switch-slider{inset:0;cursor:pointer;transition:.4s;position:absolute;border-radius:34px;background-color:#ccc}.switch-container .switch-slider:before{left:0;content:\"\";width:18px;bottom:-2px;height:18px;transition:.4s;position:absolute;border-radius:50%;border:1px solid #cccccc;background-color:#fff}.switch-container input{width:0;height:0;opacity:0}.switch-container input:checked+.switch-slider{background-color:#12ceb7}.switch-container input:checked+.switch-slider:before{transform:translate(14px);border:1px solid #12ceb7}.switch-container input:focus+.switch-slider{box-shadow:0 0 1px #12ceb7}.switch-container.square .switch-slider{border-radius:0}.switch-container.square .switch-slider:before{border-radius:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SwitchControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SwitchControl, decorators: [{
             type: Component,
             args: [{ selector: 'switch-control', standalone: true, imports: [
                         CommonModule,
@@ -4615,16 +4631,16 @@ class RichTextEditor {
         selection.removeAllRanges();
         selection.addRange(this.savedRange);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RichTextEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: RichTextEditor, isStandalone: true, selector: "rich-text-editor", inputs: { features: "features", placeholder: "placeholder", readonly: "readonly" }, host: { listeners: { "document:selectionchange": "saveSelection()", "document:mousedown": "onDocumentMouseDown($event)" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RichTextEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: RichTextEditor, isStandalone: true, selector: "rich-text-editor", inputs: { features: "features", placeholder: "placeholder", readonly: "readonly" }, host: { listeners: { "document:selectionchange": "saveSelection()", "document:mousedown": "onDocumentMouseDown($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RichTextEditor),
                 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\" *ngIf=\"hasAny('bold', 'italic', 'underline')\">\n            <button type=\"button\" *ngIf=\"isVisible('bold')\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('bold')\" title=\"Bold\">\n                <i class=\"he he-bold\"></i>\n            </button>\n            <button type=\"button\" *ngIf=\"isVisible('italic')\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('italic')\" title=\"Italic\">\n                <i class=\"he he-italics\"></i>\n            </button>\n            <button type=\"button\" *ngIf=\"isVisible('underline')\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('underline')\" title=\"Underline\">\n                <i class=\"he he-underline\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\" *ngIf=\"hasAny('h1', 'h2')\">\n            <button type=\"button\" *ngIf=\"isVisible('h1')\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyBlockFormat('h1')\" title=\"Header 1\">\n                <i class=\"he he-heading-1\"></i>\n            </button>\n            <button type=\"button\" *ngIf=\"isVisible('h2')\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyBlockFormat('h2')\" title=\"Header 2\">\n                <i class=\"he he-heading-2\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items more-gap\" *ngIf=\"hasAny('textColor', 'backgroundColor')\">\n            <div class=\"color-tool\" *ngIf=\"isVisible('textColor')\">\n                <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"toggleColorMenu('text')\" title=\"Text Color\">\n                    <i class=\"he he-text-drop\"></i>\n                </button>\n                <div class=\"color-popover\" *ngIf=\"colorMenu === 'text'\">\n                    <div class=\"color-grid\">\n                        <button type=\"button\" class=\"color-swatch\" *ngFor=\"let c of palette\" [style.backgroundColor]=\"c\"\n                            [title]=\"c\" (mousedown)=\"$event.preventDefault()\" (click)=\"pickColor('text', c)\"></button>\n                    </div>\n                    <label class=\"color-custom\">\n                        <span>Custom</span>\n                        <input type=\"color\" (change)=\"pickCustomColor('text', $event)\" />\n                    </label>\n                </div>\n            </div>\n            <div class=\"color-tool\" *ngIf=\"isVisible('backgroundColor')\">\n                <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"toggleColorMenu('background')\" title=\"Background Color\">\n                    <i class=\"he he-background-drop\"></i>\n                </button>\n                <div class=\"color-popover\" *ngIf=\"colorMenu === 'background'\">\n                    <div class=\"color-grid\">\n                        <button type=\"button\" class=\"color-swatch\" *ngFor=\"let c of palette\" [style.backgroundColor]=\"c\"\n                            [title]=\"c\" (mousedown)=\"$event.preventDefault()\" (click)=\"pickColor('background', c)\"></button>\n                    </div>\n                    <label class=\"color-custom\">\n                        <span>Custom</span>\n                        <input type=\"color\" (change)=\"pickCustomColor('background', $event)\" />\n                    </label>\n                </div>\n            </div>\n        </div>\n        <div class=\"toolbar-items\" *ngIf=\"hasAny('alignLeft', 'alignCenter', 'alignRight', 'justify')\">\n            <button type=\"button\" *ngIf=\"isVisible('alignLeft')\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('left')\" title=\"Justify Left\">\n                <i class=\"he he-left-align\"></i>\n            </button>\n            <button type=\"button\" *ngIf=\"isVisible('alignCenter')\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('center')\" title=\"Justify Center\">\n                <i class=\"he he-center-align\"></i>\n            </button>\n            <button type=\"button\" *ngIf=\"isVisible('alignRight')\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('right')\" title=\"Justify Right\">\n                <i class=\"he he-right-align\"></i>\n            </button>\n            <button type=\"button\" *ngIf=\"isVisible('justify')\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('justify')\" title=\"Justify Full\">\n                <i class=\"he he-justify\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\" *ngIf=\"hasAny('indent', 'outdent')\">\n            <button type=\"button\" *ngIf=\"isVisible('indent')\" (mousedown)=\"$event.preventDefault()\" (click)=\"indent()\" title=\"Indent\">\n                <i class=\"he he-text-indent-left\"></i>\n            </button>\n            <button type=\"button\" *ngIf=\"isVisible('outdent')\" (mousedown)=\"$event.preventDefault()\" (click)=\"outdent()\" title=\"Outdent\">\n                <i class=\"he he-text-indent-right\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\" *ngIf=\"hasAny('unorderedList', 'orderedList')\">\n            <button type=\"button\" *ngIf=\"isVisible('unorderedList')\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyList('ul')\" title=\"Unordered list\">\n                <i class=\"he he-unordered-list\"></i>\n            </button>\n            <button type=\"button\" *ngIf=\"isVisible('orderedList')\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyList('ol')\" title=\"Ordered list\">\n                <i class=\"he he-ordered-list\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\" *ngIf=\"hasAny('link', 'image')\">\n            <button type=\"button\" *ngIf=\"isVisible('link')\" (mousedown)=\"$event.preventDefault()\" (click)=\"createLink()\" title=\"Link\">\n                <i class=\"he he-link\"></i>\n            </button>\n            <button type=\"button\" *ngIf=\"isVisible('image')\" (mousedown)=\"$event.preventDefault()\" (click)=\"insertImage()\" title=\"Image\">\n                <i class=\"he he-image\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\" *ngIf=\"hasAny('undo', 'redo')\">\n            <button type=\"button\" *ngIf=\"isVisible('undo')\" (mousedown)=\"$event.preventDefault()\" (click)=\"undo()\" title=\"Undo\">\n                <i class=\"he he-undo\"></i>\n            </button>\n            <button type=\"button\" *ngIf=\"isVisible('redo')\" (mousedown)=\"$event.preventDefault()\" (click)=\"redo()\" title=\"Redo\">\n                <i class=\"he he-redo\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\" *ngIf=\"isVisible('clearFormatting')\">\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"clearFormatting()\" title=\"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\n    <!-- Custom Modal for Link/Image URL -->\n    <div class=\"editor-modal-overlay\" *ngIf=\"showModal\" (click)=\"cancelModal()\">\n        <div class=\"editor-modal\" (click)=\"$event.stopPropagation()\">\n            <div class=\"editor-modal-header\">\n                <span>{{ modalType === 'link' ? 'Insert Link' : 'Insert Image' }}</span>\n                <button type=\"button\" class=\"editor-modal-close\" (click)=\"cancelModal()\">\n                    <i class=\"he he-close\"></i>\n                </button>\n            </div>\n            <div class=\"editor-modal-body\">\n                <div class=\"url-list\">\n                    <div class=\"url-row\" *ngFor=\"let url of modalUrls; let i = index; trackBy: trackByIndex\">\n                        <div class=\"url-field\">\n                            <input type=\"text\" class=\"url-input\" [class.invalid]=\"isRowInvalid(modalUrls[i])\"\n                                [ngModel]=\"modalUrls[i]\"\n                                (ngModelChange)=\"modalUrls[i] = $event\"\n                                [placeholder]=\"modalType === 'link' ? 'https://example.com' : 'https://example.com/image.png'\" />\n                            <span class=\"url-error\" *ngIf=\"isRowInvalid(modalUrls[i])\">Enter a valid URL</span>\n                        </div>\n                        <button type=\"button\" class=\"url-remove-btn\" *ngIf=\"modalUrls.length > 1\" (click)=\"removeUrlRow(i)\" title=\"Remove\">\n                            <i class=\"he he-close\"></i>\n                        </button>\n                    </div>\n                </div>\n                <button type=\"button\" class=\"url-add-btn\" (click)=\"addUrlRow()\">\n                    + Add more\n                </button>\n            </div>\n            <div class=\"editor-modal-footer\">\n                <button type=\"button\" class=\"modal-btn cancel-btn\" (click)=\"cancelModal()\">Cancel</button>\n                <button type=\"button\" class=\"modal-btn confirm-btn\" [disabled]=\"!hasValidUrl\" (click)=\"confirmModal()\">Insert</button>\n            </div>\n        </div>\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{cursor:pointer;min-width:25px;min-height:20px;border:0;display:grid;place-items:center;background:transparent}.text-editor .toolbar .toolbar-items button:hover{background:#eee}.text-editor .toolbar .toolbar-items button:hover i{color:#000}.text-editor .toolbar .toolbar-items .color-tool{position:relative}.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 .color-popover{top:calc(100% + 6px);left:0;z-index:30;padding:8px;position:absolute;background:#fff;border-radius:6px;border:1px solid #e0e0e0;box-shadow:0 4px 16px #00000026}.text-editor .color-popover .color-grid{gap:4px;display:grid;grid-template-columns:repeat(8,18px)}.text-editor .color-popover .color-swatch{width:18px;height:18px;padding:0;cursor:pointer;border-radius:3px;border:1px solid rgba(0,0,0,.15);transition:transform .1s ease}.text-editor .color-popover .color-swatch:hover{transform:scale(1.15)}.text-editor .color-popover .color-custom{gap:8px;display:flex;margin-top:8px;font-size:12px;color:#555;cursor:pointer;align-items:center;justify-content:space-between}.text-editor .color-popover .color-custom input[type=color]{width:28px;height:20px;padding:0;cursor:pointer;background:none;border:1px solid #cccccc}.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}.text-editor .editor-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:10000}.text-editor .editor-modal{background:#fff;border-radius:8px;box-shadow:0 8px 32px #0003;width:420px;max-width:90vw;animation:modalFadeIn .2s ease}@keyframes modalFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.text-editor .editor-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #e8e8e8}.text-editor .editor-modal-header span{font-size:15px;font-weight:600;color:#1a1a1a}.text-editor .editor-modal-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;display:grid;place-items:center}.text-editor .editor-modal-close i{font-size:14px;color:#666}.text-editor .editor-modal-close:hover{background:#f0f0f0}.text-editor .editor-modal-close:hover i{color:#333}.text-editor .editor-modal-body{padding:16px 18px}.text-editor .editor-modal-body .url-list{max-height:200px;overflow-y:auto;margin-bottom:10px;padding-right:2px}.text-editor .editor-modal-body .url-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px}.text-editor .editor-modal-body .url-field{flex:1;display:flex;flex-direction:column;gap:2px}.text-editor .editor-modal-body .url-input{width:100%;padding:8px 12px;border:1px solid #d0d0d0;border-radius:6px;font-size:13px;color:#333;outline:none;transition:border-color .2s}.text-editor .editor-modal-body .url-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff26}.text-editor .editor-modal-body .url-input::placeholder{color:#aaa}.text-editor .editor-modal-body .url-input.invalid{border-color:#e04040}.text-editor .editor-modal-body .url-input.invalid:focus{border-color:#e04040;box-shadow:0 0 0 2px #e0404026}.text-editor .editor-modal-body .url-error{font-size:11px;color:#e04040}.text-editor .editor-modal-body .url-remove-btn{background:none;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;padding:8px 9px;display:grid;place-items:center;transition:all .15s}.text-editor .editor-modal-body .url-remove-btn i{font-size:11px;color:#999}.text-editor .editor-modal-body .url-remove-btn:hover{background:#fff0f0;border-color:#faa}.text-editor .editor-modal-body .url-remove-btn:hover i{color:#e04040}.text-editor .editor-modal-body .url-add-btn{background:none;border:1px dashed #c0c0c0;border-radius:6px;cursor:pointer;padding:6px 14px;font-size:12px;color:#007bff;transition:all .15s;width:100%}.text-editor .editor-modal-body .url-add-btn:hover{background:#f0f8ff;border-color:#007bff}.text-editor .editor-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:12px 18px;border-top:1px solid #e8e8e8}.text-editor .editor-modal-footer .modal-btn{padding:7px 20px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;border:1px solid transparent}.text-editor .editor-modal-footer .cancel-btn{background:#f5f5f5;color:#555;border-color:#ddd}.text-editor .editor-modal-footer .cancel-btn:hover{background:#eaeaea}.text-editor .editor-modal-footer .confirm-btn{background:#007bff;color:#fff}.text-editor .editor-modal-footer .confirm-btn:hover{background:#0069d9}.text-editor .editor-modal-footer .confirm-btn:disabled{opacity:.5;cursor:not-allowed}.text-editor .editor-modal-footer .confirm-btn:disabled:hover{background:#007bff}\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: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+        ], viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<div class=\"text-editor\" [ngClass]=\"{'readonly': readonly || disabled}\">\n  @if (!readonly && !disabled) {\n    <div class=\"toolbar\">\n      @if (hasAny('bold', 'italic', 'underline')) {\n        <div class=\"toolbar-items\">\n          @if (isVisible('bold')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('bold')\" title=\"Bold\">\n              <i class=\"he he-bold\"></i>\n            </button>\n          }\n          @if (isVisible('italic')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('italic')\" title=\"Italic\">\n              <i class=\"he he-italics\"></i>\n            </button>\n          }\n          @if (isVisible('underline')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('underline')\" title=\"Underline\">\n              <i class=\"he he-underline\"></i>\n            </button>\n          }\n        </div>\n      }\n      @if (hasAny('h1', 'h2')) {\n        <div class=\"toolbar-items\">\n          @if (isVisible('h1')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyBlockFormat('h1')\" title=\"Header 1\">\n              <i class=\"he he-heading-1\"></i>\n            </button>\n          }\n          @if (isVisible('h2')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyBlockFormat('h2')\" title=\"Header 2\">\n              <i class=\"he he-heading-2\"></i>\n            </button>\n          }\n        </div>\n      }\n      @if (hasAny('textColor', 'backgroundColor')) {\n        <div class=\"toolbar-items more-gap\">\n          @if (isVisible('textColor')) {\n            <div class=\"color-tool\">\n              <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"toggleColorMenu('text')\" title=\"Text Color\">\n                <i class=\"he he-text-drop\"></i>\n              </button>\n              @if (colorMenu === 'text') {\n                <div class=\"color-popover\">\n                  <div class=\"color-grid\">\n                    @for (c of palette; track c) {\n                      <button type=\"button\" class=\"color-swatch\" [style.backgroundColor]=\"c\"\n                      [title]=\"c\" (mousedown)=\"$event.preventDefault()\" (click)=\"pickColor('text', c)\"></button>\n                    }\n                  </div>\n                  <label class=\"color-custom\">\n                    <span>Custom</span>\n                    <input type=\"color\" (change)=\"pickCustomColor('text', $event)\" />\n                  </label>\n                </div>\n              }\n            </div>\n          }\n          @if (isVisible('backgroundColor')) {\n            <div class=\"color-tool\">\n              <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"toggleColorMenu('background')\" title=\"Background Color\">\n                <i class=\"he he-background-drop\"></i>\n              </button>\n              @if (colorMenu === 'background') {\n                <div class=\"color-popover\">\n                  <div class=\"color-grid\">\n                    @for (c of palette; track c) {\n                      <button type=\"button\" class=\"color-swatch\" [style.backgroundColor]=\"c\"\n                      [title]=\"c\" (mousedown)=\"$event.preventDefault()\" (click)=\"pickColor('background', c)\"></button>\n                    }\n                  </div>\n                  <label class=\"color-custom\">\n                    <span>Custom</span>\n                    <input type=\"color\" (change)=\"pickCustomColor('background', $event)\" />\n                  </label>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n      @if (hasAny('alignLeft', 'alignCenter', 'alignRight', 'justify')) {\n        <div class=\"toolbar-items\">\n          @if (isVisible('alignLeft')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('left')\" title=\"Justify Left\">\n              <i class=\"he he-left-align\"></i>\n            </button>\n          }\n          @if (isVisible('alignCenter')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('center')\" title=\"Justify Center\">\n              <i class=\"he he-center-align\"></i>\n            </button>\n          }\n          @if (isVisible('alignRight')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('right')\" title=\"Justify Right\">\n              <i class=\"he he-right-align\"></i>\n            </button>\n          }\n          @if (isVisible('justify')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('justify')\" title=\"Justify Full\">\n              <i class=\"he he-justify\"></i>\n            </button>\n          }\n        </div>\n      }\n      @if (hasAny('indent', 'outdent')) {\n        <div class=\"toolbar-items\">\n          @if (isVisible('indent')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"indent()\" title=\"Indent\">\n              <i class=\"he he-text-indent-left\"></i>\n            </button>\n          }\n          @if (isVisible('outdent')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"outdent()\" title=\"Outdent\">\n              <i class=\"he he-text-indent-right\"></i>\n            </button>\n          }\n        </div>\n      }\n      @if (hasAny('unorderedList', 'orderedList')) {\n        <div class=\"toolbar-items\">\n          @if (isVisible('unorderedList')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyList('ul')\" title=\"Unordered list\">\n              <i class=\"he he-unordered-list\"></i>\n            </button>\n          }\n          @if (isVisible('orderedList')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyList('ol')\" title=\"Ordered list\">\n              <i class=\"he he-ordered-list\"></i>\n            </button>\n          }\n        </div>\n      }\n      @if (hasAny('link', 'image')) {\n        <div class=\"toolbar-items\">\n          @if (isVisible('link')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"createLink()\" title=\"Link\">\n              <i class=\"he he-link\"></i>\n            </button>\n          }\n          @if (isVisible('image')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"insertImage()\" title=\"Image\">\n              <i class=\"he he-image\"></i>\n            </button>\n          }\n        </div>\n      }\n      @if (hasAny('undo', 'redo')) {\n        <div class=\"toolbar-items\">\n          @if (isVisible('undo')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"undo()\" title=\"Undo\">\n              <i class=\"he he-undo\"></i>\n            </button>\n          }\n          @if (isVisible('redo')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"redo()\" title=\"Redo\">\n              <i class=\"he he-redo\"></i>\n            </button>\n          }\n        </div>\n      }\n      @if (isVisible('clearFormatting')) {\n        <div class=\"toolbar-items\">\n          <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"clearFormatting()\" title=\"Clear Formatting\">\n            <i class=\"he he-text-clear-format\"></i>\n          </button>\n        </div>\n      }\n    </div>\n  }\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\n  <!-- Custom Modal for Link/Image URL -->\n  @if (showModal) {\n    <div class=\"editor-modal-overlay\" (click)=\"cancelModal()\">\n      <div class=\"editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"editor-modal-header\">\n          <span>{{ modalType === 'link' ? 'Insert Link' : 'Insert Image' }}</span>\n          <button type=\"button\" class=\"editor-modal-close\" (click)=\"cancelModal()\">\n            <i class=\"he he-close\"></i>\n          </button>\n        </div>\n        <div class=\"editor-modal-body\">\n          <div class=\"url-list\">\n            @for (url of modalUrls; track $index; let i = $index) {\n              <div class=\"url-row\">\n                <div class=\"url-field\">\n                  <input type=\"text\" class=\"url-input\" [class.invalid]=\"isRowInvalid(modalUrls[i])\"\n                    [ngModel]=\"modalUrls[i]\"\n                    (ngModelChange)=\"modalUrls[i] = $event\"\n                    [placeholder]=\"modalType === 'link' ? 'https://example.com' : 'https://example.com/image.png'\" />\n                  @if (isRowInvalid(modalUrls[i])) {\n                    <span class=\"url-error\">Enter a valid URL</span>\n                  }\n                </div>\n                @if (modalUrls.length > 1) {\n                  <button type=\"button\" class=\"url-remove-btn\" (click)=\"removeUrlRow(i)\" title=\"Remove\">\n                    <i class=\"he he-close\"></i>\n                  </button>\n                }\n              </div>\n            }\n          </div>\n          <button type=\"button\" class=\"url-add-btn\" (click)=\"addUrlRow()\">\n            + Add more\n          </button>\n        </div>\n        <div class=\"editor-modal-footer\">\n          <button type=\"button\" class=\"modal-btn cancel-btn\" (click)=\"cancelModal()\">Cancel</button>\n          <button type=\"button\" class=\"modal-btn confirm-btn\" [disabled]=\"!hasValidUrl\" (click)=\"confirmModal()\">Insert</button>\n        </div>\n      </div>\n    </div>\n  }\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{cursor:pointer;min-width:25px;min-height:20px;border:0;display:grid;place-items:center;background:transparent}.text-editor .toolbar .toolbar-items button:hover{background:#eee}.text-editor .toolbar .toolbar-items button:hover i{color:#000}.text-editor .toolbar .toolbar-items .color-tool{position:relative}.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 .color-popover{top:calc(100% + 6px);left:0;z-index:30;padding:8px;position:absolute;background:#fff;border-radius:6px;border:1px solid #e0e0e0;box-shadow:0 4px 16px #00000026}.text-editor .color-popover .color-grid{gap:4px;display:grid;grid-template-columns:repeat(8,18px)}.text-editor .color-popover .color-swatch{width:18px;height:18px;padding:0;cursor:pointer;border-radius:3px;border:1px solid rgba(0,0,0,.15);transition:transform .1s ease}.text-editor .color-popover .color-swatch:hover{transform:scale(1.15)}.text-editor .color-popover .color-custom{gap:8px;display:flex;margin-top:8px;font-size:12px;color:#555;cursor:pointer;align-items:center;justify-content:space-between}.text-editor .color-popover .color-custom input[type=color]{width:28px;height:20px;padding:0;cursor:pointer;background:none;border:1px solid #cccccc}.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}.text-editor .editor-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:10000}.text-editor .editor-modal{background:#fff;border-radius:8px;box-shadow:0 8px 32px #0003;width:420px;max-width:90vw;animation:modalFadeIn .2s ease}@keyframes modalFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.text-editor .editor-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #e8e8e8}.text-editor .editor-modal-header span{font-size:15px;font-weight:600;color:#1a1a1a}.text-editor .editor-modal-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;display:grid;place-items:center}.text-editor .editor-modal-close i{font-size:14px;color:#666}.text-editor .editor-modal-close:hover{background:#f0f0f0}.text-editor .editor-modal-close:hover i{color:#333}.text-editor .editor-modal-body{padding:16px 18px}.text-editor .editor-modal-body .url-list{max-height:200px;overflow-y:auto;margin-bottom:10px;padding-right:2px}.text-editor .editor-modal-body .url-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px}.text-editor .editor-modal-body .url-field{flex:1;display:flex;flex-direction:column;gap:2px}.text-editor .editor-modal-body .url-input{width:100%;padding:8px 12px;border:1px solid #d0d0d0;border-radius:6px;font-size:13px;color:#333;outline:none;transition:border-color .2s}.text-editor .editor-modal-body .url-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff26}.text-editor .editor-modal-body .url-input::placeholder{color:#aaa}.text-editor .editor-modal-body .url-input.invalid{border-color:#e04040}.text-editor .editor-modal-body .url-input.invalid:focus{border-color:#e04040;box-shadow:0 0 0 2px #e0404026}.text-editor .editor-modal-body .url-error{font-size:11px;color:#e04040}.text-editor .editor-modal-body .url-remove-btn{background:none;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;padding:8px 9px;display:grid;place-items:center;transition:all .15s}.text-editor .editor-modal-body .url-remove-btn i{font-size:11px;color:#999}.text-editor .editor-modal-body .url-remove-btn:hover{background:#fff0f0;border-color:#faa}.text-editor .editor-modal-body .url-remove-btn:hover i{color:#e04040}.text-editor .editor-modal-body .url-add-btn{background:none;border:1px dashed #c0c0c0;border-radius:6px;cursor:pointer;padding:6px 14px;font-size:12px;color:#007bff;transition:all .15s;width:100%}.text-editor .editor-modal-body .url-add-btn:hover{background:#f0f8ff;border-color:#007bff}.text-editor .editor-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:12px 18px;border-top:1px solid #e8e8e8}.text-editor .editor-modal-footer .modal-btn{padding:7px 20px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;border:1px solid transparent}.text-editor .editor-modal-footer .cancel-btn{background:#f5f5f5;color:#555;border-color:#ddd}.text-editor .editor-modal-footer .cancel-btn:hover{background:#eaeaea}.text-editor .editor-modal-footer .confirm-btn{background:#007bff;color:#fff}.text-editor .editor-modal-footer .confirm-btn:hover{background:#0069d9}.text-editor .editor-modal-footer .confirm-btn:disabled{opacity:.5;cursor:not-allowed}.text-editor .editor-modal-footer .confirm-btn:disabled:hover{background:#007bff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RichTextEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RichTextEditor, decorators: [{
             type: Component,
             args: [{ selector: 'rich-text-editor', standalone: true, imports: [CommonModule, FormsModule], providers: [
                         {
@@ -4632,7 +4648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                             useExisting: forwardRef(() => RichTextEditor),
                             multi: true,
                         },
-                    ], template: "<div class=\"text-editor\" [ngClass]=\"{'readonly': readonly || disabled}\">\n    <div class=\"toolbar\" *ngIf=\"!readonly && !disabled\">\n        <div class=\"toolbar-items\" *ngIf=\"hasAny('bold', 'italic', 'underline')\">\n            <button type=\"button\" *ngIf=\"isVisible('bold')\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('bold')\" title=\"Bold\">\n                <i class=\"he he-bold\"></i>\n            </button>\n            <button type=\"button\" *ngIf=\"isVisible('italic')\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('italic')\" title=\"Italic\">\n                <i class=\"he he-italics\"></i>\n            </button>\n            <button type=\"button\" *ngIf=\"isVisible('underline')\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('underline')\" title=\"Underline\">\n                <i class=\"he he-underline\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\" *ngIf=\"hasAny('h1', 'h2')\">\n            <button type=\"button\" *ngIf=\"isVisible('h1')\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyBlockFormat('h1')\" title=\"Header 1\">\n                <i class=\"he he-heading-1\"></i>\n            </button>\n            <button type=\"button\" *ngIf=\"isVisible('h2')\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyBlockFormat('h2')\" title=\"Header 2\">\n                <i class=\"he he-heading-2\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items more-gap\" *ngIf=\"hasAny('textColor', 'backgroundColor')\">\n            <div class=\"color-tool\" *ngIf=\"isVisible('textColor')\">\n                <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"toggleColorMenu('text')\" title=\"Text Color\">\n                    <i class=\"he he-text-drop\"></i>\n                </button>\n                <div class=\"color-popover\" *ngIf=\"colorMenu === 'text'\">\n                    <div class=\"color-grid\">\n                        <button type=\"button\" class=\"color-swatch\" *ngFor=\"let c of palette\" [style.backgroundColor]=\"c\"\n                            [title]=\"c\" (mousedown)=\"$event.preventDefault()\" (click)=\"pickColor('text', c)\"></button>\n                    </div>\n                    <label class=\"color-custom\">\n                        <span>Custom</span>\n                        <input type=\"color\" (change)=\"pickCustomColor('text', $event)\" />\n                    </label>\n                </div>\n            </div>\n            <div class=\"color-tool\" *ngIf=\"isVisible('backgroundColor')\">\n                <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"toggleColorMenu('background')\" title=\"Background Color\">\n                    <i class=\"he he-background-drop\"></i>\n                </button>\n                <div class=\"color-popover\" *ngIf=\"colorMenu === 'background'\">\n                    <div class=\"color-grid\">\n                        <button type=\"button\" class=\"color-swatch\" *ngFor=\"let c of palette\" [style.backgroundColor]=\"c\"\n                            [title]=\"c\" (mousedown)=\"$event.preventDefault()\" (click)=\"pickColor('background', c)\"></button>\n                    </div>\n                    <label class=\"color-custom\">\n                        <span>Custom</span>\n                        <input type=\"color\" (change)=\"pickCustomColor('background', $event)\" />\n                    </label>\n                </div>\n            </div>\n        </div>\n        <div class=\"toolbar-items\" *ngIf=\"hasAny('alignLeft', 'alignCenter', 'alignRight', 'justify')\">\n            <button type=\"button\" *ngIf=\"isVisible('alignLeft')\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('left')\" title=\"Justify Left\">\n                <i class=\"he he-left-align\"></i>\n            </button>\n            <button type=\"button\" *ngIf=\"isVisible('alignCenter')\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('center')\" title=\"Justify Center\">\n                <i class=\"he he-center-align\"></i>\n            </button>\n            <button type=\"button\" *ngIf=\"isVisible('alignRight')\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('right')\" title=\"Justify Right\">\n                <i class=\"he he-right-align\"></i>\n            </button>\n            <button type=\"button\" *ngIf=\"isVisible('justify')\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('justify')\" title=\"Justify Full\">\n                <i class=\"he he-justify\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\" *ngIf=\"hasAny('indent', 'outdent')\">\n            <button type=\"button\" *ngIf=\"isVisible('indent')\" (mousedown)=\"$event.preventDefault()\" (click)=\"indent()\" title=\"Indent\">\n                <i class=\"he he-text-indent-left\"></i>\n            </button>\n            <button type=\"button\" *ngIf=\"isVisible('outdent')\" (mousedown)=\"$event.preventDefault()\" (click)=\"outdent()\" title=\"Outdent\">\n                <i class=\"he he-text-indent-right\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\" *ngIf=\"hasAny('unorderedList', 'orderedList')\">\n            <button type=\"button\" *ngIf=\"isVisible('unorderedList')\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyList('ul')\" title=\"Unordered list\">\n                <i class=\"he he-unordered-list\"></i>\n            </button>\n            <button type=\"button\" *ngIf=\"isVisible('orderedList')\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyList('ol')\" title=\"Ordered list\">\n                <i class=\"he he-ordered-list\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\" *ngIf=\"hasAny('link', 'image')\">\n            <button type=\"button\" *ngIf=\"isVisible('link')\" (mousedown)=\"$event.preventDefault()\" (click)=\"createLink()\" title=\"Link\">\n                <i class=\"he he-link\"></i>\n            </button>\n            <button type=\"button\" *ngIf=\"isVisible('image')\" (mousedown)=\"$event.preventDefault()\" (click)=\"insertImage()\" title=\"Image\">\n                <i class=\"he he-image\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\" *ngIf=\"hasAny('undo', 'redo')\">\n            <button type=\"button\" *ngIf=\"isVisible('undo')\" (mousedown)=\"$event.preventDefault()\" (click)=\"undo()\" title=\"Undo\">\n                <i class=\"he he-undo\"></i>\n            </button>\n            <button type=\"button\" *ngIf=\"isVisible('redo')\" (mousedown)=\"$event.preventDefault()\" (click)=\"redo()\" title=\"Redo\">\n                <i class=\"he he-redo\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\" *ngIf=\"isVisible('clearFormatting')\">\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"clearFormatting()\" title=\"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\n    <!-- Custom Modal for Link/Image URL -->\n    <div class=\"editor-modal-overlay\" *ngIf=\"showModal\" (click)=\"cancelModal()\">\n        <div class=\"editor-modal\" (click)=\"$event.stopPropagation()\">\n            <div class=\"editor-modal-header\">\n                <span>{{ modalType === 'link' ? 'Insert Link' : 'Insert Image' }}</span>\n                <button type=\"button\" class=\"editor-modal-close\" (click)=\"cancelModal()\">\n                    <i class=\"he he-close\"></i>\n                </button>\n            </div>\n            <div class=\"editor-modal-body\">\n                <div class=\"url-list\">\n                    <div class=\"url-row\" *ngFor=\"let url of modalUrls; let i = index; trackBy: trackByIndex\">\n                        <div class=\"url-field\">\n                            <input type=\"text\" class=\"url-input\" [class.invalid]=\"isRowInvalid(modalUrls[i])\"\n                                [ngModel]=\"modalUrls[i]\"\n                                (ngModelChange)=\"modalUrls[i] = $event\"\n                                [placeholder]=\"modalType === 'link' ? 'https://example.com' : 'https://example.com/image.png'\" />\n                            <span class=\"url-error\" *ngIf=\"isRowInvalid(modalUrls[i])\">Enter a valid URL</span>\n                        </div>\n                        <button type=\"button\" class=\"url-remove-btn\" *ngIf=\"modalUrls.length > 1\" (click)=\"removeUrlRow(i)\" title=\"Remove\">\n                            <i class=\"he he-close\"></i>\n                        </button>\n                    </div>\n                </div>\n                <button type=\"button\" class=\"url-add-btn\" (click)=\"addUrlRow()\">\n                    + Add more\n                </button>\n            </div>\n            <div class=\"editor-modal-footer\">\n                <button type=\"button\" class=\"modal-btn cancel-btn\" (click)=\"cancelModal()\">Cancel</button>\n                <button type=\"button\" class=\"modal-btn confirm-btn\" [disabled]=\"!hasValidUrl\" (click)=\"confirmModal()\">Insert</button>\n            </div>\n        </div>\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{cursor:pointer;min-width:25px;min-height:20px;border:0;display:grid;place-items:center;background:transparent}.text-editor .toolbar .toolbar-items button:hover{background:#eee}.text-editor .toolbar .toolbar-items button:hover i{color:#000}.text-editor .toolbar .toolbar-items .color-tool{position:relative}.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 .color-popover{top:calc(100% + 6px);left:0;z-index:30;padding:8px;position:absolute;background:#fff;border-radius:6px;border:1px solid #e0e0e0;box-shadow:0 4px 16px #00000026}.text-editor .color-popover .color-grid{gap:4px;display:grid;grid-template-columns:repeat(8,18px)}.text-editor .color-popover .color-swatch{width:18px;height:18px;padding:0;cursor:pointer;border-radius:3px;border:1px solid rgba(0,0,0,.15);transition:transform .1s ease}.text-editor .color-popover .color-swatch:hover{transform:scale(1.15)}.text-editor .color-popover .color-custom{gap:8px;display:flex;margin-top:8px;font-size:12px;color:#555;cursor:pointer;align-items:center;justify-content:space-between}.text-editor .color-popover .color-custom input[type=color]{width:28px;height:20px;padding:0;cursor:pointer;background:none;border:1px solid #cccccc}.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}.text-editor .editor-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:10000}.text-editor .editor-modal{background:#fff;border-radius:8px;box-shadow:0 8px 32px #0003;width:420px;max-width:90vw;animation:modalFadeIn .2s ease}@keyframes modalFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.text-editor .editor-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #e8e8e8}.text-editor .editor-modal-header span{font-size:15px;font-weight:600;color:#1a1a1a}.text-editor .editor-modal-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;display:grid;place-items:center}.text-editor .editor-modal-close i{font-size:14px;color:#666}.text-editor .editor-modal-close:hover{background:#f0f0f0}.text-editor .editor-modal-close:hover i{color:#333}.text-editor .editor-modal-body{padding:16px 18px}.text-editor .editor-modal-body .url-list{max-height:200px;overflow-y:auto;margin-bottom:10px;padding-right:2px}.text-editor .editor-modal-body .url-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px}.text-editor .editor-modal-body .url-field{flex:1;display:flex;flex-direction:column;gap:2px}.text-editor .editor-modal-body .url-input{width:100%;padding:8px 12px;border:1px solid #d0d0d0;border-radius:6px;font-size:13px;color:#333;outline:none;transition:border-color .2s}.text-editor .editor-modal-body .url-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff26}.text-editor .editor-modal-body .url-input::placeholder{color:#aaa}.text-editor .editor-modal-body .url-input.invalid{border-color:#e04040}.text-editor .editor-modal-body .url-input.invalid:focus{border-color:#e04040;box-shadow:0 0 0 2px #e0404026}.text-editor .editor-modal-body .url-error{font-size:11px;color:#e04040}.text-editor .editor-modal-body .url-remove-btn{background:none;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;padding:8px 9px;display:grid;place-items:center;transition:all .15s}.text-editor .editor-modal-body .url-remove-btn i{font-size:11px;color:#999}.text-editor .editor-modal-body .url-remove-btn:hover{background:#fff0f0;border-color:#faa}.text-editor .editor-modal-body .url-remove-btn:hover i{color:#e04040}.text-editor .editor-modal-body .url-add-btn{background:none;border:1px dashed #c0c0c0;border-radius:6px;cursor:pointer;padding:6px 14px;font-size:12px;color:#007bff;transition:all .15s;width:100%}.text-editor .editor-modal-body .url-add-btn:hover{background:#f0f8ff;border-color:#007bff}.text-editor .editor-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:12px 18px;border-top:1px solid #e8e8e8}.text-editor .editor-modal-footer .modal-btn{padding:7px 20px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;border:1px solid transparent}.text-editor .editor-modal-footer .cancel-btn{background:#f5f5f5;color:#555;border-color:#ddd}.text-editor .editor-modal-footer .cancel-btn:hover{background:#eaeaea}.text-editor .editor-modal-footer .confirm-btn{background:#007bff;color:#fff}.text-editor .editor-modal-footer .confirm-btn:hover{background:#0069d9}.text-editor .editor-modal-footer .confirm-btn:disabled{opacity:.5;cursor:not-allowed}.text-editor .editor-modal-footer .confirm-btn:disabled:hover{background:#007bff}\n"] }]
+                    ], template: "<div class=\"text-editor\" [ngClass]=\"{'readonly': readonly || disabled}\">\n  @if (!readonly && !disabled) {\n    <div class=\"toolbar\">\n      @if (hasAny('bold', 'italic', 'underline')) {\n        <div class=\"toolbar-items\">\n          @if (isVisible('bold')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('bold')\" title=\"Bold\">\n              <i class=\"he he-bold\"></i>\n            </button>\n          }\n          @if (isVisible('italic')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('italic')\" title=\"Italic\">\n              <i class=\"he he-italics\"></i>\n            </button>\n          }\n          @if (isVisible('underline')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('underline')\" title=\"Underline\">\n              <i class=\"he he-underline\"></i>\n            </button>\n          }\n        </div>\n      }\n      @if (hasAny('h1', 'h2')) {\n        <div class=\"toolbar-items\">\n          @if (isVisible('h1')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyBlockFormat('h1')\" title=\"Header 1\">\n              <i class=\"he he-heading-1\"></i>\n            </button>\n          }\n          @if (isVisible('h2')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyBlockFormat('h2')\" title=\"Header 2\">\n              <i class=\"he he-heading-2\"></i>\n            </button>\n          }\n        </div>\n      }\n      @if (hasAny('textColor', 'backgroundColor')) {\n        <div class=\"toolbar-items more-gap\">\n          @if (isVisible('textColor')) {\n            <div class=\"color-tool\">\n              <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"toggleColorMenu('text')\" title=\"Text Color\">\n                <i class=\"he he-text-drop\"></i>\n              </button>\n              @if (colorMenu === 'text') {\n                <div class=\"color-popover\">\n                  <div class=\"color-grid\">\n                    @for (c of palette; track c) {\n                      <button type=\"button\" class=\"color-swatch\" [style.backgroundColor]=\"c\"\n                      [title]=\"c\" (mousedown)=\"$event.preventDefault()\" (click)=\"pickColor('text', c)\"></button>\n                    }\n                  </div>\n                  <label class=\"color-custom\">\n                    <span>Custom</span>\n                    <input type=\"color\" (change)=\"pickCustomColor('text', $event)\" />\n                  </label>\n                </div>\n              }\n            </div>\n          }\n          @if (isVisible('backgroundColor')) {\n            <div class=\"color-tool\">\n              <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"toggleColorMenu('background')\" title=\"Background Color\">\n                <i class=\"he he-background-drop\"></i>\n              </button>\n              @if (colorMenu === 'background') {\n                <div class=\"color-popover\">\n                  <div class=\"color-grid\">\n                    @for (c of palette; track c) {\n                      <button type=\"button\" class=\"color-swatch\" [style.backgroundColor]=\"c\"\n                      [title]=\"c\" (mousedown)=\"$event.preventDefault()\" (click)=\"pickColor('background', c)\"></button>\n                    }\n                  </div>\n                  <label class=\"color-custom\">\n                    <span>Custom</span>\n                    <input type=\"color\" (change)=\"pickCustomColor('background', $event)\" />\n                  </label>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n      @if (hasAny('alignLeft', 'alignCenter', 'alignRight', 'justify')) {\n        <div class=\"toolbar-items\">\n          @if (isVisible('alignLeft')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('left')\" title=\"Justify Left\">\n              <i class=\"he he-left-align\"></i>\n            </button>\n          }\n          @if (isVisible('alignCenter')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('center')\" title=\"Justify Center\">\n              <i class=\"he he-center-align\"></i>\n            </button>\n          }\n          @if (isVisible('alignRight')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('right')\" title=\"Justify Right\">\n              <i class=\"he he-right-align\"></i>\n            </button>\n          }\n          @if (isVisible('justify')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('justify')\" title=\"Justify Full\">\n              <i class=\"he he-justify\"></i>\n            </button>\n          }\n        </div>\n      }\n      @if (hasAny('indent', 'outdent')) {\n        <div class=\"toolbar-items\">\n          @if (isVisible('indent')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"indent()\" title=\"Indent\">\n              <i class=\"he he-text-indent-left\"></i>\n            </button>\n          }\n          @if (isVisible('outdent')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"outdent()\" title=\"Outdent\">\n              <i class=\"he he-text-indent-right\"></i>\n            </button>\n          }\n        </div>\n      }\n      @if (hasAny('unorderedList', 'orderedList')) {\n        <div class=\"toolbar-items\">\n          @if (isVisible('unorderedList')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyList('ul')\" title=\"Unordered list\">\n              <i class=\"he he-unordered-list\"></i>\n            </button>\n          }\n          @if (isVisible('orderedList')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyList('ol')\" title=\"Ordered list\">\n              <i class=\"he he-ordered-list\"></i>\n            </button>\n          }\n        </div>\n      }\n      @if (hasAny('link', 'image')) {\n        <div class=\"toolbar-items\">\n          @if (isVisible('link')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"createLink()\" title=\"Link\">\n              <i class=\"he he-link\"></i>\n            </button>\n          }\n          @if (isVisible('image')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"insertImage()\" title=\"Image\">\n              <i class=\"he he-image\"></i>\n            </button>\n          }\n        </div>\n      }\n      @if (hasAny('undo', 'redo')) {\n        <div class=\"toolbar-items\">\n          @if (isVisible('undo')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"undo()\" title=\"Undo\">\n              <i class=\"he he-undo\"></i>\n            </button>\n          }\n          @if (isVisible('redo')) {\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"redo()\" title=\"Redo\">\n              <i class=\"he he-redo\"></i>\n            </button>\n          }\n        </div>\n      }\n      @if (isVisible('clearFormatting')) {\n        <div class=\"toolbar-items\">\n          <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"clearFormatting()\" title=\"Clear Formatting\">\n            <i class=\"he he-text-clear-format\"></i>\n          </button>\n        </div>\n      }\n    </div>\n  }\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\n  <!-- Custom Modal for Link/Image URL -->\n  @if (showModal) {\n    <div class=\"editor-modal-overlay\" (click)=\"cancelModal()\">\n      <div class=\"editor-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"editor-modal-header\">\n          <span>{{ modalType === 'link' ? 'Insert Link' : 'Insert Image' }}</span>\n          <button type=\"button\" class=\"editor-modal-close\" (click)=\"cancelModal()\">\n            <i class=\"he he-close\"></i>\n          </button>\n        </div>\n        <div class=\"editor-modal-body\">\n          <div class=\"url-list\">\n            @for (url of modalUrls; track $index; let i = $index) {\n              <div class=\"url-row\">\n                <div class=\"url-field\">\n                  <input type=\"text\" class=\"url-input\" [class.invalid]=\"isRowInvalid(modalUrls[i])\"\n                    [ngModel]=\"modalUrls[i]\"\n                    (ngModelChange)=\"modalUrls[i] = $event\"\n                    [placeholder]=\"modalType === 'link' ? 'https://example.com' : 'https://example.com/image.png'\" />\n                  @if (isRowInvalid(modalUrls[i])) {\n                    <span class=\"url-error\">Enter a valid URL</span>\n                  }\n                </div>\n                @if (modalUrls.length > 1) {\n                  <button type=\"button\" class=\"url-remove-btn\" (click)=\"removeUrlRow(i)\" title=\"Remove\">\n                    <i class=\"he he-close\"></i>\n                  </button>\n                }\n              </div>\n            }\n          </div>\n          <button type=\"button\" class=\"url-add-btn\" (click)=\"addUrlRow()\">\n            + Add more\n          </button>\n        </div>\n        <div class=\"editor-modal-footer\">\n          <button type=\"button\" class=\"modal-btn cancel-btn\" (click)=\"cancelModal()\">Cancel</button>\n          <button type=\"button\" class=\"modal-btn confirm-btn\" [disabled]=\"!hasValidUrl\" (click)=\"confirmModal()\">Insert</button>\n        </div>\n      </div>\n    </div>\n  }\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{cursor:pointer;min-width:25px;min-height:20px;border:0;display:grid;place-items:center;background:transparent}.text-editor .toolbar .toolbar-items button:hover{background:#eee}.text-editor .toolbar .toolbar-items button:hover i{color:#000}.text-editor .toolbar .toolbar-items .color-tool{position:relative}.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 .color-popover{top:calc(100% + 6px);left:0;z-index:30;padding:8px;position:absolute;background:#fff;border-radius:6px;border:1px solid #e0e0e0;box-shadow:0 4px 16px #00000026}.text-editor .color-popover .color-grid{gap:4px;display:grid;grid-template-columns:repeat(8,18px)}.text-editor .color-popover .color-swatch{width:18px;height:18px;padding:0;cursor:pointer;border-radius:3px;border:1px solid rgba(0,0,0,.15);transition:transform .1s ease}.text-editor .color-popover .color-swatch:hover{transform:scale(1.15)}.text-editor .color-popover .color-custom{gap:8px;display:flex;margin-top:8px;font-size:12px;color:#555;cursor:pointer;align-items:center;justify-content:space-between}.text-editor .color-popover .color-custom input[type=color]{width:28px;height:20px;padding:0;cursor:pointer;background:none;border:1px solid #cccccc}.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}.text-editor .editor-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:10000}.text-editor .editor-modal{background:#fff;border-radius:8px;box-shadow:0 8px 32px #0003;width:420px;max-width:90vw;animation:modalFadeIn .2s ease}@keyframes modalFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.text-editor .editor-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #e8e8e8}.text-editor .editor-modal-header span{font-size:15px;font-weight:600;color:#1a1a1a}.text-editor .editor-modal-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;display:grid;place-items:center}.text-editor .editor-modal-close i{font-size:14px;color:#666}.text-editor .editor-modal-close:hover{background:#f0f0f0}.text-editor .editor-modal-close:hover i{color:#333}.text-editor .editor-modal-body{padding:16px 18px}.text-editor .editor-modal-body .url-list{max-height:200px;overflow-y:auto;margin-bottom:10px;padding-right:2px}.text-editor .editor-modal-body .url-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px}.text-editor .editor-modal-body .url-field{flex:1;display:flex;flex-direction:column;gap:2px}.text-editor .editor-modal-body .url-input{width:100%;padding:8px 12px;border:1px solid #d0d0d0;border-radius:6px;font-size:13px;color:#333;outline:none;transition:border-color .2s}.text-editor .editor-modal-body .url-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff26}.text-editor .editor-modal-body .url-input::placeholder{color:#aaa}.text-editor .editor-modal-body .url-input.invalid{border-color:#e04040}.text-editor .editor-modal-body .url-input.invalid:focus{border-color:#e04040;box-shadow:0 0 0 2px #e0404026}.text-editor .editor-modal-body .url-error{font-size:11px;color:#e04040}.text-editor .editor-modal-body .url-remove-btn{background:none;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;padding:8px 9px;display:grid;place-items:center;transition:all .15s}.text-editor .editor-modal-body .url-remove-btn i{font-size:11px;color:#999}.text-editor .editor-modal-body .url-remove-btn:hover{background:#fff0f0;border-color:#faa}.text-editor .editor-modal-body .url-remove-btn:hover i{color:#e04040}.text-editor .editor-modal-body .url-add-btn{background:none;border:1px dashed #c0c0c0;border-radius:6px;cursor:pointer;padding:6px 14px;font-size:12px;color:#007bff;transition:all .15s;width:100%}.text-editor .editor-modal-body .url-add-btn:hover{background:#f0f8ff;border-color:#007bff}.text-editor .editor-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:12px 18px;border-top:1px solid #e8e8e8}.text-editor .editor-modal-footer .modal-btn{padding:7px 20px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;border:1px solid transparent}.text-editor .editor-modal-footer .cancel-btn{background:#f5f5f5;color:#555;border-color:#ddd}.text-editor .editor-modal-footer .cancel-btn:hover{background:#eaeaea}.text-editor .editor-modal-footer .confirm-btn{background:#007bff;color:#fff}.text-editor .editor-modal-footer .confirm-btn:hover{background:#0069d9}.text-editor .editor-modal-footer .confirm-btn:disabled{opacity:.5;cursor:not-allowed}.text-editor .editor-modal-footer .confirm-btn:disabled:hover{background:#007bff}\n"] }]
         }], propDecorators: { features: [{
                 type: Input
             }], placeholder: [{
@@ -4707,8 +4723,8 @@ class TextareaControl {
         this.textareaControl.setValue('');
         this.selectionCleared.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextareaControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TextareaControl, isStandalone: true, selector: "textarea-control", inputs: { title: "title", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", disabled: "disabled", readonly: "readonly", required: "required", error: "error", errorMessage: "errorMessage" }, outputs: { textareaChange: "textareaChange", selectionCleared: "selectionCleared", blurEvent: "blurEvent" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TextareaControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: TextareaControl, isStandalone: true, selector: "textarea-control", inputs: { title: "title", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", disabled: "disabled", readonly: "readonly", required: "required", error: "error", errorMessage: "errorMessage" }, outputs: { textareaChange: "textareaChange", selectionCleared: "selectionCleared", blurEvent: "blurEvent" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TextareaControl),
@@ -4716,7 +4732,7 @@ class TextareaControl {
             },
         ], ngImport: i0, template: "<div class=\"form-group textarea\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\r\n  @if (title) {\r\n  <label class=\"inp-label\" [ngClass]=\"{'required' : required}\">{{ title }}</label>\r\n  }\r\n  <textarea class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"textareaControl\"\r\n    [ngClass]=\"{ 'is-invalid': error }\" [readonly]=\"readonly\" (blur)=\"onBlur()\"></textarea>\r\n\r\n  <span class=\"focus-border\"></span>\r\n\r\n  @if (textareaControl.value && clearVal && !readonly) {\r\n  <label class=\"clear\" (click)=\"resetTextarea()\">\r\n    <i class=\"he he-close\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n</div>", styles: [".form-group textarea{resize:none;min-height:100px}.form-group textarea.resize{resize:auto}.form-group textarea::-webkit-scrollbar-thumb{border-radius:10px}.form-group textarea::-webkit-scrollbar-track{background:#e8eaf1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextareaControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TextareaControl, decorators: [{
             type: Component,
             args: [{ selector: 'textarea-control', standalone: true, imports: [
                         CommonModule,