npm - simpo-component-library - Versions diffs - 3.6.591 → 3.6.592 - Mend

simpo-component-library 3.6.591 → 3.6.592

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 (39) hide show

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

@@ -1,5 +1,5 @@
 import * as i4 from '@angular/common';
-import { CommonModule, isPlatformBrowser, NgStyle, NgFor, DatePipe, NgIf } from '@angular/common';
+import { CommonModule, isPlatformBrowser, NgStyle, NgFor, DatePipe, NgIf, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Component, Input, EventEmitter, Injectable, Directive, HostListener, InjectionToken, Inject, inject, PLATFORM_ID, ViewChild, ElementRef, Renderer2, forwardRef, Output, Pipe, Optional, NgModule, ViewChildren } from '@angular/core';
 import { MatGridListModule } from '@angular/material/grid-list';
@@ -19,7 +19,7 @@ import * as i6 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
 import * as i8$1 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
-import { map, startWith, debounceTime, distinctUntilChanged, switchMap, fromEvent, filter, forkJoin, firstValueFrom } from 'rxjs';
+import { map, startWith, debounceTime, distinctUntilChanged, switchMap, fromEvent, filter, forkJoin, firstValueFrom, interval, catchError, of } from 'rxjs';
 import * as i7 from 'ng-lazyload-image';
 import { LazyLoadImageModule } from 'ng-lazyload-image';
 import * as i1 from '@angular/common/http';
@@ -2425,11 +2425,11 @@ class ImageEditorComponent {
         }
     }
     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          *ngIf=\"!imageData?.url?.includes('.mp4')\">\r\n        <video [src]=\"imageData?.url\" class=\"w-100 h-100\" *ngIf=\"imageData?.url?.includes('.mp4')\" muted loop></video>\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    <span class=\"p-0-10 clr-red\">Note : This Icon Feature Supports SVG and PNG in black and white format only.</span>\r\n  </ng-container>\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\r\n    <div class=\"tabs d-flex px-3 gap-3 mb-2\" *ngIf=\"iconData.showBackground\">\r\n      <div class=\"tab px-3 py-2\" *ngFor=\"let tab of tabs\" (click)=\"iconData.backgroundType = tab\"\r\n        [class.selectedTab]=\"iconData.backgroundType == tab\">\r\n        {{tab}}\r\n      </div>\r\n    </div>\r\n\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 mb-2\" (click)=\"colorInput1.click()\">\r\n      </div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.backgroundColor\" class=\"input-text d-none\" #colorInput1 />\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 && iconData.backgroundType === 'Gradient'\">\r\n      <label class=\"input-label-1 mb-3 w-100\">Icon Secondary Background</label>\r\n      <div [style.backgroundColor]=\"iconData?.secondaryColor\" class=\"custom-input\" (click)=\"colorInput2.click()\"></div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.secondaryColor\" class=\"input-text d-none\" #colorInput2 />\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}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.selectedTab{background:#39393934;font-weight:700}.clr-red{color:red;font-size:12px;margin-bottom:10px}.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: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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 && !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          *ngIf=\"!imageData?.url?.includes('.mp4')\">\r\n        <video [src]=\"imageData.url\" class=\"w-100 h-100\" *ngIf=\"imageData?.url?.includes('.mp4')\" muted loop></video>\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    <span class=\"p-0-10 clr-red\">Note : This Icon Feature Supports SVG and PNG in black and white format only.</span>\r\n  </ng-container>\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\r\n    <div class=\"tabs d-flex px-3 gap-3 mb-2\" *ngIf=\"iconData.showBackground\">\r\n      <div class=\"tab px-3 py-2\" *ngFor=\"let tab of tabs\" (click)=\"iconData.backgroundType = tab\"\r\n        [class.selectedTab]=\"iconData.backgroundType == tab\">\r\n        {{tab}}\r\n      </div>\r\n    </div>\r\n\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 mb-2\" (click)=\"colorInput1.click()\">\r\n      </div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.backgroundColor\" class=\"input-text d-none\" #colorInput1 />\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 && iconData.backgroundType === 'Gradient'\">\r\n      <label class=\"input-label-1 mb-3 w-100\">Icon Secondary Background</label>\r\n      <div [style.backgroundColor]=\"iconData?.secondaryColor\" class=\"custom-input\" (click)=\"colorInput2.click()\"></div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.secondaryColor\" class=\"input-text d-none\" #colorInput2 />\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}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.selectedTab{background:#39393934;font-weight:700}.clr-red{color:red;font-size:12px;margin-bottom:10px}.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: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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          *ngIf=\"!imageData?.url?.includes('.mp4')\">\r\n        <video [src]=\"imageData?.url\" class=\"w-100 h-100\" *ngIf=\"imageData?.url?.includes('.mp4')\" muted loop></video>\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    <span class=\"p-0-10 clr-red\">Note : This Icon Feature Supports SVG and PNG in black and white format only.</span>\r\n  </ng-container>\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\r\n    <div class=\"tabs d-flex px-3 gap-3 mb-2\" *ngIf=\"iconData.showBackground\">\r\n      <div class=\"tab px-3 py-2\" *ngFor=\"let tab of tabs\" (click)=\"iconData.backgroundType = tab\"\r\n        [class.selectedTab]=\"iconData.backgroundType == tab\">\r\n        {{tab}}\r\n      </div>\r\n    </div>\r\n\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 mb-2\" (click)=\"colorInput1.click()\">\r\n      </div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.backgroundColor\" class=\"input-text d-none\" #colorInput1 />\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 && iconData.backgroundType === 'Gradient'\">\r\n      <label class=\"input-label-1 mb-3 w-100\">Icon Secondary Background</label>\r\n      <div [style.backgroundColor]=\"iconData?.secondaryColor\" class=\"custom-input\" (click)=\"colorInput2.click()\"></div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.secondaryColor\" class=\"input-text d-none\" #colorInput2 />\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}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.selectedTab{background:#39393934;font-weight:700}.clr-red{color:red;font-size:12px;margin-bottom:10px}.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 && !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          *ngIf=\"!imageData?.url?.includes('.mp4')\">\r\n        <video [src]=\"imageData.url\" class=\"w-100 h-100\" *ngIf=\"imageData?.url?.includes('.mp4')\" muted loop></video>\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    <span class=\"p-0-10 clr-red\">Note : This Icon Feature Supports SVG and PNG in black and white format only.</span>\r\n  </ng-container>\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\r\n    <div class=\"tabs d-flex px-3 gap-3 mb-2\" *ngIf=\"iconData.showBackground\">\r\n      <div class=\"tab px-3 py-2\" *ngFor=\"let tab of tabs\" (click)=\"iconData.backgroundType = tab\"\r\n        [class.selectedTab]=\"iconData.backgroundType == tab\">\r\n        {{tab}}\r\n      </div>\r\n    </div>\r\n\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 mb-2\" (click)=\"colorInput1.click()\">\r\n      </div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.backgroundColor\" class=\"input-text d-none\" #colorInput1 />\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 && iconData.backgroundType === 'Gradient'\">\r\n      <label class=\"input-label-1 mb-3 w-100\">Icon Secondary Background</label>\r\n      <div [style.backgroundColor]=\"iconData?.secondaryColor\" class=\"custom-input\" (click)=\"colorInput2.click()\"></div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.secondaryColor\" class=\"input-text d-none\" #colorInput2 />\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}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.selectedTab{background:#39393934;font-weight:700}.clr-red{color:red;font-size:12px;margin-bottom:10px}.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]
@@ -17680,8 +17680,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
+class AnalyticsService {
+    constructor(http, platformId, document, storageService, API_URL, storage, router) {
+        this.http = http;
+        this.platformId = platformId;
+        this.document = document;
+        this.storageService = storageService;
+        this.API_URL = API_URL;
+        this.storage = storage;
+        this.router = router;
+        this.eventQueue = [];
+        this.BATCH_SIZE = 10;
+        this.FLUSH_INTERVAL = 5000; // 5 seconds
+        this.startAutoFlush();
+        this.listenToUnload();
+    }
+    trackUser(event) {
+        const user = this.storageService.getUser();
+        const requestFrom = this.storage.getItem('REQUEST_FROM');
+        if (user === null || requestFrom === 'ECOMMERCE') {
+            return;
+        }
+        const page = this.router.url.split('?')[0];
+        this.eventQueue.push({
+            businessId: this.storage.getItem('bId') || '',
+            businessName: this.storage.getItem('bName') || '',
+            userId: user?.userId,
+            createdTimeStamp: new Date().toISOString(),
+            page: page,
+            metadata: event,
+        });
+        if (this.eventQueue.length >= this.BATCH_SIZE) {
+            this.flush();
+        }
+    }
+    startAutoFlush() {
+        interval(this.FLUSH_INTERVAL).subscribe(() => {
+            if (this.eventQueue.length > 0) {
+                this.flush();
+            }
+        });
+    }
+    flush() {
+        const eventsToSend = [...this.eventQueue];
+        this.eventQueue = [];
+        this.http.post(this.API_URL + 'ecommerce/analytics/batch', eventsToSend)
+            .subscribe({ error: () => { } });
+    }
+    listenToUnload() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.document.addEventListener('visibilitychange', () => {
+                if (this.document.visibilityState === 'hidden' && this.eventQueue.length > 0) {
+                    navigator.sendBeacon(this.API_URL + 'ecommerce/analytics/batch', JSON.stringify(this.eventQueue));
+                }
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnalyticsService, deps: [{ token: i1.HttpClient }, { token: PLATFORM_ID }, { token: DOCUMENT }, { token: StorageServiceService }, { token: API_URL }, { token: LOCAL_STORAGE }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnalyticsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnalyticsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: StorageServiceService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [API_URL]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCAL_STORAGE]
+                }] }, { type: i2$2.Router }] });
 class ProductDescComponent extends BaseSection {
-    constructor(platformId, _eventService, router, activatedRoute, restService, cartService, storageService, messageService, metaTagService, titleService, bottomSheet, renderer, matDialog) {
+    constructor(platformId, _eventService, router, activatedRoute, restService, cartService, storageService, messageService, metaTagService, titleService, bottomSheet, renderer, matDialog, analyticsService) {
         super();
         this.platformId = platformId;
         this._eventService = _eventService;
@@ -17696,6 +17772,7 @@ class ProductDescComponent extends BaseSection {
         this.bottomSheet = bottomSheet;
         this.renderer = renderer;
         this.matDialog = matDialog;
+        this.analyticsService = analyticsService;
         this.isLoading = false;
         this.featureProductData = null;
         this.recentViewedData = null;
@@ -17807,6 +17884,10 @@ class ProductDescComponent extends BaseSection {
             const productId = qParam["id"];
             if (productId) {
                 this.isLoading = true;
+                // Tracking Analytics
+                this.analyticsService.trackUser({
+                    'PRODUCT': productId
+                });
                 this.isItemAsFavorite = false;
                 this.restService.getProductDetails(productId).subscribe((response) => {
                     this.isLoading = false;
@@ -18525,7 +18606,7 @@ class ProductDescComponent extends BaseSection {
     get stylesLayout() {
         return { ...this.styles?.layout };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: i1$2.Meta }, { token: i1$2.Title }, { token: i8$3.MatBottomSheet }, { token: i0.Renderer2 }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: i1$2.Meta }, { token: i1$2.Title }, { token: i8$3.MatBottomSheet }, { token: i0.Renderer2 }, { token: i1$1.MatDialog }, { token: AnalyticsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }, { propertyName: "aboveHeight", first: true, predicate: ["aboveHeight"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "imageSection", first: true, predicate: ["imageSection"], descendants: true }, { propertyName: "detailSection", first: true, predicate: ["detailSection"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div> -->\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\r\n      [simpoLayout]=\"styles?.layout\" #container>\r\n      <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n          (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div>\r\n      <div class=\"row h-100 w-100 h-100\" #aboveHeight class=\"above-height\"\r\n        [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n        <div class=\"col-lg-7 col-sm-12 h-100 height\" #imageSection>\r\n          <div class=\"prod-img-block\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-4 col-sm-12 h-100\" #detailSection>\r\n          <ng-container *ngIf=\"isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n          <ng-container *ngIf=\"toShowInJewellery\">\r\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.videoCallEnabled\">\r\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\r\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n\r\n          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n          </ng-container>\r\n\r\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n            [innerHTML]=\"responseData.brief\"></div> -->\r\n          <div class=\"product-sku\">\r\n            <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\r\n            <!-- <div\r\n              *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n              Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n              </a></div> -->\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\r\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n          <!-- <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n      </div>\r\n      <ng-container>\r\n        <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\r\n      </ng-container>\r\n    </section>\r\n    <!-- <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"recentViewItemList?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n    </ng-container> -->\r\n    <!-- <ng-container>\r\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n    </ng-container> -->\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  </section>\r\n</ng-container>\r\n\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\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n  <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n    [id]=\"data?.id+getButtonId(0)\">Out of\r\n    Stock</button>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\r\n    [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n    <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n  </div>\r\n  <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\r\n    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n    <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n  <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\r\n    <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n      [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n      [id]=\"data?.id+getButtonId(0)\"\r\n      (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n      Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n            (click)=\"addProductReview()\"\r\n            [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\r\n            review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n  <div class=\"d-flex\">\r\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\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 #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n      simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n      [id]=\"data?.id+getButtonId(0)\">Out of\r\n      Stock</button>\r\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\r\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n        [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n      <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n    </div>\r\n    <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\r\n      [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\r\n      [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\r\n      (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\r\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getButtonId(0)\"\r\n        (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\r\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\r\n          message</mat-icon>Notify Me</button>\r\n    </div>\r\n    <div class=\"favourite border-solid\" *ngIf=\"IsEcommerce\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n    <div class=\"share-product\">\r\n      <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n        [style.borderColor]=\"data?.styles?.background?.accentColor\">share</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\r\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n      <div class=\"mb-15\">\r\n        <div class=\"varient-key\">{{varient.key}}</div>\r\n        <div class=\"d-flex\" style=\"gap: 5px;\">\r\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\r\n    <ng-container>\r\n      <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n        <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\r\n          [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n          <div class=\"variant-head\">{{item.key | titlecase}}</div>\r\n          <div class=\"variant-value text-start fw-600\">\r\n            {{item.value |\r\n            titlecase}}</div>\r\n        </div>\r\n        <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\r\n          <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\r\n            data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n  <div class=\"d-flex flex-column\" style=\"margin-top: 15px;\">\r\n    <div class=\"rating d-flex justify-content-center gap-2 mb-3\"\r\n      *ngIf=\"responseData?.averageRating  && responseData?.totalReviewCount\"\r\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"rating-no my-1\">{{(responseData?.averageRating | number:'1.1-2')}}\u2B50</div>\r\n      <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' :\r\n        getRatings(responseData?.totalReviewCount) + \" \" + \"ratings\"}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.sellingPrice}\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && responseData.price.sellingPrice > 0\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice}}</div>\r\n      <div class=\"price\"\r\n        [ngClass]=\"{'strike-through': getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2}\"\r\n        *ngIf=\"getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2\">\r\n        <span [innerHTML]='currency'></span>\r\n        {{responseData?.price?.value | number:'1.0-0'}}\r\n      </div>\r\n    </div>\r\n    <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\r\n  </div>\r\n  <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n  <ng-container *ngIf=\"toShowInJewellery\">\r\n    <div class=\"discount\">\r\n      <p>Flat 30% off on Diamond Prices</p>\r\n      <p class=\"offer\">Offer Expires in 4 days</p>\r\n    </div>\r\n    <div class=\"ring-size-video\">\r\n      <p class=\"text\">Not sure about the ring size?</p>\r\n      <p class=\"learn-how\" data-toggle=\"modal\" data-target=\"#exampleModal\">Learn How\r\n        <mat-icon>play_circle_outline</mat-icon>\r\n      </p>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n  <div class=\"row prod-desc mt-2\">\r\n    <div>\r\n      <div class=\"product-header d-flex align-items-center justify-content-between\">\r\n        <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\r\n        <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\r\n          *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\r\n          data-bs-target=\"#offcanvasRightPriceBreakup\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n          [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\r\n          <mat-icon>add</mat-icon> PRICE BREAKUP\r\n        </div>\r\n      </div>\r\n      <div class=\"description\">\r\n        <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\" [style.background]=\"data?.styles?.background?.color\"></div>\r\n      </div>\r\n      <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\r\n        <div class=\"jewellery-table-container\">\r\n          <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n            <div class=\"jewel-container mt-2\">\r\n              <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\r\n                {{ele?.materialName | titlecase}}\r\n              </div>\r\n              <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\r\n                <div class=\"col-6 metal-purity\">\r\n                  <div class=\"row-header\">\r\n                    Net Weight/{{ele?.unit | titlecase}}\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.primaryMaterialWeight + \" \" + (ele?.unit | titlecase)}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-6 metal-purity\">\r\n                  <div class=\"row-header\">\r\n                    Purity\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.purity |\r\n                    titlecase}}\r\n                  </div>\r\n                </div>\r\n                <!-- <div class=\"col-4\">\r\n                  <div class=\"row-header\">\r\n                    Price/Gram\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\r\n                    number:'1.2-2'}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-4\">\r\n                  <div class=\"row-header\">\r\n                    Value\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    \u20B9{{ele.materialPrice | number:'1.2-2'}}\r\n                  </div>\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <!-- <div class=\"jewel-container mt-2\">\r\n            <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\r\n              Making Charges\r\n            </div>\r\n            <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Net Weight\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  {{responseData?.baseWeight}} </div>\r\n              </div>\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Making Charge %\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  {{responseData?.makingChargePercentage}}\r\n                </div>\r\n              </div>\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Value\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div> -->\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n\r\n    <!-- <div class=\"tab-group\">\r\n          <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\r\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n\r\n        <!-- <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon> -->\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <img [src]=\"currentImg\" class=\"img zoom\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\" class=\"zoom\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n          [simpoCorner]=\"styles?.corners\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list w-100\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img zoom\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\r\n    <div class=\"row h-100 mt-0 w-100\">\r\n      <ng-container *ngIf=\"itemImages?.length == 0\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\r\n          [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\r\n      </ng-container>\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img col-6 h-75 p-1 style-2-img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\r\n          [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\r\n          [class.h-100]=\"itemImages?.length == 1\">\r\n      </ng-container>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px',\r\n      'position': 'relative',\r\n      'right': '5px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n  <div class=\"row w-100\">\r\n    <ng-container *ngFor=\"let brand of brandPromises\">\r\n      <div class=\"col-4 d-flex flex-column align-items-center g-2\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 br-50\">\r\n        <div class=\"brand-text w-100 text-center py-2\">\r\n          {{brand?.title | titlecase}}\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #videoCallSchedule>\r\n  <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\r\n  <ng-container>\r\n    <div class=\"row w-100 video-container\">\r\n      <div class=\"col-4 video-call-img\">\r\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/355007c175362077266611289-229221023_small.gif\"\r\n          alt=\"\" class=\"w-100 h-100 \">\r\n      </div>\r\n      <div class=\"col-8 align-content-center\">\r\n        <div class=\"video-head-text\">\r\n          Live Video Call\r\n        </div>\r\n        <div class=\"sub-text\">\r\n          Join a live video call with our consultants to see your favourite designs up close!\r\n        </div>\r\n        <button class=\"sch-btn text-center cursor-pointer\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n          [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\r\n          [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n          Schedule a Video Call\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #DeliverySection>\r\n  <div class=\"delivery-container\">\r\n    <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\r\n\r\n    <!-- Location Section -->\r\n    <div class=\"location-section\">\r\n      <div class=\"location-container d-flex align-items-center justify-content-between\"\r\n        [style.borderColor]=\"styles?.background?.accentColor\">\r\n        <div class=\"d-flex align-items-center w-90\">\r\n          <div class=\"d-flex mx-1\"><mat-icon\r\n              class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n          </div>\r\n          <input type=\"number\" class=\"postal-code-input\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\">\r\n        </div>\r\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">{{pincode ? 'Change' : 'Locate me'}}</button>\r\n      </div>\r\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\r\n    </div>\r\n    <ng-container>\r\n      <!-- Free Delivery Section -->\r\n      <div class=\"delivery-section\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"delivery-icon\">\uD83C\uDF81</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\r\n            Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n            Order will\r\n            Deliver by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }} with a Delivery Charge of\r\n            \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Nearest Store Section -->\r\n      <ng-container\r\n        *ngIf=\"storeDetails?.nearbyStore?.name && storeDetails?.nearbyStore?.name?.length > 0;else emptyStore\">\r\n        <div class=\"store-section\">\r\n          <div class=\"d-flex align-items-center store-item\">\r\n            <span class=\"store-icon\">\uD83C\uDFEA</span>\r\n            <div class=\"store-details\">\r\n              <div class=\"store-text\">\r\n                <span class=\"store-label\">Nearest Store - </span>\r\n                <span class=\"store-name\">{{ storeDetails?.nearbyStore?.name | titlecase}}</span>\r\n                <!-- <span class=\"store-distance\"> (4km)</span> -->\r\n              </div>\r\n              <!-- <div class=\"availability-section\">\r\n              <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\r\n            </div> -->\r\n              <!-- <div class=\"other-stores-text\">\r\n              Also Available in <span class=\"other-stores-link\">18 other stores</span>\r\n            </div> -->\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex justify-content-center w-100\">\r\n            <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.storeId)\">FIND IN\r\n              STORE</button>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #emptyStore>\r\n        <div class=\"delivery-section\">\r\n          <div class=\"d-flex align-items-center\">\r\n            <span class=\"delivery-icon\">\uD83C\uDFEA</span>\r\n            <span class=\"delivery-text\">No Stores are available</span>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <!-- Try At Home Section -->\r\n      <div class=\"try-home-section\">\r\n        <div class=\"d-flex align-items-start try-home-item\">\r\n          <span class=\"home-icon\">\uD83C\uDFE0</span>\r\n          <div class=\"try-home-details\">\r\n            <div class=\"try-home-header\">\r\n              <span class=\"try-home-text\">Try At Home</span>\r\n              <span class=\"free-text\"> (It's Free)</span>\r\n            </div>\r\n            <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\r\n            <!-- <div class=\"appointment-text\">\r\n              Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex-align-items-center justify-content-center w-100\">\r\n          <button class=\"book-appointment-btn\" (click)=\"addToTrialCart()\" *ngIf=\"!isItemAddedAsTrial\">Try at\r\n            HOME</button>\r\n          <button class=\"book-appointment-btn\" *ngIf=\"isItemAddedAsTrial\">HOME APPOINTMENT BOOKED</button>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\r\n  aria-labelledby=\"offcanvasRightLabel\">\r\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n    <mat-icon data-bs-dismiss=\"offcanvas\"\r\n      class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n  </div>\r\n  <div class=\"varient-price px-3 pb-2\">\r\n    <div class=\"price-text\">Price</div>\r\n    <div class=\"d-flex  g-3 align-items-center\">\r\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.discountedPrice}}</div>\r\n      <div class=\"price\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\r\n        [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n    </div>\r\n  </div>\r\n  <div class=\"varient-container h-100 p-3\">\r\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n      <div class=\"varient-data\">\r\n        <div class=\"varient-key\">{{varient.key}}</div>\r\n        <div class=\"d-flex\" style=\"gap: 5px;\">\r\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\r\n    [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\r\n    Customization</div>\r\n</div>\r\n\r\n<ng-template #dialogBox>\r\n  <div class=\"modal-content\">\r\n    <div class=\"modal-header d-flex align-item-center\">\r\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n        <mat-icon (click)=\"matCloseDialog()\"\r\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-body h-100\">\r\n      <div class=\"row h-100 w-100 video-call-container\">\r\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n          <img\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n        </div>\r\n        <div class=\"col-6 position-relative h-100 call-details\">\r\n          <!-- Name Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n              (input)=\"onInputChange('username')\">\r\n          </div>\r\n\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n              (input)=\"onInputChange('email')\">\r\n          </div>\r\n\r\n          <!-- Mobile Number Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n            <div class=\"sub-text-call\">IN +91</div>\r\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n              (input)=\"onInputChange('mobileNumber')\">\r\n          </div>\r\n\r\n\r\n          <!-- Pincode Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n            </div>\r\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n              (input)=\"onInputChange('pincode')\">\r\n          </div>\r\n          <div class=\"language my-3\">\r\n            <div class=\"mini-text mb-2\">Language Preference</div>\r\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n              <ng-container *ngFor=\"let lang of languages\">\r\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectedLang = lang\"\r\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n                  {{lang}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n            <div class=\"input-field my-3\">\r\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n            </div>\r\n          </ng-container>\r\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" [disabled]=\"isSubmitting\">\r\n            <ng-container *ngIf=\"isSubmitting\">\r\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n              </div>\r\n              SCHEDULING...\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n              <div (click)=\"scheduleVideoCall()\" class=\"d-flex align-items-center\">\r\n                <mat-icon>video_call</mat-icon>&nbsp;\r\n                SCHEDULE A VIDEO CALL\r\n              </div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"scheduled\">\r\n              <mat-icon>check_circle</mat-icon>&nbsp;\r\n              SCHEDULED SUCCESSFULLY\r\n            </ng-container>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\r\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n    <mat-icon data-bs-dismiss=\"offcanvas\"\r\n      class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n  </div>\r\n  <div class=\"varient-price p-10-20\">\r\n    <div class=\"price-break-header\">{{responseData?.name}}</div>\r\n  </div>\r\n  <div class=\"price-breakup h-100 w-100\">\r\n    <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n      <div class=\"price-container mb-3 p-10-20\">\r\n        <div class=\"price-container-header\">\r\n          {{ ele.materialType + \" BREAKUP\" }}\r\n        </div>\r\n        <div class=\"row w-100 header-row\">\r\n          <div class=\"col-3 text-center\">COMPONENT</div>\r\n          <div class=\"col-3 text-center\">RATE</div>\r\n          <div class=\"col-3 text-center\">WEIGHT</div>\r\n          <div class=\"col-3 text-center\">FINAL VALUE</div>\r\n        </div>\r\n        <div class=\"row w-100 value-row\">\r\n          <div class=\"col-3 text-center\">{{ ele.materialPurity | titlecase }}</div>\r\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) |\r\n            number:'1.2-2' }}</div>\r\n          <div class=\"col-3 text-center\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\r\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Making Charges</div>\r\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\r\n        </div>\r\n      </div>\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Tax Amount</div>\r\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\r\n        </div>\r\n      </div>\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Total Amount</div>\r\n        <div class=\"col-6 text-end total\">\r\n          \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\r\n          number:'1.2-2'}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<ng-template #ReviewsSection>\r\n  <div class=\"w-100 row review-section mt-3\" [style.background]=\"getRGBA(styles?.background?.accentColor, 10)\"\r\n    *ngIf=\"reviewsData && reviewsData.length > 0\">\r\n    <div class=\"col-md-3 col-sm-12\">\r\n      <div class=\"cust-header\">Customer Reviews</div>\r\n      <div class=\"d-flex gap-3 mb-1\">\r\n        <ng-container *ngIf=\"responseData?.averageRating\">\r\n          <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n        </ng-container>\r\n        <span class=\"rating-text\">{{responseData?.averageRating | number:'1.1-2'}} out of 5</span>\r\n      </div>\r\n      <div class=\"d-flex mb-3\">{{responseData?.totalReviewCount + \" ratings\"}}</div>\r\n      <div class=\"ratings-percentage\">\r\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\r\n          <div class=\"percentage d-flex align-items-center gap-2 mb-2\">\r\n            <span>{{rating + \" star\"}}</span>\r\n            <div class=\"w-50 bar\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n              <div [style.width.%]=\"getPercentage(rating)\"\r\n                [style.backgroundColor]=\"data?.styles?.background?.accentColor\" class=\"h-100\"></div>\r\n            </div>\r\n            <span class=\"percentage-text\">{{getPercentage(rating) + \"%\"}}</span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-md-9 col-sm-12\">\r\n      <div class=\"review-header\">Latest Reviews</div>\r\n      <div class=\"review-body d-flex flex-column gap-3\">\r\n        <ng-container *ngFor=\"let review of reviewsData\">\r\n          <div class=\"review-container w-75\">\r\n            <div class=\"review-name gap-2 my-2 d-flex align-items-center\">\r\n              <img src=\"https://m.media-amazon.com/images/S/amazon-avatars-global/default.png\" alt=\"\"\r\n                class=\"width-30 h-25 mr-2\">\r\n              <span>{{review?.userName ?? \"-\"}}</span>\r\n            </div>\r\n            <ng-container *ngIf=\"review?.rating\">\r\n              <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n            </ng-container>\r\n            <div class=\"review-desc\">\r\n              {{review?.review ?? \"-\"}}\r\n            </div>\r\n            <div class=\"review-img\">\r\n              <img [src]=\"img.imgUrl\" alt=\"\" *ngFor=\"let img of review?.reviewImages ?? []\"\r\n                (click)=\"showDetailReview(review)\">\r\n              <button style=\"display: none;\" data-toggle=\"modal\" data-target=\"#reviewModal\"\r\n                id=\"openReviewDetail\"></button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"w-75 see-more py-3\" (click)=\"loadMoreReviews()\" *ngIf=\"(reviewsData?.length ?? 0) > 3\"\r\n          [style.color]=\"data?.styles?.background?.accentColor\">\r\n          See more reviews <span>></span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\r\n  aria-hidden=\"true\">\r\n  <div class=\"modal-dialog modal-dialog-centered video-modal\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-body\" style=\"height: 100%;\">\r\n        <video controls muted playsinline style=\"width: 100%; height: 100%;\">\r\n          <source\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\r\n            type=\"video/mp4\">\r\n          Your browser does not support the video tag.\r\n        </video>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\r\n  aria-hidden=\"true\">\r\n  <div class=\"modal-dialog review-modal\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h1 class=\"modal-title fs-5\"></h1>\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        <div class=\"detail-review-container\">\r\n          <div class=\"image-section\">\r\n            <div class=\"product-image\">\r\n              <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\r\n                *ngIf=\"currentImageIndex > 0\">\u25BC</div>\r\n              <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\r\n              <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\r\n                *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\r\n              <!-- <div class=\"earbuds-container\">\r\n                <div class=\"charging-case\"></div>\r\n                <div class=\"earbud left\"></div>\r\n                <div class=\"earbud right\"></div>\r\n              </div> -->\r\n            </div>\r\n            <!-- <div class=\"navigation-arrows\">\r\n            </div> -->\r\n          </div>\r\n\r\n          <div class=\"review-section\">\r\n            <div class=\"reviewer-header\">\r\n              <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\r\n              <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\r\n            </div>\r\n\r\n            <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\r\n              <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n            </div>\r\n\r\n            <div class=\"review-date\">\r\n              Reviewed in India on 24 July 2025\r\n            </div>\r\n\r\n            <div class=\"review-text\">\r\n              {{selectedReview?.review ?? \"-\"}}\r\n            </div>\r\n\r\n            <div class=\"images-section\">\r\n              <h3>Images in this review</h3>\r\n              <div class=\"review-images\">\r\n                <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\r\n                  *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\r\n                  <img [src]=\"img.imgUrl\" alt=\"\">\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".product-desc{display:flex}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.strike-through{text-decoration:line-through;color:#d3d3d3}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon{border:1px solid;border-radius:8px;padding:5px;height:43px;width:40px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:1% 3%;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:100%;height:500px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.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}.fc{font-size:17px;font-weight:700}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;margin-top:.5rem}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.product-detail{margin-top:0;height:100vh}.above-height{height:90vh;max-height:100vh;overflow-y:scroll}.height{height:100vh;overflow-y:auto}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.above-height{width:100%;display:flex;margin-top:25px}.product-detail{padding:2%}.product-heading{font-size:20px;font-weight:600;margin-top:5px}.prod-img-block{height:100%;display:flex;flex-direction:column-reverse;justify-content:start;gap:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc{font-size:13px}.brief-desc{font-size:16px;margin-top:unset!important}.total-container{padding-top:10px!important;padding-bottom:4rem!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail{margin-top:20px;overflow-x:hidden}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.favourite:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.above-height{padding:1%;height:unset!important}.product-heading{font-size:23px;font-weight:600}.discount-price{font-size:1.7rem!important}.header-text{font-size:20px!important}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}.favourite .mat-icon{min-height:40px;min-width:40px;font-size:25px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer}.favourite:hover,.share-product:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:100vh;position:relative;display:block!important;overflow:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}@media (min-width: 1400px){.container{max-width:unset;width:95%;height:100vh;overflow-y:auto}}.width-max{width:max-content}.width-34{width:33.3%!important}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.br-50{border-radius:50%}.w-15{width:22%!important}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:15px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:500;font-size:12px!important;padding:0!important;box-shadow:none!important;width:20%!important}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff;border:none;padding:8px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease}.book-appointment-btn:hover{background:linear-gradient(135deg,#7c3aed,#9333ea);transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}@media (max-width: 480px){.container{display:flex;align-items:center;flex-direction:column}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.border-unset{border:unset!important}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.me-2{margin-right:.5rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.width-30{width:30px!important}.review-header{font-size:20px;font-weight:600}.review-desc{font-weight:500}.see-more{font-weight:600;cursor:pointer;border-top:1px solid #d1d1d1}.see-more span{font-size:12px}.cust-header{font-size:24px}.bar{border:1px solid;height:20px;border-radius:5px;overflow:hidden}.bar div{border-radius:2px}.parent-container{height:100%;width:100%;display:flex}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}\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.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: 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: NgxImageZoomModule }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i7$3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, decorators: [{
@@ -18560,7 +18641,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: RestService }, { type: CartService }, { type: StorageServiceService }, { type: i6$1.MessageService }, { type: i1$2.Meta }, { type: i1$2.Title }, { type: i8$3.MatBottomSheet }, { type: i0.Renderer2 }, { type: i1$1.MatDialog }], propDecorators: { reviewComponent: [{
+                }] }, { type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: RestService }, { type: CartService }, { type: StorageServiceService }, { type: i6$1.MessageService }, { type: i1$2.Meta }, { type: i1$2.Title }, { type: i8$3.MatBottomSheet }, { type: i0.Renderer2 }, { type: i1$1.MatDialog }, { type: AnalyticsService }], propDecorators: { reviewComponent: [{
                 type: ViewChild,
                 args: [CustomerReviewComponent, { static: false }]
             }], aboveHeight: [{
@@ -18634,7 +18715,7 @@ class ProductListComponent extends BaseSection {
     onWindowScroll(event) {
         this.scrollingValue = window.pageYOffset || document.documentElement.scrollTop;
     }
-    constructor(platformId, _eventService, restService, router, activatedRoute, storageService, matBottomSheet, matDialog, cartService, messageService, renderer) {
+    constructor(platformId, _eventService, restService, router, activatedRoute, storageService, matBottomSheet, matDialog, cartService, messageService, renderer, analyticsService) {
         super();
         this.platformId = platformId;
         this._eventService = _eventService;
@@ -18647,6 +18728,7 @@ class ProductListComponent extends BaseSection {
         this.cartService = cartService;
         this.messageService = messageService;
         this.renderer = renderer;
+        this.analyticsService = analyticsService;
         this.responseData = [];
         this.isLoading = false;
         this.apiLoading = false;
@@ -18858,6 +18940,7 @@ class ProductListComponent extends BaseSection {
         this.pageNo = 1;
         this.isAllListLoaded = false;
         this.responseData = [];
+        // this.fetchAnalytics();
         this.restService.getFilteredProduct(this.collections.filter(x => x.status).map(x => x.id), this.categories.filter(x => x.status).map(x => x.id), this.searchText, this.pricingMin, this.pricingMax, this.sortBy ?? "", this.pageNo - 1, this.size).subscribe((response) => {
             this.responseData = response.data ?? [];
             this.totalCount = response.count ?? 0;
@@ -18954,8 +19037,8 @@ class ProductListComponent extends BaseSection {
             this.isLoading = response;
         });
         this.IsEcommerce = localStorage.getItem("websiteType") != 'STATIC' ? true : false;
-        this.getAllCategories();
-        this.getAllCollections();
+        // this.getAllCategories();
+        // this.getAllCollections();
         this.minProductPrice = this.pricingMin = this.data?.styles.minPrice ?? 0;
         this.maxProductPrice = this.pricingMax = this.data?.styles.maxPrice ?? 30000;
         this.searchText = this.activatedRoute.snapshot.queryParams["searchTxt"];
@@ -18965,10 +19048,55 @@ class ProductListComponent extends BaseSection {
             this.sortBy = qParam["sorting"] ?? "";
             this.pricingMin = isNaN(Number(qParam["minPrice"])) ? 0 : Number(qParam["minPrice"]);
             this.pricingMax = isNaN(Number(qParam["maxPrice"])) ? 0 : Number(qParam["maxPrice"]);
-            this.filterByCategoryCollectionParam(qParam["category"], qParam["collections"]);
+            // this.filterByCategoryCollectionParam(qParam["category"], qParam["collections"]);
         });
         this.button = this.data?.action?.buttons?.[0];
-        this.filterItemList();
+        this.getCategoriesAndCollection();
+        // this.filterItemList();
+    }
+    fetchAnalytics() {
+        let analyticsEvent = {};
+        if (this.searchText) {
+            analyticsEvent['SEARCH'] = this.searchText;
+        }
+        if (this.pricingMin) {
+            analyticsEvent['MIN_PRICE'] = this.pricingMin;
+        }
+        if (this.pricingMax) {
+            analyticsEvent['MAX_PRICE'] = this.pricingMax;
+        }
+        if (this.sortBy) {
+            analyticsEvent['SORT_BY'] = this.sortBy;
+        }
+        analyticsEvent['CATEGORIES'] = this.categories.filter(x => x.status).map(x => x.id);
+        analyticsEvent['COLLECTIONS'] = this.collections.filter(x => x.status).map(x => x.id);
+        this.analyticsService.trackUser(analyticsEvent);
+    }
+    getCategoriesAndCollection() {
+        forkJoin([
+            this.restService.getAllCollections().pipe(catchError(err => {
+                console.error("Collections failed", err);
+                return of([]); // fallback empty array
+            })),
+            this.restService.getAllCategories().pipe(catchError(err => {
+                console.error("Categories failed", err);
+                return of([]); // fallback empty array
+            }))
+        ]).subscribe({
+            next: (res) => {
+                this.categories = res[1].filter((category) => category.featuredCollection || true).map((category) => { return { option: category.categoryName, id: category.categoryId, imgUrl: category.imgUrl?.[0], status: false }; });
+                this.collections = res[0].filter((collection) => collection.featuredCategory || true).map((collection) => { return { option: collection.collectionName, id: collection.collectionId, status: false }; });
+                console.log("fork join respinse ", res);
+                console.log("category is ", this.categories);
+                console.log("collection is ", this.collections);
+                const qParamCollections = this.activatedRoute.snapshot.queryParams["collections"];
+                const qParamCategory = this.activatedRoute.snapshot.queryParams["category"];
+                this.filterByCategoryCollectionParam(qParamCategory, qParamCollections);
+            },
+            error: (res) => {
+                this.filterItemList();
+            }
+        });
     }
     get selectedCategoryCollectionChips() {
         const chips = [];
@@ -19530,7 +19658,7 @@ class ProductListComponent extends BaseSection {
         const brightness = (r * 299 + g * 587 + b * 114) / 1000;
         return brightness > threshold ? '#000000' : '#ffffff';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: StorageServiceService }, { token: i8$3.MatBottomSheet }, { token: i1$1.MatDialog }, { token: CartService }, { token: i6$1.MessageService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: StorageServiceService }, { token: i8$3.MatBottomSheet }, { token: i1$1.MatDialog }, { token: CartService }, { token: i6$1.MessageService }, { token: i0.Renderer2 }, { token: AnalyticsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)", "window:scroll": "onWindowScroll($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "listScrollContainer", first: true, predicate: ["listScrollContainer"], descendants: true }, { propertyName: "filterScroll", first: true, predicate: ["filterScroll"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n  <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n    [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div> -->\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\r\n    [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\r\n    [spacingHorizontal]=\"stylesLayout\">\r\n\r\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\"\r\n        [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\r\n    </div> -->\r\n\r\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\"\r\n        style=\"width: 20%; padding:1rem 0rem;border-bottom: 1px solid #D8D8D8;\">\r\n        <div class=\"filter body-large\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n          CLEAR ALL\r\n        </div>\r\n      </div>\r\n      <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\r\n        style=\"width: 77.5%; margin-right: 1%;\">\r\n        <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\">\r\n          <ng-container *ngFor=\"let filter of filteredChips\">\r\n            <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n              <span>{{filter.name}}</span>\r\n              <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n                <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n              </span>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\r\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\r\n          </select>\r\n        </div> -->\r\n        <div class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\r\n          <span class=\"sort-label\">Sort By:</span>\r\n          <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\r\n          <span class=\"toggle-icon\" [class.open]=\"isOpen\">&#9662;</span> <!-- Down arrow, rotates open -->\r\n\r\n          <div class=\"options\" *ngIf=\"isOpen\">\r\n            <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\r\n              (click)=\"selectOption(filter, $event)\">\r\n              {{ filter.name }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"isMobile\" class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\">\r\n      <ng-container *ngFor=\"let filter of filteredChips\">\r\n        <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n            <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n          </span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"main-product-section\">\r\n      <div class=\"filter-side\">\r\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n      </div>\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n        <ng-container *ngIf=\"!apiLoading\">\r\n          <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\"\r\n            (scroll)=\"handleProductListScroll()\" #listScrollContainer>\r\n            <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\r\n              [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\r\n              <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n                <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\r\n                  [index]=\"i\"></simpo-small-product-listing>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n          <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\r\n            <div>\r\n              <div class=\"cart-image\">\r\n                <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\r\n                  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n                  alt=\"\">\r\n              </div>\r\n              <div class=\"cart-text\">\r\n                <div class=\"heading-medium d-flex justify-content-center\">\r\n                  Product list is empty\r\n                </div>\r\n                <div class=\"description d-flex justify-content-center mt-4\">\r\n                  Looks like no item is present with filter. Go ahead & explore top categories.\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </section>\r\n        </ng-container>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\">\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n          <mat-icon>sort</mat-icon>\r\n          <span>Sort by</span>\r\n        </div>\r\n        <div class=\"divider\"></div>\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n          <mat-icon>filter_list</mat-icon>\r\n          <span>Filter</span>\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\"\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  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\r\n  [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <div class=\"fav-icon-wrapper\">\r\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border\r\n    </mat-icon>\r\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite\r\n    </mat-icon>\r\n    <span class=\"fav-tooltip\">\r\n      {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #Tags let-product=\"data\">\r\n  <div class=\"tag-icon\" *ngIf=\"product.tags\">{{product.tags}}</div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by Categories</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\r\n        (click)=\"applyFilter(category, 'FILTER')\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"category.status\" />\r\n        <div class=\"trim-text\">{{category.option | titlecase}}</div>\r\n      </div>\r\n      <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\"\r\n        [style.color]=\"styles?.background?.accentColor\">\r\n        <span class=\"toggle-text\">\r\n          {{ showAllCategories ? 'Show Less' : 'Show More' }}\r\n          <span class=\"dropdown-icon\">\r\n            <ng-container *ngIf=\"!showAllCategories\">\r\n              <mat-icon>expand_more</mat-icon>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"showAllCategories\">\r\n              <mat-icon>expand_less</mat-icon>\r\n            </ng-container>\r\n          </span>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by Collections</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\r\n        (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"collection.status\" />\r\n        <div class=\"trim-text\">{{collection.option | titlecase}}</div>\r\n      </div>\r\n      <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\"\r\n        [style.color]=\"styles?.background?.accentColor\">\r\n        <span class=\"toggle-text\">\r\n          {{ showAllCollections ? 'Show Less' : 'Show More' }}\r\n          <span class=\"dropdown-icon\">\r\n            <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\r\n            <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\r\n          </span>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Ratings</b></h6>\r\n      </div>\r\n      <div class=\"category-options\"\r\n        *ngFor=\"let size of ['5 Stars', '4 Stars above', '3 Stars above', '2 Stars above', '1 Star above']\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\" />\r\n        <div class=\"trim-text\">{{ size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by price</b></h6>\r\n      </div>\r\n      <label class=\"category-options\" *ngFor=\"let range of priceRanges;let i = index\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange(i)\" />\r\n        <div class=\"trim-text\">{{ range.label }}</div>\r\n      </label>\r\n    </div>\r\n\r\n\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Product Type</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop for</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of shopForData\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Material</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Metal</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Ring Style</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n  <section style=\"padding: 10px\">\r\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n      <span>Sort by</span>\r\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n    </div>\r\n    <mat-radio-group class=\"d-flex flex-column\" [(ngModel)]=\"sortBy\">\r\n      <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"selectOption(sortingType, $event)\"\r\n        [value]=\"sortingType.value\">{{sortingType.name}}</mat-radio-button>\r\n    </mat-radio-group>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\r\n  <ng-template #theme1style1>\r\n    <div class=\"product-card position-relative h-100\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\">\r\n      <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\r\n        class=\"default-image position-relative\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n          (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\r\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n      </div>\r\n\r\n      <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\"\r\n        class=\"default-image position-relative\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\r\n          (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\r\n        <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\r\n          <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\r\n          <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n      </div>\r\n\r\n      <div class=\"mt-2 w-100\">\r\n        <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n          <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n              [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n              [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n              [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n              (click)=\"selectVarient(product, varient)\">\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\r\n          <div class=\"price body-large text-left d-flex align-items-center g-10\">\r\n            <div class=\"fs-16\">\r\n              <span [innerHTML]='currency'></span>\r\n              {{product?.price?.sellingPrice | number:'1.2-2'}}\r\n            </div>\r\n\r\n            <div class=\"fs-16 text-start\">\r\n              <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\r\n                {{product?.price?.value | number:'1.2-2'}}\r\n              </span>\r\n            </div>\r\n            <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\r\n              <span [innerHTML]='currency'></span>\r\n              {{product.price.sellingPrice | number:'1.2-2'}}\r\n            </div> -->\r\n          </div>\r\n\r\n          <div class=\"product-name heading-large w-100 text-left trim-text\"\r\n            [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n\r\n          <div\r\n            *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\r\n            class=\"add-to-cart-btn\">\r\n            <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n            <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\"\r\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n          </div>\r\n          <div class=\"try-button-section\"\r\n            *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product?.itemInventory?.openingStock > 0\">\r\n            <div class=\"try-at-home\">\r\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n                HOME</button>\r\n            </div>\r\n            <div class=\"video-call-image\">\r\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n                alt=\"video\" (click)=\"openDialogBox(dialogBox, product.name)\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-container *ngIf=\"screenWidth < 475 && styles?.mobileColumn === 1; else theme1style1\">\r\n    <div class=\"row w-100\">\r\n      <div class=\"col-8 d-flex flex-column gap-3\">\r\n        <div class=\"text-left\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n        <div class=\"fs-16 text-start\">\r\n          <span [innerHTML]='currency'></span>\r\n          {{product?.price?.sellingPrice | number:'1.2-2'}}\r\n        </div>\r\n        <div class=\"d-flex w-45\">\r\n          <div\r\n            *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\r\n            class=\"add-to-cart-btn w-100\">\r\n            <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n            <div class=\"quantity full-width-quantity br-8\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\"\r\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button disabled class=\"out-of-stock w-100\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n          </div>\r\n          <div class=\"try-button-section w-100\"\r\n            *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product?.itemInventory?.openingStock > 0\">\r\n            <div class=\"try-at-home\">\r\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n                HOME</button>\r\n            </div>\r\n            <div class=\"video-call-image\">\r\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n                alt=\"video\" (click)=\"openDialogBox(dialogBox, product.name)\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-4 h-100 position-relative\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"w-h-110\" [class.fade-out]=\"imageIndex == index\"\r\n          (click)=\"proceedToProductDesc(product.itemId)\">\r\n      </div>\r\n    </div>\r\n\r\n\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n\r\n\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #dialogBox>\r\n  <div class=\"modal-content\">\r\n    <div class=\"modal-header d-flex align-item-center\">\r\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n        <mat-icon (click)=\"matCloseDialog()\"\r\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-body h-100\">\r\n      <div class=\"row h-100 w-100 video-call-container\">\r\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n          <img\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n        </div>\r\n        <div class=\"col-6 position-relative h-100 call-details\">\r\n          <!-- Name Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n              (input)=\"onInputChange('username')\">\r\n          </div>\r\n\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n              (input)=\"onInputChange('email')\">\r\n          </div>\r\n\r\n          <!-- Mobile Number Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n            <div class=\"sub-text-call\">IN +91</div>\r\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n              (input)=\"onInputChange('mobileNumber')\">\r\n          </div>\r\n\r\n\r\n          <!-- Pincode Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n            </div>\r\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n              (input)=\"onInputChange('pincode')\">\r\n          </div>\r\n          <div class=\"language my-3\">\r\n            <div class=\"mini-text mb-2\">Language Preference</div>\r\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n              <ng-container *ngFor=\"let lang of languages\">\r\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectedLang = lang\"\r\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n                  {{lang}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n            <div class=\"input-field my-3\">\r\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n            </div>\r\n          </ng-container>\r\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" (click)=\"scheduleVideoCall()\"\r\n            [disabled]=\"isSubmitting\">\r\n            <ng-container *ngIf=\"isSubmitting\">\r\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n              </div>\r\n              SCHEDULING...\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n              <mat-icon>video_call</mat-icon>&nbsp;\r\n              SCHEDULE A VIDEO CALL\r\n            </ng-container>\r\n            <ng-container *ngIf=\"scheduled\">\r\n              <mat-icon>check_circle</mat-icon>&nbsp;\r\n              SCHEDULED SUCCESSFULLY\r\n            </ng-container>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input[type=checkbox]{accent-color:var(--color)}.total-container{position:relative}.discount-price{color:#d3d3d3;text-decoration:line-through}.custom-sort-dropdown{display:inline-flex;justify-content:flex-end;flex-grow:1;align-items:center;gap:6px;padding:6px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:600;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;position:relative;background-color:#fff;width:fit-content;min-width:fit-content;max-width:fit-content;outline:none;border:none}.sort-label{color:#555;white-space:nowrap}.selected-value{flex-shrink:0;white-space:nowrap;color:#000}.toggle-icon{font-size:20px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.toggle-icon.open{transform:rotate(180deg)}.options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 4px 6px #0000001a;max-height:180px;overflow-y:auto;z-index:100;font-weight:400;text-align:left!important}.option{padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}.option:hover{background-color:#fff;color:#000}.option.selected{background-color:#fff;color:#000;font-weight:600}.video-call-container{align-items:center}@media screen and (min-width: 1024px){.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .fav-icon{display:none}.product-card:hover .fav-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100!important}}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important}.fav-icon{position:absolute;z-index:100;padding:5px;right:10px;top:10px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.f-20{font-size:20px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.fav-tooltip{visibility:hidden;opacity:0;background:#222;color:#fff;font-size:10px;padding:4px 10px;border-radius:5px;position:absolute;top:40px;right:30px;white-space:nowrap;z-index:200;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 8px #00000026}.fav-icon-wrapper:hover .fav-tooltip{visibility:visible;opacity:1}.discounted-price{margin-top:-3px;font-size:14px!important}.filter-side{width:20%;position:sticky;top:0;overflow-y:auto;height:100%}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.price-ranges{display:flex;flex-direction:column;gap:8px;padding-left:8px;max-width:250px}.send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}.price-range-item{font-size:14px;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.price-range-item input[type=checkbox]{width:16px;height:16px}.categories-section{padding:.8rem 0rem;border-bottom:1px solid #D8D8D8}.categories-section:last-child{padding:.8rem 0rem;border-bottom:none}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.empty-cart{display:flex;align-items:center;justify-content:center;text-align:center;height:75vh}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px;font-weight:400!important}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:5px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;padding-bottom:50px;height:100vh;overflow-y:auto;flex:1 1 0;min-width:0}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;z-index:100;padding:5px;outline:none;border:none;border-radius:5px;height:7vh;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:78%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:14px!important;padding:5px 0!important}.try-button-section .video-call-image{width:20%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;position:absolute;bottom:0;left:10px;gap:5px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;justify-content:center;pointer-events:auto}.main-product-section{height:100vh;display:flex;position:relative}.filter-side{max-width:20%;width:100%;flex:0 0 20%}.modal-content{height:100%;border:none;border-radius:0!important}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9;border-radius:0!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.tag-icon{position:absolute!important;top:10px;left:10px;background:#e9bb18;text-transform:uppercase;padding:5px 10px;border:none;border-radius:8px;font-size:10px;color:#000}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;border-radius:10px;background-color:#fff}.product-parent .product .product-card{height:100%;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-parent .product .product-name{color:#222;font-size:14px!important;line-height:26px;margin-bottom:10px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.product-parent .product .product-img{border-radius:10px;width:100%;height:180px;z-index:1;border:.5px solid #eee}.product-parent .product .default-image img{width:100%;height:180px;border-radius:10px}.product-parent .product:hover{height:auto!important;transform:scale(1.05);box-shadow:0 16px 32px #b6b2b299;z-index:100!important}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:0!important}.product-name{font-size:14px}.product-parent{gap:10px}.product{padding:10px!important;margin-top:0!important;height:auto!important;transform:none!important;z-index:1!important;box-shadow:0 8px 16px #0003!important}.product .product-card{padding:0!important}.out-of-stock{font-size:12px!important}.discounted-price{font-size:14px!important}.add-to-cart-btn button{font-size:14px!important;padding:5px!important}.call-details{width:100%}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important;row-gap:0px}.onlyMobile mat-icon{pointer-events:auto!important;z-index:1000}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important;height:95%!important;padding-bottom:0!important}.main-product-section{height:auto;display:flex;position:relative;padding-bottom:7rem}}.fs-16{font-size:16px!important}.mobile-filter-chip{display:flex;align-items:center;gap:15px;border:1px solid;border-radius:30px;padding:5px 15px;height:35px}.mobile-filter-chip mat-icon{font-size:20px;display:flex;align-items:center;justify-content:center}.w-h-110{width:110px;height:110px}.w-45{width:45%}.br-8{border-radius:8px}.w-35{width:35%!important}\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: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 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: "ngmodule", type: MatSliderModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "ngmodule", type: SpeedDialModule }, { 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: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$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: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, decorators: [{
@@ -19562,7 +19690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: EventsService }, { type: RestService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: StorageServiceService }, { type: i8$3.MatBottomSheet }, { type: i1$1.MatDialog }, { type: CartService }, { type: i6$1.MessageService }, { type: i0.Renderer2 }], propDecorators: { responseData: [{
+                }] }, { type: EventsService }, { type: RestService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: StorageServiceService }, { type: i8$3.MatBottomSheet }, { type: i1$1.MatDialog }, { type: CartService }, { type: i6$1.MessageService }, { type: i0.Renderer2 }, { type: AnalyticsService }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{
                 type: Input
@@ -23974,14 +24102,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class OverlappingImageComponent extends BaseSection {
     constructor() {
         super();
-        this.getScreenSize();
+        this.heading = '';
+        this.subText = '';
     }
     ngOnInit() {
         this.styles = this.data?.styles;
         this.content = this.data?.content;
-    }
-    getScreenSize() {
-        this.screenWidth = window.innerWidth;
+        this.heading = this.content?.inputText[0].value ?? '';
+        this.subText = this.content?.inputText ? this.content.inputText[0 + 1].value : '';
     }
     get stylesLayout() {
         return { ...this.styles?.layout };
@@ -24003,7 +24131,7 @@ class OverlappingImageComponent extends BaseSection {
                 return ''; // fallback
         }
     }
-    get accentBackground() {
+    getAccentBackground() {
         const bg = this.styles?.background;
         if (!bg)
             return '';
@@ -24016,7 +24144,7 @@ class OverlappingImageComponent extends BaseSection {
             : `linear-gradient(${bg.accentColor}, ${bg.secondaryAccentColor})`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OverlappingImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OverlappingImageComponent, isStandalone: true, selector: "simpo-overlapping-image", inputs: { nextComponentColor: "nextComponentColor", data: "data", edit: "edit", index: "index", customClass: "customClass", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"screenWidth > 475\">\r\n    <section class=\"cta-section total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n        (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [simpoOverlay]=\"styles?.background\">\r\n        <div class=\"cta-wrapper\" #mainContainer [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n            [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\">\r\n            <div class=\"cta-content w-100 d-flex justify-content-center\">\r\n                <div class=\"d-flex flex-column gap-4 section-content position-relative\" [id]=\"data?.id\"\r\n                    [simpoCorner]=\"styles?.corners\"\r\n                    [ngStyle]=\"{'align-items' : styles?.layout?.align === 'center' ? 'center' : (styles?.layout?.align === 'left' ? 'start' : 'end'),'background':accentBackground }\"\r\n                    [ngClass]=\"{'left-image-position' : styles?.layout?.imagePosition === 'Left' , 'right-image-position' : styles?.layout?.imagePosition === 'Right'}\">\r\n                    <div class=\"cta-image\" [style.left]=\"styles?.layout?.imagePosition === 'Left' ? '-10%' : ''\"\r\n                        [style.right]=\"styles?.layout?.imagePosition === 'Left' ? '' : '-10%'\"\r\n                        [style.transform]=\"styles?.layout?.imagePosition === 'Left' ? 'rotate(-6deg)' : 'rotate(6deg)'\">\r\n                        <img [src]=\" content?.image?.url\" class=\"h-100\" alt=\"Building\" [appImageEditor]=\"edit || false\"\r\n                            [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n                    </div>\r\n                    <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"edit || false\"\r\n                        [type]=\"'heading'\"></simpo-text-editor>\r\n                    <simpo-text-editor [(value)]=\"content.inputText[1].value\"\r\n                        [editable]=\"edit || false\"></simpo-text-editor>\r\n                    <ng-container *ngIf=\"data?.action?.display\">\r\n                        <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n                            <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n                                [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].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                    </ng-container>\r\n                    <ng-template #mutipleButtons>\r\n                        <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n                            <ng-container *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\"\r\n                                    [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                </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    </section>\r\n</ng-container>\r\n<ng-container *ngIf=\"screenWidth < 475\">\r\n    <div class=\"feature-card\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n        <div class=\"feature-image-wrapper\">\r\n            <img [src]=\"content.image.url\" alt=\"Office Building\" class=\"feature-image\">\r\n        </div>\r\n        <div class=\"feature-content\">\r\n            <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"false\"\r\n                [type]=\"'heading'\"></simpo-text-editor>\r\n            <simpo-text-editor [(value)]=\"content.inputText[1].value\" [editable]=\"false\"></simpo-text-editor>\r\n            <div class=\"d-flex w-100 align-items-center justify-content-center\">\r\n                <ng-container *ngIf=\"data?.action?.display\">\r\n                    <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n                        <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n                            [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].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                </ng-container>\r\n                <ng-template #mutipleButtons>\r\n                    <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n                        <ng-container *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\"\r\n                                [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            </div>\r\n        </div>\r\n\r\n    </div>\r\n</ng-container>", styles: [".total-container{height:auto;position:relative}.cta-wrapper{display:flex;align-items:center;justify-content:center}.left-image-position{padding-left:13rem;padding-right:30px;margin-left:6rem}.right-image-position{padding-right:13rem;padding-left:30px;margin-right:6rem}.section-content{min-height:260px;width:90%;align-items:center;justify-content:center;padding-top:5px;padding-bottom:10px}.section-content simpo-text-editor{width:100%}.cta-content{color:#fff}.cta-content h2{font-size:36px;margin-bottom:20px}.cta-content p{font-size:16px;line-height:1.7;margin-bottom:30px;max-width:700px}.cta-btn{display:inline-block;background:#001f3f;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:600;transition:.3s ease}.cta-btn:hover{background:#000}.cta-image{position:absolute;z-index:2;transform:rotate(-6deg);height:340px;top:-9%}.cta-image img{width:280px;border-radius:20px;box-shadow:0 20px 40px #0003}@media (max-width: 992px){.cta-wrapper{flex-direction:column}.cta-content{padding:60px 30px;text-align:center}.cta-image{position:relative;margin-bottom:30px}.cta-image img{width:220px;transform:rotate(0)}}@media (max-width: 576px){.cta-content h2{font-size:24px}.cta-content p{font-size:14px}.cta-btn{padding:10px 20px;font-size:14px}}@media only screen and (min-width:320px) and (max-width:475px){.feature-card{max-width:650px;padding:24px;font-family:Arial,sans-serif}.feature-image-wrapper{width:100%}.feature-image{width:100%;display:block;border-radius:16px}.feature-content{margin-top:24px}.feature-title{font-size:32px;font-weight:600;margin-bottom:16px}.feature-description{font-size:16px;line-height:1.6;margin-bottom:24px}.feature-button{padding:12px 22px;font-size:14px;border:none;border-radius:8px;cursor:pointer}}\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: 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: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type:
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OverlappingImageComponent, isStandalone: true, selector: "simpo-overlapping-image", inputs: { nextComponentColor: "nextComponentColor", data: "data", edit: "edit", index: "index", customClass: "customClass", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"cta-section total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [simpoOverlay]=\"styles?.background\">\r\n    <div class=\"cta-wrapper\" #mainContainer [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n        [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\">\r\n        <div class=\"cta-content w-100 d-flex justify-content-center\">\r\n            <div class=\"d-flex flex-column gap-4 section-content position-relative\" [id]=\"data?.id\"\r\n                [simpoCorner]=\"styles?.corners\"\r\n                [ngStyle]=\"{'align-items' : styles?.layout?.align === 'center' ? 'center' : (styles?.layout?.align === 'left' ? 'start' : 'end'),'background':getAccentBackground() }\"\r\n                [ngClass]=\"{'left-image-position' : styles?.layout?.imagePosition === 'Left' , 'right-image-position' : styles?.layout?.imagePosition === 'Right'}\">\r\n                <div class=\"cta-image\" [style.left]=\"styles?.layout?.imagePosition === 'Left' ? '-10%' : ''\"\r\n                    [style.right]=\"styles?.layout?.imagePosition === 'Left' ? '' : '-10%'\"\r\n                    [style.transform]=\"styles?.layout?.imagePosition === 'Left' ? 'rotate(-6deg)' : 'rotate(6deg)'\">\r\n                    <img [src]=\" content?.image?.url\" class=\"h-100\" alt=\"Building\" [appImageEditor]=\"edit || false\"\r\n                        [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n                </div>\r\n                <simpo-text-editor [(value)]=\"heading\" [editable]=\"edit || false\"\r\n                    [type]=\"'heading'\"></simpo-text-editor>\r\n                <simpo-text-editor [(value)]=\"subText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                <ng-container *ngIf=\"data?.action?.display\">\r\n                    <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n                        <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n                            [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].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                </ng-container>\r\n                <ng-template #mutipleButtons>\r\n                    <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n                        <ng-container *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\"\r\n                                [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            </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</section>", styles: [".total-container{height:auto;position:relative}.cta-wrapper{display:flex;align-items:center;justify-content:center}.left-image-position{padding-left:13rem;padding-right:30px;margin-left:6rem}.right-image-position{padding-right:13rem;padding-left:30px;margin-right:6rem}.section-content{min-height:260px;width:90%;align-items:center;justify-content:center;padding-top:5px}.section-content simpo-text-editor{width:100%}.cta-content{color:#fff}.cta-content h2{font-size:36px;margin-bottom:20px}.cta-content p{font-size:16px;line-height:1.7;margin-bottom:30px;max-width:700px}.cta-btn{display:inline-block;background:#001f3f;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:600;transition:.3s ease}.cta-btn:hover{background:#000}.cta-image{position:absolute;z-index:2;transform:rotate(-6deg);height:340px;top:-9%}.cta-image img{width:280px;border-radius:20px;box-shadow:0 20px 40px #0003}@media (max-width: 992px){.cta-wrapper{flex-direction:column}.cta-content{padding:60px 30px;text-align:center}.cta-image{position:relative;margin-bottom:30px}.cta-image img{width:220px;transform:rotate(0)}}@media (max-width: 576px){.cta-content h2{font-size:24px}.cta-content p{font-size:14px}.cta-btn{padding:10px 20px;font-size:14px}}\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: 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: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type:
                 //Directives
                 BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }] }); }
 }
@@ -24036,7 +24164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CornerDirective,
                         ImageEditorDirective,
                         AnimationDirective
-                    ], template: "<ng-container *ngIf=\"screenWidth > 475\">\r\n    <section class=\"cta-section total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n        (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [simpoOverlay]=\"styles?.background\">\r\n        <div class=\"cta-wrapper\" #mainContainer [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n            [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\">\r\n            <div class=\"cta-content w-100 d-flex justify-content-center\">\r\n                <div class=\"d-flex flex-column gap-4 section-content position-relative\" [id]=\"data?.id\"\r\n                    [simpoCorner]=\"styles?.corners\"\r\n                    [ngStyle]=\"{'align-items' : styles?.layout?.align === 'center' ? 'center' : (styles?.layout?.align === 'left' ? 'start' : 'end'),'background':accentBackground }\"\r\n                    [ngClass]=\"{'left-image-position' : styles?.layout?.imagePosition === 'Left' , 'right-image-position' : styles?.layout?.imagePosition === 'Right'}\">\r\n                    <div class=\"cta-image\" [style.left]=\"styles?.layout?.imagePosition === 'Left' ? '-10%' : ''\"\r\n                        [style.right]=\"styles?.layout?.imagePosition === 'Left' ? '' : '-10%'\"\r\n                        [style.transform]=\"styles?.layout?.imagePosition === 'Left' ? 'rotate(-6deg)' : 'rotate(6deg)'\">\r\n                        <img [src]=\" content?.image?.url\" class=\"h-100\" alt=\"Building\" [appImageEditor]=\"edit || false\"\r\n                            [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n                    </div>\r\n                    <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"edit || false\"\r\n                        [type]=\"'heading'\"></simpo-text-editor>\r\n                    <simpo-text-editor [(value)]=\"content.inputText[1].value\"\r\n                        [editable]=\"edit || false\"></simpo-text-editor>\r\n                    <ng-container *ngIf=\"data?.action?.display\">\r\n                        <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n                            <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n                                [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].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                    </ng-container>\r\n                    <ng-template #mutipleButtons>\r\n                        <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n                            <ng-container *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\"\r\n                                    [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                </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    </section>\r\n</ng-container>\r\n<ng-container *ngIf=\"screenWidth < 475\">\r\n    <div class=\"feature-card\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n        <div class=\"feature-image-wrapper\">\r\n            <img [src]=\"content.image.url\" alt=\"Office Building\" class=\"feature-image\">\r\n        </div>\r\n        <div class=\"feature-content\">\r\n            <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"false\"\r\n                [type]=\"'heading'\"></simpo-text-editor>\r\n            <simpo-text-editor [(value)]=\"content.inputText[1].value\" [editable]=\"false\"></simpo-text-editor>\r\n            <div class=\"d-flex w-100 align-items-center justify-content-center\">\r\n                <ng-container *ngIf=\"data?.action?.display\">\r\n                    <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n                        <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n                            [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].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                </ng-container>\r\n                <ng-template #mutipleButtons>\r\n                    <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n                        <ng-container *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\"\r\n                                [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            </div>\r\n        </div>\r\n\r\n    </div>\r\n</ng-container>", styles: [".total-container{height:auto;position:relative}.cta-wrapper{display:flex;align-items:center;justify-content:center}.left-image-position{padding-left:13rem;padding-right:30px;margin-left:6rem}.right-image-position{padding-right:13rem;padding-left:30px;margin-right:6rem}.section-content{min-height:260px;width:90%;align-items:center;justify-content:center;padding-top:5px;padding-bottom:10px}.section-content simpo-text-editor{width:100%}.cta-content{color:#fff}.cta-content h2{font-size:36px;margin-bottom:20px}.cta-content p{font-size:16px;line-height:1.7;margin-bottom:30px;max-width:700px}.cta-btn{display:inline-block;background:#001f3f;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:600;transition:.3s ease}.cta-btn:hover{background:#000}.cta-image{position:absolute;z-index:2;transform:rotate(-6deg);height:340px;top:-9%}.cta-image img{width:280px;border-radius:20px;box-shadow:0 20px 40px #0003}@media (max-width: 992px){.cta-wrapper{flex-direction:column}.cta-content{padding:60px 30px;text-align:center}.cta-image{position:relative;margin-bottom:30px}.cta-image img{width:220px;transform:rotate(0)}}@media (max-width: 576px){.cta-content h2{font-size:24px}.cta-content p{font-size:14px}.cta-btn{padding:10px 20px;font-size:14px}}@media only screen and (min-width:320px) and (max-width:475px){.feature-card{max-width:650px;padding:24px;font-family:Arial,sans-serif}.feature-image-wrapper{width:100%}.feature-image{width:100%;display:block;border-radius:16px}.feature-content{margin-top:24px}.feature-title{font-size:32px;font-weight:600;margin-bottom:16px}.feature-description{font-size:16px;line-height:1.6;margin-bottom:24px}.feature-button{padding:12px 22px;font-size:14px;border:none;border-radius:8px;cursor:pointer}}\n"] }]
+                    ], template: "<section class=\"cta-section total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [simpoOverlay]=\"styles?.background\">\r\n    <div class=\"cta-wrapper\" #mainContainer [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n        [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\">\r\n        <div class=\"cta-content w-100 d-flex justify-content-center\">\r\n            <div class=\"d-flex flex-column gap-4 section-content position-relative\" [id]=\"data?.id\"\r\n                [simpoCorner]=\"styles?.corners\"\r\n                [ngStyle]=\"{'align-items' : styles?.layout?.align === 'center' ? 'center' : (styles?.layout?.align === 'left' ? 'start' : 'end'),'background':getAccentBackground() }\"\r\n                [ngClass]=\"{'left-image-position' : styles?.layout?.imagePosition === 'Left' , 'right-image-position' : styles?.layout?.imagePosition === 'Right'}\">\r\n                <div class=\"cta-image\" [style.left]=\"styles?.layout?.imagePosition === 'Left' ? '-10%' : ''\"\r\n                    [style.right]=\"styles?.layout?.imagePosition === 'Left' ? '' : '-10%'\"\r\n                    [style.transform]=\"styles?.layout?.imagePosition === 'Left' ? 'rotate(-6deg)' : 'rotate(6deg)'\">\r\n                    <img [src]=\" content?.image?.url\" class=\"h-100\" alt=\"Building\" [appImageEditor]=\"edit || false\"\r\n                        [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n                </div>\r\n                <simpo-text-editor [(value)]=\"heading\" [editable]=\"edit || false\"\r\n                    [type]=\"'heading'\"></simpo-text-editor>\r\n                <simpo-text-editor [(value)]=\"subText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                <ng-container *ngIf=\"data?.action?.display\">\r\n                    <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n                        <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n                            [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].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                </ng-container>\r\n                <ng-template #mutipleButtons>\r\n                    <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n                        <ng-container *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\"\r\n                                [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            </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</section>", styles: [".total-container{height:auto;position:relative}.cta-wrapper{display:flex;align-items:center;justify-content:center}.left-image-position{padding-left:13rem;padding-right:30px;margin-left:6rem}.right-image-position{padding-right:13rem;padding-left:30px;margin-right:6rem}.section-content{min-height:260px;width:90%;align-items:center;justify-content:center;padding-top:5px}.section-content simpo-text-editor{width:100%}.cta-content{color:#fff}.cta-content h2{font-size:36px;margin-bottom:20px}.cta-content p{font-size:16px;line-height:1.7;margin-bottom:30px;max-width:700px}.cta-btn{display:inline-block;background:#001f3f;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:600;transition:.3s ease}.cta-btn:hover{background:#000}.cta-image{position:absolute;z-index:2;transform:rotate(-6deg);height:340px;top:-9%}.cta-image img{width:280px;border-radius:20px;box-shadow:0 20px 40px #0003}@media (max-width: 992px){.cta-wrapper{flex-direction:column}.cta-content{padding:60px 30px;text-align:center}.cta-image{position:relative;margin-bottom:30px}.cta-image img{width:220px;transform:rotate(0)}}@media (max-width: 576px){.cta-content h2{font-size:24px}.cta-content p{font-size:14px}.cta-btn{padding:10px 20px;font-size:14px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { nextComponentColor: [{
                 type: Input
             }], data: [{
@@ -24049,22 +24177,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], delete: [{
                 type: Input
-            }], getScreenSize: [{
-                type: HostListener,
-                args: ["window: resize", ["$event"]]
             }] } });
 class ImageBackgroundComponent extends BaseSection {
     constructor() {
         super();
-        this.getScreenSize();
+        this.heading = '';
+        this.subText = '';
     }
     ngOnInit() {
         this.styles = this.data?.styles;
         this.content = this.data?.content;
-    }
-    getScreenSize() {
-        this.screenWidth = window.innerWidth;
+        this.heading = this.content?.inputText[0].value ?? '';
+        this.subText = this.content?.inputText ? this.content.inputText[0 + 1].value : '';
     }
     get stylesLayout() {
         return { ...this.styles?.layout };
@@ -24073,7 +24198,7 @@ class ImageBackgroundComponent extends BaseSection {
         return this.styles?.layout?.headingSpacing;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageBackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageBackgroundComponent, isStandalone: true, selector: "simpo-image-background", inputs: { nextComponentColor: "nextComponentColor", data: "data", edit: "edit", index: "index", customClass: "customClass", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [ngClass]=\"{'p-2rem':!styles?.fullWidth}\">\r\n    <div class=\"cta-container w-100\" [id]=\"data?.id\" #mainContainer [simpoCorner]=\"styles?.corners\"\r\n        [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\"\r\n        [ngClass]=\"{'justify-content-start' : styles?.layout?.setContentPosition === 'Left' , 'justify-content-end' : styles?.layout?.setContentPosition === 'Right' }\"\r\n        [ngStyle]=\"{\r\n    'background-image': (screenWidth > 1200 ? 'url(' + content?.image?.url + ')' : 'unset !important'),\r\n    'background-size': 'cover',\r\n    'background-position': 'center',\r\n    'background-repeat': 'no-repeat'\r\n  }\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [simpoAnimation]=\"styles?.animation\">\r\n        <!-- <div class=\"cta-image\">\r\n            <img src=\"\" alt=\"Abstract Design\">\r\n        </div> -->\r\n        <div class=\"cta-content d-flex flex-column gap-3\" (click)=\"$event.stopPropagation()\">\r\n            <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            <simpo-text-editor [(value)]=\"content.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            <ng-container *ngIf=\"data?.action?.display\">\r\n                <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n                    <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n                        [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].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            </ng-container>\r\n            <ng-template #mutipleButtons>\r\n                <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n                    <ng-container *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\"\r\n                            [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        </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</section>", styles: [".cta-content{color:#fff}.total-container{height:auto;position:relative}.cta-container{display:flex;align-items:center;justify-content:space-between;border-radius:20px;overflow:hidden;background-image:url(https://d2z9497xp8xb12.cloudfront.net/prod-images/284345c1770816953360Artboard_18-1.webp);background-size:cover;background-position:center;background-repeat:no-repeat}.p-2rem{padding:2rem}.cta-image{flex:1}.cta-image img{width:100%;height:100%;object-fit:cover;display:block}.cta-content h1{font-size:40px;line-height:1.3;margin-bottom:20px}.cta-content p{font-size:16px;color:#cbd5e1;margin-bottom:30px;max-width:500px}.cta-button{display:inline-block;padding:12px 24px;background:#000;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;transition:.3s ease}.cta-button:hover{background:#1e293b}@media (max-width: 992px){.cta-content{padding:40px}.cta-content h1{font-size:32px}}@media (min-width:1200px){.cta-content{max-width:50%}}@media (max-width: 768px){.cta-container{flex-direction:column}.cta-image{width:100%;height:300px}.cta-content{padding:30px;text-align:center}.cta-content p{margin:0 auto 25px}}@media (max-width: 480px){.cta-content h1{font-size:24px}.cta-content p{font-size:14px}.cta-button{padding:10px 20px;font-size:14px}}\n"], dependencies: [{ 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: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type:
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageBackgroundComponent, isStandalone: true, selector: "simpo-image-background", inputs: { nextComponentColor: "nextComponentColor", data: "data", edit: "edit", index: "index", customClass: "customClass", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"cta-section total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [style.padding]=\"styles?.fullWidth ? '0' : '2rem'\">\r\n    <div class=\"cta-container w-100\" [id]=\"data?.id\" #mainContainer [simpoCorner]=\"styles?.corners\"\r\n        [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\"\r\n        [ngClass]=\"{'justify-content-start' : styles?.layout?.setContentPosition === 'Left' , 'justify-content-end' : styles?.layout?.setContentPosition === 'Right' }\"\r\n        [ngStyle]=\"{\r\n    'background-image': 'url(' + content?.image?.url + ')',\r\n    'background-size': 'cover',\r\n    'background-position': 'center',\r\n    'background-repeat': 'no-repeat'\r\n  }\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [simpoAnimation]=\"styles?.animation\">\r\n        <!-- <div class=\"cta-image\">\r\n            <img src=\"\" alt=\"Abstract Design\">\r\n        </div> -->\r\n        <div class=\"cta-content d-flex flex-column gap-3\" (click)=\"$event.stopPropagation()\">\r\n            <simpo-text-editor [(value)]=\"heading\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            <simpo-text-editor [(value)]=\"subText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            <ng-container *ngIf=\"data?.action?.display\">\r\n                <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n                    <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n                        [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].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            </ng-container>\r\n            <ng-template #mutipleButtons>\r\n                <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n                    <ng-container *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\"\r\n                            [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        </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</section>", styles: [".total-container{height:auto;position:relative}.cta-container{display:flex;align-items:center;justify-content:space-between;border-radius:20px;overflow:hidden;background-image:url(https://d2z9497xp8xb12.cloudfront.net/prod-images/284345c1770816953360Artboard_18-1.webp);background-size:cover;background-position:center;background-repeat:no-repeat}.cta-image{flex:1}.cta-image img{width:100%;height:100%;object-fit:cover;display:block}.cta-content{max-width:50%;color:#fff}.cta-content h1{font-size:40px;line-height:1.3;margin-bottom:20px}.cta-content p{font-size:16px;color:#cbd5e1;margin-bottom:30px;max-width:500px}.cta-button{display:inline-block;padding:12px 24px;background:#000;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;transition:.3s ease}.cta-button:hover{background:#1e293b}@media (max-width: 992px){.cta-content{padding:40px}.cta-content h1{font-size:32px}}@media (max-width: 768px){.cta-container{flex-direction:column}.cta-image{width:100%;height:300px}.cta-content{padding:30px;text-align:center}.cta-content p{margin:0 auto 25px}}@media (max-width: 480px){.cta-content h1{font-size:24px}.cta-content p{font-size:14px}.cta-button{padding:10px 20px;font-size:14px}}\n"], dependencies: [{ 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: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type:
                 //Directives
                 BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }] }); }
 }
@@ -24092,7 +24217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CornerDirective,
                         ImageEditorDirective,
                         AnimationDirective
-                    ], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [ngClass]=\"{'p-2rem':!styles?.fullWidth}\">\r\n    <div class=\"cta-container w-100\" [id]=\"data?.id\" #mainContainer [simpoCorner]=\"styles?.corners\"\r\n        [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\"\r\n        [ngClass]=\"{'justify-content-start' : styles?.layout?.setContentPosition === 'Left' , 'justify-content-end' : styles?.layout?.setContentPosition === 'Right' }\"\r\n        [ngStyle]=\"{\r\n    'background-image': (screenWidth > 1200 ? 'url(' + content?.image?.url + ')' : 'unset !important'),\r\n    'background-size': 'cover',\r\n    'background-position': 'center',\r\n    'background-repeat': 'no-repeat'\r\n  }\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [simpoAnimation]=\"styles?.animation\">\r\n        <!-- <div class=\"cta-image\">\r\n            <img src=\"\" alt=\"Abstract Design\">\r\n        </div> -->\r\n        <div class=\"cta-content d-flex flex-column gap-3\" (click)=\"$event.stopPropagation()\">\r\n            <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            <simpo-text-editor [(value)]=\"content.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            <ng-container *ngIf=\"data?.action?.display\">\r\n                <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n                    <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n                        [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].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            </ng-container>\r\n            <ng-template #mutipleButtons>\r\n                <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n                    <ng-container *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\"\r\n                            [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        </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</section>", styles: [".cta-content{color:#fff}.total-container{height:auto;position:relative}.cta-container{display:flex;align-items:center;justify-content:space-between;border-radius:20px;overflow:hidden;background-image:url(https://d2z9497xp8xb12.cloudfront.net/prod-images/284345c1770816953360Artboard_18-1.webp);background-size:cover;background-position:center;background-repeat:no-repeat}.p-2rem{padding:2rem}.cta-image{flex:1}.cta-image img{width:100%;height:100%;object-fit:cover;display:block}.cta-content h1{font-size:40px;line-height:1.3;margin-bottom:20px}.cta-content p{font-size:16px;color:#cbd5e1;margin-bottom:30px;max-width:500px}.cta-button{display:inline-block;padding:12px 24px;background:#000;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;transition:.3s ease}.cta-button:hover{background:#1e293b}@media (max-width: 992px){.cta-content{padding:40px}.cta-content h1{font-size:32px}}@media (min-width:1200px){.cta-content{max-width:50%}}@media (max-width: 768px){.cta-container{flex-direction:column}.cta-image{width:100%;height:300px}.cta-content{padding:30px;text-align:center}.cta-content p{margin:0 auto 25px}}@media (max-width: 480px){.cta-content h1{font-size:24px}.cta-content p{font-size:14px}.cta-button{padding:10px 20px;font-size:14px}}\n"] }]
+                    ], template: "<section class=\"cta-section total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [style.padding]=\"styles?.fullWidth ? '0' : '2rem'\">\r\n    <div class=\"cta-container w-100\" [id]=\"data?.id\" #mainContainer [simpoCorner]=\"styles?.corners\"\r\n        [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\"\r\n        [ngClass]=\"{'justify-content-start' : styles?.layout?.setContentPosition === 'Left' , 'justify-content-end' : styles?.layout?.setContentPosition === 'Right' }\"\r\n        [ngStyle]=\"{\r\n    'background-image': 'url(' + content?.image?.url + ')',\r\n    'background-size': 'cover',\r\n    'background-position': 'center',\r\n    'background-repeat': 'no-repeat'\r\n  }\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [simpoAnimation]=\"styles?.animation\">\r\n        <!-- <div class=\"cta-image\">\r\n            <img src=\"\" alt=\"Abstract Design\">\r\n        </div> -->\r\n        <div class=\"cta-content d-flex flex-column gap-3\" (click)=\"$event.stopPropagation()\">\r\n            <simpo-text-editor [(value)]=\"heading\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            <simpo-text-editor [(value)]=\"subText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            <ng-container *ngIf=\"data?.action?.display\">\r\n                <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n                    <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n                        [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].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            </ng-container>\r\n            <ng-template #mutipleButtons>\r\n                <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n                    <ng-container *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\"\r\n                            [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        </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</section>", styles: [".total-container{height:auto;position:relative}.cta-container{display:flex;align-items:center;justify-content:space-between;border-radius:20px;overflow:hidden;background-image:url(https://d2z9497xp8xb12.cloudfront.net/prod-images/284345c1770816953360Artboard_18-1.webp);background-size:cover;background-position:center;background-repeat:no-repeat}.cta-image{flex:1}.cta-image img{width:100%;height:100%;object-fit:cover;display:block}.cta-content{max-width:50%;color:#fff}.cta-content h1{font-size:40px;line-height:1.3;margin-bottom:20px}.cta-content p{font-size:16px;color:#cbd5e1;margin-bottom:30px;max-width:500px}.cta-button{display:inline-block;padding:12px 24px;background:#000;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;transition:.3s ease}.cta-button:hover{background:#1e293b}@media (max-width: 992px){.cta-content{padding:40px}.cta-content h1{font-size:32px}}@media (max-width: 768px){.cta-container{flex-direction:column}.cta-image{width:100%;height:300px}.cta-content{padding:30px;text-align:center}.cta-content p{margin:0 auto 25px}}@media (max-width: 480px){.cta-content h1{font-size:24px}.cta-content p{font-size:14px}.cta-button{padding:10px 20px;font-size:14px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { nextComponentColor: [{
                 type: Input
             }], data: [{
@@ -24105,136 +24230,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], delete: [{
                 type: Input
-            }], getScreenSize: [{
-                type: HostListener,
-                args: ["window: resize", ["$event"]]
-            }] } });
-class CondensedAndGradientComponent extends BaseSection {
-    ngOnInit() {
-        this.content = this.data?.content;
-        this.style = this.data?.styles;
-    }
-    get stylesLayout() {
-        return { ...this.style?.layout };
-    }
-    getIconBackground(icon) {
-        if (icon?.backgroundType === 'Gradient') {
-            const direction = icon?.backgroundGradientDirection || 'to bottom';
-            return `linear-gradient(${direction}, ${icon?.backgroundColor}, ${icon?.secondaryColor})`;
-        }
-        return icon?.backgroundColor;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CondensedAndGradientComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CondensedAndGradientComponent, isStandalone: true, selector: "simpo-condensed-and-gradient", inputs: { edit: "edit", data: "data", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section>\r\n  <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"sale-wrapper total-container\"\r\n    [attr.style]=\"customClass\" [simpoBackground]=\"style?.background\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\r\n      [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\" class=\"sale-bar\">\r\n\r\n      <!-- LEFT -->\r\n      <div class=\"left-section\">\r\n        <div class=\"logo\"\r\n          [style.background]=\"content?.icon?.showBackground ? getIconBackground(content?.icon) : 'transparent'\"\r\n          [appImageEditor]=\"edit || false\" [iconData]=\"content?.icon\" [sectionId]=\"data?.id\" [showIcon]=\"true\">\r\n          <div [iconId]=\"data?.id + (content?.icon?.id || '')\" [simpoIconDirective]=\"content?.icon\" class=\"w-75 h-75\">\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"text\">\r\n          <div class=\"sale-text\">\r\n            <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n\r\n          <div class=\"sale-description\">\r\n            <simpo-text-editor [(value)]=\"content.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- RIGHT BUTTON -->\r\n      <div class=\"sale-action\" *ngIf=\"data?.action?.display\">\r\n        <div *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\">\r\n          </app-button-element>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Divider -->\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <!-- EDIT SELECTOR -->\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    <!-- DELETE -->\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</section>", styles: [".sale-wrapper{width:100%}.total-container{height:auto;position:relative}.sale-bar{width:100%;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:28px 50px}.left-section{display:flex;align-items:center;gap:14px;width:47%;min-width:320px}.sale-text{font-size:26px;font-weight:600;width:100%;display:block;text-align:left}.sale-description{width:100%;display:block;font-size:16px;opacity:.9;text-align:left;min-height:20px}.text{flex:1;width:100%;min-width:260px;text-align:left}.sale-timer{display:flex;gap:18px}.left-section{display:flex;justify-content:space-between;width:47%}.logo{width:60px;height:60px;min-width:60px;border-radius:50%;display:flex;align-items:center;justify-content:center}.time-card{background-color:#fff;color:#1c2a39;padding:6px 14px;border-radius:8px;text-align:center;min-width:60px}.time-card span{display:block;font-size:18px;font-weight:600}.time-card small{font-size:11px;letter-spacing:1px;font-weight:500}.sale-action{display:flex;align-items:center;gap:20px}.shop-button{background-color:#fff;color:#1c2a39;border:none;padding:5px 14px;border-radius:30px;font-size:14px;font-weight:500;cursor:pointer;transition:.3s ease}.shop-button:hover{background-color:#f2f2f2}.close-icon{font-size:20px;cursor:pointer;opacity:.8}.close-icon:hover{opacity:1}@media (max-width: 768px){.sale-bar{flex-direction:column;align-items:center;text-align:center;padding:20px;gap:18px}.left-section{width:100%;flex-direction:row;align-items:center;gap:12px}.logo{width:22%;height:60px}.editor-container{text-align:start}.text{text-align:start;width:100%}.sale-text{font-size:20px}.sale-description{font-size:14px;opacity:.9}.sale-action{width:100%;justify-content:center}}@media (min-width: 769px) and (max-width: 1024px){.sale-bar{padding:22px 30px;gap:20px}.left-section{width:65%;gap:15px}.logo{width:55px;height:55px}.sale-text{font-size:22px}.sale-description{font-size:15px}.sale-action{align-items:center}}\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: 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: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CondensedAndGradientComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-condensed-and-gradient', standalone: true, imports: [
-                        CommonModule,
-                        SimpoElementsModule,
-                        SimpoComponentModule,
-                        TextEditorComponent,
-                        BackgroundDirective,
-                        HoverDirective,
-                        OverlayDirective,
-                        SpacingHorizontalDirective,
-                        BorderDirective,
-                        ContentFitDirective,
-                        ImageEditorDirective,
-                        IconDirectiveDirective
-                    ], template: "<section>\r\n  <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"sale-wrapper total-container\"\r\n    [attr.style]=\"customClass\" [simpoBackground]=\"style?.background\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\r\n      [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\" class=\"sale-bar\">\r\n\r\n      <!-- LEFT -->\r\n      <div class=\"left-section\">\r\n        <div class=\"logo\"\r\n          [style.background]=\"content?.icon?.showBackground ? getIconBackground(content?.icon) : 'transparent'\"\r\n          [appImageEditor]=\"edit || false\" [iconData]=\"content?.icon\" [sectionId]=\"data?.id\" [showIcon]=\"true\">\r\n          <div [iconId]=\"data?.id + (content?.icon?.id || '')\" [simpoIconDirective]=\"content?.icon\" class=\"w-75 h-75\">\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"text\">\r\n          <div class=\"sale-text\">\r\n            <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n\r\n          <div class=\"sale-description\">\r\n            <simpo-text-editor [(value)]=\"content.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- RIGHT BUTTON -->\r\n      <div class=\"sale-action\" *ngIf=\"data?.action?.display\">\r\n        <div *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\">\r\n          </app-button-element>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Divider -->\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <!-- EDIT SELECTOR -->\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    <!-- DELETE -->\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</section>", styles: [".sale-wrapper{width:100%}.total-container{height:auto;position:relative}.sale-bar{width:100%;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:28px 50px}.left-section{display:flex;align-items:center;gap:14px;width:47%;min-width:320px}.sale-text{font-size:26px;font-weight:600;width:100%;display:block;text-align:left}.sale-description{width:100%;display:block;font-size:16px;opacity:.9;text-align:left;min-height:20px}.text{flex:1;width:100%;min-width:260px;text-align:left}.sale-timer{display:flex;gap:18px}.left-section{display:flex;justify-content:space-between;width:47%}.logo{width:60px;height:60px;min-width:60px;border-radius:50%;display:flex;align-items:center;justify-content:center}.time-card{background-color:#fff;color:#1c2a39;padding:6px 14px;border-radius:8px;text-align:center;min-width:60px}.time-card span{display:block;font-size:18px;font-weight:600}.time-card small{font-size:11px;letter-spacing:1px;font-weight:500}.sale-action{display:flex;align-items:center;gap:20px}.shop-button{background-color:#fff;color:#1c2a39;border:none;padding:5px 14px;border-radius:30px;font-size:14px;font-weight:500;cursor:pointer;transition:.3s ease}.shop-button:hover{background-color:#f2f2f2}.close-icon{font-size:20px;cursor:pointer;opacity:.8}.close-icon:hover{opacity:1}@media (max-width: 768px){.sale-bar{flex-direction:column;align-items:center;text-align:center;padding:20px;gap:18px}.left-section{width:100%;flex-direction:row;align-items:center;gap:12px}.logo{width:22%;height:60px}.editor-container{text-align:start}.text{text-align:start;width:100%}.sale-text{font-size:20px}.sale-description{font-size:14px;opacity:.9}.sale-action{width:100%;justify-content:center}}@media (min-width: 769px) and (max-width: 1024px){.sale-bar{padding:22px 30px;gap:20px}.left-section{width:65%;gap:15px}.logo{width:55px;height:55px}.sale-text{font-size:22px}.sale-description{font-size:15px}.sale-action{align-items:center}}\n"] }]
-        }], propDecorators: { edit: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], customClass: [{
-                type: Input
-            }], nextComponentColor: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], delete: [{
-                type: Input
-            }] } });
-class FourFeaturesCenteredImageComponent extends BaseSection {
-    constructor() {
-        super(...arguments);
-        this.leftInputText = [];
-        this.rightInputText = [];
-    }
-    get stylesLayout() {
-        return { ...this.style?.layout };
-    }
-    ngOnInit() {
-        this.initializeSection();
-    }
-    ngOnChanges(changes) {
-        if (changes['data']) {
-            this.initializeSection();
-        }
-    }
-    initializeSection() {
-        if (!this.data)
-            return;
-        this.content = this.data.content || {};
-        this.style = this.data.styles || {};
-        this.splitFeatures();
-    }
-    splitFeatures() {
-        if (!this.content?.inputText?.length) {
-            this.leftInputText = [];
-            this.rightInputText = [];
-            return;
-        }
-        const mid = Math.ceil(this.content.inputText.length / 2);
-        this.leftInputText = this.content.inputText.slice(0, mid);
-        this.rightInputText = this.content.inputText.slice(mid);
-    }
-    getIconBackground(icon) {
-        if (icon?.backgroundType === 'Gradient') {
-            const direction = GradientDirection[icon?.backgroundGradientDirection] || GradientDirection.DOWN;
-            return `linear-gradient(${direction}, ${icon?.backgroundColor}, ${icon?.secondaryColor})`;
-        }
-        else {
-            return icon?.backgroundColor;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FourFeaturesCenteredImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FourFeaturesCenteredImageComponent, isStandalone: true, selector: "simpo-four-features-centered-image", inputs: { edit: "edit", data: "data", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index", delete: "delete" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section>\r\n  <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\"\r\n    [simpoBackground]=\"style?.background\" [simpoOverlay]=\"style?.background\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [spacingHorizontal]=\"stylesLayout\"\r\n      [simpoLayout]=\"style?.layout\" class=\"sale-bar\">\r\n      <div class=\"features-wrapper\" [simpoAnimation]=\"style?.animation\">\r\n\r\n        <div>\r\n          <!-- Heading -->\r\n          <simpo-text-editor class=\"main-heading fs-1 fw-semibold\" [(value)]=\"content.heading.value\"\r\n            [editable]=\"edit || false\">\r\n          </simpo-text-editor>\r\n\r\n          <!-- Description -->\r\n          <simpo-text-editor class=\"main-subheading description\" [(value)]=\"content.description.value\"\r\n            [editable]=\"edit || false\">\r\n          </simpo-text-editor>\r\n        </div>\r\n\r\n        <!-- GRID -->\r\n        <div class=\"feature-grid\">\r\n          <!-- LEFT FEATURES -->\r\n          <div class=\"feature-column\">\r\n            <div class=\"feature-item d-flex flex-column\" *ngFor=\"let item of leftInputText\">\r\n              <!-- <div class=\"logo-img\" [simpoCorner]=\"style?.corners\" [style.height.px]=\"style?.containerHeight\"\r\n                [style.width.px]=\"style?.containerWidth\" [appImageEditor]=\"edit || false\" [iconData]=\"item.icon\"\r\n                [sectionId]=\"data?.id\" [showIcon]=\"true\"> -->\r\n              <div class=\"logo-img\"\r\n                [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n                [simpoCorner]=\"style?.corners\" [style.height.px]=\"style?.containerHeight\"\r\n                [style.width.px]=\"style?.containerWidth\" [appImageEditor]=\"edit || false\" [iconData]=\"item.icon\"\r\n                [sectionId]=\"data?.id\" [showIcon]=\"true\">\r\n                <div [iconId]=\"data?.id + item.icon?.id\" [simpoIconDirective]=\"item.icon\" class=\"w-50 h-50\">\r\n                </div>\r\n              </div>\r\n\r\n              <simpo-text-editor class=\"feature-title my-2 fs-5 fw-semibold\" [(value)]=\"item.label\"\r\n                [editable]=\"edit || false\">\r\n              </simpo-text-editor>\r\n              <simpo-text-editor class=\"feature-text\" [(value)]=\"item.value\"\r\n                [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- CENTER IMAGE -->\r\n          <div class=\"cta-image center-image\" [simpoCorner]=\"style?.corners\" style=\"overflow:hidden;\">\r\n\r\n            <img [src]=\"content?.image?.url\" [simpoCorner]=\"style?.corners\" [appImageEditor]=\"edit || false\"\r\n              [imageData]=\"content?.image\" [sectionId]=\"data?.id\" style=\"width:100%; height:100%; object-fit:cover;\">\r\n          </div>\r\n\r\n          <!-- RIGHT FEATURES -->\r\n          <div class=\"feature-column\">\r\n            <div class=\"feature-item d-flex flex-column align-items-start text-start\"\r\n              *ngFor=\"let item of rightInputText\">\r\n              <!-- <div class=\"logo-img\" [simpoCorner]=\"style?.corners\" [style.height.px]=\"style?.containerHeight\"\r\n                [style.width.px]=\"style?.containerWidth\" [appImageEditor]=\"edit || false\" [iconData]=\"item.icon\"\r\n                [sectionId]=\"data?.id\" [showIcon]=\"true\"> -->\r\n              <div class=\"logo-img\"\r\n                [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n                [simpoCorner]=\"style?.corners\" [style.height.px]=\"style?.containerHeight\"\r\n                [style.width.px]=\"style?.containerWidth\" [appImageEditor]=\"edit || false\" [iconData]=\"item.icon\"\r\n                [sectionId]=\"data?.id\" [showIcon]=\"true\">\r\n                <div [iconId]=\"data?.id + item.icon?.id\" [simpoIconDirective]=\"item.icon\" class=\"w-50 h-50\">\r\n                </div>\r\n              </div>\r\n\r\n              <simpo-text-editor class=\"feature-title my-2 fs-5 fw-semibold\" [(value)]=\"item.label\"\r\n                [editable]=\"edit || false\">\r\n              </simpo-text-editor>\r\n              <simpo-text-editor class=\"feature-text\" [(value)]=\"item.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    <!-- Divider -->\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\">\r\n      </simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <!-- EDIT SELECTOR -->\r\n    <div [ngClass]=\"{ hover_effect: edit }\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\">\r\n      </simpo-hover-elements>\r\n    </div>\r\n\r\n    <!-- DELETE -->\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{ hover_effect: delete }\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\">\r\n      </simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </div>\r\n</section>", styles: [".total-container{position:relative}.sale-bar{padding:45px}.feature-text,.feature-title{width:100%}.main-heading{margin:0 auto;text-align:center}.main-subheading{margin:15px auto 0;text-align:center;line-height:1.6}.main-heading,.main-subheading{word-break:break-word;overflow-wrap:anywhere}.features-wrapper{text-align:center;margin-top:15px}.feature-grid{display:flex;justify-content:space-between;align-items:center;width:100%;margin:45px 0 40px}.feature-column{display:flex;flex-direction:column;gap:60px;width:35%}.feature-item{width:100%;align-items:end}.feature-column:first-child .feature-item{text-align:right}.feature-column:last-child .feature-item{text-align:left}.logo-img{display:flex;justify-content:center;align-items:center}.logotype-boxed{box-shadow:0 2px 4px #0000002e;padding:10px}.cta-image{width:30%;display:flex;justify-content:center;align-items:center;margin:0 40px}.center-image{display:flex;justify-content:center;align-items:center;overflow:hidden}.center-image img{display:block;max-width:100%;height:auto}.description{display:flex;justify-content:center;text-align:center;padding:0 15%}@media (max-width: 992px){.feature-grid{flex-direction:column;align-items:center;gap:40px;margin:25px 0}.center-image{order:3;width:280px;margin:10px 0 25px}.feature-column{width:100%;align-items:center;gap:35px}.feature-item{text-align:center!important;align-items:center}.description{padding:0 8%}}@media (max-width: 768px){.sale-bar{padding:30px 20px}.center-image{width:230px}.description{padding:0 6%}.feature-column{gap:28px}}@media (max-width: 480px){.sale-bar{padding:25px 15px}.center-image{width:80%}.logo-img{height:70px!important;align-items:center!important;text-align:center!important}simpo-text-editor.fs-1{font-size:28px!important}.feature-item{display:flex;flex-direction:column;gap:8px;text-align:center!important;align-items:center!important}.main-subheading{margin:5px auto 0!important;padding:0!important}.feature-item{gap:0px!important}.cta-image{width:100%!important;height:100%!important}}\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: SimpoElementsModule }, { 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: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FourFeaturesCenteredImageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-four-features-centered-image', standalone: true, imports: [
-                        CommonModule,
-                        SimpoElementsModule,
-                        SimpoComponentModule,
-                        TextEditorComponent,
-                        BackgroundDirective,
-                        HoverDirective,
-                        OverlayDirective,
-                        SpacingHorizontalDirective,
-                        BorderDirective,
-                        ContentFitDirective,
-                        ImageEditorDirective,
-                        IconDirectiveDirective,
-                        MatIconModule,
-                        CornerDirective,
-                        AnimationDirective,
-                    ], template: "<section>\r\n  <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\"\r\n    [simpoBackground]=\"style?.background\" [simpoOverlay]=\"style?.background\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [spacingHorizontal]=\"stylesLayout\"\r\n      [simpoLayout]=\"style?.layout\" class=\"sale-bar\">\r\n      <div class=\"features-wrapper\" [simpoAnimation]=\"style?.animation\">\r\n\r\n        <div>\r\n          <!-- Heading -->\r\n          <simpo-text-editor class=\"main-heading fs-1 fw-semibold\" [(value)]=\"content.heading.value\"\r\n            [editable]=\"edit || false\">\r\n          </simpo-text-editor>\r\n\r\n          <!-- Description -->\r\n          <simpo-text-editor class=\"main-subheading description\" [(value)]=\"content.description.value\"\r\n            [editable]=\"edit || false\">\r\n          </simpo-text-editor>\r\n        </div>\r\n\r\n        <!-- GRID -->\r\n        <div class=\"feature-grid\">\r\n          <!-- LEFT FEATURES -->\r\n          <div class=\"feature-column\">\r\n            <div class=\"feature-item d-flex flex-column\" *ngFor=\"let item of leftInputText\">\r\n              <!-- <div class=\"logo-img\" [simpoCorner]=\"style?.corners\" [style.height.px]=\"style?.containerHeight\"\r\n                [style.width.px]=\"style?.containerWidth\" [appImageEditor]=\"edit || false\" [iconData]=\"item.icon\"\r\n                [sectionId]=\"data?.id\" [showIcon]=\"true\"> -->\r\n              <div class=\"logo-img\"\r\n                [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n                [simpoCorner]=\"style?.corners\" [style.height.px]=\"style?.containerHeight\"\r\n                [style.width.px]=\"style?.containerWidth\" [appImageEditor]=\"edit || false\" [iconData]=\"item.icon\"\r\n                [sectionId]=\"data?.id\" [showIcon]=\"true\">\r\n                <div [iconId]=\"data?.id + item.icon?.id\" [simpoIconDirective]=\"item.icon\" class=\"w-50 h-50\">\r\n                </div>\r\n              </div>\r\n\r\n              <simpo-text-editor class=\"feature-title my-2 fs-5 fw-semibold\" [(value)]=\"item.label\"\r\n                [editable]=\"edit || false\">\r\n              </simpo-text-editor>\r\n              <simpo-text-editor class=\"feature-text\" [(value)]=\"item.value\"\r\n                [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- CENTER IMAGE -->\r\n          <div class=\"cta-image center-image\" [simpoCorner]=\"style?.corners\" style=\"overflow:hidden;\">\r\n\r\n            <img [src]=\"content?.image?.url\" [simpoCorner]=\"style?.corners\" [appImageEditor]=\"edit || false\"\r\n              [imageData]=\"content?.image\" [sectionId]=\"data?.id\" style=\"width:100%; height:100%; object-fit:cover;\">\r\n          </div>\r\n\r\n          <!-- RIGHT FEATURES -->\r\n          <div class=\"feature-column\">\r\n            <div class=\"feature-item d-flex flex-column align-items-start text-start\"\r\n              *ngFor=\"let item of rightInputText\">\r\n              <!-- <div class=\"logo-img\" [simpoCorner]=\"style?.corners\" [style.height.px]=\"style?.containerHeight\"\r\n                [style.width.px]=\"style?.containerWidth\" [appImageEditor]=\"edit || false\" [iconData]=\"item.icon\"\r\n                [sectionId]=\"data?.id\" [showIcon]=\"true\"> -->\r\n              <div class=\"logo-img\"\r\n                [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n                [simpoCorner]=\"style?.corners\" [style.height.px]=\"style?.containerHeight\"\r\n                [style.width.px]=\"style?.containerWidth\" [appImageEditor]=\"edit || false\" [iconData]=\"item.icon\"\r\n                [sectionId]=\"data?.id\" [showIcon]=\"true\">\r\n                <div [iconId]=\"data?.id + item.icon?.id\" [simpoIconDirective]=\"item.icon\" class=\"w-50 h-50\">\r\n                </div>\r\n              </div>\r\n\r\n              <simpo-text-editor class=\"feature-title my-2 fs-5 fw-semibold\" [(value)]=\"item.label\"\r\n                [editable]=\"edit || false\">\r\n              </simpo-text-editor>\r\n              <simpo-text-editor class=\"feature-text\" [(value)]=\"item.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    <!-- Divider -->\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\">\r\n      </simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <!-- EDIT SELECTOR -->\r\n    <div [ngClass]=\"{ hover_effect: edit }\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\">\r\n      </simpo-hover-elements>\r\n    </div>\r\n\r\n    <!-- DELETE -->\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{ hover_effect: delete }\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\">\r\n      </simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </div>\r\n</section>", styles: [".total-container{position:relative}.sale-bar{padding:45px}.feature-text,.feature-title{width:100%}.main-heading{margin:0 auto;text-align:center}.main-subheading{margin:15px auto 0;text-align:center;line-height:1.6}.main-heading,.main-subheading{word-break:break-word;overflow-wrap:anywhere}.features-wrapper{text-align:center;margin-top:15px}.feature-grid{display:flex;justify-content:space-between;align-items:center;width:100%;margin:45px 0 40px}.feature-column{display:flex;flex-direction:column;gap:60px;width:35%}.feature-item{width:100%;align-items:end}.feature-column:first-child .feature-item{text-align:right}.feature-column:last-child .feature-item{text-align:left}.logo-img{display:flex;justify-content:center;align-items:center}.logotype-boxed{box-shadow:0 2px 4px #0000002e;padding:10px}.cta-image{width:30%;display:flex;justify-content:center;align-items:center;margin:0 40px}.center-image{display:flex;justify-content:center;align-items:center;overflow:hidden}.center-image img{display:block;max-width:100%;height:auto}.description{display:flex;justify-content:center;text-align:center;padding:0 15%}@media (max-width: 992px){.feature-grid{flex-direction:column;align-items:center;gap:40px;margin:25px 0}.center-image{order:3;width:280px;margin:10px 0 25px}.feature-column{width:100%;align-items:center;gap:35px}.feature-item{text-align:center!important;align-items:center}.description{padding:0 8%}}@media (max-width: 768px){.sale-bar{padding:30px 20px}.center-image{width:230px}.description{padding:0 6%}.feature-column{gap:28px}}@media (max-width: 480px){.sale-bar{padding:25px 15px}.center-image{width:80%}.logo-img{height:70px!important;align-items:center!important;text-align:center!important}simpo-text-editor.fs-1{font-size:28px!important}.feature-item{display:flex;flex-direction:column;gap:8px;text-align:center!important;align-items:center!important}.main-subheading{margin:5px auto 0!important;padding:0!important}.feature-item{gap:0px!important}.cta-image{width:100%!important;height:100%!important}}\n"] }]
-        }], propDecorators: { edit: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], customClass: [{
-                type: Input
-            }], nextComponentColor: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], delete: [{
-                type: Input
             }] } });
 class EndUserService {
@@ -24293,5 +24288,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
-export { API_URL, APPOINTMENT_URL, AddNewSectionComponent, AlignContent, AlignmentDirective, AnimationDirective, AppointmentBookingComponent, 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, CondensedAndGradientComponent, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CountdownBannerComponent, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EnrollmentFormComponent, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, FourFeaturesCenteredImageComponent, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HeightDirective, HoverAnimationDirective, HoverDirective, IconDirectiveDirective, ImageBackgroundComponent, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridHotspotComponent, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LOCAL_STORAGE, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, MergeHeaderDirective, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlappingImageComponent, OverlayDirective, OverlayValue, PASSBOOK_URL, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, ReturnsCalculatorComponent, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, SchemeDetailComponent, SchemesComponent, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, SpacingDirective, StoreListComponent, StorePageComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, TranslateOnhoverDirective, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoGridSectionComponent, VideoRatio, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, checkItemAlreadyAdded, contentAlignment, fitContent, fitScreen, fontSize, headlineAnimationType, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData, syncItemToServerDBRequest };
+export { API_URL, APPOINTMENT_URL, AddNewSectionComponent, AlignContent, AlignmentDirective, AnimationDirective, AppointmentBookingComponent, 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, CountdownBannerComponent, 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, ImageBackgroundComponent, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridHotspotComponent, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LOCAL_STORAGE, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, MergeHeaderDirective, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlappingImageComponent, OverlayDirective, OverlayValue, PASSBOOK_URL, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, ReturnsCalculatorComponent, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, SchemeDetailComponent, SchemesComponent, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, SpacingDirective, StoreListComponent, StorePageComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, TranslateOnhoverDirective, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoGridSectionComponent, VideoRatio, 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