simpo-component-library 3.6.843 → 3.6.844

package/fesm2022/simpo-component-library.mjs

@@ -1,12 +1,12 @@
 import * as i3 from '@angular/common';
 import { CommonModule, isPlatformBrowser, NgStyle, NgFor, DatePipe, DOCUMENT, NgIf } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, Injectable, Directive, HostListener, InjectionToken, Inject, inject, PLATFORM_ID, ViewChild, Output, Pipe, Optional, NgModule, ViewChildren } from '@angular/core';
+import { Component, Input, EventEmitter, Injectable, Directive, HostListener, InjectionToken, Inject, inject, PLATFORM_ID, ViewChild, ElementRef, Renderer2, forwardRef, Output, Pipe, Optional, NgModule, ViewChildren } from '@angular/core';
 import { MatGridListModule } from '@angular/material/grid-list';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i8 from '@angular/forms';
-import { FormControl, FormsModule, ReactiveFormsModule, FormArray, Validators } from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormArray, Validators } from '@angular/forms';
 import * as i6 from '@angular/material/core';
 import { MatOptionModule, MatNativeDateModule } from '@angular/material/core';
 import * as i10 from '@angular/material/input';
@@ -1736,6 +1736,86 @@ const FontSize = Extension.create({
     },
 });
 
+class ContenteditableValueAccessor {
+    constructor(elementRef, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.onTouched = () => { };
+        this.contenteditable = true; // Allow dynamic input
+        this.onChange = (_value) => { };
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'contenteditable', 'true');
+    }
+    ngAfterViewInit() {
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'contenteditable', this.contenteditable ? 'true' : 'false');
+        this.observer = new MutationObserver(() => {
+            this.onChange(this.elementRef.nativeElement.innerHTML);
+        });
+        this.observer.observe(this.elementRef.nativeElement, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+    ngOnDestroy() {
+        this.observer?.disconnect();
+    }
+    onInput() {
+        this.observer?.disconnect();
+        this.onChange(this.elementRef.nativeElement.innerHTML);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', value || '');
+    }
+    registerOnChange(onChange) {
+        this.onChange = onChange;
+    }
+    registerOnTouched(onTouched) {
+        this.onTouched = onTouched;
+    }
+    setDisabledState(disabled) {
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'contenteditable', String(!disabled));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContenteditableValueAccessor, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ContenteditableValueAccessor, isStandalone: true, selector: "[contenteditable][ngModel]", inputs: { contenteditable: "contenteditable" }, host: { listeners: { "input": "onInput()", "blur": "onBlur()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ContenteditableValueAccessor),
+                multi: true,
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContenteditableValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[contenteditable][ngModel]',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ContenteditableValueAccessor),
+                            multi: true,
+                        },
+                    ],
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: i0.Renderer2, decorators: [{
+                    type: Inject,
+                    args: [Renderer2]
+                }] }], propDecorators: { contenteditable: [{
+                type: Input
+            }], onInput: [{
+                type: HostListener,
+                args: ['input']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
 // text-editor.component.ts
 class TextEditorComponent {
     constructor() {
@@ -1762,7 +1842,19 @@ class TextEditorComponent {
             selectedSize: ''
         };
     }
-    ngOnInit() {
+    ngOnDestroy() {
+        if (this.editor) {
+            this.editor.destroy();
+        }
+    }
+    ngAfterViewInit() {
+        if (this.editable) {
+            this.initializeEditor();
+        }
+    }
+    initializeEditor() {
+        if (!this.editorElement)
+            return;
         this.editor = new Editor({
             element: this.editorElement.nativeElement,
             extensions: [
@@ -1779,14 +1871,14 @@ class TextEditorComponent {
             content: this.value,
             onSelectionUpdate: () => {
                 this.handleSelection();
+            },
+            onUpdate: ({ editor }) => {
+                const html = editor.getHTML();
+                this.value = html;
+                this.valueChange.emit(html);
             }
         });
     }
-    ngOnDestroy() {
-        if (this.editor) {
-            this.editor.destroy();
-        }
-    }
     saveSelection() {
         this.savedSelection =
             this.editor.state.selection;
@@ -1983,7 +2075,7 @@ class TextEditorComponent {
             .run();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextEditorComponent, isStandalone: true, selector: "simpo-text-editor", inputs: { value: "value", editable: "editable", sectionId: "sectionId", label: "label", type: "type" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:mousedown": "onMouseDown()" } }, viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorContainer"], descendants: true, static: true }], ngImport: i0, template: "<!-- text-editor.component.html -->\r\n\r\n<div class=\"editor-container\">\r\n\r\n  <!-- FLOATING TOOLBAR -->\r\n  <div class=\"toolbar\" *ngIf=\"showToolbar\" [style.top.px]=\"toolbarY\" [style.left.px]=\"toolbarX\" cdkDrag>\r\n    <button class=\"tool drag-handle w-auto\" cdkDragHandle>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-grip-vertical\">\r\n        <circle cx=\"9\" cy=\"12\" r=\"1\" />\r\n        <circle cx=\"9\" cy=\"5\" r=\"1\" />\r\n        <circle cx=\"9\" cy=\"19\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"12\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"5\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"19\" r=\"1\" />\r\n      </svg>\r\n    </button>\r\n    <mat-form-field appearance=\"outline\" class=\"font-size-field\">\r\n\r\n      <mat-select [value]=\"selectedFontSize\" (selectionChange)=\"changeFontSize($event.value)\" disableOptionCentering>\r\n\r\n        <mat-option value=\"\">\r\n          Default\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(0.75rem, 2vw, 1rem)\">\r\n          14\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(0.75rem, 2vw, 1.25rem)\">\r\n          16\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(1rem, 3vw, 1.5rem)\">\r\n          20\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(1.25rem, 4vw, 2rem)\">\r\n          24\r\n        </mat-option>\r\n        <mat-option value=\"clamp(2rem, 5vw, 3rem)\">\r\n          32\r\n        </mat-option>\r\n        <mat-option value=\"clamp(3.1rem, 7vw, 4.5rem)\">\r\n          48\r\n        </mat-option>\r\n      </mat-select>\r\n\r\n    </mat-form-field>\r\n    <!-- BOLD -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('bold')\" (click)=\"toggleBold()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-bold\">\r\n        <path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ITALIC -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('italic')\" (click)=\"toggleItalic()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-italic\">\r\n        <line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\" />\r\n        <line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\" />\r\n        <line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- UNDERLINE -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('underline')\" (click)=\"toggleUnderline()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-underline\">\r\n        <path d=\"M6 4v6a6 6 0 0 0 12 0V4\" />\r\n        <line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN LEFT -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('left')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-left\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN CENTER -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('center')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-center\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN RIGHT -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('right')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-right\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ORDERED LIST -->\r\n    <button class=\"tool w-auto\" (click)=\"toggleOrderedList()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-list-ordered\">\r\n        <line x1=\"10\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"10\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"10\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n        <path d=\"M4 6h1v4\" />\r\n        <path d=\"M4 10h2\" />\r\n        <path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- BULLET LIST -->\r\n    <button class=\"tool w-auto\" (click)=\"toggleBulletList()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-list\">\r\n        <line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- SOLID / GRADIENT -->\r\n    <!-- SOLID / GRADIENT -->\r\n    <div class=\"colorType\">\r\n\r\n      <button class=\"solid w-auto\" [class.solidColorSelected]=\"selectedColorType === 'SOLID'\"\r\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToSolid($event)\">\r\n        Solid\r\n      </button>\r\n\r\n      <button class=\"gradient w-auto\" [class.gradientColorSelected]=\"selectedColorType === 'GRADIENT'\"\r\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToGradient($event)\">\r\n        Gradient\r\n      </button>\r\n\r\n    </div>\r\n\r\n    <!-- SOLID COLOR -->\r\n    <button class=\"tool color-picker-btn w-auto\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n\r\n      <mat-icon>format_color_text</mat-icon>\r\n\r\n      <input type=\"color\" class=\"hidden-color-picker\" [(ngModel)]=\"selectedColor\" (click)=\"openColorPicker()\"\r\n        (input)=\"changeColor()\">\r\n\r\n    </button>\r\n\r\n    <!-- GRADIENT -->\r\n    <div class=\"gradient-picker\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n      <input type=\"color\" [(ngModel)]=\"primaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n      <input type=\"color\" [(ngModel)]=\"secondaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <!-- TIPTAP EDITOR -->\r\n  <div #editorContainer class=\"editable-text\">\r\n  </div>\r\n\r\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;width:100%}.editable-text{min-height:120px;cursor:text;width:100%}.ProseMirror{outline:none;min-height:120px;padding:5px}.ProseMirror p{margin:0}.toolbar{position:absolute;top:27%;left:0%;display:flex;align-items:center;gap:5px;background:#fff;padding:8px 14px;border-radius:22px;z-index:100000;box-shadow:#00000029 0 1px 4px}.tool{background:none;border:none;padding:5px 8px;cursor:pointer;display:flex;align-items:center}.tool:hover{background:#eee;border-radius:5px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}.color-picker-btn{position:relative}.color-picker-btn mat-icon{font-size:22px!important}.hidden-color-picker{position:absolute;inset:0;opacity:0;cursor:pointer}.gradient-text{background:linear-gradient(to right,var(--gradient-start),var(--gradient-end));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:9px;overflow:hidden}.colorType button{font-size:12px!important;padding:7px 9px!important;border:none;background:#fff;padding:5px 10px;cursor:pointer}.solid{border-right:1px solid #E9E9E9!important}.solidColorSelected,.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff}.gradient-picker{display:flex;gap:5px}.gradient-picker input{width:32px;height:32px;border:none;padding:0;cursor:pointer}.white-space-nowrap{white-space:nowrap}.font-size-field{width:120px;border:1px solid lightgrey;border-radius:10px}::ng-deep .font-size-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .font-size-field .mdc-notched-outline{display:none}::ng-deep .font-size-field .mat-mdc-text-field-wrapper{background:transparent!important;padding-left:8px!important;padding-right:8px!important;height:36px!important}::ng-deep .font-size-field .mat-mdc-select-value{font-size:14px;font-weight:600}::ng-deep .mat-mdc-select-panel{border-radius:12px!important}@media screen and (max-width: 475px){.toolbar{max-width:95%;flex-wrap:wrap;row-gap:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i12.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextEditorComponent, isStandalone: true, selector: "simpo-text-editor", inputs: { value: "value", editable: "editable", sectionId: "sectionId", label: "label", type: "type" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:mousedown": "onMouseDown()" } }, viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorContainer"], descendants: true }], ngImport: i0, template: "<!-- text-editor.component.html -->\r\n\r\n<div class=\"editor-container\" *ngIf=\"editable; else viewMode\">\r\n\r\n  <!-- FLOATING TOOLBAR -->\r\n  <div class=\"toolbar\" *ngIf=\"showToolbar\" [style.top.px]=\"toolbarY\" [style.left.px]=\"toolbarX\" cdkDrag>\r\n    <button class=\"tool drag-handle w-auto\" cdkDragHandle>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-grip-vertical\">\r\n        <circle cx=\"9\" cy=\"12\" r=\"1\" />\r\n        <circle cx=\"9\" cy=\"5\" r=\"1\" />\r\n        <circle cx=\"9\" cy=\"19\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"12\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"5\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"19\" r=\"1\" />\r\n      </svg>\r\n    </button>\r\n    <mat-form-field appearance=\"outline\" class=\"font-size-field\">\r\n\r\n      <mat-select [value]=\"selectedFontSize\" (selectionChange)=\"changeFontSize($event.value)\" disableOptionCentering>\r\n\r\n        <mat-option value=\"\">\r\n          Default\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(0.75rem, 2vw, 1rem)\">\r\n          14\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(0.75rem, 2vw, 1.25rem)\">\r\n          16\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(1rem, 3vw, 1.5rem)\">\r\n          20\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(1.25rem, 4vw, 2rem)\">\r\n          24\r\n        </mat-option>\r\n        <mat-option value=\"clamp(2rem, 5vw, 3rem)\">\r\n          32\r\n        </mat-option>\r\n        <mat-option value=\"clamp(3.1rem, 7vw, 4.5rem)\">\r\n          48\r\n        </mat-option>\r\n      </mat-select>\r\n\r\n    </mat-form-field>\r\n    <!-- BOLD -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('bold')\" (click)=\"toggleBold()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-bold\">\r\n        <path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ITALIC -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('italic')\" (click)=\"toggleItalic()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-italic\">\r\n        <line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\" />\r\n        <line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\" />\r\n        <line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- UNDERLINE -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('underline')\" (click)=\"toggleUnderline()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-underline\">\r\n        <path d=\"M6 4v6a6 6 0 0 0 12 0V4\" />\r\n        <line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN LEFT -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('left')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-left\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN CENTER -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('center')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-center\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN RIGHT -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('right')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-right\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ORDERED LIST -->\r\n    <button class=\"tool w-auto\" (click)=\"toggleOrderedList()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-list-ordered\">\r\n        <line x1=\"10\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"10\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"10\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n        <path d=\"M4 6h1v4\" />\r\n        <path d=\"M4 10h2\" />\r\n        <path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- BULLET LIST -->\r\n    <button class=\"tool w-auto\" (click)=\"toggleBulletList()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-list\">\r\n        <line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- SOLID / GRADIENT -->\r\n    <!-- SOLID / GRADIENT -->\r\n    <div class=\"colorType\">\r\n\r\n      <button class=\"solid w-auto\" [class.solidColorSelected]=\"selectedColorType === 'SOLID'\"\r\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToSolid($event)\">\r\n        Solid\r\n      </button>\r\n\r\n      <button class=\"gradient w-auto\" [class.gradientColorSelected]=\"selectedColorType === 'GRADIENT'\"\r\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToGradient($event)\">\r\n        Gradient\r\n      </button>\r\n\r\n    </div>\r\n\r\n    <!-- SOLID COLOR -->\r\n    <button class=\"tool color-picker-btn w-auto\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n\r\n      <mat-icon>format_color_text</mat-icon>\r\n\r\n      <input type=\"color\" class=\"hidden-color-picker\" [(ngModel)]=\"selectedColor\" (click)=\"openColorPicker()\"\r\n        (input)=\"changeColor()\">\r\n\r\n    </button>\r\n\r\n    <!-- GRADIENT -->\r\n    <div class=\"gradient-picker\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n      <input type=\"color\" [(ngModel)]=\"primaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n      <input type=\"color\" [(ngModel)]=\"secondaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <!-- TIPTAP EDITOR -->\r\n  <div #editorContainer class=\"editable-text\">\r\n</div>\r\n\r\n</div>\r\n<ng-template #viewMode>\r\n  <div class=\"read-only-text\" [innerHTML]=\"value\">\r\n  </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;width:100%}.editable-text{min-height:120px;cursor:text;width:100%}.ProseMirror{outline:none;min-height:120px;padding:5px}.ProseMirror p{margin:0}.toolbar{position:absolute;top:27%;left:0%;display:flex;align-items:center;gap:5px;background:#fff;padding:8px 14px;border-radius:22px;z-index:100000;box-shadow:#00000029 0 1px 4px}.tool{background:none;border:none;padding:5px 8px;cursor:pointer;display:flex;align-items:center}.tool:hover{background:#eee;border-radius:5px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}.color-picker-btn{position:relative}.color-picker-btn mat-icon{font-size:22px!important}.hidden-color-picker{position:absolute;inset:0;opacity:0;cursor:pointer}.gradient-text{background:linear-gradient(to right,var(--gradient-start),var(--gradient-end));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:9px;overflow:hidden}.colorType button{font-size:12px!important;padding:7px 9px!important;border:none;background:#fff;padding:5px 10px;cursor:pointer}.solid{border-right:1px solid #E9E9E9!important}.solidColorSelected,.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff}.gradient-picker{display:flex;gap:5px}.gradient-picker input{width:32px;height:32px;border:none;padding:0;cursor:pointer}.white-space-nowrap{white-space:nowrap}.font-size-field{width:120px;border:1px solid lightgrey;border-radius:10px}::ng-deep .font-size-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .font-size-field .mdc-notched-outline{display:none}::ng-deep .font-size-field .mat-mdc-text-field-wrapper{background:transparent!important;padding-left:8px!important;padding-right:8px!important;height:36px!important}::ng-deep .font-size-field .mat-mdc-select-value{font-size:14px;font-weight:600}::ng-deep .mat-mdc-select-panel{border-radius:12px!important}@media screen and (max-width: 475px){.toolbar{max-width:95%;flex-wrap:wrap;row-gap:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i12.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, decorators: [{
             type: Component,
@@ -1993,8 +2085,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatIconModule,
                         CdkDrag,
                         MatSelectModule,
-                        MatFormFieldModule
-                    ], template: "<!-- text-editor.component.html -->\r\n\r\n<div class=\"editor-container\">\r\n\r\n  <!-- FLOATING TOOLBAR -->\r\n  <div class=\"toolbar\" *ngIf=\"showToolbar\" [style.top.px]=\"toolbarY\" [style.left.px]=\"toolbarX\" cdkDrag>\r\n    <button class=\"tool drag-handle w-auto\" cdkDragHandle>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-grip-vertical\">\r\n        <circle cx=\"9\" cy=\"12\" r=\"1\" />\r\n        <circle cx=\"9\" cy=\"5\" r=\"1\" />\r\n        <circle cx=\"9\" cy=\"19\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"12\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"5\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"19\" r=\"1\" />\r\n      </svg>\r\n    </button>\r\n    <mat-form-field appearance=\"outline\" class=\"font-size-field\">\r\n\r\n      <mat-select [value]=\"selectedFontSize\" (selectionChange)=\"changeFontSize($event.value)\" disableOptionCentering>\r\n\r\n        <mat-option value=\"\">\r\n          Default\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(0.75rem, 2vw, 1rem)\">\r\n          14\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(0.75rem, 2vw, 1.25rem)\">\r\n          16\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(1rem, 3vw, 1.5rem)\">\r\n          20\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(1.25rem, 4vw, 2rem)\">\r\n          24\r\n        </mat-option>\r\n        <mat-option value=\"clamp(2rem, 5vw, 3rem)\">\r\n          32\r\n        </mat-option>\r\n        <mat-option value=\"clamp(3.1rem, 7vw, 4.5rem)\">\r\n          48\r\n        </mat-option>\r\n      </mat-select>\r\n\r\n    </mat-form-field>\r\n    <!-- BOLD -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('bold')\" (click)=\"toggleBold()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-bold\">\r\n        <path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ITALIC -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('italic')\" (click)=\"toggleItalic()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-italic\">\r\n        <line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\" />\r\n        <line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\" />\r\n        <line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- UNDERLINE -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('underline')\" (click)=\"toggleUnderline()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-underline\">\r\n        <path d=\"M6 4v6a6 6 0 0 0 12 0V4\" />\r\n        <line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN LEFT -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('left')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-left\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN CENTER -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('center')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-center\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN RIGHT -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('right')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-right\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ORDERED LIST -->\r\n    <button class=\"tool w-auto\" (click)=\"toggleOrderedList()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-list-ordered\">\r\n        <line x1=\"10\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"10\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"10\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n        <path d=\"M4 6h1v4\" />\r\n        <path d=\"M4 10h2\" />\r\n        <path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- BULLET LIST -->\r\n    <button class=\"tool w-auto\" (click)=\"toggleBulletList()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-list\">\r\n        <line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- SOLID / GRADIENT -->\r\n    <!-- SOLID / GRADIENT -->\r\n    <div class=\"colorType\">\r\n\r\n      <button class=\"solid w-auto\" [class.solidColorSelected]=\"selectedColorType === 'SOLID'\"\r\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToSolid($event)\">\r\n        Solid\r\n      </button>\r\n\r\n      <button class=\"gradient w-auto\" [class.gradientColorSelected]=\"selectedColorType === 'GRADIENT'\"\r\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToGradient($event)\">\r\n        Gradient\r\n      </button>\r\n\r\n    </div>\r\n\r\n    <!-- SOLID COLOR -->\r\n    <button class=\"tool color-picker-btn w-auto\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n\r\n      <mat-icon>format_color_text</mat-icon>\r\n\r\n      <input type=\"color\" class=\"hidden-color-picker\" [(ngModel)]=\"selectedColor\" (click)=\"openColorPicker()\"\r\n        (input)=\"changeColor()\">\r\n\r\n    </button>\r\n\r\n    <!-- GRADIENT -->\r\n    <div class=\"gradient-picker\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n      <input type=\"color\" [(ngModel)]=\"primaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n      <input type=\"color\" [(ngModel)]=\"secondaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <!-- TIPTAP EDITOR -->\r\n  <div #editorContainer class=\"editable-text\">\r\n  </div>\r\n\r\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;width:100%}.editable-text{min-height:120px;cursor:text;width:100%}.ProseMirror{outline:none;min-height:120px;padding:5px}.ProseMirror p{margin:0}.toolbar{position:absolute;top:27%;left:0%;display:flex;align-items:center;gap:5px;background:#fff;padding:8px 14px;border-radius:22px;z-index:100000;box-shadow:#00000029 0 1px 4px}.tool{background:none;border:none;padding:5px 8px;cursor:pointer;display:flex;align-items:center}.tool:hover{background:#eee;border-radius:5px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}.color-picker-btn{position:relative}.color-picker-btn mat-icon{font-size:22px!important}.hidden-color-picker{position:absolute;inset:0;opacity:0;cursor:pointer}.gradient-text{background:linear-gradient(to right,var(--gradient-start),var(--gradient-end));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:9px;overflow:hidden}.colorType button{font-size:12px!important;padding:7px 9px!important;border:none;background:#fff;padding:5px 10px;cursor:pointer}.solid{border-right:1px solid #E9E9E9!important}.solidColorSelected,.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff}.gradient-picker{display:flex;gap:5px}.gradient-picker input{width:32px;height:32px;border:none;padding:0;cursor:pointer}.white-space-nowrap{white-space:nowrap}.font-size-field{width:120px;border:1px solid lightgrey;border-radius:10px}::ng-deep .font-size-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .font-size-field .mdc-notched-outline{display:none}::ng-deep .font-size-field .mat-mdc-text-field-wrapper{background:transparent!important;padding-left:8px!important;padding-right:8px!important;height:36px!important}::ng-deep .font-size-field .mat-mdc-select-value{font-size:14px;font-weight:600}::ng-deep .mat-mdc-select-panel{border-radius:12px!important}@media screen and (max-width: 475px){.toolbar{max-width:95%;flex-wrap:wrap;row-gap:10px}}\n"] }]
+                        MatFormFieldModule,
+                        ContenteditableValueAccessor
+                    ], template: "<!-- text-editor.component.html -->\r\n\r\n<div class=\"editor-container\" *ngIf=\"editable; else viewMode\">\r\n\r\n  <!-- FLOATING TOOLBAR -->\r\n  <div class=\"toolbar\" *ngIf=\"showToolbar\" [style.top.px]=\"toolbarY\" [style.left.px]=\"toolbarX\" cdkDrag>\r\n    <button class=\"tool drag-handle w-auto\" cdkDragHandle>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-grip-vertical\">\r\n        <circle cx=\"9\" cy=\"12\" r=\"1\" />\r\n        <circle cx=\"9\" cy=\"5\" r=\"1\" />\r\n        <circle cx=\"9\" cy=\"19\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"12\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"5\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"19\" r=\"1\" />\r\n      </svg>\r\n    </button>\r\n    <mat-form-field appearance=\"outline\" class=\"font-size-field\">\r\n\r\n      <mat-select [value]=\"selectedFontSize\" (selectionChange)=\"changeFontSize($event.value)\" disableOptionCentering>\r\n\r\n        <mat-option value=\"\">\r\n          Default\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(0.75rem, 2vw, 1rem)\">\r\n          14\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(0.75rem, 2vw, 1.25rem)\">\r\n          16\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(1rem, 3vw, 1.5rem)\">\r\n          20\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(1.25rem, 4vw, 2rem)\">\r\n          24\r\n        </mat-option>\r\n        <mat-option value=\"clamp(2rem, 5vw, 3rem)\">\r\n          32\r\n        </mat-option>\r\n        <mat-option value=\"clamp(3.1rem, 7vw, 4.5rem)\">\r\n          48\r\n        </mat-option>\r\n      </mat-select>\r\n\r\n    </mat-form-field>\r\n    <!-- BOLD -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('bold')\" (click)=\"toggleBold()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-bold\">\r\n        <path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ITALIC -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('italic')\" (click)=\"toggleItalic()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-italic\">\r\n        <line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\" />\r\n        <line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\" />\r\n        <line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- UNDERLINE -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('underline')\" (click)=\"toggleUnderline()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-underline\">\r\n        <path d=\"M6 4v6a6 6 0 0 0 12 0V4\" />\r\n        <line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN LEFT -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('left')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-left\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN CENTER -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('center')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-center\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN RIGHT -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('right')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-right\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ORDERED LIST -->\r\n    <button class=\"tool w-auto\" (click)=\"toggleOrderedList()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-list-ordered\">\r\n        <line x1=\"10\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"10\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"10\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n        <path d=\"M4 6h1v4\" />\r\n        <path d=\"M4 10h2\" />\r\n        <path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- BULLET LIST -->\r\n    <button class=\"tool w-auto\" (click)=\"toggleBulletList()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-list\">\r\n        <line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- SOLID / GRADIENT -->\r\n    <!-- SOLID / GRADIENT -->\r\n    <div class=\"colorType\">\r\n\r\n      <button class=\"solid w-auto\" [class.solidColorSelected]=\"selectedColorType === 'SOLID'\"\r\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToSolid($event)\">\r\n        Solid\r\n      </button>\r\n\r\n      <button class=\"gradient w-auto\" [class.gradientColorSelected]=\"selectedColorType === 'GRADIENT'\"\r\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToGradient($event)\">\r\n        Gradient\r\n      </button>\r\n\r\n    </div>\r\n\r\n    <!-- SOLID COLOR -->\r\n    <button class=\"tool color-picker-btn w-auto\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n\r\n      <mat-icon>format_color_text</mat-icon>\r\n\r\n      <input type=\"color\" class=\"hidden-color-picker\" [(ngModel)]=\"selectedColor\" (click)=\"openColorPicker()\"\r\n        (input)=\"changeColor()\">\r\n\r\n    </button>\r\n\r\n    <!-- GRADIENT -->\r\n    <div class=\"gradient-picker\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n      <input type=\"color\" [(ngModel)]=\"primaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n      <input type=\"color\" [(ngModel)]=\"secondaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <!-- TIPTAP EDITOR -->\r\n  <div #editorContainer class=\"editable-text\">\r\n</div>\r\n\r\n</div>\r\n<ng-template #viewMode>\r\n  <div class=\"read-only-text\" [innerHTML]=\"value\">\r\n  </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;width:100%}.editable-text{min-height:120px;cursor:text;width:100%}.ProseMirror{outline:none;min-height:120px;padding:5px}.ProseMirror p{margin:0}.toolbar{position:absolute;top:27%;left:0%;display:flex;align-items:center;gap:5px;background:#fff;padding:8px 14px;border-radius:22px;z-index:100000;box-shadow:#00000029 0 1px 4px}.tool{background:none;border:none;padding:5px 8px;cursor:pointer;display:flex;align-items:center}.tool:hover{background:#eee;border-radius:5px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}.color-picker-btn{position:relative}.color-picker-btn mat-icon{font-size:22px!important}.hidden-color-picker{position:absolute;inset:0;opacity:0;cursor:pointer}.gradient-text{background:linear-gradient(to right,var(--gradient-start),var(--gradient-end));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:9px;overflow:hidden}.colorType button{font-size:12px!important;padding:7px 9px!important;border:none;background:#fff;padding:5px 10px;cursor:pointer}.solid{border-right:1px solid #E9E9E9!important}.solidColorSelected,.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff}.gradient-picker{display:flex;gap:5px}.gradient-picker input{width:32px;height:32px;border:none;padding:0;cursor:pointer}.white-space-nowrap{white-space:nowrap}.font-size-field{width:120px;border:1px solid lightgrey;border-radius:10px}::ng-deep .font-size-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .font-size-field .mdc-notched-outline{display:none}::ng-deep .font-size-field .mat-mdc-text-field-wrapper{background:transparent!important;padding-left:8px!important;padding-right:8px!important;height:36px!important}::ng-deep .font-size-field .mat-mdc-select-value{font-size:14px;font-weight:600}::ng-deep .mat-mdc-select-panel{border-radius:12px!important}@media screen and (max-width: 475px){.toolbar{max-width:95%;flex-wrap:wrap;row-gap:10px}}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
@@ -2009,7 +2102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], editorElement: [{
                 type: ViewChild,
-                args: ['editorContainer', { static: true }]
+                args: ['editorContainer']
             }], onMouseDown: [{
                 type: HostListener,
                 args: ['document:mousedown']