nexheal-lib 0.0.26 → 0.0.28

package/fesm2022/nexheal-lib.mjs

@@ -1495,6 +1495,358 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                 args: ['checkboxContainer']
             }] } });
 
+class ClickOutsideDirective {
+    clickOutside = new EventEmitter();
+    host = inject(ElementRef);
+    document = inject(DOCUMENT);
+    destroyRef = inject(DestroyRef);
+    constructor() {
+        fromEvent(this.document, 'click')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            const clickedInside = this.host.nativeElement.contains(event.target);
+            if (!clickedInside) {
+                this.clickOutside.emit(event);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clickOutside]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { clickOutside: [{
+                type: Output
+            }] } });
+
+class ColorPicker {
+    title;
+    required = false;
+    customClass = "";
+    inline = false;
+    format = "rgb";
+    defaultColor = "#ff0000";
+    disabled = false;
+    readonly = false;
+    onChange = new EventEmitter();
+    blurEvent = new EventEmitter();
+    // current colour as HSB (the picker works in HSB space)
+    h = 0;
+    s = 100;
+    b = 100;
+    overlayVisible = false;
+    value = null;
+    dragMode = null;
+    dragEl = null;
+    moveListener = null;
+    upListener = null;
+    onChangeFn = () => { };
+    onTouchedFn = () => { };
+    ngOnDestroy() {
+        this.unbindDragListeners();
+    }
+    // ---- ControlValueAccessor ----
+    writeValue(value) {
+        this.value = value ?? null;
+        if (value == null || value === "") {
+            this.setFromHex(this.defaultColor);
+            return;
+        }
+        if (typeof value === "string") {
+            this.setFromHex(value);
+        }
+        else if ("r" in value) {
+            const hsb = this.rgbToHsb(value.r, value.g, value.b);
+            this.h = hsb.h;
+            this.s = hsb.s;
+            this.b = hsb.b;
+        }
+        else if ("h" in value) {
+            this.h = value.h;
+            this.s = value.s;
+            this.b = value.b;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        if (isDisabled) {
+            this.close();
+        }
+    }
+    // ---- Template bindings ----
+    /** Background of the saturation/brightness box: the pure hue at full S/B. */
+    get hueBackground() {
+        const c = this.hsbToRgb(this.h, 100, 100);
+        return `rgb(${c.r}, ${c.g}, ${c.b})`;
+    }
+    /** Hex of the currently selected colour (used for the preview swatch + hex field). */
+    get previewColor() {
+        const c = this.hsbToRgb(this.h, this.s, this.b);
+        return this.rgbToHex(c.r, c.g, c.b);
+    }
+    get satHandleLeft() {
+        return this.s;
+    }
+    get briHandleTop() {
+        return 100 - this.b;
+    }
+    get hueHandleTop() {
+        return (this.h / 360) * 100;
+    }
+    // ---- Open / close ----
+    toggle() {
+        if (this.disabled || this.readonly)
+            return;
+        this.overlayVisible ? this.close() : this.open();
+    }
+    open() {
+        if (this.disabled || this.readonly)
+            return;
+        this.overlayVisible = true;
+    }
+    close() {
+        if (!this.overlayVisible)
+            return;
+        this.overlayVisible = false;
+        this.onTouchedFn();
+        this.blurEvent.emit();
+    }
+    // ---- Dragging on the saturation/brightness box and hue strip ----
+    onSelectorDown(event) {
+        if (this.disabled || this.readonly)
+            return;
+        event.preventDefault();
+        this.dragMode = "selector";
+        this.dragEl = event.currentTarget;
+        this.handleDrag(event);
+        this.bindDragListeners();
+    }
+    onHueDown(event) {
+        if (this.disabled || this.readonly)
+            return;
+        event.preventDefault();
+        this.dragMode = "hue";
+        this.dragEl = event.currentTarget;
+        this.handleDrag(event);
+        this.bindDragListeners();
+    }
+    bindDragListeners() {
+        this.unbindDragListeners();
+        this.moveListener = (e) => this.handleDrag(e);
+        this.upListener = () => {
+            this.unbindDragListeners();
+            this.onTouchedFn();
+        };
+        document.addEventListener("mousemove", this.moveListener);
+        document.addEventListener("mouseup", this.upListener);
+        document.addEventListener("touchmove", this.moveListener, { passive: false });
+        document.addEventListener("touchend", this.upListener);
+    }
+    unbindDragListeners() {
+        if (this.moveListener) {
+            document.removeEventListener("mousemove", this.moveListener);
+            document.removeEventListener("touchmove", this.moveListener);
+        }
+        if (this.upListener) {
+            document.removeEventListener("mouseup", this.upListener);
+            document.removeEventListener("touchend", this.upListener);
+        }
+        this.moveListener = null;
+        this.upListener = null;
+        this.dragMode = null;
+        this.dragEl = null;
+    }
+    handleDrag(event) {
+        if (!this.dragEl)
+            return;
+        if (this.isTouch(event) && event.cancelable)
+            event.preventDefault();
+        const point = this.getPoint(event);
+        const rect = this.dragEl.getBoundingClientRect();
+        if (!rect.width || !rect.height)
+            return;
+        if (this.dragMode === "selector") {
+            const x = this.clamp(point.x - rect.left, 0, rect.width);
+            const y = this.clamp(point.y - rect.top, 0, rect.height);
+            this.s = Math.round((x / rect.width) * 100);
+            this.b = Math.round(100 - (y / rect.height) * 100);
+        }
+        else if (this.dragMode === "hue") {
+            const y = this.clamp(point.y - rect.top, 0, rect.height);
+            this.h = Math.min(359, Math.round((y / rect.height) * 360));
+        }
+        this.emitChange();
+    }
+    // ---- helpers ----
+    emitChange() {
+        const out = this.getValueToEmit();
+        this.value = out;
+        this.onChangeFn(out);
+        this.onChange.emit(out);
+    }
+    getValueToEmit() {
+        if (this.format === "hsb") {
+            return { h: this.h, s: this.s, b: this.b };
+        }
+        const rgb = this.hsbToRgb(this.h, this.s, this.b);
+        if (this.format === "rgb") {
+            return rgb;
+        }
+        return this.rgbToHex(rgb.r, rgb.g, rgb.b);
+    }
+    setFromHex(hex) {
+        const rgb = this.hexToRgb(hex);
+        if (!rgb)
+            return;
+        const hsb = this.rgbToHsb(rgb.r, rgb.g, rgb.b);
+        this.h = hsb.h;
+        this.s = hsb.s;
+        this.b = hsb.b;
+    }
+    isTouch(event) {
+        return typeof TouchEvent !== "undefined" && event instanceof TouchEvent;
+    }
+    getPoint(event) {
+        if (this.isTouch(event)) {
+            const touch = event.touches[0] ?? event.changedTouches[0];
+            return { x: touch.clientX, y: touch.clientY };
+        }
+        return { x: event.clientX, y: event.clientY };
+    }
+    clamp(value, min, max) {
+        return Math.max(min, Math.min(max, value));
+    }
+    // ---- colour space conversions ----
+    hsbToRgb(h, s, br) {
+        const sat = s / 100;
+        const val = br / 100;
+        const c = val * sat;
+        const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+        const m = val - c;
+        let r = 0, g = 0, b = 0;
+        if (h < 60) {
+            r = c;
+            g = x;
+            b = 0;
+        }
+        else if (h < 120) {
+            r = x;
+            g = c;
+            b = 0;
+        }
+        else if (h < 180) {
+            r = 0;
+            g = c;
+            b = x;
+        }
+        else if (h < 240) {
+            r = 0;
+            g = x;
+            b = c;
+        }
+        else if (h < 300) {
+            r = x;
+            g = 0;
+            b = c;
+        }
+        else {
+            r = c;
+            g = 0;
+            b = x;
+        }
+        return {
+            r: Math.round((r + m) * 255),
+            g: Math.round((g + m) * 255),
+            b: Math.round((b + m) * 255),
+        };
+    }
+    rgbToHsb(r, g, b) {
+        const rr = r / 255, gg = g / 255, bb = b / 255;
+        const max = Math.max(rr, gg, bb);
+        const min = Math.min(rr, gg, bb);
+        const d = max - min;
+        let h = 0;
+        if (d !== 0) {
+            if (max === rr)
+                h = ((gg - bb) / d) % 6;
+            else if (max === gg)
+                h = (bb - rr) / d + 2;
+            else
+                h = (rr - gg) / d + 4;
+            h = Math.round(h * 60);
+            if (h < 0)
+                h += 360;
+        }
+        const s = max === 0 ? 0 : Math.round((d / max) * 100);
+        const br = Math.round(max * 100);
+        return { h, s, b: br };
+    }
+    hexToRgb(hex) {
+        if (!hex)
+            return null;
+        let h = hex.trim().replace(/^#/, "");
+        if (h.length === 3) {
+            h = h.split("").map((c) => c + c).join("");
+        }
+        if (!/^[0-9a-fA-F]{6}$/.test(h))
+            return null;
+        const num = parseInt(h, 16);
+        return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };
+    }
+    rgbToHex(r, g, b) {
+        const toHex = (n) => n.toString(16).padStart(2, "0");
+        return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ColorPicker, isStandalone: true, selector: "color-picker", inputs: { title: "title", required: "required", customClass: "customClass", inline: "inline", format: "format", defaultColor: "defaultColor", disabled: "disabled", readonly: "readonly" }, outputs: { onChange: "onChange", blurEvent: "blurEvent" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ColorPicker),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"form-group color-picker\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" [class.disabled]=\"disabled\"\n  (clickOutside)=\"close()\">\n  @if (title) {\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n  }\n\n  @if (!inline) {\n  <button #trigger type=\"button\" class=\"cp-preview\" [style.backgroundColor]=\"previewColor\" [disabled]=\"disabled\"\n    (click)=\"toggle()\" [attr.aria-label]=\"'Selected color ' + previewColor\"></button>\n  }\n\n  @if (inline || overlayVisible) {\n  <div class=\"cp-panel\" [class.cp-inline]=\"inline\">\n    <div class=\"cp-content\">\n      <div #selector class=\"cp-selector\" [style.background]=\"hueBackground\" (mousedown)=\"onSelectorDown($event)\"\n        (touchstart)=\"onSelectorDown($event)\">\n        <div class=\"cp-selector-white\"></div>\n        <div class=\"cp-selector-black\"></div>\n        <div class=\"cp-selector-handle\" [style.left.%]=\"satHandleLeft\" [style.top.%]=\"briHandleTop\"></div>\n      </div>\n      <div #hue class=\"cp-hue\" (mousedown)=\"onHueDown($event)\" (touchstart)=\"onHueDown($event)\">\n        <div class=\"cp-hue-handle\" [style.top.%]=\"hueHandleTop\"></div>\n      </div>\n    </div>\n  </div>\n  }\n</div>\n", styles: [".form-group.color-picker{position:relative}.form-group.color-picker .cp-preview{width:2rem;height:2rem;padding:0;cursor:pointer;border-radius:4px;border:1px solid #d0d3da;transition:box-shadow .15s ease-in-out}.form-group.color-picker .cp-preview:focus-visible{outline:none;box-shadow:0 0 0 2px #3399ff80}.form-group.color-picker.disabled .cp-preview{cursor:not-allowed;opacity:.6}.form-group.color-picker.readonly .cp-preview{cursor:default;pointer-events:none}.form-group.color-picker .cp-panel{top:calc(100% + 4px);left:0;z-index:1000;position:absolute;padding:.5rem;border-radius:4px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.color-picker .cp-panel.cp-inline{position:static;box-shadow:none;padding:0;border:1px solid #e7e7e7}.form-group.color-picker .cp-content{gap:8px;display:flex;align-items:stretch}.form-group.color-picker .cp-selector{width:150px;height:150px;position:relative;cursor:crosshair;border-radius:3px;touch-action:none;overflow:hidden}.form-group.color-picker .cp-selector-white,.form-group.color-picker .cp-selector-black{inset:0;position:absolute;pointer-events:none}.form-group.color-picker .cp-selector-white{background:linear-gradient(to right,#fff,#fff0)}.form-group.color-picker .cp-selector-black{background:linear-gradient(to top,#000,#0000)}.form-group.color-picker .cp-selector-handle{width:12px;height:12px;position:absolute;border-radius:50%;pointer-events:none;border:2px solid #ffffff;transform:translate(-50%,-50%);box-shadow:0 0 1px 1px #0006}.form-group.color-picker .cp-hue{width:16px;height:150px;position:relative;cursor:pointer;border-radius:3px;touch-action:none;background:linear-gradient(to bottom,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.form-group.color-picker .cp-hue-handle{left:-2px;right:-2px;height:4px;position:absolute;pointer-events:none;border:1px solid #ffffff;transform:translateY(-50%);box-shadow:0 0 1px 1px #0006}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ColorPicker, decorators: [{
+            type: Component,
+            args: [{ selector: "color-picker", standalone: true, imports: [CommonModule, ClickOutsideDirective], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ColorPicker),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"form-group color-picker\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" [class.disabled]=\"disabled\"\n  (clickOutside)=\"close()\">\n  @if (title) {\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n  }\n\n  @if (!inline) {\n  <button #trigger type=\"button\" class=\"cp-preview\" [style.backgroundColor]=\"previewColor\" [disabled]=\"disabled\"\n    (click)=\"toggle()\" [attr.aria-label]=\"'Selected color ' + previewColor\"></button>\n  }\n\n  @if (inline || overlayVisible) {\n  <div class=\"cp-panel\" [class.cp-inline]=\"inline\">\n    <div class=\"cp-content\">\n      <div #selector class=\"cp-selector\" [style.background]=\"hueBackground\" (mousedown)=\"onSelectorDown($event)\"\n        (touchstart)=\"onSelectorDown($event)\">\n        <div class=\"cp-selector-white\"></div>\n        <div class=\"cp-selector-black\"></div>\n        <div class=\"cp-selector-handle\" [style.left.%]=\"satHandleLeft\" [style.top.%]=\"briHandleTop\"></div>\n      </div>\n      <div #hue class=\"cp-hue\" (mousedown)=\"onHueDown($event)\" (touchstart)=\"onHueDown($event)\">\n        <div class=\"cp-hue-handle\" [style.top.%]=\"hueHandleTop\"></div>\n      </div>\n    </div>\n  </div>\n  }\n</div>\n", styles: [".form-group.color-picker{position:relative}.form-group.color-picker .cp-preview{width:2rem;height:2rem;padding:0;cursor:pointer;border-radius:4px;border:1px solid #d0d3da;transition:box-shadow .15s ease-in-out}.form-group.color-picker .cp-preview:focus-visible{outline:none;box-shadow:0 0 0 2px #3399ff80}.form-group.color-picker.disabled .cp-preview{cursor:not-allowed;opacity:.6}.form-group.color-picker.readonly .cp-preview{cursor:default;pointer-events:none}.form-group.color-picker .cp-panel{top:calc(100% + 4px);left:0;z-index:1000;position:absolute;padding:.5rem;border-radius:4px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.color-picker .cp-panel.cp-inline{position:static;box-shadow:none;padding:0;border:1px solid #e7e7e7}.form-group.color-picker .cp-content{gap:8px;display:flex;align-items:stretch}.form-group.color-picker .cp-selector{width:150px;height:150px;position:relative;cursor:crosshair;border-radius:3px;touch-action:none;overflow:hidden}.form-group.color-picker .cp-selector-white,.form-group.color-picker .cp-selector-black{inset:0;position:absolute;pointer-events:none}.form-group.color-picker .cp-selector-white{background:linear-gradient(to right,#fff,#fff0)}.form-group.color-picker .cp-selector-black{background:linear-gradient(to top,#000,#0000)}.form-group.color-picker .cp-selector-handle{width:12px;height:12px;position:absolute;border-radius:50%;pointer-events:none;border:2px solid #ffffff;transform:translate(-50%,-50%);box-shadow:0 0 1px 1px #0006}.form-group.color-picker .cp-hue{width:16px;height:150px;position:relative;cursor:pointer;border-radius:3px;touch-action:none;background:linear-gradient(to bottom,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.form-group.color-picker .cp-hue-handle{left:-2px;right:-2px;height:4px;position:absolute;pointer-events:none;border:1px solid #ffffff;transform:translateY(-50%);box-shadow:0 0 1px 1px #0006}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], inline: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], defaultColor: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }], blurEvent: [{
+                type: Output
+            }] } });
+
 class InputControl {
     type = "text";
     title;
@@ -1732,34 +2084,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                 type: Input
             }] } });
 
-class ClickOutsideDirective {
-    clickOutside = new EventEmitter();
-    host = inject(ElementRef);
-    document = inject(DOCUMENT);
-    destroyRef = inject(DestroyRef);
-    constructor() {
-        fromEvent(this.document, 'click')
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => {
-            const clickedInside = this.host.nativeElement.contains(event.target);
-            if (!clickedInside) {
-                this.clickOutside.emit(event);
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ClickOutsideDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[clickOutside]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [], propDecorators: { clickOutside: [{
-                type: Output
-            }] } });
-
 class MultiselectControl {
     cdRef;
     subscription = new Subscription();
@@ -2897,7 +3221,7 @@ 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\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"] }] });
+        ], 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=\"input-wrap\" title=\"Text Color\" (mousedown)=\"$event.preventDefault()\">\n                <i class=\"he he-text-drop\"></i>\n                <input type=\"color\" (input)=\"applyColor($event)\" />\n            </div>\n            <div class=\"input-wrap\" title=\"Background Color\" (mousedown)=\"$event.preventDefault()\">\n                <i class=\"he he-background-drop\"></i>\n                <input type=\"color\" (input)=\"applyHighlight($event)\" />\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-row\" *ngFor=\"let url of modalUrls; let i = index; trackBy: trackByIndex\">\n                    <input type=\"text\" class=\"url-input\"\n                        [ngModel]=\"modalUrls[i]\"\n                        (ngModelChange)=\"modalUrls[i] = $event\"\n                        [placeholder]=\"modalType === 'link' ? 'https://example.com' : 'https://example.com/image.png'\" />\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                <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\" (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,.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;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-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,
@@ -2907,7 +3231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                             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\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"] }]
+                    ], 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=\"input-wrap\" title=\"Text Color\" (mousedown)=\"$event.preventDefault()\">\n                <i class=\"he he-text-drop\"></i>\n                <input type=\"color\" (input)=\"applyColor($event)\" />\n            </div>\n            <div class=\"input-wrap\" title=\"Background Color\" (mousedown)=\"$event.preventDefault()\">\n                <i class=\"he he-background-drop\"></i>\n                <input type=\"color\" (input)=\"applyHighlight($event)\" />\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-row\" *ngFor=\"let url of modalUrls; let i = index; trackBy: trackByIndex\">\n                    <input type=\"text\" class=\"url-input\"\n                        [ngModel]=\"modalUrls[i]\"\n                        (ngModelChange)=\"modalUrls[i] = $event\"\n                        [placeholder]=\"modalType === 'link' ? 'https://example.com' : 'https://example.com/image.png'\" />\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                <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\" (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,.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;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-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: [{
@@ -3038,5 +3362,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AutocompleteControl, CalendarControl, CheckboxControl, InputControl, MultiselectControl, SelectControl, SwitchControl, TextEditor, TextareaControl };
+export { AutocompleteControl, CalendarControl, CheckboxControl, ColorPicker, InputControl, MultiselectControl, SelectControl, SwitchControl, TextEditor, TextareaControl };
 //# sourceMappingURL=nexheal-lib.mjs.map