simpo-component-library 3.6.882 → 3.6.884

package/fesm2022/simpo-component-library.mjs

@@ -1317,8 +1317,7 @@ class TextEditorComponent {
         // selected text
         const selectedText = this.editor.state.doc.textBetween(from, to, ' ');
         // remove spaces + line breaks
-        const trimmedText = selectedText
-            .replace(/\s/g, '');
+        const trimmedText = selectedText.replace(/\s/g, '');
         // if only spaces selected
         if (!trimmedText.length) {
             this.showToolbar = false;
@@ -1344,11 +1343,18 @@ class TextEditorComponent {
                 editorRect.left +
                 (rect.width / 2) -
                 (toolbarWidth / 2);
-            left = Math.max(10, left);
             const maxLeft = editorRect.width -
-                toolbarWidth -
-                10;
-            left = Math.min(left, maxLeft);
+                toolbarWidth;
+            // NEVER allow negative
+            if (left < 0) {
+                left = 0;
+            }
+            // NEVER allow overflow right
+            if (left > maxLeft) {
+                left = maxLeft;
+            }
+            // fallback safety
+            left = Number(Math.max(0, left).toFixed(0));
             this.toolbarX = left;
             this.toolbarY =
                 rect.bottom -
@@ -1496,7 +1502,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", isRTE: "isRTE", sectionId: "sectionId", label: "label", type: "type", inputTextIndex: "inputTextIndex", itemIndex: "itemIndex" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "click": "onHostClick()", "document:mousedown": "onMouseDown($event)" } }, viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- text-editor.component.html -->\n\n<ng-container *ngIf=\"isRTE\">\n\n<div class=\"editor-container\" *ngIf=\"editable; else viewMode\">\n\n  <!-- FLOATING TOOLBAR -->\n  <div class=\"toolbar\" *ngIf=\"showToolbar\" [style.top.px]=\"toolbarY\" [style.left.px]=\"toolbarX\" cdkDrag>\n    <button class=\"tool drag-handle w-auto\" cdkDragHandle>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n        class=\"lucide lucide-grip-vertical\">\n        <circle cx=\"9\" cy=\"12\" r=\"1\" />\n        <circle cx=\"9\" cy=\"5\" r=\"1\" />\n        <circle cx=\"9\" cy=\"19\" r=\"1\" />\n        <circle cx=\"15\" cy=\"12\" r=\"1\" />\n        <circle cx=\"15\" cy=\"5\" r=\"1\" />\n        <circle cx=\"15\" cy=\"19\" r=\"1\" />\n      </svg>\n    </button>\n    <mat-form-field appearance=\"outline\" class=\"font-size-field\">\n\n      <mat-select [value]=\"selectedFontSize\" (selectionChange)=\"changeFontSize($event.value)\" disableOptionCentering>\n\n        <mat-option value=\"\">\n          Default\n        </mat-option>\n\n        <mat-option value=\"clamp(0.75rem, 2vw, 1rem)\">\n          14\n        </mat-option>\n\n        <mat-option value=\"clamp(0.75rem, 2vw, 1.25rem)\">\n          16\n        </mat-option>\n\n        <mat-option value=\"clamp(1rem, 3vw, 1.5rem)\">\n          20\n        </mat-option>\n\n        <mat-option value=\"clamp(1.25rem, 4vw, 2rem)\">\n          24\n        </mat-option>\n        <mat-option value=\"clamp(2rem, 5vw, 3rem)\">\n          32\n        </mat-option>\n        <mat-option value=\"clamp(3.1rem, 7vw, 4.5rem)\">\n          48\n        </mat-option>\n      </mat-select>\n\n    </mat-form-field>\n    <!-- BOLD -->\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('bold')\" (click)=\"toggleBold()\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n        class=\"lucide lucide-bold\">\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\" />\n      </svg>\n    </button>\n\n    <!-- ITALIC -->\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('italic')\" (click)=\"toggleItalic()\">\n\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n        class=\"lucide lucide-italic\">\n        <line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\" />\n        <line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\" />\n        <line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\" />\n      </svg>\n    </button>\n\n    <!-- UNDERLINE -->\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('underline')\" (click)=\"toggleUnderline()\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n        class=\"lucide lucide-underline\">\n        <path d=\"M6 4v6a6 6 0 0 0 12 0V4\" />\n        <line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\" />\n      </svg>\n    </button>\n\n    <!-- ALIGN LEFT -->\n    <button class=\"tool w-auto\" (click)=\"setAlign('left')\">\n\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n        class=\"lucide lucide-align-left\">\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\n        <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\" />\n        <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\" />\n      </svg>\n    </button>\n\n    <!-- ALIGN CENTER -->\n    <button class=\"tool w-auto\" (click)=\"setAlign('center')\">\n\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n        class=\"lucide lucide-align-center\">\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\n        <line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\" />\n        <line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\" />\n      </svg>\n    </button>\n\n    <!-- ALIGN RIGHT -->\n    <button class=\"tool w-auto\" (click)=\"setAlign('right')\">\n\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n        class=\"lucide lucide-align-right\">\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\n        <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\n        <line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\" />\n      </svg>\n    </button>\n\n    <!-- ORDERED LIST -->\n    <button class=\"tool w-auto\" (click)=\"toggleOrderedList()\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n        class=\"lucide lucide-list-ordered\">\n        <line x1=\"10\" x2=\"21\" y1=\"6\" y2=\"6\" />\n        <line x1=\"10\" x2=\"21\" y1=\"12\" y2=\"12\" />\n        <line x1=\"10\" x2=\"21\" y1=\"18\" y2=\"18\" />\n        <path d=\"M4 6h1v4\" />\n        <path d=\"M4 10h2\" />\n        <path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\" />\n      </svg>\n    </button>\n    <!-- BULLET LIST -->\n    <button class=\"tool w-auto\" (click)=\"toggleBulletList()\">\n\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n        class=\"lucide lucide-list\">\n        <line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\" />\n        <line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\" />\n        <line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\" />\n        <line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\" />\n        <line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\" />\n        <line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\" />\n      </svg>\n    </button>\n\n    <!-- SOLID / GRADIENT -->\n    <!-- SOLID / GRADIENT -->\n    <div class=\"colorType\">\n\n      <button class=\"solid w-auto\" [class.solidColorSelected]=\"selectedColorType === 'SOLID'\"\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToSolid($event)\">\n        Solid\n      </button>\n\n      <button class=\"gradient w-auto\" [class.gradientColorSelected]=\"selectedColorType === 'GRADIENT'\"\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToGradient($event)\">\n        Gradient\n      </button>\n\n    </div>\n\n    <!-- SOLID COLOR -->\n    <button class=\"tool color-picker-btn w-auto\" *ngIf=\"selectedColorType === 'SOLID'\">\n\n      <mat-icon>format_color_text</mat-icon>\n\n      <input type=\"color\" class=\"hidden-color-picker\" [(ngModel)]=\"selectedColor\" (click)=\"openColorPicker()\"\n        (input)=\"changeColor()\">\n\n    </button>\n\n    <!-- GRADIENT -->\n    <div class=\"gradient-picker\" *ngIf=\"selectedColorType === 'GRADIENT'\">\n      <input type=\"color\" [(ngModel)]=\"primaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\n\n      <input type=\"color\" [(ngModel)]=\"secondaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\n\n    </div>\n\n  </div>\n\n  <!-- TIPTAP EDITOR -->\n  <div #editorContainer class=\"editable-text\">\n  </div>\n\n</div>\n<ng-template #viewMode>\n  <div class=\"read-only-text\" [innerHTML]=\"safeHtml\">\n  </div>\n</ng-template>\n\n</ng-container>\n", 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;line-height:inherit!important;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", isRTE: "isRTE", sectionId: "sectionId", label: "label", type: "type", inputTextIndex: "inputTextIndex", itemIndex: "itemIndex" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "click": "onHostClick()", "document:mousedown": "onMouseDown($event)" }, properties: { "style.display": "isRTE ? \"\" : \"none\"" } }, 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;line-height:inherit!important;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,
@@ -1508,7 +1514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatSelectModule,
                         MatFormFieldModule,
                         ContenteditableValueAccessor
-                    ], template: "<!-- text-editor.component.html -->\n\n<ng-container *ngIf=\"isRTE\">\n\n<div class=\"editor-container\" *ngIf=\"editable; else viewMode\">\n\n  <!-- FLOATING TOOLBAR -->\n  <div class=\"toolbar\" *ngIf=\"showToolbar\" [style.top.px]=\"toolbarY\" [style.left.px]=\"toolbarX\" cdkDrag>\n    <button class=\"tool drag-handle w-auto\" cdkDragHandle>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n        class=\"lucide lucide-grip-vertical\">\n        <circle cx=\"9\" cy=\"12\" r=\"1\" />\n        <circle cx=\"9\" cy=\"5\" r=\"1\" />\n        <circle cx=\"9\" cy=\"19\" r=\"1\" />\n        <circle cx=\"15\" cy=\"12\" r=\"1\" />\n        <circle cx=\"15\" cy=\"5\" r=\"1\" />\n        <circle cx=\"15\" cy=\"19\" r=\"1\" />\n      </svg>\n    </button>\n    <mat-form-field appearance=\"outline\" class=\"font-size-field\">\n\n      <mat-select [value]=\"selectedFontSize\" (selectionChange)=\"changeFontSize($event.value)\" disableOptionCentering>\n\n        <mat-option value=\"\">\n          Default\n        </mat-option>\n\n        <mat-option value=\"clamp(0.75rem, 2vw, 1rem)\">\n          14\n        </mat-option>\n\n        <mat-option value=\"clamp(0.75rem, 2vw, 1.25rem)\">\n          16\n        </mat-option>\n\n        <mat-option value=\"clamp(1rem, 3vw, 1.5rem)\">\n          20\n        </mat-option>\n\n        <mat-option value=\"clamp(1.25rem, 4vw, 2rem)\">\n          24\n        </mat-option>\n        <mat-option value=\"clamp(2rem, 5vw, 3rem)\">\n          32\n        </mat-option>\n        <mat-option value=\"clamp(3.1rem, 7vw, 4.5rem)\">\n          48\n        </mat-option>\n      </mat-select>\n\n    </mat-form-field>\n    <!-- BOLD -->\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('bold')\" (click)=\"toggleBold()\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n        class=\"lucide lucide-bold\">\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\" />\n      </svg>\n    </button>\n\n    <!-- ITALIC -->\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('italic')\" (click)=\"toggleItalic()\">\n\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n        class=\"lucide lucide-italic\">\n        <line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\" />\n        <line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\" />\n        <line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\" />\n      </svg>\n    </button>\n\n    <!-- UNDERLINE -->\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('underline')\" (click)=\"toggleUnderline()\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n        class=\"lucide lucide-underline\">\n        <path d=\"M6 4v6a6 6 0 0 0 12 0V4\" />\n        <line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\" />\n      </svg>\n    </button>\n\n    <!-- ALIGN LEFT -->\n    <button class=\"tool w-auto\" (click)=\"setAlign('left')\">\n\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n        class=\"lucide lucide-align-left\">\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\n        <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\" />\n        <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\" />\n      </svg>\n    </button>\n\n    <!-- ALIGN CENTER -->\n    <button class=\"tool w-auto\" (click)=\"setAlign('center')\">\n\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n        class=\"lucide lucide-align-center\">\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\n        <line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\" />\n        <line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\" />\n      </svg>\n    </button>\n\n    <!-- ALIGN RIGHT -->\n    <button class=\"tool w-auto\" (click)=\"setAlign('right')\">\n\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n        class=\"lucide lucide-align-right\">\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\n        <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\n        <line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\" />\n      </svg>\n    </button>\n\n    <!-- ORDERED LIST -->\n    <button class=\"tool w-auto\" (click)=\"toggleOrderedList()\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n        class=\"lucide lucide-list-ordered\">\n        <line x1=\"10\" x2=\"21\" y1=\"6\" y2=\"6\" />\n        <line x1=\"10\" x2=\"21\" y1=\"12\" y2=\"12\" />\n        <line x1=\"10\" x2=\"21\" y1=\"18\" y2=\"18\" />\n        <path d=\"M4 6h1v4\" />\n        <path d=\"M4 10h2\" />\n        <path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\" />\n      </svg>\n    </button>\n    <!-- BULLET LIST -->\n    <button class=\"tool w-auto\" (click)=\"toggleBulletList()\">\n\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n        class=\"lucide lucide-list\">\n        <line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\" />\n        <line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\" />\n        <line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\" />\n        <line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\" />\n        <line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\" />\n        <line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\" />\n      </svg>\n    </button>\n\n    <!-- SOLID / GRADIENT -->\n    <!-- SOLID / GRADIENT -->\n    <div class=\"colorType\">\n\n      <button class=\"solid w-auto\" [class.solidColorSelected]=\"selectedColorType === 'SOLID'\"\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToSolid($event)\">\n        Solid\n      </button>\n\n      <button class=\"gradient w-auto\" [class.gradientColorSelected]=\"selectedColorType === 'GRADIENT'\"\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToGradient($event)\">\n        Gradient\n      </button>\n\n    </div>\n\n    <!-- SOLID COLOR -->\n    <button class=\"tool color-picker-btn w-auto\" *ngIf=\"selectedColorType === 'SOLID'\">\n\n      <mat-icon>format_color_text</mat-icon>\n\n      <input type=\"color\" class=\"hidden-color-picker\" [(ngModel)]=\"selectedColor\" (click)=\"openColorPicker()\"\n        (input)=\"changeColor()\">\n\n    </button>\n\n    <!-- GRADIENT -->\n    <div class=\"gradient-picker\" *ngIf=\"selectedColorType === 'GRADIENT'\">\n      <input type=\"color\" [(ngModel)]=\"primaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\n\n      <input type=\"color\" [(ngModel)]=\"secondaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\n\n    </div>\n\n  </div>\n\n  <!-- TIPTAP EDITOR -->\n  <div #editorContainer class=\"editable-text\">\n  </div>\n\n</div>\n<ng-template #viewMode>\n  <div class=\"read-only-text\" [innerHTML]=\"safeHtml\">\n  </div>\n</ng-template>\n\n</ng-container>\n", 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;line-height:inherit!important;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"] }]
+                    ], host: { '[style.display]': 'isRTE ? "" : "none"' }, 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;line-height:inherit!important;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: [{