simpo-component-library 3.6.472 → 3.6.473

package/fesm2022/simpo-component-library.mjs

@@ -1761,10 +1761,44 @@ class TextEditorComponent {
         if (command === 'formatBlock')
             this.toolbarData.selectedHeading = value;
     }
+    setStyleWithCSS(enable) {
+        try {
+            document.execCommand('styleWithCSS', false, enable ? 'true' : 'false');
+        }
+        catch { /* some engines ignore */ }
+    }
+    // 2) Map UI sizes -> legacy steps (1..7) used by 'fontSize'
+    toLegacyFontStep(cssSize) {
+        const map = {
+            '': 3,
+            'clamp(0.75rem, 2vw, 1rem)': 2,
+            'clamp(0.75rem, 2vw, 1.25rem)': 3,
+            'clamp(1rem, 3vw, 1.5rem)': 4,
+            'clamp(1.25rem, 4vw, 2rem)': 5,
+            'clamp(2rem, 5vw, 3rem)': 6,
+            'clamp(3.1rem, 7vw, 4.5rem)': 7
+        };
+        return String(map.hasOwnProperty(cssSize) ? map[cssSize] : 3);
+    }
+    // 3) Optional normalization: convert any <font size="..."> produced by execCommand to <span style="font-size: cssSize">
+    normalizeFontSizeToCss(cssSize) {
+        const container = this.editor?.nativeElement;
+        if (!container)
+            return;
+        const fonts = container.querySelectorAll('font[size]');
+        fonts.forEach((fontEl) => {
+            const span = document.createElement('span');
+            if (cssSize)
+                span.style.fontSize = cssSize;
+            while (fontEl.firstChild)
+                span.appendChild(fontEl.firstChild);
+            fontEl.parentNode?.replaceChild(span, fontEl);
+        });
+    }
     changeFontSize(event) {
         if (!isPlatformBrowser(this.platformId))
             return;
-        const size = event.target.value;
+        const cssSize = event.target.value;
         const selection = window.getSelection();
         if (!selection || selection.rangeCount === 0)
             return;
@@ -1772,23 +1806,15 @@ class TextEditorComponent {
         if (range.collapsed)
             return;
         this.ngZone.runOutsideAngular(() => {
-            // Extract the selected content
-            const selectedContent = range.extractContents();
-            // Create a <span> to wrap the selection with desired font size
-            const span = document.createElement('span');
-            span.style.fontSize = size;
-            span.appendChild(selectedContent);
-            // Insert the styled span back into the range
-            range.insertNode(span);
-            // Reset the selection to the newly inserted content
-            selection.removeAllRanges();
-            const newRange = document.createRange();
-            newRange.selectNodeContents(span);
-            selection.addRange(newRange);
-            // Emit new value asynchronously to nicely sync with Angular's change detection
+            // Ask engine to style with CSS where possible (string 'true'/'false')
+            this.setStyleWithCSS(true);
+            // Apply legacy step, then normalize to exact CSS size
+            const step = this.toLegacyFontStep(cssSize);
+            document.execCommand('fontSize', false, step);
+            this.normalizeFontSizeToCss(cssSize);
             setTimeout(() => {
                 this.ngZone.run(() => {
-                    this.toolbarData.selectedSize = size;
+                    this.toolbarData.selectedSize = cssSize;
                     this.valueChange.emit(this.editor.nativeElement.innerHTML);
                 });
             }, 0);
@@ -1801,24 +1827,16 @@ class TextEditorComponent {
         const selection = window.getSelection();
         if (!selection || selection.rangeCount === 0)
             return;
-        const range = selection.getRangeAt(0);
-        if (range.collapsed)
+        if (selection.getRangeAt(0).collapsed)
             return;
         this.ngZone.runOutsideAngular(() => {
-            // DOM mutation and selection restoration logic here, e.g.:
-            // Extract selection
-            const selectedContent = range.extractContents();
-            // Remove old gradient spans as needed (same logic)
-            const span = document.createElement('span');
-            span.style.color = color;
-            span.appendChild(selectedContent);
-            range.insertNode(span);
-            // Reset selection on new span
-            selection.removeAllRanges();
-            const newRange = document.createRange();
-            newRange.selectNodeContents(span);
-            selection.addRange(newRange);
-            // Emit new value with a slight delay to avoid change detection clash
+            // Prefer CSS styling where supported
+            this.setStyleWithCSS(true); // string 'true'/'false' required by execCommand typings [4]
+            // Optional: clear any gradient wrappers in selection so the color shows
+            // (gradient styles use -webkit-text-fill-color: transparent)
+            // this.clearGradientInSelection(); // Uncomment if gradients were used before
+            // Apply solid color to the selection
+            document.execCommand('foreColor', false, color); // sets text color without inserting a span [1]
             setTimeout(() => {
                 this.ngZone.run(() => {
                     this.toolbarData.selectedColor = color;
@@ -1828,7 +1846,7 @@ class TextEditorComponent {
         });
     }
     updateText(event) {
-        // console.log(this.editor.nativeElement.innerHTML)
+        console.log(this.editor.nativeElement.innerHTML);
         this.valueChange.emit(this.editor.nativeElement.innerHTML);
     }
     onFormatChange(event) {
@@ -1901,9 +1919,9 @@ class TextEditorComponent {
             setTimeout(() => {
                 // Save current selection fresh, after restore has settled
                 this.saveSelection();
-                // Build the gradient string
-                const gradient = `linear-gradient(to right, ${this.primaryColor} 0%, ${this.secondaryColor} 75%`;
-                // Apply the gradient styling wrapped inside the selected text
+                // Build the gradient string (fixed missing ')', and use 100% end stop)
+                const gradient = `linear-gradient(to right, ${this.primaryColor} 0%, ${this.secondaryColor} 100%)`;
+                // Apply or update the gradient styling
                 this.applyGradientToText(gradient);
                 // Restore the selection explicitly again after DOM mutation
                 this.restoreSelection();
@@ -1920,31 +1938,30 @@ class TextEditorComponent {
         if (!isPlatformBrowser(this.platformId))
             return;
         const selection = window.getSelection();
+        const root = this.editor?.nativeElement;
+        if (!root)
+            return;
+        // If a gradient span already exists in the editor, just update its background image and stop
+        const existing = root.querySelector('span[data-gradient="true"]');
+        if (existing) {
+            existing.style.backgroundImage = gradientValue;
+            return;
+        }
         if (!selection || selection.rangeCount === 0)
             return;
         const range = selection.getRangeAt(0);
         if (!range || range.collapsed)
             return;
+        // Remove previous cleanup to avoid unwrapping; we want to keep the single wrapper
         const selectedContent = range.extractContents();
-        // Clean up spans without gradient style first
-        const spans = this.editor.nativeElement.querySelectorAll('span');
-        spans.forEach((span) => {
-            if (span.style.backgroundClip === 'text' ||
-                span.style.webkitBackgroundClip === 'text') {
-                const parent = span.parentNode;
-                while (span.firstChild) {
-                    parent.insertBefore(span.firstChild, span);
-                }
-                parent.removeChild(span);
-            }
-        });
         const span = document.createElement('span');
-        span.style['background-image'] = gradientValue;
+        span.setAttribute('data-gradient', 'true'); // mark for future updates
+        span.style.backgroundImage = gradientValue;
         span.style.backgroundClip = 'text';
         span.style.webkitBackgroundClip = 'text';
         span.style.color = 'transparent';
         span.style.webkitTextFillColor = 'transparent';
-        span.style.inlineSize = 'block';
+        span.style.display = 'inline-block'; // fix from inlineSize='block'
         span.appendChild(selectedContent);
         range.insertNode(span);
         selection.removeAllRanges();
@@ -2004,7 +2021,7 @@ class TextEditorComponent {
         return this.value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, deps: [{ token: ElementServiceService }, { token: PLATFORM_ID }, { token: i0.NgZone }], 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" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true }, { propertyName: "colorPicker", first: true, predicate: ["colorPicker"], descendants: true }, { propertyName: "parentElement", first: true, predicate: ["parentElement"], descendants: true }, { propertyName: "suggestion", first: true, predicate: ["suggestion"], descendants: true }], ngImport: i0, template: "<div class=\"editor-container\" [ngClass]=\"{'border': editable}\" #parentElement\n  [class.d-none]=\"!editable && getText() == ''\">\n  <div [contenteditable]=\"editable\" [(ngModel)]=\"value\" class=\"editable-text\" (mouseup)=\"showToolbar($event)\" #editor\n    (ngModelChange)=\"updateText($event)\" (mousedown)=\"hideToolbar($event)\" (paste)=\"onPaste($event)\">\n  </div>\n\n  <div class=\"toolbar\" *ngIf=\"editable && show\" [ngStyle]=\"{'top.px': toolbarY}\"\n    [style.right]=\"rightZero ? '0px' : 'auto'\" [style.left]=\"!rightZero ? '0px' : 'auto'\" #toolbar>\n    <!-- <select class=\"tool\" (change)=\"onFormatChange($event)\" [(ngModel)]=\"toolbarData.selectedHeading\">\n      <option value=\"H1\">Heading1</option>\n      <option value=\"H2\">Heading2</option>\n      <option value=\"H3\">Heading3</option>\n      <option value=\"div\">Text</option>\n    </select> -->\n\n    <button class=\"tool\" (click)=\"formatText('bold')\" [ngClass]=\"{'selectedTool': toolbarData.isBold}\"><mat-icon>\n        format_bold</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon>\n        format_italic</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('underline')\"\n      [ngClass]=\"{'selectedTool': toolbarData.isUnderlined}\"><mat-icon> format_underlined</mat-icon></button>\n\n      <select class=\"tool\" (change)=\"changeFontSize($event)\" [(ngModel)]=\"toolbarData.selectedSize\">\n        <option value=\"\" selected>Default</option>\n        <option value=\"clamp(0.75rem, 2vw, 1rem)\">Small</option>\n        <option value=\"clamp(0.75rem, 2vw, 1.25rem)\">Medium</option>\n        <option value=\"clamp(1rem, 3vw, 1.5rem)\">Semi Large</option>\n        <option value=\"clamp(1.25rem, 4vw, 2rem)\">Large</option>\n        <option value=\"clamp(2rem, 5vw, 3rem)\">Extra Large</option>\n        <option value=\"clamp(3.1rem, 7vw, 4.5rem)\">Huge</option>\n      </select>\n\n    <button class=\"tool\" (click)=\"formatText('insertOrderedList')\"\n      [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\"\n      [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon>\n        format_list_bulleted</mat-icon></button>\n\n    <button class=\"tool\" (click)=\"formatText('justifyLeft')\"\n      [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon>\n        format_align_left</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('justifyCenter')\"\n      [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon>\n        format_align_center</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('justifyRight')\"\n      [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon>\n        format_align_right</mat-icon></button>\n\n    <div class=\"colorType\">\n      <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\"\n        (click)=\"selectedColorType = 'SOLID'\">Solid</button>\n      <button class=\"gradient\" [ngClass]=\"{'gradientColorSelected': selectedColorType === 'GRADIENT'}\"\n        (click)=\"selectedColorType = 'GRADIENT'\">Gradient</button>\n    </div>\n\n    <button class=\"tool color-picker-btn\" (click)=\"openColorPicker()\" *ngIf=\"selectedColorType === 'SOLID'\">\n      <mat-icon>format_color_text</mat-icon>\n      <input type=\"color\" #colorPicker class=\"hidden-color-picker\" (input)=\"changeColor($event)\"\n        [(ngModel)]=\"toolbarData.selectedColor\">\n    </button>\n\n    <div class=\"colorType\" *ngIf=\"selectedColorType === 'GRADIENT'\">\n      <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); primaryColorPicker.click()\">\n        <mat-icon [style.color]=\"primaryColor\">format_color_text</mat-icon>\n        <input type=\"color\" #primaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\n          [(ngModel)]=\"primaryColor\">\n      </button>\n      <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); secondaryColorPicker.click()\">\n        <mat-icon [style.color]=\"secondaryColor\">format_color_text</mat-icon>\n        <input type=\"color\" #secondaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\n          [(ngModel)]=\"secondaryColor\">\n      </button>\n    </div>\n  </div>\n\n  <div class=\"suggestion-box\" [ngStyle]=\"{'top.px': suggestionY}\" [style.right]=\"rightZero ? '0px' : 'auto'\"\n    [style.left]=\"!rightZero ? '0px' : 'auto'\" *ngIf=\"editable && label && showSuggestion\" #suggestion>\n    <div class=\"suggestion\" (click)=\"regenerateText()\">\n      <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/887493c1742273970151Frame%201244831740.png\"\n        alt=\"\">\n      <div>\n        <p class=\"name\">Regenerate Text</p>\n        <p class=\"desc\">Get a fresh variation of a current text</p>\n      </div>\n    </div>\n  </div>\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;display:inline-block;overflow:visible;width:100%}.editor-container div{outline:none}.editable-text{padding:4px;cursor:text}.toolbar{position:absolute;background:#fff;box-shadow:0 2px 5px #0003;display:flex;gap:5px;align-items:center;z-index:100000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:22px}.toolbar:hover{border:1px solid #ccc}.toolbar button{background:none;border:none;padding:5px 8px;cursor:pointer;font-weight:700;display:flex;align-items:center}.toolbar button:hover{background:#ddd}.toolbar select{padding:3px;border:none;outline:none;font-size:14px;font-weight:600;cursor:pointer}.toolbar input[type=color]{border:none;width:30px;height:30px;padding:0;cursor:pointer}.color-picker-btn{position:relative;background:none;border:none;cursor:pointer;padding:5px}.hidden-color-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}.border,.border:hover{border:1px solid #E9E9E9!important;border-radius:8px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}p{margin-bottom:0rem!important}.suggestion-box{position:absolute;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #0003;z-index:10000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:10px}.suggestion{display:flex;gap:10px;width:307px;align-items:center;cursor:pointer}.suggestion img{border-radius:5px;width:32px;height:32px;background:#faf1fc;padding:3px}.suggestion .name{color:#000;font-family:var(--primary-font-family)}.suggestion .desc{color:#000;font-size:12px;color:#918585;font-family:var(--primary-font-family)}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:5px;height:35px}.colorType .solid{border-right:1px solid #E9E9E9;font-size:14px!important;font-family:Mulish}.colorType .gradient{font-size:14px!important;font-family:Mulish}.solidColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-left-radius:5px;border-bottom-left-radius:5px}.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-right-radius:5px;border-bottom-right-radius:5px}@media screen and (max-width: 475px){.toolbar{max-width:100%;flex-wrap:wrap;row-gap:15px}.tool{width:max-content!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "directive", type: ContenteditableValueAccessor, selector: "[contenteditable][ngModel]", inputs: ["contenteditable"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    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" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true }, { propertyName: "colorPicker", first: true, predicate: ["colorPicker"], descendants: true }, { propertyName: "parentElement", first: true, predicate: ["parentElement"], descendants: true }, { propertyName: "suggestion", first: true, predicate: ["suggestion"], descendants: true }], ngImport: i0, template: "<div class=\"editor-container\" [ngClass]=\"{'border': editable}\" #parentElement\n  [class.d-none]=\"!editable && getText() == ''\">\n  <div [contenteditable]=\"editable\" [(ngModel)]=\"value\" class=\"editable-text\" (mouseup)=\"showToolbar($event)\" #editor\n    (ngModelChange)=\"updateText($event)\" (mousedown)=\"hideToolbar($event)\" (paste)=\"onPaste($event)\">\n  </div>\n\n  <div class=\"toolbar\" *ngIf=\"editable && show\" [ngStyle]=\"{'top.px': toolbarY}\"\n    [style.right]=\"rightZero ? '0px' : 'auto'\" [style.left]=\"!rightZero ? '0px' : 'auto'\" #toolbar>\n    <!-- <select class=\"tool\" (change)=\"onFormatChange($event)\" [(ngModel)]=\"toolbarData.selectedHeading\">\n      <option value=\"H1\">Heading1</option>\n      <option value=\"H2\">Heading2</option>\n      <option value=\"H3\">Heading3</option>\n      <option value=\"div\">Text</option>\n    </select> -->\n\n    <button class=\"tool\" (click)=\"formatText('bold')\" [ngClass]=\"{'selectedTool': toolbarData.isBold}\"><mat-icon>\n        format_bold</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon>\n        format_italic</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('underline')\"\n      [ngClass]=\"{'selectedTool': toolbarData.isUnderlined}\"><mat-icon> format_underlined</mat-icon></button>\n\n    <select class=\"tool\" (change)=\"changeFontSize($event)\" [(ngModel)]=\"toolbarData.selectedSize\">\n      <option value=\"\" selected>Default</option>\n      <option value=\"clamp(0.75rem, 2vw, 1rem)\">Small</option>\n      <option value=\"clamp(0.75rem, 2vw, 1.25rem)\">Medium</option>\n      <option value=\"clamp(1rem, 3vw, 1.5rem)\">Semi Large</option>\n      <option value=\"clamp(1.25rem, 4vw, 2rem)\">Large</option>\n      <option value=\"clamp(2rem, 5vw, 3rem)\">Extra Large</option>\n      <option value=\"clamp(3.1rem, 7vw, 4.5rem)\">Huge</option>\n    </select>\n\n    <button class=\"tool\" (click)=\"formatText('insertOrderedList')\"\n      [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\"\n      [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon>\n        format_list_bulleted</mat-icon></button>\n\n    <button class=\"tool\" (click)=\"formatText('justifyLeft')\"\n      [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon>\n        format_align_left</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('justifyCenter')\"\n      [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon>\n        format_align_center</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('justifyRight')\"\n      [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon>\n        format_align_right</mat-icon></button>\n\n    <div class=\"colorType\">\n      <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\"\n        (click)=\"selectedColorType = 'SOLID'\">Solid</button>\n      <button class=\"gradient\" [ngClass]=\"{'gradientColorSelected': selectedColorType === 'GRADIENT'}\"\n        (click)=\"selectedColorType = 'GRADIENT'\">Gradient</button>\n    </div>\n\n    <button class=\"tool color-picker-btn\" (click)=\"openColorPicker()\" *ngIf=\"selectedColorType === 'SOLID'\">\n      <mat-icon>format_color_text</mat-icon>\n      <input type=\"color\" #colorPicker class=\"hidden-color-picker\" (input)=\"changeColor($event)\"\n        [(ngModel)]=\"toolbarData.selectedColor\">\n    </button>\n\n    <div class=\"colorType\" *ngIf=\"selectedColorType === 'GRADIENT'\">\n      <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); primaryColorPicker.click()\">\n        <mat-icon [style.color]=\"primaryColor\">format_color_text</mat-icon>\n        <input type=\"color\" #primaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\n          [(ngModel)]=\"primaryColor\">\n      </button>\n      <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); secondaryColorPicker.click()\">\n        <mat-icon [style.color]=\"secondaryColor\">format_color_text</mat-icon>\n        <input type=\"color\" #secondaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\n          [(ngModel)]=\"secondaryColor\">\n      </button>\n    </div>\n  </div>\n\n  <div class=\"suggestion-box\" [ngStyle]=\"{'top.px': suggestionY}\" [style.right]=\"rightZero ? '0px' : 'auto'\"\n    [style.left]=\"!rightZero ? '0px' : 'auto'\" *ngIf=\"editable && label && showSuggestion\" #suggestion>\n    <div class=\"suggestion\" (click)=\"regenerateText()\">\n      <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/887493c1742273970151Frame%201244831740.png\"\n        alt=\"\">\n      <div>\n        <p class=\"name\">Regenerate Text</p>\n        <p class=\"desc\">Get a fresh variation of a current text</p>\n      </div>\n    </div>\n  </div>\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;display:inline-block;overflow:visible;width:100%}.editor-container div{outline:none}.editable-text{padding:4px;cursor:text}.toolbar{position:absolute;background:#fff;box-shadow:0 2px 5px #0003;display:flex;gap:5px;align-items:center;z-index:100000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:22px}.toolbar:hover{border:1px solid #ccc}.toolbar button{background:none;border:none;padding:5px 8px;cursor:pointer;font-weight:700;display:flex;align-items:center}.toolbar button:hover{background:#ddd}.toolbar select{padding:3px;border:none;outline:none;font-size:14px;font-weight:600;cursor:pointer}.toolbar input[type=color]{border:none;width:30px;height:30px;padding:0;cursor:pointer}.color-picker-btn{position:relative;background:none;border:none;cursor:pointer;padding:5px}.hidden-color-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}.border,.border:hover{border:1px solid #E9E9E9!important;border-radius:8px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}p{margin-bottom:0rem!important}.suggestion-box{position:absolute;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #0003;z-index:10000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:10px}.suggestion{display:flex;gap:10px;width:307px;align-items:center;cursor:pointer}.suggestion img{border-radius:5px;width:32px;height:32px;background:#faf1fc;padding:3px}.suggestion .name{color:#000;font-family:var(--primary-font-family)}.suggestion .desc{color:#000;font-size:12px;color:#918585;font-family:var(--primary-font-family)}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:5px;height:35px}.colorType .solid{border-right:1px solid #E9E9E9;font-size:14px!important;font-family:Mulish}.colorType .gradient{font-size:14px!important;font-family:Mulish}.solidColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-left-radius:5px;border-bottom-left-radius:5px}.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-right-radius:5px;border-bottom-right-radius:5px}@media screen and (max-width: 475px){.toolbar{max-width:100%;flex-wrap:wrap;row-gap:15px}.tool{width:max-content!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "directive", type: ContenteditableValueAccessor, selector: "[contenteditable][ngModel]", inputs: ["contenteditable"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, decorators: [{
             type: Component,
@@ -2013,7 +2030,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FormsModule,
                         ContenteditableValueAccessor,
                         MatIconModule
-                    ], template: "<div class=\"editor-container\" [ngClass]=\"{'border': editable}\" #parentElement\n  [class.d-none]=\"!editable && getText() == ''\">\n  <div [contenteditable]=\"editable\" [(ngModel)]=\"value\" class=\"editable-text\" (mouseup)=\"showToolbar($event)\" #editor\n    (ngModelChange)=\"updateText($event)\" (mousedown)=\"hideToolbar($event)\" (paste)=\"onPaste($event)\">\n  </div>\n\n  <div class=\"toolbar\" *ngIf=\"editable && show\" [ngStyle]=\"{'top.px': toolbarY}\"\n    [style.right]=\"rightZero ? '0px' : 'auto'\" [style.left]=\"!rightZero ? '0px' : 'auto'\" #toolbar>\n    <!-- <select class=\"tool\" (change)=\"onFormatChange($event)\" [(ngModel)]=\"toolbarData.selectedHeading\">\n      <option value=\"H1\">Heading1</option>\n      <option value=\"H2\">Heading2</option>\n      <option value=\"H3\">Heading3</option>\n      <option value=\"div\">Text</option>\n    </select> -->\n\n    <button class=\"tool\" (click)=\"formatText('bold')\" [ngClass]=\"{'selectedTool': toolbarData.isBold}\"><mat-icon>\n        format_bold</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon>\n        format_italic</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('underline')\"\n      [ngClass]=\"{'selectedTool': toolbarData.isUnderlined}\"><mat-icon> format_underlined</mat-icon></button>\n\n      <select class=\"tool\" (change)=\"changeFontSize($event)\" [(ngModel)]=\"toolbarData.selectedSize\">\n        <option value=\"\" selected>Default</option>\n        <option value=\"clamp(0.75rem, 2vw, 1rem)\">Small</option>\n        <option value=\"clamp(0.75rem, 2vw, 1.25rem)\">Medium</option>\n        <option value=\"clamp(1rem, 3vw, 1.5rem)\">Semi Large</option>\n        <option value=\"clamp(1.25rem, 4vw, 2rem)\">Large</option>\n        <option value=\"clamp(2rem, 5vw, 3rem)\">Extra Large</option>\n        <option value=\"clamp(3.1rem, 7vw, 4.5rem)\">Huge</option>\n      </select>\n\n    <button class=\"tool\" (click)=\"formatText('insertOrderedList')\"\n      [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\"\n      [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon>\n        format_list_bulleted</mat-icon></button>\n\n    <button class=\"tool\" (click)=\"formatText('justifyLeft')\"\n      [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon>\n        format_align_left</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('justifyCenter')\"\n      [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon>\n        format_align_center</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('justifyRight')\"\n      [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon>\n        format_align_right</mat-icon></button>\n\n    <div class=\"colorType\">\n      <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\"\n        (click)=\"selectedColorType = 'SOLID'\">Solid</button>\n      <button class=\"gradient\" [ngClass]=\"{'gradientColorSelected': selectedColorType === 'GRADIENT'}\"\n        (click)=\"selectedColorType = 'GRADIENT'\">Gradient</button>\n    </div>\n\n    <button class=\"tool color-picker-btn\" (click)=\"openColorPicker()\" *ngIf=\"selectedColorType === 'SOLID'\">\n      <mat-icon>format_color_text</mat-icon>\n      <input type=\"color\" #colorPicker class=\"hidden-color-picker\" (input)=\"changeColor($event)\"\n        [(ngModel)]=\"toolbarData.selectedColor\">\n    </button>\n\n    <div class=\"colorType\" *ngIf=\"selectedColorType === 'GRADIENT'\">\n      <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); primaryColorPicker.click()\">\n        <mat-icon [style.color]=\"primaryColor\">format_color_text</mat-icon>\n        <input type=\"color\" #primaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\n          [(ngModel)]=\"primaryColor\">\n      </button>\n      <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); secondaryColorPicker.click()\">\n        <mat-icon [style.color]=\"secondaryColor\">format_color_text</mat-icon>\n        <input type=\"color\" #secondaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\n          [(ngModel)]=\"secondaryColor\">\n      </button>\n    </div>\n  </div>\n\n  <div class=\"suggestion-box\" [ngStyle]=\"{'top.px': suggestionY}\" [style.right]=\"rightZero ? '0px' : 'auto'\"\n    [style.left]=\"!rightZero ? '0px' : 'auto'\" *ngIf=\"editable && label && showSuggestion\" #suggestion>\n    <div class=\"suggestion\" (click)=\"regenerateText()\">\n      <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/887493c1742273970151Frame%201244831740.png\"\n        alt=\"\">\n      <div>\n        <p class=\"name\">Regenerate Text</p>\n        <p class=\"desc\">Get a fresh variation of a current text</p>\n      </div>\n    </div>\n  </div>\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;display:inline-block;overflow:visible;width:100%}.editor-container div{outline:none}.editable-text{padding:4px;cursor:text}.toolbar{position:absolute;background:#fff;box-shadow:0 2px 5px #0003;display:flex;gap:5px;align-items:center;z-index:100000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:22px}.toolbar:hover{border:1px solid #ccc}.toolbar button{background:none;border:none;padding:5px 8px;cursor:pointer;font-weight:700;display:flex;align-items:center}.toolbar button:hover{background:#ddd}.toolbar select{padding:3px;border:none;outline:none;font-size:14px;font-weight:600;cursor:pointer}.toolbar input[type=color]{border:none;width:30px;height:30px;padding:0;cursor:pointer}.color-picker-btn{position:relative;background:none;border:none;cursor:pointer;padding:5px}.hidden-color-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}.border,.border:hover{border:1px solid #E9E9E9!important;border-radius:8px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}p{margin-bottom:0rem!important}.suggestion-box{position:absolute;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #0003;z-index:10000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:10px}.suggestion{display:flex;gap:10px;width:307px;align-items:center;cursor:pointer}.suggestion img{border-radius:5px;width:32px;height:32px;background:#faf1fc;padding:3px}.suggestion .name{color:#000;font-family:var(--primary-font-family)}.suggestion .desc{color:#000;font-size:12px;color:#918585;font-family:var(--primary-font-family)}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:5px;height:35px}.colorType .solid{border-right:1px solid #E9E9E9;font-size:14px!important;font-family:Mulish}.colorType .gradient{font-size:14px!important;font-family:Mulish}.solidColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-left-radius:5px;border-bottom-left-radius:5px}.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-right-radius:5px;border-bottom-right-radius:5px}@media screen and (max-width: 475px){.toolbar{max-width:100%;flex-wrap:wrap;row-gap:15px}.tool{width:max-content!important}}\n"] }]
+                    ], template: "<div class=\"editor-container\" [ngClass]=\"{'border': editable}\" #parentElement\n  [class.d-none]=\"!editable && getText() == ''\">\n  <div [contenteditable]=\"editable\" [(ngModel)]=\"value\" class=\"editable-text\" (mouseup)=\"showToolbar($event)\" #editor\n    (ngModelChange)=\"updateText($event)\" (mousedown)=\"hideToolbar($event)\" (paste)=\"onPaste($event)\">\n  </div>\n\n  <div class=\"toolbar\" *ngIf=\"editable && show\" [ngStyle]=\"{'top.px': toolbarY}\"\n    [style.right]=\"rightZero ? '0px' : 'auto'\" [style.left]=\"!rightZero ? '0px' : 'auto'\" #toolbar>\n    <!-- <select class=\"tool\" (change)=\"onFormatChange($event)\" [(ngModel)]=\"toolbarData.selectedHeading\">\n      <option value=\"H1\">Heading1</option>\n      <option value=\"H2\">Heading2</option>\n      <option value=\"H3\">Heading3</option>\n      <option value=\"div\">Text</option>\n    </select> -->\n\n    <button class=\"tool\" (click)=\"formatText('bold')\" [ngClass]=\"{'selectedTool': toolbarData.isBold}\"><mat-icon>\n        format_bold</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon>\n        format_italic</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('underline')\"\n      [ngClass]=\"{'selectedTool': toolbarData.isUnderlined}\"><mat-icon> format_underlined</mat-icon></button>\n\n    <select class=\"tool\" (change)=\"changeFontSize($event)\" [(ngModel)]=\"toolbarData.selectedSize\">\n      <option value=\"\" selected>Default</option>\n      <option value=\"clamp(0.75rem, 2vw, 1rem)\">Small</option>\n      <option value=\"clamp(0.75rem, 2vw, 1.25rem)\">Medium</option>\n      <option value=\"clamp(1rem, 3vw, 1.5rem)\">Semi Large</option>\n      <option value=\"clamp(1.25rem, 4vw, 2rem)\">Large</option>\n      <option value=\"clamp(2rem, 5vw, 3rem)\">Extra Large</option>\n      <option value=\"clamp(3.1rem, 7vw, 4.5rem)\">Huge</option>\n    </select>\n\n    <button class=\"tool\" (click)=\"formatText('insertOrderedList')\"\n      [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\"\n      [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon>\n        format_list_bulleted</mat-icon></button>\n\n    <button class=\"tool\" (click)=\"formatText('justifyLeft')\"\n      [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon>\n        format_align_left</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('justifyCenter')\"\n      [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon>\n        format_align_center</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('justifyRight')\"\n      [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon>\n        format_align_right</mat-icon></button>\n\n    <div class=\"colorType\">\n      <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\"\n        (click)=\"selectedColorType = 'SOLID'\">Solid</button>\n      <button class=\"gradient\" [ngClass]=\"{'gradientColorSelected': selectedColorType === 'GRADIENT'}\"\n        (click)=\"selectedColorType = 'GRADIENT'\">Gradient</button>\n    </div>\n\n    <button class=\"tool color-picker-btn\" (click)=\"openColorPicker()\" *ngIf=\"selectedColorType === 'SOLID'\">\n      <mat-icon>format_color_text</mat-icon>\n      <input type=\"color\" #colorPicker class=\"hidden-color-picker\" (input)=\"changeColor($event)\"\n        [(ngModel)]=\"toolbarData.selectedColor\">\n    </button>\n\n    <div class=\"colorType\" *ngIf=\"selectedColorType === 'GRADIENT'\">\n      <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); primaryColorPicker.click()\">\n        <mat-icon [style.color]=\"primaryColor\">format_color_text</mat-icon>\n        <input type=\"color\" #primaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\n          [(ngModel)]=\"primaryColor\">\n      </button>\n      <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); secondaryColorPicker.click()\">\n        <mat-icon [style.color]=\"secondaryColor\">format_color_text</mat-icon>\n        <input type=\"color\" #secondaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\n          [(ngModel)]=\"secondaryColor\">\n      </button>\n    </div>\n  </div>\n\n  <div class=\"suggestion-box\" [ngStyle]=\"{'top.px': suggestionY}\" [style.right]=\"rightZero ? '0px' : 'auto'\"\n    [style.left]=\"!rightZero ? '0px' : 'auto'\" *ngIf=\"editable && label && showSuggestion\" #suggestion>\n    <div class=\"suggestion\" (click)=\"regenerateText()\">\n      <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/887493c1742273970151Frame%201244831740.png\"\n        alt=\"\">\n      <div>\n        <p class=\"name\">Regenerate Text</p>\n        <p class=\"desc\">Get a fresh variation of a current text</p>\n      </div>\n    </div>\n  </div>\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;display:inline-block;overflow:visible;width:100%}.editor-container div{outline:none}.editable-text{padding:4px;cursor:text}.toolbar{position:absolute;background:#fff;box-shadow:0 2px 5px #0003;display:flex;gap:5px;align-items:center;z-index:100000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:22px}.toolbar:hover{border:1px solid #ccc}.toolbar button{background:none;border:none;padding:5px 8px;cursor:pointer;font-weight:700;display:flex;align-items:center}.toolbar button:hover{background:#ddd}.toolbar select{padding:3px;border:none;outline:none;font-size:14px;font-weight:600;cursor:pointer}.toolbar input[type=color]{border:none;width:30px;height:30px;padding:0;cursor:pointer}.color-picker-btn{position:relative;background:none;border:none;cursor:pointer;padding:5px}.hidden-color-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}.border,.border:hover{border:1px solid #E9E9E9!important;border-radius:8px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}p{margin-bottom:0rem!important}.suggestion-box{position:absolute;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #0003;z-index:10000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:10px}.suggestion{display:flex;gap:10px;width:307px;align-items:center;cursor:pointer}.suggestion img{border-radius:5px;width:32px;height:32px;background:#faf1fc;padding:3px}.suggestion .name{color:#000;font-family:var(--primary-font-family)}.suggestion .desc{color:#000;font-size:12px;color:#918585;font-family:var(--primary-font-family)}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:5px;height:35px}.colorType .solid{border-right:1px solid #E9E9E9;font-size:14px!important;font-family:Mulish}.colorType .gradient{font-size:14px!important;font-family:Mulish}.solidColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-left-radius:5px;border-bottom-left-radius:5px}.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-right-radius:5px;border-bottom-right-radius:5px}@media screen and (max-width: 475px){.toolbar{max-width:100%;flex-wrap:wrap;row-gap:15px}.tool{width:max-content!important}}\n"] }]
         }], ctorParameters: () => [{ type: ElementServiceService }, { type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -5750,9 +5767,9 @@ class ImageCarouselSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageCarouselSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageCarouselSectionComponent, isStandalone: true, selector: "simpo-image-carousel-section", inputs: { data: "data", index: "index", customClass: "customClass", nextComponentColor: "nextComponentColor", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n  [attr.style]=\"customClass\">\n  <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\n    <div *ngFor=\"let text of data?.content?.inputText\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\"\n      [ngClass]=\"{'px-0': style?.fullWidth, 'image-screen': style?.layout?.fit === 'screen' && style?.fullWidth, 'img-screen-notext': style?.layout?.fit === 'screen' && style?.fullWidth && text.value === ''}\"\n      [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoSpacing]=\"spacingLayout\">\n      <div class=\"row mlr-0 w-100\" *ngIf=\"data?.content?.inputText?.length\" [id]=\"data?.id\"\n        [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"edit || text.value\">\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n          </div>\n        </div>\n\n       <div [id]=\"'carouselExampleCaptions'+data?.id\" class=\"carousel slide\" [simpoLayout]=\"style?.layout\"\n         [ngClass]=\"{'mb-0 px-0 py-0': style?.fullWidth, 'mb-md-1 mb-sm-0 mb-lg-1': !style?.fullWidth}\">\n         <div class=\"carousel-inner\" data-bs-ride=\"carousel\">\n          <!-- data-bs-ride=\"carousel\" -->\n            <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\"\n              [class.active]=\"i === 0\">\n              <div class=\"row m-0\">\n                <div class=\"col d-flex p-0\" *ngIf=\"screenWidth >= 475\">\n                  <!-- <img loading=\"lazy\"  class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n                  <img loading=\"lazy\"\n                    [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n                    *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n                    class=\"d-block position-relative blur\"\n                    style=\"object-fit: cover !important;width: 100%;max-width: 20%; left: -20px\"\n                    [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n                    [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\" loading=\"lazy\"\n                    [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n                  <img loading=\"lazy\"\n                    [ngClass]=\"{'full-width-image': style?.fullWidth, 'not-full-width': !style?.fullWidth, 'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n                    [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\"\n                    [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\"\n                    [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\n                    loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n                  <!-- <img loading=\"lazy\"  class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n                  <img loading=\"lazy\"\n                    [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n                    *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n                    class=\"d-block position-relative blur\"\n                    style=\"object-fit: cover !important;width: 100%; max-width: 20%;right: -20px;\"\n                    [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n                    [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\" loading=\"lazy\"\n                    [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n                </div>\n                <div class=\"col d-flex p-0\" *ngIf=\"screenWidth < 475\">\n                  <img loading=\"lazy\" class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\"\n                    [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\"\n                    [simpoObjectPosition]=\"img?.image?.position\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\n                    [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n                </div>\n              </div>\n            </div>\n          </div>\n          <a class=\"carousel-control-prev\" [attr.data-bs-target]=\"'#carouselExampleCaptions'+data?.id\" role=\"button\" data-bs-slide=\"prev\">\n            <span class=\"carousel-control-prev-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n              <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_left</mat-icon>\n            </span>\n            <span class=\"sr-only\">Previous</span>\n\n          </a>\n          <a class=\"carousel-control-next\" [attr.data-bs-target]=\"'#carouselExampleCaptions'+data?.id\" role=\"button\" data-bs-slide=\"next\">\n            <span class=\"carousel-control-next-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n              <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_right</mat-icon>\n            </span>\n            <span class=\"sr-only\">Next</span>\n\n          </a>\n        </div>\n      </div>\n    </div>\n\n  </div>\n  <ng-container *ngIf=\"style?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.full-width-image{width:100%;height:70vh}.previous-icon{background:#fff;border-radius:50%}.not-full-width{width:60%}.icon{color:#000!important;font-size:40px!important}.image-height-content{height:70vh}.image-height-screen{height:calc(90vh + -0px);min-height:0px!important}.image-screen{height:calc(110vh + -0px);min-height:0px!important}.img-screen-notext{height:calc(90vh + -0px);min-height:0px!important}.btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.blur{filter:blur(5px)}@media only screen and (max-width: 475px){.previous-icon{width:100%;height:45px!important}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}.caratlane-indicator{display:flex;align-items:center;justify-content:center;background:#1e1f21b3;border-radius:18px;min-width:50px;height:32px;padding:0 16px;font-size:1rem;font-weight:600;color:#fff;margin:18px auto 0;box-shadow:0 2px 8px #151d481a;letter-spacing:1px}.caratlane-indicator .current{font-weight:700;font-size:1rem;color:#fff}.caratlane-indicator .divider,.caratlane-indicator .total{font-weight:500;color:#fff;opacity:.9;margin-left:2px}.caratlane-indicator{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#0009;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;z-index:10;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);min-width:45px;text-align:center}@media (max-width: 768px){.caratlane-indicator{bottom:15px;padding:6px 12px;font-size:12px}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"], outputs: ["valueChange"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageCarouselSectionComponent, isStandalone: true, selector: "simpo-image-carousel-section", inputs: { data: "data", index: "index", customClass: "customClass", nextComponentColor: "nextComponentColor", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n  [attr.style]=\"customClass\">\n  <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\n    <div *ngFor=\"let text of data?.content?.inputText\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\"\n      [ngClass]=\"{'px-0': style?.fullWidth, 'image-screen': style?.layout?.fit === 'screen' && style?.fullWidth, 'img-screen-notext': style?.layout?.fit === 'screen' && style?.fullWidth && text.value === ''}\"\n      [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoSpacing]=\"spacingLayout\">\n      <div class=\"row mlr-0 w-100\" *ngIf=\"data?.content?.inputText?.length\" [id]=\"data?.id\"\n        [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"edit || text.value\">\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n          </div>\n        </div>\n\n       <div [id]=\"'carouselExampleCaptions'+data?.id\" class=\"carousel slide min-height-unset\" \n         [ngClass]=\"{'mb-0 px-0 py-0': style?.fullWidth, 'mb-md-1 mb-sm-0 mb-lg-1': !style?.fullWidth}\">\n         <!-- [simpoLayout]=\"style?.layout\" -->\n         <div class=\"carousel-inner\">\n          <!-- data-bs-ride=\"carousel\" -->\n            <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\"\n              [class.active]=\"i === 0\">\n              <div class=\"row m-0\">\n                <div class=\"col d-flex p-0\" *ngIf=\"screenWidth >= 475\">\n                  <img loading=\"lazy\"\n                    [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n                    *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n                    class=\"d-block position-relative blur\"\n                    style=\"object-fit: cover !important;width: 100%;max-width: 20%; left: -20px ;position: fixed;\"\n                    [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n                    [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\" loading=\"lazy\"\n                    [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n                  <img loading=\"lazy\"\n                    [ngClass]=\"{'full-width-image': style?.fullWidth, 'not-full-width': !style?.fullWidth, 'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n                    [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\"\n                    [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\"\n                    [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\n                    loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n                  <img loading=\"lazy\"\n                    [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n                    *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n                    class=\"d-block position-relative blur\"\n                    style=\"object-fit: cover !important;width: 100%; max-width: 20%;right: -20px;\"\n                    [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n                    [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\" loading=\"lazy\"\n                    [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n                </div>\n                <div class=\"col d-flex p-0\" *ngIf=\"screenWidth < 475\">\n                  <img loading=\"lazy\" class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\"\n                    [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\"\n                    [simpoObjectPosition]=\"img?.image?.position\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\n                    [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n                </div>\n              </div>\n            </div>\n          </div>\n          <a class=\"carousel-control-prev\" [attr.data-bs-target]=\"'#carouselExampleCaptions'+data?.id\" role=\"button\" data-bs-slide=\"prev\">\n            <span class=\"carousel-control-prev-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n              <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_left</mat-icon>\n            </span>\n            <span class=\"sr-only\">Previous</span>\n\n          </a>\n          <a class=\"carousel-control-next\" [attr.data-bs-target]=\"'#carouselExampleCaptions'+data?.id\" role=\"button\" data-bs-slide=\"next\">\n            <span class=\"carousel-control-next-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n              <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_right</mat-icon>\n            </span>\n            <span class=\"sr-only\">Next</span>\n\n          </a>\n        </div>\n      </div>\n    </div>\n\n  </div>\n  <ng-container *ngIf=\"style?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.full-width-image{width:100%;height:70vh}.previous-icon{background:#fff;border-radius:50%}.not-full-width{width:60%}.icon{color:#000!important;font-size:40px!important}.image-height-content{height:70vh}.image-height-screen{height:calc(90vh + -0px);min-height:0px!important}.btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.blur{filter:blur(5px)}@media only screen and (max-width: 475px){.previous-icon{width:100%;height:45px!important}.min-height-unset{min-height:unset!important}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}.caratlane-indicator{display:flex;align-items:center;justify-content:center;background:#1e1f21b3;border-radius:18px;min-width:50px;height:32px;padding:0 16px;font-size:1rem;font-weight:600;color:#fff;margin:18px auto 0;box-shadow:0 2px 8px #151d481a;letter-spacing:1px}.caratlane-indicator .current{font-weight:700;font-size:1rem;color:#fff}.caratlane-indicator .divider,.caratlane-indicator .total{font-weight:500;color:#fff;opacity:.9;margin-left:2px}.caratlane-indicator{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#0009;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;z-index:10;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);min-width:45px;text-align:center}@media (max-width: 768px){.caratlane-indicator{bottom:15px;padding:6px 12px;font-size:12px}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"], 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: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: SpacingDirective, selector: "[simpoSpacing]", inputs: ["simpoSpacing"] }] }); }
+                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: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: SpacingDirective, selector: "[simpoSpacing]", inputs: ["simpoSpacing"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageCarouselSectionComponent, decorators: [{
             type: Component,
@@ -5776,7 +5793,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ImageEditorDirective,
                         SpacingAroundDirective,
                         SpacingDirective,
-                    ], template: "<section class=\"container-fluid\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n  [attr.style]=\"customClass\">\n  <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\n    <div *ngFor=\"let text of data?.content?.inputText\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\"\n      [ngClass]=\"{'px-0': style?.fullWidth, 'image-screen': style?.layout?.fit === 'screen' && style?.fullWidth, 'img-screen-notext': style?.layout?.fit === 'screen' && style?.fullWidth && text.value === ''}\"\n      [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoSpacing]=\"spacingLayout\">\n      <div class=\"row mlr-0 w-100\" *ngIf=\"data?.content?.inputText?.length\" [id]=\"data?.id\"\n        [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"edit || text.value\">\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n          </div>\n        </div>\n\n       <div [id]=\"'carouselExampleCaptions'+data?.id\" class=\"carousel slide\" [simpoLayout]=\"style?.layout\"\n         [ngClass]=\"{'mb-0 px-0 py-0': style?.fullWidth, 'mb-md-1 mb-sm-0 mb-lg-1': !style?.fullWidth}\">\n         <div class=\"carousel-inner\" data-bs-ride=\"carousel\">\n          <!-- data-bs-ride=\"carousel\" -->\n            <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\"\n              [class.active]=\"i === 0\">\n              <div class=\"row m-0\">\n                <div class=\"col d-flex p-0\" *ngIf=\"screenWidth >= 475\">\n                  <!-- <img loading=\"lazy\"  class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n                  <img loading=\"lazy\"\n                    [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n                    *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n                    class=\"d-block position-relative blur\"\n                    style=\"object-fit: cover !important;width: 100%;max-width: 20%; left: -20px\"\n                    [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n                    [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\" loading=\"lazy\"\n                    [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n                  <img loading=\"lazy\"\n                    [ngClass]=\"{'full-width-image': style?.fullWidth, 'not-full-width': !style?.fullWidth, 'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n                    [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\"\n                    [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\"\n                    [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\n                    loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n                  <!-- <img loading=\"lazy\"  class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n                  <img loading=\"lazy\"\n                    [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n                    *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n                    class=\"d-block position-relative blur\"\n                    style=\"object-fit: cover !important;width: 100%; max-width: 20%;right: -20px;\"\n                    [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n                    [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\" loading=\"lazy\"\n                    [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n                </div>\n                <div class=\"col d-flex p-0\" *ngIf=\"screenWidth < 475\">\n                  <img loading=\"lazy\" class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\"\n                    [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\"\n                    [simpoObjectPosition]=\"img?.image?.position\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\n                    [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n                </div>\n              </div>\n            </div>\n          </div>\n          <a class=\"carousel-control-prev\" [attr.data-bs-target]=\"'#carouselExampleCaptions'+data?.id\" role=\"button\" data-bs-slide=\"prev\">\n            <span class=\"carousel-control-prev-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n              <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_left</mat-icon>\n            </span>\n            <span class=\"sr-only\">Previous</span>\n\n          </a>\n          <a class=\"carousel-control-next\" [attr.data-bs-target]=\"'#carouselExampleCaptions'+data?.id\" role=\"button\" data-bs-slide=\"next\">\n            <span class=\"carousel-control-next-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n              <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_right</mat-icon>\n            </span>\n            <span class=\"sr-only\">Next</span>\n\n          </a>\n        </div>\n      </div>\n    </div>\n\n  </div>\n  <ng-container *ngIf=\"style?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.full-width-image{width:100%;height:70vh}.previous-icon{background:#fff;border-radius:50%}.not-full-width{width:60%}.icon{color:#000!important;font-size:40px!important}.image-height-content{height:70vh}.image-height-screen{height:calc(90vh + -0px);min-height:0px!important}.image-screen{height:calc(110vh + -0px);min-height:0px!important}.img-screen-notext{height:calc(90vh + -0px);min-height:0px!important}.btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.blur{filter:blur(5px)}@media only screen and (max-width: 475px){.previous-icon{width:100%;height:45px!important}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}.caratlane-indicator{display:flex;align-items:center;justify-content:center;background:#1e1f21b3;border-radius:18px;min-width:50px;height:32px;padding:0 16px;font-size:1rem;font-weight:600;color:#fff;margin:18px auto 0;box-shadow:0 2px 8px #151d481a;letter-spacing:1px}.caratlane-indicator .current{font-weight:700;font-size:1rem;color:#fff}.caratlane-indicator .divider,.caratlane-indicator .total{font-weight:500;color:#fff;opacity:.9;margin-left:2px}.caratlane-indicator{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#0009;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;z-index:10;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);min-width:45px;text-align:center}@media (max-width: 768px){.caratlane-indicator{bottom:15px;padding:6px 12px;font-size:12px}}\n"] }]
+                    ], template: "<section class=\"container-fluid\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n  [attr.style]=\"customClass\">\n  <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\n    <div *ngFor=\"let text of data?.content?.inputText\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\"\n      [ngClass]=\"{'px-0': style?.fullWidth, 'image-screen': style?.layout?.fit === 'screen' && style?.fullWidth, 'img-screen-notext': style?.layout?.fit === 'screen' && style?.fullWidth && text.value === ''}\"\n      [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoSpacing]=\"spacingLayout\">\n      <div class=\"row mlr-0 w-100\" *ngIf=\"data?.content?.inputText?.length\" [id]=\"data?.id\"\n        [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"edit || text.value\">\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n          </div>\n        </div>\n\n       <div [id]=\"'carouselExampleCaptions'+data?.id\" class=\"carousel slide min-height-unset\" \n         [ngClass]=\"{'mb-0 px-0 py-0': style?.fullWidth, 'mb-md-1 mb-sm-0 mb-lg-1': !style?.fullWidth}\">\n         <!-- [simpoLayout]=\"style?.layout\" -->\n         <div class=\"carousel-inner\">\n          <!-- data-bs-ride=\"carousel\" -->\n            <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\"\n              [class.active]=\"i === 0\">\n              <div class=\"row m-0\">\n                <div class=\"col d-flex p-0\" *ngIf=\"screenWidth >= 475\">\n                  <img loading=\"lazy\"\n                    [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n                    *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n                    class=\"d-block position-relative blur\"\n                    style=\"object-fit: cover !important;width: 100%;max-width: 20%; left: -20px ;position: fixed;\"\n                    [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n                    [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\" loading=\"lazy\"\n                    [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n                  <img loading=\"lazy\"\n                    [ngClass]=\"{'full-width-image': style?.fullWidth, 'not-full-width': !style?.fullWidth, 'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n                    [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\"\n                    [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\"\n                    [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\n                    loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n                  <img loading=\"lazy\"\n                    [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n                    *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n                    class=\"d-block position-relative blur\"\n                    style=\"object-fit: cover !important;width: 100%; max-width: 20%;right: -20px;\"\n                    [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n                    [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\" loading=\"lazy\"\n                    [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n                </div>\n                <div class=\"col d-flex p-0\" *ngIf=\"screenWidth < 475\">\n                  <img loading=\"lazy\" class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\"\n                    [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\"\n                    [simpoObjectPosition]=\"img?.image?.position\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\n                    [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n                </div>\n              </div>\n            </div>\n          </div>\n          <a class=\"carousel-control-prev\" [attr.data-bs-target]=\"'#carouselExampleCaptions'+data?.id\" role=\"button\" data-bs-slide=\"prev\">\n            <span class=\"carousel-control-prev-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n              <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_left</mat-icon>\n            </span>\n            <span class=\"sr-only\">Previous</span>\n\n          </a>\n          <a class=\"carousel-control-next\" [attr.data-bs-target]=\"'#carouselExampleCaptions'+data?.id\" role=\"button\" data-bs-slide=\"next\">\n            <span class=\"carousel-control-next-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n              <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_right</mat-icon>\n            </span>\n            <span class=\"sr-only\">Next</span>\n\n          </a>\n        </div>\n      </div>\n    </div>\n\n  </div>\n  <ng-container *ngIf=\"style?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.full-width-image{width:100%;height:70vh}.previous-icon{background:#fff;border-radius:50%}.not-full-width{width:60%}.icon{color:#000!important;font-size:40px!important}.image-height-content{height:70vh}.image-height-screen{height:calc(90vh + -0px);min-height:0px!important}.btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.blur{filter:blur(5px)}@media only screen and (max-width: 475px){.previous-icon{width:100%;height:45px!important}.min-height-unset{min-height:unset!important}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}.caratlane-indicator{display:flex;align-items:center;justify-content:center;background:#1e1f21b3;border-radius:18px;min-width:50px;height:32px;padding:0 16px;font-size:1rem;font-weight:600;color:#fff;margin:18px auto 0;box-shadow:0 2px 8px #151d481a;letter-spacing:1px}.caratlane-indicator .current{font-weight:700;font-size:1rem;color:#fff}.caratlane-indicator .divider,.caratlane-indicator .total{font-weight:500;color:#fff;opacity:.9;margin-left:2px}.caratlane-indicator{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#0009;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;z-index:10;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);min-width:45px;text-align:center}@media (max-width: 768px){.caratlane-indicator{bottom:15px;padding:6px 12px;font-size:12px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -11865,7 +11882,7 @@ class FeaturesSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturesSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturesSectionComponent, isStandalone: true, selector: "simpo-features-section", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" [simpoBorder]=\"styles?.border\"  [attr.style]=\"customClass\">\n  <div  #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\">\n    <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n      <div class=\"row\" *ngIf=\"screenWidth > 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <!-- <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n\n        </div>\n        <div class=\" box justify-center d-flex g-25 mt-5 mb-5\">\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\n            <div [ngClass]=\"{'tab': styles?.tabStyling == 'UNDERLINE' , 'tab1' : styles?.tabStyling == 'BOXED' , 'tab2' : styles?.tabStyling == 'NONE' }\"  [ngClass]=\"{'active': index === selectedTabIndex && styles?.tabStyling == 'UNDERLINE' , 'active1' : index === selectedTabIndex && styles?.tabStyling == 'BOXED' , 'active2' : index === selectedTabIndex && styles?.tabStyling == 'NONE' }\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\n              <!-- {{ tab.inputText[0].value }} -->\n              <simpo-text-editor [(value)]=\"tab.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"row-container\" *ngIf=\"screenWidth <= 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <!-- <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\n        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n        </div>\n        <div class=\" box d-flex g-25 mt-5 mb-5\">\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\n              <!-- {{ tab.inputText[0].value }} -->\n              <simpo-text-editor [(value)]=\"tab.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"content d-flex g-15 mt-5\" *ngIf=\"currentData?.image?.url\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\n        <div class=\"image\">\n          <img loading=\"lazy\"  [src]=\"currentData?.image?.url\" alt=\"\" [id]=\"data?.id\"\n          [simpoImageDirective]=\"styles?.image\"  [simpoObjectPosition]=\"currentData?.image?.position\"\n          [simpoCorner]=\"styles?.corners\"\n          class=\"d-block mx-lg-auto img-fluid h-100 \" [class]=\"data?.id+(currentData?.image?.id || '')\"\n          loading=\"lazy\"  [appImageEditor]=\"true\" [imageData]=\"currentData?.image\" [sectionId]=\"data?.id\">\n        </div>\n        <div class=\"content-heading\">\n          <div class=\"heading-large content-side\" >\n            <ng-container *ngIf=\"currentData?.inputText?.[1] as textItem\">\n              <simpo-text-editor [(value)]=\"textItem.value\"  [editable]=\"edit || false\"></simpo-text-editor>\n            </ng-container>\n          </div>\n          <div class=\"content-description body-large mt-1 content-side\" >\n            <ng-container *ngIf=\"currentData?.inputText?.[2] as textitem\">\n          <simpo-text-editor [(value)]=\"textitem.value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n      <div class=\"content justify-center d-flex g-15 mt-5\" *ngIf=\"!currentData?.image?.url\">\n        <div class=\"content-heading text-center\">\n          <div class=\"heading-large content-side\" [innerHtml]=\"currentData?.inputText?.[1]?.value\" [id]=\"data?.id\">\n          </div>\n          <div class=\"content-description body-large mt-1 text-center\" [innerHtml]=\"currentData?.inputText?.[2]?.value\">\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  \n  <ng-container *ngIf=\"styles?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem;margin-bottom:4%}.image{width:40%;flex:1}.image img{width:100%}.content-heading{width:60%;text-align:start}.content-description{width:100%;text-align:start}.active{font-weight:700;letter-spacing:.8px;border-bottom:2px solid!important;padding-bottom:20px}.active1{font-weight:700;letter-spacing:.8px;border:2px solid!important;border-radius:7px}.active2{font-weight:700;letter-spacing:.8px;border:unset!important;padding-bottom:20px}.tab{letter-spacing:.8px;border-bottom:2px solid;padding-bottom:20px;cursor:pointer}.tab1{letter-spacing:.8px;border:2px solid;cursor:pointer}.tab2{letter-spacing:.8px;border:unset;padding-bottom:20px;cursor:pointer}@media only screen and (max-width: 768px){.content{flex-direction:column;padding:0 2rem;width:100%;gap:2rem}.image{order:-1;width:100%}.image img,.content-heading{width:100%}.box{overflow-x:scroll;gap:10%;margin:auto!important;padding:10px;width:85%!important}.row-container{width:100%!important}.tab{letter-spacing:.5px;border-bottom:1px solid;padding-bottom:10px;cursor:pointer}.image{width:100%}}@media screen and (max-width: 475px){.content{padding:0;margin-bottom:30px}}.g-25{gap:55px}.mt-1{margin-top:1rem}.justify-center{justify-content:center}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturesSectionComponent, isStandalone: true, selector: "simpo-features-section", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" [simpoBorder]=\"styles?.border\"  [attr.style]=\"customClass\">\n  <div  #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\">\n    <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n      <div class=\"row\" *ngIf=\"screenWidth > 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <!-- <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n\n        </div>\n        <div class=\"box justify-center d-flex g-25 mt-5 mb-5\" [style.--accentColor]=\"styles?.background?.accentColor\">\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\n            <div [ngClass]=\"{'tab': styles?.tabStyling == 'UNDERLINE' , 'tab1' : styles?.tabStyling == 'BOXED' , 'tab2' : styles?.tabStyling == 'NONE' }\"  [ngClass]=\"{'active': index === selectedTabIndex && styles?.tabStyling == 'UNDERLINE' , 'active1' : index === selectedTabIndex && styles?.tabStyling == 'BOXED' , 'active2' : index === selectedTabIndex && styles?.tabStyling == 'NONE' }\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\n              <!-- {{ tab.inputText[0].value }} -->\n              <simpo-text-editor [(value)]=\"tab.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"row-container\" *ngIf=\"screenWidth <= 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <!-- <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\n        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n        </div>\n        <div class=\" box d-flex g-25 mt-5 mb-5\">\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\n              <!-- {{ tab.inputText[0].value }} -->\n              <simpo-text-editor [(value)]=\"tab.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"content d-flex g-15 mt-5\" *ngIf=\"currentData?.image?.url\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\n        <div class=\"image\">\n          <img loading=\"lazy\"  [src]=\"currentData?.image?.url\" alt=\"\" [id]=\"data?.id\"\n          [simpoImageDirective]=\"styles?.image\"  [simpoObjectPosition]=\"currentData?.image?.position\"\n          [simpoCorner]=\"styles?.corners\"\n          class=\"d-block mx-lg-auto img-fluid h-100 \" [class]=\"data?.id+(currentData?.image?.id || '')\"\n          loading=\"lazy\"  [appImageEditor]=\"true\" [imageData]=\"currentData?.image\" [sectionId]=\"data?.id\">\n        </div>\n        <div class=\"content-heading\">\n          <div class=\"heading-large content-side\" >\n            <ng-container *ngIf=\"currentData?.inputText?.[1] as textItem\">\n              <simpo-text-editor [(value)]=\"textItem.value\"  [editable]=\"edit || false\"></simpo-text-editor>\n            </ng-container>\n          </div>\n          <div class=\"content-description body-large mt-1 content-side\" >\n            <ng-container *ngIf=\"currentData?.inputText?.[2] as textitem\">\n          <simpo-text-editor [(value)]=\"textitem.value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n      <div class=\"content justify-center d-flex g-15 mt-5\" *ngIf=\"!currentData?.image?.url\">\n        <div class=\"content-heading text-center\">\n          <div class=\"heading-large content-side\" [innerHtml]=\"currentData?.inputText?.[1]?.value\" [id]=\"data?.id\">\n          </div>\n          <div class=\"content-description body-large mt-1 text-center\" [innerHtml]=\"currentData?.inputText?.[2]?.value\">\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  \n  <ng-container *ngIf=\"styles?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem;margin-bottom:4%}.image{width:40%;flex:1}.image img{width:100%}.content-heading{width:60%;text-align:start}.content-description{width:100%;text-align:start}.active{font-weight:700;letter-spacing:.8px;border-bottom:2px solid!important;padding-bottom:20px}.active1{font-weight:700;letter-spacing:.8px;border:2px solid!important;border-radius:7px}.active2{font-weight:700;letter-spacing:.8px;border:unset!important;padding-bottom:20px}.tab{letter-spacing:.8px;border-bottom:2px solid;padding-bottom:20px;cursor:pointer}.tab1{letter-spacing:.8px;border:2px solid;cursor:pointer}.tab2{letter-spacing:.8px;border:unset;padding-bottom:20px;cursor:pointer}@media only screen and (max-width: 768px){.content{flex-direction:column;padding:0 2rem;width:100%;gap:2rem}.g-25{gap:10px!important}.image{order:-1;width:100%}.image img,.content-heading{width:100%}.box{overflow-x:scroll;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;touch-action:pan-x;padding:10px;width:100%!important;margin:5px 0!important}.box::-webkit-scrollbar{display:flex!important;height:3px}.box::-webkit-scrollbar-thumb{background:var(--accentColor, #d4d4d4)}.row-container{width:100%!important}.tab{letter-spacing:.5px;border-bottom:1px solid;padding-bottom:10px;cursor:pointer}.image{width:100%}}@media screen and (max-width: 475px){.content{padding:0;margin-bottom:30px}}.g-25{gap:55px}.mt-1{margin-top:1rem}.justify-center{justify-content:center}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturesSectionComponent, decorators: [{
             type: Component,
@@ -11888,7 +11905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ImageEditorDirective,
                         SpacingHorizontalDirective,
                         PositionLayoutDirectiveDirective
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" [simpoBorder]=\"styles?.border\"  [attr.style]=\"customClass\">\n  <div  #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\">\n    <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n      <div class=\"row\" *ngIf=\"screenWidth > 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <!-- <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n\n        </div>\n        <div class=\" box justify-center d-flex g-25 mt-5 mb-5\">\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\n            <div [ngClass]=\"{'tab': styles?.tabStyling == 'UNDERLINE' , 'tab1' : styles?.tabStyling == 'BOXED' , 'tab2' : styles?.tabStyling == 'NONE' }\"  [ngClass]=\"{'active': index === selectedTabIndex && styles?.tabStyling == 'UNDERLINE' , 'active1' : index === selectedTabIndex && styles?.tabStyling == 'BOXED' , 'active2' : index === selectedTabIndex && styles?.tabStyling == 'NONE' }\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\n              <!-- {{ tab.inputText[0].value }} -->\n              <simpo-text-editor [(value)]=\"tab.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"row-container\" *ngIf=\"screenWidth <= 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <!-- <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\n        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n        </div>\n        <div class=\" box d-flex g-25 mt-5 mb-5\">\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\n              <!-- {{ tab.inputText[0].value }} -->\n              <simpo-text-editor [(value)]=\"tab.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"content d-flex g-15 mt-5\" *ngIf=\"currentData?.image?.url\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\n        <div class=\"image\">\n          <img loading=\"lazy\"  [src]=\"currentData?.image?.url\" alt=\"\" [id]=\"data?.id\"\n          [simpoImageDirective]=\"styles?.image\"  [simpoObjectPosition]=\"currentData?.image?.position\"\n          [simpoCorner]=\"styles?.corners\"\n          class=\"d-block mx-lg-auto img-fluid h-100 \" [class]=\"data?.id+(currentData?.image?.id || '')\"\n          loading=\"lazy\"  [appImageEditor]=\"true\" [imageData]=\"currentData?.image\" [sectionId]=\"data?.id\">\n        </div>\n        <div class=\"content-heading\">\n          <div class=\"heading-large content-side\" >\n            <ng-container *ngIf=\"currentData?.inputText?.[1] as textItem\">\n              <simpo-text-editor [(value)]=\"textItem.value\"  [editable]=\"edit || false\"></simpo-text-editor>\n            </ng-container>\n          </div>\n          <div class=\"content-description body-large mt-1 content-side\" >\n            <ng-container *ngIf=\"currentData?.inputText?.[2] as textitem\">\n          <simpo-text-editor [(value)]=\"textitem.value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n      <div class=\"content justify-center d-flex g-15 mt-5\" *ngIf=\"!currentData?.image?.url\">\n        <div class=\"content-heading text-center\">\n          <div class=\"heading-large content-side\" [innerHtml]=\"currentData?.inputText?.[1]?.value\" [id]=\"data?.id\">\n          </div>\n          <div class=\"content-description body-large mt-1 text-center\" [innerHtml]=\"currentData?.inputText?.[2]?.value\">\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  \n  <ng-container *ngIf=\"styles?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem;margin-bottom:4%}.image{width:40%;flex:1}.image img{width:100%}.content-heading{width:60%;text-align:start}.content-description{width:100%;text-align:start}.active{font-weight:700;letter-spacing:.8px;border-bottom:2px solid!important;padding-bottom:20px}.active1{font-weight:700;letter-spacing:.8px;border:2px solid!important;border-radius:7px}.active2{font-weight:700;letter-spacing:.8px;border:unset!important;padding-bottom:20px}.tab{letter-spacing:.8px;border-bottom:2px solid;padding-bottom:20px;cursor:pointer}.tab1{letter-spacing:.8px;border:2px solid;cursor:pointer}.tab2{letter-spacing:.8px;border:unset;padding-bottom:20px;cursor:pointer}@media only screen and (max-width: 768px){.content{flex-direction:column;padding:0 2rem;width:100%;gap:2rem}.image{order:-1;width:100%}.image img,.content-heading{width:100%}.box{overflow-x:scroll;gap:10%;margin:auto!important;padding:10px;width:85%!important}.row-container{width:100%!important}.tab{letter-spacing:.5px;border-bottom:1px solid;padding-bottom:10px;cursor:pointer}.image{width:100%}}@media screen and (max-width: 475px){.content{padding:0;margin-bottom:30px}}.g-25{gap:55px}.mt-1{margin-top:1rem}.justify-center{justify-content:center}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" [simpoBorder]=\"styles?.border\"  [attr.style]=\"customClass\">\n  <div  #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\">\n    <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n      <div class=\"row\" *ngIf=\"screenWidth > 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <!-- <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n\n        </div>\n        <div class=\"box justify-center d-flex g-25 mt-5 mb-5\" [style.--accentColor]=\"styles?.background?.accentColor\">\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\n            <div [ngClass]=\"{'tab': styles?.tabStyling == 'UNDERLINE' , 'tab1' : styles?.tabStyling == 'BOXED' , 'tab2' : styles?.tabStyling == 'NONE' }\"  [ngClass]=\"{'active': index === selectedTabIndex && styles?.tabStyling == 'UNDERLINE' , 'active1' : index === selectedTabIndex && styles?.tabStyling == 'BOXED' , 'active2' : index === selectedTabIndex && styles?.tabStyling == 'NONE' }\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\n              <!-- {{ tab.inputText[0].value }} -->\n              <simpo-text-editor [(value)]=\"tab.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"row-container\" *ngIf=\"screenWidth <= 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <!-- <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\n        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n        </div>\n        <div class=\" box d-flex g-25 mt-5 mb-5\">\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\n              <!-- {{ tab.inputText[0].value }} -->\n              <simpo-text-editor [(value)]=\"tab.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"content d-flex g-15 mt-5\" *ngIf=\"currentData?.image?.url\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\n        <div class=\"image\">\n          <img loading=\"lazy\"  [src]=\"currentData?.image?.url\" alt=\"\" [id]=\"data?.id\"\n          [simpoImageDirective]=\"styles?.image\"  [simpoObjectPosition]=\"currentData?.image?.position\"\n          [simpoCorner]=\"styles?.corners\"\n          class=\"d-block mx-lg-auto img-fluid h-100 \" [class]=\"data?.id+(currentData?.image?.id || '')\"\n          loading=\"lazy\"  [appImageEditor]=\"true\" [imageData]=\"currentData?.image\" [sectionId]=\"data?.id\">\n        </div>\n        <div class=\"content-heading\">\n          <div class=\"heading-large content-side\" >\n            <ng-container *ngIf=\"currentData?.inputText?.[1] as textItem\">\n              <simpo-text-editor [(value)]=\"textItem.value\"  [editable]=\"edit || false\"></simpo-text-editor>\n            </ng-container>\n          </div>\n          <div class=\"content-description body-large mt-1 content-side\" >\n            <ng-container *ngIf=\"currentData?.inputText?.[2] as textitem\">\n          <simpo-text-editor [(value)]=\"textitem.value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n      <div class=\"content justify-center d-flex g-15 mt-5\" *ngIf=\"!currentData?.image?.url\">\n        <div class=\"content-heading text-center\">\n          <div class=\"heading-large content-side\" [innerHtml]=\"currentData?.inputText?.[1]?.value\" [id]=\"data?.id\">\n          </div>\n          <div class=\"content-description body-large mt-1 text-center\" [innerHtml]=\"currentData?.inputText?.[2]?.value\">\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  \n  <ng-container *ngIf=\"styles?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem;margin-bottom:4%}.image{width:40%;flex:1}.image img{width:100%}.content-heading{width:60%;text-align:start}.content-description{width:100%;text-align:start}.active{font-weight:700;letter-spacing:.8px;border-bottom:2px solid!important;padding-bottom:20px}.active1{font-weight:700;letter-spacing:.8px;border:2px solid!important;border-radius:7px}.active2{font-weight:700;letter-spacing:.8px;border:unset!important;padding-bottom:20px}.tab{letter-spacing:.8px;border-bottom:2px solid;padding-bottom:20px;cursor:pointer}.tab1{letter-spacing:.8px;border:2px solid;cursor:pointer}.tab2{letter-spacing:.8px;border:unset;padding-bottom:20px;cursor:pointer}@media only screen and (max-width: 768px){.content{flex-direction:column;padding:0 2rem;width:100%;gap:2rem}.g-25{gap:10px!important}.image{order:-1;width:100%}.image img,.content-heading{width:100%}.box{overflow-x:scroll;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;touch-action:pan-x;padding:10px;width:100%!important;margin:5px 0!important}.box::-webkit-scrollbar{display:flex!important;height:3px}.box::-webkit-scrollbar-thumb{background:var(--accentColor, #d4d4d4)}.row-container{width:100%!important}.tab{letter-spacing:.5px;border-bottom:1px solid;padding-bottom:10px;cursor:pointer}.image{width:100%}}@media screen and (max-width: 475px){.content{padding:0;margin-bottom:30px}}.g-25{gap:55px}.mt-1{margin-top:1rem}.justify-center{justify-content:center}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], edit: [{