npm - simpo-component-library - Versions diffs - 3.6.250 → 3.6.251 - Mend

simpo-component-library 3.6.250 → 3.6.251

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (63) hide show

package/fesm2022/simpo-component-library.mjs CHANGED Viewed

@@ -68,6 +68,8 @@ import { PanelModule } from 'primeng/panel';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i8$3 from 'primeng/timeline';
 import { TimelineModule } from 'primeng/timeline';
+import * as i1$3 from '@simpo-ui/services/storage.service';
+import * as i2$4 from '@simpo-ui/services/rest.service';
 import { moveItemInArray } from '@angular/cdk/drag-drop';
 class ButtonElementComponent {
@@ -144,7 +146,6 @@ class EventsService {
         this.showBagIcon = new EventEmitter();
         this.formFieldChanged = new EventEmitter();
         this.elementHeight = new EventEmitter();
-        this.iconChanged = new EventEmitter();
     }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EventsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -161,9 +162,9 @@ class CornerDirective {
     constructor(el, eventService) {
         this.el = el;
         this.eventService = eventService;
+        this.checkSizeChanges();
     }
     ngOnInit() {
-        this.checkSizeChanges();
     }
     ngOnDestroy() {
         if (this.cornerSubSubscription) {
@@ -1979,12 +1980,6 @@ class ImageEditorComponent {
                 newTab: false
             }
         };
-        this.iconData = {
-            url: '',
-            color: '',
-            showBackground: false,
-            backgroundColor: ''
-        };
         this.backDrop = null;
         this.link = {
             linkType: RedirectionLinkType.Page,
@@ -1995,6 +1990,7 @@ class ImageEditorComponent {
         };
         this.RedirectionLink = RedirectionLinkType;
         this.addLink = false;
+        // Slider related data
         this.max = 100;
         this.min = 0;
         this.imgLoader = false;
@@ -2029,13 +2025,29 @@ class ImageEditorComponent {
         this.categoryPath = "";
     }
     async ngOnInit() {
+        this.imageData = this.data.imageData;
+        console.log("Image Data", this.imageData);
         this.sectionId = this.data.sectionId;
-        if (this.data?.showIcon) {
-            this.iconData = this.data.iconData;
-            console.log(this.iconData);
+        this.addLink = true;
+        if (this.data?.imageData?.content) {
+            this.link = this.data.imageData?.content;
+            this.selectedType = this.link.linkType === RedirectionLinkType.Email || this.link.linkType === RedirectionLinkType.Phone ? RedirectionLinkType.External : this.link.linkType;
+            this.addLink = false;
         }
-        else {
-            this.imageHelperFunction();
+        this.getTemplatePage();
+        if (this.link?.redirectionUrl.includes("collections=")) {
+            await this.getCollectionList();
+            this.pageName = "Product List";
+            let query = this.link.redirectionUrl.split("?")[1];
+            const params = new URLSearchParams(query);
+            this.collectionPath = params.get('collections');
+        }
+        if (this.link?.redirectionUrl.includes("category=")) {
+            await this.getCategoryList();
+            this.pageName = "Product List";
+            let query = this.link.redirectionUrl.split("?")[1];
+            const params = new URLSearchParams(query);
+            this.categoryPath = params.get('category');
         }
     }
     async updateImage() {
@@ -2044,34 +2056,17 @@ class ImageEditorComponent {
         mediaSelectorDialog.afterClosed().subscribe({
             next: (res) => {
                 if (res) {
-                    if (this.data?.showIcon) {
-                        this.iconData.url = res[0].assets[0].url;
-                        if (this.iconData.url && (this.iconData.url.includes('.png') || this.iconData.url.includes('.svg'))) {
-                            this.eventsService.iconChanged.emit({ id: this.sectionId + this.iconData.id, icon: this.iconData });
-                        }
-                    }
-                    else {
-                        this.imageData.url = res[0].assets[0].url;
-                    }
+                    this.imageData.url = res[0].assets[0].url;
                 }
                 this.imgLoader = false;
             }
         });
     }
-    changeIconColor() {
-        debugger;
-        this.eventsService.iconChanged.emit({ id: this.sectionId + this.iconData.id, icon: this.iconData });
-    }
     horizontalPosition() {
         this.eventsService.objectPositionChangeCheck.emit({ id: this.sectionId + this.imageData.id, position: this.imageData.position });
     }
     deleteImage() {
-        if (this.data?.showIcon) {
-            this.iconData.url = '';
-        }
-        else {
-            this.imageData.url = '';
-        }
+        this.imageData.url = '';
     }
     changeType(type) {
         this.selectedType = type;
@@ -2138,36 +2133,12 @@ class ImageEditorComponent {
             }
         }
     }
-    async imageHelperFunction() {
-        this.imageData = this.data.imageData;
-        this.addLink = true;
-        if (this.data?.imageData?.content) {
-            this.link = this.data.imageData?.content;
-            this.selectedType = this.link.linkType === RedirectionLinkType.Email || this.link.linkType === RedirectionLinkType.Phone ? RedirectionLinkType.External : this.link.linkType;
-            this.addLink = false;
-        }
-        this.getTemplatePage();
-        if (this.link?.redirectionUrl.includes("collections=")) {
-            await this.getCollectionList();
-            this.pageName = "Product List";
-            let query = this.link.redirectionUrl.split("?")[1];
-            const params = new URLSearchParams(query);
-            this.collectionPath = params.get('collections');
-        }
-        if (this.link?.redirectionUrl.includes("category=")) {
-            await this.getCategoryList();
-            this.pageName = "Product List";
-            let query = this.link.redirectionUrl.split("?")[1];
-            const params = new URLSearchParams(query);
-            this.categoryPath = params.get('category');
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageEditorComponent, deps: [{ token: EventsService }, { token: ElementServiceService }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageEditorComponent, isStandalone: true, selector: "simpo-image-editor", ngImport: i0, template: "<section class=\"main-section\">\r\n  <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n    <div class=\"head-text\">Image Settings</div>\r\n    <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\"\r\n      (click)=\"dialogRef.close()\">close</mat-icon>\r\n  </div>\r\n  <div>\r\n    <!-- <p class=\"heading mb-0\">Image</p> -->\r\n    <div class=\"upload-image cp\" *ngIf=\"!imageData.url && !iconData.url\" (click)=\"updateImage()\">\r\n      <img loading=\"lazy\"\r\n        src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n        alt=\"\">\r\n      <p class=\"upload-text mb-0\">Upload a file</p>\r\n      <p class=\"upload-text mb-0\">or select an existing one</p>\r\n      <span class=\"upload-text\">up to 32MB</span>\r\n    </div>\r\n    <div class=\"sec d-flex align-items-center\" *ngIf=\"imageData.url || iconData.url\">\r\n      <ng-container *ngIf=\"!imgLoader\">\r\n        <img [src]=\"imageData.url || iconData.url\" [alt]=\"imageData.altText ?? ''\">\r\n        <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n            height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n              d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n            </path>\r\n          </svg>\r\n        </div>\r\n\r\n        <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n            height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n              d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n            </path>\r\n          </svg>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"imgLoader\">\r\n        <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n          <mat-spinner></mat-spinner>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"!data.showIcon\">\r\n    <div class=\"w-100 p-0-10 mb-22\" *ngIf=\"imageData.hasOwnProperty('altText')\">\r\n      <p class=\"heading mb-2\">Alt text</p>\r\n      <input type=\"text\" placeholder=\"Enter alt text\" class=\"input-field w-100\" [(ngModel)]=\"imageData.altText\">\r\n      <div class=\"sub-text\">When the image fails to load, this text will be displayed.</div>\r\n    </div>\r\n\r\n    <div class=\"image mb-22\" *ngIf=\"imageData.hasOwnProperty('position')\">\r\n      <p class=\"heading mb-1\">Image Position</p>\r\n      <div class=\"horizontal-action\">\r\n        <label>Horizontal</label>\r\n        <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n          <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.x\"\r\n            (input)=\"horizontalPosition()\" class=\"w-75\">\r\n        </div>\r\n      </div>\r\n      <div class=\"horizontal-action\" style=\"margin-top: 5px;\">\r\n        <label>Vertical</label>\r\n        <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n          <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.y\"\r\n            (input)=\"horizontalPosition()\" class=\"w-75\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"groups cp px-3\">\r\n      <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n        (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n    </div>\r\n    <div class=\"field-container mt-3 mx-3\">\r\n      <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n        <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"link.pageId\" (change)=\"onPageChange($event)\">\r\n            <option value=\"\" selected>Select from your existing pages</option>\r\n            <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n              {{page.pageName}}</option>\r\n          </select>\r\n          <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n          </div>\r\n        </div>\r\n        <ng-container *ngIf=\"pageName == 'Product List'\">\r\n          <label class=\"input-label-1 mt-3 mb-2\">Select Collection</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"collectionPath\" (ngModelChange)=\"addCollectionToPath()\">\r\n              <option value=\"\" selected>Select from your existing pages</option>\r\n              <option *ngFor=\"let coll of collectionList\" style=\"padding: 10px;\" [value]=\"coll.collectionName\">\r\n                {{coll?.collectionName}}</option>\r\n            </select>\r\n          </div>\r\n          <label class=\"input-label-1 mt-3 mb-2\">Select Category</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"categoryPath\" (ngModelChange)=\"addCategoryToPath()\">\r\n              <option value=\"\" selected>Select from your existing pages</option>\r\n              <option *ngFor=\"let coll of categoryList\" style=\"padding: 10px;\" [value]=\"coll.categoryName\">\r\n                {{coll?.categoryName}}</option>\r\n            </select>\r\n          </div>\r\n        </ng-container>\r\n        <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n      </div>\r\n      <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n        <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"link.pageId\">\r\n            <option value=\"\" selected>Select the Section</option>\r\n            <option *ngFor=\"let section of templatePage[0]?.components\" [value]=\"section.id\">{{section.sectionName}}\r\n            </option>\r\n          </select>\r\n          <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between mt-10\">\r\n        <label class=\"input-label-2\">Open in a new browser tab</label>\r\n        <div class=\"form-check form-switch ml-auto\">\r\n          <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"link.newTab\"\r\n            role=\"switch\">\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n        <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"link.linkType\">\r\n            <option value=\"\" selected>Select the Type</option>\r\n            <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n          </select>\r\n          <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n          </div>\r\n        </div>\r\n        <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n          RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n        <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n          [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n      </div>\r\n\r\n\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <ng-container *ngIf=\"data.showIcon\">\r\n    <div class=\"icon-color px-3 mb-3 d-flex flex-column justify-content-center align-items-center\">\r\n      <label class=\"input-label-1 mb-4 w-100\">Icon Color</label>\r\n      <div [style.backgroundColor]=\"iconData.color\" class=\"custom-input\" (click)=\"colorInput.click()\"></div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.color\" (ngModelChange)=\"changeIconColor()\" class=\"input-text d-none\"\r\n        #colorInput />\r\n    </div>\r\n\r\n    <div class=\"background-on d-flex justify-content-between px-3 mb-2\">\r\n      <label class=\"input-label-1\">Show Background</label>\r\n      <div class=\"form-check form-switch ml-auto\">\r\n        <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"iconData.showBackground\"\r\n          role=\"switch\">\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"icon-background px-3  d-flex flex-column justify-content-center align-items-center\"\r\n      *ngIf=\"iconData.showBackground\">\r\n      <label class=\"input-label-1 mb-3 w-100\">Icon Background</label>\r\n      <div [style.backgroundColor]=\"iconData.backgroundColor\" class=\"custom-input\" (click)=\"colorInput1.click()\"></div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.backgroundColor\" class=\"input-text d-none\" #colorInput1 />\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.custom-input{height:35px;width:100%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.heading{color:#000;font-size:17px;font-weight:600}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.mb-0{margin-bottom:0!important}.desc{color:#fafafa;font-size:15px}.input-field{font-size:14px;outline:none;border:unset;border-radius:5px;padding:10px;color:#090909e6;background:#fafafa}.horizontal-action{display:flex;justify-content:space-between;align-items:center}.horizontal-action label{width:25%;font-size:14px;font-weight:400!important}.main-section{display:flex;flex-direction:column}.image{display:flex;flex-direction:column;gap:5px;padding:0 10px}.slider{width:70%}.cp{cursor:pointer}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.f-18{font-size:18px}.header-section{padding:10px;box-shadow:0 0 4px #00000040}.header-section .head-text{font-weight:600;font-size:15px;color:#000}.header-section mat-icon{color:#2d264b}.p-0-10{padding:0 10px}.sub-text{font-size:13px;font-weight:400;line-height:24px;color:#09090980}.w-75{width:75%}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff;cursor:pointer}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}.input-label-1{font-size:16px;font-weight:600}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.mb-22{margin-bottom:22px}input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:20px;overflow:hidden;background:#fafafa}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:8px;width:10px;background:var(--primary-bg-color);box-shadow:-50rem 0 5rem 20rem #250d5e,-40rem 0 5rem 30rem #0bf,-30rem 0 2rem 25rem #250d5e,-25.5rem 0 0 25rem #0bf;border-radius:50%;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageEditorComponent, isStandalone: true, selector: "simpo-image-editor", ngImport: i0, template: "<section class=\"main-section\">\r\n  <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n    <div class=\"head-text\">Image Settings</div>\r\n    <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\"\r\n      (click)=\"dialogRef.close()\">close</mat-icon>\r\n  </div>\r\n  <div>\r\n    <!-- <p class=\"heading mb-0\">Image</p> -->\r\n    <div class=\"upload-image cp\" *ngIf=\"!imageData.url\" (click)=\"updateImage()\">\r\n      <img loading=\"lazy\"\r\n        src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n        alt=\"\">\r\n      <p class=\"upload-text mb-0\">Upload a file</p>\r\n      <p class=\"upload-text mb-0\">or select an existing one</p>\r\n      <span class=\"upload-text\">up to 32MB</span>\r\n    </div>\r\n    <div class=\"sec d-flex align-items-center\" *ngIf=\"imageData.url\">\r\n      <ng-container *ngIf=\"!imgLoader\">\r\n        <img  [src]=\"imageData.url\" [alt]=\"imageData.altText\">\r\n        <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n            height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n              d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n            </path>\r\n          </svg>\r\n        </div>\r\n\r\n        <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n            height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n              d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n            </path>\r\n          </svg>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"imgLoader\">\r\n        <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n          <mat-spinner></mat-spinner>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"w-100 p-0-10 mb-22\" *ngIf=\"imageData.hasOwnProperty('altText')\">\r\n    <p class=\"heading mb-2\">Alt text</p>\r\n    <input type=\"text\" placeholder=\"Enter alt text\" class=\"input-field w-100\" [(ngModel)]=\"imageData.altText\">\r\n    <div class=\"sub-text\">When the image fails to load, this text will be displayed.</div>\r\n  </div>\r\n\r\n  <div class=\"image mb-22\" *ngIf=\"imageData.hasOwnProperty('position')\">\r\n    <p class=\"heading mb-1\">Image Position</p>\r\n    <div class=\"horizontal-action\">\r\n      <label>Horizontal</label>\r\n      <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n        <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.x\"\r\n          (input)=\"horizontalPosition()\" class=\"w-75\">\r\n      </div>\r\n    </div>\r\n    <div class=\"horizontal-action\" style=\"margin-top: 5px;\">\r\n      <label>Vertical</label>\r\n      <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n        <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.y\"\r\n          (input)=\"horizontalPosition()\" class=\"w-75\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"groups cp px-3\">\r\n    <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n      (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n  </div>\r\n  <div class=\"field-container mt-3 mx-3\">\r\n    <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n      <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n      <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n        <select [(ngModel)]=\"link.pageId\" (change)=\"onPageChange($event)\">\r\n          <option value=\"\" selected>Select from your existing pages</option>\r\n          <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n            {{page.pageName}}</option>\r\n        </select>\r\n        <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"pageName == 'Product List'\">\r\n        <label class=\"input-label-1 mt-3 mb-2\">Select Collection</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"collectionPath\" (ngModelChange)=\"addCollectionToPath()\">\r\n            <option value=\"\" selected>Select from your existing pages</option>\r\n            <option *ngFor=\"let coll of collectionList\" style=\"padding: 10px;\" [value]=\"coll.collectionName\">\r\n              {{coll?.collectionName}}</option>\r\n          </select>\r\n        </div>\r\n        <label class=\"input-label-1 mt-3 mb-2\">Select Category</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"categoryPath\" (ngModelChange)=\"addCategoryToPath()\">\r\n            <option value=\"\" selected>Select from your existing pages</option>\r\n            <option *ngFor=\"let coll of categoryList\" style=\"padding: 10px;\" [value]=\"coll.categoryName\">\r\n              {{coll?.categoryName}}</option>\r\n          </select>\r\n        </div>\r\n      </ng-container>\r\n      <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n    </div>\r\n    <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n      <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n      <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n        <select [(ngModel)]=\"link.pageId\">\r\n          <option value=\"\" selected>Select the Section</option>\r\n          <option *ngFor=\"let section of templatePage[0]?.components\" [value]=\"section.id\">{{section.sectionName}}\r\n          </option>\r\n        </select>\r\n        <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-between mt-10\">\r\n      <label class=\"input-label-2\">Open in a new browser tab</label>\r\n      <div class=\"form-check form-switch ml-auto\">\r\n        <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"link.newTab\"\r\n          role=\"switch\">\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n      <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n      <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n        <select [(ngModel)]=\"link.linkType\">\r\n          <option value=\"\" selected>Select the Type</option>\r\n          <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n        </select>\r\n        <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n        </div>\r\n      </div>\r\n      <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n        RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n      <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n        [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n    </div>\r\n\r\n\r\n  </div>\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.heading{color:#000;font-size:17px;font-weight:600}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.mb-0{margin-bottom:0!important}.desc{color:#fafafa;font-size:15px}.input-field{font-size:14px;outline:none;border:unset;border-radius:5px;padding:10px;color:#090909e6;background:#fafafa}.horizontal-action{display:flex;justify-content:space-between;align-items:center}.horizontal-action label{width:25%;font-size:14px;font-weight:400!important}.main-section{display:flex;flex-direction:column}.image{display:flex;flex-direction:column;gap:5px;padding:0 10px}.slider{width:70%}.cp{cursor:pointer}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.f-18{font-size:18px}.header-section{padding:10px;box-shadow:0 0 4px #00000040}.header-section .head-text{font-weight:600;font-size:15px;color:#000}.header-section mat-icon{color:#2d264b}.p-0-10{padding:0 10px}.sub-text{font-size:13px;font-weight:400;line-height:24px;color:#09090980}.w-75{width:75%}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff;cursor:pointer}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}.input-label-1{font-size:16px;font-weight:600}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.mb-22{margin-bottom:22px}input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:20px;overflow:hidden;background:#fafafa}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:8px;width:10px;background:var(--primary-bg-color);box-shadow:-50rem 0 5rem 20rem #250d5e,-40rem 0 5rem 30rem #0bf,-30rem 0 2rem 25rem #250d5e,-25.5rem 0 0 25rem #0bf;border-radius:50%;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-image-editor', standalone: true, imports: [CommonModule, FormsModule, MatIconModule, MatSliderModule, MatProgressSpinner], template: "<section class=\"main-section\">\r\n  <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n    <div class=\"head-text\">Image Settings</div>\r\n    <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\"\r\n      (click)=\"dialogRef.close()\">close</mat-icon>\r\n  </div>\r\n  <div>\r\n    <!-- <p class=\"heading mb-0\">Image</p> -->\r\n    <div class=\"upload-image cp\" *ngIf=\"!imageData.url && !iconData.url\" (click)=\"updateImage()\">\r\n      <img loading=\"lazy\"\r\n        src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n        alt=\"\">\r\n      <p class=\"upload-text mb-0\">Upload a file</p>\r\n      <p class=\"upload-text mb-0\">or select an existing one</p>\r\n      <span class=\"upload-text\">up to 32MB</span>\r\n    </div>\r\n    <div class=\"sec d-flex align-items-center\" *ngIf=\"imageData.url || iconData.url\">\r\n      <ng-container *ngIf=\"!imgLoader\">\r\n        <img [src]=\"imageData.url || iconData.url\" [alt]=\"imageData.altText ?? ''\">\r\n        <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n            height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n              d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n            </path>\r\n          </svg>\r\n        </div>\r\n\r\n        <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n            height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n              d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n            </path>\r\n          </svg>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"imgLoader\">\r\n        <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n          <mat-spinner></mat-spinner>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"!data.showIcon\">\r\n    <div class=\"w-100 p-0-10 mb-22\" *ngIf=\"imageData.hasOwnProperty('altText')\">\r\n      <p class=\"heading mb-2\">Alt text</p>\r\n      <input type=\"text\" placeholder=\"Enter alt text\" class=\"input-field w-100\" [(ngModel)]=\"imageData.altText\">\r\n      <div class=\"sub-text\">When the image fails to load, this text will be displayed.</div>\r\n    </div>\r\n\r\n    <div class=\"image mb-22\" *ngIf=\"imageData.hasOwnProperty('position')\">\r\n      <p class=\"heading mb-1\">Image Position</p>\r\n      <div class=\"horizontal-action\">\r\n        <label>Horizontal</label>\r\n        <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n          <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.x\"\r\n            (input)=\"horizontalPosition()\" class=\"w-75\">\r\n        </div>\r\n      </div>\r\n      <div class=\"horizontal-action\" style=\"margin-top: 5px;\">\r\n        <label>Vertical</label>\r\n        <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n          <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.y\"\r\n            (input)=\"horizontalPosition()\" class=\"w-75\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"groups cp px-3\">\r\n      <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n        (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n    </div>\r\n    <div class=\"field-container mt-3 mx-3\">\r\n      <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n        <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"link.pageId\" (change)=\"onPageChange($event)\">\r\n            <option value=\"\" selected>Select from your existing pages</option>\r\n            <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n              {{page.pageName}}</option>\r\n          </select>\r\n          <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n          </div>\r\n        </div>\r\n        <ng-container *ngIf=\"pageName == 'Product List'\">\r\n          <label class=\"input-label-1 mt-3 mb-2\">Select Collection</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"collectionPath\" (ngModelChange)=\"addCollectionToPath()\">\r\n              <option value=\"\" selected>Select from your existing pages</option>\r\n              <option *ngFor=\"let coll of collectionList\" style=\"padding: 10px;\" [value]=\"coll.collectionName\">\r\n                {{coll?.collectionName}}</option>\r\n            </select>\r\n          </div>\r\n          <label class=\"input-label-1 mt-3 mb-2\">Select Category</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"categoryPath\" (ngModelChange)=\"addCategoryToPath()\">\r\n              <option value=\"\" selected>Select from your existing pages</option>\r\n              <option *ngFor=\"let coll of categoryList\" style=\"padding: 10px;\" [value]=\"coll.categoryName\">\r\n                {{coll?.categoryName}}</option>\r\n            </select>\r\n          </div>\r\n        </ng-container>\r\n        <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n      </div>\r\n      <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n        <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"link.pageId\">\r\n            <option value=\"\" selected>Select the Section</option>\r\n            <option *ngFor=\"let section of templatePage[0]?.components\" [value]=\"section.id\">{{section.sectionName}}\r\n            </option>\r\n          </select>\r\n          <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between mt-10\">\r\n        <label class=\"input-label-2\">Open in a new browser tab</label>\r\n        <div class=\"form-check form-switch ml-auto\">\r\n          <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"link.newTab\"\r\n            role=\"switch\">\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n        <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"link.linkType\">\r\n            <option value=\"\" selected>Select the Type</option>\r\n            <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n          </select>\r\n          <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n          </div>\r\n        </div>\r\n        <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n          RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n        <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n          [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n      </div>\r\n\r\n\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <ng-container *ngIf=\"data.showIcon\">\r\n    <div class=\"icon-color px-3 mb-3 d-flex flex-column justify-content-center align-items-center\">\r\n      <label class=\"input-label-1 mb-4 w-100\">Icon Color</label>\r\n      <div [style.backgroundColor]=\"iconData.color\" class=\"custom-input\" (click)=\"colorInput.click()\"></div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.color\" (ngModelChange)=\"changeIconColor()\" class=\"input-text d-none\"\r\n        #colorInput />\r\n    </div>\r\n\r\n    <div class=\"background-on d-flex justify-content-between px-3 mb-2\">\r\n      <label class=\"input-label-1\">Show Background</label>\r\n      <div class=\"form-check form-switch ml-auto\">\r\n        <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"iconData.showBackground\"\r\n          role=\"switch\">\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"icon-background px-3  d-flex flex-column justify-content-center align-items-center\"\r\n      *ngIf=\"iconData.showBackground\">\r\n      <label class=\"input-label-1 mb-3 w-100\">Icon Background</label>\r\n      <div [style.backgroundColor]=\"iconData.backgroundColor\" class=\"custom-input\" (click)=\"colorInput1.click()\"></div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.backgroundColor\" class=\"input-text d-none\" #colorInput1 />\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.custom-input{height:35px;width:100%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.heading{color:#000;font-size:17px;font-weight:600}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.mb-0{margin-bottom:0!important}.desc{color:#fafafa;font-size:15px}.input-field{font-size:14px;outline:none;border:unset;border-radius:5px;padding:10px;color:#090909e6;background:#fafafa}.horizontal-action{display:flex;justify-content:space-between;align-items:center}.horizontal-action label{width:25%;font-size:14px;font-weight:400!important}.main-section{display:flex;flex-direction:column}.image{display:flex;flex-direction:column;gap:5px;padding:0 10px}.slider{width:70%}.cp{cursor:pointer}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.f-18{font-size:18px}.header-section{padding:10px;box-shadow:0 0 4px #00000040}.header-section .head-text{font-weight:600;font-size:15px;color:#000}.header-section mat-icon{color:#2d264b}.p-0-10{padding:0 10px}.sub-text{font-size:13px;font-weight:400;line-height:24px;color:#09090980}.w-75{width:75%}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff;cursor:pointer}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}.input-label-1{font-size:16px;font-weight:600}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.mb-22{margin-bottom:22px}input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:20px;overflow:hidden;background:#fafafa}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:8px;width:10px;background:var(--primary-bg-color);box-shadow:-50rem 0 5rem 20rem #250d5e,-40rem 0 5rem 30rem #0bf,-30rem 0 2rem 25rem #250d5e,-25.5rem 0 0 25rem #0bf;border-radius:50%;cursor:pointer}\n"] }]
+            args: [{ selector: 'simpo-image-editor', standalone: true, imports: [CommonModule, FormsModule, MatIconModule, MatSliderModule, MatProgressSpinner], template: "<section class=\"main-section\">\r\n  <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n    <div class=\"head-text\">Image Settings</div>\r\n    <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\"\r\n      (click)=\"dialogRef.close()\">close</mat-icon>\r\n  </div>\r\n  <div>\r\n    <!-- <p class=\"heading mb-0\">Image</p> -->\r\n    <div class=\"upload-image cp\" *ngIf=\"!imageData.url\" (click)=\"updateImage()\">\r\n      <img loading=\"lazy\"\r\n        src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n        alt=\"\">\r\n      <p class=\"upload-text mb-0\">Upload a file</p>\r\n      <p class=\"upload-text mb-0\">or select an existing one</p>\r\n      <span class=\"upload-text\">up to 32MB</span>\r\n    </div>\r\n    <div class=\"sec d-flex align-items-center\" *ngIf=\"imageData.url\">\r\n      <ng-container *ngIf=\"!imgLoader\">\r\n        <img  [src]=\"imageData.url\" [alt]=\"imageData.altText\">\r\n        <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n            height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n              d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n            </path>\r\n          </svg>\r\n        </div>\r\n\r\n        <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n            height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n              d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n            </path>\r\n          </svg>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"imgLoader\">\r\n        <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n          <mat-spinner></mat-spinner>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"w-100 p-0-10 mb-22\" *ngIf=\"imageData.hasOwnProperty('altText')\">\r\n    <p class=\"heading mb-2\">Alt text</p>\r\n    <input type=\"text\" placeholder=\"Enter alt text\" class=\"input-field w-100\" [(ngModel)]=\"imageData.altText\">\r\n    <div class=\"sub-text\">When the image fails to load, this text will be displayed.</div>\r\n  </div>\r\n\r\n  <div class=\"image mb-22\" *ngIf=\"imageData.hasOwnProperty('position')\">\r\n    <p class=\"heading mb-1\">Image Position</p>\r\n    <div class=\"horizontal-action\">\r\n      <label>Horizontal</label>\r\n      <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n        <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.x\"\r\n          (input)=\"horizontalPosition()\" class=\"w-75\">\r\n      </div>\r\n    </div>\r\n    <div class=\"horizontal-action\" style=\"margin-top: 5px;\">\r\n      <label>Vertical</label>\r\n      <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n        <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.y\"\r\n          (input)=\"horizontalPosition()\" class=\"w-75\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"groups cp px-3\">\r\n    <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n      (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n  </div>\r\n  <div class=\"field-container mt-3 mx-3\">\r\n    <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n      <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n      <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n        <select [(ngModel)]=\"link.pageId\" (change)=\"onPageChange($event)\">\r\n          <option value=\"\" selected>Select from your existing pages</option>\r\n          <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n            {{page.pageName}}</option>\r\n        </select>\r\n        <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"pageName == 'Product List'\">\r\n        <label class=\"input-label-1 mt-3 mb-2\">Select Collection</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"collectionPath\" (ngModelChange)=\"addCollectionToPath()\">\r\n            <option value=\"\" selected>Select from your existing pages</option>\r\n            <option *ngFor=\"let coll of collectionList\" style=\"padding: 10px;\" [value]=\"coll.collectionName\">\r\n              {{coll?.collectionName}}</option>\r\n          </select>\r\n        </div>\r\n        <label class=\"input-label-1 mt-3 mb-2\">Select Category</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"categoryPath\" (ngModelChange)=\"addCategoryToPath()\">\r\n            <option value=\"\" selected>Select from your existing pages</option>\r\n            <option *ngFor=\"let coll of categoryList\" style=\"padding: 10px;\" [value]=\"coll.categoryName\">\r\n              {{coll?.categoryName}}</option>\r\n          </select>\r\n        </div>\r\n      </ng-container>\r\n      <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n    </div>\r\n    <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n      <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n      <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n        <select [(ngModel)]=\"link.pageId\">\r\n          <option value=\"\" selected>Select the Section</option>\r\n          <option *ngFor=\"let section of templatePage[0]?.components\" [value]=\"section.id\">{{section.sectionName}}\r\n          </option>\r\n        </select>\r\n        <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-between mt-10\">\r\n      <label class=\"input-label-2\">Open in a new browser tab</label>\r\n      <div class=\"form-check form-switch ml-auto\">\r\n        <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"link.newTab\"\r\n          role=\"switch\">\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n      <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n      <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n        <select [(ngModel)]=\"link.linkType\">\r\n          <option value=\"\" selected>Select the Type</option>\r\n          <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n        </select>\r\n        <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n        </div>\r\n      </div>\r\n      <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n        RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n      <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n        [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n    </div>\r\n\r\n\r\n  </div>\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.heading{color:#000;font-size:17px;font-weight:600}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.mb-0{margin-bottom:0!important}.desc{color:#fafafa;font-size:15px}.input-field{font-size:14px;outline:none;border:unset;border-radius:5px;padding:10px;color:#090909e6;background:#fafafa}.horizontal-action{display:flex;justify-content:space-between;align-items:center}.horizontal-action label{width:25%;font-size:14px;font-weight:400!important}.main-section{display:flex;flex-direction:column}.image{display:flex;flex-direction:column;gap:5px;padding:0 10px}.slider{width:70%}.cp{cursor:pointer}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.f-18{font-size:18px}.header-section{padding:10px;box-shadow:0 0 4px #00000040}.header-section .head-text{font-weight:600;font-size:15px;color:#000}.header-section mat-icon{color:#2d264b}.p-0-10{padding:0 10px}.sub-text{font-size:13px;font-weight:400;line-height:24px;color:#09090980}.w-75{width:75%}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff;cursor:pointer}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}.input-label-1{font-size:16px;font-weight:600}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.mb-22{margin-bottom:22px}input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:20px;overflow:hidden;background:#fafafa}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:8px;width:10px;background:var(--primary-bg-color);box-shadow:-50rem 0 5rem 20rem #250d5e,-40rem 0 5rem 30rem #0bf,-30rem 0 2rem 25rem #250d5e,-25.5rem 0 0 25rem #0bf;border-radius:50%;cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: ElementServiceService }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -2180,7 +2151,6 @@ class ImageEditorDirective {
         this._eventService = _eventService;
         this.router = router;
         this.appImageEditor = false;
-        this.showIcon = false;
         this.HIGHLIGHT_BORDER = '3px solid #283E90';
     }
     ngOnInit() {
@@ -2219,9 +2189,7 @@ class ImageEditorDirective {
                 panelClass: 'link-editor',
                 data: {
                     imageData: this.imageData,
-                    iconData: this.iconData,
-                    sectionId: this.sectionId,
-                    showIcon: this.showIcon
+                    sectionId: this.sectionId
                 }
             });
         });
@@ -2257,12 +2225,12 @@ class ImageEditorDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageEditorDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.MatDialog }, { token: EventsService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ImageEditorDirective, isStandalone: true, selector: "[appImageEditor]", inputs: { appImageEditor: "appImageEditor", imageData: "imageData", sectionId: "sectionId", showIcon: "showIcon", iconData: "iconData" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ImageEditorDirective, isStandalone: true, selector: "img[appImageEditor]", inputs: { appImageEditor: "appImageEditor", imageData: "imageData", sectionId: "sectionId" }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageEditorDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[appImageEditor]',
+                    selector: 'img[appImageEditor]',
                     standalone: true
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.MatDialog }, { type: EventsService }, { type: i2$2.Router }], propDecorators: { appImageEditor: [{
@@ -2271,10 +2239,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], sectionId: [{
                 type: Input
-            }], showIcon: [{
-                type: Input
-            }], iconData: [{
-                type: Input
             }] } });
 class HoverAnimationDirective {
@@ -2478,7 +2442,7 @@ class SetDynamicBackgroundDirective {
         else {
             this.el.nativeElement.style.backgroundColor = 'transparent';
             this.el.nativeElement.style.setProperty('padding', '0');
-            // this.el.nativeElement.style.setProperty('border-radius', '0');
+            this.el.nativeElement.style.setProperty('border-radius', '0');
             this.el.nativeElement.style.setProperty('border', 'none');
         }
     }
@@ -2525,51 +2489,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['simpoSetDynamicBackground']
             }] } });
-class IconDirectiveDirective {
-    constructor(eventsService, el) {
-        this.eventsService = eventsService;
-        this.el = el;
-    }
-    ngOnInit() {
-        this.eventsService.iconChanged.subscribe((data) => {
-            debugger;
-            if (data.id === this.iconId) {
-                this.iconData = data.icon;
-                this.updateIconStyles();
-            }
-        });
-    }
-    ngOnChanges() {
-        this.updateIconStyles();
-    }
-    updateIconStyles() {
-        this.el.nativeElement.style.maskImage = `url(${this.iconData?.url})`;
-        this.el.nativeElement.style.maskSize = 'contain';
-        this.el.nativeElement.style.maskPosition = 'center center';
-        this.el.nativeElement.style.maskRepeat = 'no-repeat';
-        this.el.nativeElement.style.backgroundColor = this.iconData?.color || 'transparent';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconDirectiveDirective, deps: [{ token: EventsService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: IconDirectiveDirective, isStandalone: true, selector: "[simpoIconDirective]", inputs: { iconData: ["simpoIconDirective", "iconData"], iconId: "iconId" }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconDirectiveDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[simpoIconDirective]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: EventsService }, { type: i0.ElementRef }], propDecorators: { iconData: [{
-                type: Input,
-                args: ['simpoIconDirective']
-            }], iconId: [{
-                type: Input
-            }] } });
 class BelowImageCardComponent {
     constructor(_eventService) {
         this._eventService = _eventService;
     }
     ngOnInit() {
+        console.log(this.styles);
     }
     redirectTo() {
         this._eventService.buttonRedirection.emit({ data: this.data.button });
@@ -2580,26 +2505,8 @@ class BelowImageCardComponent {
     getContentAnimation() {
         return { contentAnimation: this.styles?.contentAnimation };
     }
-    get getIconStyls() {
-        return this.data?.icon;
-    }
-    ngOnChanges() {
-        console.log('Below Image Card Data', this.data);
-    }
-    getAlignment() {
-        switch (this.styles?.layout?.align) {
-            case 'left':
-                return 'justify-items-start';
-            case 'right':
-                return 'justify-items-end';
-            case 'center':
-                return 'justify-items-center';
-            default:
-                return 'justify-items-start';
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BelowImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit" }, usesOnChanges: true, ngImport: i0, template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n  [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content.display.showCard}\"\r\n  [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\"\r\n  [backgroundColor]=\"styles?.background?.color\" [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\"\r\n  class=\"mt-4\" [class]=\"getAlignment()\">\r\n  <!-- <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\r\n    [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\r\n    *ngIf=\"data?.highlight?.highlighted === true\">\r\n    <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n  </div> -->\r\n  <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n  <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n    [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\"\r\n    *ngIf=\"content.display.showImage\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\"\r\n    [sectionId]=\"data?.id\">\r\n\r\n\r\n  <ng-container *ngIf=\"content.display.showIcon && (data.icon.url.includes('.png') || data.icon.url.includes('.svg'))\">\r\n    <div [simpoCorner]=\"styles?.corners\" [class.hovering-effect]=\"content?.display?.showHoverEffect\" [id]=\"componentId\"\r\n      class=\"logo-img d-flex justify-content-center align-items-center\"\r\n      [style.background]=\"data?.icon?.showBackground ? data?.icon?.backgroundColor : 'transparent'\"\r\n      [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\" [sectionId]=\"componentId\"\r\n      [showIcon]=\"content.display.showIcon\">\r\n      <div [id]=\"componentId\" [iconId]=\"componentId + data?.icon?.id\" [simpoIconDirective]=\"data?.icon\" class=\"w-75 h-100\"\r\n        [class.w-100]=\"!data?.icon?.showBackground\"></div>\r\n    </div>\r\n  </ng-container>\r\n  <img loading=\"lazy\" class=\"logo-img\" [src]=\"data.icon.url\" [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\"\r\n    [sectionId]=\"componentId\" [showIcon]=\"content.display.showIcon\"\r\n    *ngIf=\"content.display.showIcon && !data.icon.url.includes('.png') && !data.icon.url.includes('.svg')\"\r\n    class=\"logo-img\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n    [class.hovering-effect]=\"content?.display?.showHoverEffect\">\r\n  <div class=\"ptb-1 content-side\">\r\n    <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n    </div>\r\n    <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n    </div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\"\r\n      [simpoHoverAnimation]=\"getContentAnimation()\" class=\"mt-3\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\"\r\n        [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\" [edit]=\"edit\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".w-100{width:100%}.ptb-1{padding-top:1rem}.mb-1{margin-bottom:1rem!important}.box-shadow{background:#fff!important;box-shadow:0 10px 40px #0a32231a;padding:14px 28px!important;color:#000!important}.logo-img{width:70px;height:70px;margin-top:.25rem}.fw-600{font-weight:600}.hovering-effect:hover{transform:scale(1.1) rotate(5deg)}.justify-items-start{justify-items:flex-start}.justify-items-end{justify-items:flex-end}.justify-items-center{justify-items:center}\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: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: HoverAnimationDirective, selector: "[simpoHoverAnimation]", inputs: ["simpoHoverAnimation"] }, { kind: "directive", type: TranslateOnhoverDirective, selector: "[simpoTranslateOnhover]", inputs: ["simpoTranslateOnhover"] }, { kind: "directive", type: SetDynamicBackgroundDirective, selector: "[simpoSetDynamicBackground]", inputs: ["backgroundColor", "simpoSetDynamicBackground"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit" }, ngImport: i0, template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\" [simpoCorner]=\"styles?.corners\"\r\n  [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content.display.showCard}\" [id]=\"componentId\"\r\n  [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" [id]=\"componentId\" [backgroundColor]=\"styles?.background?.color\" [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\" class=\"mt-4\">\r\n  <!-- <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\r\n    [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\r\n    *ngIf=\"data?.highlight?.highlighted === true\">\r\n    <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n  </div> -->\r\n  <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n    <img loading=\"lazy\"  [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n      [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\r\n      loading=\"lazy\"  [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"data?.id\">\r\n\r\n    <img loading=\"lazy\" [src]=\"data.image.url\"  *ngIf=\"content.display.showIcon\" class=\"logo-img\"  [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\">\r\n    <!-- [ngClass]=\"{'px-2': content?.display?.showCard || content?.display?.showCardBackground}\" -->\r\n  <!-- </div> -->\r\n  <div class=\"ptb-1 content-side\">\r\n    <div class=\"heading-medium mb-1\"  *ngIf=\"content.display.showHeading\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n    </div>\r\n    <div class=\"body-desc\"  *ngIf=\"content.display.showContent\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n    </div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\"  [simpoHoverAnimation]=\"getContentAnimation()\" class=\"mt-3\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\r\n        [color]=\"styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\" [edit]=\"edit\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1rem}.mb-1{margin-bottom:1rem!important}.box-shadow{background:#fff!important;box-shadow:0 10px 40px #0a32231a;padding:14px 28px!important;color:#000!important}.logo-img{width:70px;height:70px;margin-top:.25rem}.fw-600{font-weight:600}\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: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: HoverAnimationDirective, selector: "[simpoHoverAnimation]", inputs: ["simpoHoverAnimation"] }, { kind: "directive", type: TranslateOnhoverDirective, selector: "[simpoTranslateOnhover]", inputs: ["simpoTranslateOnhover"] }, { kind: "directive", type: SetDynamicBackgroundDirective, selector: "[simpoSetDynamicBackground]", inputs: ["backgroundColor", "simpoSetDynamicBackground"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BelowImageCardComponent, decorators: [{
             type: Component,
@@ -2612,9 +2519,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ImageEditorDirective,
                         HoverAnimationDirective,
                         TranslateOnhoverDirective,
-                        SetDynamicBackgroundDirective,
-                        IconDirectiveDirective
-                    ], template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n  [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content.display.showCard}\"\r\n  [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\"\r\n  [backgroundColor]=\"styles?.background?.color\" [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\"\r\n  class=\"mt-4\" [class]=\"getAlignment()\">\r\n  <!-- <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\r\n    [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\r\n    *ngIf=\"data?.highlight?.highlighted === true\">\r\n    <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n  </div> -->\r\n  <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n  <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n    [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\"\r\n    *ngIf=\"content.display.showImage\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\"\r\n    [sectionId]=\"data?.id\">\r\n\r\n\r\n  <ng-container *ngIf=\"content.display.showIcon && (data.icon.url.includes('.png') || data.icon.url.includes('.svg'))\">\r\n    <div [simpoCorner]=\"styles?.corners\" [class.hovering-effect]=\"content?.display?.showHoverEffect\" [id]=\"componentId\"\r\n      class=\"logo-img d-flex justify-content-center align-items-center\"\r\n      [style.background]=\"data?.icon?.showBackground ? data?.icon?.backgroundColor : 'transparent'\"\r\n      [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\" [sectionId]=\"componentId\"\r\n      [showIcon]=\"content.display.showIcon\">\r\n      <div [id]=\"componentId\" [iconId]=\"componentId + data?.icon?.id\" [simpoIconDirective]=\"data?.icon\" class=\"w-75 h-100\"\r\n        [class.w-100]=\"!data?.icon?.showBackground\"></div>\r\n    </div>\r\n  </ng-container>\r\n  <img loading=\"lazy\" class=\"logo-img\" [src]=\"data.icon.url\" [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\"\r\n    [sectionId]=\"componentId\" [showIcon]=\"content.display.showIcon\"\r\n    *ngIf=\"content.display.showIcon && !data.icon.url.includes('.png') && !data.icon.url.includes('.svg')\"\r\n    class=\"logo-img\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n    [class.hovering-effect]=\"content?.display?.showHoverEffect\">\r\n  <div class=\"ptb-1 content-side\">\r\n    <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n    </div>\r\n    <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n    </div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\"\r\n      [simpoHoverAnimation]=\"getContentAnimation()\" class=\"mt-3\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\"\r\n        [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\" [edit]=\"edit\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".w-100{width:100%}.ptb-1{padding-top:1rem}.mb-1{margin-bottom:1rem!important}.box-shadow{background:#fff!important;box-shadow:0 10px 40px #0a32231a;padding:14px 28px!important;color:#000!important}.logo-img{width:70px;height:70px;margin-top:.25rem}.fw-600{font-weight:600}.hovering-effect:hover{transform:scale(1.1) rotate(5deg)}.justify-items-start{justify-items:flex-start}.justify-items-end{justify-items:flex-end}.justify-items-center{justify-items:center}\n"] }]
+                        SetDynamicBackgroundDirective
+                    ], template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\" [simpoCorner]=\"styles?.corners\"\r\n  [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content.display.showCard}\" [id]=\"componentId\"\r\n  [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" [id]=\"componentId\" [backgroundColor]=\"styles?.background?.color\" [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\" class=\"mt-4\">\r\n  <!-- <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\r\n    [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\r\n    *ngIf=\"data?.highlight?.highlighted === true\">\r\n    <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n  </div> -->\r\n  <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n    <img loading=\"lazy\"  [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n      [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\r\n      loading=\"lazy\"  [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"data?.id\">\r\n\r\n    <img loading=\"lazy\" [src]=\"data.image.url\"  *ngIf=\"content.display.showIcon\" class=\"logo-img\"  [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\">\r\n    <!-- [ngClass]=\"{'px-2': content?.display?.showCard || content?.display?.showCardBackground}\" -->\r\n  <!-- </div> -->\r\n  <div class=\"ptb-1 content-side\">\r\n    <div class=\"heading-medium mb-1\"  *ngIf=\"content.display.showHeading\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n    </div>\r\n    <div class=\"body-desc\"  *ngIf=\"content.display.showContent\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n    </div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\"  [simpoHoverAnimation]=\"getContentAnimation()\" class=\"mt-3\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\r\n        [color]=\"styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\" [edit]=\"edit\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1rem}.mb-1{margin-bottom:1rem!important}.box-shadow{background:#fff!important;box-shadow:0 10px 40px #0a32231a;padding:14px 28px!important;color:#000!important}.logo-img{width:70px;height:70px;margin-top:.25rem}.fw-600{font-weight:600}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], styles: [{
@@ -2820,7 +2726,7 @@ class CoveringImageCardComponent {
         return { contentAnimation: this.styles?.contentAnimation };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CoveringImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CoveringImageCardComponent, isStandalone: true, selector: "simpo-covering-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit" }, ngImport: i0, template: "<div class=\"parent-tab\" [id]=\"componentId\"\r\n  (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\r\n  <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\r\n    [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\r\n    *ngIf=\"data?.highlight?.highlighted === true\">\r\n    <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n  </div>\r\n  <ng-container *ngIf=\"content.display.showImage\">\r\n  <img loading=\"lazy\"  [src]=\"data.image.url\" [alt]=\"data.image.altText\"  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\"\r\n  [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\" [class]=\"componentId+data.image.id\" [simpoImageDirective]=\"styles?.image\" loading=\"lazy\" [appImageEditor]=\"true\" [imageData]=\"data?.image\" [sectionId]=\"data?.id\">\r\n  </ng-container>\r\n  <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n    <div class=\"heading-medium mb-1\"  *ngIf=\"content.display.showHeading\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n    </div>\r\n    <div class=\"body-desc\"  *ngIf=\"content.display.showContent\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n    </div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" [simpoHoverAnimation]=\"getContentAnimation()\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\" [edit]=\"edit\" [backgroundInfo]=\"styles?.background\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}.popular-tag{position:absolute;top:0;right:0;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important;z-index:10}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: HoverAnimationDirective, selector: "[simpoHoverAnimation]", inputs: ["simpoHoverAnimation"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CoveringImageCardComponent, isStandalone: true, selector: "simpo-covering-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit" }, ngImport: i0, template: "<div class=\"parent-tab\" [id]=\"componentId\"\r\n  (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\r\n  <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\r\n    [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\r\n    *ngIf=\"data?.highlight?.highlighted === true\">\r\n    <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n  </div>\r\n  <ng-container *ngIf=\"content.display.showImage\">\r\n  <img loading=\"lazy\"  [src]=\"data.image.url\" [alt]=\"data.image.altText\"  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\"\r\n  [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\" [class]=\"componentId+data.image.id\" [simpoImageDirective]=\"styles?.image\" loading=\"lazy\" [appImageEditor]=\"true\" [imageData]=\"data?.image\" [sectionId]=\"data?.id\">\r\n  </ng-container>\r\n  <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n    <div class=\"heading-medium mb-1\"  *ngIf=\"content.display.showHeading\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n    </div>\r\n    <div class=\"body-desc\"  *ngIf=\"content.display.showContent\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n    </div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" [simpoHoverAnimation]=\"getContentAnimation()\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\" [edit]=\"edit\" [backgroundInfo]=\"styles?.background\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}.popular-tag{position:absolute;top:0;right:0;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important;z-index:10}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: HoverAnimationDirective, selector: "[simpoHoverAnimation]", inputs: ["simpoHoverAnimation"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CoveringImageCardComponent, decorators: [{
             type: Component,
@@ -5043,10 +4949,10 @@ class BannerSectionComponent extends BaseSection {
             return `linear-gradient(${direction} ,${this.styles?.background?.accentColor},${this.styles?.background?.secondaryAccentColor})`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BannerSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerSectionComponent, isStandalone: true, selector: "simpo-banner-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n  [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n  class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  [attr.style]=\"customClass\">\r\n  <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n    class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100 overflow-hidden\"\r\n      [simpoCorner]=\"styles?.corners\" [simpoMergeHeader]=\"styles?.merge\"\r\n      [backgroundInfo]=\"styles?.background?.image\"\r\n      [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\">\r\n      <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n      <div class=\"py-5\"\r\n        [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')}\"\r\n        [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n        <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n          [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n          [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n          [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n          <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n            [simpoContainerAlignment]=\"stylesLayout\">\r\n            <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n              [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n              [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n              [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n              [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n          </div>\r\n          <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n            [ngClass]=\"{'col-lg-12':  content?.image?.showImage && isBorderlessImage, 'col-lg-6':!isBorderlessImage || !content?.image?.showImage,'box p-3': content?.display?.showCard}\"\r\n            [style.background]=\"content?.display?.showCard ?  getColor() : 'transparent'\"\r\n            [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n            [simpoCorner]=\"styles?.corners\">\r\n            <div *ngFor=\"let item of content?.inputText\">\r\n              <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n                [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n              <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n              [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n              <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n                <div class=\"card_wrapper\">\r\n                  <div class=\"container_card visible\">\r\n                    <div class=\"card-section\">\r\n                      <div class=\"second-part-card\">\r\n                      </div>\r\n                      <div class=\"first-part-card d-flex align-items-center\"\r\n                        [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                        <img loading=\"lazy\" class=\"tick-img\"\r\n                          src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n                          alt=\"something\" />\r\n                        <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                          [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n              [simpoContainerAlignment]=\"stylesLayout\">\r\n              <div *ngFor=\"let button of data?.action?.buttons\">\r\n                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                  [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n                  [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n  <div class=\"col-10 col-sm-8 col-lg-6\"\r\n    [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n    style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n    [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n    <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n      [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n      [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n      [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n  </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.gap-15{gap:15px}.box{border:8px solid rgba(240,240,240,.8);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerSectionComponent, isStandalone: true, selector: "simpo-banner-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n  [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n  class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  [attr.style]=\"customClass\">\r\n  <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n    class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100\"\r\n      [simpoCorner]=\"styles?.corners\" [simpoMergeHeader]=\"styles?.merge\"\r\n      [backgroundInfo]=\"styles?.background?.image\"\r\n      [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\">\r\n      <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n      <div class=\"py-5\"\r\n        [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')}\"\r\n        [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n        <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n          [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n          [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n          [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n          <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n            [simpoContainerAlignment]=\"stylesLayout\">\r\n            <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n              [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n              [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n              [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n              [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n          </div>\r\n          <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n            [ngClass]=\"{'col-lg-12':  content?.image?.showImage && isBorderlessImage, 'col-lg-6':!isBorderlessImage || !content?.image?.showImage,'box p-3': content?.display?.showCard}\"\r\n            [style.background]=\"content?.display?.showCard ?  getColor() : 'transparent'\"\r\n            [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n            [simpoCorner]=\"styles?.corners\">\r\n            <div *ngFor=\"let item of content?.inputText\">\r\n              <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n                [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n              <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n              [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n              <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n                <div class=\"card_wrapper\">\r\n                  <div class=\"container_card visible\">\r\n                    <div class=\"card-section\">\r\n                      <div class=\"second-part-card\">\r\n                      </div>\r\n                      <div class=\"first-part-card d-flex align-items-center\"\r\n                        [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                        <img loading=\"lazy\" class=\"tick-img\"\r\n                          src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n                          alt=\"something\" />\r\n                        <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                          [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n              [simpoContainerAlignment]=\"stylesLayout\">\r\n              <div *ngFor=\"let button of data?.action?.buttons\">\r\n                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                  [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n                  [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n  <div class=\"col-10 col-sm-8 col-lg-6\"\r\n    [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n    style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n    [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n    <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n      [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n      [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n      [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n  </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.gap-15{gap:15px}.box{border:8px solid rgba(240,240,240,.8);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
                 // SimpoHoverBorderDirective,
                 //directive
-                SimpoBorderlessDirective, selector: "[simpoBorderless]", inputs: ["simpoBorderless"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: MergeHeaderDirective, selector: "[simpoMergeHeader]", inputs: ["simpoMergeHeader", "backgroundInfo"] }] }); }
+                SimpoBorderlessDirective, selector: "[simpoBorderless]", inputs: ["simpoBorderless"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: MergeHeaderDirective, selector: "[simpoMergeHeader]", inputs: ["simpoMergeHeader", "backgroundInfo"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BannerSectionComponent, decorators: [{
             type: Component,
@@ -5076,7 +4982,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SpacingAroundDirective,
                         ImageEditorDirective,
                         MergeHeaderDirective
-                    ], template: "<div [id]=\"data?.id\"\r\n  [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n  class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  [attr.style]=\"customClass\">\r\n  <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n    class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100 overflow-hidden\"\r\n      [simpoCorner]=\"styles?.corners\" [simpoMergeHeader]=\"styles?.merge\"\r\n      [backgroundInfo]=\"styles?.background?.image\"\r\n      [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\">\r\n      <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n      <div class=\"py-5\"\r\n        [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')}\"\r\n        [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n        <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n          [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n          [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n          [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n          <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n            [simpoContainerAlignment]=\"stylesLayout\">\r\n            <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n              [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n              [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n              [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n              [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n          </div>\r\n          <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n            [ngClass]=\"{'col-lg-12':  content?.image?.showImage && isBorderlessImage, 'col-lg-6':!isBorderlessImage || !content?.image?.showImage,'box p-3': content?.display?.showCard}\"\r\n            [style.background]=\"content?.display?.showCard ?  getColor() : 'transparent'\"\r\n            [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n            [simpoCorner]=\"styles?.corners\">\r\n            <div *ngFor=\"let item of content?.inputText\">\r\n              <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n                [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n              <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n              [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n              <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n                <div class=\"card_wrapper\">\r\n                  <div class=\"container_card visible\">\r\n                    <div class=\"card-section\">\r\n                      <div class=\"second-part-card\">\r\n                      </div>\r\n                      <div class=\"first-part-card d-flex align-items-center\"\r\n                        [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                        <img loading=\"lazy\" class=\"tick-img\"\r\n                          src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n                          alt=\"something\" />\r\n                        <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                          [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n              [simpoContainerAlignment]=\"stylesLayout\">\r\n              <div *ngFor=\"let button of data?.action?.buttons\">\r\n                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                  [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n                  [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n  <div class=\"col-10 col-sm-8 col-lg-6\"\r\n    [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n    style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n    [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n    <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n      [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n      [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n      [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n  </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.gap-15{gap:15px}.box{border:8px solid rgba(240,240,240,.8);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"] }]
+                    ], template: "<div [id]=\"data?.id\"\r\n  [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n  class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  [attr.style]=\"customClass\">\r\n  <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n    class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100\"\r\n      [simpoCorner]=\"styles?.corners\" [simpoMergeHeader]=\"styles?.merge\"\r\n      [backgroundInfo]=\"styles?.background?.image\"\r\n      [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\">\r\n      <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n      <div class=\"py-5\"\r\n        [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')}\"\r\n        [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n        <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n          [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n          [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n          [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n          <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n            [simpoContainerAlignment]=\"stylesLayout\">\r\n            <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n              [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n              [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n              [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n              [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n          </div>\r\n          <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n            [ngClass]=\"{'col-lg-12':  content?.image?.showImage && isBorderlessImage, 'col-lg-6':!isBorderlessImage || !content?.image?.showImage,'box p-3': content?.display?.showCard}\"\r\n            [style.background]=\"content?.display?.showCard ?  getColor() : 'transparent'\"\r\n            [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n            [simpoCorner]=\"styles?.corners\">\r\n            <div *ngFor=\"let item of content?.inputText\">\r\n              <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n                [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n              <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n              [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n              <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n                <div class=\"card_wrapper\">\r\n                  <div class=\"container_card visible\">\r\n                    <div class=\"card-section\">\r\n                      <div class=\"second-part-card\">\r\n                      </div>\r\n                      <div class=\"first-part-card d-flex align-items-center\"\r\n                        [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                        <img loading=\"lazy\" class=\"tick-img\"\r\n                          src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n                          alt=\"something\" />\r\n                        <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                          [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n              [simpoContainerAlignment]=\"stylesLayout\">\r\n              <div *ngFor=\"let button of data?.action?.buttons\">\r\n                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                  [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n                  [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n  <div class=\"col-10 col-sm-8 col-lg-6\"\r\n    [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n    style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n    [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n    <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n      [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n      [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n      [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n  </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.gap-15{gap:15px}.box{border:8px solid rgba(240,240,240,.8);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -5416,7 +5322,7 @@ class FaqSectionComponent extends BaseSection {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FaqSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FaqSectionComponent, isStandalone: true, selector: "simpo-faq-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div class=\"col-xxl-8 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n    [spacingHorizontal]=\"stylesLayout\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n    <div [simpoPositionLayoutDirective]=\"style?.positionLayout\" class=\"row\" [id]=\"data?.id\"\r\n      [simpoLayout]=\"style?.layout\" [simpoContainerAlignment]=\"stylesLayout\" [class]=\"getLayout()\">\r\n      <div class=\"container-fluid flex-col col-lg-6 col-md-6 cursor-pointer mx-0\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"w-100\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n        <div *ngFor=\"let itemData of content?.listItem?.data; let i = index\" class=\"data data-1 w-100 cursor-pointer\"\r\n          [ngStyle]=\"\r\n    unCollapsedList.includes(i) && data?.styles?.background?.accentBackgroundType == 'Gradient'\r\n      ? { background: 'linear-gradient(90deg, ' + data?.styles?.background?.accentColor + ', ' + data?.styles?.background?.secondaryAccentColor + ')' }\r\n      :     unCollapsedList.includes(i) && data?.styles?.background?.accentBackgroundType == 'Solid' ?\r\n{ background : data?.styles?.background?.accentColor} : {}\r\n  \">\r\n          <div style=\"display: flex;align-items: center;justify-content: space-between; cursor: pointer;\"\r\n            class=\"question\">\r\n            <p class=\"heading-medium  position-relative content-side mb-0 text-start cursor-pointer\"\r\n              data-toggle=\"collapse\" [ngClass]=\"{'fw-600':unCollapsedList.includes(i)}\">\r\n              <!-- <span style=\"display: block;\" > -->\r\n              <simpo-text-editor [(value)]=\"itemData.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              <!-- </span> -->\r\n            </p>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\"\r\n              [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\"\r\n              (click)=\"toggleContent(i)\">close</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"\r\n              [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\"\r\n              (click)=\"toggleContent(i)\">add</mat-icon>\r\n          </div>\r\n          <div class=\"body-large desc multi-collapse text-start cursor-pointer\"\r\n            [ngClass]=\"{'collapse': !unCollapsedList.includes(i)}\">\r\n            <simpo-text-editor [(value)]=\"itemData.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-10 col-sm-6 col-md-6 col-lg-6 d-flex align-items-center\" *ngIf=\"content?.image?.showImage\">\r\n        <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n          [alt]=\"content?.image?.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n          [sectionId]=\"data?.id\" class=\"h-100 w-100\" />\r\n      </div>\r\n    </div>\r\n    <!-- <div *ngIf=\"content?.image?.showImage && screenWidth > 475\" class=\"row g-5\" [id]=\"data?.id\"\r\n      [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15 content-side \"\r\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n\r\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\"\r\n          class=\"data\" (click)=\"toggleContent(i)\">\r\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative content-side cursor-pointer\"\r\n            data-toggle=\"collapse\">\r\n            <simpo-text-editor [(value)]=\"itemData.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\"\r\n              style=\"position:relative; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"\r\n              style=\"position: relative; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n          </p>\r\n          <div class=\"body-large desc multi-collapse cursor-pointer\"\r\n            [ngClass]=\"{'collapse': !unCollapsedList.includes(i)}\">\r\n            <simpo-text-editor [(value)]=\"itemData.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n        <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n          [alt]=\"content?.image?.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n          [sectionId]=\"data?.id\" />\r\n      </div>\r\n    </div> -->\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".mb-2{margin-bottom:2.5rem!important}mat-icon{font-family:Material Icons!important}.data{gap:1rem;padding-top:.5rem;padding-bottom:.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer;width:100%}.flex-col{display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}.question p{width:95%}.question mat-icon{width:5%}@media only screen and (max-width: 475px){.row{display:flex;flex-direction:column-reverse}.col-10{width:100%!important}.question p{width:90%}.question mat-icon{width:10%}}.float-end{position:absolute;top:0}@media only screen and (min-width: 500px){.heading-medium{font-size:20px}}@media screen and (max-width: 500px){.heading-medium{font-size:16px}.desc{font-size:14px}}.w-60{width:60%}.data-1{box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;border-radius:10px;text-align:center;padding-left:1rem;padding-right:1rem;margin-bottom:1rem;cursor:pointer}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
                 //directive
-                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }] }); }
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FaqSectionComponent, decorators: [{
             type: Component,
@@ -5594,7 +5500,7 @@ class ImageCarouselSectionComponent extends BaseSection {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageCarouselSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageCarouselSectionComponent, isStandalone: true, selector: "simpo-image-carousel-section", inputs: { data: "data", index: "index", customClass: "customClass", nextComponentColor: "nextComponentColor", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n  [attr.style]=\"customClass\">\r\n  <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\r\n    <div *ngFor=\"let text of data?.content?.inputText\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\"\r\n      [ngClass]=\"{'px-0 py-0': style?.fullWidth, 'image-screen': style?.layout?.fit === 'screen' && style?.fullWidth, 'img-screen-notext': style?.layout?.fit === 'screen' && style?.fullWidth && text.value === ''}\"\r\n      [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row mlr-0 w-100\" *ngIf=\"data?.content?.inputText?.length\" [id]=\"data?.id\"\r\n        [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"edit || text.value\">\r\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n\r\n       <div id=\"carouselExampleCaptions\" class=\"carousel slide\" data-bs-ride=\"carousel\"\r\n         [ngClass]=\"{'mb-0 px-0 py-0': style?.fullWidth, 'mb-1': !style?.fullWidth}\">\r\n         <div class=\"carousel-inner\">\r\n            <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\"\r\n              [class.active]=\"i === 0\">\r\n              <div class=\"row m-0\">\r\n                <div class=\"col d-flex p-0\" *ngIf=\"screenWidth >= 475\">\r\n                  <!-- <img loading=\"lazy\"  class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n                  <img loading=\"lazy\"\r\n                    [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\r\n                    *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\r\n                    class=\"d-block position-relative blur\"\r\n                    style=\"object-fit: cover !important;width: 100%;max-width: 20%; left: -20px\"\r\n                    [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\r\n                    [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\" loading=\"lazy\"\r\n                    [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\r\n                  <img loading=\"lazy\"\r\n                    [ngClass]=\"{'full-width-image': style?.fullWidth, 'not-full-width': !style?.fullWidth, 'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\r\n                    [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\"\r\n                    [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\"\r\n                    [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\r\n                    loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\r\n                  <!-- <img loading=\"lazy\"  class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n                  <img loading=\"lazy\"\r\n                    [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\r\n                    *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\r\n                    class=\"d-block position-relative blur\"\r\n                    style=\"object-fit: cover !important;width: 100%; max-width: 20%;right: -20px;\"\r\n                    [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\r\n                    [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\" loading=\"lazy\"\r\n                    [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\r\n                </div>\r\n                <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\r\n                  <img loading=\"lazy\" class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\"\r\n                    [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\"\r\n                    [simpoObjectPosition]=\"img?.image?.position\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n                    [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\r\n            <span class=\"carousel-control-prev-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\r\n              <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_left</mat-icon>\r\n            </span>\r\n            <span class=\"sr-only\">Previous</span>\r\n\r\n          </a>\r\n          <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\r\n            <span class=\"carousel-control-next-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\r\n              <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_right</mat-icon>\r\n            </span>\r\n            <span class=\"sr-only\">Next</span>\r\n\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.full-width-image{width:100%;height:70vh}.previous-icon{background:#fff;border-radius:50%}.not-full-width{width:60%}.icon{color:#000!important;font-size:40px!important}.image-height-content{height:70vh}.image-height-screen{height:calc(90vh + -0px);min-height:0px!important}.image-screen{height:calc(110vh + -0px);min-height:0px!important}.img-screen-notext{height:calc(90vh + -0px);min-height:0px!important}.btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.blur{filter:blur(5px)}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0;margin-bottom:10%}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}@media only screen and (max-width: 475px){.carousel-control-prev,.carousel-control-next{display:none!important}}.caratlane-indicator{display:flex;align-items:center;justify-content:center;background:#1e1f21b3;border-radius:18px;min-width:50px;height:32px;padding:0 16px;font-size:1rem;font-weight:600;color:#fff;margin:18px auto 0;box-shadow:0 2px 8px #151d481a;letter-spacing:1px}.caratlane-indicator .current{font-weight:700;font-size:1rem;color:#fff}.caratlane-indicator .divider,.caratlane-indicator .total{font-weight:500;color:#fff;opacity:.9;margin-left:2px}.caratlane-indicator{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#0009;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;z-index:10;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);min-width:45px;text-align:center}@media (max-width: 768px){.caratlane-indicator{bottom:15px;padding:6px 12px;font-size:12px}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
                 //directive
-                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageCarouselSectionComponent, decorators: [{
             type: Component,
@@ -5694,7 +5600,7 @@ class ImageGridSectionComponent extends BaseSection {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageGridSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageGridSectionComponent, isStandalone: true, selector: "simpo-image-grid-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n        [ngStyle]=\"style?.fullWidth ? {'padding': '0px'} : {}\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\">\r\n            <ng-container *ngIf=\"edit ||  (text.value && text.value.length > 0)\">\r\n              <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"style?.gridStyle == 'Style1'\">\r\n          <div class=\"main-image-section d-flex\" [class.row]=\"style?.direction == 'ROW' \"\r\n            [class.wrap-scroll]=\"style?.direction == 'ROW'\" [class.flex-wrap]=\"style?.direction == 'COLUMN'\"\r\n            [id]=\"data?.id\">\r\n            <div class=\"image-section p-3\" *ngFor=\"let img of content?.listItem?.data\"\r\n              [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\r\n              [attr.style]=\"style?.removeGaps ? 'padding: 0px !important; margin: 0px !important;' : {}\">\r\n              <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\" [src]=\"img.image.url\"\r\n                [alt]=\"img.image.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\"\r\n                [sectionId]=\"data?.id\" class=\"w-100\" />\r\n            </div>\r\n          </div>\r\n\r\n        </ng-container>\r\n        <ng-container *ngIf=\"style?.gridStyle == 'Style2'\">\r\n          <div class=\"grid h-100\" [class.remove-gap]=\"style?.removeGaps\" [class.p-0]=\"style?.fullWidth\">\r\n            <ng-container *ngFor=\"let img of content?.listItem?.data\">\r\n              <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\" [src]=\"img.image.url\"\r\n                [alt]=\"img.image.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\"\r\n                [sectionId]=\"data?.id\" class=\"w-100\" />\r\n            </ng-container>\r\n          </div>\r\n\r\n\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.wrap-scroll{overflow:scroll;flex-wrap:nowrap}@media screen and (min-width : 1200px){.grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;grid-gap:5px}.grid img:first-child:last-child{grid-column:1 / span 2}.grid img:first-child:nth-last-child(2),.grid img:nth-child(2):last-child{grid-column:span 1;height:100%}.grid img:nth-child(3n+1):not(:last-child){grid-column:1;grid-row:span 2;height:100%}.grid img:nth-child(3n+2){grid-column:2}.grid img:nth-child(3n+3){grid-column:2;align-self:end}.grid img:nth-child(3n+4){grid-column:1 / span 2}}.remove-gap{grid-gap:0!important}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}.main-image-container{width:100%}.right-column-container{display:flex;flex-direction:column;height:100%;padding:0}.image-half-height{height:50%!important;flex:1}.image-half-height:first-child{margin-bottom:2px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
                 //directive
-                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageGridSectionComponent, decorators: [{
             type: Component,
@@ -5803,7 +5709,7 @@ class ImageSectionComponent extends BaseSection {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageSectionComponent, isStandalone: true, selector: "simpo-image-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar':canMergeNavbar}\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"main-section\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"img-text-card\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n                <!-- <div *ngFor=\"let text of data?.content?.inputText\">\r\n                    <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n                </div> -->\r\n\r\n                <div class=\"image-section w-100\" (click)=\"redirectTo()\">\r\n                    <img loading=\"lazy\" [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n                        [src]=\"content?.image?.url\" [ngStyle]=\"{'opacity': (canMergeNavbar ? '0' : getBackgroundOpacity)}\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\r\n                        [id]=\"data?.id\"\r\n                        loading=\"lazy\"   [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n\r\n                </div>\r\n                <div *ngIf=\"style?.showText\" class=\"col-lg-9 d-flex flex-column content-side\" class=\"text-mobile\" style=\"position: absolute;\" [simpoPositionLayoutDirective]=\"style?.positionLayout\" [simpoContentAlignment]=\"style?.contentAlignment\" [id]=\"data?.id\">\r\n                  <div *ngFor=\"let item of content?.inputText\" [spacingHorizontal]=\"stylesLayout\">\r\n                    <!-- <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n                    <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                  </div>\r\n                  <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n                    <div *ngFor=\"let button of data?.action?.buttons\">\r\n                      <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\" [buttonId]=\"button.id\" [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isMerged]=\"style?.merge ?? false\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.img-text-card{display:flex;align-items:center;justify-content:center}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.mergeNavbar{margin-top:-175px}.total-container{height:auto;position:relative}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.image-section img{object-fit:cover}.text-content-card{justify-content:center;align-items:center}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media only screen and (max-width: 475px){.h-80{height:15rem;border-radius:1rem;margin-bottom:10%}.main-section{min-height:auto!important}.text-image{position:absolute;height:14rem}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
                 //directive
-                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageSectionComponent, decorators: [{
             type: Component,
@@ -6051,7 +5957,7 @@ class TestimonialSectionComponent extends BaseSection {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestimonialSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row content-side\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n        </div>\r\n\r\n        <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\">\r\n          <ol class=\"carousel-indicators\">\r\n            <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n              data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n          </ol>\r\n          <div class=\"carousel-inner\">\r\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n              [class.active]=\"i === 0\" data-bs-interval=\"10000\">\r\n              <div style=\"width: 90%; margin: auto;\">\r\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n                [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n                  <img loading=\"lazy\"  [src]=\"testimonial.image.url\" class=\"mb-1\" loading=\"lazy\" [simpoContainerLayout]=\"getLayout\"   [appImageEditor]=\"edit || false\" [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\r\n                  <!-- <p class=\"heading-medium\" [innerHTML]=\"testimonial.inputText[0].value\"></p> -->\r\n                  <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                  <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\r\n                    <div class=\"d-flex\"> -\r\n                   <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </div> \r\n                  </ng-container>               \r\n\r\n                  <!-- <span href=\"#\" class=\"py-2 px-4 mb-1\" [innerHTML]=\"'- '+testimonial.inputText[1].value\"></span> -->\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"prev\">\r\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Previous</span>\r\n          </a>\r\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"next\">\r\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Next</span>\r\n          </a>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}.heading-medium{font-weight:400!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
                 //directive
-                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContainerFitDirective, selector: "[simpoContainerLayout]", inputs: ["simpoContainerLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContainerFitDirective, selector: "[simpoContainerLayout]", inputs: ["simpoContainerLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestimonialSectionComponent, decorators: [{
             type: Component,
@@ -6131,7 +6037,7 @@ class TextImageSectionComponent extends BaseSection {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextImageSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextImageSectionComponent, isStandalone: true, selector: "simpo-text-image-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar':canMergeNavbar}\" [simpoBackground]=\"styles?.background\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n      [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n      [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n      <div *ngIf=\"styles?.showImage === true\" class=\"col-10 col-sm-8 col-lg-6\">\r\n        <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoObjectPosition]=\"content?.image?.position\"\r\n          [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n          [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n          class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" loading=\"lazy\" loading=\"lazy\"\r\n          [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n          [class.borderLess]=\"styles?.showImage && styles?.borderLessImage\" />\r\n      </div>\r\n      <div class=\"col-lg-6 d-flex flex-column content-side\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n        [id]=\"data?.id\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <!-- <div [innerHTML]=\"item.value | sanitizeHtml\"\r\n            [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n          </div> -->\r\n          <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of data?.action?.buttons\">\r\n            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n              [edit]=\"edit\" [buttonId]=\"button.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n  </div>\r\n   <div *ngIf=\"showEditors\" [ngClass]=\"{'hover_effect': edit}\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n        [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}.mergeNavbar{margin-top:-75px;padding-top:75px}.borderLess{height:100%}@media only screen and (max-width: 475px){.col-10{width:100%!important}}.row{margin-left:0;margin-right:0}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
                 //directive
-                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextImageSectionComponent, decorators: [{
             type: Component,
@@ -6504,6 +6410,7 @@ class RestService {
         this.environmentTypeSubscriber = null;
         this.isJewellery = false;
         this.orraBaseUrl = 'https://stageapi-orra.letsmobility.com/';
+        this.passBookUrl = "https://stage-passbook.simpo.ai/";
         // this.environmentTypeSubscriber = this.eventService.environmentType.subscribe((response) => {
         //   if (response == "DEV") {
         //     this.BASE_URL = "https://dev-api.simpo.ai/";
@@ -6545,11 +6452,18 @@ class RestService {
     getCategoriesByCollectionId(collectionId) {
         return this.http.get(this.BASE_URL + `ecommerce/inventory/category/collectionId?collectionId=${collectionId}`).pipe(map((response) => response.data?.map((category) => new Category(category))));
     }
+    getPassbookOrderStatus(orderId) {
+        const token = localStorage.getItem("token");
+        const headers = new HttpHeaders({
+            'Authorization': `Bearer ${token}`
+        });
+        return this.http.post(this.passBookUrl + `passbook/manual/payment/status?paymentOrderId=${orderId}`, {}, { headers: headers });
+    }
     getProductBySelectedCategory(categoryId) {
         return this.http.get(this.BASE_URL + `ecommerce/product/${categoryId}`);
     }
-    getAllSchemes(userCode) {
-        return this.http.get(this.orraBaseUrl + `passBook/summary/${userCode}`);
+    getAllSchemes(userId, storeId) {
+        return this.http.get(this.passBookUrl + `ext/connect/simpo/user?storeId=${storeId}`);
     }
     getAllRedemptionSchemes() {
         return this.http.get(this.orraBaseUrl + `passBook/redemption/amount/check?userCode=C_000313885`);
@@ -6895,6 +6809,24 @@ class RestService {
         }
         return map;
     }
+    generateToken(bId, userId, storeId, userType) {
+        return this.http.post(this.passBookUrl + `ext/connect/simpo/token?businessId=${bId}&storeId=${storeId}&userId=${userId}&userType=USER`, {});
+    }
+    getAllEnrolledSchemes(payload) {
+        return this.http.put(this.passBookUrl + 'ext/connect/simpo/scheme/list', payload);
+    }
+    enrollScheme(payload, checkCharges) {
+        const token = localStorage.getItem("token");
+        const headers = new HttpHeaders({
+            'Authorization': `Bearer ${token}`
+        });
+        if (checkCharges) {
+            return this.http.post(this.passBookUrl + 'passbook/cart/initiate/payment?manualPay=true', payload, { headers: headers });
+        }
+        else {
+            return this.http.post(this.passBookUrl + 'passbook/initiate/payment?manualPay=true', payload, { headers: headers });
+        }
+    }
     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 }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, providedIn: 'root' }); }
 }
@@ -7000,6 +6932,9 @@ class StorageServiceService {
             this.userCollectionRef = this.database.createObjectStore(this.userCollectionName, { keyPath: "userId" });
         };
     }
+    setToken(token) {
+        localStorage.setItem("token", token);
+    }
     updateAllData() {
         if (this.router.url.includes('cart'))
             return;
@@ -8637,7 +8572,7 @@ class CartComponent extends BaseSection {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$2.Router }, { token: RestService }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: i4$1.MessageService }, { token: i8$2.MatBottomSheet }, { token: i2$2.ActivatedRoute }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1$1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], viewQueries: [{ propertyName: "d2", first: true, predicate: ["d2"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n  <ng-container *ngIf=\"data\">\r\n    <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\r\n      [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\r\n      (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\r\n      [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\r\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\r\n        [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\r\n        *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\r\n        <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline isActive\">Address</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\r\n      </div>\r\n      <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && ecomConfigs?.appointmentBookingEnabled\">\r\n        <div class=\"cart-tabs\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n          <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\r\n            (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\r\n          <div [ngClass]=\"{'selected-cart-tab': cartType==='TRIAL'}\" (click)=\"cartType='TRIAL'\">Trial Cart\r\n            ({{trialCartItem?.length ?? 0}})</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\r\n        [simpoAnimation]=\"styles?.animation\">\r\n        <ng-container>\r\n          <!-- <div class=\"left-panel\">\r\n            <div class=\"my-bag\">\r\n              My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n            </div>\r\n            <div class=\"cart-items box-shadow\">\r\n              <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n                <div class=\"item-parent d-flex\">\r\n                  <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                      class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                      alt=\"\" (click)=\"goToProductDetails(item)\">\r\n                  </div>\r\n                  <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n                    <div class=\"lh-23\">\r\n                      <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n                      <div class=\"price-with-tax\">\r\n                        <span [innerHTML]='currency'></span> {{(item.discountedPrice ?? item.sellingPrice) | number:\r\n                        '1.0-2'}}\r\n                      </div>\r\n                      <ng-container *ngIf=\"item.itemVariant\">\r\n                        <div class=\"d-flex align-items-center\"\r\n                          *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n                          <strong class=\"fw-bold\">{{ varient }} : </strong>\r\n                          {{ item.itemVariant.properties[varient] | uppercase }}\r\n                        </div>\r\n                      </ng-container>\r\n                      <div class=\"item-quantity\">\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                        <span>{{item.quantity}}</span>\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-md-4 position-relative\" style=\"margin-left: auto; width: 0px; \">\r\n                    <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice ??\r\n                      item.sellingPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n                    <div>\r\n                      <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\"\r\n                        [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n              </ng-container>\r\n            </div>\r\n          </div> -->\r\n          <!-- <div class=\"right-panel\">\r\n            <div class=\"coupons box-shadow\" (click)=\"openDialog(CouponList)\">\r\n              <ng-container *ngIf=\"!responseData.billdetails?.couponId\">\r\n                <div class=\"d-flex flex-column\">\r\n                  <span style=\"font-weight: 600;\">Apply Coupon</span>\r\n                  <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n                </div>\r\n                <div [style.color]=\"styles?.background?.accentColor\" style=\"font-weight: 600;\">Apply</div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"responseData.billdetails?.couponId\">\r\n                <div class=\"d-flex flex-column\">\r\n                  <span style=\"font-weight: 600;\">Coupon</span>\r\n                  <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n                </div>\r\n                <div [style.color]=\"styles?.background?.accentColor\" (click)=\"removeCoupon($event)\">Remove</div>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"price-details box-shadow\">\r\n              <div class=\"price-parent-block\">\r\n                <div class=\"price-type\">Total Price</div>\r\n                <div class=\"price-value\"><span [innerHTML]='currency'></span>\r\n                  {{(responseData?.billdetails?.totalNetValue\r\n                  ?? 0) | number: '1.0-2'}}</div>\r\n              </div>\r\n              <div class=\"price-parent-block\">\r\n                <div class=\"price-type\">Total Tax</div>\r\n                <div class=\"price-value\"><span [innerHTML]='currency'></span> {{((!responseData.billdetails?.couponId ?\r\n                  responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n                  number:\r\n                  '1.0-2'}}</div>\r\n              </div>\r\n              <div class=\"price-parent-block\"\r\n                *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n                <div class=\"price-type\">Delivery Charge</div>\r\n                <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges\r\n                  |\r\n                  number: '1.0-2'}}</div>\r\n              </div>\r\n              <div class=\"price-parent-block\"\r\n                *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n                <div class=\"price-type\">Discount Amount</div>\r\n                <div class=\"price-value\"><span [innerHtml]='currency'></span>\r\n                  {{responseData?.billdetails?.discountAmount\r\n                  | number: '1.0-2'}}</div>\r\n              </div>\r\n              <hr>\r\n              <div class=\"price-parent-block\">\r\n                <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n                <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span>\r\n                  {{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) | number:\r\n                  '1.0-2'}}</div>\r\n              </div>\r\n\r\n            </div>\r\n            <div class=\"button-parent\">\r\n              <ng-container>\r\n                <button class=\"btn mobile-fixed\" (click)=\"!edit ?  proceedToCheckout() : ''\" [appButtonEditor]=\"edit ?? false\"\r\n                  simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                  [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\">{{data?.action?.buttons?.[0]?.content?.label ??\r\n                  'Checkout\r\n                  Cart'}}\r\n                  </button>\r\n                <button class=\"btn\" (click)=\"!edit ? proceedToListPage() : ''\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n                  [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n                  [id]=\"data?.id+getButtonId(1)\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n                  Shopping'}}</button>\r\n              </ng-container>\r\n            </div>\r\n\r\n          </div> -->\r\n          <ng-container *ngIf=\"cartType === 'SHOPPING'\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"cartType === 'TRIAL'\">\r\n            <ng-container *ngTemplateOutlet=\"(trialCartItem?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n          </ng-container>\r\n          <!-- <ng-container *ngTemplateOutlet=\"CARTPAGE\"></ng-container> -->\r\n        </ng-container>\r\n        <!-- <ng-container *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && cartType==='TRIAL'\">\r\n          <ng-container *ngTemplateOutlet=\"TRIAL_CART\">\r\n          </ng-container>\r\n        </ng-container> -->\r\n      </div>\r\n      <div class=\"d-flex checkoutPage\"\r\n        *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\r\n        <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\r\n        </ng-container>\r\n      </div>\r\n\r\n\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n          [isEcommerce]=\"true\"></simpo-hover-elements>\r\n      </div>\r\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n      </div>\r\n\r\n    </section>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!data\">\r\n    <section class=\"cart-window\">\r\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n          <span>Your Cart</span>\r\n        </div>\r\n        <div class=\"saving\"></div>\r\n      </div>\r\n      <div class=\"offers\">\r\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n          <span>Avail Offers / Coupons</span>\r\n        </div>\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </div>\r\n      <div class=\"small-items\">\r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n          <div class=\"small-item\">\r\n            <div class=\"d-flex\" style=\"gap: 5px;\">\r\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                  class=\"small-product-img\"\r\n                  [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n                  (click)=\"goToProductDetails(item)\">\r\n              </div>\r\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n              <div class=\"small-item-quantity\">\r\n                <span class=\"cursor\">-</span>\r\n                <span>{{item.quantity}}</span>\r\n                <span class=\"cursor\">+</span>\r\n              </div>\r\n              <div class=\"small-item-price\">\r\n                <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                </div>\r\n                <!-- <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"fotter-sec\">\r\n        <div class=\"delivery-add d-flex\">\r\n          <mat-icon>home</mat-icon>\r\n          <div class=\"address\">Tetsting</div>\r\n        </div>\r\n        <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\r\n            style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\r\n          {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n      </div>\r\n    </section>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n<ng-template #CouponList>\r\n  <section class=\"coupons-listing-section\">\r\n    <div class=\"coupon-heading\">\r\n      <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n        <mat-icon>keyboard_arrow_left</mat-icon>\r\n      </div>\r\n      <div class=\"header-text\">Apply Coupon</div>\r\n    </div>\r\n    <!-- <div class=\"coupon-search-sec\">\r\n      <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n      <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n    </div> -->\r\n    <div class=\"coupon-listing\">\r\n      <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n        <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n          <div class=\"coupon-details\"\r\n            [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\">\r\n            <div class=\"details__coupon-heading\">\r\n              <div class=\"coupon-brief\">\r\n                <div class=\"coupon-brief__left-sec\">\r\n                  <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n                    {{ couponDetails.couponCode | uppercase }}</div>\r\n                  <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n                </div>\r\n                <div class=\"coupon-brief__right-sec\">\r\n                  <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\r\n                    [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\r\n                    (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n                </div>\r\n              </div>\r\n              <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n                <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n                <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n              </div> -->\r\n            </div>\r\n            <ng-container *ngIf=\"couponDetails.status\">\r\n              <div class=\"details-divider\"></div>\r\n              <ul class=\"details__coupon-terms\">\r\n                <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n              </ul>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-template #showEmptyScreen>\r\n        <div class=\"empty-screen-container\">\r\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n          <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n          <div class=\"empty-screen__secondary-text\">\r\n            Looks like there are no coupons at the moment\r\n          </div>\r\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #CARTPAGE>\r\n  <div class=\"container\">\r\n    <div class=\"main-content\">\r\n      <div class=\"promo-banner\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n        *ngIf=\"cartType === 'SHOPPING' && ecomConfigs?.videoCallEnabled\" [simpoColor]=\"styles?.background?.color\">\r\n        <div class=\"promo-text\">\r\n          <h3>See It Before You Buy It</h3>\r\n          <p>Experience our designs in detail via video call</p>\r\n        </div>\r\n        <button class=\"see-live-btn\" (click)=\"scheduleVideoCall(responseData?.orderedItems)\">\r\n          \uD83D\uDCF9 SEE IT LIVE\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"cart-items\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"CARTITEM;context:{data: cartType === 'SHOPPING' ? responseData?.orderedItems : trialCartItem}\"></ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"sidebar\">\r\n      <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"cartType != 'TRIAL' && getUrl()\">\r\n        <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\r\n          <div class=\"toogle-switch\">\r\n            <div class=\"form-check form-switch\">\r\n              <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\r\n                [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <!-- <div class=\"select_matured_text  w-100 text-start cursor-pointer\"\r\n          *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\r\n          Select Matured Scheme\r\n        </div> -->\r\n        <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\r\n          *ngIf=\"selectedRedemption\">\r\n          Selected Scheme\r\n          <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\r\n            scheme-5000/M <span>Change</span></div>\r\n          <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\r\n            <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n      <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\r\n        <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\r\n      </div>\r\n      <div class=\"coupon-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" *ngIf=\"cartType === 'SHOPPING'\"\r\n        (click)=\"openDialog(CouponList)\" [simpoColor]=\"styles?.background?.color\">\r\n        <div class=\"coupon-left\">\r\n          <div class=\"coupon-icon\">%</div>\r\n          <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply Coupon</span>\r\n          <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon Applied</span>\r\n        </div>\r\n        <span *ngIf=\"!responseData.billdetails?.couponId\">\u25B6</span>\r\n        <span *ngIf=\"responseData.billdetails?.couponId\"\r\n          (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\r\n      </div>\r\n\r\n      <div class=\"delivery-section\" *ngIf=\"getUrl()\">\r\n        <div class=\"delivery-header\">\r\n          <mat-icon>gps_fixed</mat-icon>\r\n          <span *ngIf=\"cartType === 'SHOPPING'\">Delivering to</span>\r\n          <span *ngIf=\"cartType === 'TRIAL'\">Trial Location at</span>\r\n          <span class=\"pincode\">{{pincode}}</span>\r\n          <!-- <a class=\"change-link\">Change Pincode</a> -->\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"summary-section\">\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"summary-label\">Total Price</span>\r\n          <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue\r\n            ?? 0) | number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"summary-label\">Total Tax</span>\r\n          <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\r\n            responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n            number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n          <span class=\"summary-label\">Redeem Amount</span>\r\n          <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\"\r\n          *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n          <span class=\"summary-label\">Delivery Charge</span>\r\n          <span class=\"summary-value\">\u20B9{{responseData.billdetails.deliveryCharges\r\n            |\r\n            number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount \">\r\n          <span class=\"summary-label\">Discount Amount</span>\r\n          <span class=\"summary-value savings\"> \u20B9{{responseData?.billdetails?.discountAmount\r\n            | number: '1.0-2'}}</span>\r\n        </div>\r\n        <!-- <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"summary-label\">Coupon Discount</span>\r\n          <span class=\"summary-value apply-coupon\">Apply Coupon</span>\r\n        </div> -->\r\n        <!-- <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"summary-label\">Shipping (Standard)</span>\r\n          <span class=\"summary-value free\">Free</span>\r\n        </div> -->\r\n        <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"total-label\">Total Cost</span>\r\n          <span class=\"total-value\">\u20B9{{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ??\r\n            0)) - (cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n          <span class=\"summary-label\">Free Trial</span>\r\n          <span class=\"summary-value savings\">\u20B90</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n          <span class=\"summary-label\">Service Charge</span>\r\n          <span class=\"summary-value savings\">Free</span>\r\n        </div>\r\n        <div class=\"summary-row total-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n          <span class=\"total-label\">Total Cost</span>\r\n          <span class=\"total-value\">\u20B90 </span>\r\n        </div>\r\n      </div>\r\n      <button class=\"place-order-btn\" (click)=\"proceedToListPage()\" simpoButtonDirective\r\n        [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\r\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n        Shopping'}}</button>\r\n      <button class=\"place-order-btn mt-0\" (click)=\"proceedToCheckout()\" simpoButtonDirective\r\n        *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n        [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\r\n        Cart'}}</button>\r\n      <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\r\n        [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n        [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK\r\n        APPOINTMENT</button>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #CHECKOUTPAGE>\r\n  <div class=\"checkout-left-panel\">\r\n    <div class=\"checkout-main-content\">\r\n      <!-- <div class=\"delivery-options\">\r\n        <div class=\"delivery-option active\">\r\n          <div class=\"delivery-icon\"></div>\r\n          HOME DELIVERY\r\n        </div>\r\n        <div class=\"delivery-option\">\r\n          <div class=\"delivery-icon\"></div>\r\n          STORE PICK-UP\r\n        </div>\r\n      </div> -->\r\n\r\n      <div class=\"section-title\">Shipping Address</div>\r\n\r\n      <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\r\n        <div class=\"address-info\">\r\n          <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\r\n          <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n            {{defaultAddress?.stateName}}</div>\r\n          <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\r\n        <mat-icon>add</mat-icon>\r\n      </div>\r\n\r\n      <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\r\n\r\n      <div class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective *ngIf=\"defaultAddress\"\r\n        [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\"\r\n        [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\">\r\n        {{data?.action?.buttons?.[2]?.content?.label ?? 'Procced To Payment'}}\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"checkout-right-panel\">\r\n    <div class=\"order-summary\">\r\n      <div class=\"summary-title\">Order Summary</div>\r\n\r\n      <div class=\"checkout-product\">\r\n        <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n          <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\r\n            alt=\"\">\r\n          <div class=\"product-details\">\r\n            <div class=\"product-name\">{{item.itemName}}</div>\r\n            <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\r\n            <div class=\"product-price\">\u20B9{{((item.discountedPrice ??\r\n              item.sellingPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <div class=\"price-breakdown\">\r\n        <div class=\"price-row\">\r\n          <span>Total Price</span>\r\n          <span>\u20B9{{(responseData?.billdetails?.totalNetValue\r\n            ?? 0) | number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"price-row\">\r\n          <span>Total Tax</span>\r\n          <span>\u20B9{{((!responseData.billdetails?.couponId ?\r\n            responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n            number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n          <span class=\"summary-label\">Redeem Amount</span>\r\n          <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n\r\n        <div class=\"price-row discount\"\r\n          *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n          <span>Coupon Discount</span>\r\n          <span>- \u20B9{{responseData?.billdetails?.discountAmount\r\n            | number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"price-row\"\r\n          *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n          <span>Delivery Charge</span>\r\n          <span>{{responseData.billdetails.deliveryCharges\r\n            |\r\n            number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"price-row total\">\r\n          <span>TOTAL AMOUNT</span>\r\n          <span>\u20B9{{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) -\r\n            (cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #CARTITEM let-products=\"data\">\r\n  <div class=\"cart-item\" *ngFor=\"let item of products\">\r\n    <div class=\"item-image\">\r\n      <!-- <div class=\"earring-icon\">\uD83E\uDD8B</div> -->\r\n      <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n        (click)=\"goToProductDetails(item)\">\r\n    </div>\r\n    <div class=\"item-details\">\r\n      <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n      <div class=\"item-price\">\r\n        <span class=\"current-price\">\u20B9{{item.discountedPrice | number: '1.0-2'}}</span>\r\n        <span class=\"original-price\" *ngIf=\"item.sellingPrice > item.discountedPrice\">\u20B9{{item.sellingPrice | number:\r\n          '1.0-2'}}</span>\r\n        <span class=\"discount\" *ngIf=\"item.sellingPrice > item.discountedPrice\">Save \u20B9{{item.sellingPrice -\r\n          item.discountedPrice | number: '1.0-2'}}</span>\r\n      </div>\r\n      <div class=\"item-options\" *ngIf=\"cartType === 'SHOPPING'\">\r\n        <select name=\"\" id=\"\" (change)=\"changeQuantity($event, item)\" [(ngModel)]=\"item.quantity\">\r\n          <option [value]=\"value\" *ngFor=\"let value of quantity\">{{value}}</option>\r\n        </select>\r\n      </div>\r\n      <div class=\"item-options\" *ngIf=\"item.itemVariant\">\r\n        <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\r\n          item.itemVariant.properties[varient] | uppercase }}</span>\r\n      </div>\r\n      <div class=\"delivery-info\" *ngIf=\"cartType === 'SHOPPING' && getUrl()\">Delivery by - Tomorrow 6PM-9PM</div>\r\n      <div class=\"delivery-info\" *ngIf=\"cartType === 'TRIAL'\">Available to try from tomorrow</div>\r\n      <div class=\"pickup-info\" *ngIf=\"cartType === 'SHOPPING' && getUrl()\">\r\n        <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 6 Stores nearby</span>\r\n        <span>\u25B6</span>\r\n      </div>\r\n    </div>\r\n    <button class=\"remove-btn\" (click)=\"removeItem(item)\">\u2715</button>\r\n  </div>\r\n\r\n  <!-- <div class=\"cart-item\">\r\n    <div class=\"item-image\">\r\n      <div class=\"chain-icon\">\uD83D\uDD17</div>\r\n    </div>\r\n    <div class=\"item-details\">\r\n      <h3 class=\"item-title\">Lucid Cable Gold Chain</h3>\r\n      <div class=\"item-price\">\r\n        <span class=\"current-price\">\u20B921,163</span>\r\n      </div>\r\n      <div class=\"item-options\">\r\n        <span>Length: 16</span>\r\n        <span>Size: XXL</span>\r\n        <span>Color: Black</span>\r\n      </div>\r\n      <div class=\"delivery-info\">Delivery by - Tomorrow 6PM-9PM</div>\r\n      <div class=\"pickup-info\">\r\n        <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 4 Stores nearby</span>\r\n        <span>\u25B6</span>\r\n      </div>\r\n    </div>\r\n    <button class=\"remove-btn\">\u2715</button>\r\n  </div>\r\n\r\n  <div class=\"cart-item\">\r\n    <div class=\"item-image\">\r\n      <div class=\"chain-icon\">\uD83D\uDD17</div>\r\n    </div>\r\n    <div class=\"item-details\">\r\n      <h3 class=\"item-title\">Lucid Cable Gold Chain</h3>\r\n      <div class=\"item-price\">\r\n        <span class=\"current-price\">\u20B921,163</span>\r\n      </div>\r\n      <div class=\"item-options\">\r\n        <span>Length: 16</span>\r\n        <span>Size: XXL</span>\r\n        <span>Color: Black</span>\r\n      </div>\r\n      <div class=\"delivery-info\">Delivery by - Tomorrow 6PM-9PM</div>\r\n      <div class=\"pickup-info\">\r\n        <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 4 Stores nearby</span>\r\n        <span>\u25B6</span>\r\n      </div>\r\n    </div>\r\n    <button class=\"remove-btn\">\u2715</button>\r\n  </div> -->\r\n</ng-template>\r\n\r\n<ng-template #EMPTYITEM>\r\n  <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\r\n    <div class=\"empty-cart-container d-flex flex-column\">\r\n      <div class=\"cart-image\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n          [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\r\n      </div>\r\n      <div class=\"cart-text content-side\">\r\n        <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"d-flex justify-content-center\"\r\n            [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <button class=\"place-order-btn w-25 mx-auto\" (click)=\"proceedToListPage()\" simpoButtonDirective\r\n        [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n        Shopping'}}</button>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #SCHEME_REDEMPTION>\r\n  <div class=\"modal-body\">\r\n    <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\r\n      [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\r\n      <label for=\"individual\" class=\"scheme-card\">\r\n        <div class=\"scheme-info d-flex gap-1\">\r\n          <div class=\"form-check-radio\">\r\n            <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\r\n          </div>\r\n          <div class=\"right-side\">\r\n            <div class=\"scheme-name\">\r\n              <div class=\"scheme-title\">Individual Investment Scheme</div>\r\n              <div class=\"scheme-monthly\">\u20B98000/M</div>\r\n            </div>\r\n            <div class=\"scheme-details\">\r\n              <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\r\n              <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\r\n            </div>\r\n            <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\r\n          </div>\r\n        </div>\r\n      </label>\r\n    </div>\r\n    <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\r\n      Please add more \u20B9{{vaildAmount}} to reedem this scheme\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;background:#f9f9fa;box-shadow:#9999994d 2px 2px 6px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.container{max-width:1200px;margin:0 auto;padding:24px;display:flex;gap:24px}.main-content{background:#fff;border-radius:12px;width:66%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:#9999994d 2px 2px 6px;border-radius:5px}.promo-text h3{font-size:.9rem!important;margin-bottom:4px}.promo-text p{font-size:1rem;font-size:.9rem!important;margin-bottom:0!important}.see-live-btn{background:#fff;border:1px solid #000;color:#000;padding:8px 16px;border-radius:6px;font-size:12px!important;cursor:pointer;align-items:center;width:max-content!important}.cart-items{padding:20px}.cart-item{display:flex;gap:16px;padding:20px 0;border-bottom:2px solid white;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:24%;height:154px;border-radius:8px;object-fit:cover;background:#fff;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-size:.9rem;font-weight:500;color:#111827;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}.current-price{font-size:1rem;font-weight:600;color:#111827}.original-price{font-size:1rem;color:#9ca3af;text-decoration:line-through}.discount{background:#fef3c7;color:#d97706;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:34%}.coupon-section{border-radius:12px;padding:10px 15px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;box-shadow:#b2b2ca80 2px 2px 6px}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer;box-shadow:#b2b2ca80 2px 2px 6px}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;background:#8b5cf6;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.coupon-text{color:#000;font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:12px;padding:20px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.summary-label{color:#6b7280;font-size:14px;font-weight:700}.summary-value{font-size:14px;color:#111827}.savings{color:#10b981}.apply-coupon{color:#8b5cf6;cursor:pointer}.free{color:#10b981}.total-row{border-top:2px solid white;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px;color:#111827}.total-value{font-weight:700;font-size:18px;color:#111827}.place-order-btn{width:100%;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;width:max-content;border-radius:10px}.cart-tabs div{padding:7px 10px;cursor:pointer}.selected-cart-tab{background:#fff;margin:2px;border-radius:10px;color:#000!important}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.cart-items{padding:10px}.item-image{width:86px;height:86px}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type:
                 //DIRECTIVE
-                ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
+                ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CartComponent, decorators: [{
             type: Component,
@@ -8781,6 +8716,7 @@ class AuthenticationRequiredComponent extends BaseSection {
         this.buttonLoading = true;
         this.restService.signinPassword(payload).subscribe((response) => {
             const userDetails = this.storageService.setUser(response.data);
+            this.storageService.setToken(response.data.passbookToken);
             this.storageService.updateAllData();
             this.buttonLoading = false;
             this.syncTrialCartToServerDB(userDetails.userId);
@@ -9468,7 +9404,7 @@ class ContactUsComponent extends BaseSection {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContactUsComponent, deps: [{ token: EventsService }, { token: PLATFORM_ID }, { token: i2$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ContactUsComponent, isStandalone: true, selector: "simpo-contact-us", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "screenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"  simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n    <div class=\"main-container\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [attr.style]=\"customClass\" [spacingHorizontal]=\"stylesLayout\">\r\n      <div *ngIf=\"content?.image?.showImage === false\" class=\"col-xxl-8 w-100\" [id]=\"data?.id\" #mainContainer\r\n        [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n        <div class=\"row g-5 my-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n          <div class=\"col-12 d-flex justify-content-evenly mt-3\" [class.gap-3]=\"screenWidth > 475\" [id]=\"data?.id\"\r\n            [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n            [ngClass]=\"{'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n            <div class=\"d-flex flex-column col-5 content-side\"\r\n            [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n              <div *ngFor=\"let item of content?.inputText\"\r\n                [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-5 d-flex flex-wrap \" style=\"gap: 1rem;height: fit-content;\" [ngStyle] = \"getCardStyle()\"\r\n            [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n              <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n                <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n                  [feild]=\"feild\" [bgColor]=\"styles?.contentBackground?.display ? styles?.contentBackground?.style == 'black' ? '#000000' : '#ffffff' : styles?.background?.color\" [sectionId]=\"data?.id\"\r\n                  *ngIf=\"canShowContactField(feild)\"></simpo-input-fields>\r\n              </ng-container>\r\n              <div class=\"custom-btn d-flex\" [simpoContainerAlignment]=\"stylesLayout\">\r\n                  <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n                  simpoButtonDirective [id]=\"data?.id+(button?.id || '')\"  [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n                 [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"buttonClick()\">{{button?.content?.label}}</button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div *ngIf=\"content?.image?.showImage\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n        [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n        <div class=\"gap-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n          [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n          [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n          <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n            <img loading=\"lazy\" [src]=\"content?.image?.url\" [id]=\"data?.id\" [appImageEditor]=\"edit || false\"\r\n              [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n              [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n              [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n              [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n          </div>\r\n          <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\"\r\n            [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\" [ngStyle] = \"getCardStyle()\">\r\n            <div class=\"d-flex flex-column content-side\">\r\n              <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value | sanitizeHtml\"\r\n                [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-start align-items-end\" style=\"gap: 1rem;height: fit-content;\">\r\n              <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n                <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n                  [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n              </ng-container>\r\n                <div class=\"custom-btn d-flex\" [simpoContainerAlignment]=\"stylesLayout\">\r\n                  <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n                  simpoButtonDirective [id]=\"data?.id+(button?.id || '')\"  [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n                 [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"buttonClick()\">{{button?.content?.label}}</button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".send-btn{font-size:16px!important;font-weight:600;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;margin-top:1rem}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}.custom-btn{width:30%;white-space:nowrap}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column}.custom-btn{width:50%;white-space:nowrap}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}.gap-3{gap:3rem!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: InputFieldsComponent, selector: "simpo-input-fields", inputs: ["feild", "opacity", "bgColor", "sectionId"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
                 //directive
-                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }] }); }
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContactUsComponent, decorators: [{
             type: Component,
@@ -9689,7 +9625,7 @@ class BannerGridSectionComponent extends BaseSection {
         return "#ffffff;";
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BannerGridSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerGridSectionComponent, isStandalone: true, selector: "simpo-banner-grid-section", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", index: "index", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" [spacingAround]=\"stylesLayout\">\r\n    <div class=\"row top-parent h-100 align-justify-unset\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n      [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoOverlay]=\"styles?.background\"\r\n      [simpoBackground]=\"styles?.background\" [simpoHeight]=\"fitLayout\">\r\n      <div class=\"col\" [spacingHorizontal]=\"!data?.styles?.borderLessImage ? stylesLayout : undefined\"\r\n        [class.p0]=\"data?.styles?.borderLessImage\"\r\n        [simpoSpacing]=\"!data?.styles?.borderLessImage ? spacingLayout : undefined\">\r\n        <ng-container *ngTemplateOutlet=\"imageTemplate\"></ng-container>\r\n      </div>\r\n      <div class=\"col d-flex flex-column\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoContentAlignment]=\"styles?.contentAlignment\" [simpoSpacing]=\"spacingLayout\" [id]=\"data?.id\">\r\n        <div class=\"text-parent\">\r\n          <ng-container *ngTemplateOutlet=\"textTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n\r\n<ng-template #buttonTemplate>\r\n  <div class=\"button-display\" *ngIf=\"data?.action && data?.action?.display\" class=\"d-flex customclass w-full gap-2\"\r\n    [ngClass]=\"[\r\n      styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n      styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n      styles?.layout?.align === 'right' ? 'justify-content-md-end' : '',\r\n      screenWidth < 475 ? 'justify-content-center' : ''\r\n    ]\">\r\n    <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n      <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n        [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n        [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #textTemplate>\r\n  <div [id]=\"data?.id\">\r\n    <ng-container *ngFor=\"let item of content?.inputText\">\r\n      <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n        <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #imageTemplate>\r\n  <div class=\"row\" [style.rowGap]=\"!data?.styles?.borderLessImage ? '15px' : '0'\">\r\n    <div *ngFor=\"let item of data?.content?.listItem?.data || []; let i = index\" [class]=\"getImageClass(i)\"\r\n      [class.p0]=\"data?.styles?.borderLessImage\"\r\n      [class.grid-img]=\"styles?.positionLayout?.value == 'left' || styles?.positionLayout?.value == 'right'\">\r\n      <img [src]=\"item?.image?.url\" [alt]=\"item?.image?.altText\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n        [simpoImageDirective]=\"styles?.image\" [simpoObjectPosition]=\"item?.image?.position\"\r\n        [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" class=\"w-100 h-100\">\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".total-container{height:auto;position:relative}.float-none{float:none}.image-section{display:flex;flex-direction:column;align-items:center}.image-section .d-flex{gap:10px}.img{width:100%;height:auto}.align-justify-unset{align-items:unset!important;justify-content:unset!important}.borderLess-image{border-radius:0!important}.borderless-width{width:50%;height:auto}.borderLess-height{height:54vh}.img-1{width:48%;height:auto}.image-section-2{display:flex;align-items:center}.image-section-2 .d-flex{gap:10px}.image-section-2-borderless,.image-1{width:100%}.image-position{display:flex;flex-direction:row;width:100%}.image-width{width:100%;margin-right:5px}.images{width:33%}.images-top{width:33%;margin-right:15px}.image-width-top{width:100%;height:100%;margin-top:17px;margin-right:15px}.col-lg-12{width:100%!important}.total-section{min-height:calc(50vh + -0px)!important;height:auto}.image-width-2{width:50%}.images-width-2{width:100%}.image-width-3,.images-width-3{width:100%;height:450px}.button-section{gap:10px}@media only screen and (max-width: 475px){.total-section{height:auto;flex-direction:column}.py-4{padding:1rem!important}.body-large{font-size:16px;line-height:21px}.image-position{overflow-y:scroll}.images-top,.images{width:100%}.image-width,.image-width-top{height:450px;width:300px;margin-right:2px}.image-section-2{display:flex;align-items:center;overflow-y:scroll!important;width:100%}.images-width-2{width:310px;height:450px}.image-width-2{width:100%}}.mergeNavbar{margin-top:-75px;padding-top:75px}.main-container{display:flex}.button-display{display:flex;gap:10px}.p0{padding:0!important}.text-parent{display:flex;flex-direction:column;gap:15px}.grid-img{min-height:464px;max-height:50vh;object-fit:cover}.row{margin:0}@media screen and (max-width: 475px){.top-parent{flex-direction:column;margin:0}.grid-img{min-height:232px;max-height:25vh}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingDirective, selector: "[simpoSpacing]", inputs: ["simpoSpacing"] }, { kind: "directive", type: HeightDirective, selector: "[simpoHeight]", inputs: ["simpoHeight"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerGridSectionComponent, isStandalone: true, selector: "simpo-banner-grid-section", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", index: "index", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" [spacingAround]=\"stylesLayout\">\r\n    <div class=\"row top-parent h-100 align-justify-unset\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n      [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoOverlay]=\"styles?.background\"\r\n      [simpoBackground]=\"styles?.background\" [simpoHeight]=\"fitLayout\">\r\n      <div class=\"col\" [spacingHorizontal]=\"!data?.styles?.borderLessImage ? stylesLayout : undefined\"\r\n        [class.p0]=\"data?.styles?.borderLessImage\"\r\n        [simpoSpacing]=\"!data?.styles?.borderLessImage ? spacingLayout : undefined\">\r\n        <ng-container *ngTemplateOutlet=\"imageTemplate\"></ng-container>\r\n      </div>\r\n      <div class=\"col d-flex flex-column\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoContentAlignment]=\"styles?.contentAlignment\" [simpoSpacing]=\"spacingLayout\" [id]=\"data?.id\">\r\n        <div class=\"text-parent\">\r\n          <ng-container *ngTemplateOutlet=\"textTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n\r\n<ng-template #buttonTemplate>\r\n  <div class=\"button-display\" *ngIf=\"data?.action && data?.action?.display\" class=\"d-flex customclass w-full gap-2\"\r\n    [ngClass]=\"[\r\n      styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n      styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n      styles?.layout?.align === 'right' ? 'justify-content-md-end' : '',\r\n      screenWidth < 475 ? 'justify-content-center' : ''\r\n    ]\">\r\n    <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n      <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n        [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n        [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #textTemplate>\r\n  <div [id]=\"data?.id\">\r\n    <ng-container *ngFor=\"let item of content?.inputText\">\r\n      <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n        <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #imageTemplate>\r\n  <div class=\"row\" [style.rowGap]=\"!data?.styles?.borderLessImage ? '15px' : '0'\">\r\n    <div *ngFor=\"let item of data?.content?.listItem?.data || []; let i = index\" [class]=\"getImageClass(i)\"\r\n      [class.p0]=\"data?.styles?.borderLessImage\"\r\n      [class.grid-img]=\"styles?.positionLayout?.value == 'left' || styles?.positionLayout?.value == 'right'\">\r\n      <img [src]=\"item?.image?.url\" [alt]=\"item?.image?.altText\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n        [simpoImageDirective]=\"styles?.image\" [simpoObjectPosition]=\"item?.image?.position\"\r\n        [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" class=\"w-100 h-100\">\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".total-container{height:auto;position:relative}.float-none{float:none}.image-section{display:flex;flex-direction:column;align-items:center}.image-section .d-flex{gap:10px}.img{width:100%;height:auto}.align-justify-unset{align-items:unset!important;justify-content:unset!important}.borderLess-image{border-radius:0!important}.borderless-width{width:50%;height:auto}.borderLess-height{height:54vh}.img-1{width:48%;height:auto}.image-section-2{display:flex;align-items:center}.image-section-2 .d-flex{gap:10px}.image-section-2-borderless,.image-1{width:100%}.image-position{display:flex;flex-direction:row;width:100%}.image-width{width:100%;margin-right:5px}.images{width:33%}.images-top{width:33%;margin-right:15px}.image-width-top{width:100%;height:100%;margin-top:17px;margin-right:15px}.col-lg-12{width:100%!important}.total-section{min-height:calc(50vh + -0px)!important;height:auto}.image-width-2{width:50%}.images-width-2{width:100%}.image-width-3,.images-width-3{width:100%;height:450px}.button-section{gap:10px}@media only screen and (max-width: 475px){.total-section{height:auto;flex-direction:column}.py-4{padding:1rem!important}.body-large{font-size:16px;line-height:21px}.image-position{overflow-y:scroll}.images-top,.images{width:100%}.image-width,.image-width-top{height:450px;width:300px;margin-right:2px}.image-section-2{display:flex;align-items:center;overflow-y:scroll!important;width:100%}.images-width-2{width:310px;height:450px}.image-width-2{width:100%}}.mergeNavbar{margin-top:-75px;padding-top:75px}.main-container{display:flex}.button-display{display:flex;gap:10px}.p0{padding:0!important}.text-parent{display:flex;flex-direction:column;gap:15px}.grid-img{min-height:464px;max-height:50vh;object-fit:cover}.row{margin:0}@media screen and (max-width: 475px){.top-parent{flex-direction:column;margin:0}.grid-img{min-height:232px;max-height:25vh}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingDirective, selector: "[simpoSpacing]", inputs: ["simpoSpacing"] }, { kind: "directive", type: HeightDirective, selector: "[simpoHeight]", inputs: ["simpoHeight"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BannerGridSectionComponent, decorators: [{
             type: Component,
@@ -9832,7 +9768,7 @@ class PricingS1Component extends BaseSection {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingS1Component, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PricingS1Component, isStandalone: true, selector: "simpo-pricing-s1", inputs: { data: "data", edit: "edit" }, usesInheritance: true, ngImport: i0, template: "<section>\r\n  <div class=\"pricing-options row w-100\">\r\n    <div class=\"individual-options d-flex flex-column justify-content-between mt-4 mb-2 align-items-center\" [attr.class]=\"getClass()\"\r\n      [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\"\r\n      *ngFor=\"let options of content?.listItem?.data\" [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true,\r\n          'individual-options-3': content?.listItem?.data?.length === 3 || content?.listItem?.data?.length === 2}\"\r\n      [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\r\n      <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\"\r\n        [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\"\r\n        *ngIf=\"options?.highlight?.highlighted === true\">\r\n        <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n      </div>\r\n      <div>\r\n        <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\"\r\n          [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n          [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" loading=\"lazy\"\r\n          [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\r\n          [class]=\"data?.id+(options?.image?.id || '')\">\r\n        <div class=\"heading-small\">\r\n          <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n        <div class=\"heading-large price\">\r\n          <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n        <div class=\"body-desc mb-3\">\r\n          <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n        <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n          <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\" />\r\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                  d=\"M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z\"\r\n                  fill=\"#4C63D9\" />\r\n              </svg> -->\r\n            </div>\r\n            <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"btn w-75 mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\r\n        <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\">{{options?.button?.label}}</button> -->\r\n        <button class=\"custom-btn\" [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\" simpoButtonDirective\r\n          [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n          [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\"\r\n          (click)=\"redirectTo()\">{{options?.button?.label}}</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>", styles: [".pricing-options{justify-content:center;gap:20px}.individual-options{border:1px solid #80808057;padding:24px 10px}.individual-options-3{width:32%}.highlighted-option{box-shadow:0 0 10px #0000004d}.logo-img{width:85px;height:85px;margin-top:1rem}.img_icon{width:25px;height:25px}.button{font-size:17px!important;padding:.75rem 0}.custom-btn{padding:6px;font-size:16px!important;font-weight:600}.popular-tag{position:absolute;top:-1px;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}}\n"], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: TranslateOnhoverDirective, selector: "[simpoTranslateOnhover]", inputs: ["simpoTranslateOnhover"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PricingS1Component, isStandalone: true, selector: "simpo-pricing-s1", inputs: { data: "data", edit: "edit" }, usesInheritance: true, ngImport: i0, template: "<section>\r\n  <div class=\"pricing-options row w-100\">\r\n    <div class=\"individual-options d-flex flex-column justify-content-between mt-4 mb-2 align-items-center\" [attr.class]=\"getClass()\"\r\n      [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\"\r\n      *ngFor=\"let options of content?.listItem?.data\" [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true,\r\n          'individual-options-3': content?.listItem?.data?.length === 3 || content?.listItem?.data?.length === 2}\"\r\n      [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\r\n      <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\"\r\n        [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\"\r\n        *ngIf=\"options?.highlight?.highlighted === true\">\r\n        <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n      </div>\r\n      <div>\r\n        <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\"\r\n          [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n          [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" loading=\"lazy\"\r\n          [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\r\n          [class]=\"data?.id+(options?.image?.id || '')\">\r\n        <div class=\"heading-small\">\r\n          <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n        <div class=\"heading-large price\">\r\n          <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n        <div class=\"body-desc mb-3\">\r\n          <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n        <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n          <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\" />\r\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                  d=\"M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z\"\r\n                  fill=\"#4C63D9\" />\r\n              </svg> -->\r\n            </div>\r\n            <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"btn w-75 mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\r\n        <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\">{{options?.button?.label}}</button> -->\r\n        <button class=\"custom-btn\" [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\" simpoButtonDirective\r\n          [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n          [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\"\r\n          (click)=\"redirectTo()\">{{options?.button?.label}}</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>", styles: [".pricing-options{justify-content:center;gap:20px}.individual-options{border:1px solid #80808057;padding:24px 10px}.individual-options-3{width:32%}.highlighted-option{box-shadow:0 0 10px #0000004d}.logo-img{width:85px;height:85px;margin-top:1rem}.img_icon{width:25px;height:25px}.button{font-size:17px!important;padding:.75rem 0}.custom-btn{padding:6px;font-size:16px!important;font-weight:600}.popular-tag{position:absolute;top:-1px;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}}\n"], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: TranslateOnhoverDirective, selector: "[simpoTranslateOnhover]", inputs: ["simpoTranslateOnhover"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingS1Component, decorators: [{
             type: Component,
@@ -9912,7 +9848,7 @@ class PricingSectionComponent extends BaseSection {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PricingSectionComponent, isStandalone: true, selector: "simpo-pricing-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"  [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div class=\"mb-2\" *ngFor=\"let text of data?.content?.inputText\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <!-- <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n        <div class=\"pricing-options row\" *ngIf=\"style?.pricingStyle =='STYLE1'\">\r\n          <div class=\"individual-options\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\r\n            [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\" [attr.class]=\"getClass()\">\r\n            <img loading=\"lazy\"  class=\"image\" *ngIf=\"content?.display?.showImage === true\"\r\n            [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n            [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" width=\"92%\" loading=\"lazy\"    [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(options?.image?.id || '')\">\r\n            <div class=\"highlight-label\" *ngIf=\"options?.highlight?.highlighted === true\" [ngStyle]=\"{'background-color': getTextColor()}\" [simpoColor]=\"getTextColor()\">\r\n               <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n            <!-- <div class=\"heading-small content-side\" [innerHTML]=\"options.inputText[0].value | sanitizeHtml \"></div>\r\n            <div class=\"heading-large price content-side\" [innerHTML]=\"options.inputText[2].value | sanitizeHtml \"></div>\r\n            <div class=\"body-desc content-side\" [innerHTML]=\"options.inputText[3].value | sanitizeHtml \"></div> -->\r\n            <div class=\"heading-small\">\r\n              <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n            <div class=\"heading-large price\">\r\n              <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n            <div class=\"body-desc\">\r\n              <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n\r\n            <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\r\n              <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\" (click)=\"redirectTo()\">{{options?.button?.label}}</button> -->\r\n                <button [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\"\r\n                  simpoButtonDirective [id]=\"data?.id+(button?.id || '')\"  [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n                 [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\">{{options?.button?.label}}</button>\r\n            </div>\r\n            <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n              <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n            <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n              <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n                <mat-icon>check</mat-icon><simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                <!-- {{content.content}} -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"style?.pricingStyle =='STYLE2'\">\r\n          <simpo-pricing-s1 [data]=\"data\" [edit]=\"edit\"></simpo-pricing-s1>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center!important}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;padding-top:7rem;height:auto;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;border-radius:25px;margin-top:20px;margin-right:auto;margin-left:17px;font-size:15px}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}.pricing-package{margin-top:10px;width:90%;margin-bottom:10px}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: PricingS1Component, selector: "simpo-pricing-s1", inputs: ["data", "edit"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PricingSectionComponent, isStandalone: true, selector: "simpo-pricing-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"  [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div class=\"mb-2\" *ngFor=\"let text of data?.content?.inputText\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <!-- <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n        <div class=\"pricing-options row\" *ngIf=\"style?.pricingStyle =='STYLE1'\">\r\n          <div class=\"individual-options\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\r\n            [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\" [attr.class]=\"getClass()\">\r\n            <img loading=\"lazy\"  class=\"image\" *ngIf=\"content?.display?.showImage === true\"\r\n            [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n            [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" width=\"92%\" loading=\"lazy\"    [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(options?.image?.id || '')\">\r\n            <div class=\"highlight-label\" *ngIf=\"options?.highlight?.highlighted === true\" [ngStyle]=\"{'background-color': getTextColor()}\" [simpoColor]=\"getTextColor()\">\r\n               <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n            <!-- <div class=\"heading-small content-side\" [innerHTML]=\"options.inputText[0].value | sanitizeHtml \"></div>\r\n            <div class=\"heading-large price content-side\" [innerHTML]=\"options.inputText[2].value | sanitizeHtml \"></div>\r\n            <div class=\"body-desc content-side\" [innerHTML]=\"options.inputText[3].value | sanitizeHtml \"></div> -->\r\n            <div class=\"heading-small\">\r\n              <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n            <div class=\"heading-large price\">\r\n              <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n            <div class=\"body-desc\">\r\n              <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n\r\n            <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\r\n              <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\" (click)=\"redirectTo()\">{{options?.button?.label}}</button> -->\r\n                <button [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\"\r\n                  simpoButtonDirective [id]=\"data?.id+(button?.id || '')\"  [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n                 [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\">{{options?.button?.label}}</button>\r\n            </div>\r\n            <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n              <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n            <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n              <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n                <mat-icon>check</mat-icon><simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                <!-- {{content.content}} -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"style?.pricingStyle =='STYLE2'\">\r\n          <simpo-pricing-s1 [data]=\"data\" [edit]=\"edit\"></simpo-pricing-s1>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center!important}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;padding-top:7rem;height:auto;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;border-radius:25px;margin-top:20px;margin-right:auto;margin-left:17px;font-size:15px}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}.pricing-package{margin-top:10px;width:90%;margin-bottom:10px}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: PricingS1Component, selector: "simpo-pricing-s1", inputs: ["data", "edit"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingSectionComponent, decorators: [{
             type: Component,
@@ -11358,7 +11294,7 @@ class ProcessSectionComponent extends BaseSection {
         return this.content?.listItem?.data?.length ?? 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProcessSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProcessSectionComponent, isStandalone: true, selector: "simpo-process-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div class=\"col-xxl-8  py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n      [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15 content-side\"\r\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n        [class.col-lg-10]=\"!content?.image?.showImage\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <div [simpoColor]=\"styles?.background?.color\">\r\n            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n        <ng-container *ngIf=\"styles?.processSectionDisplayStyle == 'STYLE1'\">\r\n          <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n            <div class=\"card_wrapper\">\r\n              <div class=\"container_card visible\">\r\n                <div class=\"card-section\">\r\n                  <!-- <div class=\"first-part-card\"\r\n                    [ngClass]=\"item.inputText[0].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                    {{ item.inputText[0].value }}\r\n                  </div> -->\r\n                  <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                  <div class=\"second-part-card \" *ngIf=\"item.image.url && (deviceWidth >= 475)\">\r\n                    <img loading=\"lazy\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\r\n                      [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" />\r\n                  </div>\r\n                  <div class=\"third-part-card\">\r\n                    <!-- <div class=\"text-element heading-medium\" [innerHtml]=\"item.inputText[1].value | sanitizeHtml\">\r\n                    </div> -->\r\n                    <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n                      [editable]=\"edit || false\"></simpo-text-editor>\r\n                    <!-- <div class=\"text-element\" [innerHtml]=\"item.inputText[2].value | sanitizeHtml\"\r\n                      [ngClass]=\"item.inputText[2].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                    </div> -->\r\n                    <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n                      [editable]=\"edit || false\"></simpo-text-editor>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"styles?.processSectionDisplayStyle == 'STYLE2'\">\r\n          <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carder\">\r\n            <div class=\"step-container\">\r\n              <div class=\"step\">\r\n                <div class=\"step-section d-flex gap-3\">\r\n                  <div class=\"d-flex flex-column align-items-center\">\r\n                    <div class=\"gradient-stroke-text mb-1\" [attr.data-text]=\"i+1\" [ngStyle]=\"{\r\n                      color: 'transparent',\r\n                      fontWeight: '900',\r\n                      fontSize: '36px',\r\n                      WebkitTextStroke: '2px ' + styles?.background?.accentColor\r\n                    }\">{{ i+1 | number: '2.0' }}</div>\r\n                    <div class=\"height-width\" [style.background]=\"styles?.background?.accentColor\" *ngIf=\" i != getLength()-1\">\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"third-part-card w-100\">\r\n                    <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n                      [editable]=\"edit || false\"></simpo-text-editor>\r\n                    <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n                      [editable]=\"edit || false\"></simpo-text-editor>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n      </div>\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n        <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n          [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n          [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.container_card .card-section{display:flex;align-items:center;justify-content:center;gap:30px;padding:20px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.container_card .card-section{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:10px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}}.text-element{inline-size:100%;overflow-wrap:break-word}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content;text-align:left}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:40px;height:40px;border-radius:50%;border:1px solid rgba(116,33,252,.1);padding:10px;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.second-part-card img{width:100%;height:100%;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}:host ::ng-deep .gradient-stroke-text{font-family:Arial Black,sans-serif;position:relative;bottom:4px}.height-width{width:3px;flex-grow:1;display:flex;position:relative;flex-direction:column;bottom:6px}.step-section{align-items:stretch;flex:1 1 auto}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProcessSectionComponent, isStandalone: true, selector: "simpo-process-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div class=\"col-xxl-8  py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n      [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15 content-side\"\r\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n        [class.col-lg-10]=\"!content?.image?.showImage\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <div [simpoColor]=\"styles?.background?.color\">\r\n            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n        <ng-container *ngIf=\"styles?.processSectionDisplayStyle == 'STYLE1'\">\r\n          <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n            <div class=\"card_wrapper\">\r\n              <div class=\"container_card visible\">\r\n                <div class=\"card-section\">\r\n                  <!-- <div class=\"first-part-card\"\r\n                    [ngClass]=\"item.inputText[0].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                    {{ item.inputText[0].value }}\r\n                  </div> -->\r\n                  <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                  <div class=\"second-part-card \" *ngIf=\"item.image.url && (deviceWidth >= 475)\">\r\n                    <img loading=\"lazy\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\r\n                      [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" />\r\n                  </div>\r\n                  <div class=\"third-part-card\">\r\n                    <!-- <div class=\"text-element heading-medium\" [innerHtml]=\"item.inputText[1].value | sanitizeHtml\">\r\n                    </div> -->\r\n                    <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n                      [editable]=\"edit || false\"></simpo-text-editor>\r\n                    <!-- <div class=\"text-element\" [innerHtml]=\"item.inputText[2].value | sanitizeHtml\"\r\n                      [ngClass]=\"item.inputText[2].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                    </div> -->\r\n                    <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n                      [editable]=\"edit || false\"></simpo-text-editor>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"styles?.processSectionDisplayStyle == 'STYLE2'\">\r\n          <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carder\">\r\n            <div class=\"step-container\">\r\n              <div class=\"step\">\r\n                <div class=\"step-section d-flex gap-3\">\r\n                  <div class=\"d-flex flex-column align-items-center\">\r\n                    <div class=\"gradient-stroke-text mb-1\" [attr.data-text]=\"i+1\" [ngStyle]=\"{\r\n                      color: 'transparent',\r\n                      fontWeight: '900',\r\n                      fontSize: '36px',\r\n                      WebkitTextStroke: '2px ' + styles?.background?.accentColor\r\n                    }\">{{ i+1 | number: '2.0' }}</div>\r\n                    <div class=\"height-width\" [style.background]=\"styles?.background?.accentColor\" *ngIf=\" i != getLength()-1\">\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"third-part-card w-100\">\r\n                    <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n                      [editable]=\"edit || false\"></simpo-text-editor>\r\n                    <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n                      [editable]=\"edit || false\"></simpo-text-editor>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n      </div>\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n        <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n          [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n          [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.container_card .card-section{display:flex;align-items:center;justify-content:center;gap:30px;padding:20px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.container_card .card-section{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:10px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}}.text-element{inline-size:100%;overflow-wrap:break-word}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content;text-align:left}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:40px;height:40px;border-radius:50%;border:1px solid rgba(116,33,252,.1);padding:10px;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.second-part-card img{width:100%;height:100%;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}:host ::ng-deep .gradient-stroke-text{font-family:Arial Black,sans-serif;position:relative;bottom:4px}.height-width{width:3px;flex-grow:1;display:flex;position:relative;flex-direction:column;bottom:6px}.step-section{align-items:stretch;flex:1 1 auto}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProcessSectionComponent, decorators: [{
             type: Component,
@@ -11441,7 +11377,7 @@ class ProcessModernComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProcessModernComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProcessModernComponent, isStandalone: true, selector: "simpo-process-modern", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\"  [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n      <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n        <div class=\"container-fluid d-flex flex-column content-side\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n          <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n            <div *ngFor=\"let text of data?.content?.inputText\">\r\n              <!-- <div class=\"heading-large lh-2 mb-3 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n              <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n            </div>\r\n          </div>\r\n          <!-- starting -->\r\n          <div *ngFor=\"let item of content?.listItem?.data ;let i = index\" class=\"single_card content-side d-flex justify-content-center\">\r\n            <div class=\"rowFlexContainer w-100\" [ngClass]=\"{'flex-row-reverse': i % 2 === 1}\">\r\n              <div class=\"imageContainer\" [ngClass]=\"{'no-image': item.image.url===''}\">\r\n                <div *ngIf=\"scrWidth <= 500\" class=\"numberStyle\">\r\n                  {{ i + 1}}\r\n                </div>\r\n                <img loading=\"lazy\"  class=\"section_image\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\r\n                  [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n                  loading=\"lazy\"   [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\" [simpoObjectPosition]=\"item?.image?.position\" [simpoImageDirective]=\"styles?.image\">\r\n              </div>\r\n              <div class=\"content\" [ngClass]=\"{'no-image-content': item.image.url===''}\">\r\n                <div *ngIf=\"scrWidth > 500\" class=\"numberStyle\">\r\n                  {{ i + 1}}\r\n                </div>\r\n                <!-- <div class=\"contentHeading content-side\" [innerHTML]=\" item.inputText[0].value | sanitizeHtml\">\r\n                </div> -->\r\n                <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                <!-- <div class=\"contentDescription content-side\" [innerHTML]=\" item.inputText[1].value | sanitizeHtml\">\r\n                </div> -->\r\n                <simpo-text-editor [(value)]=\"item.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <!-- ending -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;margin:3% 0 0;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.no-image{display:none}.no-image-content{width:40%!important;margin-left:auto;margin-right:auto}.no-image-content .contentDescription{width:100%!important}@media only screen and (max-width: 475px){.rowFlexContainer{flex-direction:column!important;width:100%!important;height:auto!important}.imageContainer{width:100%!important;height:auto!important}.section_image{width:100%;height:auto;object-fit:cover;border-radius:10px}.content{width:100%!important;margin-top:15px;margin-right:0}.numberStyle{margin-bottom:15px;width:50px;height:50px}.contentDescription{width:100%!important}.row{margin-left:.2px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProcessModernComponent, isStandalone: true, selector: "simpo-process-modern", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\"  [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n      <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n        <div class=\"container-fluid d-flex flex-column content-side\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n          <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n            <div *ngFor=\"let text of data?.content?.inputText\">\r\n              <!-- <div class=\"heading-large lh-2 mb-3 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n              <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n            </div>\r\n          </div>\r\n          <!-- starting -->\r\n          <div *ngFor=\"let item of content?.listItem?.data ;let i = index\" class=\"single_card content-side d-flex justify-content-center\">\r\n            <div class=\"rowFlexContainer w-100\" [ngClass]=\"{'flex-row-reverse': i % 2 === 1}\">\r\n              <div class=\"imageContainer\" [ngClass]=\"{'no-image': item.image.url===''}\">\r\n                <div *ngIf=\"scrWidth <= 500\" class=\"numberStyle\">\r\n                  {{ i + 1}}\r\n                </div>\r\n                <img loading=\"lazy\"  class=\"section_image\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\r\n                  [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n                  loading=\"lazy\"   [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\" [simpoObjectPosition]=\"item?.image?.position\" [simpoImageDirective]=\"styles?.image\">\r\n              </div>\r\n              <div class=\"content\" [ngClass]=\"{'no-image-content': item.image.url===''}\">\r\n                <div *ngIf=\"scrWidth > 500\" class=\"numberStyle\">\r\n                  {{ i + 1}}\r\n                </div>\r\n                <!-- <div class=\"contentHeading content-side\" [innerHTML]=\" item.inputText[0].value | sanitizeHtml\">\r\n                </div> -->\r\n                <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                <!-- <div class=\"contentDescription content-side\" [innerHTML]=\" item.inputText[1].value | sanitizeHtml\">\r\n                </div> -->\r\n                <simpo-text-editor [(value)]=\"item.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <!-- ending -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;margin:3% 0 0;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.no-image{display:none}.no-image-content{width:40%!important;margin-left:auto;margin-right:auto}.no-image-content .contentDescription{width:100%!important}@media only screen and (max-width: 475px){.rowFlexContainer{flex-direction:column!important;width:100%!important;height:auto!important}.imageContainer{width:100%!important;height:auto!important}.section_image{width:100%;height:auto;object-fit:cover;border-radius:10px}.content{width:100%!important;margin-top:15px;margin-right:0}.numberStyle{margin-bottom:15px;width:50px;height:50px}.contentDescription{width:100%!important}.row{margin-left:.2px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProcessModernComponent, decorators: [{
             type: Component,
@@ -11531,7 +11467,7 @@ class FeaturesSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturesSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturesSectionComponent, isStandalone: true, selector: "simpo-features-section", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [simpoBorder]=\"styles?.border\"  [attr.style]=\"customClass\">\r\n  <div  #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"row\" *ngIf=\"screenWidth > 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <!-- <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n        </div>\r\n        <div class=\" box justify-center d-flex g-25 mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div [ngClass]=\"{'tab': styles?.tabStyling == 'UNDERLINE' , 'tab1' : styles?.tabStyling == 'BOXED' , 'tab2' : styles?.tabStyling == 'NONE' }\"  [ngClass]=\"{'active': index === selectedTabIndex && styles?.tabStyling == 'UNDERLINE' , 'active1' : index === selectedTabIndex && styles?.tabStyling == 'BOXED' , 'active2' : index === selectedTabIndex && styles?.tabStyling == 'NONE' }\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\r\n              <!-- {{ tab.inputText[0].value }} -->\r\n              <simpo-text-editor [(value)]=\"tab.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"row-container\" *ngIf=\"screenWidth <= 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <!-- <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n        <div class=\" box d-flex g-25 mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\r\n              <!-- {{ tab.inputText[0].value }} -->\r\n              <simpo-text-editor [(value)]=\"tab.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"content d-flex g-15 mt-5\" *ngIf=\"currentData?.image?.url\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\r\n        <div class=\"image\">\r\n          <img loading=\"lazy\"  [src]=\"currentData?.image?.url\" alt=\"\" [id]=\"data?.id\"\r\n          [simpoImageDirective]=\"styles?.image\"  [simpoObjectPosition]=\"currentData?.image?.position\"\r\n          [simpoCorner]=\"styles?.corners\"\r\n          class=\"d-block mx-lg-auto img-fluid h-100 \" [class]=\"data?.id+(currentData?.image?.id || '')\"\r\n          loading=\"lazy\"  [appImageEditor]=\"true\" [imageData]=\"currentData?.image\" [sectionId]=\"data?.id\">\r\n        </div>\r\n        <div class=\"content-heading\">\r\n          <div class=\"heading-large content-side\" >\r\n            <ng-container *ngIf=\"currentData?.inputText?.[1] as textItem\">\r\n              <simpo-text-editor [(value)]=\"textItem.value\"  [editable]=\"edit || false\"></simpo-text-editor>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"content-description body-large mt-1 content-side\" >\r\n            <ng-container *ngIf=\"currentData?.inputText?.[2] as textitem\">\r\n          <simpo-text-editor [(value)]=\"textitem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"content justify-center d-flex g-15 mt-5\" *ngIf=\"!currentData?.image?.url\">\r\n        <div class=\"content-heading text-center\">\r\n          <div class=\"heading-large content-side\" [innerHtml]=\"currentData?.inputText?.[1]?.value\" [id]=\"data?.id\">\r\n          </div>\r\n          <div class=\"content-description body-large mt-1 text-center\" [innerHtml]=\"currentData?.inputText?.[2]?.value\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem;margin-bottom:4%}.image{width:40%;flex:1}.image img{width:100%}.content-heading{width:60%;text-align:start}.content-description{width:100%;text-align:start}.active{font-weight:700;letter-spacing:.8px;border-bottom:2px solid!important;padding-bottom:20px}.active1{font-weight:700;letter-spacing:.8px;border:2px solid!important;border-radius:7px}.active2{font-weight:700;letter-spacing:.8px;border:unset!important;padding-bottom:20px}.tab{letter-spacing:.8px;border-bottom:2px solid;padding-bottom:20px;cursor:pointer}.tab1{letter-spacing:.8px;border:2px solid;cursor:pointer}.tab2{letter-spacing:.8px;border:unset;padding-bottom:20px;cursor:pointer}@media only screen and (max-width: 768px){.content{flex-direction:column;padding:0 2rem;width:100%;gap:2rem}.image{order:-1;width:100%}.image img,.content-heading{width:100%}.box{overflow-x:scroll;gap:10%;margin:auto!important;padding:10px;width:85%!important}.row-container{width:100%!important}.tab{letter-spacing:.5px;border-bottom:1px solid;padding-bottom:10px;cursor:pointer}.image{width:100%}}@media screen and (max-width: 475px){.content{padding:0;margin-bottom:30px}}.g-25{gap:55px}.mt-1{margin-top:1rem}.justify-center{justify-content:center}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturesSectionComponent, isStandalone: true, selector: "simpo-features-section", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [simpoBorder]=\"styles?.border\"  [attr.style]=\"customClass\">\r\n  <div  #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"row\" *ngIf=\"screenWidth > 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <!-- <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n        </div>\r\n        <div class=\" box justify-center d-flex g-25 mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div [ngClass]=\"{'tab': styles?.tabStyling == 'UNDERLINE' , 'tab1' : styles?.tabStyling == 'BOXED' , 'tab2' : styles?.tabStyling == 'NONE' }\"  [ngClass]=\"{'active': index === selectedTabIndex && styles?.tabStyling == 'UNDERLINE' , 'active1' : index === selectedTabIndex && styles?.tabStyling == 'BOXED' , 'active2' : index === selectedTabIndex && styles?.tabStyling == 'NONE' }\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\r\n              <!-- {{ tab.inputText[0].value }} -->\r\n              <simpo-text-editor [(value)]=\"tab.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"row-container\" *ngIf=\"screenWidth <= 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <!-- <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n        <div class=\" box d-flex g-25 mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\r\n              <!-- {{ tab.inputText[0].value }} -->\r\n              <simpo-text-editor [(value)]=\"tab.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"content d-flex g-15 mt-5\" *ngIf=\"currentData?.image?.url\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\r\n        <div class=\"image\">\r\n          <img loading=\"lazy\"  [src]=\"currentData?.image?.url\" alt=\"\" [id]=\"data?.id\"\r\n          [simpoImageDirective]=\"styles?.image\"  [simpoObjectPosition]=\"currentData?.image?.position\"\r\n          [simpoCorner]=\"styles?.corners\"\r\n          class=\"d-block mx-lg-auto img-fluid h-100 \" [class]=\"data?.id+(currentData?.image?.id || '')\"\r\n          loading=\"lazy\"  [appImageEditor]=\"true\" [imageData]=\"currentData?.image\" [sectionId]=\"data?.id\">\r\n        </div>\r\n        <div class=\"content-heading\">\r\n          <div class=\"heading-large content-side\" >\r\n            <ng-container *ngIf=\"currentData?.inputText?.[1] as textItem\">\r\n              <simpo-text-editor [(value)]=\"textItem.value\"  [editable]=\"edit || false\"></simpo-text-editor>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"content-description body-large mt-1 content-side\" >\r\n            <ng-container *ngIf=\"currentData?.inputText?.[2] as textitem\">\r\n          <simpo-text-editor [(value)]=\"textitem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"content justify-center d-flex g-15 mt-5\" *ngIf=\"!currentData?.image?.url\">\r\n        <div class=\"content-heading text-center\">\r\n          <div class=\"heading-large content-side\" [innerHtml]=\"currentData?.inputText?.[1]?.value\" [id]=\"data?.id\">\r\n          </div>\r\n          <div class=\"content-description body-large mt-1 text-center\" [innerHtml]=\"currentData?.inputText?.[2]?.value\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem;margin-bottom:4%}.image{width:40%;flex:1}.image img{width:100%}.content-heading{width:60%;text-align:start}.content-description{width:100%;text-align:start}.active{font-weight:700;letter-spacing:.8px;border-bottom:2px solid!important;padding-bottom:20px}.active1{font-weight:700;letter-spacing:.8px;border:2px solid!important;border-radius:7px}.active2{font-weight:700;letter-spacing:.8px;border:unset!important;padding-bottom:20px}.tab{letter-spacing:.8px;border-bottom:2px solid;padding-bottom:20px;cursor:pointer}.tab1{letter-spacing:.8px;border:2px solid;cursor:pointer}.tab2{letter-spacing:.8px;border:unset;padding-bottom:20px;cursor:pointer}@media only screen and (max-width: 768px){.content{flex-direction:column;padding:0 2rem;width:100%;gap:2rem}.image{order:-1;width:100%}.image img,.content-heading{width:100%}.box{overflow-x:scroll;gap:10%;margin:auto!important;padding:10px;width:85%!important}.row-container{width:100%!important}.tab{letter-spacing:.5px;border-bottom:1px solid;padding-bottom:10px;cursor:pointer}.image{width:100%}}@media screen and (max-width: 475px){.content{padding:0;margin-bottom:30px}}.g-25{gap:55px}.mt-1{margin-top:1rem}.justify-center{justify-content:center}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturesSectionComponent, decorators: [{
             type: Component,
@@ -11600,7 +11536,7 @@ class TestimonialFullwidthComponent extends BaseSection {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestimonialFullwidthComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialFullwidthComponent, isStandalone: true, selector: "simpo-testimonial-fullwidth", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\" data-bs-interval=\"10000\">\r\n                    <ol class=\"carousel-indicators\">\r\n                        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n                            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n                    </ol>\r\n                    <div class=\"carousel-inner content-side overflow-visible\">\r\n                        <div class=\"single_card carousel-item\"\r\n                            *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n                            <!-- this is testimonial cards start-->\r\n\r\n                            <div class=\"main-section row\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"style?.positionLayout\">\r\n                                <div class=\"left setHeight\">\r\n                                    <div class=\"heading\">\r\n                                        <!-- <div class=\"text-element\"\r\n                                            [ngClass]=\"item.inputText[0].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [innerHtml]=\"item.inputText[0].value | sanitizeHtml\">\r\n                                        </div> -->\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                    <div class=\"subtext\">\r\n                                        <!-- <div class=\"text-element content-side\" [innerHtml]=\"item.inputText[1].value | sanitizeHtml\"\r\n                                            [ngClass]=\"item.inputText[1].label === 'Subtext' ? 'body-large' : 'heading-large lh-2 mb-3'\">\r\n                                        </div> -->\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"right\">\r\n                                    <div class=\"testimonial-img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\">\r\n                                      <img loading=\"lazy\"  [src]=\"item.image.url\" [alt]=\"item.image.altText\" class=\"person-img\"\r\n                                        [id]=\"data?.id\" [simpoObjectPosition]=\"item?.image?.position\"\r\n                                        [simpoCorner]=\"style?.corners\"   [appImageEditor]=\"edit || false\" [imageData]=\"item.image\" [sectionId]=\"data?.id\">\r\n                                      <div class=\"person-details\">\r\n                                          <div style=\"z-index: 100;\">\r\n                                              <!-- <div class=\"person-name\"\r\n                                                  [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                              <simpo-text-editor [(value)]=\"item.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                                              <!-- <div class=\"person-type\"\r\n                                                  [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n                                                  [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                              <simpo-text-editor [(value)]=\"item.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                                          </div>\r\n                                      </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- this is testimonial cards start-->\r\n                    </div>\r\n                    <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Previous</span>\r\n                    </a>\r\n                    <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Next</span>\r\n                    </a>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>\r\n", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.left{width:100%;display:flex;flex-direction:column}.container-fluid{padding:unset!important}.setHeight{height:28vh!important}}@media only screen and (min-width: 375px) and (max-width: 500px){.right{width:100%;display:flex;flex-direction:column}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
                 //directive
-                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestimonialFullwidthComponent, decorators: [{
             type: Component,
@@ -11654,6 +11590,7 @@ class LogoShowcaseComponent extends BaseSection {
         this.logoSpeedClass = '';
         this.logoDirectionClass = '';
         this.isFullWidth = true;
+        this.leftOrRight = ['left', 'right'];
         this.screenWidth = 475;
         this.getScreenSize();
     }
@@ -11664,7 +11601,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 };
@@ -11711,11 +11647,11 @@ class LogoShowcaseComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoShowcaseComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LogoShowcaseComponent, isStandalone: true, selector: "simpo-logo-showcase", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\r\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n        [attr.style]=\"customClass\">\r\n        <div class=\"py-3 w-100 \" [simpoBackground]=\"styles?.background\"\r\n            [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n            #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n            [spacingHorizontal]=\"stylesLayout\">\r\n            <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n                [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n                *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n                [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n                <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\"\r\n                    [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-7 d-flex flex-wrap flex-1 w-full\">\r\n                    <div class=\"slider flex overflow-hidden w-full\">\r\n                        <div class=\"slider-track\" *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n                            [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n                                *ngFor=\"let item of content?.listItem?.data\"\r\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                *ngFor=\"let item of content?.listItem?.data\"\r\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'}\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n                *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n                <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n                    [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n                    <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n                    <div class=\"slider flex overflow-hidden w-full\">\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\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'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\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'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data\">\r\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides d-flex align-items-center\" [simpoCorner]=\"styles?.corners\"\r\n                                *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\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'}\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n                                <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- </div> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n\r\n        <div class=\"w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n            [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\"\r\n            [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [simpoBackground]=\"styles?.background\">\r\n            <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n                [simpoLayout]=\"styles?.layout\">\r\n                <div class=\"mainsec content-side\" [id]=\"data?.id\"\r\n                    [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n                          styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n                          styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n                          styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n                      ]\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div [ngClass]=\"{\r\n                      'fullwidth flex-1 inline-edit  ': styles?.fullWidth,\r\n                      'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n                    }\">\r\n                        <div class=\"masking\">\r\n\r\n                            <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n                                [style.animationDirection]=\"animationDirection\">\r\n                                <div class=\"slider-track2\"\r\n                                    *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n                                    [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\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'}\"\r\n                                        *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                            *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                            [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n                                            [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                            [class]=\"data?.id+(item?.icon?.id || '')\">\r\n                                        <ng-container\r\n                                            *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                            <div [id]=\"data?.id\"\r\n                                                [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                                [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                                [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                                [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\r\n                                                <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                                    [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                                    [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                            </div>\r\n                                        </ng-container>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"slider-track2\"\r\n                                    *ngIf=\"content?.display?.showText && !content?.display?.showIcon\"\r\n                                    [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\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'}\"\r\n                                        *ngFor=\"let item of content?.listItem?.data\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"slider-track2 d-flex w-full\"\r\n                                    *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n                                    [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\r\n                                        *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\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'}\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                            *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                            [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n                                            [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                            [class]=\"data?.id+(item?.icon?.id || '')\">\r\n                                        <ng-container\r\n                                            *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                            <div [id]=\"data?.id\"\r\n                                                [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                                [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                                [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                                [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\r\n                                                <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                                    [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                                    [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                            </div>\r\n                                        </ng-container>\r\n                                        <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\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;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.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:translateZ(0)}to{transform:translate3d(-100%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-100%,0,0)}to{transform:translateZ(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;background-color:rgba(0,0,0,var(--tw-bg-opacity));width:auto;height:auto;display:flex;position:relative}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 0}.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%}}.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"], dependencies: [{ kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LogoShowcaseComponent, isStandalone: true, selector: "simpo-logo-showcase", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\r\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n        [attr.style]=\"customClass\">\r\n        <div class=\"py-3 w-100 \" [simpoBackground]=\"styles?.background\"\r\n            [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n            #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n            [spacingHorizontal]=\"stylesLayout\">\r\n            <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n                [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n                *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n                [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n                <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\"\r\n                    [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n                    <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n                          [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                      </div> -->\r\n\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n\r\n\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-7 d-flex flex-wrap flex-1 w-full\">\r\n                    <div class=\"slider flex overflow-hidden w-full\">\r\n                        <div class=\"slider-track\" *ngIf=\"content?.display?.showImage && !content?.display?.showText\"\r\n                            [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                                    [imageData]=\"item?.image\" [sectionId]=\"data?.id\"\r\n                                    [class]=\"data?.id+(item?.image?.id || '')\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"!content?.display?.showImage && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n                                *ngFor=\"let item of content?.listItem?.data\"\r\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showImage && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                *ngFor=\"let item of content?.listItem?.data\"\r\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'}\">\r\n                                <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                                    [imageData]=\"item?.image\" [sectionId]=\"data?.id\"\r\n                                    [class]=\"data?.id+(item?.image?.id || '')\">\r\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- </div> -->\r\n                </div>\r\n            </div>\r\n            <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n                *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n                <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n                    [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n                    <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n                    <div class=\"slider flex overflow-hidden w-full\">\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showImage && !content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\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'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n                                <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                                    [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"!content?.display?.showImage && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\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'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data\">\r\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showImage && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides d-flex align-items-center\" [simpoCorner]=\"styles?.corners\"\r\n                                *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\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'}\">\r\n                                <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                                    [imageData]=\"item?.image\" [sectionId]=\"data?.id\"\r\n                                    [class]=\"data?.id+(item?.image?.id || '')\">\r\n                                <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- </div> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n\r\n        <div class=\"w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n            [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\"\r\n            [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [simpoBackground]=\"styles?.background\">\r\n            <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n                [simpoLayout]=\"styles?.layout\">\r\n                <div class=\"mainsec content-side\" [id]=\"data?.id\"\r\n                    [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n                          styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n                          styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n                          styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n                      ]\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div [ngClass]=\"{\r\n                      'fullwidth flex-1 inline-edit  ': styles?.fullWidth,\r\n                      'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n                    }\">\r\n                        <div class=\"masking\">\r\n\r\n                            <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n                                [style.animationDirection]=\"animationDirection\">\r\n                                <div class=\"slider-track2\"\r\n                                    *ngIf=\"content?.display?.showImage && !content?.display?.showText\"\r\n                                    [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\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'}\"\r\n                                        *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n                                            [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                                            [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"slider-track2\"\r\n                                    *ngIf=\"content?.display?.showText && !content?.display?.showImage\"\r\n                                    [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\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'}\"\r\n                                        *ngFor=\"let item of content?.listItem?.data\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"slider-track2 d-flex w-full\"\r\n                                    *ngIf=\"content?.display?.showImage && content?.display?.showText\"\r\n                                    [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\r\n                                        *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\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'}\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n                                            [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                                            [imageData]=\"item?.image\" [sectionId]=\"data?.id\"\r\n                                            [class]=\"data?.id+(item?.image?.id || '')\">\r\n                                        <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\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;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.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:translateZ(0)}to{transform:translate3d(-100%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-100%,0,0)}to{transform:translateZ(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;background-color:rgba(0,0,0,var(--tw-bg-opacity));flex-grow:1;flex-shrink:0;width:auto;height:auto;display:flex;position:relative}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000001a 0 4px 12px}.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%}}.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"], dependencies: [{ kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
 }
 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'\">\r\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n        [attr.style]=\"customClass\">\r\n        <div class=\"py-3 w-100 \" [simpoBackground]=\"styles?.background\"\r\n            [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n            #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n            [spacingHorizontal]=\"stylesLayout\">\r\n            <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n                [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n                *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n                [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n                <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\"\r\n                    [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-7 d-flex flex-wrap flex-1 w-full\">\r\n                    <div class=\"slider flex overflow-hidden w-full\">\r\n                        <div class=\"slider-track\" *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n                            [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n                                *ngFor=\"let item of content?.listItem?.data\"\r\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                *ngFor=\"let item of content?.listItem?.data\"\r\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'}\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n                *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n                <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n                    [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n                    <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n                    <div class=\"slider flex overflow-hidden w-full\">\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\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'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\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'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data\">\r\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides d-flex align-items-center\" [simpoCorner]=\"styles?.corners\"\r\n                                *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\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'}\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n                                <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- </div> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n\r\n        <div class=\"w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n            [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\"\r\n            [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [simpoBackground]=\"styles?.background\">\r\n            <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n                [simpoLayout]=\"styles?.layout\">\r\n                <div class=\"mainsec content-side\" [id]=\"data?.id\"\r\n                    [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n                          styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n                          styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n                          styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n                      ]\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div [ngClass]=\"{\r\n                      'fullwidth flex-1 inline-edit  ': styles?.fullWidth,\r\n                      'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n                    }\">\r\n                        <div class=\"masking\">\r\n\r\n                            <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n                                [style.animationDirection]=\"animationDirection\">\r\n                                <div class=\"slider-track2\"\r\n                                    *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n                                    [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\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'}\"\r\n                                        *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                            *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                            [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n                                            [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                            [class]=\"data?.id+(item?.icon?.id || '')\">\r\n                                        <ng-container\r\n                                            *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                            <div [id]=\"data?.id\"\r\n                                                [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                                [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                                [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                                [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\r\n                                                <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                                    [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                                    [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                            </div>\r\n                                        </ng-container>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"slider-track2\"\r\n                                    *ngIf=\"content?.display?.showText && !content?.display?.showIcon\"\r\n                                    [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\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'}\"\r\n                                        *ngFor=\"let item of content?.listItem?.data\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"slider-track2 d-flex w-full\"\r\n                                    *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n                                    [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\r\n                                        *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\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'}\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                            *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                            [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n                                            [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                            [class]=\"data?.id+(item?.icon?.id || '')\">\r\n                                        <ng-container\r\n                                            *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                            <div [id]=\"data?.id\"\r\n                                                [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                                [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                                [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                                [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\r\n                                                <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                                    [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                                    [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                            </div>\r\n                                        </ng-container>\r\n                                        <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\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;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.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:translateZ(0)}to{transform:translate3d(-100%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-100%,0,0)}to{transform:translateZ(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;background-color:rgba(0,0,0,var(--tw-bg-opacity));width:auto;height:auto;display:flex;position:relative}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 0}.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%}}.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, SanitizeHtmlPipe, TextEditorComponent, SimpoComponentModule, CommonModule, MatGridListModule, AnimationDirective, BackgroundDirective, ContentFitDirective, BorderDirective, BannerContentFitDirective, ButtonDirectiveDirective, ColumnDirectiveDirective, ContainerFitDirective, CornerDirective, simpoConetenAlignmentDirective, SimpoFooterLayoutDirective, HoverDirective, ImageDirectiveDirective, OverlayDirective, PositionLayoutDirectiveDirective, TextBackgroundDirectiveDirective, SpacingHorizontalDirective, ObjectPositionDirective, ImageEditorDirective], template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\r\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n        [attr.style]=\"customClass\">\r\n        <div class=\"py-3 w-100 \" [simpoBackground]=\"styles?.background\"\r\n            [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n            #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n            [spacingHorizontal]=\"stylesLayout\">\r\n            <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n                [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n                *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n                [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n                <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\"\r\n                    [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n                    <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n                          [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                      </div> -->\r\n\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n\r\n\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-7 d-flex flex-wrap flex-1 w-full\">\r\n                    <div class=\"slider flex overflow-hidden w-full\">\r\n                        <div class=\"slider-track\" *ngIf=\"content?.display?.showImage && !content?.display?.showText\"\r\n                            [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                                    [imageData]=\"item?.image\" [sectionId]=\"data?.id\"\r\n                                    [class]=\"data?.id+(item?.image?.id || '')\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"!content?.display?.showImage && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n                                *ngFor=\"let item of content?.listItem?.data\"\r\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showImage && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                *ngFor=\"let item of content?.listItem?.data\"\r\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'}\">\r\n                                <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                                    [imageData]=\"item?.image\" [sectionId]=\"data?.id\"\r\n                                    [class]=\"data?.id+(item?.image?.id || '')\">\r\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- </div> -->\r\n                </div>\r\n            </div>\r\n            <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n                *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n                <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n                    [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n                    <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n                    <div class=\"slider flex overflow-hidden w-full\">\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showImage && !content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\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'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n                                <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                                    [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"!content?.display?.showImage && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\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'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data\">\r\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showImage && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides d-flex align-items-center\" [simpoCorner]=\"styles?.corners\"\r\n                                *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\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'}\">\r\n                                <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                                    [imageData]=\"item?.image\" [sectionId]=\"data?.id\"\r\n                                    [class]=\"data?.id+(item?.image?.id || '')\">\r\n                                <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- </div> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n\r\n        <div class=\"w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n            [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\"\r\n            [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [simpoBackground]=\"styles?.background\">\r\n            <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n                [simpoLayout]=\"styles?.layout\">\r\n                <div class=\"mainsec content-side\" [id]=\"data?.id\"\r\n                    [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n                          styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n                          styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n                          styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n                      ]\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div [ngClass]=\"{\r\n                      'fullwidth flex-1 inline-edit  ': styles?.fullWidth,\r\n                      'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n                    }\">\r\n                        <div class=\"masking\">\r\n\r\n                            <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n                                [style.animationDirection]=\"animationDirection\">\r\n                                <div class=\"slider-track2\"\r\n                                    *ngIf=\"content?.display?.showImage && !content?.display?.showText\"\r\n                                    [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\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'}\"\r\n                                        *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n                                            [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                                            [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"slider-track2\"\r\n                                    *ngIf=\"content?.display?.showText && !content?.display?.showImage\"\r\n                                    [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\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'}\"\r\n                                        *ngFor=\"let item of content?.listItem?.data\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"slider-track2 d-flex w-full\"\r\n                                    *ngIf=\"content?.display?.showImage && content?.display?.showText\"\r\n                                    [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\r\n                                        *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\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'}\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n                                            [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                                            [imageData]=\"item?.image\" [sectionId]=\"data?.id\"\r\n                                            [class]=\"data?.id+(item?.image?.id || '')\">\r\n                                        <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\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;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.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:translateZ(0)}to{transform:translate3d(-100%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-100%,0,0)}to{transform:translateZ(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;background-color:rgba(0,0,0,var(--tw-bg-opacity));flex-grow:1;flex-shrink:0;width:auto;height:auto;display:flex;position:relative}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000001a 0 4px 12px}.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%}}.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: [{
@@ -11835,7 +11771,7 @@ class BannerCarouselComponent extends BaseSection {
         return window.innerWidth;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BannerCarouselComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerCarouselComponent, isStandalone: true, selector: "simpo-banner-carousel", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div class=\"flex relative fix-safari-flickering\" [ngStyle]=\"{\r\n       'min-height': styles?.layout?.fit === 'content' ? 'calc(134px)' :\r\n                     styles?.layout?.fit === 'screen' ? 'calc(134px+ 100vh)' : '',\r\n       'padding-top': '0px',\r\n       'padding-bottom': '0px'\r\n     }\"  [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"flex break-word w-full items-center overflow-hidden\" [id]=\"data?.id\">\r\n      <div id=\"carouselExampleInterval\" class=\"carousel slide\"  data-bs-ride=\"carousel\">\r\n        <!-- data-bs-ride=\"carousel\" -->\r\n        <ol class=\"carousel-indicators\" *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\r\n          <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n        </ol>\r\n        <div class=\"carousel-inner\">\r\n          <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carousel-item \"\r\n            [ngClass]=\"{'active': i === currentIndex}\">\r\n            <img loading=\"lazy\" [src]=\"item.image.url\" [simpoBlurContent]=\"getBlurValue\" class=\"imgclass w-100\"\r\n              alt=\"item.image.alt || 'Carousel image'\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\"\r\n              [sectionId]=\"data?.id\">\r\n            <div class=\"overlay\" [style.opacity]=\"getBackgroundOpacity\"\r\n              [style.backgroundColor]=\"styles?.background?.color ?? '#fff'\"></div>\r\n          </div>\r\n          <div class=\"col-xxl-8   mx-auto relative  w-100 opacity-100 position-relative\" style=\"z-index: 1;\"\r\n            [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n            [simpoLayout]=\"styles?.layout\">\r\n\r\n            <div class=\"row g-5 justify-content-start content-side\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n              [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n              <div class=\"col-lg-6 w-full max-w-2xl items-start d-flex flex-column \"\r\n                [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\">\r\n                <div *ngFor=\"let item of content?.inputText\">\r\n                  <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n                    <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                  </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"data?.action && data?.action?.display\" class=\"customclass w-full mb-3\" [ngClass]=\"[\r\n                                                styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n                                                styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n                                                styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n                                            ]\">\r\n                  <div *ngFor=\"let button of data?.action?.buttons\" class=\"btn-container \">\r\n                    <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                      [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                      [color]=\"data?.styles?.background?.accentColor\"\r\n                      [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n        <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"prev\"\r\n          *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\r\n          <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n          <span class=\"sr-only\">Previous</span>\r\n        </a>\r\n        <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"next\"\r\n          *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\r\n          <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n          <span class=\"sr-only\">Next</span>\r\n        </a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>", styles: [".total-container{height:auto;position:relative}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e;border-radius:50%}.carousel-control-next,.carousel-control-prev{width:5%!important}.carousel-indicators .active{width:10px;height:10px;background-color:#fff;border-radius:50%}.carousel-inner{height:100%;position:relative;width:100%}.overlay{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}.carousel-item{position:relative;width:100%;height:100%}.carousel-item img{position:absolute;top:0;left:0;width:100%;opacity:.75;object-fit:cover;object-position:center}.carousel-indicators{bottom:0!important}.carousel-indicators .circle{width:10px;height:10px;border-radius:50%;background-color:gray}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width : 475px){.carousel-inner{display:flex}.carousel-indicators{margin-bottom:unset!important}.carousel-item{height:unset!important}.carousel-item img{height:100%!important}}li{list-style:none}.heading-large{margin-left:0%!important}@media (min-width: 860px){.md\\:flex-row{flex-direction:row}}@media (min-width: 860px){.md\\:w-max{width:max-content}}@media (min-width: 860px){.md\\:inline-flex{display:inline-flex}}.btn-container{display:flex;justify-content:center;width:auto}.btn{padding:1rem 1.5rem}.customclass{display:inline-flex;flex-direction:row;gap:1rem;width:100%;margin-top:2rem}@media (max-width: 800px){.customclass{flex-direction:column;align-items:center}.btn-container{width:100%}.btn{width:100%;padding:1rem}}.pb-20{padding-bottom:50px}.pt-20{padding-top:50px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: SimpoBlurContentDirective, selector: "[simpoBlurContent]", inputs: ["simpoBlurContent"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerCarouselComponent, isStandalone: true, selector: "simpo-banner-carousel", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div class=\"flex relative fix-safari-flickering\" [ngStyle]=\"{\r\n       'min-height': styles?.layout?.fit === 'content' ? 'calc(134px)' :\r\n                     styles?.layout?.fit === 'screen' ? 'calc(134px+ 100vh)' : '',\r\n       'padding-top': '0px',\r\n       'padding-bottom': '0px'\r\n     }\"  [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"flex break-word w-full items-center overflow-hidden\" [id]=\"data?.id\">\r\n      <div id=\"carouselExampleInterval\" class=\"carousel slide\"  data-bs-ride=\"carousel\">\r\n        <!-- data-bs-ride=\"carousel\" -->\r\n        <ol class=\"carousel-indicators\" *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\r\n          <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n        </ol>\r\n        <div class=\"carousel-inner\">\r\n          <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carousel-item \"\r\n            [ngClass]=\"{'active': i === currentIndex}\">\r\n            <img loading=\"lazy\" [src]=\"item.image.url\" [simpoBlurContent]=\"getBlurValue\" class=\"imgclass w-100\"\r\n              alt=\"item.image.alt || 'Carousel image'\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\"\r\n              [sectionId]=\"data?.id\">\r\n            <div class=\"overlay\" [style.opacity]=\"getBackgroundOpacity\"\r\n              [style.backgroundColor]=\"styles?.background?.color ?? '#fff'\"></div>\r\n          </div>\r\n          <div class=\"col-xxl-8   mx-auto relative  w-100 opacity-100 position-relative\" style=\"z-index: 1;\"\r\n            [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n            [simpoLayout]=\"styles?.layout\">\r\n\r\n            <div class=\"row g-5 justify-content-start content-side\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n              [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n              <div class=\"col-lg-6 w-full max-w-2xl items-start d-flex flex-column \"\r\n                [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\">\r\n                <div *ngFor=\"let item of content?.inputText\">\r\n                  <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n                    <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                  </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"data?.action && data?.action?.display\" class=\"customclass w-full mb-3\" [ngClass]=\"[\r\n                                                styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n                                                styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n                                                styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n                                            ]\">\r\n                  <div *ngFor=\"let button of data?.action?.buttons\" class=\"btn-container \">\r\n                    <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                      [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                      [color]=\"data?.styles?.background?.accentColor\"\r\n                      [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n        <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"prev\"\r\n          *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\r\n          <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n          <span class=\"sr-only\">Previous</span>\r\n        </a>\r\n        <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"next\"\r\n          *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\r\n          <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n          <span class=\"sr-only\">Next</span>\r\n        </a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>", styles: [".total-container{height:auto;position:relative}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e;border-radius:50%}.carousel-control-next,.carousel-control-prev{width:5%!important}.carousel-indicators .active{width:10px;height:10px;background-color:#fff;border-radius:50%}.carousel-inner{height:100%;position:relative;width:100%}.overlay{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}.carousel-item{position:relative;width:100%;height:100%}.carousel-item img{position:absolute;top:0;left:0;width:100%;opacity:.75;object-fit:cover;object-position:center}.carousel-indicators{bottom:0!important}.carousel-indicators .circle{width:10px;height:10px;border-radius:50%;background-color:gray}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width : 475px){.carousel-inner{display:flex}.carousel-indicators{margin-bottom:unset!important}.carousel-item{height:unset!important}.carousel-item img{height:100%!important}}li{list-style:none}.heading-large{margin-left:0%!important}@media (min-width: 860px){.md\\:flex-row{flex-direction:row}}@media (min-width: 860px){.md\\:w-max{width:max-content}}@media (min-width: 860px){.md\\:inline-flex{display:inline-flex}}.btn-container{display:flex;justify-content:center;width:auto}.btn{padding:1rem 1.5rem}.customclass{display:inline-flex;flex-direction:row;gap:1rem;width:100%;margin-top:2rem}@media (max-width: 800px){.customclass{flex-direction:column;align-items:center}.btn-container{width:100%}.btn{width:100%;padding:1rem}}.pb-20{padding-bottom:50px}.pt-20{padding-top:50px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: SimpoBlurContentDirective, selector: "[simpoBlurContent]", inputs: ["simpoBlurContent"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BannerCarouselComponent, decorators: [{
             type: Component,
@@ -12653,7 +12589,7 @@ class AppointmentFormComponent extends BaseSection {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentFormComponent, deps: [{ token: EventsService }, { token: i1$1.MatDialog }, { token: RestService }, { token: i2$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppointmentFormComponent, isStandalone: true, selector: "simpo-appointment-form", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n  [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n  class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  [attr.style]=\"customClass\">\r\n  <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row\"\r\n      [ngClass]=\"{'row' : isBorderlessImage}\" [simpoCorner]=\"styles?.corners\"\r\n      [ngClass]=\"{'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\">\r\n      <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n      <div class=\"py-5\"\r\n        [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')}\"\r\n        [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n        <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n          [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n          [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n          [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n          <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n            [simpoContainerAlignment]=\"stylesLayout\">\r\n            <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n              [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n              [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n              [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n              [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n          </div>\r\n          <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n            [ngClass]=\"{'col-lg-12':  content?.image?.showImage && isBorderlessImage, 'col-lg-6':!isBorderlessImage || !content?.image?.showImage}\"\r\n            [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n            [simpoCorner]=\"styles?.corners\">\r\n            <div *ngFor=\"let item of content?.inputText\">\r\n              <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n                [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n              <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n            <!-- <div class=\"d-flex gap-3 card-container\"\r\n              [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n              <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n                <div class=\"card_wrapper\">\r\n                  <div class=\"container_card visible\">\r\n                    <div class=\"card-section\">\r\n                      <div class=\"second-part-card\">\r\n                      </div>\r\n                      <div class=\"first-part-card d-flex align-items-center\"\r\n                        [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                        <img loading=\"lazy\" class=\"tick-img\" [src]=\"item?.icon?.url\" alt=\"something\" />\r\n                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                          [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div> -->\r\n            <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n              [simpoContainerAlignment]=\"stylesLayout\">\r\n              <div *ngFor=\"let button of data?.action?.buttons\">\r\n                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                  [buttonId]=\"button.id\" (click)=\"opendailogbox(dialogBox)\" [sectionId]=\"data?.id\"\r\n                  [color]=\"data?.styles?.background?.accentColor\"\r\n                  [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ImageSection>\r\n  <div class=\"col-10 col-sm-8 col-lg-6\"\r\n    [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n    style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n    [simpoBorderless]=\"getPositionLayout\">\r\n    <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n      [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n      [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n      [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<!-- Dialog template -->\r\n<ng-template #dialogBox class=\"dialogbox\">\r\n  <div class=\"appointment-form\">\r\n    <div class=\"header-section\">\r\n      <div class=\"header-left-side\">\r\n        <h2 style=\"text-align: left;\">Book an Appointment</h2>\r\n      </div>\r\n      <div class=\"header-right-side\">\r\n        <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <form>\r\n      <div class=\"name-mobile\">\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Name</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n              [(ngModel)]=\"CreateData.clientName\" (ngModelChange)=\"onUserNameChange($event)\"\r\n              [ngModelOptions]=\"{standalone: true}\">\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Mobile Number</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <input type=\"text\" class=\"inputStyle\" matInput placeholder=\"Enter Your Mobile Number\"\r\n              pattern=\"^[0-9]{10,15}$\" maxlength=\"15\" (focus)=\"onFocus()\" (keypress)=\"restrictNonNumeric($event)\"\r\n              [(ngModel)]=\"CreateData.mobile\" [ngModelOptions]=\"{standalone: true}\">\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"name-mobile\">\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Location</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"selectedLocation\"\r\n              (ngModelChange)=\"changeLocation()\" [ngModelOptions]=\"{standalone: true}\">\r\n              <ng-container *ngFor=\"let location of locationData\">\r\n                <mat-option [value]=\"location.id\">\r\n                  {{ location.name }}\r\n                </mat-option>\r\n              </ng-container>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Service</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"Select Service\" [(ngModel)]=\"selectedServices\"\r\n              (ngModelChange)=\"getAllStaff()\" [ngModelOptions]=\"{standalone: true}\">\r\n              <ng-container *ngFor=\"let service of serviceData\">\r\n                <mat-option [value]=\"service\">\r\n                  {{ service.name }}\r\n                </mat-option>\r\n              </ng-container>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"name-mobile\">\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Staff</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"Select Staff\" [(ngModel)]=\"selectedStaff\"\r\n              (ngModelChange)=\"getAvailableSlots()\" [ngModelOptions]=\"{standalone: true}\">\r\n              <ng-container *ngFor=\"let staff of staffData\">\r\n                <mat-option [value]=\"staff.id\">\r\n                  {{ staff.name }}\r\n                </mat-option>\r\n              </ng-container>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"name-mobile\">\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Date</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <input class=\"inputStyle\" matInput [matDatepicker]=\"picker\" placeholder=\"Select Date\"\r\n              [(ngModel)]=\"CreateData.scheduledDate\" (ngModelChange)=\"changeDate()\" [min]=\"minDate\"\r\n               [ngModelOptions]=\"{standalone: true}\">\r\n            <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n            <mat-datepicker #picker></mat-datepicker>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Time</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"CreateData.scheduledTime\"\r\n              [ngModelOptions]=\"{standalone: true}\">\r\n              <mat-option *ngFor=\"let time of locationTiming\" [value]=\"time\" [disabled]=\"bookedSlots.has(time)\">\r\n                {{ time }}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"full-message-section\">\r\n        <div class=\"business-field-section\">\r\n          <div class=\"input-text\">Message</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n              [(ngModel)]=\"CreateData.message\" [ngModelOptions]=\"{standalone: true}\">\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"bottom-section\">\r\n        <div class=\"button-section\">\r\n          <button class=\"booking-button\" [disabled]=\"!isFormValid()\" (click)=\"createAppointment()\">\r\n            Book Appointment\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n\r\n    </form>\r\n  </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.box{background:#fff;border:8px solid rgb(232 232 232 / 80%);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.card-container,.name-mobile{flex-direction:column}.sfull-width{width:100%!important}.appointment-form{box-shadow:none!important}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}appointment-form{width:65vw;background-color:#fff;border-radius:8px;padding:20px;box-shadow:0 4px 8px #0000001a}h2{text-align:center;margin-bottom:20px}.form-group{display:flex;flex-direction:column;margin-bottom:15px;width:100%}label{font-weight:700;margin-bottom:5px}input,select,textarea{padding:8px;border:1px solid #ccc;border-radius:4px;font-size:14px}input::placeholder,textarea::placeholder{color:#888}.name-mobile,.date-time{display:flex;justify-content:space-between}textarea{resize:vertical}.book-btn{width:100%;background-color:#007bff;color:#fff;border:none;padding:10px;border-radius:4px;font-size:16px;cursor:pointer}.book-btn:hover{background-color:#0056b3}.bottom-section{width:100%;display:flex;justify-content:right}.button-section{width:30%;margin:10px 0}.booking-button{background:#0496ff;color:#fff;border:1px solid#0496FF;border-radius:10px;padding:7px 5px}.header-section{display:flex;width:100%;justify-content:space-between}.header-left-side{width:50%;white-space:nowrap}.header-right-side{width:5%;cursor:pointer}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.button-section{width:100%!important}.appointment-form{width:100vw}}.appointment-form{width:65vw;background-color:#fff;border-radius:8px;padding:20px;box-shadow:0 4px 8px #0000001a}.sfull-width{width:49%;height:75px}.input-text{margin-bottom:5px}.full-width{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i14.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i14.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i14.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
                 //directive
-                SimpoBorderlessDirective, selector: "[simpoBorderless]", inputs: ["simpoBorderless"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
+                SimpoBorderlessDirective, selector: "[simpoBorderless]", inputs: ["simpoBorderless"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentFormComponent, decorators: [{
             type: Component,
@@ -12847,7 +12783,7 @@ class LogoGalleryComponent extends BaseSection {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoGalleryComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LogoGalleryComponent, isStandalone: true, selector: "simpo-logo-gallery", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", nextComponentColor: "nextComponentColor", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\" [spacingHorizontal]=\"stylesLayout\">\r\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n                [ngStyle]=\"style?.removeGaps && style?.fullWidth ? {'padding': '0px'} : style?.removeGaps ? {'padding': '0px 15px'} : style?.fullWidth ? {'padding': '0px'} : {}\">\r\n                <div *ngFor=\"let text of data?.content?.inputText;let i = index\"\r\n                    [simpoContentTitleSpace]=\"i == 0 ? style?.layout?.headingSpacing : undefined\">\r\n                    <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                </div>\r\n                <!-- <div class=\"mt-2 text-center d-flex gap-3 align-items-center justify-content-center\">\r\n                    <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/869189c1729848816795akar-icons_arrow-back.png\"\r\n                        alt=\"left curved arrow\" loading=\"eager\" width=\"20\" class=\"left-arrow\">\r\n                    <div class=\"static-text\">\r\n                        Curate startup\u2019s by industry\r\n                    </div>\r\n                    <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/445281c1729848833765akar-icons_arrow-back-1.png\"\r\n                        alt=\"right curved arrow\" loading=\"eager\" width=\"20\" class=\"right-arrow\">\r\n                </div> -->\r\n                <!-- <div class=\"main-image-section d-flex flex-wrap mt-5\" [id]=\"data?.id\">\r\n                    <ng-container *ngFor=\"let img of content?.listItem?.data;let i = index\">\r\n                        <div class=\"image-section\">\r\n                            <img\r\n                                [id]=\"data?.id\" [class]=\"data?.id+img.image.id\" \r\n                                [src]=\"img.image.url\" [alt]=\"img.image.altText\" loading=\"lazy\" />\r\n                        </div>\r\n                    </ng-container>\r\n                </div> -->\r\n                <div class=\"main-image-section mb-2 d-flex flex-wrap mt-5\" [ngClass]=\"{'px-0': style?.fullWidth}\" [id]=\"data?.id\" *ngIf=\"screenWidth > 475\">\r\n                    <ng-container *ngFor=\"let img of content?.listItem?.data; let i = index\">\r\n                        <div class=\"image-section\" [ngClass]=\"{'even-row': isEvenRow(i), 'odd-row': !isEvenRow(i)}\">\r\n                            <img [id]=\"data?.id\" [class]=\"data?.id + img.image.id\" [src]=\"img.image.url\"\r\n                                [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\"\r\n                                [alt]=\"img.image.altText\" loading=\"lazy\" [simpoCorner]=\"style?.corners\" />\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"mob-container\" *ngIf=\"screenWidth <= 475\">\r\n                    <ng-container *ngFor=\"let img of content?.listItem?.data; let i = index\">\r\n                        <div class=\"d-flex logo-box justify-content-center\">\r\n                            <img [id]=\"data?.id\" [class]=\"data?.id + img.image.id\" [src]=\"img.image.url\"\r\n                                [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\"\r\n                                [alt]=\"img.image.altText\" loading=\"lazy\" [simpoCorner]=\"style?.corners\" />\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n</section>", styles: [".text-alignment{text-align:center;margin-bottom:10px}.total-container{height:auto;position:relative}.main-image-section{padding:0px 5rem}.image-section{padding:5px}.image-section img{width:100%;object-fit:cover}.even-row{flex-basis:calc(100% / 7);max-width:calc(100% / 7)}.odd-row{flex-basis:12.5%;max-width:12.5%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset!important;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}.left-arrow,.right-arrow{position:relative;top:10px}.static-text{font-size:16px;font-weight:900}.mob-container{display:grid;grid-template-columns:45% 45%;justify-content:center;margin-top:8px}.logo-box{padding-top:.25rem;width:100%;height:8rem}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
                 //directive
-                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoGalleryComponent, decorators: [{
             type: Component,
@@ -14402,7 +14338,7 @@ class HeaderSectionComponent {
         return pathname.includes('/list') || pathname === '/' || pathname === '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite &&  (categoryList?.length == 0 || !showCategoryMobileHeader()) && isMobile\">\r\n    <!-- isHeaderSticky && isEcommerceWebsite && (!categoryList || !showCategoryMobileHeader()) && -->\r\n    <!-- [scrollValue]=\"isComponentMerged ? scrollValue : 0\" -->\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" [simpoOverlay]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile\" simpoHover [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n      <ng-container *ngIf=\"style?.headline?.display\">\r\n        <div>\r\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n        </div>\r\n      </ng-container>\r\n      <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n      <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"style?.background?.color\">search</mat-icon>\r\n      </div> -->\r\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n      </ng-container>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n        aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container> </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n    (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n    [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <div class=\"d-flex gap-3\"\r\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n      <ng-container *ngFor=\"let item of getNavbarButton\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | lowercase | titlecase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div> -->\r\n    <div class=\"w-75 d-flex align-items-center\">\r\n      <div class=\"input-group w-75 ml-2\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\" [style.color]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\" [style.borderColor]=\"backgroundInfo?.accentColor\"\r\n        (click)=\"goToSchemes()\" [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"schemeAvailable\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n          height=\"30\" version=\"1.1\">\r\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n          </g>\r\n        </svg>\r\n        <div [style.color]=\"accentColor\">Schemes</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\" [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\" [style.color]=\"backgroundInfo?.accentColor\"\r\n        *ngIf=\"!getPincode\">Enter\r\n        Pincode\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\" [style.color]=\"backgroundInfo?.accentColor\"\r\n        *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" + getPincode}}</div>\r\n\r\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your PIN Code unlocks\r\n        </div>\r\n        <div class=\"sub-text text-center f-14 pincode-text\">\r\n          Fastest delivery date, Try-at-Home availability,\r\n          Nearest store and In-store design!\r\n        </div>\r\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n          [class.error-border]=\"pinError\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n            class=\"w-75 p-0\">\r\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n        </div>\r\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n          Please enter a valid pincode\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getCartItemsCount}}</div>\r\n      </div>\r\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n      </div>\r\n      <!-- (mouseleave)=\"showLogin = false\" -->\r\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your Account\r\n        </div>\r\n        <div class=\"sub-text text-center f-14\">\r\n          Access account & manage your orders.\r\n        </div>\r\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n            [style.color]=\"style?.background?.color\">Sign Up</div>\r\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\" [style.borderColor]=\"backgroundInfo?.accentColor\"\r\n            [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n  <div class=\"offcanvas-header\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div>\r\n  <div class=\"offcanvas-body\">\r\n    <div class=\"pages\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n  <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n    *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n    <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n      (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n      {{ele?.categoryName | titlecase}}\r\n    </div>\r\n    <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n      *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n      [simpoColor]=\"data?.styles?.headline?.color\">\r\n      Collections\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showList = false\" -->\r\n  <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n          <div class=\"list-header mb-3\">By Price</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n              <div class=\"each-price cursor-pointer\"\r\n                (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n                {{price | titlecase}}\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4 h-100 overflow-scroll\"\r\n          *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n          <div class=\"list-header mb-3\">By Style</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n              <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n                |\r\n                titlecase}}</div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n          <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n              <div class=\"d-flex gap-2 align-items-center\">\r\n                <div style=\"width: 15px;height: 20px;\">\r\n                  <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n                </div>\r\n                <div class=\"each-price cursor-pointer\">{{collection.name\r\n                  |\r\n                  titlecase}}</div>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n        <ng-container *ngFor=\"let image of selectedCategory?.imageUrls  | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showCollections = false\" -->\r\n  <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n          <div class=\"collection row col-3 align-items-center\"\r\n            (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n            <div class=\"col-imag col-4\">\r\n              <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n            </div>\r\n            <div class=\"col-8 text-overflow\">\r\n              {{collection?.collectionName | titlecase}}\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n        <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6  position-relative\" *ngIf=\"image\"\r\n            (click)=\"applyFilterToList(image, 'collections')\">\r\n            <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n            <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n              [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n      <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n      </div>\r\n      <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite &&  (categoryList?.length == 0 || !showCategoryMobileHeader()) && isMobile\">\r\n    <!-- isHeaderSticky && isEcommerceWebsite && (!categoryList || !showCategoryMobileHeader()) && -->\r\n    <!-- [scrollValue]=\"isComponentMerged ? scrollValue : 0\" -->\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" [simpoOverlay]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile\" simpoHover [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n      <ng-container *ngIf=\"style?.headline?.display\">\r\n        <div>\r\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n        </div>\r\n      </ng-container>\r\n      <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n      <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"style?.background?.color\">search</mat-icon>\r\n      </div> -->\r\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n      </ng-container>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n        aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container> </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n    (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n    [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <div class=\"d-flex gap-3\"\r\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n      <ng-container *ngFor=\"let item of getNavbarButton\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | lowercase | titlecase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\">\r\n        Login\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div> -->\r\n    <div class=\"w-75 d-flex align-items-center\">\r\n      <div class=\"input-group w-75 ml-2\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\" [style.color]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\" [style.borderColor]=\"backgroundInfo?.accentColor\"\r\n        (click)=\"goToSchemes()\" [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"schemeAvailable\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n          height=\"30\" version=\"1.1\">\r\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n          </g>\r\n        </svg>\r\n        <div [style.color]=\"accentColor\">Schemes</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\" [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\" [style.color]=\"backgroundInfo?.accentColor\"\r\n        *ngIf=\"!getPincode\">Enter\r\n        Pincode\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\" [style.color]=\"backgroundInfo?.accentColor\"\r\n        *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" + getPincode}}</div>\r\n\r\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your PIN Code unlocks\r\n        </div>\r\n        <div class=\"sub-text text-center f-14 pincode-text\">\r\n          Fastest delivery date, Try-at-Home availability,\r\n          Nearest store and In-store design!\r\n        </div>\r\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n          [class.error-border]=\"pinError\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n            class=\"w-75 p-0\">\r\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n        </div>\r\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n          Please enter a valid pincode\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getCartItemsCount}}</div>\r\n      </div>\r\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n      </div>\r\n      <!-- (mouseleave)=\"showLogin = false\" -->\r\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your Account\r\n        </div>\r\n        <div class=\"sub-text text-center f-14\">\r\n          Access account & manage your orders.\r\n        </div>\r\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n            [style.color]=\"style?.background?.color\">Sign Up</div>\r\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\" [style.borderColor]=\"backgroundInfo?.accentColor\"\r\n            [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n  <div class=\"offcanvas-header\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div>\r\n  <div class=\"offcanvas-body\">\r\n    <div class=\"pages\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n  <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n    *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n    <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n      (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n      {{ele?.categoryName | titlecase}}\r\n    </div>\r\n    <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n      *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n      [simpoColor]=\"data?.styles?.headline?.color\">\r\n      Collections\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showList = false\" -->\r\n  <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n          <div class=\"list-header mb-3\">By Price</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n              <div class=\"each-price cursor-pointer\"\r\n                (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n                {{price | titlecase}}\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4 h-100 overflow-scroll\"\r\n          *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n          <div class=\"list-header mb-3\">By Style</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n              <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n                |\r\n                titlecase}}</div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n          <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n              <div class=\"d-flex gap-2 align-items-center\">\r\n                <div style=\"width: 15px;height: 20px;\">\r\n                  <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n                </div>\r\n                <div class=\"each-price cursor-pointer\">{{collection.name\r\n                  |\r\n                  titlecase}}</div>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n        <ng-container *ngFor=\"let image of selectedCategory?.imageUrls  | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showCollections = false\" -->\r\n  <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n          <div class=\"collection row col-3 align-items-center\"\r\n            (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n            <div class=\"col-imag col-4\">\r\n              <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n            </div>\r\n            <div class=\"col-8 text-overflow\">\r\n              {{collection?.collectionName | titlecase}}\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n        <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6  position-relative\" *ngIf=\"image\"\r\n            (click)=\"applyFilterToList(image, 'collections')\">\r\n            <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n            <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n              [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n      <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n      </div>\r\n      <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{padding:2%;border-radius:4px;border:2px solid lightgrey;width:7vw}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
             type: Component,
@@ -14440,7 +14376,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SpacingHorizontalDirective,
                         MovingTextComponent,
                         ContentFitDirective,
-                    ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite &&  (categoryList?.length == 0 || !showCategoryMobileHeader()) && isMobile\">\r\n    <!-- isHeaderSticky && isEcommerceWebsite && (!categoryList || !showCategoryMobileHeader()) && -->\r\n    <!-- [scrollValue]=\"isComponentMerged ? scrollValue : 0\" -->\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" [simpoOverlay]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile\" simpoHover [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n      <ng-container *ngIf=\"style?.headline?.display\">\r\n        <div>\r\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n        </div>\r\n      </ng-container>\r\n      <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n      <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"style?.background?.color\">search</mat-icon>\r\n      </div> -->\r\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n      </ng-container>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n        aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container> </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n    (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n    [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <div class=\"d-flex gap-3\"\r\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n      <ng-container *ngFor=\"let item of getNavbarButton\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | lowercase | titlecase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div> -->\r\n    <div class=\"w-75 d-flex align-items-center\">\r\n      <div class=\"input-group w-75 ml-2\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\" [style.color]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\" [style.borderColor]=\"backgroundInfo?.accentColor\"\r\n        (click)=\"goToSchemes()\" [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"schemeAvailable\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n          height=\"30\" version=\"1.1\">\r\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n          </g>\r\n        </svg>\r\n        <div [style.color]=\"accentColor\">Schemes</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\" [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\" [style.color]=\"backgroundInfo?.accentColor\"\r\n        *ngIf=\"!getPincode\">Enter\r\n        Pincode\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\" [style.color]=\"backgroundInfo?.accentColor\"\r\n        *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" + getPincode}}</div>\r\n\r\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your PIN Code unlocks\r\n        </div>\r\n        <div class=\"sub-text text-center f-14 pincode-text\">\r\n          Fastest delivery date, Try-at-Home availability,\r\n          Nearest store and In-store design!\r\n        </div>\r\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n          [class.error-border]=\"pinError\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n            class=\"w-75 p-0\">\r\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n        </div>\r\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n          Please enter a valid pincode\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getCartItemsCount}}</div>\r\n      </div>\r\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n      </div>\r\n      <!-- (mouseleave)=\"showLogin = false\" -->\r\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your Account\r\n        </div>\r\n        <div class=\"sub-text text-center f-14\">\r\n          Access account & manage your orders.\r\n        </div>\r\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n            [style.color]=\"style?.background?.color\">Sign Up</div>\r\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\" [style.borderColor]=\"backgroundInfo?.accentColor\"\r\n            [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n  <div class=\"offcanvas-header\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div>\r\n  <div class=\"offcanvas-body\">\r\n    <div class=\"pages\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n  <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n    *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n    <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n      (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n      {{ele?.categoryName | titlecase}}\r\n    </div>\r\n    <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n      *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n      [simpoColor]=\"data?.styles?.headline?.color\">\r\n      Collections\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showList = false\" -->\r\n  <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n          <div class=\"list-header mb-3\">By Price</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n              <div class=\"each-price cursor-pointer\"\r\n                (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n                {{price | titlecase}}\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4 h-100 overflow-scroll\"\r\n          *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n          <div class=\"list-header mb-3\">By Style</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n              <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n                |\r\n                titlecase}}</div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n          <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n              <div class=\"d-flex gap-2 align-items-center\">\r\n                <div style=\"width: 15px;height: 20px;\">\r\n                  <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n                </div>\r\n                <div class=\"each-price cursor-pointer\">{{collection.name\r\n                  |\r\n                  titlecase}}</div>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n        <ng-container *ngFor=\"let image of selectedCategory?.imageUrls  | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showCollections = false\" -->\r\n  <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n          <div class=\"collection row col-3 align-items-center\"\r\n            (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n            <div class=\"col-imag col-4\">\r\n              <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n            </div>\r\n            <div class=\"col-8 text-overflow\">\r\n              {{collection?.collectionName | titlecase}}\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n        <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6  position-relative\" *ngIf=\"image\"\r\n            (click)=\"applyFilterToList(image, 'collections')\">\r\n            <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n            <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n              [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n      <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n      </div>\r\n      <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite &&  (categoryList?.length == 0 || !showCategoryMobileHeader()) && isMobile\">\r\n    <!-- isHeaderSticky && isEcommerceWebsite && (!categoryList || !showCategoryMobileHeader()) && -->\r\n    <!-- [scrollValue]=\"isComponentMerged ? scrollValue : 0\" -->\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" [simpoOverlay]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile\" simpoHover [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n      <ng-container *ngIf=\"style?.headline?.display\">\r\n        <div>\r\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n        </div>\r\n      </ng-container>\r\n      <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n      <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"style?.background?.color\">search</mat-icon>\r\n      </div> -->\r\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n      </ng-container>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n        aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container> </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n    (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n    [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <div class=\"d-flex gap-3\"\r\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n      <ng-container *ngFor=\"let item of getNavbarButton\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | lowercase | titlecase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\">\r\n        Login\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div> -->\r\n    <div class=\"w-75 d-flex align-items-center\">\r\n      <div class=\"input-group w-75 ml-2\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\" [style.color]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\" [style.borderColor]=\"backgroundInfo?.accentColor\"\r\n        (click)=\"goToSchemes()\" [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"schemeAvailable\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n          height=\"30\" version=\"1.1\">\r\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n          </g>\r\n        </svg>\r\n        <div [style.color]=\"accentColor\">Schemes</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\" [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\" [style.color]=\"backgroundInfo?.accentColor\"\r\n        *ngIf=\"!getPincode\">Enter\r\n        Pincode\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\" [style.color]=\"backgroundInfo?.accentColor\"\r\n        *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" + getPincode}}</div>\r\n\r\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your PIN Code unlocks\r\n        </div>\r\n        <div class=\"sub-text text-center f-14 pincode-text\">\r\n          Fastest delivery date, Try-at-Home availability,\r\n          Nearest store and In-store design!\r\n        </div>\r\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n          [class.error-border]=\"pinError\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n            class=\"w-75 p-0\">\r\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n        </div>\r\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n          Please enter a valid pincode\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getCartItemsCount}}</div>\r\n      </div>\r\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n      </div>\r\n      <!-- (mouseleave)=\"showLogin = false\" -->\r\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your Account\r\n        </div>\r\n        <div class=\"sub-text text-center f-14\">\r\n          Access account & manage your orders.\r\n        </div>\r\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n            [style.color]=\"style?.background?.color\">Sign Up</div>\r\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\" [style.borderColor]=\"backgroundInfo?.accentColor\"\r\n            [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n  <div class=\"offcanvas-header\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div>\r\n  <div class=\"offcanvas-body\">\r\n    <div class=\"pages\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n  <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n    *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n    <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n      (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n      {{ele?.categoryName | titlecase}}\r\n    </div>\r\n    <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n      *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n      [simpoColor]=\"data?.styles?.headline?.color\">\r\n      Collections\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showList = false\" -->\r\n  <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n          <div class=\"list-header mb-3\">By Price</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n              <div class=\"each-price cursor-pointer\"\r\n                (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n                {{price | titlecase}}\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4 h-100 overflow-scroll\"\r\n          *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n          <div class=\"list-header mb-3\">By Style</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n              <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n                |\r\n                titlecase}}</div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n          <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n              <div class=\"d-flex gap-2 align-items-center\">\r\n                <div style=\"width: 15px;height: 20px;\">\r\n                  <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n                </div>\r\n                <div class=\"each-price cursor-pointer\">{{collection.name\r\n                  |\r\n                  titlecase}}</div>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n        <ng-container *ngFor=\"let image of selectedCategory?.imageUrls  | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showCollections = false\" -->\r\n  <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n          <div class=\"collection row col-3 align-items-center\"\r\n            (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n            <div class=\"col-imag col-4\">\r\n              <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n            </div>\r\n            <div class=\"col-8 text-overflow\">\r\n              {{collection?.collectionName | titlecase}}\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n        <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6  position-relative\" *ngIf=\"image\"\r\n            (click)=\"applyFilterToList(image, 'collections')\">\r\n            <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n            <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n              [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n      <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n      </div>\r\n      <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{padding:2%;border-radius:4px;border:2px solid lightgrey;width:7vw}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], nextComponent: [{
@@ -14518,7 +14454,7 @@ class NewTestimonialsComponent extends BaseSection {
                 // directives
                 SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type:
                 // components
-                TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }] }); }
+                TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewTestimonialsComponent, decorators: [{
             type: Component,
@@ -14624,7 +14560,7 @@ class NewServicesComponent extends BaseSection {
                 // directives
                 SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type:
                 // components
-                TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }] }); }
+                TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewServicesComponent, decorators: [{
             type: Component,
@@ -14716,7 +14652,7 @@ class NewsLetterComponentComponent extends BaseSection {
         return this.data?.action?.buttons[index]?.styles;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewsLetterComponentComponent, deps: [{ token: RestService }, { token: i2$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewsLetterComponentComponent, isStandalone: true, selector: "simpo-news-letter-component", inputs: { index: "index", edit: "edit", delete: "delete", data: "data" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\r\n        <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row\"\r\n            [simpoCorner]=\"styles?.corners\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\">\r\n            <div class=\"row field-container\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\"\r\n                [simpoAnimation]=\"styles?.animation\">\r\n                <div class=\"col-7 d-flex gap-2 align-items-center image-field-container\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\">\r\n                    <div class=\"image-container\" *ngIf=\"content?.image?.showImage\">\r\n                        <img [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"styles?.corners\"\r\n                            [id]=\"data?.id\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n                            [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n                            [simpoObjectPosition]=\"content?.image?.position\" [sectionId]=\"data?.id\"\r\n                            [class]=\"data?.id+(content?.image?.id || '')\" [class.logo]=\"content?.display?.showIcon\">\r\n                    </div>\r\n                    <div class=\"text-container\">\r\n                        <ng-container *ngFor=\"let item of content?.inputText\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-5 d-flex flex-column align-items-center justify-content-center h-100 input-fields-container\">\r\n                    <div class=\"input-field w-75 mb-3\">\r\n                        <input type=\"email\" placeholder=\"Enter your email\" class=\"form-control py-2\" [(ngModel)]=\"email\" [class.error-border]=\"error\" [simpoCorner]=\"styles?.corners\">\r\n                    </div>\r\n                    <button class=\"submit w-75\" simpoButtonDirective [id]=\"data?.id+getButtonId(0)\"\r\n                        [buttonStyle]=\"getButtonStyle(0)\" [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\"\r\n                        [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId(0)\"\r\n                        [color]=\"data?.styles?.background?.accentColor\" (click)=\"postNewsLetter()\">Submit</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative}.submit{padding:5px 0}.logo{width:120px!important;height:120px!important;object-fit:unset!important}.error-border{border:2px solid #dc3545!important}@media (max-width:475px){.field-container{flex-direction:column}.total-container .total-container{justify-content:center}.image-field-container{width:100%}.input-fields-container{height:auto!important;width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "ngmodule", type: MatSnackBarModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewsLetterComponentComponent, isStandalone: true, selector: "simpo-news-letter-component", inputs: { index: "index", edit: "edit", delete: "delete", data: "data" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\r\n        <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row\"\r\n            [simpoCorner]=\"styles?.corners\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\">\r\n            <div class=\"row field-container\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\"\r\n                [simpoAnimation]=\"styles?.animation\">\r\n                <div class=\"col-7 d-flex gap-2 align-items-center image-field-container\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\">\r\n                    <div class=\"image-container\" *ngIf=\"content?.image?.showImage\">\r\n                        <img [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"styles?.corners\"\r\n                            [id]=\"data?.id\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n                            [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n                            [simpoObjectPosition]=\"content?.image?.position\" [sectionId]=\"data?.id\"\r\n                            [class]=\"data?.id+(content?.image?.id || '')\" [class.logo]=\"content?.display?.showIcon\">\r\n                    </div>\r\n                    <div class=\"text-container\">\r\n                        <ng-container *ngFor=\"let item of content?.inputText\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-5 d-flex flex-column align-items-center justify-content-center h-100 input-fields-container\">\r\n                    <div class=\"input-field w-75 mb-3\">\r\n                        <input type=\"email\" placeholder=\"Enter your email\" class=\"form-control py-2\" [(ngModel)]=\"email\" [class.error-border]=\"error\" [simpoCorner]=\"styles?.corners\">\r\n                    </div>\r\n                    <button class=\"submit w-75\" simpoButtonDirective [id]=\"data?.id+getButtonId(0)\"\r\n                        [buttonStyle]=\"getButtonStyle(0)\" [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\"\r\n                        [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId(0)\"\r\n                        [color]=\"data?.styles?.background?.accentColor\" (click)=\"postNewsLetter()\">Submit</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative}.submit{padding:5px 0}.logo{width:120px!important;height:120px!important;object-fit:unset!important}.error-border{border:2px solid #dc3545!important}@media (max-width:475px){.field-container{flex-direction:column}.total-container .total-container{justify-content:center}.image-field-container{width:100%}.input-fields-container{height:auto!important;width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "ngmodule", type: MatSnackBarModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewsLetterComponentComponent, decorators: [{
             type: Component,
@@ -15290,7 +15226,7 @@ class FeaturedProductsComponent extends BaseSection {
                 //directive
                 SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SimpoWrapComntainer, selector: "[simpoWrapContainer]", inputs: ["simpoWrapContainer"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type:
                 // MatBottomSheetModule,
-                ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: ImageLoadingComponent, selector: "image-loading", inputs: ["hash", "imageUrl", "index", "product", "theme"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
+                ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: ImageLoadingComponent, selector: "image-loading", inputs: ["hash", "imageUrl", "index", "product", "theme"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturedProductsComponent, decorators: [{
             type: Component,
@@ -17858,11 +17794,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }, { type: i1$1.MatDialogRef }, { type: StorageServiceService }, { type: i4$1.MessageService }] });
 class SchemeDetailsComponent {
-    constructor() {
+    constructor(storageService, restService, matDialog, _eventService) {
+        this.storageService = storageService;
+        this.restService = restService;
+        this.matDialog = matDialog;
+        this._eventService = _eventService;
         this.gotoSchemeOverview = new EventEmitter();
         this.paymentData = [];
     }
     ngOnInit() {
+        console.log(this.schemeDetails);
         this.getPaymentScheme();
         this.getScreenSize();
     }
@@ -17870,7 +17811,7 @@ class SchemeDetailsComponent {
         this.screenWidth = window.innerWidth;
     }
     getPaymentScheme() {
-        this.schemeDetails.paymentData.forEach((payment) => {
+        this.schemeDetails.schemePayments.forEach((payment) => {
             if (payment.paymentStatus != 'PAID') {
                 this.paymentData.push(payment);
             }
@@ -17879,8 +17820,8 @@ class SchemeDetailsComponent {
     getDueDate(paymentDate) {
         if (!paymentDate)
             return null;
-        const dueDate = new Date(paymentDate);
-        dueDate.setDate(dueDate.getDate() + 2); // Add 2 days to get due date
+        console.log("Payment Date", paymentDate);
+        const dueDate = new Date(paymentDate); // Add 2 days to get due date
         const today = new Date();
         // Strip time for accurate day comparison
         dueDate.setHours(0, 0, 0, 0);
@@ -17890,20 +17831,89 @@ class SchemeDetailsComponent {
         const diffDays = Math.round(diffTime / (1000 * 60 * 60 * 24));
         return diffDays;
     }
+    closeDialog() {
+        this.matDialog.closeAll();
+    }
+    payDuePayment(passBook) {
+        const userDetails = this.storageService.getUser();
+        console.log(passBook);
+        let payload = {
+            userBasicDetails: {
+                customer_id: userDetails?.userId,
+                customer_name: userDetails?.contact?.name,
+                customer_phone: userDetails?.contact?.mobile,
+                customer_email: userDetails?.contact?.email,
+            },
+            schemeId: this.schemeDetails?.schemeId,
+            schemeName: this.schemeDetails?.schemeName,
+            earlyRedemptionCharge: this.schemeDetails?.enrollmentFees,
+            installmentAmount: this.schemeDetails?.installmentAmount,
+            storeRefId: this.schemeDetails?.schemeRepresentativeId,
+            storeId: this.schemeDetails?.storeId,
+            storeName: this.schemeDetails?.storeName,
+            maturityCount: this.schemeDetails?.maturityCount,
+            jewellerBenefit: this.schemeDetails?.jewellerBenefit,
+            dueMonths: this.schemeDetails?.maturityCount,
+            businessId: this.schemeDetails?.businessId,
+            businessName: this.schemeDetails?.businessName,
+            enableEarlyRedemption: this.schemeDetails?.enableEarlyRedemption,
+            redemptionSlabList: this.schemeDetails?.redemptionSlabList,
+            schemeType: this.schemeDetails?.schemeType,
+            metalType: this.schemeDetails?.metalType,
+            karatType: this.schemeDetails?.karatType,
+            passBookId: this.schemeDetails?.id,
+            passBookTransactionId: passBook?.transactionId,
+            customerAccount: ""
+        };
+        this.restService.enrollScheme(payload, true).subscribe({
+            next: (response) => {
+                if (response.data.cashfreeResponse != null) {
+                    this.continuePayment(payload);
+                }
+                else {
+                    this.storeCharges = response.data.cart;
+                    let dialog = this.matDialog.open(this.showChargesTemplate, {
+                        panelClass: 'show-charges-class'
+                    });
+                    dialog.afterClosed().subscribe(() => {
+                        this.continuePayment(payload);
+                    });
+                }
+            },
+            error: (err) => {
+                console.log(err);
+            }
+        });
+    }
+    continuePayment(payload) {
+        this.restService.enrollScheme(payload, false).subscribe({
+            next: (response) => {
+                localStorage.setItem('passbookOrderId', response.data.orderId);
+                this.openCashfreeSdk(response.data.sessionId);
+            },
+            error: (error) => { }
+        });
+    }
+    openCashfreeSdk(sessionId) {
+        this._eventService.cashFreeEvent.emit({ data: { orderSignature: sessionId } });
+    }
     goBack() {
         this.gotoSchemeOverview.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailsComponent, isStandalone: true, selector: "simpo-scheme-details", inputs: { schemeDetails: "schemeDetails" }, outputs: { gotoSchemeOverview: "gotoSchemeOverview" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, ngImport: i0, template: "<div class=\"w-100 h-100\">\r\n    <!-- Header -->\r\n    <div class=\"header\" *ngIf=\"screenWidth>475\">\r\n        <div class=\"header_left d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\r\n            </div>\r\n            <h1>Scheme Details</h1>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Amount Card -->\r\n    <div class=\"d-flex justify-content-between amount-card-section\">\r\n        <div [ngClass]=\"screenWidth > 475 ? 'w-75' : 'w-100'\">\r\n            <div class=\"amount-card\">\r\n                <div class=\"amount-info\">\r\n                    <div class=\"coin-icon\"><img\r\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n                    </div>\r\n                    <div class=\"amount-details\">\r\n                        <h2>\u20B9{{schemeDetails?.schemeAmount ? schemeDetails?.schemeAmount : 'N/A'}}</h2>\r\n                        <p>Total Available Scheme Amount</p>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-start justify-content-around scheme-section\">\r\n                <div class=\"details_tab\">\r\n                    <div class=\"section-header\">\r\n                        <h3>Scheme Details</h3>\r\n                        <span class=\"redeem-requested\">{{schemeDetails?.enrollmentStatus ?\r\n                            schemeDetails?.enrollmentStatus : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"scheme-info\">\r\n                        <div class=\"scheme-name\">\r\n                            <span class=\"label\">{{schemeDetails?.pwcSchemeCode ? schemeDetails?.pwcSchemeCode :\r\n                                'N/A'}}</span>\r\n                        </div>\r\n                        <div class=\"scheme-id\">\u20B9{{schemeDetails?.schemeAmount ? schemeDetails?.schemeAmount : 'N/A'}}\r\n                            Monthly</div>\r\n                    </div>\r\n\r\n                    <div class=\"dates-grid\">\r\n                        <div class=\"date-item\">\r\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n                            <div class=\"date-info\">\r\n                                <span class=\"date-label\">Scheme started on</span>\r\n                                <span class=\"date-value\">{{schemeDetails.createdTimeStamp ?\r\n                                    (schemeDetails.createdTimeStamp | date:'mediumDate') : 'N/A' }}</span>\r\n                            </div>\r\n                        </div>\r\n                        <!-- <div class=\"date-item\">\r\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n                            <div class=\"date-info\">\r\n                                <span class=\"date-label\">Scheme ends on</span>\r\n                                <span class=\"date-value\">5 Jan 2025</span>\r\n                            </div>\r\n                        </div> -->\r\n                        <div class=\"completion-info\">\r\n                            <span class=\"completion-label\">Completed EMIs</span>\r\n                            <span class=\"completion-value\">{{schemeDetails.dueMonths ? (10-schemeDetails.dueMonths) :\r\n                                0}} out\r\n                                of 10</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"enrollment-card\">\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Group Name</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails?.enrollmentGroup ?\r\n                            schemeDetails?.enrollmentGroup.genId :'N/A' }}</span>\r\n                    </div>\r\n\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Group Code</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\r\n                            schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\r\n                    </div>\r\n\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Maturity Date</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\r\n                            : 'dd-MM-yyyy') : 'N/A'}}</span>\r\n                    </div>\r\n                    <!-- <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Enrollment Id</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"quick-actions\">\r\n            <h3>Quick Actions</h3>\r\n            <div class=\"actions d-flex flex-column justify-content-evenly\">\r\n                <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\r\n                </div>\r\n                <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\r\n                <div class=\"action-item d-flex align-items-center\">Download SOA</div>\r\n            </div>\r\n\r\n            <button class=\"enroll-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n                New Scheme</button>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Scheme Details Section -->\r\n    <div class=\"scheme-details\">\r\n        <div class=\"section d-flex-flex-column gap-2\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Upcoming Payments</h2>\r\n            </div>\r\n            <div class=\"payment-list d-flex flex-column gap-2\">\r\n                <ng-container *ngIf=\"paymentData.length;else noPayments\">\r\n                    <ng-container *ngFor=\"let payment of schemeDetails.paymentData\">\r\n                        <div class=\"payment-item\" *ngIf=\"payment.paymentStatus != 'PAID'\">\r\n                            <div class=\"payment-info\">\r\n                                <div class=\"payment-icon upcoming\"><img\r\n                                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n                                </div>\r\n                                <div class=\"payment-details\">\r\n                                    <h4>{{schemeDetails?.pwcSchemeCode ? schemeDetails?.pwcSchemeCode : 'N/A'}}</h4>\r\n                                    <p>Date {{payment?.paymentDate ? (payment?.paymentDate | date : 'shortDate') :\r\n                                        'N/A'}} |\r\n                                        Due by: {{getDueDate(payment?.paymentDate)}} days</p>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"payment-amount\">\r\n                                <div class=\"amount-value\" *ngIf=\"payment?.amountToBePaid\">\u20B9{{payment?.amountToBePaid ?\r\n                                    payment.amountToBePaid :\r\n                                    'N/A'}}</div>\r\n                                <div class=\"payment-status upcoming-status\">Pay Now</div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template #noPayments>\r\n                    <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\r\n                        <span>No Upcoming Payments</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n        <div class=\"tabs\">\r\n            <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\r\n        </div>\r\n        <div class=\"transactions\">\r\n            <div class=\"transaction-item\" *ngFor=\"let transaction of schemeDetails.paymentData\">\r\n                <div class=\"transaction-status paid\"><img\r\n                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\r\n                </div>\r\n                <div class=\"transaction-details\">\r\n                    <h4>{{transaction.paymentMonth ? transaction.paymentMonth : 'N/A' }}st Instalment\r\n                        {{transaction.paymentStatus ? (transaction.paymentStatus != \"PAID\" ? 'Due' : 'Paid') : 'N/A'}}\r\n                    </h4>\r\n                    <p>{{transaction.emiChargeDate ? (transaction.emiChargeDate | date : 'shortDate') : 'N/A'}}</p>\r\n                </div>\r\n                <div class=\"transaction-amount\" *ngIf=\"transaction.paymentStatus === 'PAID';else duePayment\">\r\n                    {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\r\n                <ng-template #duePayment>\r\n                    <p class=\"underline\">Pay Now</p>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding:20px 16px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.upcoming-status{background:#d3d3d3;font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}.pay-now-btn{background-color:#9c27b0;color:#fff;border:none;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer}.pay-now-btn:hover{background-color:#7b1fa2}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.completion-info{grid-column:span 1;align-items:flex-start}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.highlight{color:#2563eb}.enrollment-value.zero{color:#ef4444}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailsComponent, deps: [{ token: i1$3.StorageServiceService }, { token: i2$4.RestService }, { token: i1$1.MatDialog }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailsComponent, isStandalone: true, selector: "simpo-scheme-details", inputs: { schemeDetails: "schemeDetails" }, outputs: { gotoSchemeOverview: "gotoSchemeOverview" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"w-100 h-100\">\r\n    <!-- Header -->\r\n    <div class=\"header\" *ngIf=\"screenWidth>475\">\r\n        <div class=\"header_left d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\r\n            </div>\r\n            <h1>Scheme Details</h1>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Amount Card -->\r\n    <div class=\"d-flex justify-content-between amount-card-section\">\r\n        <div class=\"w-100\">\r\n            <div class=\"amount-card\">\r\n                <div class=\"amount-info\">\r\n                    <div class=\"coin-icon\"><img\r\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n                    </div>\r\n                    <div class=\"amount-details\">\r\n                        <h2>\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount : 'N/A'}}</h2>\r\n                        <p>Total Available Scheme Amount</p>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-start justify-content-around scheme-section\">\r\n                <div class=\"details_tab\">\r\n                    <div class=\"section-header\">\r\n                        <h3>Scheme Details</h3>\r\n                        <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\r\n                            schemeDetails?.passBookStatus : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"scheme-info\">\r\n                        <div class=\"scheme-name\">\r\n                            <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\r\n                                'N/A'}}</span>\r\n                        </div>\r\n                        <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\r\n                            'N/A'}}\r\n                            Monthly</div>\r\n                    </div>\r\n\r\n                    <div class=\"dates-grid\">\r\n                        <div class=\"date-item\">\r\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n                            <div class=\"date-info\">\r\n                                <span class=\"date-label\">Scheme started on</span>\r\n                                <span class=\"date-value\">{{schemeDetails.createdTimestamp ?\r\n                                    (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n                            </div>\r\n                        </div>\r\n                        <!-- <div class=\"date-item\">\r\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n                            <div class=\"date-info\">\r\n                                <span class=\"date-label\">Scheme ends on</span>\r\n                                <span class=\"date-value\">5 Jan 2025</span>\r\n                            </div>\r\n                        </div> -->\r\n                        <div class=\"completion-info\">\r\n                            <span class=\"completion-label\">Completed EMIs</span>\r\n                            <span class=\"completion-value\">{{schemeDetails.dueMonths ? (10-schemeDetails.dueMonths) :\r\n                                0}} out\r\n                                of 10</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"enrollment-card\">\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Group Name</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\r\n                            schemeDetails?.schemeName :'N/A' }}</span>\r\n                    </div>\r\n\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Group Code</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\r\n                            schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\r\n                    </div>\r\n\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Maturity Date</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\r\n                            : 'dd-MM-yyyy') : 'N/A'}}</span>\r\n                    </div>\r\n                    <!-- <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Enrollment Id</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"quick-actions\">\r\n            <h3>Quick Actions</h3>\r\n            <div class=\"actions d-flex flex-column justify-content-evenly\">\r\n                <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\r\n                </div>\r\n                <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\r\n                <div class=\"action-item d-flex align-items-center\">Download SOA</div>\r\n            </div>\r\n\r\n            <button class=\"enroll-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n                New Scheme</button>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Scheme Details Section -->\r\n    <div class=\"scheme-details\">\r\n        <div class=\"section d-flex-flex-column gap-2\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Payment Dues</h2>\r\n            </div>\r\n            <div class=\"payment-list d-flex flex-column gap-2\">\r\n                <ng-container *ngIf=\"paymentData.length;else noPayments\">\r\n                    <ng-container *ngFor=\"let payment of paymentData;let i = index\">\r\n                        <div class=\"payment-item\">\r\n                            <div class=\"payment-info\">\r\n                                <div class=\"payment-icon upcoming\"><img\r\n                                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n                                </div>\r\n                                <div class=\"payment-details\">\r\n                                    <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\r\n                                    <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'shortDate') :\r\n                                        'N/A'}}\r\n                                        <!-- |\r\n                                        Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"payment-amount\">\r\n                                <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\r\n                                    payment.dueAmount :\r\n                                    'N/A'}}</div>\r\n                                <div class=\"payment-status upcoming-status\" *ngIf=\"i === 0\"\r\n                                    (click)=\"payDuePayment(payment)\">Pay Now</div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template #showCharges>\r\n                    <div class=\"payment-dialog\">\r\n                        <div class=\"dialog-header\">\r\n                            <h2>Payment Details</h2>\r\n                            <button class=\"close-btn\" mat-icon-button>\r\n                                <mat-icon>close</mat-icon>\r\n                            </button>\r\n                        </div>\r\n\r\n                        <div class=\"payment-content\">\r\n                            <div class=\"payment-row\">\r\n                                <span class=\"label\">Installment Amount:</span>\r\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n                            </div>\r\n\r\n                            <div class=\"payment-row\">\r\n                                <span class=\"label\">Convenience Fee:</span>\r\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n                            </div>\r\n\r\n                            <div class=\"payment-row\">\r\n                                <span class=\"label\">Payment Service Charges:</span>\r\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n                            </div>\r\n\r\n                            <div class=\"payment-row total-row\">\r\n                                <span class=\"label total-label\">Total Amount:</span>\r\n                                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"dialog-actions\">\r\n                            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n                <ng-template #noPayments>\r\n                    <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\r\n                        <span>No Upcoming Payments</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n        <div class=\"tabs\">\r\n            <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\r\n        </div>\r\n        <div class=\"transactions\">\r\n            <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\r\n                <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\r\n                    <div class=\"transaction-status paid\"><img\r\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\r\n                    </div>\r\n                    <div class=\"transaction-details\">\r\n                        <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\r\n                        </h4>\r\n                        <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'shortDate') : 'N/A'}}\r\n                        </p>\r\n                    </div>\r\n                    <div class=\"transaction-amount\">\r\n                        {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding:20px 16px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.upcoming-status{background:#d3d3d3;font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}.pay-now-btn{background-color:#9c27b0;color:#fff;border:none;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer}.pay-now-btn:hover{background-color:#7b1fa2}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.completion-info{grid-column:span 1;align-items:flex-start}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.highlight{color:#2563eb}.enrollment-value.zero{color:#ef4444}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-scheme-details', standalone: true, imports: [MatIcon, CommonModule], template: "<div class=\"w-100 h-100\">\r\n    <!-- Header -->\r\n    <div class=\"header\" *ngIf=\"screenWidth>475\">\r\n        <div class=\"header_left d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\r\n            </div>\r\n            <h1>Scheme Details</h1>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Amount Card -->\r\n    <div class=\"d-flex justify-content-between amount-card-section\">\r\n        <div [ngClass]=\"screenWidth > 475 ? 'w-75' : 'w-100'\">\r\n            <div class=\"amount-card\">\r\n                <div class=\"amount-info\">\r\n                    <div class=\"coin-icon\"><img\r\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n                    </div>\r\n                    <div class=\"amount-details\">\r\n                        <h2>\u20B9{{schemeDetails?.schemeAmount ? schemeDetails?.schemeAmount : 'N/A'}}</h2>\r\n                        <p>Total Available Scheme Amount</p>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-start justify-content-around scheme-section\">\r\n                <div class=\"details_tab\">\r\n                    <div class=\"section-header\">\r\n                        <h3>Scheme Details</h3>\r\n                        <span class=\"redeem-requested\">{{schemeDetails?.enrollmentStatus ?\r\n                            schemeDetails?.enrollmentStatus : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"scheme-info\">\r\n                        <div class=\"scheme-name\">\r\n                            <span class=\"label\">{{schemeDetails?.pwcSchemeCode ? schemeDetails?.pwcSchemeCode :\r\n                                'N/A'}}</span>\r\n                        </div>\r\n                        <div class=\"scheme-id\">\u20B9{{schemeDetails?.schemeAmount ? schemeDetails?.schemeAmount : 'N/A'}}\r\n                            Monthly</div>\r\n                    </div>\r\n\r\n                    <div class=\"dates-grid\">\r\n                        <div class=\"date-item\">\r\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n                            <div class=\"date-info\">\r\n                                <span class=\"date-label\">Scheme started on</span>\r\n                                <span class=\"date-value\">{{schemeDetails.createdTimeStamp ?\r\n                                    (schemeDetails.createdTimeStamp | date:'mediumDate') : 'N/A' }}</span>\r\n                            </div>\r\n                        </div>\r\n                        <!-- <div class=\"date-item\">\r\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n                            <div class=\"date-info\">\r\n                                <span class=\"date-label\">Scheme ends on</span>\r\n                                <span class=\"date-value\">5 Jan 2025</span>\r\n                            </div>\r\n                        </div> -->\r\n                        <div class=\"completion-info\">\r\n                            <span class=\"completion-label\">Completed EMIs</span>\r\n                            <span class=\"completion-value\">{{schemeDetails.dueMonths ? (10-schemeDetails.dueMonths) :\r\n                                0}} out\r\n                                of 10</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"enrollment-card\">\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Group Name</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails?.enrollmentGroup ?\r\n                            schemeDetails?.enrollmentGroup.genId :'N/A' }}</span>\r\n                    </div>\r\n\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Group Code</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\r\n                            schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\r\n                    </div>\r\n\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Maturity Date</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\r\n                            : 'dd-MM-yyyy') : 'N/A'}}</span>\r\n                    </div>\r\n                    <!-- <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Enrollment Id</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"quick-actions\">\r\n            <h3>Quick Actions</h3>\r\n            <div class=\"actions d-flex flex-column justify-content-evenly\">\r\n                <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\r\n                </div>\r\n                <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\r\n                <div class=\"action-item d-flex align-items-center\">Download SOA</div>\r\n            </div>\r\n\r\n            <button class=\"enroll-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n                New Scheme</button>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Scheme Details Section -->\r\n    <div class=\"scheme-details\">\r\n        <div class=\"section d-flex-flex-column gap-2\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Upcoming Payments</h2>\r\n            </div>\r\n            <div class=\"payment-list d-flex flex-column gap-2\">\r\n                <ng-container *ngIf=\"paymentData.length;else noPayments\">\r\n                    <ng-container *ngFor=\"let payment of schemeDetails.paymentData\">\r\n                        <div class=\"payment-item\" *ngIf=\"payment.paymentStatus != 'PAID'\">\r\n                            <div class=\"payment-info\">\r\n                                <div class=\"payment-icon upcoming\"><img\r\n                                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n                                </div>\r\n                                <div class=\"payment-details\">\r\n                                    <h4>{{schemeDetails?.pwcSchemeCode ? schemeDetails?.pwcSchemeCode : 'N/A'}}</h4>\r\n                                    <p>Date {{payment?.paymentDate ? (payment?.paymentDate | date : 'shortDate') :\r\n                                        'N/A'}} |\r\n                                        Due by: {{getDueDate(payment?.paymentDate)}} days</p>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"payment-amount\">\r\n                                <div class=\"amount-value\" *ngIf=\"payment?.amountToBePaid\">\u20B9{{payment?.amountToBePaid ?\r\n                                    payment.amountToBePaid :\r\n                                    'N/A'}}</div>\r\n                                <div class=\"payment-status upcoming-status\">Pay Now</div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template #noPayments>\r\n                    <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\r\n                        <span>No Upcoming Payments</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n        <div class=\"tabs\">\r\n            <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\r\n        </div>\r\n        <div class=\"transactions\">\r\n            <div class=\"transaction-item\" *ngFor=\"let transaction of schemeDetails.paymentData\">\r\n                <div class=\"transaction-status paid\"><img\r\n                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\r\n                </div>\r\n                <div class=\"transaction-details\">\r\n                    <h4>{{transaction.paymentMonth ? transaction.paymentMonth : 'N/A' }}st Instalment\r\n                        {{transaction.paymentStatus ? (transaction.paymentStatus != \"PAID\" ? 'Due' : 'Paid') : 'N/A'}}\r\n                    </h4>\r\n                    <p>{{transaction.emiChargeDate ? (transaction.emiChargeDate | date : 'shortDate') : 'N/A'}}</p>\r\n                </div>\r\n                <div class=\"transaction-amount\" *ngIf=\"transaction.paymentStatus === 'PAID';else duePayment\">\r\n                    {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\r\n                <ng-template #duePayment>\r\n                    <p class=\"underline\">Pay Now</p>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding:20px 16px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.upcoming-status{background:#d3d3d3;font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}.pay-now-btn{background-color:#9c27b0;color:#fff;border:none;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer}.pay-now-btn:hover{background-color:#7b1fa2}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.completion-info{grid-column:span 1;align-items:flex-start}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.highlight{color:#2563eb}.enrollment-value.zero{color:#ef4444}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { schemeDetails: [{
+            args: [{ selector: 'simpo-scheme-details', standalone: true, imports: [MatIcon, CommonModule], template: "<div class=\"w-100 h-100\">\r\n    <!-- Header -->\r\n    <div class=\"header\" *ngIf=\"screenWidth>475\">\r\n        <div class=\"header_left d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\r\n            </div>\r\n            <h1>Scheme Details</h1>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Amount Card -->\r\n    <div class=\"d-flex justify-content-between amount-card-section\">\r\n        <div class=\"w-100\">\r\n            <div class=\"amount-card\">\r\n                <div class=\"amount-info\">\r\n                    <div class=\"coin-icon\"><img\r\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n                    </div>\r\n                    <div class=\"amount-details\">\r\n                        <h2>\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount : 'N/A'}}</h2>\r\n                        <p>Total Available Scheme Amount</p>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-start justify-content-around scheme-section\">\r\n                <div class=\"details_tab\">\r\n                    <div class=\"section-header\">\r\n                        <h3>Scheme Details</h3>\r\n                        <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\r\n                            schemeDetails?.passBookStatus : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"scheme-info\">\r\n                        <div class=\"scheme-name\">\r\n                            <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\r\n                                'N/A'}}</span>\r\n                        </div>\r\n                        <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\r\n                            'N/A'}}\r\n                            Monthly</div>\r\n                    </div>\r\n\r\n                    <div class=\"dates-grid\">\r\n                        <div class=\"date-item\">\r\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n                            <div class=\"date-info\">\r\n                                <span class=\"date-label\">Scheme started on</span>\r\n                                <span class=\"date-value\">{{schemeDetails.createdTimestamp ?\r\n                                    (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n                            </div>\r\n                        </div>\r\n                        <!-- <div class=\"date-item\">\r\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n                            <div class=\"date-info\">\r\n                                <span class=\"date-label\">Scheme ends on</span>\r\n                                <span class=\"date-value\">5 Jan 2025</span>\r\n                            </div>\r\n                        </div> -->\r\n                        <div class=\"completion-info\">\r\n                            <span class=\"completion-label\">Completed EMIs</span>\r\n                            <span class=\"completion-value\">{{schemeDetails.dueMonths ? (10-schemeDetails.dueMonths) :\r\n                                0}} out\r\n                                of 10</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"enrollment-card\">\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Group Name</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\r\n                            schemeDetails?.schemeName :'N/A' }}</span>\r\n                    </div>\r\n\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Group Code</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\r\n                            schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\r\n                    </div>\r\n\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Maturity Date</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\r\n                            : 'dd-MM-yyyy') : 'N/A'}}</span>\r\n                    </div>\r\n                    <!-- <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Enrollment Id</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"quick-actions\">\r\n            <h3>Quick Actions</h3>\r\n            <div class=\"actions d-flex flex-column justify-content-evenly\">\r\n                <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\r\n                </div>\r\n                <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\r\n                <div class=\"action-item d-flex align-items-center\">Download SOA</div>\r\n            </div>\r\n\r\n            <button class=\"enroll-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n                New Scheme</button>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Scheme Details Section -->\r\n    <div class=\"scheme-details\">\r\n        <div class=\"section d-flex-flex-column gap-2\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Payment Dues</h2>\r\n            </div>\r\n            <div class=\"payment-list d-flex flex-column gap-2\">\r\n                <ng-container *ngIf=\"paymentData.length;else noPayments\">\r\n                    <ng-container *ngFor=\"let payment of paymentData;let i = index\">\r\n                        <div class=\"payment-item\">\r\n                            <div class=\"payment-info\">\r\n                                <div class=\"payment-icon upcoming\"><img\r\n                                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n                                </div>\r\n                                <div class=\"payment-details\">\r\n                                    <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\r\n                                    <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'shortDate') :\r\n                                        'N/A'}}\r\n                                        <!-- |\r\n                                        Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"payment-amount\">\r\n                                <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\r\n                                    payment.dueAmount :\r\n                                    'N/A'}}</div>\r\n                                <div class=\"payment-status upcoming-status\" *ngIf=\"i === 0\"\r\n                                    (click)=\"payDuePayment(payment)\">Pay Now</div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template #showCharges>\r\n                    <div class=\"payment-dialog\">\r\n                        <div class=\"dialog-header\">\r\n                            <h2>Payment Details</h2>\r\n                            <button class=\"close-btn\" mat-icon-button>\r\n                                <mat-icon>close</mat-icon>\r\n                            </button>\r\n                        </div>\r\n\r\n                        <div class=\"payment-content\">\r\n                            <div class=\"payment-row\">\r\n                                <span class=\"label\">Installment Amount:</span>\r\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n                            </div>\r\n\r\n                            <div class=\"payment-row\">\r\n                                <span class=\"label\">Convenience Fee:</span>\r\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n                            </div>\r\n\r\n                            <div class=\"payment-row\">\r\n                                <span class=\"label\">Payment Service Charges:</span>\r\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n                            </div>\r\n\r\n                            <div class=\"payment-row total-row\">\r\n                                <span class=\"label total-label\">Total Amount:</span>\r\n                                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"dialog-actions\">\r\n                            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n                <ng-template #noPayments>\r\n                    <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\r\n                        <span>No Upcoming Payments</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n        <div class=\"tabs\">\r\n            <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\r\n        </div>\r\n        <div class=\"transactions\">\r\n            <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\r\n                <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\r\n                    <div class=\"transaction-status paid\"><img\r\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\r\n                    </div>\r\n                    <div class=\"transaction-details\">\r\n                        <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\r\n                        </h4>\r\n                        <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'shortDate') : 'N/A'}}\r\n                        </p>\r\n                    </div>\r\n                    <div class=\"transaction-amount\">\r\n                        {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding:20px 16px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.upcoming-status{background:#d3d3d3;font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}.pay-now-btn{background-color:#9c27b0;color:#fff;border:none;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer}.pay-now-btn:hover{background-color:#7b1fa2}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.completion-info{grid-column:span 1;align-items:flex-start}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.highlight{color:#2563eb}.enrollment-value.zero{color:#ef4444}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.StorageServiceService }, { type: i2$4.RestService }, { type: i1$1.MatDialog }, { type: EventsService }], propDecorators: { schemeDetails: [{
                 type: Input,
                 args: ["schemeDetails"]
             }], gotoSchemeOverview: [{
                 type: Output
+            }], showChargesTemplate: [{
+                type: ViewChild,
+                args: ['showCharges', { static: true }]
             }], getScreenSize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
@@ -18010,7 +18020,7 @@ class UserProfileComponent extends BaseSection {
             { value: "Orders", icon: "accessibility", status: true, label: "Heading", url: 'order', image: "ORDER" },
             { value: "Address", icon: "location_on", status: false, label: "Heading", url: 'address', image: "LOCATION" },
             { value: "Wishlist", icon: "location_on", status: false, label: "Heading", url: 'address', image: "WISHLIST" },
-            // { value: "Scheme Passbook", icon: "location_on", status: false, label: "Heading", url: 'address', image: "PASSBOOK" },
+            { value: "Scheme Passbook", icon: "location_on", status: false, label: "Heading", url: 'address', image: "PASSBOOK" }, // remove later
             // { value: "Try At Home", icon: "location_on", status: false, label: "Heading", url: 'address', image: "TRY_AT_HOME" },
             // { value: "Scheme Details" , icon : "https://d2z9497xp8xb12.cloudfront.net/prod-images/172691c1752568081135bonus.png" ,  status : false , label: "Heading", url: 'https://d2z9497xp8xb12.cloudfront.net/prod-images/172691c1752568081135bonus.png', image: "https://d2z9497xp8xb12.cloudfront.net/prod-images/172691c1752568081135bonus.png" }
             // { value: "Account Details", icon: "supervised_user_circle", status: false, label: "Heading", url: 'account' },
@@ -18019,8 +18029,10 @@ class UserProfileComponent extends BaseSection {
         this.tabs = [];
         this.orderList = [];
         this.wishlistData = [];
+        this.totalSavings = 0;
         this.userEnrollments = [];
         this.paymentData = [];
+        this.totalSchemes = [];
         this.screenWidth = 0;
         this.route.queryParams.subscribe(params => {
             const tab = params['tab'];
@@ -18039,6 +18051,7 @@ class UserProfileComponent extends BaseSection {
             this.isLoading = response;
         });
         this.userDetails = this.storageService.getUser();
+        console.log("userDetails", this.userDetails);
         if (!this.userDetails && (localStorage.getItem("REQUEST_FROM") == "USER")) {
             this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Please login to access profile' });
             this.router.navigate(['/']);
@@ -18048,6 +18061,7 @@ class UserProfileComponent extends BaseSection {
         this.getUserOrderDetails();
         this.getUserWislistDetails();
         this.getEcommerceConfigs();
+        this.getAllSchemes(); // remove later
     }
     getEcommerceConfigs() {
         this.restService.getEcommerceConfigs().subscribe((res) => {
@@ -18072,19 +18086,29 @@ class UserProfileComponent extends BaseSection {
     }
     getAllSchemes() {
         let userDetails = this.storageService.getUser();
-        let userCode = userDetails?.pwcUserCode;
-        this.restService.getAllSchemes(userCode).subscribe((response) => {
-            this.passbookSummary = response?.data?.passBookSummary;
-            this.userEnrollments = response.data?.userEnrollments;
-            this.userEnrollments.forEach((enrollment) => {
-                this.paymentData.push(enrollment.paymentData);
+        let userId = userDetails?.userId;
+        let storeId = "da9f922e-8df4-455d-8cb8-eab686c8942d";
+        this.restService.getAllSchemes(userId, storeId).subscribe((response) => {
+            // console.log("response", response);
+            this.totalSchemes = response?.data;
+            response?.data.forEach((scheme) => {
+                this.totalSavings += scheme?.totalPaidAmount;
             });
-            this.paymentData = this.paymentData.flatMap(payment => payment);
+            this.paymentData = this.totalSchemes.flatMap((scheme) => (scheme?.schemePayments || []).map((payment) => ({
+                ...payment,
+                schemeName: scheme?.schemeName || scheme?.name || ''
+            })));
+            // this.userEnrollments = response.data?.userEnrollments;
+            // this.userEnrollments.forEach((enrollment: any) => {
+            //   this.paymentData.push(enrollment.paymentData);
+            // });
             const currentDate = new Date();
+            this.paymentData = this.paymentData.filter((payment) => payment.paymentStatus !== 'PAID');
             this.paymentData.forEach((payment) => {
                 payment.overdueStatus = false;
                 if (payment.paymentStatus === 'DUE') {
-                    const paymentDate = new Date(payment.paymentDate);
+                    payment.daysOverdue = 0;
+                    const paymentDate = new Date(payment.dueDate);
                     if (paymentDate < currentDate) {
                         payment.overdueStatus = true;
                         const timeDiff = currentDate.getTime() - paymentDate.getTime();
@@ -18095,8 +18119,11 @@ class UserProfileComponent extends BaseSection {
                     }
                 }
             });
-            this.paymentData = this.paymentData.filter(p => p.paymentStatus === 'DUE' &&
-                new Date(p.paymentDate) < currentDate);
+            // this.paymentData = this.paymentData.filter(p =>
+            //   p.paymentStatus === 'DUE' &&
+            //   new Date(p.paymentDate) < currentDate
+            // );
+            // console.log("paymentData", this.paymentData);
         });
     }
     getUserWislistDetails() {
@@ -18383,7 +18410,7 @@ class UserProfileComponent extends BaseSection {
         return order?.brandOrderDetails?.[0]?.orderedItems.slice(0, 3) || [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$2.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: CartService }, { token: i1$1.MatDialog }, { token: i8$2.MatBottomSheet }, { token: i2$3.CookieService }, { token: i4$1.MessageService }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n    [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n    [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-4 profile-box shadow-lg\"\r\n            style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n            [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n            <!-- Profile Header Section -->\r\n            <div class=\"d-flex align-items-center profile-header\"\r\n                style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n                <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n                        style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n                    <div class=\"online-indicator\"\r\n                        style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"profile-details flex-grow-1\">\r\n                    <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n                        {{getUserDetails?.contact?.name}}</h4>\r\n\r\n                    <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                        </h6>\r\n\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.email}}</span>\r\n                        </h6>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Navigation Tabs Section -->\r\n            <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center tab-item\"\r\n                        style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n                        [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n                        [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n                        [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n                        [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n                        <div class=\"tab-icon-wrapper\"\r\n                            style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n                            <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n                        </div>\r\n\r\n                        <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n                            {{tab.value}}</div>\r\n\r\n                        <!-- Hover effect background -->\r\n                        <div class=\"tab-hover-bg\"\r\n                            style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- Action Buttons Section -->\r\n            <div class=\"d-flex action-buttons\"\r\n                style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n                <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                    [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n                    Edit Profile\r\n                </button>\r\n\r\n                <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                    [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n                    Logout\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n                    (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n                            style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n                                <mat-icon>stay_primary_portrait</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                            </h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n                                *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.email}}</span>\r\n                            </h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n                                [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n                                [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                    [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n                                    {{tab.value}}</div>\r\n                            </div>\r\n\r\n                        </ng-container>\r\n                    </section>\r\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n            [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n    <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n                {{tab.value}}</div>\r\n        </ng-container>\r\n    </div> -->\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                            [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n                    </div>\r\n                    <div class=\"cart-text \">\r\n                        <ng-container *ngFor=\"let text of content?.inputText\">\r\n                            <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n                                [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n                                <simpo-text-editor [(value)]=\"text.value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n        (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2\">\r\n        <h3 class=\"title-text\">My Address</h3>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n            [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n                <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n                    <div class=\"card-body p-3\">\r\n                        <!-- Header Section -->\r\n                        <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                            <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n                                <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n                                <div class=\"icon-grp d-flex\">\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"address-content mb-3\">\r\n                            <div class=\"address-line mb-2\">\r\n                                <span class=\"text-muted small d-block\">Address</span>\r\n                                <span class=\"address-text\">{{address.addressLine1}}</span>\r\n                            </div>\r\n                            <div class=\"phone-info\">\r\n                                <span class=\"text-muted small d-block\">Phone</span>\r\n                                <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #showEmptyAddress>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n                    </div>\r\n                    <div class=\"cart-text\">\r\n                        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n                        </div>\r\n                        <!-- </ng-container> -->\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n        <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n            <!-- Header Section -->\r\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n                <div class=\"order-number\">\r\n                    <h4 class=\"mb-0  fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n                </div>\r\n                <div class=\"arrow-icon\">\r\n                    <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n                </div>\r\n            </div>\r\n            <div class=\"ordered-item row mb-2\">\r\n                <ng-container *ngFor=\"let item of  getOrderedItems(order)\">\r\n                    <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n                            onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            class=\"item-img w-50\">\r\n                        <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <!-- Middle Section -->\r\n            <div class=\"order-details\">\r\n                <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n                    <span class=\"text-muted small mb-3 mb-sm-0\">\r\n                        {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"amount-section\">\r\n                    <span class=\"h5 mb-0 text-success fw-bold\">\r\n                        <span [innerHTML]=\"currency\"></span>\r\n                        {{order.billDetails.discountAmount ?\r\n                        (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n                        order?.billDetails?.totalTaxAfterDiscount) :\r\n                        order.billDetails.totalGrossValue}}\r\n                    </span>\r\n                </div>\r\n                <div class=\"status-section\">\r\n                    <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n                        {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n    <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n    <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n        <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"address-card mb-2\">\r\n                    <div class=\"card-body p-4\">\r\n                        <div class=\"row align-items-center\">\r\n                            <div class=\"col-auto\">\r\n                                <div class=\"product-image-wrapper\">\r\n                                    <img loading=\"lazy\"\r\n                                        onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                        class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col\">\r\n                                <div class=\"product-details\">\r\n                                    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n                                        <div\r\n                                            class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n                                            <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n                                                {{item.itemName}}\r\n                                            </h6>\r\n                                            <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n                                                <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n                                                    title=\"Remove from wishlist\">\r\n                                                    <mat-icon class=\"small-icon\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                            <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n                                                <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n                                                    <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"product-price mb-3\">\r\n                                        <span class=\"h5 text-success fw-bold mb-0\">\r\n                                            <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n                                        </span>\r\n                                        <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n                                            ({{item.quantity}} items)\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"action-buttons d-flex  gap-2\">\r\n                                        <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n                                            *ngIf=\"item.quantity\">\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n                                                -\r\n                                            </button>\r\n                                            <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n                                                {{item.quantity}}\r\n                                            </span>\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'ADD')\"> +\r\n                                            </button>\r\n                                        </div>\r\n                                        <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n                                            (click)=\"addToFav(item, 'ADD')\">\r\n                                            + Add Quantity\r\n                                        </button>\r\n                                        <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n                                            Move to Cart\r\n                                        </button>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n    <ng-template #showEmptyWishlistScreen>\r\n        <section class=\"empty-cart m-auto\">\r\n            <div>\r\n                <div class=\"cart-image\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                    <ng-container>\r\n                        <div class=\"heading-medium d-flex justify-content-center\">\r\n                            Your Wishlist is Empty</div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </section>\r\n    </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n    <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n    <div class=\"row gap-2\">\r\n        <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n            <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n                <div class=\"card-header row gap-2\">\r\n                    <div class=\"card-head-left col-7\">\r\n                        <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n                        <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n                    </div>\r\n                    <div class=\"card-head-right col-4 text-center align-content-center\">\r\n                        <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body d-flex p-0 mb-3\">\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n                            class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n                        <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n                        <div class=\"card-sub-text text-center\">Rewards</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">8</div>\r\n                        <div class=\"card-sub-text text-center\">Due Months</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-footer row\">\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n                            may 2025</span>\r\n                    </div>\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n                            may 2026</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n    <div class=\"w-100 h-100\">\r\n        <div class=\"header\">\r\n            <div class=\"scheme-overview d-flex flex-column\">\r\n                <div class=\"d-flex gap-3\">\r\n                    <div class=\"available-savings\">\r\n                        <h3>Available Savings</h3>\r\n                        <div class=\"amount\">{{passbookSummary?.totalSavingAmount ? passbookSummary?.totalSavingAmount :\r\n                            'N/A'}}</div>\r\n                        <div class=\"subtitle\">+1,000 this month</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Active Schemes</h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{passbookSummary?.totalSchemesEnrolled ?\r\n                            passbookSummary?.totalSchemesEnrolled : 'N/A'}}</div>\r\n                        <div class=\"subtitle\">On Track</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"section d-flex-flex-column gap-2\">\r\n                    <div class=\"section-header\">\r\n                        <h2 class=\"section-title\">Upcoming Payments</h2>\r\n                    </div>\r\n                    <div class=\"payment-list d-flex flex-column gap-2\">\r\n                        <ng-container *ngIf=\"paymentData?.length; else showEmptyPayment\">\r\n                            <div class=\"payment-item\" *ngFor=\"let payment of paymentData.slice(0,2)\"\r\n                                [ngClass]=\"{'overdue': payment.overdue}\">\r\n                                <div class=\"payment-info\">\r\n                                    <div class=\"payment-icon\"><img\r\n                                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\"\r\n                                            *ngIf=\"payment.overdue\">\r\n                                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n                                            *ngIf=\"!payment.overdue && payment.paymentStatus === 'PAID'\">\r\n                                    </div>\r\n                                    <div class=\"payment-details\">\r\n                                        <h4>Smart EMA - 3rd EMI</h4>\r\n                                        <span>Date {{payment.paymentDate ? (payment.paymentDate | date:'shortDate') :\r\n                                            'N/A'}} | Due by: {{payment.daysOverdue ? payment.daysOverdue : 0}}\r\n                                            days</span>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"payment-amount\">\r\n                                    <div class=\"amount-value\">\u20B9{{payment.amountToBePaid ? payment.amountToBePaid :\r\n                                        'N/A'}}\r\n                                    </div>\r\n                                    <div class=\"payment-status\"\r\n                                        [ngClass]=\"payment.overdue ? 'overdue-status' : 'upcoming-status'\">\r\n                                        {{payment.overdue\r\n                                        ? 'Overdue' : 'Upcoming'}}</div>\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-template #showEmptyPayment>\r\n                            <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                                <span>No Upcoming Payments</span>\r\n                            </div>\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"quick-actions\">\r\n                <h3>Quick Actions</h3>\r\n                <div class=\"action-item d-flex align-items-center mb-2\"><mat-icon>visibility</mat-icon>View Due Payments\r\n                </div>\r\n                <div class=\"action-item d-flex align-items-center\"><img\r\n                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/957092c1753433825745SVG.png\">&nbsp;&nbsp;&nbsp;View\r\n                    Passbook</div>\r\n                <button class=\"enroll-btn\"><img\r\n                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n                    New Scheme</button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"section\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Your Active Schemes</h2>\r\n            </div>\r\n\r\n           <div class=\"schemes-grid\">\r\n  <ng-container *ngIf=\"userEnrollments && userEnrollments.length > 0; else showActiveScheme\">\r\n    <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n         *ngFor=\"let scheme of userEnrollments; let i = index\"\r\n         (click)=\"viewSchemeDetails(scheme)\">\r\n      <div class=\"scheme-header\">\r\n        <div>\r\n          <div class=\"scheme-title\">{{ scheme?.pwcSchemeCode || 'N/A' }}</div>\r\n          <div class=\"scheme-amount\">\u20B9{{ scheme?.schemeAmount || 'N/A' }}/Monthly</div>\r\n        </div>\r\n        <div class=\"scheme-date\">\r\n          Enrolled: {{ scheme?.createdTimeStamp ? (scheme?.createdTimeStamp | date:'dd-MM-yyyy') : 'N/A' }}\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"scheme-status active-status d-flex justify-content-center align-items-center\">\r\n        {{\r\n          scheme.enrollmentStatus ? (\r\n            (scheme.enrollmentStatus === 'ACTIVE' ||\r\n            scheme.enrollmentStatus === 'DEFAULT' ||\r\n            scheme.enrollmentStatus === 'Default') ? 'ACTIVE' :\r\n            (scheme.enrollmentStatus === 'COMPLETED' ? 'COMPLETED' : 'N/A')\r\n          ) : 'N/A'\r\n        }}\r\n      </div>\r\n\r\n      <div class=\"scheme-stats\">\r\n        <div class=\"stat\">\r\n          <div class=\"stat-value\">{{ scheme?.amountPaid || 'N/A' }}</div>\r\n          <div class=\"stat-label\">Deposited Amount</div>\r\n        </div>\r\n        <div class=\"stat\">\r\n          <div class=\"stat-value\">\r\n            {{\r\n              scheme?.dueMonths != null && scheme?.dueMonths != undefined ? (10 - scheme.dueMonths) : 'N/A'\r\n            }}\r\n          </div>\r\n          <div class=\"stat-label\">Paid Months</div>\r\n        </div>\r\n        <div class=\"stat\">\r\n          <div class=\"stat-value\">{{ scheme?.dueMonths != null && scheme?.dueMonths != undefined ? scheme?.dueMonths : 'N/A' }}</div>\r\n          <div class=\"stat-label\">Due Months</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"scheme-footer\">\r\n        <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') : 'N/A' }}</span>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-template #showActiveScheme>\r\n    <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n      <span>No Active Scheme</span>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n\r\n        </div>\r\n\r\n        <div class=\"auto-pay\">\r\n            <div class=\"auto-pay-icon mobile-icon\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n            <div class=\"auto-pay-content\">\r\n                <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n                <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n            </div>\r\n            <button class=\"manage-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n    <simpo-scheme-details [schemeDetails]=\"schemeDetails\"\r\n        (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;border-radius:20px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}@media screen and (max-width:475px){.total-container{height:auto!important}.amount,.scheme-count{font-size:20px!important}}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}@media screen and (max-width: 475px){.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{width:24%!important}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:98%!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.d-flex.justify-content-end{flex-direction:column!important}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:80%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings:after{content:\"\\1f4b0\";position:absolute;top:15px;right:15px;font-size:24px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount,.scheme-date{font-size:12px;color:#666}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;width:15%}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details", inputs: ["schemeDetails"], outputs: ["gotoSchemeOverview"] }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n    [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n    [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-4 profile-box shadow-lg\"\r\n            style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n            [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n            <!-- Profile Header Section -->\r\n            <div class=\"d-flex align-items-center profile-header\"\r\n                style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n                <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n                        style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n                    <div class=\"online-indicator\"\r\n                        style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"profile-details flex-grow-1\">\r\n                    <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n                        {{getUserDetails?.contact?.name}}</h4>\r\n\r\n                    <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                        </h6>\r\n\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.email}}</span>\r\n                        </h6>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Navigation Tabs Section -->\r\n            <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center tab-item\"\r\n                        style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n                        [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n                        [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n                        [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n                        [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n                        <div class=\"tab-icon-wrapper\"\r\n                            style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n                            <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n                        </div>\r\n\r\n                        <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n                            {{tab.value}}</div>\r\n\r\n                        <!-- Hover effect background -->\r\n                        <div class=\"tab-hover-bg\"\r\n                            style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- Action Buttons Section -->\r\n            <div class=\"d-flex action-buttons\"\r\n                style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n                <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                    [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n                    Edit Profile\r\n                </button>\r\n\r\n                <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                    [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n                    Logout\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n                    (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n                            style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n                                <mat-icon>stay_primary_portrait</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                            </h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n                                *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.email}}</span>\r\n                            </h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n                                [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n                                [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                    [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n                                    {{tab.value}}</div>\r\n                            </div>\r\n\r\n                        </ng-container>\r\n                    </section>\r\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n            [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n    <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n                {{tab.value}}</div>\r\n        </ng-container>\r\n    </div> -->\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                            [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n                    </div>\r\n                    <div class=\"cart-text \">\r\n                        <ng-container *ngFor=\"let text of content?.inputText\">\r\n                            <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n                                [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n                                <simpo-text-editor [(value)]=\"text.value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n        (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2\">\r\n        <h3 class=\"title-text\">My Address</h3>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n            [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n                <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n                    <div class=\"card-body p-3\">\r\n                        <!-- Header Section -->\r\n                        <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                            <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n                                <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n                                <div class=\"icon-grp d-flex\">\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"address-content mb-3\">\r\n                            <div class=\"address-line mb-2\">\r\n                                <span class=\"text-muted small d-block\">Address</span>\r\n                                <span class=\"address-text\">{{address.addressLine1}}</span>\r\n                            </div>\r\n                            <div class=\"phone-info\">\r\n                                <span class=\"text-muted small d-block\">Phone</span>\r\n                                <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #showEmptyAddress>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n                    </div>\r\n                    <div class=\"cart-text\">\r\n                        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n                        </div>\r\n                        <!-- </ng-container> -->\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n        <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n            <!-- Header Section -->\r\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n                <div class=\"order-number\">\r\n                    <h4 class=\"mb-0  fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n                </div>\r\n                <div class=\"arrow-icon\">\r\n                    <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n                </div>\r\n            </div>\r\n            <div class=\"ordered-item row mb-2\">\r\n                <ng-container *ngFor=\"let item of  getOrderedItems(order)\">\r\n                    <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n                            onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            class=\"item-img w-50\">\r\n                        <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <!-- Middle Section -->\r\n            <div class=\"order-details\">\r\n                <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n                    <span class=\"text-muted small mb-3 mb-sm-0\">\r\n                        {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"amount-section\">\r\n                    <span class=\"h5 mb-0 text-success fw-bold\">\r\n                        <span [innerHTML]=\"currency\"></span>\r\n                        {{order.billDetails.discountAmount ?\r\n                        (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n                        order?.billDetails?.totalTaxAfterDiscount) :\r\n                        order.billDetails.totalGrossValue}}\r\n                    </span>\r\n                </div>\r\n                <div class=\"status-section\">\r\n                    <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n                        {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n    <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n    <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n        <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"address-card mb-2\">\r\n                    <div class=\"card-body p-4\">\r\n                        <div class=\"row align-items-center\">\r\n                            <div class=\"col-auto\">\r\n                                <div class=\"product-image-wrapper\">\r\n                                    <img loading=\"lazy\"\r\n                                        onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                        class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col\">\r\n                                <div class=\"product-details\">\r\n                                    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n                                        <div\r\n                                            class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n                                            <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n                                                {{item.itemName}}\r\n                                            </h6>\r\n                                            <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n                                                <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n                                                    title=\"Remove from wishlist\">\r\n                                                    <mat-icon class=\"small-icon\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                            <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n                                                <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n                                                    <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"product-price mb-3\">\r\n                                        <span class=\"h5 text-success fw-bold mb-0\">\r\n                                            <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n                                        </span>\r\n                                        <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n                                            ({{item.quantity}} items)\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"action-buttons d-flex  gap-2\">\r\n                                        <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n                                            *ngIf=\"item.quantity\">\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n                                                -\r\n                                            </button>\r\n                                            <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n                                                {{item.quantity}}\r\n                                            </span>\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'ADD')\"> +\r\n                                            </button>\r\n                                        </div>\r\n                                        <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n                                            (click)=\"addToFav(item, 'ADD')\">\r\n                                            + Add Quantity\r\n                                        </button>\r\n                                        <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n                                            Move to Cart\r\n                                        </button>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n    <ng-template #showEmptyWishlistScreen>\r\n        <section class=\"empty-cart m-auto\">\r\n            <div>\r\n                <div class=\"cart-image\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                    <ng-container>\r\n                        <div class=\"heading-medium d-flex justify-content-center\">\r\n                            Your Wishlist is Empty</div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </section>\r\n    </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n    <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n    <div class=\"row gap-2\">\r\n        <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n            <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n                <div class=\"card-header row gap-2\">\r\n                    <div class=\"card-head-left col-7\">\r\n                        <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n                        <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n                    </div>\r\n                    <div class=\"card-head-right col-4 text-center align-content-center\">\r\n                        <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body d-flex p-0 mb-3\">\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n                            class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n                        <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n                        <div class=\"card-sub-text text-center\">Rewards</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">8</div>\r\n                        <div class=\"card-sub-text text-center\">Due Months</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-footer row\">\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n                            may 2025</span>\r\n                    </div>\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n                            may 2026</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n    <div class=\"w-100 h-100\">\r\n        <div class=\"header\">\r\n            <div class=\"scheme-overview d-flex flex-column\">\r\n                <div class=\"d-flex gap-3\">\r\n                    <div class=\"available-savings\">\r\n                        <h3>Available Savings</h3>\r\n                        <div class=\"amount\">{{totalSavings ? totalSavings :\r\n                            'N/A'}}</div>\r\n                        <div class=\"subtitle\">+1,000 this month</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Active Schemes</h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n                            totalSchemes.length : 'N/A'}}</div>\r\n                        <div class=\"subtitle\">On Track</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"section d-flex-flex-column gap-2\">\r\n                    <div class=\"section-header\">\r\n                        <h2 class=\"section-title\">Upcoming Payments</h2>\r\n                    </div>\r\n                    <div class=\"payment-list d-flex flex-column gap-2\">\r\n                        <ng-container *ngIf=\"paymentData?.length; else showEmptyPayment\">\r\n                            <div class=\"payment-item\" *ngFor=\"let payment of paymentData.slice(0,2)\"\r\n                                [ngClass]=\"{'overdue': payment.paymentStatus === 'OVERDUE'}\">\r\n                                <div class=\"payment-info\">\r\n                                    <div class=\"payment-icon\"><img\r\n                                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\"\r\n                                            *ngIf=\"payment.overdueStatus || payment.paymentStatus === 'DUE'\">\r\n                                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n                                            *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\">\r\n                                    </div>\r\n                                    <div class=\"payment-details\">\r\n                                        <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n                                        <span>Date {{payment.dueDate ? (payment.dueDate | date:'shortDate') :\r\n                                            'N/A'}} <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n                                                ? payment.daysOverdue : 0}}</span>\r\n                                            days</span>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"payment-amount\">\r\n                                    <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n                                        'N/A'}}\r\n                                    </div>\r\n                                    <div class=\"payment-status\"\r\n                                        [ngClass]=\"payment.overdue ? 'overdue-status' : 'upcoming-status'\">\r\n                                        {{payment.overdue\r\n                                        ? 'Overdue' : 'Upcoming'}}</div>\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-template #showEmptyPayment>\r\n                            <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                                <span>No Upcoming Payments</span>\r\n                            </div>\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"quick-actions\">\r\n                <h3>Quick Actions</h3>\r\n                <div class=\"action-item d-flex align-items-center mb-2\"><mat-icon>visibility</mat-icon>View Due Payments\r\n                </div>\r\n                <div class=\"action-item d-flex align-items-center\"><img\r\n                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/957092c1753433825745SVG.png\">&nbsp;&nbsp;&nbsp;View\r\n                    Passbook</div>\r\n                <button class=\"enroll-btn\"><img\r\n                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n                    New Scheme</button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"section\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Your Active Schemes</h2>\r\n            </div>\r\n\r\n            <div class=\"schemes-grid\">\r\n                <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n                    <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n                        *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n                        <div class=\"scheme-header\">\r\n                            <div>\r\n                                <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n                                <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || 'N/A' }}/Monthly</div>\r\n                            </div>\r\n                            <div class=\"scheme-date\">\r\n                                Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp | date:'dd-MM-yyyy') :\r\n                                'N/A' }}\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-status active-status d-flex justify-content-center align-items-center\">\r\n                            {{\r\n                            scheme.passBookStatus ? (\r\n                            (scheme.passBookStatus === 'ACTIVE' ||\r\n                            scheme.passBookStatus === 'DEFAULT' ||\r\n                            scheme.passBookStatus === 'Default') ? 'ACTIVE' :\r\n                            (scheme.passBookStatus === 'COMPLETED' ? 'COMPLETED' : 'N/A')\r\n                            ) : 'N/A'\r\n                            }}\r\n                        </div>\r\n\r\n                        <div class=\"scheme-stats\">\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{ scheme?.installmentAmount || 'N/A' }}</div>\r\n                                <div class=\"stat-label\">Deposited Amount</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">\r\n                                    {{\r\n                                    scheme?.dueMonths != null && scheme?.dueMonths != undefined ? (10 -\r\n                                    scheme.dueMonths) : 'N/A'\r\n                                    }}\r\n                                </div>\r\n                                <div class=\"stat-label\">Paid Months</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{ scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    scheme?.dueMonths : 'N/A' }}</div>\r\n                                <div class=\"stat-label\">Due Months</div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-footer\">\r\n                            <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n                                'N/A' }}</span>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <ng-template #showActiveScheme>\r\n                    <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                        <span>No Active Scheme</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n\r\n\r\n        </div>\r\n\r\n        <div class=\"auto-pay\">\r\n            <div class=\"auto-pay-icon mobile-icon\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n            <div class=\"auto-pay-content\">\r\n                <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n                <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n            </div>\r\n            <button class=\"manage-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n    <simpo-scheme-details [schemeDetails]=\"schemeDetails\"\r\n        (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;border-radius:20px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}@media screen and (max-width:475px){.total-container{height:auto!important}.amount,.scheme-count{font-size:20px!important}}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}@media screen and (max-width: 475px){.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{width:24%!important}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:98%!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.d-flex.justify-content-end{flex-direction:column!important}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:80%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings:after{content:\"\\1f4b0\";position:absolute;top:15px;right:15px;font-size:24px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount,.scheme-date{font-size:12px;color:#666}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;width:15%}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details", inputs: ["schemeDetails"], outputs: ["gotoSchemeOverview"] }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, decorators: [{
             type: Component,
@@ -18409,7 +18436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ImageEditorDirective,
                         SchemeDetailsComponent,
                         ListHomeAppointmentComponent
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n    [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n    [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-4 profile-box shadow-lg\"\r\n            style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n            [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n            <!-- Profile Header Section -->\r\n            <div class=\"d-flex align-items-center profile-header\"\r\n                style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n                <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n                        style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n                    <div class=\"online-indicator\"\r\n                        style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"profile-details flex-grow-1\">\r\n                    <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n                        {{getUserDetails?.contact?.name}}</h4>\r\n\r\n                    <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                        </h6>\r\n\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.email}}</span>\r\n                        </h6>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Navigation Tabs Section -->\r\n            <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center tab-item\"\r\n                        style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n                        [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n                        [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n                        [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n                        [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n                        <div class=\"tab-icon-wrapper\"\r\n                            style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n                            <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n                        </div>\r\n\r\n                        <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n                            {{tab.value}}</div>\r\n\r\n                        <!-- Hover effect background -->\r\n                        <div class=\"tab-hover-bg\"\r\n                            style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- Action Buttons Section -->\r\n            <div class=\"d-flex action-buttons\"\r\n                style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n                <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                    [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n                    Edit Profile\r\n                </button>\r\n\r\n                <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                    [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n                    Logout\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n                    (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n                            style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n                                <mat-icon>stay_primary_portrait</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                            </h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n                                *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.email}}</span>\r\n                            </h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n                                [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n                                [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                    [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n                                    {{tab.value}}</div>\r\n                            </div>\r\n\r\n                        </ng-container>\r\n                    </section>\r\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n            [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n    <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n                {{tab.value}}</div>\r\n        </ng-container>\r\n    </div> -->\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                            [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n                    </div>\r\n                    <div class=\"cart-text \">\r\n                        <ng-container *ngFor=\"let text of content?.inputText\">\r\n                            <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n                                [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n                                <simpo-text-editor [(value)]=\"text.value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n        (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2\">\r\n        <h3 class=\"title-text\">My Address</h3>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n            [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n                <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n                    <div class=\"card-body p-3\">\r\n                        <!-- Header Section -->\r\n                        <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                            <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n                                <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n                                <div class=\"icon-grp d-flex\">\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"address-content mb-3\">\r\n                            <div class=\"address-line mb-2\">\r\n                                <span class=\"text-muted small d-block\">Address</span>\r\n                                <span class=\"address-text\">{{address.addressLine1}}</span>\r\n                            </div>\r\n                            <div class=\"phone-info\">\r\n                                <span class=\"text-muted small d-block\">Phone</span>\r\n                                <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #showEmptyAddress>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n                    </div>\r\n                    <div class=\"cart-text\">\r\n                        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n                        </div>\r\n                        <!-- </ng-container> -->\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n        <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n            <!-- Header Section -->\r\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n                <div class=\"order-number\">\r\n                    <h4 class=\"mb-0  fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n                </div>\r\n                <div class=\"arrow-icon\">\r\n                    <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n                </div>\r\n            </div>\r\n            <div class=\"ordered-item row mb-2\">\r\n                <ng-container *ngFor=\"let item of  getOrderedItems(order)\">\r\n                    <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n                            onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            class=\"item-img w-50\">\r\n                        <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <!-- Middle Section -->\r\n            <div class=\"order-details\">\r\n                <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n                    <span class=\"text-muted small mb-3 mb-sm-0\">\r\n                        {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"amount-section\">\r\n                    <span class=\"h5 mb-0 text-success fw-bold\">\r\n                        <span [innerHTML]=\"currency\"></span>\r\n                        {{order.billDetails.discountAmount ?\r\n                        (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n                        order?.billDetails?.totalTaxAfterDiscount) :\r\n                        order.billDetails.totalGrossValue}}\r\n                    </span>\r\n                </div>\r\n                <div class=\"status-section\">\r\n                    <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n                        {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n    <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n    <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n        <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"address-card mb-2\">\r\n                    <div class=\"card-body p-4\">\r\n                        <div class=\"row align-items-center\">\r\n                            <div class=\"col-auto\">\r\n                                <div class=\"product-image-wrapper\">\r\n                                    <img loading=\"lazy\"\r\n                                        onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                        class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col\">\r\n                                <div class=\"product-details\">\r\n                                    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n                                        <div\r\n                                            class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n                                            <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n                                                {{item.itemName}}\r\n                                            </h6>\r\n                                            <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n                                                <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n                                                    title=\"Remove from wishlist\">\r\n                                                    <mat-icon class=\"small-icon\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                            <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n                                                <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n                                                    <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"product-price mb-3\">\r\n                                        <span class=\"h5 text-success fw-bold mb-0\">\r\n                                            <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n                                        </span>\r\n                                        <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n                                            ({{item.quantity}} items)\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"action-buttons d-flex  gap-2\">\r\n                                        <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n                                            *ngIf=\"item.quantity\">\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n                                                -\r\n                                            </button>\r\n                                            <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n                                                {{item.quantity}}\r\n                                            </span>\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'ADD')\"> +\r\n                                            </button>\r\n                                        </div>\r\n                                        <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n                                            (click)=\"addToFav(item, 'ADD')\">\r\n                                            + Add Quantity\r\n                                        </button>\r\n                                        <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n                                            Move to Cart\r\n                                        </button>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n    <ng-template #showEmptyWishlistScreen>\r\n        <section class=\"empty-cart m-auto\">\r\n            <div>\r\n                <div class=\"cart-image\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                    <ng-container>\r\n                        <div class=\"heading-medium d-flex justify-content-center\">\r\n                            Your Wishlist is Empty</div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </section>\r\n    </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n    <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n    <div class=\"row gap-2\">\r\n        <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n            <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n                <div class=\"card-header row gap-2\">\r\n                    <div class=\"card-head-left col-7\">\r\n                        <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n                        <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n                    </div>\r\n                    <div class=\"card-head-right col-4 text-center align-content-center\">\r\n                        <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body d-flex p-0 mb-3\">\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n                            class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n                        <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n                        <div class=\"card-sub-text text-center\">Rewards</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">8</div>\r\n                        <div class=\"card-sub-text text-center\">Due Months</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-footer row\">\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n                            may 2025</span>\r\n                    </div>\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n                            may 2026</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n    <div class=\"w-100 h-100\">\r\n        <div class=\"header\">\r\n            <div class=\"scheme-overview d-flex flex-column\">\r\n                <div class=\"d-flex gap-3\">\r\n                    <div class=\"available-savings\">\r\n                        <h3>Available Savings</h3>\r\n                        <div class=\"amount\">{{passbookSummary?.totalSavingAmount ? passbookSummary?.totalSavingAmount :\r\n                            'N/A'}}</div>\r\n                        <div class=\"subtitle\">+1,000 this month</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Active Schemes</h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{passbookSummary?.totalSchemesEnrolled ?\r\n                            passbookSummary?.totalSchemesEnrolled : 'N/A'}}</div>\r\n                        <div class=\"subtitle\">On Track</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"section d-flex-flex-column gap-2\">\r\n                    <div class=\"section-header\">\r\n                        <h2 class=\"section-title\">Upcoming Payments</h2>\r\n                    </div>\r\n                    <div class=\"payment-list d-flex flex-column gap-2\">\r\n                        <ng-container *ngIf=\"paymentData?.length; else showEmptyPayment\">\r\n                            <div class=\"payment-item\" *ngFor=\"let payment of paymentData.slice(0,2)\"\r\n                                [ngClass]=\"{'overdue': payment.overdue}\">\r\n                                <div class=\"payment-info\">\r\n                                    <div class=\"payment-icon\"><img\r\n                                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\"\r\n                                            *ngIf=\"payment.overdue\">\r\n                                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n                                            *ngIf=\"!payment.overdue && payment.paymentStatus === 'PAID'\">\r\n                                    </div>\r\n                                    <div class=\"payment-details\">\r\n                                        <h4>Smart EMA - 3rd EMI</h4>\r\n                                        <span>Date {{payment.paymentDate ? (payment.paymentDate | date:'shortDate') :\r\n                                            'N/A'}} | Due by: {{payment.daysOverdue ? payment.daysOverdue : 0}}\r\n                                            days</span>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"payment-amount\">\r\n                                    <div class=\"amount-value\">\u20B9{{payment.amountToBePaid ? payment.amountToBePaid :\r\n                                        'N/A'}}\r\n                                    </div>\r\n                                    <div class=\"payment-status\"\r\n                                        [ngClass]=\"payment.overdue ? 'overdue-status' : 'upcoming-status'\">\r\n                                        {{payment.overdue\r\n                                        ? 'Overdue' : 'Upcoming'}}</div>\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-template #showEmptyPayment>\r\n                            <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                                <span>No Upcoming Payments</span>\r\n                            </div>\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"quick-actions\">\r\n                <h3>Quick Actions</h3>\r\n                <div class=\"action-item d-flex align-items-center mb-2\"><mat-icon>visibility</mat-icon>View Due Payments\r\n                </div>\r\n                <div class=\"action-item d-flex align-items-center\"><img\r\n                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/957092c1753433825745SVG.png\">&nbsp;&nbsp;&nbsp;View\r\n                    Passbook</div>\r\n                <button class=\"enroll-btn\"><img\r\n                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n                    New Scheme</button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"section\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Your Active Schemes</h2>\r\n            </div>\r\n\r\n           <div class=\"schemes-grid\">\r\n  <ng-container *ngIf=\"userEnrollments && userEnrollments.length > 0; else showActiveScheme\">\r\n    <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n         *ngFor=\"let scheme of userEnrollments; let i = index\"\r\n         (click)=\"viewSchemeDetails(scheme)\">\r\n      <div class=\"scheme-header\">\r\n        <div>\r\n          <div class=\"scheme-title\">{{ scheme?.pwcSchemeCode || 'N/A' }}</div>\r\n          <div class=\"scheme-amount\">\u20B9{{ scheme?.schemeAmount || 'N/A' }}/Monthly</div>\r\n        </div>\r\n        <div class=\"scheme-date\">\r\n          Enrolled: {{ scheme?.createdTimeStamp ? (scheme?.createdTimeStamp | date:'dd-MM-yyyy') : 'N/A' }}\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"scheme-status active-status d-flex justify-content-center align-items-center\">\r\n        {{\r\n          scheme.enrollmentStatus ? (\r\n            (scheme.enrollmentStatus === 'ACTIVE' ||\r\n            scheme.enrollmentStatus === 'DEFAULT' ||\r\n            scheme.enrollmentStatus === 'Default') ? 'ACTIVE' :\r\n            (scheme.enrollmentStatus === 'COMPLETED' ? 'COMPLETED' : 'N/A')\r\n          ) : 'N/A'\r\n        }}\r\n      </div>\r\n\r\n      <div class=\"scheme-stats\">\r\n        <div class=\"stat\">\r\n          <div class=\"stat-value\">{{ scheme?.amountPaid || 'N/A' }}</div>\r\n          <div class=\"stat-label\">Deposited Amount</div>\r\n        </div>\r\n        <div class=\"stat\">\r\n          <div class=\"stat-value\">\r\n            {{\r\n              scheme?.dueMonths != null && scheme?.dueMonths != undefined ? (10 - scheme.dueMonths) : 'N/A'\r\n            }}\r\n          </div>\r\n          <div class=\"stat-label\">Paid Months</div>\r\n        </div>\r\n        <div class=\"stat\">\r\n          <div class=\"stat-value\">{{ scheme?.dueMonths != null && scheme?.dueMonths != undefined ? scheme?.dueMonths : 'N/A' }}</div>\r\n          <div class=\"stat-label\">Due Months</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"scheme-footer\">\r\n        <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') : 'N/A' }}</span>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-template #showActiveScheme>\r\n    <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n      <span>No Active Scheme</span>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n\r\n        </div>\r\n\r\n        <div class=\"auto-pay\">\r\n            <div class=\"auto-pay-icon mobile-icon\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n            <div class=\"auto-pay-content\">\r\n                <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n                <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n            </div>\r\n            <button class=\"manage-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n    <simpo-scheme-details [schemeDetails]=\"schemeDetails\"\r\n        (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;border-radius:20px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}@media screen and (max-width:475px){.total-container{height:auto!important}.amount,.scheme-count{font-size:20px!important}}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}@media screen and (max-width: 475px){.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{width:24%!important}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:98%!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.d-flex.justify-content-end{flex-direction:column!important}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:80%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings:after{content:\"\\1f4b0\";position:absolute;top:15px;right:15px;font-size:24px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount,.scheme-date{font-size:12px;color:#666}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;width:15%}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}\n"] }]
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n    [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n    [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-4 profile-box shadow-lg\"\r\n            style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n            [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n            <!-- Profile Header Section -->\r\n            <div class=\"d-flex align-items-center profile-header\"\r\n                style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n                <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n                        style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n                    <div class=\"online-indicator\"\r\n                        style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"profile-details flex-grow-1\">\r\n                    <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n                        {{getUserDetails?.contact?.name}}</h4>\r\n\r\n                    <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                        </h6>\r\n\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.email}}</span>\r\n                        </h6>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Navigation Tabs Section -->\r\n            <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center tab-item\"\r\n                        style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n                        [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n                        [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n                        [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n                        [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n                        <div class=\"tab-icon-wrapper\"\r\n                            style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n                            <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n                        </div>\r\n\r\n                        <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n                            {{tab.value}}</div>\r\n\r\n                        <!-- Hover effect background -->\r\n                        <div class=\"tab-hover-bg\"\r\n                            style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- Action Buttons Section -->\r\n            <div class=\"d-flex action-buttons\"\r\n                style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n                <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                    [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n                    Edit Profile\r\n                </button>\r\n\r\n                <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                    [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n                    Logout\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n                    (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n                            style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n                                <mat-icon>stay_primary_portrait</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                            </h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n                                *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.email}}</span>\r\n                            </h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n                                [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n                                [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                    [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n                                    {{tab.value}}</div>\r\n                            </div>\r\n\r\n                        </ng-container>\r\n                    </section>\r\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n            [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n    <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n                {{tab.value}}</div>\r\n        </ng-container>\r\n    </div> -->\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                            [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n                    </div>\r\n                    <div class=\"cart-text \">\r\n                        <ng-container *ngFor=\"let text of content?.inputText\">\r\n                            <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n                                [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n                                <simpo-text-editor [(value)]=\"text.value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n        (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2\">\r\n        <h3 class=\"title-text\">My Address</h3>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n            [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n                <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n                    <div class=\"card-body p-3\">\r\n                        <!-- Header Section -->\r\n                        <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                            <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n                                <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n                                <div class=\"icon-grp d-flex\">\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"address-content mb-3\">\r\n                            <div class=\"address-line mb-2\">\r\n                                <span class=\"text-muted small d-block\">Address</span>\r\n                                <span class=\"address-text\">{{address.addressLine1}}</span>\r\n                            </div>\r\n                            <div class=\"phone-info\">\r\n                                <span class=\"text-muted small d-block\">Phone</span>\r\n                                <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #showEmptyAddress>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n                    </div>\r\n                    <div class=\"cart-text\">\r\n                        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n                        </div>\r\n                        <!-- </ng-container> -->\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n        <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n            <!-- Header Section -->\r\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n                <div class=\"order-number\">\r\n                    <h4 class=\"mb-0  fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n                </div>\r\n                <div class=\"arrow-icon\">\r\n                    <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n                </div>\r\n            </div>\r\n            <div class=\"ordered-item row mb-2\">\r\n                <ng-container *ngFor=\"let item of  getOrderedItems(order)\">\r\n                    <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n                            onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            class=\"item-img w-50\">\r\n                        <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <!-- Middle Section -->\r\n            <div class=\"order-details\">\r\n                <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n                    <span class=\"text-muted small mb-3 mb-sm-0\">\r\n                        {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"amount-section\">\r\n                    <span class=\"h5 mb-0 text-success fw-bold\">\r\n                        <span [innerHTML]=\"currency\"></span>\r\n                        {{order.billDetails.discountAmount ?\r\n                        (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n                        order?.billDetails?.totalTaxAfterDiscount) :\r\n                        order.billDetails.totalGrossValue}}\r\n                    </span>\r\n                </div>\r\n                <div class=\"status-section\">\r\n                    <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n                        {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n    <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n    <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n        <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"address-card mb-2\">\r\n                    <div class=\"card-body p-4\">\r\n                        <div class=\"row align-items-center\">\r\n                            <div class=\"col-auto\">\r\n                                <div class=\"product-image-wrapper\">\r\n                                    <img loading=\"lazy\"\r\n                                        onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                        class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col\">\r\n                                <div class=\"product-details\">\r\n                                    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n                                        <div\r\n                                            class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n                                            <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n                                                {{item.itemName}}\r\n                                            </h6>\r\n                                            <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n                                                <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n                                                    title=\"Remove from wishlist\">\r\n                                                    <mat-icon class=\"small-icon\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                            <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n                                                <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n                                                    <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"product-price mb-3\">\r\n                                        <span class=\"h5 text-success fw-bold mb-0\">\r\n                                            <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n                                        </span>\r\n                                        <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n                                            ({{item.quantity}} items)\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"action-buttons d-flex  gap-2\">\r\n                                        <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n                                            *ngIf=\"item.quantity\">\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n                                                -\r\n                                            </button>\r\n                                            <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n                                                {{item.quantity}}\r\n                                            </span>\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'ADD')\"> +\r\n                                            </button>\r\n                                        </div>\r\n                                        <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n                                            (click)=\"addToFav(item, 'ADD')\">\r\n                                            + Add Quantity\r\n                                        </button>\r\n                                        <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n                                            Move to Cart\r\n                                        </button>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n    <ng-template #showEmptyWishlistScreen>\r\n        <section class=\"empty-cart m-auto\">\r\n            <div>\r\n                <div class=\"cart-image\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                    <ng-container>\r\n                        <div class=\"heading-medium d-flex justify-content-center\">\r\n                            Your Wishlist is Empty</div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </section>\r\n    </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n    <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n    <div class=\"row gap-2\">\r\n        <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n            <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n                <div class=\"card-header row gap-2\">\r\n                    <div class=\"card-head-left col-7\">\r\n                        <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n                        <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n                    </div>\r\n                    <div class=\"card-head-right col-4 text-center align-content-center\">\r\n                        <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body d-flex p-0 mb-3\">\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n                            class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n                        <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n                        <div class=\"card-sub-text text-center\">Rewards</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">8</div>\r\n                        <div class=\"card-sub-text text-center\">Due Months</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-footer row\">\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n                            may 2025</span>\r\n                    </div>\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n                            may 2026</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n    <div class=\"w-100 h-100\">\r\n        <div class=\"header\">\r\n            <div class=\"scheme-overview d-flex flex-column\">\r\n                <div class=\"d-flex gap-3\">\r\n                    <div class=\"available-savings\">\r\n                        <h3>Available Savings</h3>\r\n                        <div class=\"amount\">{{totalSavings ? totalSavings :\r\n                            'N/A'}}</div>\r\n                        <div class=\"subtitle\">+1,000 this month</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Active Schemes</h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n                            totalSchemes.length : 'N/A'}}</div>\r\n                        <div class=\"subtitle\">On Track</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"section d-flex-flex-column gap-2\">\r\n                    <div class=\"section-header\">\r\n                        <h2 class=\"section-title\">Upcoming Payments</h2>\r\n                    </div>\r\n                    <div class=\"payment-list d-flex flex-column gap-2\">\r\n                        <ng-container *ngIf=\"paymentData?.length; else showEmptyPayment\">\r\n                            <div class=\"payment-item\" *ngFor=\"let payment of paymentData.slice(0,2)\"\r\n                                [ngClass]=\"{'overdue': payment.paymentStatus === 'OVERDUE'}\">\r\n                                <div class=\"payment-info\">\r\n                                    <div class=\"payment-icon\"><img\r\n                                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\"\r\n                                            *ngIf=\"payment.overdueStatus || payment.paymentStatus === 'DUE'\">\r\n                                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n                                            *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\">\r\n                                    </div>\r\n                                    <div class=\"payment-details\">\r\n                                        <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n                                        <span>Date {{payment.dueDate ? (payment.dueDate | date:'shortDate') :\r\n                                            'N/A'}} <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n                                                ? payment.daysOverdue : 0}}</span>\r\n                                            days</span>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"payment-amount\">\r\n                                    <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n                                        'N/A'}}\r\n                                    </div>\r\n                                    <div class=\"payment-status\"\r\n                                        [ngClass]=\"payment.overdue ? 'overdue-status' : 'upcoming-status'\">\r\n                                        {{payment.overdue\r\n                                        ? 'Overdue' : 'Upcoming'}}</div>\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-template #showEmptyPayment>\r\n                            <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                                <span>No Upcoming Payments</span>\r\n                            </div>\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"quick-actions\">\r\n                <h3>Quick Actions</h3>\r\n                <div class=\"action-item d-flex align-items-center mb-2\"><mat-icon>visibility</mat-icon>View Due Payments\r\n                </div>\r\n                <div class=\"action-item d-flex align-items-center\"><img\r\n                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/957092c1753433825745SVG.png\">&nbsp;&nbsp;&nbsp;View\r\n                    Passbook</div>\r\n                <button class=\"enroll-btn\"><img\r\n                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n                    New Scheme</button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"section\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Your Active Schemes</h2>\r\n            </div>\r\n\r\n            <div class=\"schemes-grid\">\r\n                <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n                    <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n                        *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n                        <div class=\"scheme-header\">\r\n                            <div>\r\n                                <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n                                <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || 'N/A' }}/Monthly</div>\r\n                            </div>\r\n                            <div class=\"scheme-date\">\r\n                                Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp | date:'dd-MM-yyyy') :\r\n                                'N/A' }}\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-status active-status d-flex justify-content-center align-items-center\">\r\n                            {{\r\n                            scheme.passBookStatus ? (\r\n                            (scheme.passBookStatus === 'ACTIVE' ||\r\n                            scheme.passBookStatus === 'DEFAULT' ||\r\n                            scheme.passBookStatus === 'Default') ? 'ACTIVE' :\r\n                            (scheme.passBookStatus === 'COMPLETED' ? 'COMPLETED' : 'N/A')\r\n                            ) : 'N/A'\r\n                            }}\r\n                        </div>\r\n\r\n                        <div class=\"scheme-stats\">\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{ scheme?.installmentAmount || 'N/A' }}</div>\r\n                                <div class=\"stat-label\">Deposited Amount</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">\r\n                                    {{\r\n                                    scheme?.dueMonths != null && scheme?.dueMonths != undefined ? (10 -\r\n                                    scheme.dueMonths) : 'N/A'\r\n                                    }}\r\n                                </div>\r\n                                <div class=\"stat-label\">Paid Months</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{ scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    scheme?.dueMonths : 'N/A' }}</div>\r\n                                <div class=\"stat-label\">Due Months</div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-footer\">\r\n                            <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n                                'N/A' }}</span>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <ng-template #showActiveScheme>\r\n                    <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                        <span>No Active Scheme</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n\r\n\r\n        </div>\r\n\r\n        <div class=\"auto-pay\">\r\n            <div class=\"auto-pay-icon mobile-icon\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n            <div class=\"auto-pay-content\">\r\n                <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n                <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n            </div>\r\n            <button class=\"manage-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n    <simpo-scheme-details [schemeDetails]=\"schemeDetails\"\r\n        (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;border-radius:20px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}@media screen and (max-width:475px){.total-container{height:auto!important}.amount,.scheme-count{font-size:20px!important}}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}@media screen and (max-width: 475px){.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{width:24%!important}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:98%!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.d-flex.justify-content-end{flex-direction:column!important}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:80%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings:after{content:\"\\1f4b0\";position:absolute;top:15px;right:15px;font-size:24px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount,.scheme-date{font-size:12px;color:#666}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;width:15%}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}\n"] }]
         }], ctorParameters: () => [{ type: i2$2.Router }, { type: EventsService }, { type: RestService }, { type: StorageServiceService }, { type: CartService }, { type: i1$1.MatDialog }, { type: i8$2.MatBottomSheet }, { type: i2$3.CookieService }, { type: i4$1.MessageService }, { type: i2$2.ActivatedRoute }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -18838,6 +18865,8 @@ class VerifyComponent extends BaseSection {
         this.loadingText = "Please wait...";
         this.API_COUNT = 0;
         this.MAX_API_COUNT = 20;
+        this.PASSBOOK_API_COUNT = 0;
+        this.MAX_PASSBOOK_API_COUNT = 20;
     }
     ngOnInit() {
         this.content = this.data?.content;
@@ -18855,7 +18884,13 @@ class VerifyComponent extends BaseSection {
                 this.loadingText = this.content?.inputText?.[1]?.value ?? 'We are processing your payments';
                 setTimeout(() => {
                     this.loadingText = this.content?.inputText?.[2]?.value ?? 'Hold On...';
-                    this.checkPaymentStatus();
+                    const passBookOrderId = localStorage.getItem("passbookOrderId");
+                    if (passBookOrderId) {
+                        this.checkPassbookPaymentStatus();
+                    }
+                    else {
+                        this.checkPaymentStatus();
+                    }
                 }, 3000);
             }, 3000);
         }, 3000);
@@ -18904,6 +18939,39 @@ class VerifyComponent extends BaseSection {
             }
         });
     }
+    checkPassbookPaymentStatus() {
+        const orderId = localStorage.getItem("passbookOrderId");
+        this.PASSBOOK_API_COUNT++;
+        this.restService.getPassbookOrderStatus(orderId).subscribe((response) => {
+            localStorage.removeItem("passbookOrderId");
+            Swal.fire({
+                icon: "success",
+                title: "Hurray",
+                text: "Order placed successfully",
+                confirmButtonText: "See Details"
+            }).then((response) => {
+                if (response.isConfirmed) {
+                    this.router.navigate(['/profile']);
+                }
+            });
+        }, (error) => {
+            if (this.PASSBOOK_API_COUNT >= this.MAX_PASSBOOK_API_COUNT) {
+                Swal.fire({
+                    icon: "error",
+                    title: "Sorry",
+                    text: "We encountered some issue while placing your order",
+                    confirmButtonText: "Go To Home"
+                }).then((response) => {
+                    if (response.isConfirmed) {
+                        this.router.navigate(['/']);
+                    }
+                });
+            }
+            else {
+                this.checkPassbookPaymentStatus();
+            }
+        });
+    }
     editSection() {
         if (window.innerWidth <= 475)
             return;
@@ -20151,20 +20219,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 class ReturnsCalculatorComponent extends BaseSection {
-    constructor(_eventService) {
+    constructor(_eventService, restService, matDialog, storageService) {
         super();
         this._eventService = _eventService;
+        this.restService = restService;
+        this.matDialog = matDialog;
+        this.storageService = storageService;
         this.selectedScheme = 'individual';
-        this.monthlyAmount = 42000;
-        this.maxAmount = 100000;
-        this.minAmount = 3000;
+        this.monthlyAmount = 0;
+        this.maxAmount = 0;
+        this.minAmount = 0;
+        this.maturityCount = 10;
+        this.benefitAmount = 0;
+        this.allSchemes = [];
     }
     ngOnInit() {
         this.styles = this.data?.styles;
-    }
-    onSchemeChange() {
+        this.getEnrolledSchemes();
+    }
+    onSchemeChange(scheme) {
+        if (this.enrolledScheme) {
+            this.enrolledScheme.selected = false;
+        }
+        scheme.selected = !scheme.selected;
+        this.minAmount = scheme?.minInstallmentValue ? scheme.minInstallmentValue : this.minAmount;
+        this.maxAmount = scheme?.maxInstallmentValue ? scheme.maxInstallmentValue : this.maxAmount;
+        this.maturityCount = scheme?.maturityCount ? scheme.maturityCount : this.maturityCount;
+        this.monthlyAmount = this.minAmount;
+        // console.log(scheme);
+        this.enrolledScheme = scheme;
+        this.benefitAmount = 0;
+        this.onAmountChange();
     }
     onAmountChange() {
+        if (Object.keys(this.enrolledScheme.jewellerBenefit).length > 0) {
+            const values = Object.values(this.enrolledScheme.jewellerBenefit);
+            const highestValue = Math.max(...Object.values(values));
+            if (this.enrolledScheme.benefitType === "PERCENT_ON_MONTH") {
+                this.benefitAmount = (this.monthlyAmount * highestValue) / 100;
+            }
+            else if (this.enrolledScheme.benefitType === "SCHEME") {
+                this.benefitAmount = ((this.monthlyAmount * this.maturityCount) * highestValue) / 100;
+            }
+            else if (this.enrolledScheme.benefitType === "DISCOUNT") {
+                this.benefitAmount = ((this.monthlyAmount * this.maturityCount) * highestValue) / 100;
+            }
+        }
     }
     get individualContribution() {
         return this.monthlyAmount * 10;
@@ -20193,13 +20293,97 @@ class ReturnsCalculatorComponent extends BaseSection {
     getButtonData(index) {
         return this.data?.action?.buttons[index]?.content;
     }
-    redirectTo(data) {
-        if (!data?.pageId && data?.redirectionUrl)
-            return;
-        this._eventService.buttonRedirection.emit({ data: data });
+    redirectTo(scheme) {
+        // if (!data?.pageId && data?.redirectionUrl)
+        //   return;
+        // this._eventService.buttonRedirection.emit({ data: data });
+    }
+    closeDialog() {
+        this.matDialog.closeAll();
+    }
+    enrollScheme(scheme) {
+        const userDetails = this.storageService.getUser();
+        console.log(userDetails);
+        let payload = {
+            userBasicDetails: {
+                customer_id: userDetails?.userId,
+                customer_name: userDetails?.contact?.name,
+                customer_phone: userDetails?.contact?.mobile,
+                customer_email: userDetails?.contact?.email,
+            },
+            schemeId: scheme?.id,
+            schemeName: scheme?.schemeName,
+            earlyRedemptionCharge: scheme?.enrollmentFees,
+            installmentAmount: this.monthlyAmount,
+            storeRefId: scheme?.schemeRepresentativeId,
+            storeId: scheme?.storeId,
+            storeName: scheme?.storeName,
+            maturityCount: scheme?.maturityCount,
+            jewellerBenefit: scheme?.jewellerBenefit,
+            dueMonths: scheme?.maturityCount,
+            businessId: scheme?.businessId,
+            businessName: scheme?.businessName,
+            enableEarlyRedemption: scheme?.enableEarlyRedemption,
+            redemptionSlabList: scheme?.redemptionSlabList,
+            schemeType: scheme?.schemeType,
+            metalType: scheme?.metalType,
+            karatType: scheme?.karatType,
+            customerAccount: ""
+        };
+        this.restService.enrollScheme(payload, true).subscribe({
+            next: (response) => {
+                if (response.data.cashfreeResponse != null) {
+                    this.continuePayment(payload);
+                }
+                else {
+                    this.storeCharges = response.data.cart;
+                    let dialog = this.matDialog.open(this.showChargesTemplate, {
+                        panelClass: 'show-charges-class'
+                    });
+                    dialog.afterClosed().subscribe(() => {
+                        this.continuePayment(payload);
+                    });
+                }
+            },
+            error: (err) => {
+                console.log(err);
+            }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReturnsCalculatorComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReturnsCalculatorComponent, isStandalone: true, selector: "simpo-returns-calculator", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoLayout]=\"stylesLayout\">\r\n        <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n                <div class=\"calculator-header text-center mb-4  w-100\">\r\n                    <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n                </div>\r\n                <div class=\"sub-header mb-3 p-3\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n                </div>\r\n                <div class=\"calculator-body-top d-flex justify-content-between mb-4 px-3\">\r\n                    <div class=\"form-check scheme-option w-48 p-3 border rounded\"\r\n                        [ngClass]=\"{'border-primary ind-border': selectedScheme === 'individual'}\">\r\n                        <input class=\"form-check-input\" type=\"radio\" name=\"scheme\" id=\"individual\" value=\"individual\"\r\n                            [(ngModel)]=\"selectedScheme\" (change)=\"onSchemeChange()\">\r\n                        <label class=\"form-check-label ms-2\" for=\"individual\">\r\n                            <div class=\"d-flex align-items-center mb-2\">\r\n                                \uD83D\uDC64\r\n                                <div class=\"scheme-header fw-bold\">Individual Investment Scheme</div>\r\n                            </div>\r\n                            <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE from\r\n                                ORRA</div>\r\n                        </label>\r\n                    </div>\r\n\r\n                    <div class=\"form-check scheme-option w-48 p-3 border rounded\"\r\n                        [ngClass]=\"{'border-primary grp-border': selectedScheme === 'group'}\">\r\n                        <input class=\"form-check-input\" type=\"radio\" name=\"scheme\" id=\"group\" value=\"group\"\r\n                            [(ngModel)]=\"selectedScheme\" (change)=\"onSchemeChange()\">\r\n                        <label class=\"form-check-label ms-2\" for=\"group\">\r\n                            <div class=\"d-flex align-items-center mb-2\">\r\n                                \uD83D\uDC65\r\n                                <div class=\"scheme-header fw-bold\">Group Investment Scheme</div>\r\n                            </div>\r\n                            <div class=\"scheme-description text-muted small\">11 members, monthly lucky draw for full\r\n                                amount</div>\r\n                        </label>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"sub-header mb-3 px-3\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n                </div>\r\n\r\n                <div class=\"calculate-slider mb-4 px-3\">\r\n                    <div class=\"slider-container position-relative\">\r\n                        <input type=\"range\" class=\"form-range custom-range\" min=\"3000\" max=\"100000\" step=\"1000\"\r\n                            [(ngModel)]=\"monthlyAmount\" (input)=\"onAmountChange()\">\r\n                        <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n                            <span class=\"text-muted\">\u20B93,000</span>\r\n                            <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n                            <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n                        </div>\r\n                        <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"calculator-bottom px-3 mb-5\">\r\n                    <div *ngIf=\"selectedScheme === 'individual'\" class=\"scheme-results\">\r\n                        <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n                        </div>\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 10) | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your 10-Month Contribution</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{monthlyAmount | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">ORRA's FREE Bonus</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"bonus-message text-center mb-3\">\r\n                            \u2B50 <span class=\"bonus-text\">You save 10% with ORRA's bonus!</span>\r\n                        </div>\r\n\r\n\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n                            (click)=\"redirectTo(getButtonData(0))\">\r\n                            Enroll in Scheme\r\n                        </button>\r\n                    </div>\r\n                    <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n                        <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n                        </div>\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n                            Enroll in Scheme\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>\r\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.scheme-option{cursor:pointer;transition:all .3s ease}.scheme-option:hover{transform:translateY(-2px);box-shadow:0 2px 8px #0000001a}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{background:#fff3cd;border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
+    continuePayment(payload) {
+        this.restService.enrollScheme(payload, false).subscribe({
+            next: (response) => {
+                localStorage.setItem('passbookOrderId', response.data.orderId);
+                this.openCashfreeSdk(response.data.sessionId);
+            },
+            error: (error) => { }
+        });
+    }
+    getEnrolledSchemes() {
+        const payload = {
+            businessIds: [
+                localStorage.getItem('businessId')
+            ]
+        };
+        this.restService.getAllEnrolledSchemes(payload).subscribe({
+            next: (res) => {
+                this.allSchemes = res.data?.data;
+                this.allSchemes = this.allSchemes.map(item => ({
+                    ...item,
+                    selected: false
+                }));
+                // console.log(this.allSchemes)
+            },
+            error: (err) => {
+                console.log(err);
+            }
+        });
+    }
+    openCashfreeSdk(sessionId) {
+        this._eventService.cashFreeEvent.emit({ data: { orderSignature: sessionId } });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReturnsCalculatorComponent, deps: [{ token: EventsService }, { token: RestService }, { token: i1$1.MatDialog }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReturnsCalculatorComponent, isStandalone: true, selector: "simpo-returns-calculator", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoLayout]=\"stylesLayout\">\r\n        <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n                <div class=\"calculator-header text-center mb-4  w-100\">\r\n                    <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n                </div>\r\n                <div class=\"sub-header mb-3 p-3\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n                </div>\r\n                <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n                    <ng-container *ngFor=\"let scheme of allSchemes\">\r\n                        <div class=\"form-check scheme-option  p-3 border rounded border-primary ind-border\"\r\n                            (click)=\"onSchemeChange(scheme)\">\r\n                            <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n                                (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n                            <div class=\"form-check-label ms-2\">\r\n                                <div class=\"d-flex align-items-center mb-2\">\r\n                                    \uD83D\uDC64\r\n                                    <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n                                        'N/A'}}</div>\r\n                                </div>\r\n                                <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div class=\"sub-header mb-3 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n                </div>\r\n\r\n                <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n                    <div class=\"slider-container position-relative\">\r\n                        <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n                            step=\"1000\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n                        <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n                            <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n                            <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n                            <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n                        </div>\r\n                        <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"calculator-bottom px-3 mb-5\">\r\n                    <div *ngIf=\"selectedScheme === 'individual'\" class=\"scheme-results\">\r\n                        <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n                        </div>\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n                                        number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\"\r\n                                        *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n                                        maturityCount)+benefitAmount) | number}}</div>\r\n                                    <div class=\"result-amount fw-bold fs-5\"\r\n                                        *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n                                        maturityCount)) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"bonus-message text-center mb-3\">\r\n                            \u2B50 <span class=\"bonus-text\">You save 10% with ORRA's bonus!</span>\r\n                        </div>\r\n\r\n\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n                            (click)=\"enrollScheme(enrolledScheme)\">\r\n                            Enroll in Scheme\r\n                        </button>\r\n                    </div>\r\n                    <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n                        <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n                        </div>\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n                            Enroll in Scheme\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-template #showCharges>\r\n        <div class=\"payment-dialog\">\r\n            <div class=\"dialog-header\">\r\n                <h2>Payment Details</h2>\r\n                <button class=\"close-btn\" mat-icon-button>\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n\r\n            <div class=\"payment-content\">\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Installment Amount:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                        (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Convenience Fee:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                        (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Payment Service Charges:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                        (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row total-row\">\r\n                    <span class=\"label total-label\">Total Amount:</span>\r\n                    <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                        (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"dialog-actions\">\r\n                <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{background:#fff3cd;border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReturnsCalculatorComponent, decorators: [{
             type: Component,
@@ -20218,8 +20402,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SpacingHorizontalDirective,
                         TextEditorComponent,
                         ButtonEditorDirective,
-                    ], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoLayout]=\"stylesLayout\">\r\n        <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n                <div class=\"calculator-header text-center mb-4  w-100\">\r\n                    <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n                </div>\r\n                <div class=\"sub-header mb-3 p-3\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n                </div>\r\n                <div class=\"calculator-body-top d-flex justify-content-between mb-4 px-3\">\r\n                    <div class=\"form-check scheme-option w-48 p-3 border rounded\"\r\n                        [ngClass]=\"{'border-primary ind-border': selectedScheme === 'individual'}\">\r\n                        <input class=\"form-check-input\" type=\"radio\" name=\"scheme\" id=\"individual\" value=\"individual\"\r\n                            [(ngModel)]=\"selectedScheme\" (change)=\"onSchemeChange()\">\r\n                        <label class=\"form-check-label ms-2\" for=\"individual\">\r\n                            <div class=\"d-flex align-items-center mb-2\">\r\n                                \uD83D\uDC64\r\n                                <div class=\"scheme-header fw-bold\">Individual Investment Scheme</div>\r\n                            </div>\r\n                            <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE from\r\n                                ORRA</div>\r\n                        </label>\r\n                    </div>\r\n\r\n                    <div class=\"form-check scheme-option w-48 p-3 border rounded\"\r\n                        [ngClass]=\"{'border-primary grp-border': selectedScheme === 'group'}\">\r\n                        <input class=\"form-check-input\" type=\"radio\" name=\"scheme\" id=\"group\" value=\"group\"\r\n                            [(ngModel)]=\"selectedScheme\" (change)=\"onSchemeChange()\">\r\n                        <label class=\"form-check-label ms-2\" for=\"group\">\r\n                            <div class=\"d-flex align-items-center mb-2\">\r\n                                \uD83D\uDC65\r\n                                <div class=\"scheme-header fw-bold\">Group Investment Scheme</div>\r\n                            </div>\r\n                            <div class=\"scheme-description text-muted small\">11 members, monthly lucky draw for full\r\n                                amount</div>\r\n                        </label>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"sub-header mb-3 px-3\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n                </div>\r\n\r\n                <div class=\"calculate-slider mb-4 px-3\">\r\n                    <div class=\"slider-container position-relative\">\r\n                        <input type=\"range\" class=\"form-range custom-range\" min=\"3000\" max=\"100000\" step=\"1000\"\r\n                            [(ngModel)]=\"monthlyAmount\" (input)=\"onAmountChange()\">\r\n                        <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n                            <span class=\"text-muted\">\u20B93,000</span>\r\n                            <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n                            <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n                        </div>\r\n                        <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"calculator-bottom px-3 mb-5\">\r\n                    <div *ngIf=\"selectedScheme === 'individual'\" class=\"scheme-results\">\r\n                        <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n                        </div>\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 10) | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your 10-Month Contribution</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{monthlyAmount | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">ORRA's FREE Bonus</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"bonus-message text-center mb-3\">\r\n                            \u2B50 <span class=\"bonus-text\">You save 10% with ORRA's bonus!</span>\r\n                        </div>\r\n\r\n\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n                            (click)=\"redirectTo(getButtonData(0))\">\r\n                            Enroll in Scheme\r\n                        </button>\r\n                    </div>\r\n                    <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n                        <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n                        </div>\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n                            Enroll in Scheme\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>\r\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.scheme-option{cursor:pointer;transition:all .3s ease}.scheme-option:hover{transform:translateY(-2px);box-shadow:0 2px 8px #0000001a}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{background:#fff3cd;border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}\n"] }]
-        }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
+                    ], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoLayout]=\"stylesLayout\">\r\n        <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n                <div class=\"calculator-header text-center mb-4  w-100\">\r\n                    <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n                </div>\r\n                <div class=\"sub-header mb-3 p-3\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n                </div>\r\n                <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n                    <ng-container *ngFor=\"let scheme of allSchemes\">\r\n                        <div class=\"form-check scheme-option  p-3 border rounded border-primary ind-border\"\r\n                            (click)=\"onSchemeChange(scheme)\">\r\n                            <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n                                (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n                            <div class=\"form-check-label ms-2\">\r\n                                <div class=\"d-flex align-items-center mb-2\">\r\n                                    \uD83D\uDC64\r\n                                    <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n                                        'N/A'}}</div>\r\n                                </div>\r\n                                <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div class=\"sub-header mb-3 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n                </div>\r\n\r\n                <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n                    <div class=\"slider-container position-relative\">\r\n                        <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n                            step=\"1000\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n                        <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n                            <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n                            <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n                            <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n                        </div>\r\n                        <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"calculator-bottom px-3 mb-5\">\r\n                    <div *ngIf=\"selectedScheme === 'individual'\" class=\"scheme-results\">\r\n                        <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n                        </div>\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n                                        number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\"\r\n                                        *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n                                        maturityCount)+benefitAmount) | number}}</div>\r\n                                    <div class=\"result-amount fw-bold fs-5\"\r\n                                        *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n                                        maturityCount)) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"bonus-message text-center mb-3\">\r\n                            \u2B50 <span class=\"bonus-text\">You save 10% with ORRA's bonus!</span>\r\n                        </div>\r\n\r\n\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n                            (click)=\"enrollScheme(enrolledScheme)\">\r\n                            Enroll in Scheme\r\n                        </button>\r\n                    </div>\r\n                    <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n                        <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n                        </div>\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n                            Enroll in Scheme\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-template #showCharges>\r\n        <div class=\"payment-dialog\">\r\n            <div class=\"dialog-header\">\r\n                <h2>Payment Details</h2>\r\n                <button class=\"close-btn\" mat-icon-button>\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n\r\n            <div class=\"payment-content\">\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Installment Amount:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                        (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Convenience Fee:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                        (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Payment Service Charges:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                        (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row total-row\">\r\n                    <span class=\"label total-label\">Total Amount:</span>\r\n                    <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                        (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"dialog-actions\">\r\n                <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{background:#fff3cd;border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}\n"] }]
+        }], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i1$1.MatDialog }, { type: StorageServiceService }], propDecorators: { showChargesTemplate: [{
+                type: ViewChild,
+                args: ['showCharges', { static: true }]
+            }], data: [{
                 type: Input
             }], edit: [{
                 type: Input
@@ -20441,5 +20628,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, 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, 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, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, 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, 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