nexheal-lib 0.0.25 → 0.0.26

package/fesm2022/nexheal-lib.mjs

@@ -2809,18 +2809,53 @@ class TextEditor {
     applyHighlight(event) {
         this.exec('hiliteColor', event.target.value, true);
     }
+    // ---- Modal state ----
+    showModal = false;
+    modalType = 'link';
+    modalUrls = [''];
     // ---- Links / images ----
     createLink() {
-        const url = prompt('Enter URL', 'https://');
-        if (!url)
-            return;
-        this.exec('createLink', url);
+        this.openModal('link');
     }
     insertImage() {
-        const url = prompt('Enter image URL:');
-        if (!url)
+        this.openModal('image');
+    }
+    openModal(type) {
+        this.modalType = type;
+        this.modalUrls = [type === 'link' ? 'https://' : ''];
+        this.showModal = true;
+    }
+    addUrlRow() {
+        this.modalUrls.push(this.modalType === 'link' ? 'https://' : '');
+    }
+    removeUrlRow(index) {
+        if (this.modalUrls.length > 1) {
+            this.modalUrls.splice(index, 1);
+        }
+    }
+    confirmModal() {
+        const urls = this.modalUrls.map(u => u.trim()).filter(u => u && u !== 'https://');
+        if (urls.length === 0) {
+            this.cancelModal();
             return;
-        this.exec('insertImage', url);
+        }
+        this.showModal = false;
+        for (const url of urls) {
+            if (this.modalType === 'link') {
+                this.exec('createLink', url);
+            }
+            else {
+                this.exec('insertImage', url);
+            }
+        }
+        this.modalUrls = [''];
+    }
+    cancelModal() {
+        this.showModal = false;
+        this.modalUrls = [''];
+    }
+    trackByIndex(index) {
+        return index;
     }
     // ---- Undo / redo / clear ----
     undo() {
@@ -2862,17 +2897,17 @@ class TextEditor {
                 useExisting: forwardRef(() => TextEditor),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<div class=\"text-editor\" [ngClass]=\"{'readonly': readonly || disabled}\">\r\n    <div class=\"toolbar\" *ngIf=\"!readonly && !disabled\">\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"applyInlineStyle('bold')\" tooltip=\"Bold\">\r\n                <i class=\"he he-bold\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyInlineStyle('italic')\" tooltip=\"italic\">\r\n                <i class=\"he he-italics\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyInlineStyle('underline')\" tooltip=\"Underline\">\r\n                <i class=\"he he-underline\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"header\">\r\n            <button type=\"button\" (click)=\"applyBlockFormat('h1')\" tooltip=\"Header 1\">\r\n                <i class=\"he he-heading-1\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyBlockFormat('h2')\" tooltip=\"Header 2\">\r\n                <i class=\"he he-heading-2\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items more-gap\">\r\n            <div class=\"input-wrap\" tooltip=\"Text Color\">\r\n                <i class=\"he he-text-drop\"></i>\r\n                <input type=\"color\" (change)=\"applyColor($event)\" />\r\n            </div>\r\n            <div class=\"input-wrap\" tooltip=\"Background Color\">\r\n                <i class=\"he he-background-drop\"></i>\r\n                <input type=\"color\" (change)=\"applyHighlight($event)\" />\r\n            </div>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"setAlignment('left')\" tooltip=\"Justify Left\">\r\n                <i class=\"he he-left-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('center')\" tooltip=\"Justify Center\">\r\n                <i class=\"he he-center-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('right')\" tooltip=\"Justify Right\">\r\n                <i class=\"he he-right-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('justify')\" tooltip=\"Justify Full\">\r\n                <i class=\"he he-justify\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"indent()\" tooltip=\"Indent\">\r\n                <i class=\"he he-text-indent-left\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"outdent()\" tooltip=\"Outdent\">\r\n                <i class=\"he he-text-indent-right\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"media\">\r\n            <button type=\"button\" (click)=\"applyList('ul')\" tooltip=\"Unordered list\">\r\n                <i class=\"he he-unordered-list\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyList('ol')\" tooltip=\"Ordered list\">\r\n                <i class=\"he he-ordered-list\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"link\">\r\n            <button type=\"button\" (click)=\"createLink()\" tooltip=\"Link\">\r\n                <i class=\"he he-link\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"insertImage()\" tooltip=\"Image\">\r\n                <i class=\"he he-image\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"undo()\" tooltip=\"Undo\">\r\n                <i class=\"he he-undo\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"redo()\" tooltip=\"Redo\">\r\n                <i class=\"he he-redo\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"clearFormatting()\" tooltip=\"Clear Formatting\">\r\n                <i class=\"he he-text-clear-format\"></i>\r\n            </button>\r\n        </div>\r\n    </div>\r\n\r\n    <div #editor class=\"editor-content\" [attr.contenteditable]=\"(readonly || disabled) ? 'false' : 'true'\" (input)=\"onInput()\" (blur)=\"onTouched()\"\r\n        [attr.data-placeholder]=\"placeholder\">\r\n    </div>\r\n</div>\r\n", styles: [".text-editor{border:1px solid #ccc}.text-editor .toolbar{gap:.75rem;display:flex;flex-wrap:wrap;background:#f8f8f8;padding:.75rem;border-bottom:1px solid #cccccc}.text-editor .toolbar .toolbar-items{height:18px;display:flex;flex-wrap:wrap;align-items:center;padding-right:.75rem;border-right:1px solid #969090}.text-editor .toolbar .toolbar-items button,.text-editor .toolbar .toolbar-items .input-wrap{cursor:pointer;min-width:25px;min-height:20px}.text-editor .toolbar .toolbar-items button:hover i,.text-editor .toolbar .toolbar-items .input-wrap:hover i{color:#000}.text-editor .toolbar .toolbar-items button{border:0;display:grid;place-items:center;background:transparent}.text-editor .toolbar .toolbar-items button:hover{background:#eee}.text-editor .toolbar .toolbar-items .input-wrap{gap:2px;display:flex;cursor:pointer;align-items:center;flex-direction:column;justify-content:center}.text-editor .toolbar .toolbar-items .input-wrap input[type=color]{width:80%;padding:0;height:2px;border:none;cursor:inherit}.text-editor .toolbar .toolbar-items i{font-size:13px;color:#3c4148}.text-editor .toolbar .toolbar-items i.he-bold{font-weight:600}.text-editor .toolbar .toolbar-items i.he-underline{font-size:14px}.text-editor .toolbar .toolbar-items i.he-text-drop{font-size:12px}.text-editor .toolbar .toolbar-items i.he-background-drop{top:-1px;font-size:12px}.text-editor .toolbar .toolbar-items i.he-heading-1,.text-editor .toolbar .toolbar-items i.he-link,.text-editor .toolbar .toolbar-items i.he-left-align,.text-editor .toolbar .toolbar-items i.he-center-align,.text-editor .toolbar .toolbar-items i.he-right-align,.text-editor .toolbar .toolbar-items i.he-justify{font-size:16px}.text-editor .toolbar .toolbar-items i.he-text-indent-left,.text-editor .toolbar .toolbar-items i.he-text-indent-right{font-size:17px}.text-editor .toolbar .toolbar-items i.he-heading-2{top:1px;font-size:16px}.text-editor .toolbar .toolbar-items i.he-unordered-list,.text-editor .toolbar .toolbar-items i.he-ordered-list{top:-1px;font-size:20px}.text-editor .toolbar .toolbar-items i.he-image{font-size:15px;font-weight:600}.text-editor .toolbar .toolbar-items i.he-redo,.text-editor .toolbar .toolbar-items i.he-undo{top:-1px;font-size:14px}.text-editor .toolbar .toolbar-items.more-gap{gap:5px}.text-editor .toolbar .toolbar-items:last-child{border-right:0}.text-editor .editor-content{outline:none;min-height:200px;position:relative;background:#fff;padding:.75rem}.text-editor .editor-content[data-placeholder]:empty:before{content:attr(data-placeholder);color:#aaa;pointer-events:none;position:absolute;left:.75rem;top:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        ], viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<div class=\"text-editor\" [ngClass]=\"{'readonly': readonly || disabled}\">\r\n    <div class=\"toolbar\" *ngIf=\"!readonly && !disabled\">\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"applyInlineStyle('bold')\" tooltip=\"Bold\">\r\n                <i class=\"he he-bold\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyInlineStyle('italic')\" tooltip=\"italic\">\r\n                <i class=\"he he-italics\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyInlineStyle('underline')\" tooltip=\"Underline\">\r\n                <i class=\"he he-underline\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"header\">\r\n            <button type=\"button\" (click)=\"applyBlockFormat('h1')\" tooltip=\"Header 1\">\r\n                <i class=\"he he-heading-1\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyBlockFormat('h2')\" tooltip=\"Header 2\">\r\n                <i class=\"he he-heading-2\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items more-gap\">\r\n            <div class=\"input-wrap\" tooltip=\"Text Color\">\r\n                <i class=\"he he-text-drop\"></i>\r\n                <input type=\"color\" (change)=\"applyColor($event)\" />\r\n            </div>\r\n            <div class=\"input-wrap\" tooltip=\"Background Color\">\r\n                <i class=\"he he-background-drop\"></i>\r\n                <input type=\"color\" (change)=\"applyHighlight($event)\" />\r\n            </div>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"setAlignment('left')\" tooltip=\"Justify Left\">\r\n                <i class=\"he he-left-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('center')\" tooltip=\"Justify Center\">\r\n                <i class=\"he he-center-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('right')\" tooltip=\"Justify Right\">\r\n                <i class=\"he he-right-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('justify')\" tooltip=\"Justify Full\">\r\n                <i class=\"he he-justify\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"indent()\" tooltip=\"Indent\">\r\n                <i class=\"he he-text-indent-left\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"outdent()\" tooltip=\"Outdent\">\r\n                <i class=\"he he-text-indent-right\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"media\">\r\n            <button type=\"button\" (click)=\"applyList('ul')\" tooltip=\"Unordered list\">\r\n                <i class=\"he he-unordered-list\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyList('ol')\" tooltip=\"Ordered list\">\r\n                <i class=\"he he-ordered-list\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"link\">\r\n            <button type=\"button\" (click)=\"createLink()\" tooltip=\"Link\">\r\n                <i class=\"he he-link\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"insertImage()\" tooltip=\"Image\">\r\n                <i class=\"he he-image\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"undo()\" tooltip=\"Undo\">\r\n                <i class=\"he he-undo\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"redo()\" tooltip=\"Redo\">\r\n                <i class=\"he he-redo\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"clearFormatting()\" tooltip=\"Clear Formatting\">\r\n                <i class=\"he he-text-clear-format\"></i>\r\n            </button>\r\n        </div>\r\n    </div>\r\n\r\n    <div #editor class=\"editor-content\" [attr.contenteditable]=\"(readonly || disabled) ? 'false' : 'true'\" (input)=\"onInput()\" (blur)=\"onTouched()\"\r\n        [attr.data-placeholder]=\"placeholder\">\r\n    </div>\r\n\r\n    <!-- Custom Modal for Link/Image URL -->\r\n    <div class=\"editor-modal-overlay\" *ngIf=\"showModal\" (click)=\"cancelModal()\">\r\n        <div class=\"editor-modal\" (click)=\"$event.stopPropagation()\">\r\n            <div class=\"editor-modal-header\">\r\n                <span>{{ modalType === 'link' ? 'Insert Link' : 'Insert Image' }}</span>\r\n                <button type=\"button\" class=\"editor-modal-close\" (click)=\"cancelModal()\">\r\n                    <i class=\"he he-close\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"editor-modal-body\">\r\n                <div class=\"url-row\" *ngFor=\"let url of modalUrls; let i = index; trackBy: trackByIndex\">\r\n                    <input type=\"text\" class=\"url-input\"\r\n                        [ngModel]=\"modalUrls[i]\"\r\n                        (ngModelChange)=\"modalUrls[i] = $event\"\r\n                        [placeholder]=\"modalType === 'link' ? 'https://example.com' : 'https://example.com/image.png'\" />\r\n                    <button type=\"button\" class=\"url-remove-btn\" *ngIf=\"modalUrls.length > 1\" (click)=\"removeUrlRow(i)\" title=\"Remove\">\r\n                        <i class=\"he he-close\"></i>\r\n                    </button>\r\n                </div>\r\n                <button type=\"button\" class=\"url-add-btn\" (click)=\"addUrlRow()\">\r\n                    + Add more\r\n                </button>\r\n            </div>\r\n            <div class=\"editor-modal-footer\">\r\n                <button type=\"button\" class=\"modal-btn cancel-btn\" (click)=\"cancelModal()\">Cancel</button>\r\n                <button type=\"button\" class=\"modal-btn confirm-btn\" (click)=\"confirmModal()\">Insert</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".text-editor{border:1px solid #ccc}.text-editor .toolbar{gap:.75rem;display:flex;flex-wrap:wrap;background:#f8f8f8;padding:.75rem;border-bottom:1px solid #cccccc}.text-editor .toolbar .toolbar-items{height:18px;display:flex;flex-wrap:wrap;align-items:center;padding-right:.75rem;border-right:1px solid #969090}.text-editor .toolbar .toolbar-items button,.text-editor .toolbar .toolbar-items .input-wrap{cursor:pointer;min-width:25px;min-height:20px}.text-editor .toolbar .toolbar-items button:hover i,.text-editor .toolbar .toolbar-items .input-wrap:hover i{color:#000}.text-editor .toolbar .toolbar-items button{border:0;display:grid;place-items:center;background:transparent}.text-editor .toolbar .toolbar-items button:hover{background:#eee}.text-editor .toolbar .toolbar-items .input-wrap{gap:2px;display:flex;cursor:pointer;align-items:center;flex-direction:column;justify-content:center}.text-editor .toolbar .toolbar-items .input-wrap input[type=color]{width:80%;padding:0;height:2px;border:none;cursor:inherit}.text-editor .toolbar .toolbar-items i{font-size:13px;color:#3c4148}.text-editor .toolbar .toolbar-items i.he-bold{font-weight:600}.text-editor .toolbar .toolbar-items i.he-underline{font-size:14px}.text-editor .toolbar .toolbar-items i.he-text-drop{font-size:12px}.text-editor .toolbar .toolbar-items i.he-background-drop{top:-1px;font-size:12px}.text-editor .toolbar .toolbar-items i.he-heading-1,.text-editor .toolbar .toolbar-items i.he-link,.text-editor .toolbar .toolbar-items i.he-left-align,.text-editor .toolbar .toolbar-items i.he-center-align,.text-editor .toolbar .toolbar-items i.he-right-align,.text-editor .toolbar .toolbar-items i.he-justify{font-size:16px}.text-editor .toolbar .toolbar-items i.he-text-indent-left,.text-editor .toolbar .toolbar-items i.he-text-indent-right{font-size:17px}.text-editor .toolbar .toolbar-items i.he-heading-2{top:1px;font-size:16px}.text-editor .toolbar .toolbar-items i.he-unordered-list,.text-editor .toolbar .toolbar-items i.he-ordered-list{top:-1px;font-size:20px}.text-editor .toolbar .toolbar-items i.he-image{font-size:15px;font-weight:600}.text-editor .toolbar .toolbar-items i.he-redo,.text-editor .toolbar .toolbar-items i.he-undo{top:-1px;font-size:14px}.text-editor .toolbar .toolbar-items.more-gap{gap:5px}.text-editor .toolbar .toolbar-items:last-child{border-right:0}.text-editor .editor-content{outline:none;min-height:200px;position:relative;background:#fff;padding:.75rem}.text-editor .editor-content[data-placeholder]:empty:before{content:attr(data-placeholder);color:#aaa;pointer-events:none;position:absolute;left:.75rem;top:.75rem}.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;min-width:420px;max-width:520px;width:100%;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-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}.text-editor .editor-modal-body .url-input{flex:1;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-remove-btn{background:none;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;padding:6px 8px;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}\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.1.3", ngImport: i0, type: TextEditor, decorators: [{
             type: Component,
-            args: [{ selector: 'app-text-editor', standalone: true, imports: [CommonModule], providers: [
+            args: [{ selector: 'app-text-editor', standalone: true, imports: [CommonModule, FormsModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => TextEditor),
                             multi: true,
                         },
-                    ], template: "<div class=\"text-editor\" [ngClass]=\"{'readonly': readonly || disabled}\">\r\n    <div class=\"toolbar\" *ngIf=\"!readonly && !disabled\">\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"applyInlineStyle('bold')\" tooltip=\"Bold\">\r\n                <i class=\"he he-bold\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyInlineStyle('italic')\" tooltip=\"italic\">\r\n                <i class=\"he he-italics\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyInlineStyle('underline')\" tooltip=\"Underline\">\r\n                <i class=\"he he-underline\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"header\">\r\n            <button type=\"button\" (click)=\"applyBlockFormat('h1')\" tooltip=\"Header 1\">\r\n                <i class=\"he he-heading-1\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyBlockFormat('h2')\" tooltip=\"Header 2\">\r\n                <i class=\"he he-heading-2\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items more-gap\">\r\n            <div class=\"input-wrap\" tooltip=\"Text Color\">\r\n                <i class=\"he he-text-drop\"></i>\r\n                <input type=\"color\" (change)=\"applyColor($event)\" />\r\n            </div>\r\n            <div class=\"input-wrap\" tooltip=\"Background Color\">\r\n                <i class=\"he he-background-drop\"></i>\r\n                <input type=\"color\" (change)=\"applyHighlight($event)\" />\r\n            </div>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"setAlignment('left')\" tooltip=\"Justify Left\">\r\n                <i class=\"he he-left-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('center')\" tooltip=\"Justify Center\">\r\n                <i class=\"he he-center-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('right')\" tooltip=\"Justify Right\">\r\n                <i class=\"he he-right-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('justify')\" tooltip=\"Justify Full\">\r\n                <i class=\"he he-justify\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"indent()\" tooltip=\"Indent\">\r\n                <i class=\"he he-text-indent-left\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"outdent()\" tooltip=\"Outdent\">\r\n                <i class=\"he he-text-indent-right\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"media\">\r\n            <button type=\"button\" (click)=\"applyList('ul')\" tooltip=\"Unordered list\">\r\n                <i class=\"he he-unordered-list\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyList('ol')\" tooltip=\"Ordered list\">\r\n                <i class=\"he he-ordered-list\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"link\">\r\n            <button type=\"button\" (click)=\"createLink()\" tooltip=\"Link\">\r\n                <i class=\"he he-link\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"insertImage()\" tooltip=\"Image\">\r\n                <i class=\"he he-image\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"undo()\" tooltip=\"Undo\">\r\n                <i class=\"he he-undo\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"redo()\" tooltip=\"Redo\">\r\n                <i class=\"he he-redo\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"clearFormatting()\" tooltip=\"Clear Formatting\">\r\n                <i class=\"he he-text-clear-format\"></i>\r\n            </button>\r\n        </div>\r\n    </div>\r\n\r\n    <div #editor class=\"editor-content\" [attr.contenteditable]=\"(readonly || disabled) ? 'false' : 'true'\" (input)=\"onInput()\" (blur)=\"onTouched()\"\r\n        [attr.data-placeholder]=\"placeholder\">\r\n    </div>\r\n</div>\r\n", styles: [".text-editor{border:1px solid #ccc}.text-editor .toolbar{gap:.75rem;display:flex;flex-wrap:wrap;background:#f8f8f8;padding:.75rem;border-bottom:1px solid #cccccc}.text-editor .toolbar .toolbar-items{height:18px;display:flex;flex-wrap:wrap;align-items:center;padding-right:.75rem;border-right:1px solid #969090}.text-editor .toolbar .toolbar-items button,.text-editor .toolbar .toolbar-items .input-wrap{cursor:pointer;min-width:25px;min-height:20px}.text-editor .toolbar .toolbar-items button:hover i,.text-editor .toolbar .toolbar-items .input-wrap:hover i{color:#000}.text-editor .toolbar .toolbar-items button{border:0;display:grid;place-items:center;background:transparent}.text-editor .toolbar .toolbar-items button:hover{background:#eee}.text-editor .toolbar .toolbar-items .input-wrap{gap:2px;display:flex;cursor:pointer;align-items:center;flex-direction:column;justify-content:center}.text-editor .toolbar .toolbar-items .input-wrap input[type=color]{width:80%;padding:0;height:2px;border:none;cursor:inherit}.text-editor .toolbar .toolbar-items i{font-size:13px;color:#3c4148}.text-editor .toolbar .toolbar-items i.he-bold{font-weight:600}.text-editor .toolbar .toolbar-items i.he-underline{font-size:14px}.text-editor .toolbar .toolbar-items i.he-text-drop{font-size:12px}.text-editor .toolbar .toolbar-items i.he-background-drop{top:-1px;font-size:12px}.text-editor .toolbar .toolbar-items i.he-heading-1,.text-editor .toolbar .toolbar-items i.he-link,.text-editor .toolbar .toolbar-items i.he-left-align,.text-editor .toolbar .toolbar-items i.he-center-align,.text-editor .toolbar .toolbar-items i.he-right-align,.text-editor .toolbar .toolbar-items i.he-justify{font-size:16px}.text-editor .toolbar .toolbar-items i.he-text-indent-left,.text-editor .toolbar .toolbar-items i.he-text-indent-right{font-size:17px}.text-editor .toolbar .toolbar-items i.he-heading-2{top:1px;font-size:16px}.text-editor .toolbar .toolbar-items i.he-unordered-list,.text-editor .toolbar .toolbar-items i.he-ordered-list{top:-1px;font-size:20px}.text-editor .toolbar .toolbar-items i.he-image{font-size:15px;font-weight:600}.text-editor .toolbar .toolbar-items i.he-redo,.text-editor .toolbar .toolbar-items i.he-undo{top:-1px;font-size:14px}.text-editor .toolbar .toolbar-items.more-gap{gap:5px}.text-editor .toolbar .toolbar-items:last-child{border-right:0}.text-editor .editor-content{outline:none;min-height:200px;position:relative;background:#fff;padding:.75rem}.text-editor .editor-content[data-placeholder]:empty:before{content:attr(data-placeholder);color:#aaa;pointer-events:none;position:absolute;left:.75rem;top:.75rem}\n"] }]
+                    ], template: "<div class=\"text-editor\" [ngClass]=\"{'readonly': readonly || disabled}\">\r\n    <div class=\"toolbar\" *ngIf=\"!readonly && !disabled\">\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"applyInlineStyle('bold')\" tooltip=\"Bold\">\r\n                <i class=\"he he-bold\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyInlineStyle('italic')\" tooltip=\"italic\">\r\n                <i class=\"he he-italics\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyInlineStyle('underline')\" tooltip=\"Underline\">\r\n                <i class=\"he he-underline\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"header\">\r\n            <button type=\"button\" (click)=\"applyBlockFormat('h1')\" tooltip=\"Header 1\">\r\n                <i class=\"he he-heading-1\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyBlockFormat('h2')\" tooltip=\"Header 2\">\r\n                <i class=\"he he-heading-2\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items more-gap\">\r\n            <div class=\"input-wrap\" tooltip=\"Text Color\">\r\n                <i class=\"he he-text-drop\"></i>\r\n                <input type=\"color\" (change)=\"applyColor($event)\" />\r\n            </div>\r\n            <div class=\"input-wrap\" tooltip=\"Background Color\">\r\n                <i class=\"he he-background-drop\"></i>\r\n                <input type=\"color\" (change)=\"applyHighlight($event)\" />\r\n            </div>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"setAlignment('left')\" tooltip=\"Justify Left\">\r\n                <i class=\"he he-left-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('center')\" tooltip=\"Justify Center\">\r\n                <i class=\"he he-center-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('right')\" tooltip=\"Justify Right\">\r\n                <i class=\"he he-right-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('justify')\" tooltip=\"Justify Full\">\r\n                <i class=\"he he-justify\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"indent()\" tooltip=\"Indent\">\r\n                <i class=\"he he-text-indent-left\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"outdent()\" tooltip=\"Outdent\">\r\n                <i class=\"he he-text-indent-right\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"media\">\r\n            <button type=\"button\" (click)=\"applyList('ul')\" tooltip=\"Unordered list\">\r\n                <i class=\"he he-unordered-list\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyList('ol')\" tooltip=\"Ordered list\">\r\n                <i class=\"he he-ordered-list\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"link\">\r\n            <button type=\"button\" (click)=\"createLink()\" tooltip=\"Link\">\r\n                <i class=\"he he-link\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"insertImage()\" tooltip=\"Image\">\r\n                <i class=\"he he-image\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"undo()\" tooltip=\"Undo\">\r\n                <i class=\"he he-undo\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"redo()\" tooltip=\"Redo\">\r\n                <i class=\"he he-redo\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"clearFormatting()\" tooltip=\"Clear Formatting\">\r\n                <i class=\"he he-text-clear-format\"></i>\r\n            </button>\r\n        </div>\r\n    </div>\r\n\r\n    <div #editor class=\"editor-content\" [attr.contenteditable]=\"(readonly || disabled) ? 'false' : 'true'\" (input)=\"onInput()\" (blur)=\"onTouched()\"\r\n        [attr.data-placeholder]=\"placeholder\">\r\n    </div>\r\n\r\n    <!-- Custom Modal for Link/Image URL -->\r\n    <div class=\"editor-modal-overlay\" *ngIf=\"showModal\" (click)=\"cancelModal()\">\r\n        <div class=\"editor-modal\" (click)=\"$event.stopPropagation()\">\r\n            <div class=\"editor-modal-header\">\r\n                <span>{{ modalType === 'link' ? 'Insert Link' : 'Insert Image' }}</span>\r\n                <button type=\"button\" class=\"editor-modal-close\" (click)=\"cancelModal()\">\r\n                    <i class=\"he he-close\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"editor-modal-body\">\r\n                <div class=\"url-row\" *ngFor=\"let url of modalUrls; let i = index; trackBy: trackByIndex\">\r\n                    <input type=\"text\" class=\"url-input\"\r\n                        [ngModel]=\"modalUrls[i]\"\r\n                        (ngModelChange)=\"modalUrls[i] = $event\"\r\n                        [placeholder]=\"modalType === 'link' ? 'https://example.com' : 'https://example.com/image.png'\" />\r\n                    <button type=\"button\" class=\"url-remove-btn\" *ngIf=\"modalUrls.length > 1\" (click)=\"removeUrlRow(i)\" title=\"Remove\">\r\n                        <i class=\"he he-close\"></i>\r\n                    </button>\r\n                </div>\r\n                <button type=\"button\" class=\"url-add-btn\" (click)=\"addUrlRow()\">\r\n                    + Add more\r\n                </button>\r\n            </div>\r\n            <div class=\"editor-modal-footer\">\r\n                <button type=\"button\" class=\"modal-btn cancel-btn\" (click)=\"cancelModal()\">Cancel</button>\r\n                <button type=\"button\" class=\"modal-btn confirm-btn\" (click)=\"confirmModal()\">Insert</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".text-editor{border:1px solid #ccc}.text-editor .toolbar{gap:.75rem;display:flex;flex-wrap:wrap;background:#f8f8f8;padding:.75rem;border-bottom:1px solid #cccccc}.text-editor .toolbar .toolbar-items{height:18px;display:flex;flex-wrap:wrap;align-items:center;padding-right:.75rem;border-right:1px solid #969090}.text-editor .toolbar .toolbar-items button,.text-editor .toolbar .toolbar-items .input-wrap{cursor:pointer;min-width:25px;min-height:20px}.text-editor .toolbar .toolbar-items button:hover i,.text-editor .toolbar .toolbar-items .input-wrap:hover i{color:#000}.text-editor .toolbar .toolbar-items button{border:0;display:grid;place-items:center;background:transparent}.text-editor .toolbar .toolbar-items button:hover{background:#eee}.text-editor .toolbar .toolbar-items .input-wrap{gap:2px;display:flex;cursor:pointer;align-items:center;flex-direction:column;justify-content:center}.text-editor .toolbar .toolbar-items .input-wrap input[type=color]{width:80%;padding:0;height:2px;border:none;cursor:inherit}.text-editor .toolbar .toolbar-items i{font-size:13px;color:#3c4148}.text-editor .toolbar .toolbar-items i.he-bold{font-weight:600}.text-editor .toolbar .toolbar-items i.he-underline{font-size:14px}.text-editor .toolbar .toolbar-items i.he-text-drop{font-size:12px}.text-editor .toolbar .toolbar-items i.he-background-drop{top:-1px;font-size:12px}.text-editor .toolbar .toolbar-items i.he-heading-1,.text-editor .toolbar .toolbar-items i.he-link,.text-editor .toolbar .toolbar-items i.he-left-align,.text-editor .toolbar .toolbar-items i.he-center-align,.text-editor .toolbar .toolbar-items i.he-right-align,.text-editor .toolbar .toolbar-items i.he-justify{font-size:16px}.text-editor .toolbar .toolbar-items i.he-text-indent-left,.text-editor .toolbar .toolbar-items i.he-text-indent-right{font-size:17px}.text-editor .toolbar .toolbar-items i.he-heading-2{top:1px;font-size:16px}.text-editor .toolbar .toolbar-items i.he-unordered-list,.text-editor .toolbar .toolbar-items i.he-ordered-list{top:-1px;font-size:20px}.text-editor .toolbar .toolbar-items i.he-image{font-size:15px;font-weight:600}.text-editor .toolbar .toolbar-items i.he-redo,.text-editor .toolbar .toolbar-items i.he-undo{top:-1px;font-size:14px}.text-editor .toolbar .toolbar-items.more-gap{gap:5px}.text-editor .toolbar .toolbar-items:last-child{border-right:0}.text-editor .editor-content{outline:none;min-height:200px;position:relative;background:#fff;padding:.75rem}.text-editor .editor-content[data-placeholder]:empty:before{content:attr(data-placeholder);color:#aaa;pointer-events:none;position:absolute;left:.75rem;top:.75rem}.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;min-width:420px;max-width:520px;width:100%;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-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}.text-editor .editor-modal-body .url-input{flex:1;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-remove-btn{background:none;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;padding:6px 8px;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}\n"] }]
         }], propDecorators: { header: [{
                 type: Input
             }], media: [{