simpo-component-library 3.6.742 → 3.6.744

package/fesm2022/simpo-component-library.mjs

@@ -244,8 +244,8 @@ var SPACING$1;
 })(SPACING$1 || (SPACING$1 = {}));
 var BANNERALIGNMENT;
 (function (BANNERALIGNMENT) {
-    BANNERALIGNMENT["left"] = "flex-lg-row-reverse";
-    BANNERALIGNMENT["right"] = "flex-lg-row";
+    BANNERALIGNMENT["left"] = "flex-lg-row";
+    BANNERALIGNMENT["right"] = "flex-lg-row-reverse";
     BANNERALIGNMENT["top"] = "flex-column";
     BANNERALIGNMENT["bottom"] = "flex-column-reverse";
 })(BANNERALIGNMENT || (BANNERALIGNMENT = {}));
@@ -3532,7 +3532,7 @@ class RestService {
             payload["minRating"] = minRating;
         if (maxRating > 0)
             payload["maxRating"] = maxRating;
-        return this.http.put(this.BASE_URL + `ecommerce/product/item/search?isJewellery=${this.isJewellery}`, payload).pipe(map((response) => {
+        return this.http.put(this.BASE_URL + `ecommerce/product/itemV2/search?isJewellery=${this.isJewellery}`, payload).pipe(map((response) => {
             return {
                 count: response.data.count,
                 minPrice: response.data.minPrice,
@@ -6786,7 +6786,7 @@ class ImageGridSectionComponent extends BaseSection {
         setTimeout(() => this.updateEdges(), 300);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageGridSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageGridSectionComponent, isStandalone: true, selector: "simpo-image-grid-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "imagegrid", first: true, predicate: ["imagegrid"], descendants: true }, { propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n        [ngStyle]=\"style?.fullWidth ? {'padding': '0px'} : {}\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\">\r\n            <ng-container *ngIf=\"edit ||  (text.value && text.value.length > 0)\">\r\n              <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"style?.gridStyle == 'Style1'\">\r\n          <button class=\"scroll-btn left p-0 d-flex align-items-center justify-content-center\"\r\n            *ngIf=\"style?.direction === 'ROW' && isOverflowing\" (click)=\"scrollLeft()\"\r\n            [disabled]=\"atStart\"><mat-icon>keyboard_arrow_left</mat-icon>\r\n          </button>\r\n          <div class=\"main-image-section d-flex position-relative\" [class.row]=\"style?.direction == 'ROW' \"\r\n            [class.wrap-scroll]=\"style?.direction == 'ROW'\" [class.flex-wrap]=\"style?.direction == 'COLUMN'\"\r\n            [id]=\"data?.id\" #imagegrid [style.justifyContent]=\"getJustifyContent()\" (scroll)=\"onScroll()\">\r\n            <div class=\"image-section p-3\" *ngFor=\"let img of content?.listItem?.data\"\r\n              [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\r\n              [attr.style]=\"style?.removeGaps ? 'padding: 0px !important; margin: 0px !important;' : {}\">\r\n              <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\" [src]=\"img.image.url\"\r\n                [alt]=\"img.image.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\"\r\n                [sectionId]=\"data?.id\" class=\"w-100\" />\r\n            </div>\r\n          </div>\r\n          <button class=\"scroll-btn right p-0 d-flex align-items-center justify-content-center\"\r\n            *ngIf=\"style?.direction === 'ROW' && isOverflowing\" (click)=\"scrollRight()\"\r\n            [disabled]=\"atEnd\"><mat-icon>keyboard_arrow_right</mat-icon>\r\n          </button>\r\n\r\n        </ng-container>\r\n        <ng-container *ngIf=\"style?.gridStyle == 'Style2'\">\r\n          <div class=\"grid h-100\" [class.remove-gap]=\"style?.removeGaps\" [class.p-0]=\"style?.fullWidth\">\r\n            <ng-container *ngFor=\"let img of content?.listItem?.data\">\r\n              <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\" [src]=\"img.image.url\"\r\n                [alt]=\"img.image.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\"\r\n                [sectionId]=\"data?.id\" class=\"w-100\" />\r\n            </ng-container>\r\n          </div>\r\n\r\n\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.wrap-scroll{overflow:scroll;flex-wrap:nowrap}@media screen and (min-width : 1200px){.grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;grid-gap:5px}.grid img:first-child:last-child{grid-column:1 / span 2}.grid img:first-child:nth-last-child(2),.grid img:nth-child(2):last-child{grid-column:span 1;height:100%}.grid img:nth-child(3n+1):not(:last-child){grid-column:1;grid-row:span 2;height:100%}.grid img:nth-child(3n+2){grid-column:2}.grid img:nth-child(3n+3){grid-column:2;align-self:end}.grid img:nth-child(3n+4){grid-column:1 / span 2}}.remove-gap{grid-gap:0!important}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}.main-image-container{width:100%}@media screen and (max-width: 760px){.scroll-btn{display:none!important}}.right-column-container{display:flex;flex-direction:column;height:100%;padding:0}.image-half-height{height:50%!important;flex:1}.image-half-height:first-child{margin-bottom:2px}.scroll-btn{position:absolute;top:50%;z-index:10;font-size:18px;width:36px!important;height:36px!important;border-radius:50%;border:none}.scroll-btn.left{left:8px}.scroll-btn.right{right:8px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageGridSectionComponent, isStandalone: true, selector: "simpo-image-grid-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "imagegrid", first: true, predicate: ["imagegrid"], descendants: true }, { propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n        [ngStyle]=\"style?.fullWidth ? {'padding': '0px'} : {}\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\">\r\n            <ng-container *ngIf=\"edit ||  (text.value && text.value.length > 0)\">\r\n              <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"style?.gridStyle == 'Style1'\">\r\n          <button class=\"scroll-btn left p-0 d-flex align-items-center justify-content-center\"\r\n            *ngIf=\"style?.direction === 'ROW' && isOverflowing\" (click)=\"scrollLeft()\"\r\n            [disabled]=\"atStart\"><mat-icon>keyboard_arrow_left</mat-icon>\r\n          </button>\r\n          <div class=\"main-image-section d-flex position-relative\" [class.row]=\"style?.direction == 'ROW' \"\r\n            [class.wrap-scroll]=\"style?.direction == 'ROW'\" [class.flex-wrap]=\"style?.direction == 'COLUMN'\"\r\n            [class.mobile-two-columns]=\"style?.direction == 'COLUMN' && style?.mobileColumn == 2\" [id]=\"data?.id\"\r\n            #imagegrid [style.justifyContent]=\"getJustifyContent()\" (scroll)=\"onScroll()\">\r\n            <div class=\"image-section p-md-3 p-2\" *ngFor=\"let img of content?.listItem?.data\"\r\n              [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\r\n              [attr.style]=\"style?.removeGaps ? 'padding: 0px !important; margin: 0px !important;' : {}\">\r\n              <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\" [src]=\"img.image.url\"\r\n                [alt]=\"img.image.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\"\r\n                [sectionId]=\"data?.id\" class=\"w-100\" />\r\n            </div>\r\n          </div>\r\n          <button class=\"scroll-btn right p-0 d-flex align-items-center justify-content-center\"\r\n            *ngIf=\"style?.direction === 'ROW' && isOverflowing\" (click)=\"scrollRight()\"\r\n            [disabled]=\"atEnd\"><mat-icon>keyboard_arrow_right</mat-icon>\r\n          </button>\r\n\r\n        </ng-container>\r\n        <ng-container *ngIf=\"style?.gridStyle == 'Style2'\">\r\n          <div class=\"grid h-100\" [class.remove-gap]=\"style?.removeGaps\" [class.p-0]=\"style?.fullWidth\">\r\n            <ng-container *ngFor=\"let img of content?.listItem?.data\">\r\n              <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\" [src]=\"img.image.url\"\r\n                [alt]=\"img.image.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\"\r\n                [sectionId]=\"data?.id\" class=\"w-100\" />\r\n            </ng-container>\r\n          </div>\r\n\r\n\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.wrap-scroll{overflow:scroll;flex-wrap:nowrap}@media screen and (min-width : 1200px){.grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;grid-gap:5px}.grid img:first-child:last-child{grid-column:1 / span 2}.grid img:first-child:nth-last-child(2),.grid img:nth-child(2):last-child{grid-column:span 1;height:100%}.grid img:nth-child(3n+1):not(:last-child){grid-column:1;grid-row:span 2;height:100%}.grid img:nth-child(3n+2){grid-column:2}.grid img:nth-child(3n+3){grid-column:2;align-self:end}.grid img:nth-child(3n+4){grid-column:1 / span 2}}.remove-gap{grid-gap:0!important}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}.main-image-container{width:100%}@media screen and (max-width: 760px){.scroll-btn{display:none!important}.mobile-two-columns{display:grid!important;grid-template-columns:1fr 1fr;grid-auto-rows:auto;grid-gap:5px;padding:0!important}}.right-column-container{display:flex;flex-direction:column;height:100%;padding:0}.image-half-height{height:50%!important;flex:1}.image-half-height:first-child{margin-bottom:2px}.scroll-btn{position:absolute;top:50%;z-index:10;font-size:18px;width:36px!important;height:36px!important;border-radius:50%;border:none}.scroll-btn.left{left:8px}.scroll-btn.right{right:8px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
@@ -6823,7 +6823,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SpacingHorizontalDirective,
                         SimpoWrapComntainer,
                         MatIcon
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n        [ngStyle]=\"style?.fullWidth ? {'padding': '0px'} : {}\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\">\r\n            <ng-container *ngIf=\"edit ||  (text.value && text.value.length > 0)\">\r\n              <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"style?.gridStyle == 'Style1'\">\r\n          <button class=\"scroll-btn left p-0 d-flex align-items-center justify-content-center\"\r\n            *ngIf=\"style?.direction === 'ROW' && isOverflowing\" (click)=\"scrollLeft()\"\r\n            [disabled]=\"atStart\"><mat-icon>keyboard_arrow_left</mat-icon>\r\n          </button>\r\n          <div class=\"main-image-section d-flex position-relative\" [class.row]=\"style?.direction == 'ROW' \"\r\n            [class.wrap-scroll]=\"style?.direction == 'ROW'\" [class.flex-wrap]=\"style?.direction == 'COLUMN'\"\r\n            [id]=\"data?.id\" #imagegrid [style.justifyContent]=\"getJustifyContent()\" (scroll)=\"onScroll()\">\r\n            <div class=\"image-section p-3\" *ngFor=\"let img of content?.listItem?.data\"\r\n              [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\r\n              [attr.style]=\"style?.removeGaps ? 'padding: 0px !important; margin: 0px !important;' : {}\">\r\n              <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\" [src]=\"img.image.url\"\r\n                [alt]=\"img.image.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\"\r\n                [sectionId]=\"data?.id\" class=\"w-100\" />\r\n            </div>\r\n          </div>\r\n          <button class=\"scroll-btn right p-0 d-flex align-items-center justify-content-center\"\r\n            *ngIf=\"style?.direction === 'ROW' && isOverflowing\" (click)=\"scrollRight()\"\r\n            [disabled]=\"atEnd\"><mat-icon>keyboard_arrow_right</mat-icon>\r\n          </button>\r\n\r\n        </ng-container>\r\n        <ng-container *ngIf=\"style?.gridStyle == 'Style2'\">\r\n          <div class=\"grid h-100\" [class.remove-gap]=\"style?.removeGaps\" [class.p-0]=\"style?.fullWidth\">\r\n            <ng-container *ngFor=\"let img of content?.listItem?.data\">\r\n              <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\" [src]=\"img.image.url\"\r\n                [alt]=\"img.image.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\"\r\n                [sectionId]=\"data?.id\" class=\"w-100\" />\r\n            </ng-container>\r\n          </div>\r\n\r\n\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.wrap-scroll{overflow:scroll;flex-wrap:nowrap}@media screen and (min-width : 1200px){.grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;grid-gap:5px}.grid img:first-child:last-child{grid-column:1 / span 2}.grid img:first-child:nth-last-child(2),.grid img:nth-child(2):last-child{grid-column:span 1;height:100%}.grid img:nth-child(3n+1):not(:last-child){grid-column:1;grid-row:span 2;height:100%}.grid img:nth-child(3n+2){grid-column:2}.grid img:nth-child(3n+3){grid-column:2;align-self:end}.grid img:nth-child(3n+4){grid-column:1 / span 2}}.remove-gap{grid-gap:0!important}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}.main-image-container{width:100%}@media screen and (max-width: 760px){.scroll-btn{display:none!important}}.right-column-container{display:flex;flex-direction:column;height:100%;padding:0}.image-half-height{height:50%!important;flex:1}.image-half-height:first-child{margin-bottom:2px}.scroll-btn{position:absolute;top:50%;z-index:10;font-size:18px;width:36px!important;height:36px!important;border-radius:50%;border:none}.scroll-btn.left{left:8px}.scroll-btn.right{right:8px}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n        [ngStyle]=\"style?.fullWidth ? {'padding': '0px'} : {}\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\">\r\n            <ng-container *ngIf=\"edit ||  (text.value && text.value.length > 0)\">\r\n              <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"style?.gridStyle == 'Style1'\">\r\n          <button class=\"scroll-btn left p-0 d-flex align-items-center justify-content-center\"\r\n            *ngIf=\"style?.direction === 'ROW' && isOverflowing\" (click)=\"scrollLeft()\"\r\n            [disabled]=\"atStart\"><mat-icon>keyboard_arrow_left</mat-icon>\r\n          </button>\r\n          <div class=\"main-image-section d-flex position-relative\" [class.row]=\"style?.direction == 'ROW' \"\r\n            [class.wrap-scroll]=\"style?.direction == 'ROW'\" [class.flex-wrap]=\"style?.direction == 'COLUMN'\"\r\n            [class.mobile-two-columns]=\"style?.direction == 'COLUMN' && style?.mobileColumn == 2\" [id]=\"data?.id\"\r\n            #imagegrid [style.justifyContent]=\"getJustifyContent()\" (scroll)=\"onScroll()\">\r\n            <div class=\"image-section p-md-3 p-2\" *ngFor=\"let img of content?.listItem?.data\"\r\n              [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\r\n              [attr.style]=\"style?.removeGaps ? 'padding: 0px !important; margin: 0px !important;' : {}\">\r\n              <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\" [src]=\"img.image.url\"\r\n                [alt]=\"img.image.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\"\r\n                [sectionId]=\"data?.id\" class=\"w-100\" />\r\n            </div>\r\n          </div>\r\n          <button class=\"scroll-btn right p-0 d-flex align-items-center justify-content-center\"\r\n            *ngIf=\"style?.direction === 'ROW' && isOverflowing\" (click)=\"scrollRight()\"\r\n            [disabled]=\"atEnd\"><mat-icon>keyboard_arrow_right</mat-icon>\r\n          </button>\r\n\r\n        </ng-container>\r\n        <ng-container *ngIf=\"style?.gridStyle == 'Style2'\">\r\n          <div class=\"grid h-100\" [class.remove-gap]=\"style?.removeGaps\" [class.p-0]=\"style?.fullWidth\">\r\n            <ng-container *ngFor=\"let img of content?.listItem?.data\">\r\n              <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\" [src]=\"img.image.url\"\r\n                [alt]=\"img.image.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\"\r\n                [sectionId]=\"data?.id\" class=\"w-100\" />\r\n            </ng-container>\r\n          </div>\r\n\r\n\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.wrap-scroll{overflow:scroll;flex-wrap:nowrap}@media screen and (min-width : 1200px){.grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;grid-gap:5px}.grid img:first-child:last-child{grid-column:1 / span 2}.grid img:first-child:nth-last-child(2),.grid img:nth-child(2):last-child{grid-column:span 1;height:100%}.grid img:nth-child(3n+1):not(:last-child){grid-column:1;grid-row:span 2;height:100%}.grid img:nth-child(3n+2){grid-column:2}.grid img:nth-child(3n+3){grid-column:2;align-self:end}.grid img:nth-child(3n+4){grid-column:1 / span 2}}.remove-gap{grid-gap:0!important}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}.main-image-container{width:100%}@media screen and (max-width: 760px){.scroll-btn{display:none!important}.mobile-two-columns{display:grid!important;grid-template-columns:1fr 1fr;grid-auto-rows:auto;grid-gap:5px;padding:0!important}}.right-column-container{display:flex;flex-direction:column;height:100%;padding:0}.image-half-height{height:50%!important;flex:1}.image-half-height:first-child{margin-bottom:2px}.scroll-btn{position:absolute;top:50%;z-index:10;font-size:18px;width:36px!important;height:36px!important;border-radius:50%;border:none}.scroll-btn.left{left:8px}.scroll-btn.right{right:8px}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { imagegrid: [{
                 type: ViewChild,
                 args: ['imagegrid', { static: false }]
@@ -7177,6 +7177,42 @@ class TestimonialSectionComponent extends BaseSection {
         const toHex = (n) => n.toString(16).padStart(2, '0');
         return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
     }
+    getIndicatorColor() {
+        const bg = this.style?.background;
+        if (!bg)
+            return '#000';
+        if (bg.backgroundType === 'Solid') {
+            return this.isDarkColor(bg.color) ? '#ffffff' : '#000000';
+        }
+        if (bg.backgroundType === 'Gradient') {
+            const isPrimaryDark = this.isDarkColor(bg.color);
+            const isSecondaryDark = this.isDarkColor(bg.secondaryColor);
+            // If both are dark → use white
+            if (isPrimaryDark && isSecondaryDark) {
+                return '#ffffff';
+            }
+            // If both are light → use black
+            if (!isPrimaryDark && !isSecondaryDark) {
+                return '#000000';
+            }
+            // Mixed → choose safest contrast (white usually better)
+            return '#ffffff';
+        }
+        return '#000000';
+    }
+    isDarkColor(hex) {
+        if (!hex)
+            return false;
+        // Remove #
+        hex = hex.replace('#', '');
+        // Convert to RGB
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        // Perceived brightness formula
+        const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+        return brightness < 128; // true = dark
+    }
     getScreenSize() {
         this.screenWidth = window.innerWidth;
     }
@@ -7249,7 +7285,7 @@ class TestimonialSectionComponent extends BaseSection {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestimonialSectionComponent, deps: [{ token: EventsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }, { propertyName: "carouselInner", first: true, predicate: ["carouselInner"], descendants: true }, { propertyName: "carouselItems", predicate: ["carouselItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n    [class.px-1]=\"screenWidth < 475\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row content-side w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n\r\n        <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\"\r\n          data-bs-keyboard=\"false\">\r\n          <ol class=\"carousel-indicators\">\r\n            <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n              data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n          </ol>\r\n          <div class=\"carousel-inner\" #carouselInner>\r\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n              [class.active]=\"i === 0\" data-bs-interval=\"10000\" #carouselItem>\r\n              <div style=\"width: max-content; margin: auto; max-width: 90%;\" class=\"carousel-parent\"\r\n                [class.card-form]=\"content?.display?.showCard\" [simpoCorner]=\"style?.corners\"\r\n                [style.borderColor]=\"content?.display?.showCard ? style?.background?.accentColor : 'none'\"\r\n                [style.background]=\"content?.display?.showCard ? getColor(style?.background?.accentColor) : 'transparent'\">\r\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n                  [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n                  <ng-container *ngIf=\"content?.display?.showImage\">\r\n                    <img loading=\"lazy\" [src]=\"testimonial?.image?.url\" class=\"mb-1\" loading=\"lazy\"\r\n                      [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\"\r\n                      [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\r\n                  </ng-container>\r\n                  <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\"\r\n                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                  <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\r\n                    <div class=\"d-flex\">\r\n                      <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n            data-bs-slide=\"prev\" *ngIf=\"getLength() > 1\">\r\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Previous</span>\r\n          </a>\r\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n            data-bs-slide=\"next\" *ngIf=\"getLength() > 1\">\r\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Next</span>\r\n          </a>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".total-container{position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-45px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5  0 0 1 0 .708l-6 6a.5.5 0 0  1-.708-.708L10.293 8 4.646 2.354a.5.5  0 0 1 0-.708z'/%3e%3c/svg%3e\")}.carousel-item{height:100%;transition:transform .6s ease-in-out,opacity .6s ease-in-out}.previous-icon{position:absolute;height:45px}.card-form{border-width:2px;border-style:solid;padding:16px}.carousel-inner{overflow:visible!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.carousel-parent,.carousel-caption{width:100%!important}}li{list-style:none}.heading-medium{font-weight:400!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }, { propertyName: "carouselInner", first: true, predicate: ["carouselInner"], descendants: true }, { propertyName: "carouselItems", predicate: ["carouselItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n    [class.px-1]=\"screenWidth < 475\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row content-side w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n\r\n        <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\"\r\n          data-bs-keyboard=\"false\">\r\n          <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n            <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n              data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n            </li>\r\n          </ol>\r\n          <div class=\"carousel-inner\" #carouselInner>\r\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n              [class.active]=\"i === 0\" data-bs-interval=\"10000\" #carouselItem>\r\n              <div style=\"width: max-content; margin: auto; max-width: 90%;\" class=\"carousel-parent\"\r\n                [class.card-form]=\"content?.display?.showCard\" [simpoCorner]=\"style?.corners\"\r\n                [style.borderColor]=\"content?.display?.showCard ? style?.background?.accentColor : 'none'\"\r\n                [style.background]=\"content?.display?.showCard ? getColor(style?.background?.accentColor) : 'transparent'\">\r\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n                  [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n                  <ng-container *ngIf=\"content?.display?.showImage\">\r\n                    <img loading=\"lazy\" [src]=\"testimonial?.image?.url\" class=\"mb-1\" loading=\"lazy\"\r\n                      [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\"\r\n                      [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\r\n                  </ng-container>\r\n                  <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\"\r\n                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                  <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\r\n                    <div class=\"d-flex\">\r\n                      <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n            data-bs-slide=\"prev\" *ngIf=\"getLength() > 1\">\r\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Previous</span>\r\n          </a>\r\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n            data-bs-slide=\"next\" *ngIf=\"getLength() > 1\">\r\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Next</span>\r\n          </a>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".total-container{position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}.carousel-indicators{bottom:-45px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5  0 0 1 0 .708l-6 6a.5.5 0 0  1-.708-.708L10.293 8 4.646 2.354a.5.5  0 0 1 0-.708z'/%3e%3c/svg%3e\")}.carousel-item{height:100%;transition:transform .6s ease-in-out,opacity .6s ease-in-out}.previous-icon{position:absolute;height:45px}.card-form{border-width:2px;border-style:solid;padding:16px}.carousel-inner{overflow:visible!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.carousel-parent,.carousel-caption{width:100%!important}}li{list-style:none}.heading-medium{font-weight:400!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContainerFitDirective, selector: "[simpoContainerLayout]", inputs: ["simpoContainerLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
@@ -7284,7 +7320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TextEditorComponent,
                         ImageEditorDirective,
                         SpacingHorizontalDirective,
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n    [class.px-1]=\"screenWidth < 475\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row content-side w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n\r\n        <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\"\r\n          data-bs-keyboard=\"false\">\r\n          <ol class=\"carousel-indicators\">\r\n            <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n              data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n          </ol>\r\n          <div class=\"carousel-inner\" #carouselInner>\r\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n              [class.active]=\"i === 0\" data-bs-interval=\"10000\" #carouselItem>\r\n              <div style=\"width: max-content; margin: auto; max-width: 90%;\" class=\"carousel-parent\"\r\n                [class.card-form]=\"content?.display?.showCard\" [simpoCorner]=\"style?.corners\"\r\n                [style.borderColor]=\"content?.display?.showCard ? style?.background?.accentColor : 'none'\"\r\n                [style.background]=\"content?.display?.showCard ? getColor(style?.background?.accentColor) : 'transparent'\">\r\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n                  [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n                  <ng-container *ngIf=\"content?.display?.showImage\">\r\n                    <img loading=\"lazy\" [src]=\"testimonial?.image?.url\" class=\"mb-1\" loading=\"lazy\"\r\n                      [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\"\r\n                      [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\r\n                  </ng-container>\r\n                  <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\"\r\n                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                  <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\r\n                    <div class=\"d-flex\">\r\n                      <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n            data-bs-slide=\"prev\" *ngIf=\"getLength() > 1\">\r\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Previous</span>\r\n          </a>\r\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n            data-bs-slide=\"next\" *ngIf=\"getLength() > 1\">\r\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Next</span>\r\n          </a>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".total-container{position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-45px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5  0 0 1 0 .708l-6 6a.5.5 0 0  1-.708-.708L10.293 8 4.646 2.354a.5.5  0 0 1 0-.708z'/%3e%3c/svg%3e\")}.carousel-item{height:100%;transition:transform .6s ease-in-out,opacity .6s ease-in-out}.previous-icon{position:absolute;height:45px}.card-form{border-width:2px;border-style:solid;padding:16px}.carousel-inner{overflow:visible!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.carousel-parent,.carousel-caption{width:100%!important}}li{list-style:none}.heading-medium{font-weight:400!important}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n    [class.px-1]=\"screenWidth < 475\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row content-side w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n\r\n        <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\"\r\n          data-bs-keyboard=\"false\">\r\n          <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n            <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n              data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n            </li>\r\n          </ol>\r\n          <div class=\"carousel-inner\" #carouselInner>\r\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n              [class.active]=\"i === 0\" data-bs-interval=\"10000\" #carouselItem>\r\n              <div style=\"width: max-content; margin: auto; max-width: 90%;\" class=\"carousel-parent\"\r\n                [class.card-form]=\"content?.display?.showCard\" [simpoCorner]=\"style?.corners\"\r\n                [style.borderColor]=\"content?.display?.showCard ? style?.background?.accentColor : 'none'\"\r\n                [style.background]=\"content?.display?.showCard ? getColor(style?.background?.accentColor) : 'transparent'\">\r\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n                  [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n                  <ng-container *ngIf=\"content?.display?.showImage\">\r\n                    <img loading=\"lazy\" [src]=\"testimonial?.image?.url\" class=\"mb-1\" loading=\"lazy\"\r\n                      [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\"\r\n                      [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\r\n                  </ng-container>\r\n                  <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\"\r\n                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                  <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\r\n                    <div class=\"d-flex\">\r\n                      <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n            data-bs-slide=\"prev\" *ngIf=\"getLength() > 1\">\r\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Previous</span>\r\n          </a>\r\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n            data-bs-slide=\"next\" *ngIf=\"getLength() > 1\">\r\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Next</span>\r\n          </a>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".total-container{position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}.carousel-indicators{bottom:-45px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5  0 0 1 0 .708l-6 6a.5.5 0 0  1-.708-.708L10.293 8 4.646 2.354a.5.5  0 0 1 0-.708z'/%3e%3c/svg%3e\")}.carousel-item{height:100%;transition:transform .6s ease-in-out,opacity .6s ease-in-out}.previous-icon{position:absolute;height:45px}.card-form{border-width:2px;border-style:solid;padding:16px}.carousel-inner{overflow:visible!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.carousel-parent,.carousel-caption{width:100%!important}}li{list-style:none}.heading-medium{font-weight:400!important}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: i0.Renderer2 }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -7659,10 +7695,11 @@ var cartType;
 })(cartType || (cartType = {}));
 
 class StorageServiceService {
-    constructor(eventService, cookieService, restService, router, platformId) {
+    constructor(eventService, cookieService, restService, storage, router, platformId) {
         this.eventService = eventService;
         this.cookieService = cookieService;
         this.restService = restService;
+        this.storage = storage;
         this.router = router;
         this.platformId = platformId;
         this.totalCartItems = 0;
@@ -7688,70 +7725,68 @@ class StorageServiceService {
     get getTotalCartItems() {
         if (this.totalCartItems < 0)
             this.totalCartItems = 0;
-        this.eventService.showBagIcon.emit(this.totalCartItems > 0);
+        // this.eventService.showBagIcon.emit(this.totalCartItems > 0);
         return this.totalCartItems;
     }
-    async createDataBase() {
-        // SSR-safe IndexedDB initialization
-        if (isPlatformBrowser(this.platformId) && window.indexedDB) {
-            const request = window.indexedDB.open(this.databaseName, 1);
-            this.eventService.showLoadingScreen.emit(true);
-            request.onerror = () => {
-                console.error('[IndexedDB] Failed to open database');
-                this.eventService.showLoadingScreen.emit(false);
-            };
-            request.onsuccess = async (event) => {
-                this.database = event.target.result;
-                try {
-                    const userCartRequest = await this.getUserCart();
-                    userCartRequest.onsuccess = (userCartResponse) => {
-                        this.totalCartItems = userCartResponse.target.result.length;
-                        this.getCartTotalAmount = userCartResponse.target.result.reduce((total, item) => {
-                            return total + (item.sellingPrice * item.quantity);
-                        }, 0);
-                        try {
-                            const response = this.addAllProductsToCart(userCartResponse.target.result);
-                            response.oncomplete = () => {
-                                this.eventService.showLoadingScreen.emit(false);
-                            };
-                            response.onerror = () => {
-                                this.eventService.showLoadingScreen.emit(false);
-                            };
-                        }
-                        catch (exception) {
-                            this.eventService.showLoadingScreen.emit(false);
-                        }
-                    };
-                }
-                catch (err) {
+    createDataBase() {
+        this.dbReady = new Promise((resolve, reject) => {
+            if (isPlatformBrowser(this.platformId) && window.indexedDB) {
+                const request = window.indexedDB.open(this.databaseName, 1);
+                this.eventService.showLoadingScreen.emit(true);
+                request.onerror = () => {
+                    console.error('[IndexedDB] Failed to open database');
                     this.eventService.showLoadingScreen.emit(false);
-                }
-            };
-            request.onupgradeneeded = (event) => {
-                this.database = event.target.result;
-                this.cartCollectionRef = this.database.createObjectStore(this.cartCollectionName, { keyPath: "varientId" });
-                this.trialCartCollectionRef = this.database.createObjectStore(this.trialCartCollectionName, { keyPath: "varientId" });
-                this.favouriteCollectionRef = this.database.createObjectStore(this.favouriteCollectionName, { keyPath: "varientId" });
-                this.userCollectionRef = this.database.createObjectStore(this.userCollectionName, { keyPath: "userId" });
-            };
-        }
-        else {
-            // SSR mode — skip IndexedDB
-            console.warn('[SSR] IndexedDB not available, createDataBase() skipped.');
-        }
+                    reject();
+                };
+                request.onsuccess = async (event) => {
+                    this.database = event.target.result;
+                    this.eventService.showLoadingScreen.emit(false);
+                    resolve(); // ✅ VERY IMPORTANT
+                };
+                request.onupgradeneeded = (event) => {
+                    this.database = event.target.result;
+                    if (!this.database.objectStoreNames.contains(this.cartCollectionName)) {
+                        this.database.createObjectStore(this.cartCollectionName, { keyPath: "varientId" });
+                    }
+                    if (!this.database.objectStoreNames.contains(this.trialCartCollectionName)) {
+                        this.database.createObjectStore(this.trialCartCollectionName, { keyPath: "varientId" });
+                    }
+                    if (!this.database.objectStoreNames.contains(this.favouriteCollectionName)) {
+                        this.database.createObjectStore(this.favouriteCollectionName, { keyPath: "varientId" });
+                    }
+                    if (!this.database.objectStoreNames.contains(this.userCollectionName)) {
+                        this.database.createObjectStore(this.userCollectionName, { keyPath: "userId" });
+                    }
+                };
+            }
+            else {
+                console.warn('[SSR] IndexedDB not available');
+                resolve();
+            }
+        });
+        return this.dbReady;
     }
     setToken(token) {
         this.cookieService.set("passBookToken", token);
-        // localStorage.setItem("token", token);
+        // localStorage.setItem("passBookToken", token);
+        this.storage.setItem("passBookToken", token);
     }
     getToken() {
-        this.cookieService.get('passBookToken');
+        let token = this.cookieService.get('passBookToken');
+        if (!token)
+            token = this.storage.getItem('passBookToken') || "";
+        return token;
     }
     setReferralDetails(details) {
         this.cookieService.set("referralDetails", JSON.stringify(details));
+        this.storage.setItem("referralDetails", JSON.stringify(details));
     }
     getReferralDetails() {
-        return this.cookieService.get("referralDetails");
+        let referralDetails = this.cookieService.get('referralDetails');
+        if (!referralDetails) {
+            referralDetails = this.storage.getItem("referralDetails");
+        }
+        return referralDetails;
     }
     updateAllData() {
         if (this.router.url.includes('cart'))
@@ -7812,8 +7847,9 @@ class StorageServiceService {
     }
     // CART SERVICE
     async getUserCart() {
+        await this.dbReady;
         const transaction = this.database?.transaction(this.cartCollectionName ?? "USER_CART", "readwrite");
-        return await transaction.objectStore(this.cartCollectionName).getAll();
+        return transaction.objectStore(this.cartCollectionName).getAll();
     }
     addProductToCart(product) {
         const transaction = this.database?.transaction(this.cartCollectionName ?? "USER_CART", "readwrite");
@@ -7888,18 +7924,29 @@ class StorageServiceService {
     // USER SERVICE
     setUser(user) {
         this.cookieService.set("user", JSON.stringify(user ?? "{}"), 7);
+        // localStorage.setItem("user", JSON.stringify(user ?? "{}"));
+        this.storage.setItem("user", JSON.stringify(user ?? "{}"));
         return user;
     }
     getUser() {
         try {
-            const user = JSON.parse(this.cookieService.get("user"));
-            localStorage.setItem("perId", user?.userId);
+            let userStr = this.cookieService.get("user");
+            if (!userStr) {
+                userStr = this.storage.getItem("user") || ""; // ✅ fallback
+            }
+            if (!userStr)
+                return null;
+            const user = JSON.parse(userStr);
+            if (!user?.userId)
+                return null;
+            this.storage.setItem("perId", user.userId);
             return user;
         }
-        catch (exception) { }
-        return null;
+        catch (e) {
+            return null;
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StorageServiceService, deps: [{ token: EventsService }, { token: i2$3.CookieService }, { token: RestService }, { token: i2$2.Router }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StorageServiceService, deps: [{ token: EventsService }, { token: i2$3.CookieService }, { token: RestService }, { token: LOCAL_STORAGE }, { token: i2$2.Router }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StorageServiceService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StorageServiceService, decorators: [{
@@ -7907,7 +7954,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: EventsService }, { type: i2$3.CookieService }, { type: RestService }, { type: i2$2.Router }, { type: Object, decorators: [{
+        }], ctorParameters: () => [{ type: EventsService }, { type: i2$3.CookieService }, { type: RestService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCAL_STORAGE]
+                }] }, { type: i2$2.Router }, { type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
                 }] }] });
@@ -9288,27 +9338,6 @@ class CartComponent extends BaseSection {
                     showCloseButton: true
                 }).then(async (response) => {
                     this.currentTab = "BAG";
-                    this.messageService.add({ severity: 'info', summary: 'Processing', detail: 'Please wait, updaing your cart', life: 2000 });
-                    const regExp = /{([^}]+)}/g;
-                    const id = regExp.exec(error.message)?.[1];
-                    let itemDetail = null;
-                    const productDetailsAsync = await this.restService.getProductDetails(id).toPromise().then((response) => {
-                        itemDetail = response[0];
-                    });
-                    if (response.isDismissed) {
-                        this.cartInfo.orderedItems.forEach((item) => {
-                            if (item.itemId == itemDetail?.itemId)
-                                item.quantity = itemDetail?.itemInventory.openingStock;
-                        });
-                        const addItemDBAsync = await this.restService.addItemToDB(this.cartInfo).toPromise();
-                        const addItemIndexDBAsync = await this.storageService.addAllProductsToCart(this.cartInfo.orderedItems);
-                    }
-                    else if (response.isConfirmed) {
-                        this.cartInfo.orderedItems = this.cartInfo.orderedItems.filter((item) => item.itemId != itemDetail?.itemId);
-                        const addItemDBAsync = await this.restService.addItemToDB(this.cartInfo).toPromise();
-                        const addItemIndexDBAsync = await this.storageService.addAllProductsToCart(this.cartInfo.orderedItems);
-                        this.proceedToPayment();
-                    }
                 });
             }
             else {
@@ -12869,10 +12898,46 @@ class TestimonialFullwidthComponent extends BaseSection {
     getListItemLength() {
         return this.content?.listItem?.data?.length || 0;
     }
+    getIndicatorColor() {
+        const bg = this.style?.background;
+        if (!bg)
+            return '#000';
+        if (bg.backgroundType === 'Solid') {
+            return this.isDarkColor(bg.color) ? '#ffffff' : '#000000';
+        }
+        if (bg.backgroundType === 'Gradient') {
+            const isPrimaryDark = this.isDarkColor(bg.color);
+            const isSecondaryDark = this.isDarkColor(bg.secondaryColor);
+            // If both are dark → use white
+            if (isPrimaryDark && isSecondaryDark) {
+                return '#ffffff';
+            }
+            // If both are light → use black
+            if (!isPrimaryDark && !isSecondaryDark) {
+                return '#000000';
+            }
+            // Mixed → choose safest contrast (white usually better)
+            return '#ffffff';
+        }
+        return '#000000';
+    }
+    isDarkColor(hex) {
+        if (!hex)
+            return false;
+        // Remove #
+        hex = hex.replace('#', '');
+        // Convert to RGB
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        // Perceived brightness formula
+        const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+        return brightness < 128; // true = dark
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestimonialFullwidthComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialFullwidthComponent, isStandalone: true, selector: "simpo-testimonial-fullwidth", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoBorder]=\"style?.border\">\r\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n                    data-bs-keyboard=\"false\">\r\n                    <!-- data-bs-ride=\"carousel\" -->\r\n                    <ol class=\"carousel-indicators\">\r\n                        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n                            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n                    </ol>\r\n                    <div class=\"carousel-inner content-side overflow-visible\">\r\n                        <div class=\"single_card carousel-item\"\r\n                            *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n                            <!-- this is testimonial cards start-->\r\n\r\n                            <div class=\"main-section\" [id]=\"data?.id\"\r\n                                [simpoPositionLayoutDirective]=\"style?.positionLayout\">\r\n                                <div class=\"left\"\r\n                                    [ngClass]=\"{'setHeight' : screenWidth > 475 , 'mb-1': screenWidth <= 475}\">\r\n                                    <div class=\"heading\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                    <div class=\"subtext\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"right\">\r\n                                    <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.image?.url\" [alt]=\"item.image.altText\"\r\n                                            class=\"person-img\" [class]=\"data?.id+(item?.image?.id || '')\"\r\n                                            [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\">\r\n                                        <img class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\"\r\n                                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/753282c1776171503712178724315_3e307710-5dd9-4f94-a34b-c4971fd2d26b.jpg\"\r\n                                            *ngIf=\"!item?.image?.url\">\r\n                                        <div class=\"person-details\">\r\n                                            <div style=\"z-index: 100;\">\r\n                                                <!-- <div class=\"person-name\"\r\n                                                  [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                                <!-- <div class=\"person-type\"\r\n                                                  [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n                                                  [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- this is testimonial cards start-->\r\n                    </div>\r\n                    <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Previous</span>\r\n                    </a>\r\n                    <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Next</span>\r\n                    </a>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5  0 0 1 0 .708l-6 6a.5.5 0 0  1-.708-.708L10.293 8 4.646 2.354a.5.5  0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialFullwidthComponent, isStandalone: true, selector: "simpo-testimonial-fullwidth", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoBorder]=\"style?.border\">\r\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n                    data-bs-keyboard=\"false\">\r\n                    <!-- data-bs-ride=\"carousel\" -->\r\n                    <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n                        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n                            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n                        </li>\r\n                    </ol>\r\n                    <div class=\"carousel-inner content-side overflow-visible\">\r\n                        <div class=\"single_card carousel-item\"\r\n                            *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n                            <!-- this is testimonial cards start-->\r\n                            <div class=\"main-section\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'flex-lg-row-reverse' : style?.positionLayout?.value === 'right' , 'flex-lg-row' : style?.positionLayout?.value === 'left'}\">\r\n                                <div class=\"left\"\r\n                                    [ngClass]=\"{'setHeight' : screenWidth > 475 , 'mb-1': screenWidth <= 475}\">\r\n                                    <div class=\"heading\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                    <div class=\"subtext\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"right\">\r\n                                    <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.image?.url\" class=\"person-img\"\r\n                                            [class]=\"data?.id+(item?.image?.id || '')\" [id]=\"data?.id\"\r\n                                            [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\" *ngIf=\"item?.image?.url\">\r\n                                        <img class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\"\r\n                                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/753282c1776171503712178724315_3e307710-5dd9-4f94-a34b-c4971fd2d26b.jpg\"\r\n                                            *ngIf=\"!item?.image?.url\">\r\n                                        <div class=\"person-details\">\r\n                                            <div style=\"z-index: 100;\">\r\n                                                <!-- <div class=\"person-name\"\r\n                                                  [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                                <!-- <div class=\"person-type\"\r\n                                                  [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n                                                  [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- this is testimonial cards start-->\r\n                    </div>\r\n                    <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Previous</span>\r\n                    </a>\r\n                    <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Next</span>\r\n                    </a>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5  0 0 1 0 .708l-6 6a.5.5 0 0  1-.708-.708L10.293 8 4.646 2.354a.5.5  0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: 
                 //directive
-                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestimonialFullwidthComponent, decorators: [{
             type: Component,
@@ -12904,7 +12969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ImageEditorDirective,
                         ObjectPositionDirective,
                         SpacingHorizontalDirective
-                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoBorder]=\"style?.border\">\r\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n                    data-bs-keyboard=\"false\">\r\n                    <!-- data-bs-ride=\"carousel\" -->\r\n                    <ol class=\"carousel-indicators\">\r\n                        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n                            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n                    </ol>\r\n                    <div class=\"carousel-inner content-side overflow-visible\">\r\n                        <div class=\"single_card carousel-item\"\r\n                            *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n                            <!-- this is testimonial cards start-->\r\n\r\n                            <div class=\"main-section\" [id]=\"data?.id\"\r\n                                [simpoPositionLayoutDirective]=\"style?.positionLayout\">\r\n                                <div class=\"left\"\r\n                                    [ngClass]=\"{'setHeight' : screenWidth > 475 , 'mb-1': screenWidth <= 475}\">\r\n                                    <div class=\"heading\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                    <div class=\"subtext\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"right\">\r\n                                    <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.image?.url\" [alt]=\"item.image.altText\"\r\n                                            class=\"person-img\" [class]=\"data?.id+(item?.image?.id || '')\"\r\n                                            [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\">\r\n                                        <img class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\"\r\n                                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/753282c1776171503712178724315_3e307710-5dd9-4f94-a34b-c4971fd2d26b.jpg\"\r\n                                            *ngIf=\"!item?.image?.url\">\r\n                                        <div class=\"person-details\">\r\n                                            <div style=\"z-index: 100;\">\r\n                                                <!-- <div class=\"person-name\"\r\n                                                  [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                                <!-- <div class=\"person-type\"\r\n                                                  [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n                                                  [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- this is testimonial cards start-->\r\n                    </div>\r\n                    <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Previous</span>\r\n                    </a>\r\n                    <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Next</span>\r\n                    </a>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5  0 0 1 0 .708l-6 6a.5.5 0 0  1-.708-.708L10.293 8 4.646 2.354a.5.5  0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"] }]
+                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoBorder]=\"style?.border\">\r\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n                    data-bs-keyboard=\"false\">\r\n                    <!-- data-bs-ride=\"carousel\" -->\r\n                    <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n                        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n                            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n                        </li>\r\n                    </ol>\r\n                    <div class=\"carousel-inner content-side overflow-visible\">\r\n                        <div class=\"single_card carousel-item\"\r\n                            *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n                            <!-- this is testimonial cards start-->\r\n                            <div class=\"main-section\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'flex-lg-row-reverse' : style?.positionLayout?.value === 'right' , 'flex-lg-row' : style?.positionLayout?.value === 'left'}\">\r\n                                <div class=\"left\"\r\n                                    [ngClass]=\"{'setHeight' : screenWidth > 475 , 'mb-1': screenWidth <= 475}\">\r\n                                    <div class=\"heading\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                    <div class=\"subtext\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"right\">\r\n                                    <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.image?.url\" class=\"person-img\"\r\n                                            [class]=\"data?.id+(item?.image?.id || '')\" [id]=\"data?.id\"\r\n                                            [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\" *ngIf=\"item?.image?.url\">\r\n                                        <img class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\"\r\n                                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/753282c1776171503712178724315_3e307710-5dd9-4f94-a34b-c4971fd2d26b.jpg\"\r\n                                            *ngIf=\"!item?.image?.url\">\r\n                                        <div class=\"person-details\">\r\n                                            <div style=\"z-index: 100;\">\r\n                                                <!-- <div class=\"person-name\"\r\n                                                  [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                                <!-- <div class=\"person-type\"\r\n                                                  [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n                                                  [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- this is testimonial cards start-->\r\n                    </div>\r\n                    <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Previous</span>\r\n                    </a>\r\n                    <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Next</span>\r\n                    </a>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5  0 0 1 0 .708l-6 6a.5.5 0 0  1-.708-.708L10.293 8 4.646 2.354a.5.5  0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -16587,7 +16652,7 @@ class HeaderSectionComponent {
         this.router.navigate(['/login']);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: RestService }, { token: EventsService }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"isHeaderSticky && isMobile && categoryList?.length == 0\">\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n      simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n      <ng-container *ngIf=\"style?.headline?.display\">\r\n        <div>\r\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n\r\n      <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\r\n        [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\r\n      </div>\r\n\r\n      <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"style?.background?.color\">search</mat-icon>\r\n      </div> -->\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n      </ng-container>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container> -->\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div [class.w-15]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n        aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div [class.w-15]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container> </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b>{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \r\n    ((content?.logo?.size >= 60  && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\r\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <div class=\"d-flex gap-3\"\r\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n      <ng-container *ngFor=\"let item of getNavbarButton\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | lowercase | titlecase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n        (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon>person_outline</mat-icon>\r\n        Login\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn && !isMobile\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n    *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\r\n    <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\r\n      <div class=\"item-count fw-bold\">\r\n        {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\r\n        <!-- Total : \u20B9{{ getCartTotalAmount }} -->\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\r\n        View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div> -->\r\n    <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\r\n      <div class=\"input-group w-75 ml-2\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n          [style.color]=\"backgroundInfo?.accentColor\">\r\n        <!-- <span class=\"animated-placeholder position-absolute\" \r\n          [class.animate]=\"animatePlaceholder\"\r\n          *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\r\n          {{ currentPlaceholder }}\r\n        </span> -->\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n          height=\"30\" version=\"1.1\">\r\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n          </g>\r\n        </svg>\r\n        <div [style.color]=\"accentColor\">Schemes</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n        Pincode\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n        getPincode}}</div>\r\n\r\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your PIN Code unlocks\r\n        </div>\r\n        <div class=\"sub-text text-center f-14 pincode-text\">\r\n          Fastest delivery date, Try-at-Home availability,\r\n          Nearest store and In-store design!\r\n        </div>\r\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n          [class.error-border]=\"pinError\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n            class=\"w-75 p-0\">\r\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n        </div>\r\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n          Please enter a valid pincode\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getCartItemsCount}}</div>\r\n      </div>\r\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n      </div>\r\n      <!-- (mouseleave)=\"showLogin = false\" -->\r\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your Account\r\n        </div>\r\n        <div class=\"sub-text text-center f-14\">\r\n          Access account & manage your orders.\r\n        </div>\r\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n            [style.color]=\"style?.background?.color\">Sign Up</div>\r\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n            [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  [ngClass]=\"{'offcanvas-end' : (style?.styling === 'Header1' || style?.styling === 'Header3') && !isEcommerceWebsite, 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4' || isEcommerceWebsite}\">\r\n  <div class=\"offcanvas-header\" [simpoBackground]=\"style?.background\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div>\r\n  <div class=\"offcanvas-body\">\r\n    <div class=\"pages\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\r\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\r\n\r\n\r\n  <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\r\n\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n    *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b>{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-wrapper\"\r\n    *ngIf=\"(categoryList?.length > 0 || collectionList?.collections?.length > 0) && !isMobile\"\r\n    (mouseleave)=\"showList = false; showCollections = false\">\r\n\r\n    <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\r\n\r\n    <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\r\n      [style.background]=\"data?.styles?.headline?.color\">\r\n\r\n      <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList; let i = index\"\r\n        [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n        (mouseenter)=\"showList = true; selectedCategory = ele; showCollections = false\">\r\n        {{ele?.categoryName | titlecase}}\r\n      </div>\r\n\r\n      <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true; showList = false\"\r\n        *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n        [simpoColor]=\"data?.styles?.headline?.color\">\r\n        Collections\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\r\n      <div class=\"row w-100 h-100\">\r\n        <div class=\"col-7 row\">\r\n          <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n            <div class=\"list-header mb-3\">By Price</div>\r\n            <div class=\"d-flex flex-column gap-3 list-item\">\r\n              <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n                <div class=\"each-price cursor-pointer\"\r\n                  (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n                  {{price | titlecase}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-4 h-100 overflow-scroll\"\r\n            *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n            <div class=\"list-header mb-3\">By Style</div>\r\n            <div class=\"d-flex flex-column gap-3 list-item\">\r\n              <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n                <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">\r\n                  {{collection | titlecase}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n            <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n            <div class=\"d-flex flex-column gap-3 list-item\">\r\n              <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n                <div class=\"d-flex gap-2 align-items-center\">\r\n                  <div style=\"width: 15px;height: 20px;\">\r\n                    <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n                  </div>\r\n                  <div class=\"each-price cursor-pointer\">\r\n                    {{collection.name | titlecase}}\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n          <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\r\n            <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n              <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"list-category\" [class.show-dropdown]=\"showCollections\" [class.hide-dropdown]=\"!showCollections\">\r\n      <div class=\"row w-100\">\r\n        <div class=\"col-7 row h-100 overflow-scroll\">\r\n          <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n            <div class=\"collection row col-3 align-items-center mb-3\"\r\n              (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n              <div class=\"col-imag col-4\">\r\n                <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n              </div>\r\n              <div class=\"col-8 text-overflow\">\r\n                {{collection?.collectionName | titlecase}}\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <div class=\"col-5 row\" *ngIf=\"collectionList?.imageUrls\">\r\n          <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n            <div class=\"image-container col-6 position-relative h-45\" *ngIf=\"image\"\r\n              (click)=\"applyFilterToList(image, 'collections')\">\r\n              <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n              <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n                [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">\r\n                {{image}}\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\r\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n      <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\r\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n      </div>\r\n      <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerce_header>\r\n  <header class=\"site-header\">\r\n    <!-- Top Bar: Logo, Search, User Actions -->\r\n    <div class=\"top-bar\">\r\n\r\n      <!-- Mobile Menu Toggle (Checkbox Hack) -->\r\n      <div [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\r\n        <label for=\"mobile-menu-checkbox\" class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\"\r\n          data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n            <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n            <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n          </svg>\r\n        </label>\r\n\r\n        <!-- Logo Section -->\r\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size  + 15\"\r\n            [height]=\"content?.logo?.size\">\r\n        </a>\r\n\r\n        <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n          && content?.logo?.text?.isText \r\n          && content?.logo?.text?.isIcon \r\n          && content?.logo?.text?.url\">\r\n\r\n          <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\r\n            [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\r\n\r\n          <span class=\"logo-text\" [simpoColor]=\"simpoColor\">\r\n            {{ content?.siteName?.value }}\r\n          </span>\r\n        </a>\r\n\r\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n          && content?.logo?.text?.isText \r\n          && !content?.logo?.text?.isIcon\">\r\n\r\n          <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\r\n            {{ content?.siteName?.value }}\r\n          </span>\r\n        </a>\r\n      </div>\r\n\r\n      <!-- Search Bar -->\r\n      <div class=\"search-wrapper\" *ngIf=\"screenWidth > 475\">\r\n        <div class=\"search-bar\">\r\n          <!-- Search Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n          </svg>\r\n          <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n            aria-label=\"Search\">\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Right Actions -->\r\n      <div class=\"user-actions\">\r\n        <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\" *ngIf=\"!getPincode\">\r\n          <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n            stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n            <path\r\n              d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\r\n              fill=\"#000000\" />\r\n          </svg> -->\r\n\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"currentColor\">\r\n            <g>\r\n              <path\r\n                d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\r\n              </path>\r\n              <path\r\n                d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\r\n              </path>\r\n            </g>\r\n          </svg>\r\n\r\n          <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\r\n\r\n        </a>\r\n\r\n        <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n          [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\r\n            <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\r\n            <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\r\n            <path d=\"M2 7h20\"></path>\r\n            <path\r\n              d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\r\n            </path>\r\n          </svg>\r\n          <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\r\n            getPincode}}</span>\r\n\r\n        </a>\r\n\r\n        <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n          <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n            Your PIN Code unlocks\r\n          </div>\r\n          <div class=\"sub-text text-center f-14 pincode-text\">\r\n            Fastest delivery date, Try-at-Home availability,\r\n            Nearest store and In-store design!\r\n          </div>\r\n          <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n            [class.error-border]=\"pinError\">\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n              class=\"w-75 p-0\">\r\n            <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n          </div>\r\n          <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n            Please enter a valid pincode\r\n          </div>\r\n        </div>\r\n\r\n        <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\r\n          (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\r\n          <!-- User Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n          </svg>\r\n        </a>\r\n\r\n        <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n          <!-- User Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n          </svg>\r\n        </a>\r\n\r\n        <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n          <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n            Your Account\r\n          </div>\r\n          <div class=\"sub-text text-center f-14\">\r\n            Access account & manage your orders.\r\n          </div>\r\n          <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n            <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n              [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n              [style.color]=\"style?.background?.color\">Sign Up</div>\r\n            <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n              [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n          </div>\r\n        </div>\r\n\r\n        <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\r\n          <!-- Heart Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path\r\n              d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\r\n            </path>\r\n          </svg>\r\n          <!-- <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\">2</span> -->\r\n        </a>\r\n\r\n        <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\r\n          <!-- Shopping Bag Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\r\n            <path d=\"M3 6h18\"></path>\r\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n          </svg>\r\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n            *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\r\n        </a>\r\n      </div>\r\n    </div>\r\n    <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475\">\r\n      <div class=\"search-bar\">\r\n        <!-- Search Icon SVG -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n          <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n        </svg>\r\n        <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          aria-label=\"Search\">\r\n      </div>\r\n    </div>\r\n\r\n  </header>\r\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%;z-index:1001}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:1000}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative;z-index:1002}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top);left:0;width:100vw;height:calc(100vh - var(--margin-top));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow:hidden}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"isHeaderSticky && isMobile && categoryList?.length == 0\">\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n      simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n      <ng-container *ngIf=\"style?.headline?.display\">\r\n        <div>\r\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n\r\n      <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\r\n        [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\r\n      </div>\r\n\r\n      <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"style?.background?.color\">search</mat-icon>\r\n      </div> -->\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n      </ng-container>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container> -->\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div [class.w-15]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n        aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div [class.w-15]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container> </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b>{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \r\n    ((content?.logo?.size >= 60  && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\r\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <div class=\"d-flex gap-3\"\r\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n      <ng-container *ngFor=\"let item of getNavbarButton\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | lowercase | titlecase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n        (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon>person_outline</mat-icon>\r\n        Login\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn && !isMobile\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n    *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\r\n    <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\r\n      <div class=\"item-count fw-bold\">\r\n        {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\r\n        <!-- Total : \u20B9{{ getCartTotalAmount }} -->\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\r\n        View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div> -->\r\n    <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\r\n      <div class=\"input-group w-75 ml-2\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n          [style.color]=\"backgroundInfo?.accentColor\">\r\n        <!-- <span class=\"animated-placeholder position-absolute\" \r\n          [class.animate]=\"animatePlaceholder\"\r\n          *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\r\n          {{ currentPlaceholder }}\r\n        </span> -->\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n          height=\"30\" version=\"1.1\">\r\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n          </g>\r\n        </svg>\r\n        <div [style.color]=\"accentColor\">Schemes</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n        Pincode\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n        getPincode}}</div>\r\n\r\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your PIN Code unlocks\r\n        </div>\r\n        <div class=\"sub-text text-center f-14 pincode-text\">\r\n          Fastest delivery date, Try-at-Home availability,\r\n          Nearest store and In-store design!\r\n        </div>\r\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n          [class.error-border]=\"pinError\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n            class=\"w-75 p-0\">\r\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n        </div>\r\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n          Please enter a valid pincode\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getCartItemsCount}}</div>\r\n      </div>\r\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n      </div>\r\n      <!-- (mouseleave)=\"showLogin = false\" -->\r\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your Account\r\n        </div>\r\n        <div class=\"sub-text text-center f-14\">\r\n          Access account & manage your orders.\r\n        </div>\r\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n            [style.color]=\"style?.background?.color\">Sign Up</div>\r\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n            [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  [ngClass]=\"{'offcanvas-end' : (style?.styling === 'Header1' || style?.styling === 'Header3') && !isEcommerceWebsite, 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4' || isEcommerceWebsite}\">\r\n  <div class=\"offcanvas-header\" [simpoBackground]=\"style?.background\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div>\r\n  <div class=\"offcanvas-body\">\r\n    <div class=\"pages\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\r\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\r\n\r\n\r\n  <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\r\n\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n    *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b>{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-wrapper\"\r\n    *ngIf=\"(categoryList?.length > 0 || collectionList?.collections?.length > 0) && !isMobile\"\r\n    (mouseleave)=\"showList = false; showCollections = false\">\r\n\r\n    <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\r\n\r\n    <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\r\n      [style.background]=\"data?.styles?.headline?.color\">\r\n\r\n      <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList; let i = index\"\r\n        [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n        (mouseenter)=\"showList = true; selectedCategory = ele; showCollections = false\">\r\n        {{ele?.categoryName | titlecase}}\r\n      </div>\r\n\r\n      <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true; showList = false\"\r\n        *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n        [simpoColor]=\"data?.styles?.headline?.color\">\r\n        Collections\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\r\n      <div class=\"row w-100 h-100\">\r\n        <div class=\"col-7 row\">\r\n          <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n            <div class=\"list-header mb-3\">By Price</div>\r\n            <div class=\"d-flex flex-column gap-3 list-item\">\r\n              <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n                <div class=\"each-price cursor-pointer\"\r\n                  (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n                  {{price | titlecase}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-4 h-100 overflow-scroll\"\r\n            *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n            <div class=\"list-header mb-3\">By Style</div>\r\n            <div class=\"d-flex flex-column gap-3 list-item\">\r\n              <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n                <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">\r\n                  {{collection | titlecase}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n            <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n            <div class=\"d-flex flex-column gap-3 list-item\">\r\n              <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n                <div class=\"d-flex gap-2 align-items-center\">\r\n                  <div style=\"width: 15px;height: 20px;\">\r\n                    <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n                  </div>\r\n                  <div class=\"each-price cursor-pointer\">\r\n                    {{collection.name | titlecase}}\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n          <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\r\n            <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n              <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"list-category\" [class.show-dropdown]=\"showCollections\" [class.hide-dropdown]=\"!showCollections\">\r\n      <div class=\"row w-100\">\r\n        <div class=\"col-7 row h-100 overflow-scroll\">\r\n          <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n            <div class=\"collection row col-3 align-items-center mb-3\"\r\n              (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n              <div class=\"col-imag col-4\">\r\n                <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n              </div>\r\n              <div class=\"col-8 text-overflow\">\r\n                {{collection?.collectionName | titlecase}}\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <div class=\"col-5 row\" *ngIf=\"collectionList?.imageUrls\">\r\n          <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n            <div class=\"image-container col-6 position-relative h-45\" *ngIf=\"image\"\r\n              (click)=\"applyFilterToList(image, 'collections')\">\r\n              <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n              <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n                [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">\r\n                {{image}}\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\r\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n      <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\r\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n      </div>\r\n      <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerce_header>\r\n  <header class=\"site-header\">\r\n    <!-- Top Bar: Logo, Search, User Actions -->\r\n    <div class=\"top-bar\">\r\n\r\n      <!-- Mobile Menu Toggle (Checkbox Hack) -->\r\n      <div [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\r\n        <label for=\"mobile-menu-checkbox\" class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\"\r\n          data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n            <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n            <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n          </svg>\r\n        </label>\r\n\r\n        <!-- Logo Section -->\r\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size  + 15\"\r\n            [height]=\"content?.logo?.size\">\r\n        </a>\r\n\r\n        <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n          && content?.logo?.text?.isText \r\n          && content?.logo?.text?.isIcon \r\n          && content?.logo?.text?.url\">\r\n\r\n          <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\r\n            [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\" *ngIf=\"screenWidth > 475\">\r\n\r\n          <span class=\"logo-text\" [simpoColor]=\"simpoColor\">\r\n            {{ content?.siteName?.value }}\r\n          </span>\r\n        </a>\r\n\r\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n          && content?.logo?.text?.isText \r\n          && !content?.logo?.text?.isIcon\">\r\n\r\n          <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\r\n            {{ content?.siteName?.value }}\r\n          </span>\r\n        </a>\r\n      </div>\r\n\r\n      <!-- Search Bar -->\r\n      <div class=\"search-wrapper\" *ngIf=\"screenWidth > 475 && content?.showSearchBar\">\r\n        <div class=\"search-bar\">\r\n          <!-- Search Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n          </svg>\r\n          <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n            aria-label=\"Search\">\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Right Actions -->\r\n      <div class=\"user-actions\">\r\n        <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n          *ngIf=\"!getPincode && storeAvaiable\">\r\n          <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n            stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n            <path\r\n              d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\r\n              fill=\"#000000\" />\r\n          </svg> -->\r\n\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"currentColor\">\r\n            <g>\r\n              <path\r\n                d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\r\n              </path>\r\n              <path\r\n                d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\r\n              </path>\r\n            </g>\r\n          </svg>\r\n\r\n          <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\r\n\r\n        </a>\r\n\r\n        <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n          [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\r\n            <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\r\n            <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\r\n            <path d=\"M2 7h20\"></path>\r\n            <path\r\n              d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\r\n            </path>\r\n          </svg>\r\n          <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\r\n            getPincode}}</span>\r\n\r\n        </a>\r\n\r\n        <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n          <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n            Your PIN Code unlocks\r\n          </div>\r\n          <div class=\"sub-text text-center f-14 pincode-text\">\r\n            Fastest delivery date, Try-at-Home availability,\r\n            Nearest store and In-store design!\r\n          </div>\r\n          <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n            [class.error-border]=\"pinError\">\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n              class=\"w-75 p-0\">\r\n            <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n          </div>\r\n          <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n            Please enter a valid pincode\r\n          </div>\r\n        </div>\r\n\r\n        <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\r\n          (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\r\n          <!-- User Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n          </svg>\r\n        </a>\r\n\r\n        <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n          <!-- User Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n          </svg>\r\n        </a>\r\n\r\n        <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n          <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n            Your Account\r\n          </div>\r\n          <div class=\"sub-text text-center f-14\">\r\n            Access account & manage your orders.\r\n          </div>\r\n          <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n            <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n              [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n              [style.color]=\"style?.background?.color\">Sign Up</div>\r\n            <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n              [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n          </div>\r\n        </div>\r\n\r\n        <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\r\n          <!-- Heart Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path\r\n              d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\r\n            </path>\r\n          </svg>\r\n          <!-- <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\">2</span> -->\r\n        </a>\r\n\r\n        <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\r\n          <!-- Shopping Bag Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\r\n            <path d=\"M3 6h18\"></path>\r\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n          </svg>\r\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n            *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\r\n        </a>\r\n      </div>\r\n    </div>\r\n    <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar\">\r\n      <div class=\"search-bar\">\r\n        <!-- Search Icon SVG -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n          <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n        </svg>\r\n        <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          aria-label=\"Search\">\r\n      </div>\r\n    </div>\r\n\r\n  </header>\r\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.logo-main,.logo-text{font-size:17px!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%;z-index:1001}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:1000}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative;z-index:1002}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top);left:0;width:100vw;height:calc(100vh - var(--margin-top));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow:hidden}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
             type: Component,
@@ -16611,7 +16676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SpacingHorizontalDirective,
                         MovingTextComponent,
                         ContentFitDirective,
-                    ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"isHeaderSticky && isMobile && categoryList?.length == 0\">\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n      simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n      <ng-container *ngIf=\"style?.headline?.display\">\r\n        <div>\r\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n\r\n      <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\r\n        [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\r\n      </div>\r\n\r\n      <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"style?.background?.color\">search</mat-icon>\r\n      </div> -->\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n      </ng-container>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container> -->\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div [class.w-15]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n        aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div [class.w-15]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container> </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b>{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \r\n    ((content?.logo?.size >= 60  && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\r\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <div class=\"d-flex gap-3\"\r\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n      <ng-container *ngFor=\"let item of getNavbarButton\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | lowercase | titlecase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n        (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon>person_outline</mat-icon>\r\n        Login\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn && !isMobile\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n    *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\r\n    <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\r\n      <div class=\"item-count fw-bold\">\r\n        {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\r\n        <!-- Total : \u20B9{{ getCartTotalAmount }} -->\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\r\n        View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div> -->\r\n    <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\r\n      <div class=\"input-group w-75 ml-2\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n          [style.color]=\"backgroundInfo?.accentColor\">\r\n        <!-- <span class=\"animated-placeholder position-absolute\" \r\n          [class.animate]=\"animatePlaceholder\"\r\n          *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\r\n          {{ currentPlaceholder }}\r\n        </span> -->\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n          height=\"30\" version=\"1.1\">\r\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n          </g>\r\n        </svg>\r\n        <div [style.color]=\"accentColor\">Schemes</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n        Pincode\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n        getPincode}}</div>\r\n\r\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your PIN Code unlocks\r\n        </div>\r\n        <div class=\"sub-text text-center f-14 pincode-text\">\r\n          Fastest delivery date, Try-at-Home availability,\r\n          Nearest store and In-store design!\r\n        </div>\r\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n          [class.error-border]=\"pinError\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n            class=\"w-75 p-0\">\r\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n        </div>\r\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n          Please enter a valid pincode\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getCartItemsCount}}</div>\r\n      </div>\r\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n      </div>\r\n      <!-- (mouseleave)=\"showLogin = false\" -->\r\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your Account\r\n        </div>\r\n        <div class=\"sub-text text-center f-14\">\r\n          Access account & manage your orders.\r\n        </div>\r\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n            [style.color]=\"style?.background?.color\">Sign Up</div>\r\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n            [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  [ngClass]=\"{'offcanvas-end' : (style?.styling === 'Header1' || style?.styling === 'Header3') && !isEcommerceWebsite, 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4' || isEcommerceWebsite}\">\r\n  <div class=\"offcanvas-header\" [simpoBackground]=\"style?.background\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div>\r\n  <div class=\"offcanvas-body\">\r\n    <div class=\"pages\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\r\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\r\n\r\n\r\n  <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\r\n\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n    *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b>{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-wrapper\"\r\n    *ngIf=\"(categoryList?.length > 0 || collectionList?.collections?.length > 0) && !isMobile\"\r\n    (mouseleave)=\"showList = false; showCollections = false\">\r\n\r\n    <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\r\n\r\n    <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\r\n      [style.background]=\"data?.styles?.headline?.color\">\r\n\r\n      <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList; let i = index\"\r\n        [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n        (mouseenter)=\"showList = true; selectedCategory = ele; showCollections = false\">\r\n        {{ele?.categoryName | titlecase}}\r\n      </div>\r\n\r\n      <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true; showList = false\"\r\n        *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n        [simpoColor]=\"data?.styles?.headline?.color\">\r\n        Collections\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\r\n      <div class=\"row w-100 h-100\">\r\n        <div class=\"col-7 row\">\r\n          <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n            <div class=\"list-header mb-3\">By Price</div>\r\n            <div class=\"d-flex flex-column gap-3 list-item\">\r\n              <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n                <div class=\"each-price cursor-pointer\"\r\n                  (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n                  {{price | titlecase}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-4 h-100 overflow-scroll\"\r\n            *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n            <div class=\"list-header mb-3\">By Style</div>\r\n            <div class=\"d-flex flex-column gap-3 list-item\">\r\n              <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n                <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">\r\n                  {{collection | titlecase}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n            <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n            <div class=\"d-flex flex-column gap-3 list-item\">\r\n              <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n                <div class=\"d-flex gap-2 align-items-center\">\r\n                  <div style=\"width: 15px;height: 20px;\">\r\n                    <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n                  </div>\r\n                  <div class=\"each-price cursor-pointer\">\r\n                    {{collection.name | titlecase}}\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n          <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\r\n            <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n              <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"list-category\" [class.show-dropdown]=\"showCollections\" [class.hide-dropdown]=\"!showCollections\">\r\n      <div class=\"row w-100\">\r\n        <div class=\"col-7 row h-100 overflow-scroll\">\r\n          <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n            <div class=\"collection row col-3 align-items-center mb-3\"\r\n              (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n              <div class=\"col-imag col-4\">\r\n                <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n              </div>\r\n              <div class=\"col-8 text-overflow\">\r\n                {{collection?.collectionName | titlecase}}\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <div class=\"col-5 row\" *ngIf=\"collectionList?.imageUrls\">\r\n          <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n            <div class=\"image-container col-6 position-relative h-45\" *ngIf=\"image\"\r\n              (click)=\"applyFilterToList(image, 'collections')\">\r\n              <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n              <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n                [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">\r\n                {{image}}\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\r\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n      <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\r\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n      </div>\r\n      <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerce_header>\r\n  <header class=\"site-header\">\r\n    <!-- Top Bar: Logo, Search, User Actions -->\r\n    <div class=\"top-bar\">\r\n\r\n      <!-- Mobile Menu Toggle (Checkbox Hack) -->\r\n      <div [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\r\n        <label for=\"mobile-menu-checkbox\" class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\"\r\n          data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n            <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n            <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n          </svg>\r\n        </label>\r\n\r\n        <!-- Logo Section -->\r\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size  + 15\"\r\n            [height]=\"content?.logo?.size\">\r\n        </a>\r\n\r\n        <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n          && content?.logo?.text?.isText \r\n          && content?.logo?.text?.isIcon \r\n          && content?.logo?.text?.url\">\r\n\r\n          <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\r\n            [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\r\n\r\n          <span class=\"logo-text\" [simpoColor]=\"simpoColor\">\r\n            {{ content?.siteName?.value }}\r\n          </span>\r\n        </a>\r\n\r\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n          && content?.logo?.text?.isText \r\n          && !content?.logo?.text?.isIcon\">\r\n\r\n          <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\r\n            {{ content?.siteName?.value }}\r\n          </span>\r\n        </a>\r\n      </div>\r\n\r\n      <!-- Search Bar -->\r\n      <div class=\"search-wrapper\" *ngIf=\"screenWidth > 475\">\r\n        <div class=\"search-bar\">\r\n          <!-- Search Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n          </svg>\r\n          <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n            aria-label=\"Search\">\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Right Actions -->\r\n      <div class=\"user-actions\">\r\n        <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\" *ngIf=\"!getPincode\">\r\n          <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n            stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n            <path\r\n              d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\r\n              fill=\"#000000\" />\r\n          </svg> -->\r\n\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"currentColor\">\r\n            <g>\r\n              <path\r\n                d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\r\n              </path>\r\n              <path\r\n                d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\r\n              </path>\r\n            </g>\r\n          </svg>\r\n\r\n          <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\r\n\r\n        </a>\r\n\r\n        <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n          [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\r\n            <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\r\n            <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\r\n            <path d=\"M2 7h20\"></path>\r\n            <path\r\n              d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\r\n            </path>\r\n          </svg>\r\n          <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\r\n            getPincode}}</span>\r\n\r\n        </a>\r\n\r\n        <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n          <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n            Your PIN Code unlocks\r\n          </div>\r\n          <div class=\"sub-text text-center f-14 pincode-text\">\r\n            Fastest delivery date, Try-at-Home availability,\r\n            Nearest store and In-store design!\r\n          </div>\r\n          <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n            [class.error-border]=\"pinError\">\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n              class=\"w-75 p-0\">\r\n            <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n          </div>\r\n          <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n            Please enter a valid pincode\r\n          </div>\r\n        </div>\r\n\r\n        <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\r\n          (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\r\n          <!-- User Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n          </svg>\r\n        </a>\r\n\r\n        <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n          <!-- User Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n          </svg>\r\n        </a>\r\n\r\n        <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n          <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n            Your Account\r\n          </div>\r\n          <div class=\"sub-text text-center f-14\">\r\n            Access account & manage your orders.\r\n          </div>\r\n          <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n            <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n              [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n              [style.color]=\"style?.background?.color\">Sign Up</div>\r\n            <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n              [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n          </div>\r\n        </div>\r\n\r\n        <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\r\n          <!-- Heart Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path\r\n              d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\r\n            </path>\r\n          </svg>\r\n          <!-- <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\">2</span> -->\r\n        </a>\r\n\r\n        <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\r\n          <!-- Shopping Bag Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\r\n            <path d=\"M3 6h18\"></path>\r\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n          </svg>\r\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n            *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\r\n        </a>\r\n      </div>\r\n    </div>\r\n    <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475\">\r\n      <div class=\"search-bar\">\r\n        <!-- Search Icon SVG -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n          <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n        </svg>\r\n        <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          aria-label=\"Search\">\r\n      </div>\r\n    </div>\r\n\r\n  </header>\r\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%;z-index:1001}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:1000}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative;z-index:1002}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top);left:0;width:100vw;height:calc(100vh - var(--margin-top));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow:hidden}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"isHeaderSticky && isMobile && categoryList?.length == 0\">\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n      simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n      <ng-container *ngIf=\"style?.headline?.display\">\r\n        <div>\r\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n\r\n      <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\r\n        [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\r\n      </div>\r\n\r\n      <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"style?.background?.color\">search</mat-icon>\r\n      </div> -->\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n      </ng-container>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container> -->\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div [class.w-15]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n        aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div [class.w-15]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container> </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b>{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \r\n    ((content?.logo?.size >= 60  && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\r\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <div class=\"d-flex gap-3\"\r\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n      <ng-container *ngFor=\"let item of getNavbarButton\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | lowercase | titlecase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n        (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon>person_outline</mat-icon>\r\n        Login\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn && !isMobile\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n    *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\r\n    <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\r\n      <div class=\"item-count fw-bold\">\r\n        {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\r\n        <!-- Total : \u20B9{{ getCartTotalAmount }} -->\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\r\n        View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div> -->\r\n    <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\r\n      <div class=\"input-group w-75 ml-2\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n          [style.color]=\"backgroundInfo?.accentColor\">\r\n        <!-- <span class=\"animated-placeholder position-absolute\" \r\n          [class.animate]=\"animatePlaceholder\"\r\n          *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\r\n          {{ currentPlaceholder }}\r\n        </span> -->\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n          height=\"30\" version=\"1.1\">\r\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n          </g>\r\n        </svg>\r\n        <div [style.color]=\"accentColor\">Schemes</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n        Pincode\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n        getPincode}}</div>\r\n\r\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your PIN Code unlocks\r\n        </div>\r\n        <div class=\"sub-text text-center f-14 pincode-text\">\r\n          Fastest delivery date, Try-at-Home availability,\r\n          Nearest store and In-store design!\r\n        </div>\r\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n          [class.error-border]=\"pinError\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n            class=\"w-75 p-0\">\r\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n        </div>\r\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n          Please enter a valid pincode\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getCartItemsCount}}</div>\r\n      </div>\r\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n      </div>\r\n      <!-- (mouseleave)=\"showLogin = false\" -->\r\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your Account\r\n        </div>\r\n        <div class=\"sub-text text-center f-14\">\r\n          Access account & manage your orders.\r\n        </div>\r\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n            [style.color]=\"style?.background?.color\">Sign Up</div>\r\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n            [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  [ngClass]=\"{'offcanvas-end' : (style?.styling === 'Header1' || style?.styling === 'Header3') && !isEcommerceWebsite, 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4' || isEcommerceWebsite}\">\r\n  <div class=\"offcanvas-header\" [simpoBackground]=\"style?.background\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div>\r\n  <div class=\"offcanvas-body\">\r\n    <div class=\"pages\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\r\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\r\n\r\n\r\n  <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\r\n\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n    *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b>{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-wrapper\"\r\n    *ngIf=\"(categoryList?.length > 0 || collectionList?.collections?.length > 0) && !isMobile\"\r\n    (mouseleave)=\"showList = false; showCollections = false\">\r\n\r\n    <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\r\n\r\n    <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\r\n      [style.background]=\"data?.styles?.headline?.color\">\r\n\r\n      <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList; let i = index\"\r\n        [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n        (mouseenter)=\"showList = true; selectedCategory = ele; showCollections = false\">\r\n        {{ele?.categoryName | titlecase}}\r\n      </div>\r\n\r\n      <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true; showList = false\"\r\n        *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n        [simpoColor]=\"data?.styles?.headline?.color\">\r\n        Collections\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\r\n      <div class=\"row w-100 h-100\">\r\n        <div class=\"col-7 row\">\r\n          <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n            <div class=\"list-header mb-3\">By Price</div>\r\n            <div class=\"d-flex flex-column gap-3 list-item\">\r\n              <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n                <div class=\"each-price cursor-pointer\"\r\n                  (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n                  {{price | titlecase}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-4 h-100 overflow-scroll\"\r\n            *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n            <div class=\"list-header mb-3\">By Style</div>\r\n            <div class=\"d-flex flex-column gap-3 list-item\">\r\n              <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n                <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">\r\n                  {{collection | titlecase}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n            <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n            <div class=\"d-flex flex-column gap-3 list-item\">\r\n              <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n                <div class=\"d-flex gap-2 align-items-center\">\r\n                  <div style=\"width: 15px;height: 20px;\">\r\n                    <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n                  </div>\r\n                  <div class=\"each-price cursor-pointer\">\r\n                    {{collection.name | titlecase}}\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n          <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\r\n            <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n              <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"list-category\" [class.show-dropdown]=\"showCollections\" [class.hide-dropdown]=\"!showCollections\">\r\n      <div class=\"row w-100\">\r\n        <div class=\"col-7 row h-100 overflow-scroll\">\r\n          <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n            <div class=\"collection row col-3 align-items-center mb-3\"\r\n              (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n              <div class=\"col-imag col-4\">\r\n                <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n              </div>\r\n              <div class=\"col-8 text-overflow\">\r\n                {{collection?.collectionName | titlecase}}\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <div class=\"col-5 row\" *ngIf=\"collectionList?.imageUrls\">\r\n          <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n            <div class=\"image-container col-6 position-relative h-45\" *ngIf=\"image\"\r\n              (click)=\"applyFilterToList(image, 'collections')\">\r\n              <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n              <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n                [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">\r\n                {{image}}\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\r\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n      <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\r\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n      </div>\r\n      <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerce_header>\r\n  <header class=\"site-header\">\r\n    <!-- Top Bar: Logo, Search, User Actions -->\r\n    <div class=\"top-bar\">\r\n\r\n      <!-- Mobile Menu Toggle (Checkbox Hack) -->\r\n      <div [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\r\n        <label for=\"mobile-menu-checkbox\" class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\"\r\n          data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n            <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n            <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n          </svg>\r\n        </label>\r\n\r\n        <!-- Logo Section -->\r\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size  + 15\"\r\n            [height]=\"content?.logo?.size\">\r\n        </a>\r\n\r\n        <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n          && content?.logo?.text?.isText \r\n          && content?.logo?.text?.isIcon \r\n          && content?.logo?.text?.url\">\r\n\r\n          <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\r\n            [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\" *ngIf=\"screenWidth > 475\">\r\n\r\n          <span class=\"logo-text\" [simpoColor]=\"simpoColor\">\r\n            {{ content?.siteName?.value }}\r\n          </span>\r\n        </a>\r\n\r\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n          && content?.logo?.text?.isText \r\n          && !content?.logo?.text?.isIcon\">\r\n\r\n          <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\r\n            {{ content?.siteName?.value }}\r\n          </span>\r\n        </a>\r\n      </div>\r\n\r\n      <!-- Search Bar -->\r\n      <div class=\"search-wrapper\" *ngIf=\"screenWidth > 475 && content?.showSearchBar\">\r\n        <div class=\"search-bar\">\r\n          <!-- Search Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n          </svg>\r\n          <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n            aria-label=\"Search\">\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Right Actions -->\r\n      <div class=\"user-actions\">\r\n        <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n          *ngIf=\"!getPincode && storeAvaiable\">\r\n          <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n            stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n            <path\r\n              d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\r\n              fill=\"#000000\" />\r\n          </svg> -->\r\n\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"currentColor\">\r\n            <g>\r\n              <path\r\n                d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\r\n              </path>\r\n              <path\r\n                d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\r\n              </path>\r\n            </g>\r\n          </svg>\r\n\r\n          <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\r\n\r\n        </a>\r\n\r\n        <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n          [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\r\n            <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\r\n            <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\r\n            <path d=\"M2 7h20\"></path>\r\n            <path\r\n              d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\r\n            </path>\r\n          </svg>\r\n          <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\r\n            getPincode}}</span>\r\n\r\n        </a>\r\n\r\n        <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n          <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n            Your PIN Code unlocks\r\n          </div>\r\n          <div class=\"sub-text text-center f-14 pincode-text\">\r\n            Fastest delivery date, Try-at-Home availability,\r\n            Nearest store and In-store design!\r\n          </div>\r\n          <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n            [class.error-border]=\"pinError\">\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n              class=\"w-75 p-0\">\r\n            <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n          </div>\r\n          <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n            Please enter a valid pincode\r\n          </div>\r\n        </div>\r\n\r\n        <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\r\n          (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\r\n          <!-- User Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n          </svg>\r\n        </a>\r\n\r\n        <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n          <!-- User Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n          </svg>\r\n        </a>\r\n\r\n        <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n          <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n            Your Account\r\n          </div>\r\n          <div class=\"sub-text text-center f-14\">\r\n            Access account & manage your orders.\r\n          </div>\r\n          <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n            <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n              [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n              [style.color]=\"style?.background?.color\">Sign Up</div>\r\n            <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n              [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n          </div>\r\n        </div>\r\n\r\n        <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\r\n          <!-- Heart Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path\r\n              d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\r\n            </path>\r\n          </svg>\r\n          <!-- <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\">2</span> -->\r\n        </a>\r\n\r\n        <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\r\n          <!-- Shopping Bag Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\r\n            <path d=\"M3 6h18\"></path>\r\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n          </svg>\r\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n            *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\r\n        </a>\r\n      </div>\r\n    </div>\r\n    <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar\">\r\n      <div class=\"search-bar\">\r\n        <!-- Search Icon SVG -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n          <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n        </svg>\r\n        <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          aria-label=\"Search\">\r\n      </div>\r\n    </div>\r\n\r\n  </header>\r\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.logo-main,.logo-text{font-size:17px!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%;z-index:1001}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:1000}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative;z-index:1002}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top);left:0;width:100vw;height:calc(100vh - var(--margin-top));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow:hidden}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCAL_STORAGE]
@@ -16736,7 +16801,7 @@ class NewTestimonialsComponent extends BaseSection {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewTestimonialsComponent, deps: [{ token: EventsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewTestimonialsComponent, isStandalone: true, selector: "simpo-new-testimonials", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index" }, host: { listeners: { "window: resize": "getScreenSize($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "carouselInner", first: true, predicate: ["carouselInner"], descendants: true }, { propertyName: "carouselItems", predicate: ["carouselItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n        <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n            <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [simpoLayout]=\"styles?.layout\"\r\n                [id]=\"data?.id\">\r\n                <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n                    <ng-container *ngFor=\"let text of content?.inputText\">\r\n                        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </ng-container>\r\n                </div>\r\n                <ng-container *ngIf=\"data?.action?.display\">\r\n                    <div class=\"mt-4 d-flex gap-2 w-100 overflow-scroll\" [spacingHorizontal]=\"stylesLayout\"\r\n                        [simpoAnimation]=\"styles?.animation\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n                    [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n                    [class.flex-column]=\"screenWidth < 475\">\r\n                    <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [id]=\"data?.id\"\r\n                        [class.h-30]=\"screenWidth < 475\" [class.bg-black]=\"getImageType() == 'Video'\"\r\n                        [simpoCorner]=\"styles?.corners\">\r\n                        <ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n                                <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    [simpoCorner]=\"styles?.corners\">\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n                                <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    controls></video>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div id=\"carouselExampleIndicators\" data-bs-keyboard=\"false\"\r\n                        class=\"carousel slide w-65 d-flex flex-column\"\r\n                        [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n                        <div class=\"carousel-inner overflow-unset\" [class.mb-6]=\"screenWidth < 475\" #carouselInner>\r\n                            <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\" #carouselItem>\r\n                                    <div class=\"quote-image mb-2\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\"\r\n                                            viewBox=\"0 0 36 31\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n                                                [attr.fill]=\"styles?.background?.accentColor\" />\r\n                                        </svg>\r\n                                    </div>\r\n                                    <div class=\"item mb-3\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div class=\"prev-next d-flex gap-2\">\r\n                            <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                (click)=\"idx = (idx - 1 < 0 ? getLength() - 1 : idx - 1)\">\r\n                                <mat-icon>keyboard_arrow_left</mat-icon>\r\n                            </div>\r\n\r\n                            <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                (click)=\"idx = (idx + 1 >= getLength() ? 0 : idx + 1)\">\r\n                                <mat-icon>keyboard_arrow_right</mat-icon>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></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: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.bg-black{background:#000}.carousel-control-prev,.carousel-control-next{position:unset!important;width:30px;border-radius:50%!important;height:30px}.w-35{width:35%!important}.w-65{width:65%!important}.image-container{z-index:100}.prev-next{width:100%}.overflow-visible{overflow:visible!important}.overflow-unset{overflow:unset!important}@media screen and (max-width: 475px){.list-items{flex-direction:column!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewTestimonialsComponent, isStandalone: true, selector: "simpo-new-testimonials", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index" }, host: { listeners: { "window: resize": "getScreenSize($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "carouselInner", first: true, predicate: ["carouselInner"], descendants: true }, { propertyName: "carouselItems", predicate: ["carouselItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n        <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n            <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [simpoLayout]=\"styles?.layout\"\r\n                [id]=\"data?.id\">\r\n                <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n                    <ng-container *ngFor=\"let text of content?.inputText\">\r\n                        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n                    [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n                    [class.flex-column]=\"screenWidth < 475\">\r\n                    <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [id]=\"data?.id\"\r\n                        [class.h-30]=\"screenWidth < 475\" [class.bg-black]=\"getImageType() == 'Video'\"\r\n                        [simpoCorner]=\"styles?.corners\">\r\n                        <ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n                                <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\">\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n                                <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    controls></video>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div id=\"carouselExampleIndicators\" data-bs-keyboard=\"false\"\r\n                        class=\"carousel slide w-65 d-flex flex-column\"\r\n                        [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n                        <div class=\"carousel-inner overflow-unset\" [class.mb-6]=\"screenWidth < 475\" #carouselInner>\r\n                            <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\" #carouselItem>\r\n                                    <div class=\"quote-image mb-2\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\"\r\n                                            viewBox=\"0 0 36 31\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n                                                [attr.fill]=\"styles?.background?.accentColor\" />\r\n                                        </svg>\r\n                                    </div>\r\n                                    <div class=\"item mb-3\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div class=\"prev-next d-flex align-items-center justify-content-between\">\r\n                            <div class=\"d-flex align-items-center gap-2\">\r\n                                <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                    data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                    (click)=\"idx = (idx - 1 < 0 ? getLength() - 1 : idx - 1)\">\r\n                                    <mat-icon>keyboard_arrow_left</mat-icon>\r\n                                </div>\r\n\r\n                                <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                    data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                    (click)=\"idx = (idx + 1 >= getLength() ? 0 : idx + 1)\">\r\n                                    <mat-icon>keyboard_arrow_right</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <ng-container *ngIf=\"data?.action?.display\">\r\n                                <div class=\"d-flex\">\r\n                                    <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content \"\r\n                                        [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n                                        [buttonId]=\"data?.action?.buttons[0]?.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n                                        [color]=\"data?.styles?.background?.accentColor\"\r\n                                        [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></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: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.bg-black{background:#000}.carousel-control-prev,.carousel-control-next{position:unset!important;width:30px;border-radius:50%!important;height:30px}.w-35{width:35%!important}.w-65{width:65%!important}.image-container{z-index:100}.prev-next{width:100%}.overflow-visible{overflow:visible!important}.overflow-unset{overflow:unset!important}@media screen and (max-width: 475px){.list-items{flex-direction:column!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
                 // directives
                 SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "component", type: 
                 // components
@@ -16773,7 +16838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TextEditorComponent,
                         SimpoButtonComponent,
                         ImageEditorDirective,
-                    ], template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n        <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n            <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [simpoLayout]=\"styles?.layout\"\r\n                [id]=\"data?.id\">\r\n                <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n                    <ng-container *ngFor=\"let text of content?.inputText\">\r\n                        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </ng-container>\r\n                </div>\r\n                <ng-container *ngIf=\"data?.action?.display\">\r\n                    <div class=\"mt-4 d-flex gap-2 w-100 overflow-scroll\" [spacingHorizontal]=\"stylesLayout\"\r\n                        [simpoAnimation]=\"styles?.animation\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n                    [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n                    [class.flex-column]=\"screenWidth < 475\">\r\n                    <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [id]=\"data?.id\"\r\n                        [class.h-30]=\"screenWidth < 475\" [class.bg-black]=\"getImageType() == 'Video'\"\r\n                        [simpoCorner]=\"styles?.corners\">\r\n                        <ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n                                <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    [simpoCorner]=\"styles?.corners\">\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n                                <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    controls></video>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div id=\"carouselExampleIndicators\" data-bs-keyboard=\"false\"\r\n                        class=\"carousel slide w-65 d-flex flex-column\"\r\n                        [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n                        <div class=\"carousel-inner overflow-unset\" [class.mb-6]=\"screenWidth < 475\" #carouselInner>\r\n                            <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\" #carouselItem>\r\n                                    <div class=\"quote-image mb-2\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\"\r\n                                            viewBox=\"0 0 36 31\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n                                                [attr.fill]=\"styles?.background?.accentColor\" />\r\n                                        </svg>\r\n                                    </div>\r\n                                    <div class=\"item mb-3\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div class=\"prev-next d-flex gap-2\">\r\n                            <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                (click)=\"idx = (idx - 1 < 0 ? getLength() - 1 : idx - 1)\">\r\n                                <mat-icon>keyboard_arrow_left</mat-icon>\r\n                            </div>\r\n\r\n                            <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                (click)=\"idx = (idx + 1 >= getLength() ? 0 : idx + 1)\">\r\n                                <mat-icon>keyboard_arrow_right</mat-icon>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></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: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.bg-black{background:#000}.carousel-control-prev,.carousel-control-next{position:unset!important;width:30px;border-radius:50%!important;height:30px}.w-35{width:35%!important}.w-65{width:65%!important}.image-container{z-index:100}.prev-next{width:100%}.overflow-visible{overflow:visible!important}.overflow-unset{overflow:unset!important}@media screen and (max-width: 475px){.list-items{flex-direction:column!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!important}\n"] }]
+                    ], template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n        <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n            <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [simpoLayout]=\"styles?.layout\"\r\n                [id]=\"data?.id\">\r\n                <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n                    <ng-container *ngFor=\"let text of content?.inputText\">\r\n                        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n                    [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n                    [class.flex-column]=\"screenWidth < 475\">\r\n                    <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [id]=\"data?.id\"\r\n                        [class.h-30]=\"screenWidth < 475\" [class.bg-black]=\"getImageType() == 'Video'\"\r\n                        [simpoCorner]=\"styles?.corners\">\r\n                        <ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n                                <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\">\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n                                <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    controls></video>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div id=\"carouselExampleIndicators\" data-bs-keyboard=\"false\"\r\n                        class=\"carousel slide w-65 d-flex flex-column\"\r\n                        [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n                        <div class=\"carousel-inner overflow-unset\" [class.mb-6]=\"screenWidth < 475\" #carouselInner>\r\n                            <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\" #carouselItem>\r\n                                    <div class=\"quote-image mb-2\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\"\r\n                                            viewBox=\"0 0 36 31\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n                                                [attr.fill]=\"styles?.background?.accentColor\" />\r\n                                        </svg>\r\n                                    </div>\r\n                                    <div class=\"item mb-3\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div class=\"prev-next d-flex align-items-center justify-content-between\">\r\n                            <div class=\"d-flex align-items-center gap-2\">\r\n                                <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                    data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                    (click)=\"idx = (idx - 1 < 0 ? getLength() - 1 : idx - 1)\">\r\n                                    <mat-icon>keyboard_arrow_left</mat-icon>\r\n                                </div>\r\n\r\n                                <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                    data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                    (click)=\"idx = (idx + 1 >= getLength() ? 0 : idx + 1)\">\r\n                                    <mat-icon>keyboard_arrow_right</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <ng-container *ngIf=\"data?.action?.display\">\r\n                                <div class=\"d-flex\">\r\n                                    <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content \"\r\n                                        [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n                                        [buttonId]=\"data?.action?.buttons[0]?.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n                                        [color]=\"data?.styles?.background?.accentColor\"\r\n                                        [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></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: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.bg-black{background:#000}.carousel-control-prev,.carousel-control-next{position:unset!important;width:30px;border-radius:50%!important;height:30px}.w-35{width:35%!important}.w-65{width:65%!important}.image-container{z-index:100}.prev-next{width:100%}.overflow-visible{overflow:visible!important}.overflow-unset{overflow:unset!important}@media screen and (max-width: 475px){.list-items{flex-direction:column!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!important}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: i0.Renderer2 }], propDecorators: { data: [{
                 type: Input
             }], edit: [{
@@ -22174,7 +22239,7 @@ class UserProfileComponent extends BaseSection {
         this.getAllSchemes();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$2.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: CartService }, { token: i1$1.MatDialog }, { token: i8$3.MatBottomSheet }, { token: i2$3.CookieService }, { token: i6$1.MessageService }, { token: i1$2.DomSanitizer }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], 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\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n    [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n    [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-4 profile-box shadow-lg\"\r\n            style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n            [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n            <!-- Profile Header Section -->\r\n            <div class=\"d-flex align-items-center profile-header\"\r\n                style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n                <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n                        style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n                    <div class=\"online-indicator\"\r\n                        style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"profile-details flex-grow-1\">\r\n                    <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n                        {{getUserDetails?.contact?.name}}</h4>\r\n\r\n                    <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                        </h6>\r\n\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n                            <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n                        </h6>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Navigation Tabs Section -->\r\n            <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center tab-item\"\r\n                        style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n                        [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n                        [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n                        [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n                        [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n                        <div class=\"tab-icon-wrapper\"\r\n                            style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n                            <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n                        </div>\r\n\r\n                        <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n                            {{tab.value}}</div>\r\n\r\n                        <!-- Hover effect background -->\r\n                        <div class=\"tab-hover-bg\"\r\n                            style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- Action Buttons Section -->\r\n            <div class=\"d-flex action-buttons\"\r\n                style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n                <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                    [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n                    Edit Profile\r\n                </button>\r\n\r\n                <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                    [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n                    Logout\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Transactions'\">\r\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n                    <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n                    <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n                *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n                    (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n                            style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n                                <mat-icon>stay_primary_portrait</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                            </h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n                                *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.email}}</span>\r\n                            </h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n                                [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n                                [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                    [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n                                    {{tab.value}}</div>\r\n                            </div>\r\n\r\n                        </ng-container>\r\n                    </section>\r\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                            [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\">Logout</button>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Transactions'\">\r\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n                    <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n                    <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n            [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n</section>\r\n\r\n<ng-template #Referrals>\r\n    <iframe [src]=\"getMyReferralsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #Rewards>\r\n    <iframe [src]=\"getRewardsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #OrderSection>\r\n    <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n    <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n                {{tab.value}}</div>\r\n        </ng-container>\r\n    </div> -->\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                            [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n                    </div>\r\n                    <div class=\"cart-text \">\r\n                        <ng-container *ngFor=\"let text of content?.inputText\">\r\n                            <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n                                [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n                                <simpo-text-editor [(value)]=\"text.value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n        (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2\">\r\n        <h3 class=\"title-text\">My Address</h3>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n            [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n                <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n                    <div class=\"card-body p-3\">\r\n                        <!-- Header Section -->\r\n                        <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                            <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n                                <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n                                <div class=\"icon-grp d-flex\">\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"address-content mb-3\">\r\n                            <div class=\"address-line mb-2\">\r\n                                <span class=\"text-muted small d-block\">Address</span>\r\n                                <span class=\"address-text\">{{address.addressLine1}}</span>\r\n                            </div>\r\n                            <div class=\"phone-info\">\r\n                                <span class=\"text-muted small d-block\">Phone</span>\r\n                                <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #showEmptyAddress>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n                    </div>\r\n                    <div class=\"cart-text\">\r\n                        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n                        </div>\r\n                        <!-- </ng-container> -->\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n        <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n            <!-- Header Section -->\r\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n                <div class=\"order-number\">\r\n                    <h4 class=\"mb-0  fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n                </div>\r\n                <div class=\"arrow-icon\">\r\n                    <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n                </div>\r\n            </div>\r\n            <div class=\"ordered-item row mb-2\">\r\n                <ng-container *ngFor=\"let item of  getOrderedItems(order)\">\r\n                    <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n                            onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            class=\"item-img w-50\">\r\n                        <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <!-- Middle Section -->\r\n            <div class=\"order-details\">\r\n                <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n                    <span class=\"text-muted small mb-3 mb-sm-0\">\r\n                        {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"amount-section\">\r\n                    <span class=\"h5 mb-0 text-success fw-bold\">\r\n                        <span [innerHTML]=\"currency\"></span>\r\n                        <!-- {{(order.billDetails.discountAmount ?\r\n                        (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n                        order?.billDetails?.totalTaxAfterDiscount) :\r\n                        order.billDetails.totalGrossValue) | number:'1.0-2'}}  -->\r\n                        {{getTotalAmtPaid(order) | number:'1.0-2'}}\r\n                    </span>\r\n                </div>\r\n                <div class=\"status-section\">\r\n                    <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n                        {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'REWARD_POINTS'\">\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Amount Paid - \r\n                    <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.pointsConvertedINR ? '0' : (getTotalAmtPaid(order) - order.pointsConvertedINR) }}</span>\r\n                </div> \r\n                <div class=\"fs-14 text-secondary\">\r\n                    Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.pointsConvertedINR}}</span>\r\n                </div> \r\n            </div>\r\n\r\n            <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'VOUCHER'\"> \r\n                <div class=\"fs-14 text-secondary\">\r\n                    Amount Paid - \r\n                    <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.voucherValue ? '0' : (getTotalAmtPaid(order) - order.voucherValue) }}</span>\r\n                </div> \r\n                <div class=\"fs-14 text-secondary\">\r\n                    Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.voucherValue}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n    <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n    <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n        <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"address-card mb-2\">\r\n                    <div class=\"card-body p-4\">\r\n                        <div class=\"row align-items-center\">\r\n                            <div class=\"col-auto\">\r\n                                <div class=\"product-image-wrapper\">\r\n                                    <img loading=\"lazy\"\r\n                                        onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                        class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col\">\r\n                                <div class=\"product-details\">\r\n                                    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n                                        <div\r\n                                            class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n                                            <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n                                                {{item.itemName}}\r\n                                            </h6>\r\n                                            <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n                                                <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n                                                    title=\"Remove from wishlist\">\r\n                                                    <mat-icon class=\"small-icon\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                            <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n                                                <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n                                                    <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"product-price mb-3\">\r\n                                        <span class=\"h5 text-success fw-bold mb-0\">\r\n                                            <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n                                        </span>\r\n                                        <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n                                            ({{item.quantity}} items)\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"action-buttons d-flex  gap-2\">\r\n                                        <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n                                            *ngIf=\"item.quantity\">\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n                                                -\r\n                                            </button>\r\n                                            <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n                                                {{item.quantity}}\r\n                                            </span>\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'ADD')\"> +\r\n                                            </button>\r\n                                        </div>\r\n                                        <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n                                            (click)=\"addToFav(item, 'ADD')\">\r\n                                            + Add Quantity\r\n                                        </button>\r\n                                        <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n                                            Move to Cart\r\n                                        </button>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n    <ng-template #showEmptyWishlistScreen>\r\n        <section class=\"empty-cart m-auto\">\r\n            <div>\r\n                <div class=\"cart-image\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                    <ng-container>\r\n                        <div class=\"heading-medium d-flex justify-content-center\">\r\n                            Your Wishlist is Empty</div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </section>\r\n    </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n    <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n    <div class=\"row gap-2\">\r\n        <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n            <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n                <div class=\"card-header row gap-2\">\r\n                    <div class=\"card-head-left col-7\">\r\n                        <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n                        <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n                    </div>\r\n                    <div class=\"card-head-right col-4 text-center align-content-center\">\r\n                        <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body d-flex p-0 mb-3\">\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n                            class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n                        <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n                        <div class=\"card-sub-text text-center\">Rewards</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">8</div>\r\n                        <div class=\"card-sub-text text-center\">Due Months</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-footer row\">\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n                            may 2025</span>\r\n                    </div>\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n                            may 2026</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n    <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n        <div class=\"header d-flex flex-column\">\r\n            <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n                    class=\"store-listing\" (change)=\"changeStore($event)\">\r\n                    <option value=\"\">Select Store</option>\r\n                    <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n                </select></div>\r\n            <div class=\"scheme-overview d-flex flex-column\">\r\n                <div class=\"d-flex gap-2\">\r\n                    <div class=\"available-savings\">\r\n                        <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n                            <h3>Available Savings</h3>\r\n                            <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n                        </div>\r\n\r\n                        <div class=\"amount\">{{totalSavings ? totalSavings :\r\n                            '0'}}</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Active Passbooks</h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n                            totalSchemes.length : '0'}}</div>\r\n                        <div class=\"subtitle\">On Track</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Accumulated Gold </h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n                    </div>\r\n                </div>\r\n                <ng-container *ngIf=\"overAllDues?.length\">\r\n                    <div class=\"section d-flex-flex-column gap-2\">\r\n                        <div class=\"section-header\">\r\n                            <h2 class=\"section-title\">Due Payments</h2>\r\n                        </div>\r\n                        <div class=\"payment-list d-flex flex-column gap-2\">\r\n                            <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n                                <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n                                    <div class=\"payment-info\">\r\n                                        <div class=\"payment-icon\"><img\r\n                                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n                                            <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n                                            *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n                                        </div>\r\n                                        <div class=\"payment-details\">\r\n                                            <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n                                            <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n                                                'N/A'}}\r\n                                                <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n                                                ? payment.daysOverdue : 0}}</span> --></span>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"payment-amount\">\r\n                                        <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n                                            '0'}}\r\n                                        </div>\r\n                                        <div class=\"payment-status  overdue-status cursor-pointer\"\r\n                                            (click)=\"payDue(payment)\">\r\n                                            <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n                                            <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                            <ng-template #showEmptyPayment>\r\n                                <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                                    <span>No Due Payments</span>\r\n                                </div>\r\n                            </ng-template>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"section mt-3\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n            </div>\r\n\r\n            <div class=\"schemes-grid\">\r\n                <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n                    <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n                        *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n                        <div class=\"scheme-header\">\r\n                            <div>\r\n                                <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n                                <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n                            </div>\r\n                            <div class=\"scheme-date\">\r\n                                <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n                                    date:'dd-MM-yyyy') :\r\n                                    'N/A' }}</span>\r\n                                <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n                                'N/A' }}</span> -->\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n                            [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n                            {{\r\n                            scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n                            }}\r\n                        </div>\r\n\r\n                        <div class=\"scheme-stats\">\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n                                <div class=\"stat-label\">Deposited Amount</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">\r\n                                    {{\r\n                                    scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    (scheme?.schemePayments?.length -\r\n                                    scheme.dueMonths) : 'N/A'\r\n                                    }}\r\n                                </div>\r\n                                <div class=\"stat-label\">Paid Months</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    scheme?.dueMonths : 'N/A' }}</div>\r\n                                <div class=\"stat-label\">Due Months</div>\r\n                            </div>\r\n                            <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n                                <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n                                <div class=\"stat-label\">Accumulated Gold</div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-footer\">\r\n                            <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n                                'N/A' }}</span>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <ng-template #showActiveScheme>\r\n                    <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                        <span>No Active Scheme</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n\r\n\r\n        </div>\r\n\r\n        <!-- <div class=\"auto-pay\">\r\n            <div class=\"auto-pay-icon mobile-icon\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n            <div class=\"auto-pay-content\">\r\n                <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n                <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n            </div>\r\n            <button class=\"manage-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n        </div> -->\r\n    </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n    <div class=\"payment-dialog\">\r\n        <div class=\"dialog-header\">\r\n            <h2>Payment Details</h2>\r\n            <button class=\"close-btn\" mat-icon-button>\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"payment-content\">\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Installment Amount:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Convenience Fee:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Payment Service Charges:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row total-row\">\r\n                <span class=\"label total-label\">Total Amount:</span>\r\n                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"dialog-actions\">\r\n            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n    <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n        (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n    <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;overflow-x:hidden;border:1px solid #d3d3d324;border-radius:20px;max-height:80vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;border:none;padding:10px 5px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px;border:none}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}.fs-14{font-size:14px}.fs-12{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details", inputs: ["schemeDetails", "data", "metalPrice"], outputs: ["gotoSchemeOverview"] }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }, { kind: "component", type: PassbookTransactionsComponent, selector: "simpo-passbook-transactions" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], 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\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n    [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n    [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-4 profile-box\" style=\"width: 25%; border-radius: 20px; height: fit-content\"\r\n            [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n            <!-- Profile Header Section -->\r\n            <div class=\"d-flex align-items-center profile-header\"\r\n                style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n                <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n                        style=\"border: 3px solid #e3f2fd; transition: all 0.3s ease;\">\r\n                    <div class=\"online-indicator\"\r\n                        style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"profile-details flex-grow-1\">\r\n                    <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n                        {{getUserDetails?.contact?.name}}</h4>\r\n\r\n                    <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                        </h6>\r\n\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n                            <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n                        </h6>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Navigation Tabs Section -->\r\n            <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center tab-item\"\r\n                        style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n                        [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n                        [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n                        [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n                        [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n                        <div class=\"tab-icon-wrapper\"\r\n                            style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n                            <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n                        </div>\r\n\r\n                        <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n                            {{tab.value}}</div>\r\n\r\n                        <!-- Hover effect background -->\r\n                        <div class=\"tab-hover-bg\"\r\n                            style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- Action Buttons Section -->\r\n            <div class=\"d-flex action-buttons\"\r\n                style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n                <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                    [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n                    Edit Profile\r\n                </button>\r\n\r\n                <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                    [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease;\">\r\n                    Logout\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"orders-sec\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Transactions'\">\r\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n                    <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n                    <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n                *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n                    (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n                            style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n                                <mat-icon>stay_primary_portrait</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                            </h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n                                *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.email}}</span>\r\n                            </h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n                                [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n                                [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                    [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n                                    {{tab.value}}</div>\r\n                            </div>\r\n\r\n                        </ng-container>\r\n                    </section>\r\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                            [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\">Logout</button>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Transactions'\">\r\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n                    <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n                    <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n            [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n</section>\r\n\r\n<ng-template #Referrals>\r\n    <iframe [src]=\"getMyReferralsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #Rewards>\r\n    <iframe [src]=\"getRewardsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #OrderSection>\r\n    <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n    <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n                {{tab.value}}</div>\r\n        </ng-container>\r\n    </div> -->\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                            [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n                    </div>\r\n                    <div class=\"cart-text \">\r\n                        <ng-container *ngFor=\"let text of content?.inputText\">\r\n                            <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n                                [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n                                <simpo-text-editor [(value)]=\"text.value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n        (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2\">\r\n        <h3 class=\"title-text\">My Address</h3>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n            [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n                <div class=\"card  border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n                    <div class=\"card-body p-3\">\r\n                        <!-- Header Section -->\r\n                        <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                            <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n                                <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n                                <div class=\"icon-grp d-flex\">\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"address-content mb-3\">\r\n                            <div class=\"address-line mb-2\">\r\n                                <span class=\"text-muted small d-block\">Address</span>\r\n                                <span class=\"address-text\">{{address.addressLine1}}</span>\r\n                            </div>\r\n                            <div class=\"phone-info\">\r\n                                <span class=\"text-muted small d-block\">Phone</span>\r\n                                <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #showEmptyAddress>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n                    </div>\r\n                    <div class=\"cart-text\">\r\n                        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n                        </div>\r\n                        <!-- </ng-container> -->\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"card  border-0 mb-2 cursor-pointer order-card\">\r\n        <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n            <!-- Header Section -->\r\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n                <div class=\"order-number\">\r\n                    <h4 class=\"mb-0  fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n                </div>\r\n                <div class=\"arrow-icon\">\r\n                    <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n                </div>\r\n            </div>\r\n            <div class=\"ordered-item row mb-2\">\r\n                <ng-container *ngFor=\"let item of  getOrderedItems(order)\">\r\n                    <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n                            onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            class=\"item-img w-50\">\r\n                        <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <!-- Middle Section -->\r\n            <div class=\"order-details\">\r\n                <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n                    <span class=\"text-muted small mb-3 mb-sm-0\">\r\n                        {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"amount-section\">\r\n                    <span class=\"h5 mb-0 text-success fw-bold\">\r\n                        <span [innerHTML]=\"currency\"></span>\r\n                        <!-- {{(order.billDetails.discountAmount ?\r\n                        (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n                        order?.billDetails?.totalTaxAfterDiscount) :\r\n                        order.billDetails.totalGrossValue) | number:'1.0-2'}}  -->\r\n                        {{getTotalAmtPaid(order) | number:'1.0-2'}}\r\n                    </span>\r\n                </div>\r\n                <div class=\"status-section\">\r\n                    <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n                        {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'REWARD_POINTS'\">\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Amount Paid -\r\n                    <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.pointsConvertedINR ? '0' :\r\n                        (getTotalAmtPaid(order) - order.pointsConvertedINR) }}</span>\r\n                </div>\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.pointsConvertedINR}}</span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'VOUCHER'\">\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Amount Paid -\r\n                    <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.voucherValue ? '0' :\r\n                        (getTotalAmtPaid(order) - order.voucherValue) }}</span>\r\n                </div>\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.voucherValue}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n    <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n    <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n        <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"address-card mb-2\">\r\n                    <div class=\"card-body p-4\">\r\n                        <div class=\"row align-items-center\">\r\n                            <div class=\"col-auto\">\r\n                                <div class=\"product-image-wrapper\">\r\n                                    <img loading=\"lazy\"\r\n                                        onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                        class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col\">\r\n                                <div class=\"product-details\">\r\n                                    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n                                        <div\r\n                                            class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n                                            <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n                                                {{item.itemName}}\r\n                                            </h6>\r\n                                            <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n                                                <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n                                                    title=\"Remove from wishlist\">\r\n                                                    <mat-icon class=\"small-icon\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                            <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n                                                <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n                                                    <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"product-price mb-3\">\r\n                                        <span class=\"h5 text-success fw-bold mb-0\">\r\n                                            <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n                                        </span>\r\n                                        <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n                                            ({{item.quantity}} items)\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"action-buttons d-flex  gap-2\">\r\n                                        <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n                                            *ngIf=\"item.quantity\">\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n                                                -\r\n                                            </button>\r\n                                            <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n                                                {{item.quantity}}\r\n                                            </span>\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'ADD')\"> +\r\n                                            </button>\r\n                                        </div>\r\n                                        <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n                                            (click)=\"addToFav(item, 'ADD')\">\r\n                                            + Add Quantity\r\n                                        </button>\r\n                                        <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n                                            Move to Cart\r\n                                        </button>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n    <ng-template #showEmptyWishlistScreen>\r\n        <section class=\"empty-cart m-auto\">\r\n            <div>\r\n                <div class=\"cart-image\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                    <ng-container>\r\n                        <div class=\"heading-medium d-flex justify-content-center\">\r\n                            Your Wishlist is Empty</div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </section>\r\n    </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n    <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n    <div class=\"row gap-2\">\r\n        <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n            <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n                <div class=\"card-header row gap-2\">\r\n                    <div class=\"card-head-left col-7\">\r\n                        <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n                        <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n                    </div>\r\n                    <div class=\"card-head-right col-4 text-center align-content-center\">\r\n                        <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body d-flex p-0 mb-3\">\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n                            class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n                        <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n                        <div class=\"card-sub-text text-center\">Rewards</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">8</div>\r\n                        <div class=\"card-sub-text text-center\">Due Months</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-footer row\">\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n                            may 2025</span>\r\n                    </div>\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n                            may 2026</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n    <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n        <div class=\"header d-flex flex-column\">\r\n            <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n                    class=\"store-listing\" (change)=\"changeStore($event)\">\r\n                    <option value=\"\">Select Store</option>\r\n                    <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n                </select></div>\r\n            <div class=\"scheme-overview d-flex flex-column\">\r\n                <div class=\"d-flex gap-2\">\r\n                    <div class=\"available-savings\">\r\n                        <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n                            <h3>Available Savings</h3>\r\n                            <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n                        </div>\r\n\r\n                        <div class=\"amount\">{{totalSavings ? totalSavings :\r\n                            '0'}}</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Active Passbooks</h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n                            totalSchemes.length : '0'}}</div>\r\n                        <div class=\"subtitle\">On Track</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Accumulated Gold </h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n                    </div>\r\n                </div>\r\n                <ng-container *ngIf=\"overAllDues?.length\">\r\n                    <div class=\"section d-flex-flex-column gap-2\">\r\n                        <div class=\"section-header\">\r\n                            <h2 class=\"section-title\">Due Payments</h2>\r\n                        </div>\r\n                        <div class=\"payment-list d-flex flex-column gap-2\">\r\n                            <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n                                <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n                                    <div class=\"payment-info\">\r\n                                        <div class=\"payment-icon\"><img\r\n                                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n                                            <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n                                            *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n                                        </div>\r\n                                        <div class=\"payment-details\">\r\n                                            <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n                                            <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n                                                'N/A'}}\r\n                                                <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n                                                ? payment.daysOverdue : 0}}</span> --></span>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"payment-amount\">\r\n                                        <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n                                            '0'}}\r\n                                        </div>\r\n                                        <div class=\"payment-status  overdue-status cursor-pointer\"\r\n                                            (click)=\"payDue(payment)\">\r\n                                            <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n                                            <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                            <ng-template #showEmptyPayment>\r\n                                <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                                    <span>No Due Payments</span>\r\n                                </div>\r\n                            </ng-template>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"section mt-3\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n            </div>\r\n\r\n            <div class=\"schemes-grid\">\r\n                <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n                    <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n                        *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n                        <div class=\"scheme-header\">\r\n                            <div>\r\n                                <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n                                <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n                            </div>\r\n                            <div class=\"scheme-date\">\r\n                                <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n                                    date:'dd-MM-yyyy') :\r\n                                    'N/A' }}</span>\r\n                                <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n                                'N/A' }}</span> -->\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n                            [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n                            {{\r\n                            scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n                            }}\r\n                        </div>\r\n\r\n                        <div class=\"scheme-stats\">\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n                                <div class=\"stat-label\">Deposited Amount</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">\r\n                                    {{\r\n                                    scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    (scheme?.schemePayments?.length -\r\n                                    scheme.dueMonths) : 'N/A'\r\n                                    }}\r\n                                </div>\r\n                                <div class=\"stat-label\">Paid Months</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    scheme?.dueMonths : 'N/A' }}</div>\r\n                                <div class=\"stat-label\">Due Months</div>\r\n                            </div>\r\n                            <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n                                <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n                                <div class=\"stat-label\">Accumulated Gold</div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-footer\">\r\n                            <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n                                'N/A' }}</span>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <ng-template #showActiveScheme>\r\n                    <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                        <span>No Active Scheme</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n\r\n\r\n        </div>\r\n\r\n        <!-- <div class=\"auto-pay\">\r\n            <div class=\"auto-pay-icon mobile-icon\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n            <div class=\"auto-pay-content\">\r\n                <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n                <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n            </div>\r\n            <button class=\"manage-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n        </div> -->\r\n    </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n    <div class=\"payment-dialog\">\r\n        <div class=\"dialog-header\">\r\n            <h2>Payment Details</h2>\r\n            <button class=\"close-btn\" mat-icon-button>\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"payment-content\">\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Installment Amount:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Convenience Fee:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Payment Service Charges:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row total-row\">\r\n                <span class=\"label total-label\">Total Amount:</span>\r\n                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"dialog-actions\">\r\n            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n    <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n        (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n    <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;padding:15px;overflow-y:auto;overflow-x:hidden;max-height:80vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;border:none;padding:10px 5px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px;border:none}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}.fs-14{font-size:14px}.fs-12{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details", inputs: ["schemeDetails", "data", "metalPrice"], outputs: ["gotoSchemeOverview"] }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }, { kind: "component", type: PassbookTransactionsComponent, selector: "simpo-passbook-transactions" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, decorators: [{
             type: Component,
@@ -22201,7 +22266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SchemeDetailsComponent,
                         ListHomeAppointmentComponent,
                         PassbookTransactionsComponent
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n    [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n    [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-4 profile-box shadow-lg\"\r\n            style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n            [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n            <!-- Profile Header Section -->\r\n            <div class=\"d-flex align-items-center profile-header\"\r\n                style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n                <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n                        style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n                    <div class=\"online-indicator\"\r\n                        style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"profile-details flex-grow-1\">\r\n                    <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n                        {{getUserDetails?.contact?.name}}</h4>\r\n\r\n                    <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                        </h6>\r\n\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n                            <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n                        </h6>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Navigation Tabs Section -->\r\n            <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center tab-item\"\r\n                        style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n                        [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n                        [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n                        [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n                        [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n                        <div class=\"tab-icon-wrapper\"\r\n                            style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n                            <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n                        </div>\r\n\r\n                        <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n                            {{tab.value}}</div>\r\n\r\n                        <!-- Hover effect background -->\r\n                        <div class=\"tab-hover-bg\"\r\n                            style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- Action Buttons Section -->\r\n            <div class=\"d-flex action-buttons\"\r\n                style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n                <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                    [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n                    Edit Profile\r\n                </button>\r\n\r\n                <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                    [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n                    Logout\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Transactions'\">\r\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n                    <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n                    <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n                *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n                    (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n                            style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n                                <mat-icon>stay_primary_portrait</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                            </h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n                                *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.email}}</span>\r\n                            </h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n                                [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n                                [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                    [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n                                    {{tab.value}}</div>\r\n                            </div>\r\n\r\n                        </ng-container>\r\n                    </section>\r\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                            [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\">Logout</button>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Transactions'\">\r\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n                    <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n                    <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n            [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n</section>\r\n\r\n<ng-template #Referrals>\r\n    <iframe [src]=\"getMyReferralsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #Rewards>\r\n    <iframe [src]=\"getRewardsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #OrderSection>\r\n    <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n    <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n                {{tab.value}}</div>\r\n        </ng-container>\r\n    </div> -->\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                            [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n                    </div>\r\n                    <div class=\"cart-text \">\r\n                        <ng-container *ngFor=\"let text of content?.inputText\">\r\n                            <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n                                [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n                                <simpo-text-editor [(value)]=\"text.value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n        (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2\">\r\n        <h3 class=\"title-text\">My Address</h3>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n            [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n                <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n                    <div class=\"card-body p-3\">\r\n                        <!-- Header Section -->\r\n                        <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                            <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n                                <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n                                <div class=\"icon-grp d-flex\">\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"address-content mb-3\">\r\n                            <div class=\"address-line mb-2\">\r\n                                <span class=\"text-muted small d-block\">Address</span>\r\n                                <span class=\"address-text\">{{address.addressLine1}}</span>\r\n                            </div>\r\n                            <div class=\"phone-info\">\r\n                                <span class=\"text-muted small d-block\">Phone</span>\r\n                                <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #showEmptyAddress>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n                    </div>\r\n                    <div class=\"cart-text\">\r\n                        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n                        </div>\r\n                        <!-- </ng-container> -->\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n        <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n            <!-- Header Section -->\r\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n                <div class=\"order-number\">\r\n                    <h4 class=\"mb-0  fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n                </div>\r\n                <div class=\"arrow-icon\">\r\n                    <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n                </div>\r\n            </div>\r\n            <div class=\"ordered-item row mb-2\">\r\n                <ng-container *ngFor=\"let item of  getOrderedItems(order)\">\r\n                    <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n                            onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            class=\"item-img w-50\">\r\n                        <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <!-- Middle Section -->\r\n            <div class=\"order-details\">\r\n                <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n                    <span class=\"text-muted small mb-3 mb-sm-0\">\r\n                        {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"amount-section\">\r\n                    <span class=\"h5 mb-0 text-success fw-bold\">\r\n                        <span [innerHTML]=\"currency\"></span>\r\n                        <!-- {{(order.billDetails.discountAmount ?\r\n                        (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n                        order?.billDetails?.totalTaxAfterDiscount) :\r\n                        order.billDetails.totalGrossValue) | number:'1.0-2'}}  -->\r\n                        {{getTotalAmtPaid(order) | number:'1.0-2'}}\r\n                    </span>\r\n                </div>\r\n                <div class=\"status-section\">\r\n                    <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n                        {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'REWARD_POINTS'\">\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Amount Paid - \r\n                    <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.pointsConvertedINR ? '0' : (getTotalAmtPaid(order) - order.pointsConvertedINR) }}</span>\r\n                </div> \r\n                <div class=\"fs-14 text-secondary\">\r\n                    Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.pointsConvertedINR}}</span>\r\n                </div> \r\n            </div>\r\n\r\n            <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'VOUCHER'\"> \r\n                <div class=\"fs-14 text-secondary\">\r\n                    Amount Paid - \r\n                    <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.voucherValue ? '0' : (getTotalAmtPaid(order) - order.voucherValue) }}</span>\r\n                </div> \r\n                <div class=\"fs-14 text-secondary\">\r\n                    Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.voucherValue}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n    <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n    <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n        <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"address-card mb-2\">\r\n                    <div class=\"card-body p-4\">\r\n                        <div class=\"row align-items-center\">\r\n                            <div class=\"col-auto\">\r\n                                <div class=\"product-image-wrapper\">\r\n                                    <img loading=\"lazy\"\r\n                                        onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                        class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col\">\r\n                                <div class=\"product-details\">\r\n                                    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n                                        <div\r\n                                            class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n                                            <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n                                                {{item.itemName}}\r\n                                            </h6>\r\n                                            <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n                                                <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n                                                    title=\"Remove from wishlist\">\r\n                                                    <mat-icon class=\"small-icon\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                            <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n                                                <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n                                                    <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"product-price mb-3\">\r\n                                        <span class=\"h5 text-success fw-bold mb-0\">\r\n                                            <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n                                        </span>\r\n                                        <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n                                            ({{item.quantity}} items)\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"action-buttons d-flex  gap-2\">\r\n                                        <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n                                            *ngIf=\"item.quantity\">\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n                                                -\r\n                                            </button>\r\n                                            <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n                                                {{item.quantity}}\r\n                                            </span>\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'ADD')\"> +\r\n                                            </button>\r\n                                        </div>\r\n                                        <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n                                            (click)=\"addToFav(item, 'ADD')\">\r\n                                            + Add Quantity\r\n                                        </button>\r\n                                        <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n                                            Move to Cart\r\n                                        </button>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n    <ng-template #showEmptyWishlistScreen>\r\n        <section class=\"empty-cart m-auto\">\r\n            <div>\r\n                <div class=\"cart-image\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                    <ng-container>\r\n                        <div class=\"heading-medium d-flex justify-content-center\">\r\n                            Your Wishlist is Empty</div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </section>\r\n    </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n    <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n    <div class=\"row gap-2\">\r\n        <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n            <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n                <div class=\"card-header row gap-2\">\r\n                    <div class=\"card-head-left col-7\">\r\n                        <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n                        <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n                    </div>\r\n                    <div class=\"card-head-right col-4 text-center align-content-center\">\r\n                        <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body d-flex p-0 mb-3\">\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n                            class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n                        <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n                        <div class=\"card-sub-text text-center\">Rewards</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">8</div>\r\n                        <div class=\"card-sub-text text-center\">Due Months</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-footer row\">\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n                            may 2025</span>\r\n                    </div>\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n                            may 2026</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n    <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n        <div class=\"header d-flex flex-column\">\r\n            <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n                    class=\"store-listing\" (change)=\"changeStore($event)\">\r\n                    <option value=\"\">Select Store</option>\r\n                    <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n                </select></div>\r\n            <div class=\"scheme-overview d-flex flex-column\">\r\n                <div class=\"d-flex gap-2\">\r\n                    <div class=\"available-savings\">\r\n                        <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n                            <h3>Available Savings</h3>\r\n                            <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n                        </div>\r\n\r\n                        <div class=\"amount\">{{totalSavings ? totalSavings :\r\n                            '0'}}</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Active Passbooks</h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n                            totalSchemes.length : '0'}}</div>\r\n                        <div class=\"subtitle\">On Track</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Accumulated Gold </h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n                    </div>\r\n                </div>\r\n                <ng-container *ngIf=\"overAllDues?.length\">\r\n                    <div class=\"section d-flex-flex-column gap-2\">\r\n                        <div class=\"section-header\">\r\n                            <h2 class=\"section-title\">Due Payments</h2>\r\n                        </div>\r\n                        <div class=\"payment-list d-flex flex-column gap-2\">\r\n                            <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n                                <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n                                    <div class=\"payment-info\">\r\n                                        <div class=\"payment-icon\"><img\r\n                                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n                                            <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n                                            *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n                                        </div>\r\n                                        <div class=\"payment-details\">\r\n                                            <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n                                            <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n                                                'N/A'}}\r\n                                                <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n                                                ? payment.daysOverdue : 0}}</span> --></span>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"payment-amount\">\r\n                                        <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n                                            '0'}}\r\n                                        </div>\r\n                                        <div class=\"payment-status  overdue-status cursor-pointer\"\r\n                                            (click)=\"payDue(payment)\">\r\n                                            <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n                                            <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                            <ng-template #showEmptyPayment>\r\n                                <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                                    <span>No Due Payments</span>\r\n                                </div>\r\n                            </ng-template>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"section mt-3\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n            </div>\r\n\r\n            <div class=\"schemes-grid\">\r\n                <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n                    <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n                        *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n                        <div class=\"scheme-header\">\r\n                            <div>\r\n                                <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n                                <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n                            </div>\r\n                            <div class=\"scheme-date\">\r\n                                <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n                                    date:'dd-MM-yyyy') :\r\n                                    'N/A' }}</span>\r\n                                <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n                                'N/A' }}</span> -->\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n                            [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n                            {{\r\n                            scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n                            }}\r\n                        </div>\r\n\r\n                        <div class=\"scheme-stats\">\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n                                <div class=\"stat-label\">Deposited Amount</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">\r\n                                    {{\r\n                                    scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    (scheme?.schemePayments?.length -\r\n                                    scheme.dueMonths) : 'N/A'\r\n                                    }}\r\n                                </div>\r\n                                <div class=\"stat-label\">Paid Months</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    scheme?.dueMonths : 'N/A' }}</div>\r\n                                <div class=\"stat-label\">Due Months</div>\r\n                            </div>\r\n                            <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n                                <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n                                <div class=\"stat-label\">Accumulated Gold</div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-footer\">\r\n                            <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n                                'N/A' }}</span>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <ng-template #showActiveScheme>\r\n                    <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                        <span>No Active Scheme</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n\r\n\r\n        </div>\r\n\r\n        <!-- <div class=\"auto-pay\">\r\n            <div class=\"auto-pay-icon mobile-icon\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n            <div class=\"auto-pay-content\">\r\n                <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n                <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n            </div>\r\n            <button class=\"manage-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n        </div> -->\r\n    </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n    <div class=\"payment-dialog\">\r\n        <div class=\"dialog-header\">\r\n            <h2>Payment Details</h2>\r\n            <button class=\"close-btn\" mat-icon-button>\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"payment-content\">\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Installment Amount:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Convenience Fee:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Payment Service Charges:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row total-row\">\r\n                <span class=\"label total-label\">Total Amount:</span>\r\n                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"dialog-actions\">\r\n            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n    <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n        (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n    <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;overflow-x:hidden;border:1px solid #d3d3d324;border-radius:20px;max-height:80vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;border:none;padding:10px 5px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px;border:none}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}.fs-14{font-size:14px}.fs-12{font-size:12px}\n"] }]
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n    [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n    [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-4 profile-box\" style=\"width: 25%; border-radius: 20px; height: fit-content\"\r\n            [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n            <!-- Profile Header Section -->\r\n            <div class=\"d-flex align-items-center profile-header\"\r\n                style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n                <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n                        style=\"border: 3px solid #e3f2fd; transition: all 0.3s ease;\">\r\n                    <div class=\"online-indicator\"\r\n                        style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"profile-details flex-grow-1\">\r\n                    <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n                        {{getUserDetails?.contact?.name}}</h4>\r\n\r\n                    <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                        </h6>\r\n\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n                            <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n                        </h6>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Navigation Tabs Section -->\r\n            <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center tab-item\"\r\n                        style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n                        [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n                        [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n                        [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n                        [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n                        <div class=\"tab-icon-wrapper\"\r\n                            style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n                            <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n                        </div>\r\n\r\n                        <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n                            {{tab.value}}</div>\r\n\r\n                        <!-- Hover effect background -->\r\n                        <div class=\"tab-hover-bg\"\r\n                            style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- Action Buttons Section -->\r\n            <div class=\"d-flex action-buttons\"\r\n                style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n                <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                    [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n                    Edit Profile\r\n                </button>\r\n\r\n                <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                    [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease;\">\r\n                    Logout\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"orders-sec\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Transactions'\">\r\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n                    <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n                    <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n                *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n                    (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n                            style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n                                <mat-icon>stay_primary_portrait</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                            </h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n                                *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.email}}</span>\r\n                            </h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n                                [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n                                [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                    [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n                                    {{tab.value}}</div>\r\n                            </div>\r\n\r\n                        </ng-container>\r\n                    </section>\r\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                            [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\">Logout</button>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Transactions'\">\r\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n                    <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n                    <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n            [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n</section>\r\n\r\n<ng-template #Referrals>\r\n    <iframe [src]=\"getMyReferralsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #Rewards>\r\n    <iframe [src]=\"getRewardsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #OrderSection>\r\n    <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n    <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n                {{tab.value}}</div>\r\n        </ng-container>\r\n    </div> -->\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                            [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n                    </div>\r\n                    <div class=\"cart-text \">\r\n                        <ng-container *ngFor=\"let text of content?.inputText\">\r\n                            <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n                                [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n                                <simpo-text-editor [(value)]=\"text.value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n        (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2\">\r\n        <h3 class=\"title-text\">My Address</h3>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n            [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n                <div class=\"card  border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n                    <div class=\"card-body p-3\">\r\n                        <!-- Header Section -->\r\n                        <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                            <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n                                <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n                                <div class=\"icon-grp d-flex\">\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"address-content mb-3\">\r\n                            <div class=\"address-line mb-2\">\r\n                                <span class=\"text-muted small d-block\">Address</span>\r\n                                <span class=\"address-text\">{{address.addressLine1}}</span>\r\n                            </div>\r\n                            <div class=\"phone-info\">\r\n                                <span class=\"text-muted small d-block\">Phone</span>\r\n                                <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #showEmptyAddress>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n                    </div>\r\n                    <div class=\"cart-text\">\r\n                        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n                        </div>\r\n                        <!-- </ng-container> -->\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"card  border-0 mb-2 cursor-pointer order-card\">\r\n        <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n            <!-- Header Section -->\r\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n                <div class=\"order-number\">\r\n                    <h4 class=\"mb-0  fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n                </div>\r\n                <div class=\"arrow-icon\">\r\n                    <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n                </div>\r\n            </div>\r\n            <div class=\"ordered-item row mb-2\">\r\n                <ng-container *ngFor=\"let item of  getOrderedItems(order)\">\r\n                    <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n                            onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            class=\"item-img w-50\">\r\n                        <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <!-- Middle Section -->\r\n            <div class=\"order-details\">\r\n                <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n                    <span class=\"text-muted small mb-3 mb-sm-0\">\r\n                        {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"amount-section\">\r\n                    <span class=\"h5 mb-0 text-success fw-bold\">\r\n                        <span [innerHTML]=\"currency\"></span>\r\n                        <!-- {{(order.billDetails.discountAmount ?\r\n                        (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n                        order?.billDetails?.totalTaxAfterDiscount) :\r\n                        order.billDetails.totalGrossValue) | number:'1.0-2'}}  -->\r\n                        {{getTotalAmtPaid(order) | number:'1.0-2'}}\r\n                    </span>\r\n                </div>\r\n                <div class=\"status-section\">\r\n                    <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n                        {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'REWARD_POINTS'\">\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Amount Paid -\r\n                    <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.pointsConvertedINR ? '0' :\r\n                        (getTotalAmtPaid(order) - order.pointsConvertedINR) }}</span>\r\n                </div>\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.pointsConvertedINR}}</span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'VOUCHER'\">\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Amount Paid -\r\n                    <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.voucherValue ? '0' :\r\n                        (getTotalAmtPaid(order) - order.voucherValue) }}</span>\r\n                </div>\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.voucherValue}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n    <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n    <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n        <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"address-card mb-2\">\r\n                    <div class=\"card-body p-4\">\r\n                        <div class=\"row align-items-center\">\r\n                            <div class=\"col-auto\">\r\n                                <div class=\"product-image-wrapper\">\r\n                                    <img loading=\"lazy\"\r\n                                        onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                        class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col\">\r\n                                <div class=\"product-details\">\r\n                                    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n                                        <div\r\n                                            class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n                                            <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n                                                {{item.itemName}}\r\n                                            </h6>\r\n                                            <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n                                                <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n                                                    title=\"Remove from wishlist\">\r\n                                                    <mat-icon class=\"small-icon\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                            <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n                                                <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n                                                    <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"product-price mb-3\">\r\n                                        <span class=\"h5 text-success fw-bold mb-0\">\r\n                                            <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n                                        </span>\r\n                                        <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n                                            ({{item.quantity}} items)\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"action-buttons d-flex  gap-2\">\r\n                                        <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n                                            *ngIf=\"item.quantity\">\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n                                                -\r\n                                            </button>\r\n                                            <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n                                                {{item.quantity}}\r\n                                            </span>\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'ADD')\"> +\r\n                                            </button>\r\n                                        </div>\r\n                                        <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n                                            (click)=\"addToFav(item, 'ADD')\">\r\n                                            + Add Quantity\r\n                                        </button>\r\n                                        <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n                                            Move to Cart\r\n                                        </button>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n    <ng-template #showEmptyWishlistScreen>\r\n        <section class=\"empty-cart m-auto\">\r\n            <div>\r\n                <div class=\"cart-image\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                    <ng-container>\r\n                        <div class=\"heading-medium d-flex justify-content-center\">\r\n                            Your Wishlist is Empty</div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </section>\r\n    </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n    <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n    <div class=\"row gap-2\">\r\n        <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n            <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n                <div class=\"card-header row gap-2\">\r\n                    <div class=\"card-head-left col-7\">\r\n                        <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n                        <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n                    </div>\r\n                    <div class=\"card-head-right col-4 text-center align-content-center\">\r\n                        <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body d-flex p-0 mb-3\">\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n                            class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n                        <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n                        <div class=\"card-sub-text text-center\">Rewards</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">8</div>\r\n                        <div class=\"card-sub-text text-center\">Due Months</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-footer row\">\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n                            may 2025</span>\r\n                    </div>\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n                            may 2026</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n    <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n        <div class=\"header d-flex flex-column\">\r\n            <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n                    class=\"store-listing\" (change)=\"changeStore($event)\">\r\n                    <option value=\"\">Select Store</option>\r\n                    <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n                </select></div>\r\n            <div class=\"scheme-overview d-flex flex-column\">\r\n                <div class=\"d-flex gap-2\">\r\n                    <div class=\"available-savings\">\r\n                        <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n                            <h3>Available Savings</h3>\r\n                            <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n                        </div>\r\n\r\n                        <div class=\"amount\">{{totalSavings ? totalSavings :\r\n                            '0'}}</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Active Passbooks</h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n                            totalSchemes.length : '0'}}</div>\r\n                        <div class=\"subtitle\">On Track</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Accumulated Gold </h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n                    </div>\r\n                </div>\r\n                <ng-container *ngIf=\"overAllDues?.length\">\r\n                    <div class=\"section d-flex-flex-column gap-2\">\r\n                        <div class=\"section-header\">\r\n                            <h2 class=\"section-title\">Due Payments</h2>\r\n                        </div>\r\n                        <div class=\"payment-list d-flex flex-column gap-2\">\r\n                            <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n                                <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n                                    <div class=\"payment-info\">\r\n                                        <div class=\"payment-icon\"><img\r\n                                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n                                            <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n                                            *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n                                        </div>\r\n                                        <div class=\"payment-details\">\r\n                                            <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n                                            <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n                                                'N/A'}}\r\n                                                <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n                                                ? payment.daysOverdue : 0}}</span> --></span>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"payment-amount\">\r\n                                        <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n                                            '0'}}\r\n                                        </div>\r\n                                        <div class=\"payment-status  overdue-status cursor-pointer\"\r\n                                            (click)=\"payDue(payment)\">\r\n                                            <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n                                            <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                            <ng-template #showEmptyPayment>\r\n                                <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                                    <span>No Due Payments</span>\r\n                                </div>\r\n                            </ng-template>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"section mt-3\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n            </div>\r\n\r\n            <div class=\"schemes-grid\">\r\n                <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n                    <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n                        *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n                        <div class=\"scheme-header\">\r\n                            <div>\r\n                                <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n                                <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n                            </div>\r\n                            <div class=\"scheme-date\">\r\n                                <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n                                    date:'dd-MM-yyyy') :\r\n                                    'N/A' }}</span>\r\n                                <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n                                'N/A' }}</span> -->\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n                            [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n                            {{\r\n                            scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n                            }}\r\n                        </div>\r\n\r\n                        <div class=\"scheme-stats\">\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n                                <div class=\"stat-label\">Deposited Amount</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">\r\n                                    {{\r\n                                    scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    (scheme?.schemePayments?.length -\r\n                                    scheme.dueMonths) : 'N/A'\r\n                                    }}\r\n                                </div>\r\n                                <div class=\"stat-label\">Paid Months</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    scheme?.dueMonths : 'N/A' }}</div>\r\n                                <div class=\"stat-label\">Due Months</div>\r\n                            </div>\r\n                            <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n                                <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n                                <div class=\"stat-label\">Accumulated Gold</div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-footer\">\r\n                            <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n                                'N/A' }}</span>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <ng-template #showActiveScheme>\r\n                    <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                        <span>No Active Scheme</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n\r\n\r\n        </div>\r\n\r\n        <!-- <div class=\"auto-pay\">\r\n            <div class=\"auto-pay-icon mobile-icon\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n            <div class=\"auto-pay-content\">\r\n                <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n                <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n            </div>\r\n            <button class=\"manage-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n        </div> -->\r\n    </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n    <div class=\"payment-dialog\">\r\n        <div class=\"dialog-header\">\r\n            <h2>Payment Details</h2>\r\n            <button class=\"close-btn\" mat-icon-button>\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"payment-content\">\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Installment Amount:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Convenience Fee:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Payment Service Charges:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row total-row\">\r\n                <span class=\"label total-label\">Total Amount:</span>\r\n                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"dialog-actions\">\r\n            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n    <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n        (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n    <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;padding:15px;overflow-y:auto;overflow-x:hidden;max-height:80vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;border:none;padding:10px 5px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px;border:none}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}.fs-14{font-size:14px}.fs-12{font-size:12px}\n"] }]
         }], ctorParameters: () => [{ type: i2$2.Router }, { type: EventsService }, { type: RestService }, { type: StorageServiceService }, { type: CartService }, { type: i1$1.MatDialog }, { type: i8$3.MatBottomSheet }, { type: i2$3.CookieService }, { type: i6$1.MessageService }, { type: i1$2.DomSanitizer }, { type: i2$2.ActivatedRoute }], propDecorators: { showChargesTemplate: [{
                 type: ViewChild,
                 args: ['showCharges', { static: true }]