simpo-component-library 3.6.858 → 3.6.862

package/fesm2022/simpo-component-library.mjs

@@ -32,15 +32,10 @@ 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 { Extension, Editor } from '@tiptap/core';
-import StarterKit from '@tiptap/starter-kit';
 import { CdkDrag, CdkDragPlaceholder, moveItemInArray } from '@angular/cdk/drag-drop';
-import { TextStyle } from '@tiptap/extension-text-style';
-import Color from '@tiptap/extension-color';
-import Underline from '@tiptap/extension-underline';
-import TextAlign from '@tiptap/extension-text-align';
 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';
@@ -1656,6 +1651,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['simpoObjectPosition']
             }] } });
 
+class ContenteditableValueAccessor {
+    constructor(elementRef, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.onTouched = () => { };
+        this.contenteditable = true; // Allow dynamic input
+        this.onChange = (_value) => { };
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'contenteditable', 'true');
+    }
+    ngAfterViewInit() {
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'contenteditable', this.contenteditable ? 'true' : 'false');
+        this.observer = new MutationObserver(() => {
+            this.onChange(this.elementRef.nativeElement.innerHTML);
+        });
+        this.observer.observe(this.elementRef.nativeElement, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+    ngOnDestroy() {
+        this.observer?.disconnect();
+    }
+    onInput() {
+        this.observer?.disconnect();
+        this.onChange(this.elementRef.nativeElement.innerHTML);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', value || '');
+    }
+    registerOnChange(onChange) {
+        this.onChange = onChange;
+    }
+    registerOnTouched(onTouched) {
+        this.onTouched = onTouched;
+    }
+    setDisabledState(disabled) {
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'contenteditable', String(!disabled));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContenteditableValueAccessor, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ContenteditableValueAccessor, isStandalone: true, selector: "[contenteditable][ngModel]", inputs: { contenteditable: "contenteditable" }, host: { listeners: { "input": "onInput()", "blur": "onBlur()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ContenteditableValueAccessor),
+                multi: true,
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContenteditableValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[contenteditable][ngModel]',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ContenteditableValueAccessor),
+                            multi: true,
+                        },
+                    ],
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: i0.Renderer2, decorators: [{
+                    type: Inject,
+                    args: [Renderer2]
+                }] }], propDecorators: { contenteditable: [{
+                type: Input
+            }], onInput: [{
+                type: HostListener,
+                args: ['input']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
 const GradientExtension = Extension.create({
     name: 'gradient',
     addGlobalAttributes() {
@@ -1759,92 +1834,19 @@ const FontSize = Extension.create({
     }
 });
 
-class ContenteditableValueAccessor {
-    constructor(elementRef, renderer) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.onTouched = () => { };
-        this.contenteditable = true; // Allow dynamic input
-        this.onChange = (_value) => { };
-        this.renderer.setAttribute(this.elementRef.nativeElement, 'contenteditable', 'true');
-    }
-    ngAfterViewInit() {
-        this.renderer.setAttribute(this.elementRef.nativeElement, 'contenteditable', this.contenteditable ? 'true' : 'false');
-        this.observer = new MutationObserver(() => {
-            this.onChange(this.elementRef.nativeElement.innerHTML);
-        });
-        this.observer.observe(this.elementRef.nativeElement, {
-            characterData: true,
-            childList: true,
-            subtree: true,
-        });
-    }
-    ngOnDestroy() {
-        this.observer?.disconnect();
-    }
-    onInput() {
-        this.observer?.disconnect();
-        this.onChange(this.elementRef.nativeElement.innerHTML);
-    }
-    onBlur() {
-        this.onTouched();
-    }
-    writeValue(value) {
-        this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', value || '');
-    }
-    registerOnChange(onChange) {
-        this.onChange = onChange;
-    }
-    registerOnTouched(onTouched) {
-        this.onTouched = onTouched;
-    }
-    setDisabledState(disabled) {
-        this.renderer.setAttribute(this.elementRef.nativeElement, 'contenteditable', String(!disabled));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContenteditableValueAccessor, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ContenteditableValueAccessor, isStandalone: true, selector: "[contenteditable][ngModel]", inputs: { contenteditable: "contenteditable" }, host: { listeners: { "input": "onInput()", "blur": "onBlur()" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ContenteditableValueAccessor),
-                multi: true,
-            },
-        ], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContenteditableValueAccessor, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[contenteditable][ngModel]',
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ContenteditableValueAccessor),
-                            multi: true,
-                        },
-                    ],
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
-                    type: Inject,
-                    args: [ElementRef]
-                }] }, { type: i0.Renderer2, decorators: [{
-                    type: Inject,
-                    args: [Renderer2]
-                }] }], propDecorators: { contenteditable: [{
-                type: Input
-            }], onInput: [{
-                type: HostListener,
-                args: ['input']
-            }], onBlur: [{
-                type: HostListener,
-                args: ['blur']
-            }] } });
-
 // text-editor.component.ts
 class TextEditorComponent {
+    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.selectedFontSize = '';
         this.showToolbar = false;
         this.toolbarX = 0;
@@ -1855,31 +1857,44 @@ class TextEditorComponent {
         this.isColorPickerOpen = false;
         this.selectedColorType = 'SOLID';
         this.savedSelection = null;
+        this.isFontSizeMenuOpen = false;
+        this.toolbarData = {
+            selectedSize: ''
+        };
         this.handleWindowFocus = () => {
             setTimeout(() => {
                 this.isColorPickerOpen = false;
             }, 300);
         };
-        this.isFontSizeMenuOpen = false;
-        this.toolbarData = {
-            selectedSize: ''
-        };
+        console.log(this.value);
     }
     ngOnDestroy() {
-        if (this.editor) {
+        if (this.editor &&
+            isPlatformBrowser(this.platformId)) {
             this.editor.destroy();
         }
     }
-    ngAfterViewInit() {
-        if (this.editable) {
-            this.initializeEditor();
-        }
-    }
-    initializeEditor() {
+    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'))
+            .TextStyle;
+        const Color = (await import('@tiptap/extension-color'))
+            .default;
+        const Underline = (await import('@tiptap/extension-underline'))
+            .default;
+        const TextAlign = (await import('@tiptap/extension-text-align'))
+            .default;
         this.editor = new Editor({
             element: this.editorElement.nativeElement,
+            editorProps: {
+                attributes: {
+                    class: 'ProseMirror'
+                }
+            },
             extensions: [
                 StarterKit,
                 TextStyle,
@@ -1888,7 +1903,11 @@ class TextEditorComponent {
                 GradientExtension,
                 Underline,
                 TextAlign.configure({
-                    types: ['heading', 'paragraph', 'listItem'],
+                    types: [
+                        'heading',
+                        'paragraph',
+                        'listItem'
+                    ],
                 }),
             ],
             content: this.value,
@@ -1899,17 +1918,32 @@ class TextEditorComponent {
                 const html = editor.getHTML();
                 this.value = html;
                 this.valueChange.emit(html);
+                this.updateEmptyEditorClass();
             }
         });
+        this.updateEmptyEditorClass();
+    }
+    updateEmptyEditorClass() {
+        if (!this.editorElement)
+            return;
+        const editorWrapper = this.editorElement.nativeElement
+            .closest('.editable-text');
+        if (!editorWrapper)
+            return;
+        if (this.editor?.isEmpty) {
+            editorWrapper.classList.add('editor-empty');
+        }
+        else {
+            editorWrapper.classList.remove('editor-empty');
+        }
     }
     saveSelection() {
         this.savedSelection =
             this.editor.state.selection;
     }
     restoreSelection() {
-        if (!this.savedSelection) {
+        if (!this.savedSelection)
             return;
-        }
         this.editor
             .chain()
             .focus()
@@ -1952,30 +1986,30 @@ class TextEditorComponent {
             return;
         }
         const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0) {
+        if (!selection ||
+            selection.rangeCount === 0) {
             this.showToolbar = false;
             return;
         }
         const range = selection.getRangeAt(0);
         const rect = range.getBoundingClientRect();
-        const editorRect = this.editorElement.nativeElement.getBoundingClientRect();
+        const editorRect = this.editorElement.nativeElement
+            .getBoundingClientRect();
         this.showToolbar = true;
         setTimeout(() => {
             const toolbar = document.querySelector('.toolbar');
             if (!toolbar)
                 return;
             const toolbarWidth = toolbar.offsetWidth;
-            // centered position
             let left = rect.left -
                 editorRect.left +
                 (rect.width / 2) -
                 (toolbarWidth / 2);
-            // left limit
             left = Math.max(10, left);
-            // right limit
-            const maxLeft = editorRect.width - toolbarWidth - 10;
+            const maxLeft = editorRect.width -
+                toolbarWidth -
+                10;
             left = Math.min(left, maxLeft);
-            // prevent negative value
             left = Math.max(10, left);
             this.toolbarX = left;
             this.toolbarY =
@@ -2035,7 +2069,10 @@ class TextEditorComponent {
         this.editor
             .chain()
             .focus()
-            .setTextSelection({ from, to })
+            .setTextSelection({
+            from,
+            to
+        })
             .setMark('textStyle', {
             ...existingStyles,
             color: this.selectedColor,
@@ -2052,16 +2089,19 @@ 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()
-            .setTextSelection({ from, to })
+            .setTextSelection({
+            from,
+            to
+        })
             .setMark('textStyle', {
             ...existingStyles,
             backgroundImage: gradient,
@@ -2077,11 +2117,13 @@ class TextEditorComponent {
             if (!this.editor)
                 return;
             const { from, to } = this.editor.state.selection;
-            this.showToolbar = from !== to;
+            this.showToolbar =
+                from !== to;
         });
     }
     toggleFontSizeMenu(event) {
-        this.isFontSizeMenuOpen = !this.isFontSizeMenuOpen;
+        this.isFontSizeMenuOpen =
+            !this.isFontSizeMenuOpen;
         event.stopPropagation();
     }
     getDisplayFontSize() {
@@ -2104,19 +2146,22 @@ class TextEditorComponent {
     selectCustomFontSize(cssSize, event) {
         event.stopPropagation();
         this.changeFontSize(cssSize);
-        this.isFontSizeMenuOpen = false;
+        this.isFontSizeMenuOpen =
+            false;
     }
     changeFontSize(fontSize) {
-        this.selectedFontSize = fontSize;
+        this.selectedFontSize =
+            fontSize;
         const { from, to } = this.editor.state.selection;
-        if (from === to) {
+        if (from === to)
             return;
-        }
         this.editor
             .chain()
             .focus()
-            .setTextSelection({ from, to })
-            // merges with existing styles
+            .setTextSelection({
+            from,
+            to
+        })
             .setMark('textStyle', {
             fontSize
         })
@@ -2136,7 +2181,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"] }]
-        }], propDecorators: { value: [{
+        }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
                 type: Output