simpo-component-library 3.6.467 → 3.6.468

package/fesm2022/simpo-component-library.mjs

@@ -659,6 +659,7 @@ class ButtonDirectiveDirective {
             this.el.nativeElement.style.setProperty('color', style?.background);
             if (this.scrollValue) {
                 this.el.nativeElement.style.setProperty('border', 'unset', 'important');
+                this.el.nativeElement.style.setProperty('border-radius', 'unset', 'important');
                 this.el.nativeElement.style.setProperty('background', 'transparent');
                 this.el.nativeElement.style.setProperty('color', style?.secondaryBackground);
             }
@@ -686,6 +687,8 @@ class ButtonDirectiveDirective {
         }
     }
     applyButtonShape(style) {
+        if (style?.type === 'Text')
+            return;
         if (style?.shape === 'Round') {
             this.el.nativeElement.style.setProperty('border-radius', '99px');
         }
@@ -723,10 +726,9 @@ class ButtonDirectiveDirective {
         }
     }
     onHover() {
-        if (this.buttonStyle?.type === 'Solid') {
+        if (this.buttonStyle?.type !== 'Text')
             this.el.nativeElement.style.setProperty('box-shadow', 'rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px');
-            this.el.nativeElement.style.setProperty('transform', 'translateY(-3px)');
-        }
+        this.el.nativeElement.style.setProperty('transform', 'translateY(-5px)');
     }
     onLeave() {
         this.el.nativeElement.style.setProperty('box-shadow', 'none');
@@ -761,6 +763,7 @@ const API_URL = new InjectionToken('apiUrl');
 const ECOMMERCE_URL = new InjectionToken('ecommerceURL');
 const CMIS_URL = new InjectionToken('cmisURL');
 const BUCKET_URL = new InjectionToken('bucketURL');
+const PASSBOOK_URL = new InjectionToken('passbookURL');
 
 class ImageUplaodService {
     // region = 'us-east-1'
@@ -1644,9 +1647,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class TextEditorComponent {
-    constructor(editorService, platformId) {
+    constructor(editorService, platformId, ngZone) {
         this.editorService = editorService;
         this.platformId = platformId;
+        this.ngZone = ngZone;
         this.value = '<p>Hello this is palash makhija</p>';
         this.valueChange = new EventEmitter();
         this.editable = false;
@@ -1667,7 +1671,6 @@ class TextEditorComponent {
         };
         this.selectedColorType = 'SOLID';
         this.primaryColor = '#000000';
-        this.secondaryColor = '#000000';
         this.savedRange = null;
     }
     ngOnInit() {
@@ -1762,68 +1765,67 @@ class TextEditorComponent {
         if (!isPlatformBrowser(this.platformId))
             return;
         const size = event.target.value;
-        // Apply a default size of 4 (needed for execCommand to work)
-        document.execCommand('fontSize', false, '4');
-        // Convert selected font elements to have actual font-size instead of "size" attribute
-        const elements = document.querySelectorAll("font[size='4']");
-        elements.forEach(el => {
-            const htmlElement = el; // ✅ Explicitly cast to HTMLElement
-            htmlElement.removeAttribute('size'); // Remove old size attribute
-            htmlElement.style.fontSize = size; // Apply CSS font size
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const range = selection.getRangeAt(0);
+        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
+            setTimeout(() => {
+                this.ngZone.run(() => {
+                    this.toolbarData.selectedSize = size;
+                    this.valueChange.emit(this.editor.nativeElement.innerHTML);
+                });
+            }, 0);
         });
-        this.toolbarData.selectedSize = size;
-        this.valueChange.emit(this.editor.nativeElement.innerHTML);
-        // this.show = false; // Hide toolbar after action
     }
     changeColor(event) {
         if (!isPlatformBrowser(this.platformId))
             return;
-        this.restoreSelection(); // Restore selection before touching DOM
         const color = event.target.value;
-        // Grab current selection
         const selection = window.getSelection();
-        if (selection && selection.rangeCount > 0) {
-            const range = selection.getRangeAt(0);
-            let targetNode = range.commonAncestorContainer;
-            if (!targetNode)
-                return;
-            // If it's a text node, work with its parent element
-            if (targetNode.nodeType === Node.TEXT_NODE && targetNode.parentElement) {
-                targetNode = targetNode.parentElement;
-            }
-            if (targetNode instanceof HTMLElement) {
-                const el = targetNode;
-                // 1) If it *has* gradient styling, strip it off and immediately apply your solid color
-                const hasGradient = el.style.backgroundClip === 'text' ||
-                    el.style.webkitBackgroundClip === 'text';
-                if (hasGradient) {
-                    el.style.background = '';
-                    el.style.backgroundClip = '';
-                    el.style.webkitBackgroundClip = '';
-                    el.style.webkitTextFillColor = '';
-                    el.style.color = color;
-                    this.valueChange.emit(this.editor.nativeElement.innerHTML);
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const range = selection.getRangeAt(0);
+        if (range.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
+            setTimeout(() => {
+                this.ngZone.run(() => {
                     this.toolbarData.selectedColor = color;
-                    return;
-                }
-                // 2) If *no* gradient styling, look for any <span> wrappers and unwrap them
-                //    so that our execCommand('foreColor') can cleanly apply to plain text
-            }
-        }
-        const spans = this.editor.nativeElement.querySelectorAll('span');
-        spans.forEach((span) => {
-            // Only unwrap spans that *don’t* carry gradient—i.e. strips any residual tags
-            const parent = span.parentNode;
-            while (span.firstChild) {
-                parent.insertBefore(span.firstChild, span);
-            }
-            parent.removeChild(span);
+                    this.valueChange.emit(this.editor.nativeElement.innerHTML);
+                });
+            }, 0);
         });
-        // 3) Finally, use the legacy execCommand for solid color
-        document.execCommand('foreColor', false, color);
-        // Update toolbar state
-        this.toolbarData.selectedColor = color;
-        this.valueChange.emit(this.editor.nativeElement.innerHTML);
     }
     updateText(event) {
         // console.log(this.editor.nativeElement.innerHTML)
@@ -1834,8 +1836,7 @@ class TextEditorComponent {
         this.formatText('formatBlock', selectedValue);
     }
     openColorPicker() {
-        // this.colorPicker.nativeElement.click(); // Programmatically trigger input
-        this.saveSelection(); // Save the current selection
+        this.saveSelection();
     }
     readFormattingProperties() {
         if (!isPlatformBrowser(this.platformId))
@@ -1893,9 +1894,27 @@ class TextEditorComponent {
         };
     }
     changeGradientColor() {
-        this.restoreSelection(); // Restore the selection before applying gradient
-        const color = `linear-gradient(90deg, ${this.primaryColor} 0%, ${this.secondaryColor} 100%)`;
-        this.applyGradientToText(color);
+        this.ngZone.runOutsideAngular(() => {
+            // Restore previous selection first
+            this.restoreSelection();
+            // Wait a little for browser selection update before saving again and applying gradient
+            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
+                this.applyGradientToText(gradient);
+                // Restore the selection explicitly again after DOM mutation
+                this.restoreSelection();
+                // Emit updated HTML content after a short delay inside Angular zone (safe for change detection)
+                setTimeout(() => {
+                    this.ngZone.run(() => {
+                        this.valueChange.emit(this.editor.nativeElement.innerHTML);
+                    });
+                }, 0);
+            }, 10); // 10ms delay (adjustable if needed)
+        });
     }
     applyGradientToText(gradientValue) {
         if (!isPlatformBrowser(this.platformId))
@@ -1903,37 +1922,35 @@ class TextEditorComponent {
         const selection = window.getSelection();
         if (!selection || selection.rangeCount === 0)
             return;
-        // Get the current selection range
         const range = selection.getRangeAt(0);
-        // Check if the range is valid for wrapping
         if (!range || range.collapsed)
             return;
-        // Extract the selected content
         const selectedContent = range.extractContents();
+        // Clean up spans without gradient style first
         const spans = this.editor.nativeElement.querySelectorAll('span');
         spans.forEach((span) => {
-            // Only unwrap spans that *don’t* carry gradient—i.e. strips any residual tags
-            const parent = span.parentNode;
-            while (span.firstChild) {
-                parent.insertBefore(span.firstChild, 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);
             }
-            parent.removeChild(span);
         });
-        // Create a new <span> element to wrap the selected text
         const span = document.createElement('span');
-        span.style.background = gradientValue;
+        span.style['background-image'] = gradientValue;
         span.style.backgroundClip = 'text';
         span.style.webkitBackgroundClip = 'text';
         span.style.color = 'transparent';
         span.style.webkitTextFillColor = 'transparent';
-        // Append the selected content to the <span>
+        span.style.inlineSize = 'block';
         span.appendChild(selectedContent);
-        // Insert the <span> back into the range
         range.insertNode(span);
-        // Clear the selection
         selection.removeAllRanges();
-        // Emit the updated HTML content
-        this.valueChange.emit(this.editor.nativeElement.innerHTML);
+        const newRange = document.createRange();
+        newRange.selectNodeContents(span);
+        selection.addRange(newRange);
     }
     regenerateText() {
         let payload = {
@@ -1986,8 +2003,8 @@ 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 }], 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 [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}\" [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> format_bold</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon> format_italic</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('underline')\" [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')\" [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\" [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon> format_list_bulleted</mat-icon></button>\n\n    <button class=\"tool\" (click)=\"formatText('justifyLeft')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon> format_align_left</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('justifyCenter')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon> format_align_center</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('justifyRight')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon> format_align_right</mat-icon></button>\n\n    <div class=\"colorType\">\n      <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\" (click)=\"selectedColorType = 'SOLID'\">Solid</button>\n      <button class=\"gradient\" [ngClass]=\"{'gradientColorSelected': selectedColorType === 'GRADIENT'}\" (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)\" [(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()\" [(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()\" [(ngModel)]=\"secondaryColor\">\n      </button>\n    </div>\n  </div>\n\n  <div class=\"suggestion-box\" [ngStyle]=\"{'top.px': suggestionY}\" [style.right]=\"rightZero ? '0px' : 'auto'\" [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\" 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>\n", 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.ɵ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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, decorators: [{
             type: Component,
@@ -1996,11 +2013,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FormsModule,
                         ContenteditableValueAccessor,
                         MatIconModule
-                    ], template: "<div class=\"editor-container\" [ngClass]=\"{'border': editable}\" #parentElement [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}\" [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> format_bold</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon> format_italic</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('underline')\" [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')\" [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\" [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon> format_list_bulleted</mat-icon></button>\n\n    <button class=\"tool\" (click)=\"formatText('justifyLeft')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon> format_align_left</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('justifyCenter')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon> format_align_center</mat-icon></button>\n    <button class=\"tool\" (click)=\"formatText('justifyRight')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon> format_align_right</mat-icon></button>\n\n    <div class=\"colorType\">\n      <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\" (click)=\"selectedColorType = 'SOLID'\">Solid</button>\n      <button class=\"gradient\" [ngClass]=\"{'gradientColorSelected': selectedColorType === 'GRADIENT'}\" (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)\" [(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()\" [(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()\" [(ngModel)]=\"secondaryColor\">\n      </button>\n    </div>\n  </div>\n\n  <div class=\"suggestion-box\" [ngStyle]=\"{'top.px': suggestionY}\" [style.right]=\"rightZero ? '0px' : 'auto'\" [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\" 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>\n", 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]
-                }] }], propDecorators: { toolbar: [{
+                }] }, { type: i0.NgZone }], propDecorators: { toolbar: [{
                 type: ViewChild,
                 args: ['toolbar', { static: false }]
             }], editor: [{
@@ -6621,13 +6638,14 @@ class checkItemAlreadyAdded {
 class RestService {
     constructor(http, 
     // private readonly eventService: EventsService,
-    BASE_URL, ECOMMERCE_URL, CMIS_URL, cookieService, storage) {
+    BASE_URL, ECOMMERCE_URL, CMIS_URL, cookieService, storage, PASSBOOK_URL) {
         this.http = http;
         this.BASE_URL = BASE_URL;
         this.ECOMMERCE_URL = ECOMMERCE_URL;
         this.CMIS_URL = CMIS_URL;
         this.cookieService = cookieService;
         this.storage = storage;
+        this.PASSBOOK_URL = PASSBOOK_URL;
         // private BASE_URL: string = "https://dev-api.simpo.ai/";
         // private ECOMMERCE_URL: string = "https://dev-ecommerce.simpo.ai/";
         // private CMIS_URL: string = "https://api-cmis.tejsoft.com/"; //production
@@ -6636,7 +6654,6 @@ class RestService {
         this.environmentTypeSubscriber = null;
         this.isJewellery = false;
         this.orraBaseUrl = 'https://stageapi-orra.letsmobility.com/';
-        this.passBookUrl = "https://prod-passbook.simpo.ai/";
         // this.environmentTypeSubscriber = this.eventService.environmentType.subscribe((response) => {
         //   if (response == "DEV") {
         //     this.BASE_URL = "https://dev-api.simpo.ai/";
@@ -6652,6 +6669,7 @@ class RestService {
         //   }
         // })
     }
+    // passBookUrl: string = "https://prod-passbook.simpo.ai/";
     getBusinessDetails() {
         //   this.businessDetails = localStorage.getItem("bDetails");
         //  if(this.businessDetails != null) {
@@ -6683,13 +6701,13 @@ class RestService {
         const headers = new HttpHeaders({
             'Authorization': `Bearer ${token}`
         });
-        return this.http.post(this.passBookUrl + `passbook/manual/payment/status?paymentOrderId=${orderId}`, {}, { headers: headers });
+        return this.http.post(this.PASSBOOK_URL + `passbook/manual/payment/status?paymentOrderId=${orderId}`, {}, { headers: headers });
     }
     getProductBySelectedCategory(categoryId) {
         return this.http.get(this.BASE_URL + `ecommerce/product/${categoryId}`);
     }
     getAllSchemes(userId, storeId) {
-        return this.http.get(this.passBookUrl + `ext/connect/simpo/user?userId=${userId}&storeId=${storeId}`);
+        return this.http.get(this.PASSBOOK_URL + `ext/connect/simpo/user?userId=${userId}&storeId=${storeId}`);
     }
     getAllRedemptionSchemes() {
         return this.http.get(this.orraBaseUrl + `passBook/redemption/amount/check?userCode=C_000313885`);
@@ -7050,10 +7068,10 @@ class RestService {
         return map;
     }
     generateToken(bId, userId) {
-        return this.http.post(this.passBookUrl + `ext/connect/simpo/token?businessId=${bId}&userId=${userId}&userType=EXTERNAL_USER`, {});
+        return this.http.post(this.PASSBOOK_URL + `ext/connect/simpo/token?businessId=${bId}&userId=${userId}&userType=EXTERNAL_USER`, {});
     }
     getAllEnrolledSchemes(payload) {
-        return this.http.put(this.passBookUrl + 'ext/connect/simpo/scheme/list', payload);
+        return this.http.put(this.PASSBOOK_URL + 'ext/connect/simpo/scheme/list', payload);
     }
     enrollScheme(payload, checkCharges) {
         const token = this.getToken();
@@ -7061,10 +7079,10 @@ class RestService {
             'Authorization': `Bearer ${token}`
         });
         if (checkCharges) {
-            return this.http.post(this.passBookUrl + 'passbook/cart/initiate/payment?manualPay=true', payload, { headers: headers });
+            return this.http.post(this.PASSBOOK_URL + 'passbook/cart/initiate/payment?manualPay=true', payload, { headers: headers });
         }
         else {
-            return this.http.post(this.passBookUrl + 'passbook/initiate/payment?manualPay=true', payload, { headers: headers });
+            return this.http.post(this.PASSBOOK_URL + 'passbook/initiate/payment?manualPay=true', payload, { headers: headers });
         }
     }
     getBenefitSlab(passbookId) {
@@ -7072,7 +7090,7 @@ class RestService {
         const headers = new HttpHeaders({
             'Authorization': `Bearer ${token}`
         });
-        return this.http.post(this.passBookUrl + `passbook/benefit/percentages?passbookId=${passbookId}`, {}, { headers: headers });
+        return this.http.post(this.PASSBOOK_URL + `passbook/benefit/percentages?passbookId=${passbookId}`, {}, { headers: headers });
     }
     getAllStaffList() {
         return this.http.get(this.BASE_URL + `staff/staff/list/${localStorage.getItem('businessId')}?isPagination=false`);
@@ -7082,7 +7100,7 @@ class RestService {
         const headers = new HttpHeaders({
             'Authorization': `Bearer ${token}`
         });
-        return this.http.put(this.passBookUrl + `passbook/request/redemption?passBookId=${passbookId}`, {}, { headers: headers });
+        return this.http.put(this.PASSBOOK_URL + `passbook/request/redemption?passBookId=${passbookId}`, {}, { headers: headers });
     }
     PassbookAppStatus(bId) {
         return this.http.get(this.BASE_URL + `app/app/check-app?businessId=${bId}&appName=Passbook`);
@@ -7092,7 +7110,7 @@ class RestService {
         const headers = new HttpHeaders({
             'Authorization': `Bearer ${token}`
         });
-        return this.http.get(this.passBookUrl + `passbook/payment/dues?page=0&size=1000&businessId=${bId}&userId=${userId}`, { headers: headers });
+        return this.http.get(this.PASSBOOK_URL + `passbook/payment/dues?page=0&size=1000&businessId=${bId}&userId=${userId}`, { headers: headers });
     }
     getToken() {
         let token = this.cookieService.get('passBookToken');
@@ -7103,15 +7121,15 @@ class RestService {
         const headers = new HttpHeaders({
             'Authorization': `Bearer ${token}`
         });
-        return this.http.put(this.passBookUrl + `dashboard/v3/transactions/page`, payload, { headers: headers });
+        return this.http.put(this.PASSBOOK_URL + `dashboard/v3/transactions/page`, payload, { headers: headers });
     }
     getSchemeDetails(schemeId) {
-        return this.http.post(this.passBookUrl + `ext/connect/simpo/get/scheme?id=${schemeId}`, {});
+        return this.http.post(this.PASSBOOK_URL + `ext/connect/simpo/get/scheme?id=${schemeId}`, {});
     }
     getMetalPrice(storeId) {
-        return this.http.get(this.passBookUrl + `ext/connect/simpo/metal/prices?id=${storeId}`);
+        return this.http.get(this.PASSBOOK_URL + `ext/connect/simpo/metal/prices?id=${storeId}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, deps: [{ token: i1.HttpClient }, { token: API_URL }, { token: ECOMMERCE_URL }, { token: CMIS_URL }, { token: i2$3.CookieService }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, deps: [{ token: i1.HttpClient }, { token: API_URL }, { token: ECOMMERCE_URL }, { token: CMIS_URL }, { token: i2$3.CookieService }, { token: LOCAL_STORAGE }, { token: PASSBOOK_URL }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, decorators: [{
@@ -7131,6 +7149,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }] }, { type: i2$3.CookieService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCAL_STORAGE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PASSBOOK_URL]
                 }] }] });
 
 class Cart {
@@ -11854,7 +11875,6 @@ class LogoShowcaseComponent extends BaseSection {
         this.logoSpeedClass = this.styles?.logoSpeed || logoSpeed.Normal;
         this.logoDirectionClass = this.styles?.logoDirection || logoDirection.Left;
         this.isFullWidth = this.styles?.fullWidth || true;
-        console.log(this.content);
     }
     get stylesLayout() {
         return { ...this.styles?.layout };
@@ -11914,7 +11934,7 @@ class LogoShowcaseComponent extends BaseSection {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoShowcaseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-logo-showcase', standalone: true, imports: [SimpoButtonComponent, SimpoElementsModule, SanitizeHtmlPipe, TextEditorComponent, SimpoComponentModule, CommonModule, MatGridListModule, AnimationDirective, BackgroundDirective, ContentFitDirective, BorderDirective, BannerContentFitDirective, ButtonDirectiveDirective, ColumnDirectiveDirective, ContainerFitDirective, CornerDirective, simpoConetenAlignmentDirective, SimpoFooterLayoutDirective, HoverDirective, ImageDirectiveDirective, OverlayDirective, PositionLayoutDirectiveDirective, TextBackgroundDirectiveDirective, SpacingHorizontalDirective, ObjectPositionDirective, ImageEditorDirective, IconDirectiveDirective], template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n        [attr.style]=\"customClass\">\n        <div class=\"py-3 w-100 \" [simpoBackground]=\"styles?.background\"\n            [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n            #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\n            [spacingHorizontal]=\"stylesLayout\">\n            <div class=\"row g-5 gridtext \" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n                [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n                *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\n                [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\n\n                <div class=\"col-6 gridimg w-full mb-20 content-side\" [id]=\"data?.id\"\n                    [simpoContentAlignment]=\"styles?.contentAlignment\">\n                    <div *ngFor=\"let item of content?.inputText\">\n                        <ng-container *ngIf=\"edit || item.value\">\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n                        </ng-container>\n                    </div>\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n                        <div *ngFor=\"let button of data?.action?.buttons\">\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n                                [color]=\"data?.styles?.background?.accentColor\"\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"d-flex flex-wrap flex-1 width-max\">\n                    <div class=\"slider flex  w-full\">\n                        <!-- overflow-hidden -->\n                        <div class=\"slider-track\" *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n                            [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n                                [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n                                *ngFor=\"let item of content?.listItem?.data;let i = index\">\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\"\n                                    [showIcon]=\"content?.display?.showIcon\">\n                                <ng-container\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n                                    <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\n                                        [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n                                        [showIcon]=\"content?.display?.showIcon\">\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                        <div class=\"slider-track w-full\"\n                            *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n                                *ngFor=\"let item of content?.listItem?.data\"\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n                                    [editable]=\"edit || false\"></simpo-text-editor>\n                            </div>\n                        </div>\n                        <div class=\"slider-track w-full\"\n                            *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n                            <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n                                *ngFor=\"let item of content?.listItem?.data\"\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic','flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\"\n                                    [showIcon]=\"content?.display?.showIcon\">\n                                <ng-container\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n                                    <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\n                                        [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n                                        [showIcon]=\"content?.display?.showIcon\">\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\n                                    </div>\n                                </ng-container>\n\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n                                    [editable]=\"edit || false\"></simpo-text-editor>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n                *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\n                <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\n                    [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n                    <div *ngFor=\"let item of content?.inputText\">\n                        <ng-container *ngIf=\"edit || item.value\">\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n                        </ng-container>\n                    </div>\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n                        <div *ngFor=\"let button of data?.action?.buttons\">\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n                                [color]=\"data?.styles?.background?.accentColor\"\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\n                    <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\n                    <div class=\"slider flex w-full\">\n                        <!-- overflow-hidden  -->\n                        <div class=\"slider-track w-full\"\n                            *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n                                [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n                                *ngFor=\"let item of content?.listItem?.data; let i = index\">\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\"\n                                    [showIcon]=\"content?.display?.showIcon\">\n                                <ng-container\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n                                    <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\n                                        [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n                                        [showIcon]=\"content?.display?.showIcon\">\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                        <div class=\"slider-track w-full\"\n                            *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n                                *ngFor=\"let item of content?.listItem?.data\">\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n                                    [editable]=\"edit || false\"></simpo-text-editor>\n                            </div>\n                        </div>\n                        <div class=\"slider-track w-full\"\n                            *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n                            <div class=\"slides d-flex align-items-center\" [simpoCorner]=\"styles?.corners\"\n                                *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\"\n                                    [showIcon]=\"content?.display?.showIcon\">\n                                <ng-container\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n                                    <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\n                                        [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n                                        [showIcon]=\"content?.display?.showIcon\">\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\n                                    </div>\n                                </ng-container>\n                                <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\n                                    [editable]=\"edit || false\"></simpo-text-editor>\n                            </div>\n                        </div>\n                    </div>\n                    <!-- </div> -->\n                </div>\n            </div>\n        </div>\n        <ng-container *ngIf=\"styles?.devider?.display\">\n            <simpo-svg-divider [dividerType]=\"styles?.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    </div>\n</div>\n\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n\n        <div class=\"w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n            [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\"\n            [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [simpoBackground]=\"styles?.background\">\n            <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n                [simpoLayout]=\"styles?.layout\">\n                <div class=\"mainsec content-side\" [id]=\"data?.id\"\n                    [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n\n                    <div *ngFor=\"let item of content?.inputText\">\n                        <ng-container *ngIf=\"edit || item.value\">\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n                        </ng-container>\n                    </div>\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\n                          styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n                          styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n                          styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n                      ]\">\n                        <div *ngFor=\"let button of data?.action?.buttons\">\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n                                [color]=\"data?.styles?.background?.accentColor\"\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n                        </div>\n                    </div>\n\n                    <div [ngClass]=\"{\n                      'fullwidth flex-1 inline-edit  ': styles?.fullWidth,\n                      'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\n                    }\">\n                        <div class=\"masking\">\n\n                            <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\n                                [style.animationDirection]=\"animationDirection\">\n                                <div class=\"slider-track2\"\n                                    *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n                                    [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n                                    <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n                                        [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n                                        *ngFor=\"let item of content?.listItem?.data;let i = index\">\n                                        <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n                                            *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n                                            [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                            [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                            [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\n                                            [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n                                            [class]=\"data?.id+(item?.icon?.id || '')\"\n                                            [showIcon]=\"content?.display?.showIcon\">\n                                        <ng-container\n                                            *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n                                            <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                                                [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                                class=\"logo-img d-flex justify-content-center align-items-center\"\n                                                [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n                                                [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n                                                [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\n                                                <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n                                                    [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n                                                    [class.w-100]=\"!item?.icon?.showBackground\"></div>\n                                            </div>\n                                        </ng-container>\n                                    </div>\n                                </div>\n                                <div class=\"slider-track2\"\n                                    *ngIf=\"content?.display?.showText && !content?.display?.showIcon\"\n                                    [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n                                    <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n                                        [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n                                        *ngFor=\"let item of content?.listItem?.data\">\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n                                            [editable]=\"edit || false\"></simpo-text-editor>\n                                    </div>\n                                </div>\n                                <div class=\"slider-track2 d-flex w-full\"\n                                    *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n                                    [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n                                    <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\n                                        *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\n                                        [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic',  'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right' , 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\n                                        <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n                                            *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n                                            [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                            [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                            [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\n                                            [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n                                            [class]=\"data?.id+(item?.icon?.id || '')\"\n                                            [showIcon]=\"content?.display?.showIcon\">\n                                        <ng-container\n                                            *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n                                            <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                                                [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                                class=\"logo-img d-flex justify-content-center align-items-center\"\n                                                [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n                                                [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n                                                [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\n                                                <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n                                                    [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n                                                    [class.w-100]=\"!item?.icon?.showBackground\"></div>\n                                            </div>\n                                        </ng-container>\n                                        <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\n                                            [editable]=\"edit || false\"></simpo-text-editor>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n\n                </div>\n            </div>\n        </div>\n        <ng-container *ngIf=\"styles?.devider?.display\">\n            <simpo-svg-divider [dividerType]=\"styles?.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    </div>\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px}.slides2.logotype-basic{flex-shrink:0;width:auto;height:auto;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translate3d(100%,0,0)}to{transform:translate3d(-100%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-100%,0,0)}to{transform:translate3d(100%,0,0)}}.animation{animation:scrollLeft linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:10px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;box-shadow:#0000002e 0 2px 4px;width:auto;height:auto;display:flex;align-items:center;margin:10px 5px}.width-max{width:max-content;max-width:50%}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px;align-items:center}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}.gridtext{flex-direction:column!important}.gridtext .gridimg{width:100%!important}.gridtext .width-max{max-width:100%!important}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}\n"] }]
+            args: [{ selector: 'simpo-logo-showcase', standalone: true, imports: [SimpoButtonComponent, SimpoElementsModule, TextEditorComponent, SimpoComponentModule, CommonModule, MatGridListModule, AnimationDirective, BackgroundDirective, ContentFitDirective, BorderDirective, BannerContentFitDirective, ButtonDirectiveDirective, ColumnDirectiveDirective, ContainerFitDirective, CornerDirective, simpoConetenAlignmentDirective, SimpoFooterLayoutDirective, HoverDirective, ImageDirectiveDirective, OverlayDirective, PositionLayoutDirectiveDirective, TextBackgroundDirectiveDirective, SpacingHorizontalDirective, ObjectPositionDirective, ImageEditorDirective, IconDirectiveDirective], template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n        [attr.style]=\"customClass\">\n        <div class=\"py-3 w-100 \" [simpoBackground]=\"styles?.background\"\n            [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n            #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\n            [spacingHorizontal]=\"stylesLayout\">\n            <div class=\"row g-5 gridtext \" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n                [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n                *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\n                [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\n\n                <div class=\"col-6 gridimg w-full mb-20 content-side\" [id]=\"data?.id\"\n                    [simpoContentAlignment]=\"styles?.contentAlignment\">\n                    <div *ngFor=\"let item of content?.inputText\">\n                        <ng-container *ngIf=\"edit || item.value\">\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n                        </ng-container>\n                    </div>\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n                        <div *ngFor=\"let button of data?.action?.buttons\">\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n                                [color]=\"data?.styles?.background?.accentColor\"\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"d-flex flex-wrap flex-1 width-max\">\n                    <div class=\"slider flex  w-full\">\n                        <!-- overflow-hidden -->\n                        <div class=\"slider-track\" *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n                            [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n                                [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n                                *ngFor=\"let item of content?.listItem?.data;let i = index\">\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\"\n                                    [showIcon]=\"content?.display?.showIcon\">\n                                <ng-container\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n                                    <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\n                                        [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n                                        [showIcon]=\"content?.display?.showIcon\">\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                        <div class=\"slider-track w-full\"\n                            *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n                                *ngFor=\"let item of content?.listItem?.data\"\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n                                    [editable]=\"edit || false\"></simpo-text-editor>\n                            </div>\n                        </div>\n                        <div class=\"slider-track w-full\"\n                            *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n                            <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n                                *ngFor=\"let item of content?.listItem?.data\"\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic','flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\"\n                                    [showIcon]=\"content?.display?.showIcon\">\n                                <ng-container\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n                                    <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\n                                        [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n                                        [showIcon]=\"content?.display?.showIcon\">\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\n                                    </div>\n                                </ng-container>\n\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n                                    [editable]=\"edit || false\"></simpo-text-editor>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n                *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\n                <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\n                    [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n                    <div *ngFor=\"let item of content?.inputText\">\n                        <ng-container *ngIf=\"edit || item.value\">\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n                        </ng-container>\n                    </div>\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n                        <div *ngFor=\"let button of data?.action?.buttons\">\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n                                [color]=\"data?.styles?.background?.accentColor\"\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\n                    <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\n                    <div class=\"slider flex w-full\">\n                        <!-- overflow-hidden  -->\n                        <div class=\"slider-track w-full\"\n                            *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n                                [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n                                *ngFor=\"let item of content?.listItem?.data; let i = index\">\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\"\n                                    [showIcon]=\"content?.display?.showIcon\">\n                                <ng-container\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n                                    <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\n                                        [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n                                        [showIcon]=\"content?.display?.showIcon\">\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                        <div class=\"slider-track w-full\"\n                            *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n                                *ngFor=\"let item of content?.listItem?.data\">\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n                                    [editable]=\"edit || false\"></simpo-text-editor>\n                            </div>\n                        </div>\n                        <div class=\"slider-track w-full\"\n                            *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n                            <div class=\"slides d-flex align-items-center\" [simpoCorner]=\"styles?.corners\"\n                                *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\"\n                                    [showIcon]=\"content?.display?.showIcon\">\n                                <ng-container\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n                                    <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\n                                        [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n                                        [showIcon]=\"content?.display?.showIcon\">\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\n                                    </div>\n                                </ng-container>\n                                <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\n                                    [editable]=\"edit || false\"></simpo-text-editor>\n                            </div>\n                        </div>\n                    </div>\n                    <!-- </div> -->\n                </div>\n            </div>\n        </div>\n        <ng-container *ngIf=\"styles?.devider?.display\">\n            <simpo-svg-divider [dividerType]=\"styles?.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    </div>\n</div>\n\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n\n        <div class=\"w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n            [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\"\n            [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [simpoBackground]=\"styles?.background\">\n            <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n                [simpoLayout]=\"styles?.layout\">\n                <div class=\"mainsec content-side\" [id]=\"data?.id\"\n                    [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n\n                    <div *ngFor=\"let item of content?.inputText\">\n                        <ng-container *ngIf=\"edit || item.value\">\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n                        </ng-container>\n                    </div>\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\n                          styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n                          styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n                          styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n                      ]\">\n                        <div *ngFor=\"let button of data?.action?.buttons\">\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n                                [color]=\"data?.styles?.background?.accentColor\"\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n                        </div>\n                    </div>\n\n                    <div [ngClass]=\"{\n                      'fullwidth flex-1 inline-edit  ': styles?.fullWidth,\n                      'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\n                    }\">\n                        <div class=\"masking\">\n\n                            <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\n                                [style.animationDirection]=\"animationDirection\">\n                                <div class=\"slider-track2\"\n                                    *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n                                    [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n                                    <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n                                        [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n                                        *ngFor=\"let item of content?.listItem?.data;let i = index\">\n                                        <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n                                            *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n                                            [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                            [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                            [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\n                                            [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n                                            [class]=\"data?.id+(item?.icon?.id || '')\"\n                                            [showIcon]=\"content?.display?.showIcon\">\n                                        <ng-container\n                                            *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n                                            <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                                                [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                                class=\"logo-img d-flex justify-content-center align-items-center\"\n                                                [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n                                                [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n                                                [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\n                                                <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n                                                    [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n                                                    [class.w-100]=\"!item?.icon?.showBackground\"></div>\n                                            </div>\n                                        </ng-container>\n                                    </div>\n                                </div>\n                                <div class=\"slider-track2\"\n                                    *ngIf=\"content?.display?.showText && !content?.display?.showIcon\"\n                                    [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n                                    <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n                                        [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n                                        *ngFor=\"let item of content?.listItem?.data\">\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n                                            [editable]=\"edit || false\"></simpo-text-editor>\n                                    </div>\n                                </div>\n                                <div class=\"slider-track2 d-flex w-full\"\n                                    *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n                                    [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n                                    <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\n                                        *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\n                                        [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic',  'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right' , 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\n                                        <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n                                            *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n                                            [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                            [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                            [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\n                                            [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n                                            [class]=\"data?.id+(item?.icon?.id || '')\"\n                                            [showIcon]=\"content?.display?.showIcon\">\n                                        <ng-container\n                                            *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n                                            <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                                                [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                                                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n                                                class=\"logo-img d-flex justify-content-center align-items-center\"\n                                                [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n                                                [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n                                                [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\n                                                <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n                                                    [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n                                                    [class.w-100]=\"!item?.icon?.showBackground\"></div>\n                                            </div>\n                                        </ng-container>\n                                        <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\n                                            [editable]=\"edit || false\"></simpo-text-editor>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n\n                </div>\n            </div>\n        </div>\n        <ng-container *ngIf=\"styles?.devider?.display\">\n            <simpo-svg-divider [dividerType]=\"styles?.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    </div>\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px}.slides2.logotype-basic{flex-shrink:0;width:auto;height:auto;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translate3d(100%,0,0)}to{transform:translate3d(-100%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-100%,0,0)}to{transform:translate3d(100%,0,0)}}.animation{animation:scrollLeft linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:10px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;box-shadow:#0000002e 0 2px 4px;width:auto;height:auto;display:flex;align-items:center;margin:10px 5px}.width-max{width:max-content;max-width:50%}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px;align-items:center}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}.gridtext{flex-direction:column!important}.gridtext .gridimg{width:100%!important}.gridtext .width-max{max-width:100%!important}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -14423,7 +14443,6 @@ class HeaderSectionComponent {
         this.isScrolled = window.scrollY > 50;
     }
     ngOnInit() {
-        console.log('222,this is the first step');
         this.content = this.data?.content;
         this.style = this.data?.styles;
         this.action = this.data?.action;
@@ -14447,7 +14466,6 @@ class HeaderSectionComponent {
                 this.getParentHeight();
             }, 1000);
         });
-        console.log('111', this.childContainer.nativeElement);
         this.resizeObserver.observe(this.childContainer.nativeElement);
     }
     checkPassbookApp() {
@@ -21629,5 +21647,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { API_URL, AddNewSectionComponent, AlignContent, AlignmentDirective, AnimationDirective, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BUCKET_URL, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BookAppointmentComponent, BorderDirective, ButtonDirectiveDirective, CMIS_URL, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EnrollmentFormComponent, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HeightDirective, HoverAnimationDirective, HoverDirective, IconDirectiveDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LOCAL_STORAGE, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, MergeHeaderDirective, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, ReturnsCalculatorComponent, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, SchemeDetailComponent, SchemesComponent, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, SpacingDirective, StoreListComponent, StorePageComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, TranslateOnhoverDirective, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, checkItemAlreadyAdded, contentAlignment, fitContent, fitScreen, fontSize, headlineAnimationType, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData, syncItemToServerDBRequest };
+export { API_URL, AddNewSectionComponent, AlignContent, AlignmentDirective, AnimationDirective, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BUCKET_URL, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BookAppointmentComponent, BorderDirective, ButtonDirectiveDirective, CMIS_URL, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EnrollmentFormComponent, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HeightDirective, HoverAnimationDirective, HoverDirective, IconDirectiveDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LOCAL_STORAGE, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, MergeHeaderDirective, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, PASSBOOK_URL, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, ReturnsCalculatorComponent, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, SchemeDetailComponent, SchemesComponent, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, SpacingDirective, StoreListComponent, StorePageComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, TranslateOnhoverDirective, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, checkItemAlreadyAdded, contentAlignment, fitContent, fitScreen, fontSize, headlineAnimationType, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData, syncItemToServerDBRequest };
 //# sourceMappingURL=simpo-component-library.mjs.map