nexheal-lib 0.0.54 → 0.0.56

package/fesm2022/nexheal-lib.mjs

@@ -2786,6 +2786,7 @@ class PaginatedAutocompleteControl {
     autocomplete = "";
     inputLoader = false;
     readonly = false;
+    isAddNewItem = false;
     optionDisplayProperty = "displayname";
     /** 'scroll' = infinite scroll, 'click' = "Load more" button, 'arrow' = ←/→ keys */
     paginationType = 'scroll';
@@ -2857,6 +2858,7 @@ class PaginatedAutocompleteControl {
     selectionCleared = new EventEmitter();
     blurEvent = new EventEmitter();
     optionPatched = new EventEmitter();
+    addNewItemClicked = new EventEmitter();
     valueBuffer = null;
     popperInstance;
     preventClearOnBlur = false;
@@ -3226,6 +3228,11 @@ class PaginatedAutocompleteControl {
     onMouseOver(index) {
         this.highlightedIndex = index;
     }
+    // actions
+    onAddNewItemClick() {
+        this.isDropdownOpen = false;
+        this.addNewItemClicked.emit();
+    }
     // popper
     createPopperInstance() {
         if (this.popperInstance) {
@@ -3285,13 +3292,13 @@ class PaginatedAutocompleteControl {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PaginatedAutocompleteControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PaginatedAutocompleteControl, isStandalone: true, selector: "paginated-autocomplete-control", inputs: { title: "title", required: "required", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", inputLoader: "inputLoader", readonly: "readonly", optionDisplayProperty: "optionDisplayProperty", paginationType: "paginationType", pageSize: "pageSize", searchDebounce: "searchDebounce", refreshOnOpen: "refreshOnOpen", totalCount: "totalCount", options: "options", disabled: "disabled" }, outputs: { pageChange: "pageChange", optionSelected: "optionSelected", selectionCleared: "selectionCleared", blurEvent: "blurEvent", optionPatched: "optionPatched" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PaginatedAutocompleteControl, isStandalone: true, selector: "paginated-autocomplete-control", inputs: { title: "title", required: "required", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", inputLoader: "inputLoader", readonly: "readonly", isAddNewItem: "isAddNewItem", optionDisplayProperty: "optionDisplayProperty", paginationType: "paginationType", pageSize: "pageSize", searchDebounce: "searchDebounce", refreshOnOpen: "refreshOnOpen", totalCount: "totalCount", options: "options", disabled: "disabled" }, outputs: { pageChange: "pageChange", optionSelected: "optionSelected", 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 paginated-autocomplete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\n  @if (title) {\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n  }\n\n  <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\n    (input)=\"onUserType($event)\" (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" (click)=\"onInputClick()\"\n    [ngClass]=\"{'is-invalid': error}\" [attr.autocomplete]=\"autocomplete || null\" [readonly]=\"readonly\" />\n\n  <span class=\"focus-border\"></span>\n\n  @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\n  <label class=\"clear\" (mousedown)=\"onOptionMouseDown()\" (click)=\"resetInput()\">\n    <i class=\"he he-close\"></i>\n  </label>\n  }\n\n  @if (isDropdownOpen) {\n  <div #dropdownElement class=\"option-list\" [class.fixed-height]=\"paginationType === 'arrow' && totalPages > 1\"\n    (mousedown)=\"onOptionMouseDown()\" (scroll)=\"onListScroll($event)\">\n    @if (options.length === 0 && !isPageLoading && !loadErrorMessage) {\n    <div class=\"no-results\">\n      <div>No results found</div>\n    </div>\n    } @else {\n    @for (suggestion of options; track suggestion.id; let i = $index) {\n    <div class=\"list-item\" [ngClass]=\"{\n                'active': suggestion === selectedItems,\n                'highlighted': highlightedIndex === i\n              }\" (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\n      {{ suggestion[optionDisplayProperty] }}\n    </div>\n    }\n\n    @if (isPageLoading) {\n    <div class=\"list-loading\">Loading...</div>\n    }\n\n    @if (loadErrorMessage) {\n    <div class=\"load-error\" (click)=\"retryLoad($event)\">\n      {{ loadErrorMessage }} \u00B7 <span class=\"retry\">Retry</span>\n    </div>\n    }\n\n    @if (paginationType === 'click' && hasMore && !isPageLoading && !loadErrorMessage) {\n    <div class=\"load-more\" (click)=\"onLoadMoreClick($event)\">\n      Load more ({{ options.length }} of {{ totalCount }})\n    </div>\n    }\n\n    @if (totalCount > 0 && options.length > 0 && !loadErrorMessage && !(paginationType === 'click' && hasMore)) {\n    <div class=\"list-footer\" [class.pager-footer]=\"paginationType === 'arrow'\">\n      @if (paginationType === 'arrow') {\n      <span class=\"range\">{{ pageRangeStart }} - {{ pageRangeEnd }} of {{ totalCount }}</span>\n      <span class=\"pager-nav\">\n        <span class=\"pager-btn\" [class.disabled]=\"currentPage <= 1\" (click)=\"prevArrowPage()\">\u2039</span>\n        <span class=\"pager-btn\" [class.disabled]=\"currentPage >= totalPages\" (click)=\"nextArrowPage()\">\u203A</span>\n      </span>\n      } @else {\n      {{ options.length }} of {{ totalCount }}\n      @if (hasMore && paginationType === 'scroll') {\n      <span> \u00B7 scroll for more</span>\n      }\n      }\n    </div>\n    }\n    }\n  </div>\n  }\n\n  @if (inputLoader) {\n  <label class=\"loader input-loader\"></label>\n  }\n\n  @if (error) {\n  <div class=\"val-msg\">{{ errorMessage }}</div>\n  }\n</div>\n", styles: [".form-group.paginated-autocomplete .form-control{padding-right:unset}.form-group.paginated-autocomplete .clear{right:7px}.form-group.paginated-autocomplete .option-list{max-height:220px;overflow-y:auto}.form-group.paginated-autocomplete .option-list.fixed-height{height:220px;display:flex;flex-direction:column}.form-group.paginated-autocomplete .option-list.fixed-height .list-item,.form-group.paginated-autocomplete .option-list.fixed-height .no-results,.form-group.paginated-autocomplete .option-list.fixed-height .list-loading,.form-group.paginated-autocomplete .option-list.fixed-height .load-error{flex-shrink:0}.form-group.paginated-autocomplete .option-list.fixed-height .list-footer{margin-top:auto}.form-group.paginated-autocomplete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.paginated-autocomplete .option-list .list-loading{padding:8px 10px;color:#9b9b9b;text-align:center;font-size:12px}.form-group.paginated-autocomplete .option-list .load-more{padding:8px 10px;text-align:center;cursor:pointer;color:#0d6efd;font-size:13px;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.paginated-autocomplete .option-list .load-more:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .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.paginated-autocomplete .option-list .load-error .retry{color:#0d6efd;text-decoration:underline}.form-group.paginated-autocomplete .option-list .load-error:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .option-list .list-footer{position:sticky;bottom:0;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.paginated-autocomplete .option-list .list-footer .pager-nav{display:inline-flex;align-items:center;gap:6px}.form-group.paginated-autocomplete .option-list .list-footer .range{color:#5f6368;font-size:12px}.form-group.paginated-autocomplete .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;font-size:15px;line-height:1;color:#5f6368;cursor:pointer;background-color:#fff}.form-group.paginated-autocomplete .option-list .list-footer .pager-btn:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .option-list .list-footer .pager-btn.disabled{border-color:transparent;color:#ccc;cursor:default;pointer-events:none}.form-group.paginated-autocomplete .option-list .list-footer.pager-footer{display:flex;justify-content:space-between;align-items:center;padding:4px 8px}\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 paginated-autocomplete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\n  @if (title) {\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n  }\n\n  <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\n    (input)=\"onUserType($event)\" (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" (click)=\"onInputClick()\"\n    [ngClass]=\"{'is-invalid': error}\" [attr.autocomplete]=\"autocomplete || null\" [readonly]=\"readonly\" />\n\n  <span class=\"focus-border\"></span>\n\n  @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\n  <label class=\"clear\" (mousedown)=\"onOptionMouseDown()\" (click)=\"resetInput()\">\n    <i class=\"he he-close\"></i>\n  </label>\n  }\n\n  @if (isDropdownOpen) {\n  <div #dropdownElement class=\"option-list\" [class.fixed-height]=\"paginationType === 'arrow' && totalPages > 1\"\n    (mousedown)=\"onOptionMouseDown()\" (scroll)=\"onListScroll($event)\">\n    @if (options.length === 0 && !isPageLoading && !loadErrorMessage) {\n    <div class=\"no-results\">\n      <div>No results found</div>\n      @if (isAddNewItem) {\n      <div (click)=\"onAddNewItemClick()\" class=\"btn-new\">\n        Add New Item\n      </div>\n      }\n    </div>\n    } @else {\n    @for (suggestion of options; track suggestion.id; let i = $index) {\n    <div class=\"list-item\" [ngClass]=\"{\n                'active': suggestion === selectedItems,\n                'highlighted': highlightedIndex === i\n              }\" (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\n      {{ suggestion[optionDisplayProperty] }}\n    </div>\n    }\n\n    @if (isPageLoading) {\n    <div class=\"list-loading\">Loading...</div>\n    }\n\n    @if (loadErrorMessage) {\n    <div class=\"load-error\" (click)=\"retryLoad($event)\">\n      {{ loadErrorMessage }} \u00B7 <span class=\"retry\">Retry</span>\n    </div>\n    }\n\n    @if (paginationType === 'click' && hasMore && !isPageLoading && !loadErrorMessage) {\n    <div class=\"load-more\" (click)=\"onLoadMoreClick($event)\">\n      Load more ({{ options.length }} of {{ totalCount }})\n    </div>\n    }\n\n    @if (totalCount > 0 && options.length > 0 && !loadErrorMessage && !(paginationType === 'click' && hasMore)) {\n    <div class=\"list-footer\" [class.pager-footer]=\"paginationType === 'arrow'\">\n      @if (paginationType === 'arrow') {\n      <span class=\"range\">{{ pageRangeStart }} - {{ pageRangeEnd }} of {{ totalCount }}</span>\n      <span class=\"pager-nav\">\n        <span class=\"pager-btn\" [class.disabled]=\"currentPage <= 1\" (click)=\"prevArrowPage()\">\u2039</span>\n        <span class=\"pager-btn\" [class.disabled]=\"currentPage >= totalPages\" (click)=\"nextArrowPage()\">\u203A</span>\n      </span>\n      } @else {\n      {{ options.length }} of {{ totalCount }}\n      @if (hasMore && paginationType === 'scroll') {\n      <span> \u00B7 scroll for more</span>\n      }\n      }\n    </div>\n    }\n    }\n  </div>\n  }\n\n  @if (inputLoader) {\n  <label class=\"loader input-loader\"></label>\n  }\n\n  @if (error) {\n  <div class=\"val-msg\">{{ errorMessage }}</div>\n  }\n</div>\n", styles: [".form-group.paginated-autocomplete .form-control{padding-right:unset}.form-group.paginated-autocomplete .clear{right:7px}.form-group.paginated-autocomplete .option-list{max-height:220px;overflow-y:auto}.form-group.paginated-autocomplete .option-list.fixed-height{height:220px;display:flex;flex-direction:column}.form-group.paginated-autocomplete .option-list.fixed-height .list-item,.form-group.paginated-autocomplete .option-list.fixed-height .no-results,.form-group.paginated-autocomplete .option-list.fixed-height .list-loading,.form-group.paginated-autocomplete .option-list.fixed-height .load-error{flex-shrink:0}.form-group.paginated-autocomplete .option-list.fixed-height .list-footer{margin-top:auto}.form-group.paginated-autocomplete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.paginated-autocomplete .option-list .list-loading{padding:8px 10px;color:#9b9b9b;text-align:center;font-size:12px}.form-group.paginated-autocomplete .option-list .load-more{padding:8px 10px;text-align:center;cursor:pointer;color:#0d6efd;font-size:13px;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.paginated-autocomplete .option-list .load-more:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .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.paginated-autocomplete .option-list .load-error .retry{color:#0d6efd;text-decoration:underline}.form-group.paginated-autocomplete .option-list .load-error:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .option-list .list-footer{position:sticky;bottom:0;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.paginated-autocomplete .option-list .list-footer .pager-nav{display:inline-flex;align-items:center;gap:6px}.form-group.paginated-autocomplete .option-list .list-footer .range{color:#5f6368;font-size:12px}.form-group.paginated-autocomplete .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;font-size:15px;line-height:1;color:#5f6368;cursor:pointer;background-color:#fff}.form-group.paginated-autocomplete .option-list .list-footer .pager-btn:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .option-list .list-footer .pager-btn.disabled{border-color:transparent;color:#ccc;cursor:default;pointer-events:none}.form-group.paginated-autocomplete .option-list .list-footer.pager-footer{display:flex;justify-content:space-between;align-items:center;padding:4px 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PaginatedAutocompleteControl, decorators: [{
             type: Component,
@@ -3301,7 +3308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                             useExisting: PaginatedAutocompleteControl,
                             multi: true,
                         },
-                    ], template: "<div class=\"form-group auto-complete paginated-autocomplete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\n  @if (title) {\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n  }\n\n  <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\n    (input)=\"onUserType($event)\" (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" (click)=\"onInputClick()\"\n    [ngClass]=\"{'is-invalid': error}\" [attr.autocomplete]=\"autocomplete || null\" [readonly]=\"readonly\" />\n\n  <span class=\"focus-border\"></span>\n\n  @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\n  <label class=\"clear\" (mousedown)=\"onOptionMouseDown()\" (click)=\"resetInput()\">\n    <i class=\"he he-close\"></i>\n  </label>\n  }\n\n  @if (isDropdownOpen) {\n  <div #dropdownElement class=\"option-list\" [class.fixed-height]=\"paginationType === 'arrow' && totalPages > 1\"\n    (mousedown)=\"onOptionMouseDown()\" (scroll)=\"onListScroll($event)\">\n    @if (options.length === 0 && !isPageLoading && !loadErrorMessage) {\n    <div class=\"no-results\">\n      <div>No results found</div>\n    </div>\n    } @else {\n    @for (suggestion of options; track suggestion.id; let i = $index) {\n    <div class=\"list-item\" [ngClass]=\"{\n                'active': suggestion === selectedItems,\n                'highlighted': highlightedIndex === i\n              }\" (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\n      {{ suggestion[optionDisplayProperty] }}\n    </div>\n    }\n\n    @if (isPageLoading) {\n    <div class=\"list-loading\">Loading...</div>\n    }\n\n    @if (loadErrorMessage) {\n    <div class=\"load-error\" (click)=\"retryLoad($event)\">\n      {{ loadErrorMessage }} \u00B7 <span class=\"retry\">Retry</span>\n    </div>\n    }\n\n    @if (paginationType === 'click' && hasMore && !isPageLoading && !loadErrorMessage) {\n    <div class=\"load-more\" (click)=\"onLoadMoreClick($event)\">\n      Load more ({{ options.length }} of {{ totalCount }})\n    </div>\n    }\n\n    @if (totalCount > 0 && options.length > 0 && !loadErrorMessage && !(paginationType === 'click' && hasMore)) {\n    <div class=\"list-footer\" [class.pager-footer]=\"paginationType === 'arrow'\">\n      @if (paginationType === 'arrow') {\n      <span class=\"range\">{{ pageRangeStart }} - {{ pageRangeEnd }} of {{ totalCount }}</span>\n      <span class=\"pager-nav\">\n        <span class=\"pager-btn\" [class.disabled]=\"currentPage <= 1\" (click)=\"prevArrowPage()\">\u2039</span>\n        <span class=\"pager-btn\" [class.disabled]=\"currentPage >= totalPages\" (click)=\"nextArrowPage()\">\u203A</span>\n      </span>\n      } @else {\n      {{ options.length }} of {{ totalCount }}\n      @if (hasMore && paginationType === 'scroll') {\n      <span> \u00B7 scroll for more</span>\n      }\n      }\n    </div>\n    }\n    }\n  </div>\n  }\n\n  @if (inputLoader) {\n  <label class=\"loader input-loader\"></label>\n  }\n\n  @if (error) {\n  <div class=\"val-msg\">{{ errorMessage }}</div>\n  }\n</div>\n", styles: [".form-group.paginated-autocomplete .form-control{padding-right:unset}.form-group.paginated-autocomplete .clear{right:7px}.form-group.paginated-autocomplete .option-list{max-height:220px;overflow-y:auto}.form-group.paginated-autocomplete .option-list.fixed-height{height:220px;display:flex;flex-direction:column}.form-group.paginated-autocomplete .option-list.fixed-height .list-item,.form-group.paginated-autocomplete .option-list.fixed-height .no-results,.form-group.paginated-autocomplete .option-list.fixed-height .list-loading,.form-group.paginated-autocomplete .option-list.fixed-height .load-error{flex-shrink:0}.form-group.paginated-autocomplete .option-list.fixed-height .list-footer{margin-top:auto}.form-group.paginated-autocomplete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.paginated-autocomplete .option-list .list-loading{padding:8px 10px;color:#9b9b9b;text-align:center;font-size:12px}.form-group.paginated-autocomplete .option-list .load-more{padding:8px 10px;text-align:center;cursor:pointer;color:#0d6efd;font-size:13px;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.paginated-autocomplete .option-list .load-more:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .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.paginated-autocomplete .option-list .load-error .retry{color:#0d6efd;text-decoration:underline}.form-group.paginated-autocomplete .option-list .load-error:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .option-list .list-footer{position:sticky;bottom:0;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.paginated-autocomplete .option-list .list-footer .pager-nav{display:inline-flex;align-items:center;gap:6px}.form-group.paginated-autocomplete .option-list .list-footer .range{color:#5f6368;font-size:12px}.form-group.paginated-autocomplete .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;font-size:15px;line-height:1;color:#5f6368;cursor:pointer;background-color:#fff}.form-group.paginated-autocomplete .option-list .list-footer .pager-btn:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .option-list .list-footer .pager-btn.disabled{border-color:transparent;color:#ccc;cursor:default;pointer-events:none}.form-group.paginated-autocomplete .option-list .list-footer.pager-footer{display:flex;justify-content:space-between;align-items:center;padding:4px 8px}\n"] }]
+                    ], template: "<div class=\"form-group auto-complete paginated-autocomplete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\n  @if (title) {\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n  }\n\n  <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\n    (input)=\"onUserType($event)\" (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" (click)=\"onInputClick()\"\n    [ngClass]=\"{'is-invalid': error}\" [attr.autocomplete]=\"autocomplete || null\" [readonly]=\"readonly\" />\n\n  <span class=\"focus-border\"></span>\n\n  @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\n  <label class=\"clear\" (mousedown)=\"onOptionMouseDown()\" (click)=\"resetInput()\">\n    <i class=\"he he-close\"></i>\n  </label>\n  }\n\n  @if (isDropdownOpen) {\n  <div #dropdownElement class=\"option-list\" [class.fixed-height]=\"paginationType === 'arrow' && totalPages > 1\"\n    (mousedown)=\"onOptionMouseDown()\" (scroll)=\"onListScroll($event)\">\n    @if (options.length === 0 && !isPageLoading && !loadErrorMessage) {\n    <div class=\"no-results\">\n      <div>No results found</div>\n      @if (isAddNewItem) {\n      <div (click)=\"onAddNewItemClick()\" class=\"btn-new\">\n        Add New Item\n      </div>\n      }\n    </div>\n    } @else {\n    @for (suggestion of options; track suggestion.id; let i = $index) {\n    <div class=\"list-item\" [ngClass]=\"{\n                'active': suggestion === selectedItems,\n                'highlighted': highlightedIndex === i\n              }\" (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\n      {{ suggestion[optionDisplayProperty] }}\n    </div>\n    }\n\n    @if (isPageLoading) {\n    <div class=\"list-loading\">Loading...</div>\n    }\n\n    @if (loadErrorMessage) {\n    <div class=\"load-error\" (click)=\"retryLoad($event)\">\n      {{ loadErrorMessage }} \u00B7 <span class=\"retry\">Retry</span>\n    </div>\n    }\n\n    @if (paginationType === 'click' && hasMore && !isPageLoading && !loadErrorMessage) {\n    <div class=\"load-more\" (click)=\"onLoadMoreClick($event)\">\n      Load more ({{ options.length }} of {{ totalCount }})\n    </div>\n    }\n\n    @if (totalCount > 0 && options.length > 0 && !loadErrorMessage && !(paginationType === 'click' && hasMore)) {\n    <div class=\"list-footer\" [class.pager-footer]=\"paginationType === 'arrow'\">\n      @if (paginationType === 'arrow') {\n      <span class=\"range\">{{ pageRangeStart }} - {{ pageRangeEnd }} of {{ totalCount }}</span>\n      <span class=\"pager-nav\">\n        <span class=\"pager-btn\" [class.disabled]=\"currentPage <= 1\" (click)=\"prevArrowPage()\">\u2039</span>\n        <span class=\"pager-btn\" [class.disabled]=\"currentPage >= totalPages\" (click)=\"nextArrowPage()\">\u203A</span>\n      </span>\n      } @else {\n      {{ options.length }} of {{ totalCount }}\n      @if (hasMore && paginationType === 'scroll') {\n      <span> \u00B7 scroll for more</span>\n      }\n      }\n    </div>\n    }\n    }\n  </div>\n  }\n\n  @if (inputLoader) {\n  <label class=\"loader input-loader\"></label>\n  }\n\n  @if (error) {\n  <div class=\"val-msg\">{{ errorMessage }}</div>\n  }\n</div>\n", styles: [".form-group.paginated-autocomplete .form-control{padding-right:unset}.form-group.paginated-autocomplete .clear{right:7px}.form-group.paginated-autocomplete .option-list{max-height:220px;overflow-y:auto}.form-group.paginated-autocomplete .option-list.fixed-height{height:220px;display:flex;flex-direction:column}.form-group.paginated-autocomplete .option-list.fixed-height .list-item,.form-group.paginated-autocomplete .option-list.fixed-height .no-results,.form-group.paginated-autocomplete .option-list.fixed-height .list-loading,.form-group.paginated-autocomplete .option-list.fixed-height .load-error{flex-shrink:0}.form-group.paginated-autocomplete .option-list.fixed-height .list-footer{margin-top:auto}.form-group.paginated-autocomplete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.paginated-autocomplete .option-list .list-loading{padding:8px 10px;color:#9b9b9b;text-align:center;font-size:12px}.form-group.paginated-autocomplete .option-list .load-more{padding:8px 10px;text-align:center;cursor:pointer;color:#0d6efd;font-size:13px;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.paginated-autocomplete .option-list .load-more:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .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.paginated-autocomplete .option-list .load-error .retry{color:#0d6efd;text-decoration:underline}.form-group.paginated-autocomplete .option-list .load-error:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .option-list .list-footer{position:sticky;bottom:0;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.paginated-autocomplete .option-list .list-footer .pager-nav{display:inline-flex;align-items:center;gap:6px}.form-group.paginated-autocomplete .option-list .list-footer .range{color:#5f6368;font-size:12px}.form-group.paginated-autocomplete .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;font-size:15px;line-height:1;color:#5f6368;cursor:pointer;background-color:#fff}.form-group.paginated-autocomplete .option-list .list-footer .pager-btn:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .option-list .list-footer .pager-btn.disabled{border-color:transparent;color:#ccc;cursor:default;pointer-events:none}.form-group.paginated-autocomplete .option-list .list-footer.pager-footer{display:flex;justify-content:space-between;align-items:center;padding:4px 8px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { title: [{
                 type: Input
             }], required: [{
@@ -3322,6 +3329,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], readonly: [{
                 type: Input
+            }], isAddNewItem: [{
+                type: Input
             }], optionDisplayProperty: [{
                 type: Input
             }], paginationType: [{
@@ -3348,6 +3357,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Output
             }], optionPatched: [{
                 type: Output
+            }], addNewItemClicked: [{
+                type: Output
             }], inputElement: [{
                 type: ViewChild,
                 args: ["inputElement"]
@@ -3963,6 +3974,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 args: ['switchContainer']
             }] } });
 
+const RICH_TEXT_EDITOR_DEFAULT_FEATURES = {
+    bold: true,
+    italic: true,
+    underline: true,
+    h1: true,
+    h2: true,
+    textColor: true,
+    backgroundColor: true,
+    alignLeft: true,
+    alignCenter: true,
+    alignRight: true,
+    justify: true,
+    indent: true,
+    outdent: true,
+    unorderedList: true,
+    orderedList: true,
+    link: true,
+    image: true,
+    undo: true,
+    redo: true,
+    clearFormatting: true,
+};
+
 /**
  * Lightweight rich-text editor built on a `contenteditable` element and the
  * browser's `document.execCommand` rich-editing API (the de-facto standard for
@@ -3973,9 +4007,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * inner HTML string.
  */
 class RichTextEditor {
-    header = true;
-    media = true;
-    link = true;
+    /** Per-item toolbar visibility. Omitted keys default to visible. */
+    features = {};
     placeholder = 'Type here...';
     readonly = false;
     /** Disabled state, set by Reactive Forms through `setDisabledState`. */
@@ -4148,6 +4181,14 @@ class RichTextEditor {
     trackByIndex(index) {
         return index;
     }
+    /** Whether a toolbar item is visible (defaults to true when not configured). */
+    isVisible(feature) {
+        return this.features[feature] ?? RICH_TEXT_EDITOR_DEFAULT_FEATURES[feature];
+    }
+    /** Whether any of the given toolbar items are visible (for group separators). */
+    hasAny(...features) {
+        return features.some((feature) => this.isVisible(feature));
+    }
     // ---- Undo / redo / clear ----
     undo() {
         this.exec('undo');
@@ -4182,13 +4223,13 @@ class RichTextEditor {
         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: { header: "header", media: "media", link: "link", placeholder: "placeholder", readonly: "readonly" }, host: { listeners: { "document:selectionchange": "saveSelection()", "document:mousedown": "onDocumentMouseDown($event)" } }, providers: [
+    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: [
             {
                 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\">\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('bold')\" title=\"Bold\">\n                <i class=\"he he-bold\"></i>\n            </button>\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('italic')\" title=\"Italic\">\n                <i class=\"he he-italics\"></i>\n            </button>\n            <button type=\"button\" (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=\"header\">\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyBlockFormat('h1')\" title=\"Header 1\">\n                <i class=\"he he-heading-1\"></i>\n            </button>\n            <button type=\"button\" (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\">\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                <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\">\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\">\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('left')\" title=\"Justify Left\">\n                <i class=\"he he-left-align\"></i>\n            </button>\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('center')\" title=\"Justify Center\">\n                <i class=\"he he-center-align\"></i>\n            </button>\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('right')\" title=\"Justify Right\">\n                <i class=\"he he-right-align\"></i>\n            </button>\n            <button type=\"button\" (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\">\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"indent()\" title=\"Indent\">\n                <i class=\"he he-text-indent-left\"></i>\n            </button>\n            <button type=\"button\" (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=\"media\">\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyList('ul')\" title=\"Unordered list\">\n                <i class=\"he he-unordered-list\"></i>\n            </button>\n            <button type=\"button\" (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=\"link\">\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"createLink()\" title=\"Link\">\n                <i class=\"he he-link\"></i>\n            </button>\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"insertImage()\" title=\"Image\">\n                <i class=\"he he-image\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\">\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"undo()\" title=\"Undo\">\n                <i class=\"he he-undo\"></i>\n            </button>\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"redo()\" title=\"Redo\">\n                <i class=\"he he-redo\"></i>\n            </button>\n        </div>\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    </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    <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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RichTextEditor, decorators: [{
             type: Component,
@@ -4198,12 +4239,8 @@ 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\">\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('bold')\" title=\"Bold\">\n                <i class=\"he he-bold\"></i>\n            </button>\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('italic')\" title=\"Italic\">\n                <i class=\"he he-italics\"></i>\n            </button>\n            <button type=\"button\" (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=\"header\">\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyBlockFormat('h1')\" title=\"Header 1\">\n                <i class=\"he he-heading-1\"></i>\n            </button>\n            <button type=\"button\" (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\">\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                <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\">\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\">\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('left')\" title=\"Justify Left\">\n                <i class=\"he he-left-align\"></i>\n            </button>\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('center')\" title=\"Justify Center\">\n                <i class=\"he he-center-align\"></i>\n            </button>\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('right')\" title=\"Justify Right\">\n                <i class=\"he he-right-align\"></i>\n            </button>\n            <button type=\"button\" (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\">\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"indent()\" title=\"Indent\">\n                <i class=\"he he-text-indent-left\"></i>\n            </button>\n            <button type=\"button\" (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=\"media\">\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyList('ul')\" title=\"Unordered list\">\n                <i class=\"he he-unordered-list\"></i>\n            </button>\n            <button type=\"button\" (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=\"link\">\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"createLink()\" title=\"Link\">\n                <i class=\"he he-link\"></i>\n            </button>\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"insertImage()\" title=\"Image\">\n                <i class=\"he he-image\"></i>\n            </button>\n        </div>\n        <div class=\"toolbar-items\">\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"undo()\" title=\"Undo\">\n                <i class=\"he he-undo\"></i>\n            </button>\n            <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"redo()\" title=\"Redo\">\n                <i class=\"he he-redo\"></i>\n            </button>\n        </div>\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    </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"] }]
-        }], propDecorators: { header: [{
-                type: Input
-            }], media: [{
-                type: Input
-            }], link: [{
+                    ], 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"] }]
+        }], propDecorators: { features: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -4332,5 +4369,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AutocompleteControl, CalendarControl, CheckboxControl, ColorPicker, InputControl, MultiselectControl, PaginatedAutocompleteControl, RadioControl, RichTextEditor, SelectControl, SwitchControl, TextareaControl };
+export { AutocompleteControl, CalendarControl, CheckboxControl, ColorPicker, InputControl, MultiselectControl, PaginatedAutocompleteControl, RICH_TEXT_EDITOR_DEFAULT_FEATURES, RadioControl, RichTextEditor, SelectControl, SwitchControl, TextareaControl };
 //# sourceMappingURL=nexheal-lib.mjs.map