simpo-component-library 3.6.863 → 3.6.864

package/fesm2022/simpo-component-library.mjs

@@ -1835,7 +1835,6 @@ const FontSize = Extension.create({
     }
 });
 
-// text-editor.component.ts
 class TextEditorComponent {
     constructor() {
         this.value = '<p>Hello this is palash makhija</p>';
@@ -1863,6 +1862,12 @@ class TextEditorComponent {
             }, 300);
         };
     }
+    ngOnChanges(changes) {
+        if (changes['value']) {
+            console.log('INPUT VALUE:', this.value);
+            this.updateSafeHtml();
+        }
+    }
     async ngAfterViewInit() {
         this.updateSafeHtml();
         if (this.editable &&
@@ -1870,11 +1875,6 @@ class TextEditorComponent {
             await this.initializeEditor();
         }
     }
-    ngOnChanges(changes) {
-        if (changes['value']) {
-            this.updateSafeHtml();
-        }
-    }
     ngOnDestroy() {
         if (this.editor &&
             isPlatformBrowser(this.platformId)) {
@@ -1883,7 +1883,8 @@ class TextEditorComponent {
     }
     updateSafeHtml() {
         this.safeHtml =
-            this.sanitizer.bypassSecurityTrustHtml(this.value || '');
+            this.sanitizer
+                .bypassSecurityTrustHtml(this.value || '');
     }
     async initializeEditor() {
         if (!this.editorElement)
@@ -1926,6 +1927,7 @@ class TextEditorComponent {
             },
             onUpdate: ({ editor }) => {
                 const html = editor.getHTML();
+                console.log('EDITOR HTML:', html);
                 this.value = html;
                 this.updateSafeHtml();
                 this.valueChange.emit(html);
@@ -2100,12 +2102,12 @@ class TextEditorComponent {
             return;
         const existingStyles = this.editor.getAttributes('textStyle');
         const gradient = `
-      linear-gradient(
-        to right,
-        ${this.primaryColor},
-        ${this.secondaryColor}
-      )
-    `;
+linear - gradient(
+  to right,
+  ${this.primaryColor},
+  ${this.secondaryColor}
+)
+  `;
         this.editor
             .chain()
             .focus()
@@ -2151,7 +2153,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 }], usesOnChanges: 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      <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    <!-- 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{cursor:text;width:100%;border:1px solid lightgrey;border-radius:10px}.editable-text ::ng-deep p{margin-bottom:0!important}::ng-deep .ProseMirror ol,::ng-deep .ProseMirror ul{padding-left:2rem;margin-left:0;list-style-position:inside}::ng-deep .ProseMirror li{text-align:inherit;margin-bottom:5px}::ng-deep .ProseMirror li p{display:inline}.ProseMirror{outline:none;min-height:120px;padding:5px}.ProseMirror p{margin:0}.toolbar{position:absolute;left:0;top: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;max-width:calc(100vw - 20px);overflow-x:auto;box-sizing:border-box}.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;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}}@media screen and (max-width: 768px){.toolbar{width:max-content;max-width:calc(100vw - 20px);flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}}\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 }], usesOnChanges: 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      <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    <!-- 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]=\"safeHtml\">\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{cursor:text;width:100%;border:1px solid lightgrey;border-radius:10px}.editable-text ::ng-deep p{margin-bottom:0!important}::ng-deep .ProseMirror ol,::ng-deep .ProseMirror ul{padding-left:2rem;margin-left:0;list-style-position:inside}::ng-deep .ProseMirror li{text-align:inherit;margin-bottom:5px}::ng-deep .ProseMirror li p{display:inline}.ProseMirror{outline:none;min-height:120px;padding:5px}.ProseMirror p{margin:0}.toolbar{position:absolute;left:0;top: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;max-width:calc(100vw - 20px);overflow-x:auto;box-sizing:border-box}.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;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}}@media screen and (max-width: 768px){.toolbar{width:max-content;max-width:calc(100vw - 20px);flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}}\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,
@@ -2163,7 +2165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatSelectModule,
                         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      <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    <!-- 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{cursor:text;width:100%;border:1px solid lightgrey;border-radius:10px}.editable-text ::ng-deep p{margin-bottom:0!important}::ng-deep .ProseMirror ol,::ng-deep .ProseMirror ul{padding-left:2rem;margin-left:0;list-style-position:inside}::ng-deep .ProseMirror li{text-align:inherit;margin-bottom:5px}::ng-deep .ProseMirror li p{display:inline}.ProseMirror{outline:none;min-height:120px;padding:5px}.ProseMirror p{margin:0}.toolbar{position:absolute;left:0;top: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;max-width:calc(100vw - 20px);overflow-x:auto;box-sizing:border-box}.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;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}}@media screen and (max-width: 768px){.toolbar{width:max-content;max-width:calc(100vw - 20px);flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}}\n"] }]
+                    ], 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      <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    <!-- 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]=\"safeHtml\">\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{cursor:text;width:100%;border:1px solid lightgrey;border-radius:10px}.editable-text ::ng-deep p{margin-bottom:0!important}::ng-deep .ProseMirror ol,::ng-deep .ProseMirror ul{padding-left:2rem;margin-left:0;list-style-position:inside}::ng-deep .ProseMirror li{text-align:inherit;margin-bottom:5px}::ng-deep .ProseMirror li p{display:inline}.ProseMirror{outline:none;min-height:120px;padding:5px}.ProseMirror p{margin:0}.toolbar{position:absolute;left:0;top: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;max-width:calc(100vw - 20px);overflow-x:auto;box-sizing:border-box}.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;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}}@media screen and (max-width: 768px){.toolbar{width:max-content;max-width:calc(100vw - 20px);flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{