npm - simpo-component-library - Versions diffs - 3.6.862 → 3.6.863 - Mend

simpo-component-library 3.6.862 → 3.6.863

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/fesm2022/simpo-component-library.mjs CHANGED Viewed

@@ -32,13 +32,14 @@ import * as i10$2 from '@angular/material/slider';
 import { MatSliderModule, MatSlider } from '@angular/material/slider';
 import * as i10$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinner, MatProgressSpinnerModule, MatSpinner } from '@angular/material/progress-spinner';
+import * as i1$2 from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
 import { CdkDrag, CdkDragPlaceholder, moveItemInArray } from '@angular/cdk/drag-drop';
 import * as i12 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { Extension } from '@tiptap/core';
 import * as i2$2 from '@angular/router';
 import { RouterLink, NavigationEnd } from '@angular/router';
-import * as i1$2 from '@angular/platform-browser';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i7$1 from 'ngx-skeleton-loader';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -1836,17 +1837,12 @@ const FontSize = Extension.create({
 // text-editor.component.ts
 class TextEditorComponent {
-    async ngAfterViewInit() {
-        if (this.editable &&
-            isPlatformBrowser(this.platformId)) {
-            await this.initializeEditor();
-        }
-    }
     constructor() {
         this.value = '<p>Hello this is palash makhija</p>';
         this.valueChange = new EventEmitter();
         this.editable = false;
         this.platformId = inject(PLATFORM_ID);
+        this.sanitizer = inject(DomSanitizer);
         this.selectedFontSize = '';
         this.showToolbar = false;
         this.toolbarX = 0;
@@ -1866,7 +1862,18 @@ class TextEditorComponent {
                 this.isColorPickerOpen = false;
             }, 300);
         };
-        console.log(this.value);
+    }
+    async ngAfterViewInit() {
+        this.updateSafeHtml();
+        if (this.editable &&
+            isPlatformBrowser(this.platformId)) {
+            await this.initializeEditor();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['value']) {
+            this.updateSafeHtml();
+        }
     }
     ngOnDestroy() {
         if (this.editor &&
@@ -1874,10 +1881,13 @@ class TextEditorComponent {
             this.editor.destroy();
         }
     }
+    updateSafeHtml() {
+        this.safeHtml =
+            this.sanitizer.bypassSecurityTrustHtml(this.value || '');
+    }
     async initializeEditor() {
         if (!this.editorElement)
             return;
-        // dynamic imports for SSR safety
         const { Editor } = await import('@tiptap/core');
         const StarterKit = (await import('@tiptap/starter-kit')).default;
         const TextStyle = (await import('@tiptap/extension-text-style'))
@@ -1917,6 +1927,7 @@ class TextEditorComponent {
             onUpdate: ({ editor }) => {
                 const html = editor.getHTML();
                 this.value = html;
+                this.updateSafeHtml();
                 this.valueChange.emit(html);
                 this.updateEmptyEditorClass();
             }
@@ -2121,34 +2132,6 @@ class TextEditorComponent {
                 from !== to;
         });
     }
-    toggleFontSizeMenu(event) {
-        this.isFontSizeMenuOpen =
-            !this.isFontSizeMenuOpen;
-        event.stopPropagation();
-    }
-    getDisplayFontSize() {
-        const size = this.editor
-            ?.getAttributes('textStyle')?.['fontSize'];
-        if (!size)
-            return '16';
-        if (size.includes('0.75rem'))
-            return '14';
-        if (size.includes('1rem, 3vw'))
-            return '20';
-        if (size.includes('1.25rem'))
-            return '24';
-        if (size.includes('2rem'))
-            return '32';
-        if (size.includes('3.1rem'))
-            return '48';
-        return '16';
-    }
-    selectCustomFontSize(cssSize, event) {
-        event.stopPropagation();
-        this.changeFontSize(cssSize);
-        this.isFontSizeMenuOpen =
-            false;
-    }
     changeFontSize(fontSize) {
         this.selectedFontSize =
             fontSize;
@@ -2168,7 +2151,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 }], 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]=\"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 }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, decorators: [{
             type: Component,
@@ -2181,7 +2164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         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"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{
+        }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
                 type: Output