simpo-component-library 3.6.848 → 3.6.850

package/fesm2022/simpo-component-library.mjs

@@ -1945,7 +1945,6 @@ class TextEditorComponent {
     }
     handleSelection() {
         const { from, to } = this.editor.state.selection;
-        // hide if nothing selected
         if (from === to) {
             if (!this.isColorPickerOpen) {
                 this.showToolbar = false;
@@ -1959,34 +1958,31 @@ class TextEditorComponent {
         }
         const range = selection.getRangeAt(0);
         const rect = range.getBoundingClientRect();
-        const editorRect = this.editorElement
-            .nativeElement
-            .getBoundingClientRect();
+        const editorRect = this.editorElement.nativeElement.getBoundingClientRect();
         this.showToolbar = true;
-        // toolbar actual width
-        const toolbarWidth = 700;
-        // calculate centered position
-        let left = rect.left -
-            editorRect.left +
-            (rect.width / 2) -
-            (toolbarWidth / 2);
-        // prevent left overflow
-        if (left < 10) {
-            left = 10;
-        }
-        // prevent right overflow
-        const maxLeft = editorRect.width -
-            toolbarWidth -
-            10;
-        if (left > maxLeft) {
-            left = maxLeft;
-        }
-        this.toolbarX = left;
-        // exact below selection
-        this.toolbarY =
-            rect.bottom -
-                editorRect.top +
-                10;
+        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;
+            left = Math.min(left, maxLeft);
+            // prevent negative value
+            left = Math.max(10, left);
+            this.toolbarX = left;
+            this.toolbarY =
+                rect.bottom -
+                    editorRect.top +
+                    10;
+        });
     }
     toggleBold() {
         this.editor
@@ -2127,7 +2123,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{min-height:120px;cursor:text;width:100%}.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}.tool{background:none;border:none;padding:5px 8px;cursor:pointer;display:flex;align-items:center}.tool:hover{background:#eee;border-radius:5px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}.color-picker-btn{position:relative}.color-picker-btn mat-icon{font-size:22px!important}.hidden-color-picker{position:absolute;inset:0;opacity:0;cursor:pointer}.gradient-text{background:linear-gradient(to right,var(--gradient-start),var(--gradient-end));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:9px;overflow:hidden}.colorType button{font-size:12px!important;padding:7px 9px!important;border:none;background:#fff;padding:5px 10px;cursor:pointer}.solid{border-right:1px solid #E9E9E9!important}.solidColorSelected,.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff}.gradient-picker{display:flex;gap:5px}.gradient-picker input{width:32px;height:32px;border:none;padding:0;cursor:pointer}.white-space-nowrap{white-space:nowrap}.font-size-field{width:120px;border:1px solid lightgrey;border-radius:10px}::ng-deep .font-size-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .font-size-field .mdc-notched-outline{display:none}::ng-deep .font-size-field .mat-mdc-text-field-wrapper{background:transparent!important;padding-left:8px!important;padding-right:8px!important;height:36px!important}::ng-deep .font-size-field .mat-mdc-select-value{font-size:14px;font-weight:600}::ng-deep .mat-mdc-select-panel{border-radius:12px!important}@media screen and (max-width: 475px){.toolbar{max-width:95%;flex-wrap:wrap;row-gap:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i12.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextEditorComponent, isStandalone: true, selector: "simpo-text-editor", inputs: { value: "value", editable: "editable", sectionId: "sectionId", label: "label", type: "type" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:mousedown": "onMouseDown()" } }, viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorContainer"], descendants: true }], ngImport: i0, template: "<!-- text-editor.component.html -->\r\n\r\n<div class=\"editor-container\" *ngIf=\"editable; else viewMode\">\r\n\r\n  <!-- FLOATING TOOLBAR -->\r\n  <div class=\"toolbar\" *ngIf=\"showToolbar\" [style.top.px]=\"toolbarY\" [style.left.px]=\"toolbarX\" cdkDrag>\r\n    <button class=\"tool drag-handle w-auto\" cdkDragHandle>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-grip-vertical\">\r\n        <circle cx=\"9\" cy=\"12\" r=\"1\" />\r\n        <circle cx=\"9\" cy=\"5\" r=\"1\" />\r\n        <circle cx=\"9\" cy=\"19\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"12\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"5\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"19\" r=\"1\" />\r\n      </svg>\r\n    </button>\r\n    <mat-form-field appearance=\"outline\" class=\"font-size-field\">\r\n\r\n      <mat-select [value]=\"selectedFontSize\" (selectionChange)=\"changeFontSize($event.value)\" disableOptionCentering>\r\n\r\n        <mat-option value=\"\">\r\n          Default\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(0.75rem, 2vw, 1rem)\">\r\n          14\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(0.75rem, 2vw, 1.25rem)\">\r\n          16\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(1rem, 3vw, 1.5rem)\">\r\n          20\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(1.25rem, 4vw, 2rem)\">\r\n          24\r\n        </mat-option>\r\n        <mat-option value=\"clamp(2rem, 5vw, 3rem)\">\r\n          32\r\n        </mat-option>\r\n        <mat-option value=\"clamp(3.1rem, 7vw, 4.5rem)\">\r\n          48\r\n        </mat-option>\r\n      </mat-select>\r\n\r\n    </mat-form-field>\r\n    <!-- BOLD -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('bold')\" (click)=\"toggleBold()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-bold\">\r\n        <path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ITALIC -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('italic')\" (click)=\"toggleItalic()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-italic\">\r\n        <line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\" />\r\n        <line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\" />\r\n        <line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- UNDERLINE -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('underline')\" (click)=\"toggleUnderline()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-underline\">\r\n        <path d=\"M6 4v6a6 6 0 0 0 12 0V4\" />\r\n        <line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN LEFT -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('left')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-left\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN CENTER -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('center')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-center\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN RIGHT -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('right')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-right\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ORDERED LIST -->\r\n    <button class=\"tool w-auto\" (click)=\"toggleOrderedList()\">\r\n      <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%}.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,
@@ -2139,7 +2135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatSelectModule,
                         MatFormFieldModule,
                         ContenteditableValueAccessor
-                    ], template: "<!-- text-editor.component.html -->\r\n\r\n<div class=\"editor-container\" *ngIf=\"editable; else viewMode\">\r\n\r\n  <!-- FLOATING TOOLBAR -->\r\n  <div class=\"toolbar\" *ngIf=\"showToolbar\" [style.top.px]=\"toolbarY\" [style.left.px]=\"toolbarX\" cdkDrag>\r\n    <button class=\"tool drag-handle w-auto\" cdkDragHandle>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-grip-vertical\">\r\n        <circle cx=\"9\" cy=\"12\" r=\"1\" />\r\n        <circle cx=\"9\" cy=\"5\" r=\"1\" />\r\n        <circle cx=\"9\" cy=\"19\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"12\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"5\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"19\" r=\"1\" />\r\n      </svg>\r\n    </button>\r\n    <mat-form-field appearance=\"outline\" class=\"font-size-field\">\r\n\r\n      <mat-select [value]=\"selectedFontSize\" (selectionChange)=\"changeFontSize($event.value)\" disableOptionCentering>\r\n\r\n        <mat-option value=\"\">\r\n          Default\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(0.75rem, 2vw, 1rem)\">\r\n          14\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(0.75rem, 2vw, 1.25rem)\">\r\n          16\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(1rem, 3vw, 1.5rem)\">\r\n          20\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(1.25rem, 4vw, 2rem)\">\r\n          24\r\n        </mat-option>\r\n        <mat-option value=\"clamp(2rem, 5vw, 3rem)\">\r\n          32\r\n        </mat-option>\r\n        <mat-option value=\"clamp(3.1rem, 7vw, 4.5rem)\">\r\n          48\r\n        </mat-option>\r\n      </mat-select>\r\n\r\n    </mat-form-field>\r\n    <!-- BOLD -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('bold')\" (click)=\"toggleBold()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-bold\">\r\n        <path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ITALIC -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('italic')\" (click)=\"toggleItalic()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-italic\">\r\n        <line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\" />\r\n        <line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\" />\r\n        <line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- UNDERLINE -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('underline')\" (click)=\"toggleUnderline()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-underline\">\r\n        <path d=\"M6 4v6a6 6 0 0 0 12 0V4\" />\r\n        <line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN LEFT -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('left')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-left\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN CENTER -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('center')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-center\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN RIGHT -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('right')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-right\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ORDERED LIST -->\r\n    <button class=\"tool w-auto\" (click)=\"toggleOrderedList()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-list-ordered\">\r\n        <line x1=\"10\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"10\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"10\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n        <path d=\"M4 6h1v4\" />\r\n        <path d=\"M4 10h2\" />\r\n        <path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\" />\r\n      </svg>\r\n    </button>\r\n    <!-- BULLET LIST -->\r\n    <button class=\"tool w-auto\" (click)=\"toggleBulletList()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-list\">\r\n        <line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- SOLID / GRADIENT -->\r\n    <!-- SOLID / GRADIENT -->\r\n    <div class=\"colorType\">\r\n\r\n      <button class=\"solid w-auto\" [class.solidColorSelected]=\"selectedColorType === 'SOLID'\"\r\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToSolid($event)\">\r\n        Solid\r\n      </button>\r\n\r\n      <button class=\"gradient w-auto\" [class.gradientColorSelected]=\"selectedColorType === 'GRADIENT'\"\r\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToGradient($event)\">\r\n        Gradient\r\n      </button>\r\n\r\n    </div>\r\n\r\n    <!-- SOLID COLOR -->\r\n    <button class=\"tool color-picker-btn w-auto\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n\r\n      <mat-icon>format_color_text</mat-icon>\r\n\r\n      <input type=\"color\" class=\"hidden-color-picker\" [(ngModel)]=\"selectedColor\" (click)=\"openColorPicker()\"\r\n        (input)=\"changeColor()\">\r\n\r\n    </button>\r\n\r\n    <!-- GRADIENT -->\r\n    <div class=\"gradient-picker\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n      <input type=\"color\" [(ngModel)]=\"primaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n      <input type=\"color\" [(ngModel)]=\"secondaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <!-- TIPTAP EDITOR -->\r\n  <div #editorContainer class=\"editable-text\">\r\n  </div>\r\n\r\n</div>\r\n<ng-template #viewMode>\r\n  <div class=\"read-only-text\" [innerHTML]=\"value\">\r\n  </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;width:100%}.editable-text{min-height:120px;cursor:text;width:100%}.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}.tool{background:none;border:none;padding:5px 8px;cursor:pointer;display:flex;align-items:center}.tool:hover{background:#eee;border-radius:5px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}.color-picker-btn{position:relative}.color-picker-btn mat-icon{font-size:22px!important}.hidden-color-picker{position:absolute;inset:0;opacity:0;cursor:pointer}.gradient-text{background:linear-gradient(to right,var(--gradient-start),var(--gradient-end));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:9px;overflow:hidden}.colorType button{font-size:12px!important;padding:7px 9px!important;border:none;background:#fff;padding:5px 10px;cursor:pointer}.solid{border-right:1px solid #E9E9E9!important}.solidColorSelected,.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff}.gradient-picker{display:flex;gap:5px}.gradient-picker input{width:32px;height:32px;border:none;padding:0;cursor:pointer}.white-space-nowrap{white-space:nowrap}.font-size-field{width:120px;border:1px solid lightgrey;border-radius:10px}::ng-deep .font-size-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .font-size-field .mdc-notched-outline{display:none}::ng-deep .font-size-field .mat-mdc-text-field-wrapper{background:transparent!important;padding-left:8px!important;padding-right:8px!important;height:36px!important}::ng-deep .font-size-field .mat-mdc-select-value{font-size:14px;font-weight:600}::ng-deep .mat-mdc-select-panel{border-radius:12px!important}@media screen and (max-width: 475px){.toolbar{max-width:95%;flex-wrap:wrap;row-gap:10px}}\n"] }]
+                    ], 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%}.editable-text ::ng-deep p{margin-bottom:0!important}::ng-deep .ProseMirror ol,::ng-deep .ProseMirror ul{padding-left:2rem;margin-left:0;list-style-position:inside}::ng-deep .ProseMirror li{text-align:inherit;margin-bottom:5px}::ng-deep .ProseMirror li p{display:inline}.ProseMirror{outline:none;min-height:120px;padding:5px}.ProseMirror p{margin:0}.toolbar{position:absolute;left:0;top:0;display:flex;align-items:center;gap:5px;background:#fff;padding:8px 14px;border-radius:22px;z-index:100000;box-shadow:#00000029 0 1px 4px;max-width:calc(100vw - 20px);overflow-x:auto;box-sizing:border-box}.tool{background:none;border:none;padding:5px 8px;cursor:pointer;display:flex;align-items:center}.tool:hover{background:#eee;border-radius:5px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}.color-picker-btn{position:relative}.color-picker-btn mat-icon{font-size:22px!important}.hidden-color-picker{position:absolute;inset:0;opacity:0;cursor:pointer}.gradient-text{background:linear-gradient(to right,var(--gradient-start),var(--gradient-end));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:9px;overflow:hidden}.colorType button{font-size:12px!important;padding:7px 9px!important;border:none;background:#fff;cursor:pointer}.solid{border-right:1px solid #E9E9E9!important}.solidColorSelected,.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff}.gradient-picker{display:flex;gap:5px}.gradient-picker input{width:32px;height:32px;border:none;padding:0;cursor:pointer}.white-space-nowrap{white-space:nowrap}.font-size-field{width:120px;border:1px solid lightgrey;border-radius:10px}::ng-deep .font-size-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .font-size-field .mdc-notched-outline{display:none}::ng-deep .font-size-field .mat-mdc-text-field-wrapper{background:transparent!important;padding-left:8px!important;padding-right:8px!important;height:36px!important}::ng-deep .font-size-field .mat-mdc-select-value{font-size:14px;font-weight:600}::ng-deep .mat-mdc-select-panel{border-radius:12px!important}@media screen and (max-width: 475px){.toolbar{max-width:95%;flex-wrap:wrap;row-gap:10px}}@media screen and (max-width: 768px){.toolbar{width:max-content;max-width:calc(100vw - 20px);flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
@@ -14397,7 +14393,7 @@ class TestimonialFullwidthComponent extends BaseSection {
         return brightness < 128; // true = dark
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestimonialFullwidthComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialFullwidthComponent, isStandalone: true, selector: "simpo-testimonial-fullwidth", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoBorder]=\"style?.border\">\r\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n                    data-bs-keyboard=\"false\">\r\n                    <!-- data-bs-ride=\"carousel\" -->\r\n                    <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n                        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n                            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n                        </li>\r\n                    </ol>\r\n                    <div class=\"carousel-inner content-side overflow-visible\">\r\n                        <div class=\"single_card carousel-item\"\r\n                            *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n                            <!-- this is testimonial cards start-->\r\n                            <div class=\"main-section\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'flex-lg-row-reverse' : style?.positionLayout?.value === 'left' , 'flex-lg-row' : style?.positionLayout?.value === 'right'}\">\r\n                                <div class=\"left\"\r\n                                    [ngClass]=\"{'setHeight' : screenWidth > 475 , 'mb-1': screenWidth <= 475}\">\r\n                                    <div class=\"heading\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                    <div class=\"subtext\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"right\">\r\n                                    <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.image?.url\" class=\"person-img\"\r\n                                            [class]=\"data?.id+(item?.image?.id || '')\" [id]=\"data?.id\"\r\n                                            [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\" *ngIf=\"item?.image?.url\">\r\n                                        <img class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\"\r\n                                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/753282c1776171503712178724315_3e307710-5dd9-4f94-a34b-c4971fd2d26b.jpg\"\r\n                                            *ngIf=\"!item?.image?.url\">\r\n                                        <div class=\"person-details\">\r\n                                            <div style=\"z-index: 100;\">\r\n                                                <!-- <div class=\"person-name\"\r\n                                                  [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                                <!-- <div class=\"person-type\"\r\n                                                  [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n                                                  [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- this is testimonial cards start-->\r\n                    </div>\r\n                    <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Previous</span>\r\n                    </a>\r\n                    <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Next</span>\r\n                    </a>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5  0 0 1 0 .708l-6 6a.5.5 0 0  1-.708-.708L10.293 8 4.646 2.354a.5.5  0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialFullwidthComponent, isStandalone: true, selector: "simpo-testimonial-fullwidth", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoBorder]=\"style?.border\">\r\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n                    data-bs-keyboard=\"false\">\r\n                    <!-- data-bs-ride=\"carousel\" -->\r\n                    <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n                        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n                            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n                        </li>\r\n                    </ol>\r\n                    <div class=\"carousel-inner content-side overflow-visible\">\r\n                        <div class=\"single_card carousel-item\"\r\n                            *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n                            <!-- this is testimonial cards start-->\r\n                            <div class=\"main-section\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'flex-lg-row-reverse' : style?.positionLayout?.value === 'left' , 'flex-lg-row' : style?.positionLayout?.value === 'right'}\">\r\n                                <div class=\"left\"\r\n                                    [ngClass]=\"{'setHeight' : screenWidth > 475 , 'mb-1': screenWidth <= 475}\">\r\n                                    <div class=\"heading\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                    <div class=\"subtext\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"right\">\r\n                                    <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.image?.url\" class=\"person-img\"\r\n                                            [class]=\"data?.id+(item?.image?.id || '')\" [id]=\"data?.id\"\r\n                                            [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\" *ngIf=\"item?.image?.url\">\r\n                                        <img class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\"\r\n                                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/753282c1776171503712178724315_3e307710-5dd9-4f94-a34b-c4971fd2d26b.jpg\"\r\n                                            *ngIf=\"!item?.image?.url\">\r\n                                        <div class=\"person-details\">\r\n                                            <div style=\"z-index: 100;\">\r\n                                                <!-- <div class=\"person-name\"\r\n                                                  [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                                <!-- <div class=\"person-type\"\r\n                                                  [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n                                                  [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- this is testimonial cards start-->\r\n                    </div>\r\n                    <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Previous</span>\r\n                    </a>\r\n                    <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Next</span>\r\n                    </a>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5  0 0 1 0 .708l-6 6a.5.5 0 0  1-.708-.708L10.293 8 4.646 2.354a.5.5  0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
@@ -14431,7 +14427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ImageEditorDirective,
                         ObjectPositionDirective,
                         SpacingHorizontalDirective
-                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoBorder]=\"style?.border\">\r\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n                    data-bs-keyboard=\"false\">\r\n                    <!-- data-bs-ride=\"carousel\" -->\r\n                    <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n                        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n                            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n                        </li>\r\n                    </ol>\r\n                    <div class=\"carousel-inner content-side overflow-visible\">\r\n                        <div class=\"single_card carousel-item\"\r\n                            *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n                            <!-- this is testimonial cards start-->\r\n                            <div class=\"main-section\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'flex-lg-row-reverse' : style?.positionLayout?.value === 'left' , 'flex-lg-row' : style?.positionLayout?.value === 'right'}\">\r\n                                <div class=\"left\"\r\n                                    [ngClass]=\"{'setHeight' : screenWidth > 475 , 'mb-1': screenWidth <= 475}\">\r\n                                    <div class=\"heading\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                    <div class=\"subtext\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"right\">\r\n                                    <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.image?.url\" class=\"person-img\"\r\n                                            [class]=\"data?.id+(item?.image?.id || '')\" [id]=\"data?.id\"\r\n                                            [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\" *ngIf=\"item?.image?.url\">\r\n                                        <img class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\"\r\n                                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/753282c1776171503712178724315_3e307710-5dd9-4f94-a34b-c4971fd2d26b.jpg\"\r\n                                            *ngIf=\"!item?.image?.url\">\r\n                                        <div class=\"person-details\">\r\n                                            <div style=\"z-index: 100;\">\r\n                                                <!-- <div class=\"person-name\"\r\n                                                  [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                                <!-- <div class=\"person-type\"\r\n                                                  [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n                                                  [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- this is testimonial cards start-->\r\n                    </div>\r\n                    <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Previous</span>\r\n                    </a>\r\n                    <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Next</span>\r\n                    </a>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5  0 0 1 0 .708l-6 6a.5.5 0 0  1-.708-.708L10.293 8 4.646 2.354a.5.5  0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"] }]
+                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoBorder]=\"style?.border\">\r\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n                    data-bs-keyboard=\"false\">\r\n                    <!-- data-bs-ride=\"carousel\" -->\r\n                    <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n                        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n                            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n                        </li>\r\n                    </ol>\r\n                    <div class=\"carousel-inner content-side overflow-visible\">\r\n                        <div class=\"single_card carousel-item\"\r\n                            *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n                            <!-- this is testimonial cards start-->\r\n                            <div class=\"main-section\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'flex-lg-row-reverse' : style?.positionLayout?.value === 'left' , 'flex-lg-row' : style?.positionLayout?.value === 'right'}\">\r\n                                <div class=\"left\"\r\n                                    [ngClass]=\"{'setHeight' : screenWidth > 475 , 'mb-1': screenWidth <= 475}\">\r\n                                    <div class=\"heading\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                    <div class=\"subtext\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"right\">\r\n                                    <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.image?.url\" class=\"person-img\"\r\n                                            [class]=\"data?.id+(item?.image?.id || '')\" [id]=\"data?.id\"\r\n                                            [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\" *ngIf=\"item?.image?.url\">\r\n                                        <img class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\"\r\n                                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/753282c1776171503712178724315_3e307710-5dd9-4f94-a34b-c4971fd2d26b.jpg\"\r\n                                            *ngIf=\"!item?.image?.url\">\r\n                                        <div class=\"person-details\">\r\n                                            <div style=\"z-index: 100;\">\r\n                                                <!-- <div class=\"person-name\"\r\n                                                  [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                                <!-- <div class=\"person-type\"\r\n                                                  [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n                                                  [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- this is testimonial cards start-->\r\n                    </div>\r\n                    <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Previous</span>\r\n                    </a>\r\n                    <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Next</span>\r\n                    </a>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5  0 0 1 0 .708l-6 6a.5.5 0 0  1-.708-.708L10.293 8 4.646 2.354a.5.5  0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{