simpo-component-library 1.6.0 → 1.6.1

package/fesm2022/simpo-component-library.mjs

@@ -45,11 +45,11 @@ import { TimelineModule } from 'primeng/timeline';
 
 class ButtonElementComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ButtonElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ButtonElementComponent, isStandalone: true, selector: "simpo-button-element", inputs: { buttonData: "buttonData" }, ngImport: i0, template: "<button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" *ngIf=\"buttonData?.disabled\">{{buttonData?.text}}</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ButtonElementComponent, isStandalone: true, selector: "simpo-button-element", inputs: { buttonData: "buttonData" }, ngImport: i0, template: "<button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" *ngIf=\"buttonData?.disabled\">{{buttonData?.text}}</button>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ButtonElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-button-element', standalone: true, imports: [CommonModule, MatButtonModule], template: "<button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" *ngIf=\"buttonData?.disabled\">{{buttonData?.text}}</button>\n" }]
+            args: [{ selector: 'simpo-button-element', standalone: true, imports: [CommonModule, MatButtonModule], template: "<button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" *ngIf=\"buttonData?.disabled\">{{buttonData?.text}}</button>\r\n" }]
         }], propDecorators: { buttonData: [{
                 type: Input
             }] } });
@@ -60,11 +60,11 @@ class TextElementComponent {
         this.textLabel = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: TextElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TextElementComponent, isStandalone: true, selector: "simpo-text-element", inputs: { textData: "textData", textLabel: "textLabel" }, ngImport: i0, template: "<div [innerHTML]=\"textData\" style=\"text-wrap: balance;\" [ngClass]=\"textLabel === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TextElementComponent, isStandalone: true, selector: "simpo-text-element", inputs: { textData: "textData", textLabel: "textLabel" }, ngImport: i0, template: "<div [innerHTML]=\"textData\" style=\"text-wrap: balance;\" [ngClass]=\"textLabel === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: TextElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-text-element', standalone: true, imports: [CommonModule], template: "<div [innerHTML]=\"textData\" style=\"text-wrap: balance;\" [ngClass]=\"textLabel === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\n" }]
+            args: [{ selector: 'simpo-text-element', standalone: true, imports: [CommonModule], template: "<div [innerHTML]=\"textData\" style=\"text-wrap: balance;\" [ngClass]=\"textLabel === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n" }]
         }], propDecorators: { textData: [{
                 type: Input
             }], textLabel: [{
@@ -616,11 +616,11 @@ class SimpoButtonComponent {
         this._eventService.buttonRedirection.emit({ data: this.buttonContent });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SimpoButtonComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SimpoButtonComponent, isStandalone: true, selector: "app-button-element", inputs: { buttonContent: "buttonContent", buttonStyle: "buttonStyle", buttonId: "buttonId", color: "color", sectionId: "sectionId" }, ngImport: i0, template: "<button class=\"button\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\">{{buttonContent?.label}}</button>\n", styles: [".button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SimpoButtonComponent, isStandalone: true, selector: "app-button-element", inputs: { buttonContent: "buttonContent", buttonStyle: "buttonStyle", buttonId: "buttonId", color: "color", sectionId: "sectionId" }, ngImport: i0, template: "<button class=\"button\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\">{{buttonContent?.label}}</button>\r\n", styles: [".button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SimpoButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-button-element', standalone: true, imports: [ButtonDirectiveDirective], template: "<button class=\"button\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\">{{buttonContent?.label}}</button>\n", styles: [".button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}\n"] }]
+            args: [{ selector: 'app-button-element', standalone: true, imports: [ButtonDirectiveDirective], template: "<button class=\"button\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\">{{buttonContent?.label}}</button>\r\n", styles: [".button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { buttonContent: [{
                 type: Input
             }], buttonStyle: [{
@@ -747,7 +747,7 @@ class BelowImageCardComponent {
         return { ...this.styles.image };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BelowImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\n  <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\n    <img loading=\"lazy\"  [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [simpoObjectPosition]=\"data.image?.position\"\n      [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\n      loading=\"lazy\">\n  <!-- </div> -->\n  <div class=\"ptb-1\">\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\n        [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\r\n  <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n    <img loading=\"lazy\"  [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [simpoObjectPosition]=\"data.image?.position\"\r\n      [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\r\n      loading=\"lazy\">\r\n  <!-- </div> -->\r\n  <div class=\"ptb-1\">\r\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\r\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\r\n        [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BelowImageCardComponent, decorators: [{
             type: Component,
@@ -758,7 +758,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         SimpoButtonComponent,
                         ObjectPositionDirective,
                         ImageContainerDirective
-                    ], template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\n  <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\n    <img loading=\"lazy\"  [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [simpoObjectPosition]=\"data.image?.position\"\n      [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\n      loading=\"lazy\">\n  <!-- </div> -->\n  <div class=\"ptb-1\">\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\n        [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}\n"] }]
+                    ], template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\r\n  <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n    <img loading=\"lazy\"  [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [simpoObjectPosition]=\"data.image?.position\"\r\n      [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\r\n      loading=\"lazy\">\r\n  <!-- </div> -->\r\n  <div class=\"ptb-1\">\r\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\r\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\r\n        [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], styles: [{
@@ -887,11 +887,11 @@ class TopOfImageCardComponent {
         this._eventService.buttonRedirection.emit({ data: this.data.button });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: TopOfImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TopOfImageCardComponent, isStandalone: true, selector: "simpo-top-of-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<!-- <div style=\"position: relative;\">\n\n  <img loading=\"lazy\"  [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\n\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.showHeading\"></div>\n    <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\n    </div>\n    <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n  </div>\n</div>\n -->\n<div class=\"top-container\"  (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\n  [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\n  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\n  <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\n    [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\n    <div class=\"heading-medium mb-1 lh-40\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\">\n    </div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\">\n    </div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\n        [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end;bottom:0}.top-container{background-position:center center;background-size:cover;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end}.lh-40{line-height:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TopOfImageCardComponent, isStandalone: true, selector: "simpo-top-of-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<!-- <div style=\"position: relative;\">\r\n\r\n  <img loading=\"lazy\"  [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\r\n\r\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n    <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\r\n      *ngIf=\"content.showHeading\"></div>\r\n    <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\r\n    </div>\r\n    <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n  </div>\r\n</div>\r\n -->\r\n<div class=\"top-container\"  (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n  [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\r\n  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\r\n  <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\r\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\r\n    [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\r\n    <div class=\"heading-medium mb-1 lh-40\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\">\r\n    </div>\r\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\">\r\n    </div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\r\n        [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end;bottom:0}.top-container{background-position:center center;background-size:cover;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end}.lh-40{line-height:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: TopOfImageCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-top-of-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective, CornerDirective, TextBackgroundDirectiveDirective, SimpoButtonComponent], template: "<!-- <div style=\"position: relative;\">\n\n  <img loading=\"lazy\"  [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\n\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.showHeading\"></div>\n    <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\n    </div>\n    <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n  </div>\n</div>\n -->\n<div class=\"top-container\"  (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\n  [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\n  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\n  <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\n    [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\n    <div class=\"heading-medium mb-1 lh-40\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\">\n    </div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\">\n    </div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\n        [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end;bottom:0}.top-container{background-position:center center;background-size:cover;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end}.lh-40{line-height:40px}\n"] }]
+            args: [{ selector: 'simpo-top-of-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective, CornerDirective, TextBackgroundDirectiveDirective, SimpoButtonComponent], template: "<!-- <div style=\"position: relative;\">\r\n\r\n  <img loading=\"lazy\"  [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\r\n\r\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n    <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\r\n      *ngIf=\"content.showHeading\"></div>\r\n    <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\r\n    </div>\r\n    <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n  </div>\r\n</div>\r\n -->\r\n<div class=\"top-container\"  (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n  [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\r\n  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\r\n  <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\r\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\r\n    [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\r\n    <div class=\"heading-medium mb-1 lh-40\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\">\r\n    </div>\r\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\">\r\n    </div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\r\n        [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end;bottom:0}.top-container{background-position:center center;background-size:cover;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end}.lh-40{line-height:40px}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], styles: [{
@@ -914,11 +914,11 @@ class CoveringImageCardComponent {
         this._eventService.buttonRedirection.emit({ data: this.data.button });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CoveringImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CoveringImageCardComponent, isStandalone: true, selector: "simpo-covering-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<div class=\"parent-tab\" [id]=\"componentId\" [simpoImageDirective]=\"styles?.image\"\n  (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\n  <img loading=\"lazy\"  [src]=\"data.image.url\" [alt]=\"data.image.altText\"  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\" *ngIf=\"content.display.showImage\"\n    [simpoObjectPosition]=\"data.image?.position\" [class]=\"componentId+data.image.id\" [simpoImageDirective]=\"styles?.image\" loading=\"lazy\">\n  <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CoveringImageCardComponent, isStandalone: true, selector: "simpo-covering-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<div class=\"parent-tab\" [id]=\"componentId\" [simpoImageDirective]=\"styles?.image\"\r\n  (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\r\n  <img loading=\"lazy\"  [src]=\"data.image.url\" [alt]=\"data.image.altText\"  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\" *ngIf=\"content.display.showImage\"\r\n    [simpoObjectPosition]=\"data.image?.position\" [class]=\"componentId+data.image.id\" [simpoImageDirective]=\"styles?.image\" loading=\"lazy\">\r\n  <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\r\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CoveringImageCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-covering-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective, CornerDirective, TextBackgroundDirectiveDirective, SimpoButtonComponent, ObjectPositionDirective], template: "<div class=\"parent-tab\" [id]=\"componentId\" [simpoImageDirective]=\"styles?.image\"\n  (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\n  <img loading=\"lazy\"  [src]=\"data.image.url\" [alt]=\"data.image.altText\"  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\" *ngIf=\"content.display.showImage\"\n    [simpoObjectPosition]=\"data.image?.position\" [class]=\"componentId+data.image.id\" [simpoImageDirective]=\"styles?.image\" loading=\"lazy\">\n  <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}\n"] }]
+            args: [{ selector: 'simpo-covering-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective, CornerDirective, TextBackgroundDirectiveDirective, SimpoButtonComponent, ObjectPositionDirective], template: "<div class=\"parent-tab\" [id]=\"componentId\" [simpoImageDirective]=\"styles?.image\"\r\n  (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\r\n  <img loading=\"lazy\"  [src]=\"data.image.url\" [alt]=\"data.image.altText\"  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\" *ngIf=\"content.display.showImage\"\r\n    [simpoObjectPosition]=\"data.image?.position\" [class]=\"componentId+data.image.id\" [simpoImageDirective]=\"styles?.image\" loading=\"lazy\">\r\n  <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\r\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], styles: [{
@@ -936,11 +936,11 @@ class HeadingElementComponent {
         this.data = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: HeadingElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: HeadingElementComponent, isStandalone: true, selector: "simpo-heading-element", inputs: { data: "data" }, ngImport: i0, template: "<h2 class=\"heading-large\" [innerHtml]=\"data\"></h2>\n", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: HeadingElementComponent, isStandalone: true, selector: "simpo-heading-element", inputs: { data: "data" }, ngImport: i0, template: "<h2 class=\"heading-large\" [innerHtml]=\"data\"></h2>\r\n", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: HeadingElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-heading-element', standalone: true, imports: [], template: "<h2 class=\"heading-large\" [innerHtml]=\"data\"></h2>\n" }]
+            args: [{ selector: 'simpo-heading-element', standalone: true, imports: [], template: "<h2 class=\"heading-large\" [innerHtml]=\"data\"></h2>\r\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }] } });
@@ -1138,11 +1138,11 @@ class DeleteHoverElementComponent {
         this._eventService.delete.emit({ index: this.data });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: DeleteHoverElementComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: DeleteHoverElementComponent, isStandalone: true, selector: "simpo-delete-hover-element", inputs: { index: "index", data: "data" }, outputs: { edit: "edit" }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography\">\n  <section class=\"hover-tab\">\n      <div class=\"tabs-section\">\n        <div class=\"edit-tab\">\n            <button (click)=\"editSection()\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <g clip-path=\"url(#clip0_1076_52409)\">\n                        <path\n                            d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\"\n                            fill=\"#0267c1\" />\n                    </g>\n                    <defs>\n                        <clipPath id=\"clip0_1076_52409\">\n                            <rect width=\"18\" height=\"18\" fill=\"white\" />\n                        </clipPath>\n                    </defs>\n                </svg>\n                <span class=\"edit-text\">\n                    Edit\n                </span>\n            </button>\n        </div>\n        <div class=\"vr-line\"></div>\n          <div class=\"remainin-sections\"  *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\">\n              <button class=\"up-arrow\" (click)=\"deleteSection()\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\n                      class=\"icon w-5 h-5\" aria-hidden=\"true\">\n                      <path fill-rule=\"evenodd\"\n                          d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\n                          clip-rule=\"evenodd\"></path>\n                  </svg>\n              </button>\n          </div>\n      </div>\n  </section>\n</mat-dialog-content>\n", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:5px;top:20px;height:auto}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;color:#0267c1;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:46px;background-color:#fff;z-index:1001}.remainin-sections{display:flex;justify-content:center;align-items:center;position:relative;right:6px}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: DeleteHoverElementComponent, isStandalone: true, selector: "simpo-delete-hover-element", inputs: { index: "index", data: "data" }, outputs: { edit: "edit" }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography\">\r\n  <section class=\"hover-tab\">\r\n      <div class=\"tabs-section\">\r\n        <div class=\"edit-tab\">\r\n            <button (click)=\"editSection()\">\r\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <g clip-path=\"url(#clip0_1076_52409)\">\r\n                        <path\r\n                            d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\"\r\n                            fill=\"#0267c1\" />\r\n                    </g>\r\n                    <defs>\r\n                        <clipPath id=\"clip0_1076_52409\">\r\n                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                        </clipPath>\r\n                    </defs>\r\n                </svg>\r\n                <span class=\"edit-text\">\r\n                    Edit\r\n                </span>\r\n            </button>\r\n        </div>\r\n        <div class=\"vr-line\"></div>\r\n          <div class=\"remainin-sections\"  *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\">\r\n              <button class=\"up-arrow\" (click)=\"deleteSection()\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                      class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                      <path fill-rule=\"evenodd\"\r\n                          d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\r\n                          clip-rule=\"evenodd\"></path>\r\n                  </svg>\r\n              </button>\r\n          </div>\r\n      </div>\r\n  </section>\r\n</mat-dialog-content>\r\n", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:5px;top:20px;height:auto}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;color:#0267c1;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:46px;background-color:#fff;z-index:1001}.remainin-sections{display:flex;justify-content:center;align-items:center;position:relative;right:6px}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: DeleteHoverElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-delete-hover-element', standalone: true, imports: [MatIconModule, MatDialogModule, CommonModule], template: "<mat-dialog-content class=\"mat-typography\">\n  <section class=\"hover-tab\">\n      <div class=\"tabs-section\">\n        <div class=\"edit-tab\">\n            <button (click)=\"editSection()\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <g clip-path=\"url(#clip0_1076_52409)\">\n                        <path\n                            d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\"\n                            fill=\"#0267c1\" />\n                    </g>\n                    <defs>\n                        <clipPath id=\"clip0_1076_52409\">\n                            <rect width=\"18\" height=\"18\" fill=\"white\" />\n                        </clipPath>\n                    </defs>\n                </svg>\n                <span class=\"edit-text\">\n                    Edit\n                </span>\n            </button>\n        </div>\n        <div class=\"vr-line\"></div>\n          <div class=\"remainin-sections\"  *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\">\n              <button class=\"up-arrow\" (click)=\"deleteSection()\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\n                      class=\"icon w-5 h-5\" aria-hidden=\"true\">\n                      <path fill-rule=\"evenodd\"\n                          d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\n                          clip-rule=\"evenodd\"></path>\n                  </svg>\n              </button>\n          </div>\n      </div>\n  </section>\n</mat-dialog-content>\n", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:5px;top:20px;height:auto}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;color:#0267c1;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:46px;background-color:#fff;z-index:1001}.remainin-sections{display:flex;justify-content:center;align-items:center;position:relative;right:6px}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}\n"] }]
+            args: [{ selector: 'simpo-delete-hover-element', standalone: true, imports: [MatIconModule, MatDialogModule, CommonModule], template: "<mat-dialog-content class=\"mat-typography\">\r\n  <section class=\"hover-tab\">\r\n      <div class=\"tabs-section\">\r\n        <div class=\"edit-tab\">\r\n            <button (click)=\"editSection()\">\r\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <g clip-path=\"url(#clip0_1076_52409)\">\r\n                        <path\r\n                            d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\"\r\n                            fill=\"#0267c1\" />\r\n                    </g>\r\n                    <defs>\r\n                        <clipPath id=\"clip0_1076_52409\">\r\n                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                        </clipPath>\r\n                    </defs>\r\n                </svg>\r\n                <span class=\"edit-text\">\r\n                    Edit\r\n                </span>\r\n            </button>\r\n        </div>\r\n        <div class=\"vr-line\"></div>\r\n          <div class=\"remainin-sections\"  *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\">\r\n              <button class=\"up-arrow\" (click)=\"deleteSection()\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                      class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                      <path fill-rule=\"evenodd\"\r\n                          d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\r\n                          clip-rule=\"evenodd\"></path>\r\n                  </svg>\r\n              </button>\r\n          </div>\r\n      </div>\r\n  </section>\r\n</mat-dialog-content>\r\n", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:5px;top:20px;height:auto}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;color:#0267c1;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:46px;background-color:#fff;z-index:1001}.remainin-sections{display:flex;justify-content:center;align-items:center;position:relative;right:6px}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { index: [{
                 type: Input
             }], data: [{
@@ -2175,6 +2175,9 @@ class SanitizeHtmlPipe {
         this._sanitizer = _sanitizer;
     }
     transform(v) {
+        if (!v) {
+            return ''; // Return an empty string if value is null, undefined, or empty
+        }
         return this._sanitizer.bypassSecurityTrustHtml(v);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SanitizeHtmlPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
@@ -2351,7 +2354,7 @@ class FaqSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FaqSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FaqSectionComponent, isStandalone: true, selector: "simpo-faq-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" \n  class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\n    [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\n\n    <div *ngIf=\"!content?.image?.showImage\">\n      <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n        [simpoLayout]=\"style?.layout\">\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\n          <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\n        </div>\n\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\"(click)=\"toggleContent(i)\">\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\n            <span style=\"display: block;\">{{itemData.inputText[0].value}}</span>\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\n          </p>\n          <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"content?.image?.showImage\" class=\"row g-5\" [id]=\"data?.id\"\n      [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\n      [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\n\n\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\"\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\n\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\n          <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\n        </div>\n\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\" (click)=\"toggleContent(i)\">\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\n            <span>{{itemData.inputText[0].value}}</span>\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\n          </p>\n          <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\n        </div>\n      </div>\n      <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\n        <img loading=\"lazy\"  [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\n          [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>\n", styles: [".mb-2{margin-bottom:2.5rem!important}.data{display:flex;flex-direction:column;gap:1rem;padding-top:2.5rem;padding-bottom:2.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: HeadingElementComponent, selector: "simpo-heading-element", inputs: ["data"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: 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.1.4", type: FaqSectionComponent, isStandalone: true, selector: "simpo-faq-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" \r\n  class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n    [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n    <div *ngIf=\"!content?.image?.showImage\">\r\n      <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n        [simpoLayout]=\"style?.layout\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n        </div>\r\n\r\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\"(click)=\"toggleContent(i)\">\r\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n            <span style=\"display: block;\">{{itemData.inputText[0].value}}</span>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n          </p>\r\n          <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"content?.image?.showImage\" class=\"row g-5\" [id]=\"data?.id\"\r\n      [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\"\r\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n        </div>\r\n\r\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\" (click)=\"toggleContent(i)\">\r\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n            <span>{{itemData.inputText[0].value}}</span>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n          </p>\r\n          <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n        <img loading=\"lazy\"  [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n          [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".mb-2{margin-bottom:2.5rem!important}.data{display:flex;flex-direction:column;gap:1rem;padding-top:2.5rem;padding-bottom:2.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: HeadingElementComponent, selector: "simpo-heading-element", inputs: ["data"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }] }); }
 }
@@ -2383,7 +2386,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         ContentTitleDirective,
                         ObjectPositionDirective,
                         SimpoContainerAligment
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" \n  class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\n    [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\n\n    <div *ngIf=\"!content?.image?.showImage\">\n      <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n        [simpoLayout]=\"style?.layout\">\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\n          <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\n        </div>\n\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\"(click)=\"toggleContent(i)\">\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\n            <span style=\"display: block;\">{{itemData.inputText[0].value}}</span>\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\n          </p>\n          <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"content?.image?.showImage\" class=\"row g-5\" [id]=\"data?.id\"\n      [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\n      [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\n\n\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\"\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\n\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\n          <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\n        </div>\n\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\" (click)=\"toggleContent(i)\">\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\n            <span>{{itemData.inputText[0].value}}</span>\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\n          </p>\n          <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\n        </div>\n      </div>\n      <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\n        <img loading=\"lazy\"  [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\n          [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>\n", styles: [".mb-2{margin-bottom:2.5rem!important}.data{display:flex;flex-direction:column;gap:1rem;padding-top:2.5rem;padding-bottom:2.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" \r\n  class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n    [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n    <div *ngIf=\"!content?.image?.showImage\">\r\n      <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n        [simpoLayout]=\"style?.layout\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n        </div>\r\n\r\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\"(click)=\"toggleContent(i)\">\r\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n            <span style=\"display: block;\">{{itemData.inputText[0].value}}</span>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n          </p>\r\n          <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"content?.image?.showImage\" class=\"row g-5\" [id]=\"data?.id\"\r\n      [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\"\r\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n        </div>\r\n\r\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\" (click)=\"toggleContent(i)\">\r\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n            <span>{{itemData.inputText[0].value}}</span>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n          </p>\r\n          <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n        <img loading=\"lazy\"  [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n          [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".mb-2{margin-bottom:2.5rem!important}.data{display:flex;flex-direction:column;gap:1rem;padding-top:2.5rem;padding-bottom:2.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -2491,7 +2494,7 @@ class ImageCarouselSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ImageCarouselSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ImageCarouselSectionComponent, isStandalone: true, selector: "simpo-image-carousel-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\nclass=\"total-container\" (click)=\"editSection()\">\n  <div *ngFor=\"let text of data?.content?.inputText\" [ngClass]=\"{'px-0 py-0': style?.fullWidth, 'image-screen': style?.layout?.fit === 'screen' && style?.fullWidth, 'img-screen-notext': style?.layout?.fit === 'screen' && style?.fullWidth && text.value === ''}\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n    <div class=\"row mlr-0\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" >\n      <div *ngFor=\"let text of data?.content?.inputText\">\n        <div class=\"heading-large\" [ngClass]=\"{'mb-0': text.value === '' && style?.fullWidth}\" [simpoContentTitleSpace]=\"headingSpace\"  [innerHTML]=\"text.value\"></div>\n      </div>\n\n      <div id=\"carouselExampleCaptions\" class=\"carousel slide\" [ngClass]=\"{'mb-0 px-0 py-0': style?.fullWidth, 'mb-1': !style?.fullWidth}\">\n        <ol class=\"carousel-indicators\">\n          <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\n            data-bs-target=\"#carouselExampleCaptions\" [attr.data-bs-slide-to]=\"i\"></li>\n        </ol>\n        <div class=\"carousel-inner\">\n          <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\n            <div class=\"row\">\n              <div class=\"col d-flex\" *ngIf=\"screenWidth >= 475\">\n                <!-- <img loading=\"lazy\"  class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n                <img loading=\"lazy\" [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\" *ngIf=\"!style?.fullWidth\"  [simpoImageDirective]=\"style?.image\" class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\"\n                loading=\"lazy\">\n                <img loading=\"lazy\" [ngClass]=\"{'full-width-image': style?.fullWidth, 'not-full-width': !style?.fullWidth, 'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\" [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\" [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\n                loading=\"lazy\">\n                <!-- <img loading=\"lazy\"  class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n                <img loading=\"lazy\" [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\" *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\" class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\"\n                loading=\"lazy\">\n              </div>\n              <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\n                <img loading=\"lazy\"  class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\n                loading=\"lazy\">\n              </div>\n            </div>\n          </div>\n        </div>\n        <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\n          <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\n          <span class=\"sr-only\">Previous</span>\n        </a>\n        <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\n          <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\n          <span class=\"sr-only\">Next</span>\n        </a>\n      </div>\n\n\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.full-width-image{width:100vw;height:70vh}.not-full-width{width:60%}.image-height-content{height:70vh}.image-height-screen{height:calc(90vh + -0px);min-height:0px!important}.image-screen{height:calc(110vh + -0px);min-height:0px!important}.img-screen-notext{height:calc(90vh + -0px);min-height:0px!important}.btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ImageCarouselSectionComponent, isStandalone: true, selector: "simpo-image-carousel-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\nclass=\"total-container\" (click)=\"editSection()\">\r\n  <div *ngFor=\"let text of data?.content?.inputText\" [ngClass]=\"{'px-0 py-0': style?.fullWidth, 'image-screen': style?.layout?.fit === 'screen' && style?.fullWidth, 'img-screen-notext': style?.layout?.fit === 'screen' && style?.fullWidth && text.value === ''}\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n    <div class=\"row mlr-0\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" >\r\n      <div *ngFor=\"let text of data?.content?.inputText\">\r\n        <div class=\"heading-large\" [ngClass]=\"{'mb-0': text.value === '' && style?.fullWidth}\" [simpoContentTitleSpace]=\"headingSpace\"  [innerHTML]=\"text.value\"></div>\r\n      </div>\r\n\r\n      <div id=\"carouselExampleCaptions\" class=\"carousel slide\" [ngClass]=\"{'mb-0 px-0 py-0': style?.fullWidth, 'mb-1': !style?.fullWidth}\">\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=\"#carouselExampleCaptions\" [attr.data-bs-slide-to]=\"i\"></li>\r\n        </ol>\r\n        <div class=\"carousel-inner\">\r\n          <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n            <div class=\"row\">\r\n              <div class=\"col d-flex\" *ngIf=\"screenWidth >= 475\">\r\n                <!-- <img loading=\"lazy\"  class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n                <img loading=\"lazy\" [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\" *ngIf=\"!style?.fullWidth\"  [simpoImageDirective]=\"style?.image\" class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\"\r\n                loading=\"lazy\">\r\n                <img loading=\"lazy\" [ngClass]=\"{'full-width-image': style?.fullWidth, 'not-full-width': !style?.fullWidth, 'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\" [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\" [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\r\n                loading=\"lazy\">\r\n                <!-- <img loading=\"lazy\"  class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n                <img loading=\"lazy\" [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\" *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\" class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\"\r\n                loading=\"lazy\">\r\n              </div>\r\n              <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\r\n                <img loading=\"lazy\"  class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\r\n                loading=\"lazy\">\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\r\n          <span class=\"carousel-control-prev-icon previous-icon\" 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=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\r\n          <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n          <span class=\"sr-only\">Next</span>\r\n        </a>\r\n      </div>\r\n\r\n\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.full-width-image{width:100vw;height:70vh}.not-full-width{width:60%}.image-height-content{height:70vh}.image-height-screen{height:calc(90vh + -0px);min-height:0px!important}.image-screen{height:calc(110vh + -0px);min-height:0px!important}.img-screen-notext{height:calc(90vh + -0px);min-height:0px!important}.btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }] }); }
 }
@@ -2521,7 +2524,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         TextBackgroundDirectiveDirective,
                         ObjectPositionDirective,
                         ContentTitleDirective
-                    ], template: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\nclass=\"total-container\" (click)=\"editSection()\">\n  <div *ngFor=\"let text of data?.content?.inputText\" [ngClass]=\"{'px-0 py-0': style?.fullWidth, 'image-screen': style?.layout?.fit === 'screen' && style?.fullWidth, 'img-screen-notext': style?.layout?.fit === 'screen' && style?.fullWidth && text.value === ''}\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n    <div class=\"row mlr-0\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" >\n      <div *ngFor=\"let text of data?.content?.inputText\">\n        <div class=\"heading-large\" [ngClass]=\"{'mb-0': text.value === '' && style?.fullWidth}\" [simpoContentTitleSpace]=\"headingSpace\"  [innerHTML]=\"text.value\"></div>\n      </div>\n\n      <div id=\"carouselExampleCaptions\" class=\"carousel slide\" [ngClass]=\"{'mb-0 px-0 py-0': style?.fullWidth, 'mb-1': !style?.fullWidth}\">\n        <ol class=\"carousel-indicators\">\n          <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\n            data-bs-target=\"#carouselExampleCaptions\" [attr.data-bs-slide-to]=\"i\"></li>\n        </ol>\n        <div class=\"carousel-inner\">\n          <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\n            <div class=\"row\">\n              <div class=\"col d-flex\" *ngIf=\"screenWidth >= 475\">\n                <!-- <img loading=\"lazy\"  class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n                <img loading=\"lazy\" [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\" *ngIf=\"!style?.fullWidth\"  [simpoImageDirective]=\"style?.image\" class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\"\n                loading=\"lazy\">\n                <img loading=\"lazy\" [ngClass]=\"{'full-width-image': style?.fullWidth, 'not-full-width': !style?.fullWidth, 'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\" [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\" [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\n                loading=\"lazy\">\n                <!-- <img loading=\"lazy\"  class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n                <img loading=\"lazy\" [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\" *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\" class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\"\n                loading=\"lazy\">\n              </div>\n              <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\n                <img loading=\"lazy\"  class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\n                loading=\"lazy\">\n              </div>\n            </div>\n          </div>\n        </div>\n        <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\n          <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\n          <span class=\"sr-only\">Previous</span>\n        </a>\n        <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\n          <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\n          <span class=\"sr-only\">Next</span>\n        </a>\n      </div>\n\n\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.full-width-image{width:100vw;height:70vh}.not-full-width{width:60%}.image-height-content{height:70vh}.image-height-screen{height:calc(90vh + -0px);min-height:0px!important}.image-screen{height:calc(110vh + -0px);min-height:0px!important}.img-screen-notext{height:calc(90vh + -0px);min-height:0px!important}.btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}\n"] }]
+                    ], template: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\nclass=\"total-container\" (click)=\"editSection()\">\r\n  <div *ngFor=\"let text of data?.content?.inputText\" [ngClass]=\"{'px-0 py-0': style?.fullWidth, 'image-screen': style?.layout?.fit === 'screen' && style?.fullWidth, 'img-screen-notext': style?.layout?.fit === 'screen' && style?.fullWidth && text.value === ''}\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n    <div class=\"row mlr-0\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" >\r\n      <div *ngFor=\"let text of data?.content?.inputText\">\r\n        <div class=\"heading-large\" [ngClass]=\"{'mb-0': text.value === '' && style?.fullWidth}\" [simpoContentTitleSpace]=\"headingSpace\"  [innerHTML]=\"text.value\"></div>\r\n      </div>\r\n\r\n      <div id=\"carouselExampleCaptions\" class=\"carousel slide\" [ngClass]=\"{'mb-0 px-0 py-0': style?.fullWidth, 'mb-1': !style?.fullWidth}\">\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=\"#carouselExampleCaptions\" [attr.data-bs-slide-to]=\"i\"></li>\r\n        </ol>\r\n        <div class=\"carousel-inner\">\r\n          <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n            <div class=\"row\">\r\n              <div class=\"col d-flex\" *ngIf=\"screenWidth >= 475\">\r\n                <!-- <img loading=\"lazy\"  class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n                <img loading=\"lazy\" [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\" *ngIf=\"!style?.fullWidth\"  [simpoImageDirective]=\"style?.image\" class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\"\r\n                loading=\"lazy\">\r\n                <img loading=\"lazy\" [ngClass]=\"{'full-width-image': style?.fullWidth, 'not-full-width': !style?.fullWidth, 'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\" [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\" [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\r\n                loading=\"lazy\">\r\n                <!-- <img loading=\"lazy\"  class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n                <img loading=\"lazy\" [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\" *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\" class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\"\r\n                loading=\"lazy\">\r\n              </div>\r\n              <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\r\n                <img loading=\"lazy\"  class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\r\n                loading=\"lazy\">\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\r\n          <span class=\"carousel-control-prev-icon previous-icon\" 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=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\r\n          <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n          <span class=\"sr-only\">Next</span>\r\n        </a>\r\n      </div>\r\n\r\n\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.full-width-image{width:100vw;height:70vh}.not-full-width{width:60%}.image-height-content{height:70vh}.image-height-screen{height:calc(90vh + -0px);min-height:0px!important}.image-screen{height:calc(110vh + -0px);min-height:0px!important}.img-screen-notext{height:calc(90vh + -0px);min-height:0px!important}.btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -2556,7 +2559,7 @@ class ImageGridSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ImageGridSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ImageGridSectionComponent, isStandalone: true, selector: "simpo-image-grid-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\n        [ngStyle]=\"style?.removeGaps && style?.fullWidth ? {'padding': '0px'} : style?.removeGaps ? {'padding': '0px 15px'} : style?.fullWidth ? {'padding': '0px'} : {}\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large\"  [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\n        </div>\n\n\n        <div class=\"main-image-section\" [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\n          *ngFor=\"let img of content?.listItem?.data\"\n          [ngStyle]=\"style?.removeGaps ? {'padding': '0px', 'margin': '0px'} : {}\">\n          <div class=\"image-section\">\n            <img loading=\"lazy\"  [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\"\n              [src]=\"img.image.url\" [alt]=\"img.image.altText\" loading=\"lazy\"/>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.image-section{width:100%}.image-section img{width:100%;object-fit:cover}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ImageGridSectionComponent, isStandalone: true, selector: "simpo-image-grid-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n        [ngStyle]=\"style?.removeGaps && style?.fullWidth ? {'padding': '0px'} : style?.removeGaps ? {'padding': '0px 15px'} : style?.fullWidth ? {'padding': '0px'} : {}\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\"  [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n\r\n\r\n        <div class=\"main-image-section\" [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\r\n          *ngFor=\"let img of content?.listItem?.data\"\r\n          [ngStyle]=\"style?.removeGaps ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n          <div class=\"image-section\">\r\n            <img loading=\"lazy\"  [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\"\r\n              [src]=\"img.image.url\" [alt]=\"img.image.altText\" loading=\"lazy\"/>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.image-section{width:100%}.image-section img{width:100%;object-fit:cover}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: "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"] }] }); }
 }
@@ -2588,7 +2591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         TextBackgroundDirectiveDirective,
                         ObjectPositionDirective,
                         ContentTitleDirective
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\n        [ngStyle]=\"style?.removeGaps && style?.fullWidth ? {'padding': '0px'} : style?.removeGaps ? {'padding': '0px 15px'} : style?.fullWidth ? {'padding': '0px'} : {}\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large\"  [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\n        </div>\n\n\n        <div class=\"main-image-section\" [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\n          *ngFor=\"let img of content?.listItem?.data\"\n          [ngStyle]=\"style?.removeGaps ? {'padding': '0px', 'margin': '0px'} : {}\">\n          <div class=\"image-section\">\n            <img loading=\"lazy\"  [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\"\n              [src]=\"img.image.url\" [alt]=\"img.image.altText\" loading=\"lazy\"/>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.image-section{width:100%}.image-section img{width:100%;object-fit:cover}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n        [ngStyle]=\"style?.removeGaps && style?.fullWidth ? {'padding': '0px'} : style?.removeGaps ? {'padding': '0px 15px'} : style?.fullWidth ? {'padding': '0px'} : {}\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\"  [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n\r\n\r\n        <div class=\"main-image-section\" [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\r\n          *ngFor=\"let img of content?.listItem?.data\"\r\n          [ngStyle]=\"style?.removeGaps ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n          <div class=\"image-section\">\r\n            <img loading=\"lazy\"  [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\"\r\n              [src]=\"img.image.url\" [alt]=\"img.image.altText\" loading=\"lazy\"/>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.image-section{width:100%}.image-section img{width:100%;object-fit:cover}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -2620,7 +2623,7 @@ class ImageSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ImageSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ImageSectionComponent, isStandalone: true, selector: "simpo-image-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n    class=\"total-container\" (click)=\"editSection()\">\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n        <div class=\"main-section\" [ngClass]=\"{'px-0 py-0': style?.fullWidth === true}\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n            [simpoLayout]=\"style?.layout\">\n            <div  [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n                <!-- <div *ngFor=\"let text of data?.content?.inputText\">\n                    <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n                </div> -->\n\n                <div class=\"image-section\">\n                    <img loading=\"lazy\"  [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\" [class]=\"data?.id+(content?.image?.id || '')\"\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\n                        [id]=\"data?.id\"\n                        loading=\"lazy\"/>\n                </div>\n\n            </div>\n        </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</section>\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.image-section img{object-fit:cover}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media only screen and (max-width: 475px){.h-80{height:50vh;border-radius:1rem}.main-section{min-height:auto!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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.1.4", type: ImageSectionComponent, isStandalone: true, selector: "simpo-image-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" (click)=\"editSection()\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"main-section\" [ngClass]=\"{'px-0 py-0': style?.fullWidth === true}\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div  [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n                <!-- <div *ngFor=\"let text of data?.content?.inputText\">\r\n                    <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n                </div> -->\r\n\r\n                <div class=\"image-section\">\r\n                    <img loading=\"lazy\"  [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\r\n                        [id]=\"data?.id\"\r\n                        loading=\"lazy\"/>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.image-section img{object-fit:cover}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media only screen and (max-width: 475px){.h-80{height:50vh;border-radius:1rem}.main-section{min-height:auto!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: 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"] }] }); }
 }
@@ -2650,7 +2653,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         PositionLayoutDirectiveDirective,
                         TextBackgroundDirectiveDirective,
                         ObjectPositionDirective
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n    class=\"total-container\" (click)=\"editSection()\">\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n        <div class=\"main-section\" [ngClass]=\"{'px-0 py-0': style?.fullWidth === true}\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n            [simpoLayout]=\"style?.layout\">\n            <div  [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n                <!-- <div *ngFor=\"let text of data?.content?.inputText\">\n                    <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n                </div> -->\n\n                <div class=\"image-section\">\n                    <img loading=\"lazy\"  [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\" [class]=\"data?.id+(content?.image?.id || '')\"\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\n                        [id]=\"data?.id\"\n                        loading=\"lazy\"/>\n                </div>\n\n            </div>\n        </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</section>\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.image-section img{object-fit:cover}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media only screen and (max-width: 475px){.h-80{height:50vh;border-radius:1rem}.main-section{min-height:auto!important}}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" (click)=\"editSection()\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"main-section\" [ngClass]=\"{'px-0 py-0': style?.fullWidth === true}\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div  [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n                <!-- <div *ngFor=\"let text of data?.content?.inputText\">\r\n                    <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n                </div> -->\r\n\r\n                <div class=\"image-section\">\r\n                    <img loading=\"lazy\"  [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\r\n                        [id]=\"data?.id\"\r\n                        loading=\"lazy\"/>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.image-section img{object-fit:cover}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media only screen and (max-width: 475px){.h-80{height:50vh;border-radius:1rem}.main-section{min-height:auto!important}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -2687,7 +2690,7 @@ class ServiceSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ServiceSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\n        </div>\n\n        <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n          *ngFor=\"let service of content?.listItem?.data\">\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\n            <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-below-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\n            <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-top-of-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\n            <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-covering-image-card>\n          </ng-container>\n\n        </div>\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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.1.4", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n        </div>\r\n\r\n        <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n          *ngFor=\"let service of content?.listItem?.data\">\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n            <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n              [componentId]=\"data?.id\"></simpo-below-image-card>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n            <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n              [componentId]=\"data?.id\"></simpo-top-of-image-card>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n            <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n              [componentId]=\"data?.id\"></simpo-covering-image-card>\r\n          </ng-container>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //directive
                 ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
 }
@@ -2717,7 +2720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         PositionLayoutDirectiveDirective,
                         TextBackgroundDirectiveDirective,
                         SanitizeHtmlPipe
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\n        </div>\n\n        <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n          *ngFor=\"let service of content?.listItem?.data\">\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\n            <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-below-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\n            <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-top-of-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\n            <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-covering-image-card>\n          </ng-container>\n\n        </div>\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n        </div>\r\n\r\n        <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n          *ngFor=\"let service of content?.listItem?.data\">\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n            <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n              [componentId]=\"data?.id\"></simpo-below-image-card>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n            <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n              [componentId]=\"data?.id\"></simpo-top-of-image-card>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n            <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n              [componentId]=\"data?.id\"></simpo-covering-image-card>\r\n          </ng-container>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -2753,7 +2756,7 @@ class TeamMemberSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: TeamMemberSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TeamMemberSectionComponent, isStandalone: true, selector: "simpo-team-member-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" (click)=\"editSection()\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\n        </div>\n\n        <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n          *ngFor=\"let service of content?.listItem?.data\">\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\n            <simpo-below-image-card style=\"height: 100%; display: block;\" [data]=\"service\" [styles]=\"style\"\n              [content]=\"content\" [button]=\"button\" [componentId]=\"data?.id\"></simpo-below-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\n            <simpo-top-of-image-card style=\"height: 100%; display: block;\" [data]=\"service\" [styles]=\"style\"\n              [content]=\"content\" [button]=\"button\" [componentId]=\"data?.id\"></simpo-top-of-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\n            <simpo-covering-image-card style=\"height: 100%; display: block;\" [data]=\"service\" [styles]=\"style\"\n              [content]=\"content\" [button]=\"button\" [componentId]=\"data?.id\"></simpo-covering-image-card>\n          </ng-container>\n\n        </div>\n\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.d-flex{display:block!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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.1.4", type: TeamMemberSectionComponent, isStandalone: true, selector: "simpo-team-member-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n        </div>\r\n\r\n        <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n          *ngFor=\"let service of content?.listItem?.data\">\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n            <simpo-below-image-card style=\"height: 100%; display: block;\" [data]=\"service\" [styles]=\"style\"\r\n              [content]=\"content\" [button]=\"button\" [componentId]=\"data?.id\"></simpo-below-image-card>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n            <simpo-top-of-image-card style=\"height: 100%; display: block;\" [data]=\"service\" [styles]=\"style\"\r\n              [content]=\"content\" [button]=\"button\" [componentId]=\"data?.id\"></simpo-top-of-image-card>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n            <simpo-covering-image-card style=\"height: 100%; display: block;\" [data]=\"service\" [styles]=\"style\"\r\n              [content]=\"content\" [button]=\"button\" [componentId]=\"data?.id\"></simpo-covering-image-card>\r\n          </ng-container>\r\n\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.d-flex{display:block!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
 }
@@ -2783,7 +2786,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         TextBackgroundDirectiveDirective,
                         ContentTitleDirective,
                         SanitizeHtmlPipe
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" (click)=\"editSection()\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\n        </div>\n\n        <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n          *ngFor=\"let service of content?.listItem?.data\">\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\n            <simpo-below-image-card style=\"height: 100%; display: block;\" [data]=\"service\" [styles]=\"style\"\n              [content]=\"content\" [button]=\"button\" [componentId]=\"data?.id\"></simpo-below-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\n            <simpo-top-of-image-card style=\"height: 100%; display: block;\" [data]=\"service\" [styles]=\"style\"\n              [content]=\"content\" [button]=\"button\" [componentId]=\"data?.id\"></simpo-top-of-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\n            <simpo-covering-image-card style=\"height: 100%; display: block;\" [data]=\"service\" [styles]=\"style\"\n              [content]=\"content\" [button]=\"button\" [componentId]=\"data?.id\"></simpo-covering-image-card>\n          </ng-container>\n\n        </div>\n\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.d-flex{display:block!important}}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n        </div>\r\n\r\n        <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n          *ngFor=\"let service of content?.listItem?.data\">\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n            <simpo-below-image-card style=\"height: 100%; display: block;\" [data]=\"service\" [styles]=\"style\"\r\n              [content]=\"content\" [button]=\"button\" [componentId]=\"data?.id\"></simpo-below-image-card>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n            <simpo-top-of-image-card style=\"height: 100%; display: block;\" [data]=\"service\" [styles]=\"style\"\r\n              [content]=\"content\" [button]=\"button\" [componentId]=\"data?.id\"></simpo-top-of-image-card>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n            <simpo-covering-image-card style=\"height: 100%; display: block;\" [data]=\"service\" [styles]=\"style\"\r\n              [content]=\"content\" [button]=\"button\" [componentId]=\"data?.id\"></simpo-covering-image-card>\r\n          </ng-container>\r\n\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.d-flex{display:block!important}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -2818,7 +2821,7 @@ class TestimonialSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: TestimonialSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\n  (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\"\n          [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\n        </div>\n\n        <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\">\n          <ol class=\"carousel-indicators\">\n            <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\n              data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\n          </ol>\n          <div class=\"carousel-inner\">\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\n              [class.active]=\"i === 0\" data-bs-interval=\"10000\">\n              <div style=\"width: 90%; margin: auto;\">\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\n                [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\n                  <img loading=\"lazy\"  [src]=\"testimonial.image.url\" class=\"mb-1\" loading=\"lazy\" [simpoContainerLayout]=\"getLayout\">\n                  <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\n                  <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"prev\">\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\n            <span class=\"sr-only\">Previous</span>\n          </a>\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"next\">\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\n            <span class=\"sr-only\">Next</span>\n          </a>\n        </div>\n\n\n      </div>\n    </div>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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.1.4", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [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          [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n        </div>\r\n\r\n        <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\">\r\n          <ol class=\"carousel-indicators\">\r\n            <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n              data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n          </ol>\r\n          <div class=\"carousel-inner\">\r\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n              [class.active]=\"i === 0\" data-bs-interval=\"10000\">\r\n              <div style=\"width: 90%; margin: auto;\">\r\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n                [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n                  <img loading=\"lazy\"  [src]=\"testimonial.image.url\" class=\"mb-1\" loading=\"lazy\" [simpoContainerLayout]=\"getLayout\">\r\n                  <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\r\n                  <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"prev\">\r\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Previous</span>\r\n          </a>\r\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"next\">\r\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Next</span>\r\n          </a>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContainerFitDirective, selector: "[simpoContainerLayout]", inputs: ["simpoContainerLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
 }
@@ -2850,7 +2853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         ColorDirective,
                         ContentTitleDirective,
                         SanitizeHtmlPipe
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\n  (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\"\n          [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\n        </div>\n\n        <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\">\n          <ol class=\"carousel-indicators\">\n            <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\n              data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\n          </ol>\n          <div class=\"carousel-inner\">\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\n              [class.active]=\"i === 0\" data-bs-interval=\"10000\">\n              <div style=\"width: 90%; margin: auto;\">\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\n                [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\n                  <img loading=\"lazy\"  [src]=\"testimonial.image.url\" class=\"mb-1\" loading=\"lazy\" [simpoContainerLayout]=\"getLayout\">\n                  <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\n                  <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"prev\">\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\n            <span class=\"sr-only\">Previous</span>\n          </a>\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"next\">\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\n            <span class=\"sr-only\">Next</span>\n          </a>\n        </div>\n\n\n      </div>\n    </div>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [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          [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n        </div>\r\n\r\n        <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\">\r\n          <ol class=\"carousel-indicators\">\r\n            <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n              data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n          </ol>\r\n          <div class=\"carousel-inner\">\r\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n              [class.active]=\"i === 0\" data-bs-interval=\"10000\">\r\n              <div style=\"width: 90%; margin: auto;\">\r\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n                [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n                  <img loading=\"lazy\"  [src]=\"testimonial.image.url\" class=\"mb-1\" loading=\"lazy\" [simpoContainerLayout]=\"getLayout\">\r\n                  <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\r\n                  <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"prev\">\r\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Previous</span>\r\n          </a>\r\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"next\">\r\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Next</span>\r\n          </a>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -2969,7 +2972,7 @@ class VideoSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: VideoSectionComponent, deps: [{ token: i1.DomSanitizer }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: VideoSectionComponent, isStandalone: true, selector: "simpo-video-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n    class=\"total-container\" (click)=\"editSection()\">\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n            [simpoLayout]=\"style?.layout\">\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n\n                <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\" [innerHTML]=\"text.value\" [simpoContentTitleSpace]=\"headingSpace\">\n                </div>\n\n\n                <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\n                    <iframe class=\"video\"\n                        [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\n                        [src]=\"safeVideoUrl\" frameborder=\"0\" allowfullscreen></iframe>\n\n                </div>\n\n            </div>\n        </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: VideoSectionComponent, isStandalone: true, selector: "simpo-video-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" (click)=\"editSection()\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\" [innerHTML]=\"text.value\" [simpoContentTitleSpace]=\"headingSpace\">\r\n                </div>\r\n\r\n\r\n                <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n                    <iframe class=\"video\"\r\n                        [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\r\n                        [src]=\"safeVideoUrl\" frameborder=\"0\" allowfullscreen></iframe>\r\n\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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
                 ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
 }
@@ -2999,7 +3002,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         OverlayDirective,
                         PositionLayoutDirectiveDirective,
                         TextBackgroundDirectiveDirective
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n    class=\"total-container\" (click)=\"editSection()\">\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n            [simpoLayout]=\"style?.layout\">\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n\n                <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\" [innerHTML]=\"text.value\" [simpoContentTitleSpace]=\"headingSpace\">\n                </div>\n\n\n                <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\n                    <iframe class=\"video\"\n                        [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\n                        [src]=\"safeVideoUrl\" frameborder=\"0\" allowfullscreen></iframe>\n\n                </div>\n\n            </div>\n        </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" (click)=\"editSection()\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\" [innerHTML]=\"text.value\" [simpoContentTitleSpace]=\"headingSpace\">\r\n                </div>\r\n\r\n\r\n                <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n                    <iframe class=\"video\"\r\n                        [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\r\n                        [src]=\"safeVideoUrl\" frameborder=\"0\" allowfullscreen></iframe>\r\n\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
         }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -3541,7 +3544,7 @@ class UserBasicInfoComponent {
         return this.email?.includes("@") && this.email.includes(".com") || (this.email?.length == 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserBasicInfoComponent, deps: [{ token: RestService }, { token: i2$3.Router }, { token: i3.MatDialogRef }, { token: StorageServiceService }, { token: i7.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserBasicInfoComponent, isStandalone: true, selector: "simpo-user-basic-info", providers: [MessageService], ngImport: i0, template: "<section style=\"padding: 20px\" class=\"position-relative\">\n    <div class=\"d-flex flex-wrap justify-content-between\">\n        <div class=\"form-control-group\">\n            <div class=\"label\">First Name</div>\n            <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\" (keydown)=\"validateName($event)\">\n        </div>\n        <!-- <div class=\"form-control-group-3\">\n            <div class=\"label\">Middle Name</div>\n            <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\n        </div> -->\n        <div class=\"form-control-group\">\n            <div class=\"label\">Last Name</div>\n            <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\" (keydown)=\"validateName($event)\">\n        </div>\n\n        <div class=\"form-control-group\" *ngIf=\"isEdit\">\n            <div class=\"label required\">Mobile</div>\n            <input type=\"number\" placeholder=\"Enter mobile\" [(ngModel)]=\"mobile\" disabled>\n        </div>\n        <div class=\"form-control-group\">\n            <div class=\"label\">Email</div>\n            <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\n            <span class=\"error-msg\" [style.visibility]=\"isEmailValid ? 'hidden' : 'visible'\">Please enter valid email</span>\n        </div>\n        \n        <div class=\"form-control-group-full\">\n            <div class=\"label\">Select Gender</div>\n            <div class=\"d-flex align-items-center\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\"\n                    (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\"\n                    (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\n            </div>\n        </div>\n    </div>\n    <div class=\"action-btn\">\n        <span class=\"skip-btn\" (click)=\"close()\">{{!isEdit ? 'Skip' : 'Close'}}</span>\n        <button (click)=\"saveProfile()\">Save Profile</button>\n    </div>\n</section>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:100%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}img{height:60px;width:60px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.active{border:2px solid #0267C1}.form-control-group{margin:10px 0}.action-btn{position:relative;bottom:0;right:0;display:flex;align-items:center;justify-content:flex-end;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}.required:after{content:\"*\";color:tomato}.error-msg{color:tomato}@media screen and (max-width: 475px){.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserBasicInfoComponent, isStandalone: true, selector: "simpo-user-basic-info", providers: [MessageService], ngImport: i0, template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n    <div class=\"d-flex flex-wrap justify-content-between\">\r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">First Name</div>\r\n            <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\" (keydown)=\"validateName($event)\">\r\n        </div>\r\n        <!-- <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Middle Name</div>\r\n            <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n        </div> -->\r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">Last Name</div>\r\n            <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\" (keydown)=\"validateName($event)\">\r\n        </div>\r\n\r\n        <div class=\"form-control-group\" *ngIf=\"isEdit\">\r\n            <div class=\"label required\">Mobile</div>\r\n            <input type=\"number\" placeholder=\"Enter mobile\" [(ngModel)]=\"mobile\" disabled>\r\n        </div>\r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">Email</div>\r\n            <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n            <span class=\"error-msg\" [style.visibility]=\"isEmailValid ? 'hidden' : 'visible'\">Please enter valid email</span>\r\n        </div>\r\n        \r\n        <div class=\"form-control-group-full\">\r\n            <div class=\"label\">Select Gender</div>\r\n            <div class=\"d-flex align-items-center\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\"\r\n                    (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\"\r\n                    (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"action-btn\">\r\n        <span class=\"skip-btn\" (click)=\"close()\">{{!isEdit ? 'Skip' : 'Close'}}</span>\r\n        <button (click)=\"saveProfile()\">Save Profile</button>\r\n    </div>\r\n</section>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:100%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}img{height:60px;width:60px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.active{border:2px solid #0267C1}.form-control-group{margin:10px 0}.action-btn{position:relative;bottom:0;right:0;display:flex;align-items:center;justify-content:flex-end;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}.required:after{content:\"*\";color:tomato}.error-msg{color:tomato}@media screen and (max-width: 475px){.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserBasicInfoComponent, decorators: [{
             type: Component,
@@ -3550,7 +3553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         MatDialogModule,
                         FormsModule,
                         ToastModule
-                    ], providers: [MessageService], template: "<section style=\"padding: 20px\" class=\"position-relative\">\n    <div class=\"d-flex flex-wrap justify-content-between\">\n        <div class=\"form-control-group\">\n            <div class=\"label\">First Name</div>\n            <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\" (keydown)=\"validateName($event)\">\n        </div>\n        <!-- <div class=\"form-control-group-3\">\n            <div class=\"label\">Middle Name</div>\n            <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\n        </div> -->\n        <div class=\"form-control-group\">\n            <div class=\"label\">Last Name</div>\n            <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\" (keydown)=\"validateName($event)\">\n        </div>\n\n        <div class=\"form-control-group\" *ngIf=\"isEdit\">\n            <div class=\"label required\">Mobile</div>\n            <input type=\"number\" placeholder=\"Enter mobile\" [(ngModel)]=\"mobile\" disabled>\n        </div>\n        <div class=\"form-control-group\">\n            <div class=\"label\">Email</div>\n            <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\n            <span class=\"error-msg\" [style.visibility]=\"isEmailValid ? 'hidden' : 'visible'\">Please enter valid email</span>\n        </div>\n        \n        <div class=\"form-control-group-full\">\n            <div class=\"label\">Select Gender</div>\n            <div class=\"d-flex align-items-center\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\"\n                    (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\"\n                    (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\n            </div>\n        </div>\n    </div>\n    <div class=\"action-btn\">\n        <span class=\"skip-btn\" (click)=\"close()\">{{!isEdit ? 'Skip' : 'Close'}}</span>\n        <button (click)=\"saveProfile()\">Save Profile</button>\n    </div>\n</section>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:100%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}img{height:60px;width:60px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.active{border:2px solid #0267C1}.form-control-group{margin:10px 0}.action-btn{position:relative;bottom:0;right:0;display:flex;align-items:center;justify-content:flex-end;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}.required:after{content:\"*\";color:tomato}.error-msg{color:tomato}@media screen and (max-width: 475px){.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}}\n"] }]
+                    ], providers: [MessageService], template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n    <div class=\"d-flex flex-wrap justify-content-between\">\r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">First Name</div>\r\n            <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\" (keydown)=\"validateName($event)\">\r\n        </div>\r\n        <!-- <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Middle Name</div>\r\n            <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n        </div> -->\r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">Last Name</div>\r\n            <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\" (keydown)=\"validateName($event)\">\r\n        </div>\r\n\r\n        <div class=\"form-control-group\" *ngIf=\"isEdit\">\r\n            <div class=\"label required\">Mobile</div>\r\n            <input type=\"number\" placeholder=\"Enter mobile\" [(ngModel)]=\"mobile\" disabled>\r\n        </div>\r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">Email</div>\r\n            <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n            <span class=\"error-msg\" [style.visibility]=\"isEmailValid ? 'hidden' : 'visible'\">Please enter valid email</span>\r\n        </div>\r\n        \r\n        <div class=\"form-control-group-full\">\r\n            <div class=\"label\">Select Gender</div>\r\n            <div class=\"d-flex align-items-center\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\"\r\n                    (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\"\r\n                    (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"action-btn\">\r\n        <span class=\"skip-btn\" (click)=\"close()\">{{!isEdit ? 'Skip' : 'Close'}}</span>\r\n        <button (click)=\"saveProfile()\">Save Profile</button>\r\n    </div>\r\n</section>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:100%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}img{height:60px;width:60px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.active{border:2px solid #0267C1}.form-control-group{margin:10px 0}.action-btn{position:relative;bottom:0;right:0;display:flex;align-items:center;justify-content:flex-end;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}.required:after{content:\"*\";color:tomato}.error-msg{color:tomato}@media screen and (max-width: 475px){.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: i2$3.Router }, { type: i3.MatDialogRef }, { type: StorageServiceService }, { type: i7.MessageService }] });
 
 class AuthenticateUserComponent extends BaseSection {
@@ -3669,7 +3672,7 @@ class AuthenticateUserComponent extends BaseSection {
         return window.innerWidth <= 475;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticateUserComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: MAT_BOTTOM_SHEET_DATA, optional: true }, { token: RestService }, { token: i2$3.Router }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i3.MatDialogRef, optional: true }, { token: i5.MatBottomSheetRef, optional: true }, { token: EventsService }, { token: i7.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n    <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" (click)=\"editSection()\" simpoHover (hovering)=\"showEditTabs($event)\"  [simpoBackground]=\"styles?.background\">\n        <ng-container [ngSwitch]=\"screen\">\n            <section style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">{{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Log or Signup in to your account</p>\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\n                <p class=\"text-center\"[style.color]=\"data?.styles?.background?.accentColor\">You will receive an OTP in WhatsApp</p>\n\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\" [disabled]=\"!isMobileValid\">Send OTP</button>\n                    <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\n                    instead</div> -->\n                </div>\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n            </section>\n            <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\n                    }}</p>\n                <div class=\"otpContainer\">\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\" (keyup)=\"move($event, idx)\">\n                    </ng-container>\n                </div>\n\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"resendOTP()\">Resend code</div>\n                </div>\n\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n                    <mat-icon>keyboard_backspace</mat-icon>\n                </div>\n            </section>\n        </ng-container>\n    </div>\n</ng-container>\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n    width: '100%',\n    height: '40vh',\n    'border-radius': '10px',\n    'position': 'relative',\n    'right': '5px'\n  }\">\n</ngx-skeleton-loader>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\n\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n</div>\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n</div>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.btn:hover{background-color:#000;color:#fff!important}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media only screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between;padding:0 5px!important}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:0;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { 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: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" (click)=\"editSection()\" simpoHover (hovering)=\"showEditTabs($event)\"  [simpoBackground]=\"styles?.background\">\r\n        <ng-container [ngSwitch]=\"screen\">\r\n            <section style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Log or Signup in to your account</p>\r\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n                <p class=\"text-center\"[style.color]=\"data?.styles?.background?.accentColor\">You will receive an OTP in WhatsApp</p>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\" [disabled]=\"!isMobileValid\">Send OTP</button>\r\n                    <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\r\n                    instead</div> -->\r\n                </div>\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n            </section>\r\n            <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\r\n                    }}</p>\r\n                <div class=\"otpContainer\">\r\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\" (keyup)=\"move($event, idx)\">\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\r\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"resendOTP()\">Resend code</div>\r\n                </div>\r\n\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n        </ng-container>\r\n    </div>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\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>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.btn:hover{background-color:#000;color:#fff!important}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media only screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between;padding:0 5px!important}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:0;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { 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: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticateUserComponent, decorators: [{
             type: Component,
@@ -3682,7 +3685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         ButtonDirectiveDirective,
                         ToastModule,
                         HoverDirective,
-                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n    <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" (click)=\"editSection()\" simpoHover (hovering)=\"showEditTabs($event)\"  [simpoBackground]=\"styles?.background\">\n        <ng-container [ngSwitch]=\"screen\">\n            <section style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">{{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Log or Signup in to your account</p>\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\n                <p class=\"text-center\"[style.color]=\"data?.styles?.background?.accentColor\">You will receive an OTP in WhatsApp</p>\n\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\" [disabled]=\"!isMobileValid\">Send OTP</button>\n                    <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\n                    instead</div> -->\n                </div>\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n            </section>\n            <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\n                    }}</p>\n                <div class=\"otpContainer\">\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\" (keyup)=\"move($event, idx)\">\n                    </ng-container>\n                </div>\n\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"resendOTP()\">Resend code</div>\n                </div>\n\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n                    <mat-icon>keyboard_backspace</mat-icon>\n                </div>\n            </section>\n        </ng-container>\n    </div>\n</ng-container>\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n    width: '100%',\n    height: '40vh',\n    'border-radius': '10px',\n    'position': 'relative',\n    'right': '5px'\n  }\">\n</ngx-skeleton-loader>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\n\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n</div>\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n</div>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.btn:hover{background-color:#000;color:#fff!important}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media only screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between;padding:0 5px!important}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:0;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"] }]
+                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" (click)=\"editSection()\" simpoHover (hovering)=\"showEditTabs($event)\"  [simpoBackground]=\"styles?.background\">\r\n        <ng-container [ngSwitch]=\"screen\">\r\n            <section style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Log or Signup in to your account</p>\r\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n                <p class=\"text-center\"[style.color]=\"data?.styles?.background?.accentColor\">You will receive an OTP in WhatsApp</p>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\" [disabled]=\"!isMobileValid\">Send OTP</button>\r\n                    <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\r\n                    instead</div> -->\r\n                </div>\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n            </section>\r\n            <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\r\n                    }}</p>\r\n                <div class=\"otpContainer\">\r\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\" (keyup)=\"move($event, idx)\">\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\r\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"resendOTP()\">Resend code</div>\r\n                </div>\r\n\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n        </ng-container>\r\n    </div>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\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>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.btn:hover{background-color:#000;color:#fff!important}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media only screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between;padding:0 5px!important}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:0;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -3992,7 +3995,7 @@ class AddressComponent extends BaseSection {
         return window.innerWidth <= 475;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddressComponent, deps: [{ token: i0.NgZone }, { token: RestService }, { token: i3.MatDialog }, { token: i5.MatBottomSheet }, { token: i2$3.Router }, { token: StorageServiceService }, { token: EventsService }, { token: MAT_DIALOG_DATA, optional: true }, { token: i3.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AddressComponent, isStandalone: true, selector: "simpo-address", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", isCart: "isCart" }, outputs: { selectedAddress: "selectedAddress" }, providers: [], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section class=\"address-sec\" (click)=\"editSection()\" simpoHover (hovering)=\"showEditTabs($event)\" >\n    <div class=\"header\">\n        <div class=\"new-address-header\">\n            <mat-icon (click)=\"goToProfile()\" *ngIf=\"!isCart\">keyboard_arrow_left</mat-icon>\n            <h3>{{isCart ? 'Shipping To' : 'New Address'}}</h3>\n        </div>\n        <span class=\"add-address\" *ngIf=\"!addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\n    </div>\n    <ng-container *ngIf=\"addNewAddress\">\n        <!-- <p (click)=\"getCurrentLocation()\" class=\"d-flex align-items-center\" style=\"cursor: pointer;\">\n            <mat-icon>my_location</mat-icon>\n            <span>Take my current location</span>\n        </p> -->\n        <div class=\"forms d-flex flex-wrap\">\n            <div class=\"form-control-group\">\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Name</div>\n                <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\" (keydown)=\"validateName($event)\">\n            </div>\n            <div class=\"form-control-group\">\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Mobile</div>\n                <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\" (keydown)=\"validateMobile($event)\">\n            </div>\n            <div class=\"form-control-group\">\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Email</div>\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\n            </div>\n            <div class=\"form-control-full-group\">\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address</div>\n                <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\n                    (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\n                    (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\n            </div>\n            <div class=\"form-control-group\">\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Locality</div>\n                <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\n            </div>\n            <div class=\"form-control-group\">\n                <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\">Landmark</div>\n                <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\n            </div>\n            <div class=\"form-control-group\">\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Pincode</div>\n                <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\n            </div>\n            <div class=\"form-control-group\">\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">City</div>\n                <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\n            </div>\n            <div class=\"form-control-group\">\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">State</div>\n                <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\n            </div>\n            <div class=\"form-control-group\">\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address Type</div>\n                <div class=\"d-flex\">\n                    <ng-container *ngFor=\"let address of addessType\">\n                        <span class=\"address-type\" (click)=\"checkAddressType(address)\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <div class=\"address-list\" *ngIf=\"!addNewAddress\">\n        <ng-container *ngFor=\"let address of addressList; let idx = index\">\n            <div class=\"address\" (click)=\"addressSelected(idx)\" [ngClass]=\"{'selected-address': selectedAddressIdx == idx}\">\n                <div class=\"address-left\">\n                    <div class=\"top\">\n                        <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\n                        <span class=\"address-type\">{{address?.addressType}}</span>\n                    </div>\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\n                    <div class=\"phone\">\n                        <span>Phone:</span>\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\n                    </div>\n                </div>\n                <div class=\"address-right\"></div>\n            </div>\n        </ng-container>\n    </div>\n    <div class=\"action-btn\" *ngIf=\"addNewAddress\">\n        <div class=\"error-message\">\n            <span *ngIf=\"address.receiverPhone?.length != 10 && address.receiverPhone?.length\">*Mobile number is invalid</span>\n            <span *ngIf=\"!isEmailValid\">*Email is invalid</span>\n        </div>\n        <button [disabled]=\"\n            !address.receiverName || \n            !address.receiverPhone ||\n            address.receiverPhone?.length != 10 ||\n            !isEmailValid || \n            !address.addressLine1 || \n            !address.localityName || \n            !address.zipCode || \n            !address.cityName ||\n            !address.stateName || \n            !address.addressType || isLoading\n            \" (click)=\"updateAddress()\">{{isLoading ? 'Loading' : 'Update'}}</button>\n    </div>\n</section>\n\n\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n</div>\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n</div>", styles: [".address-sec{padding:20px;position:relative}.address-sec .header{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:20px}.new-address-header{display:flex;align-items:center}.mat-icon{cursor:pointer;margin-right:5px}.action-btn{margin-left:auto;bottom:-20px;position:relative;right:0;display:flex;flex-direction:column;align-items:flex-end}.action-btn button{background-color:#0267c1;color:#fff;padding:10px;width:200px!important;border:none;border-radius:5px}.label:after{content:\"*\"}.active-address{background-color:#0267c1!important;color:#fff!important}.forms{gap:10px;justify-content:space-between}.form-control-group,.form-control-full-group{width:48%}:is(.form-control-group,.form-control-full-group) input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.form-control-full-group{width:100%!important}.address-type{width:150px;padding:10px;background-color:#d3d3d35c;color:#000;text-align:center;border-radius:5px;margin:0 5px;cursor:pointer}.address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list{display:flex;flex-direction:column;gap:10px;height:500px;overflow-y:auto}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.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}.add-address{color:#0267c1;cursor:pointer;font-weight:600}.address-active{background-color:#0267c1;color:#fff}.selected-address{border:2px solid #0267C1!important}.error-message{color:tomato;display:flex;flex-direction:column;width:100%}@media only screen and (max-width: 475px){.address-list{height:fit-content;max-height:230px}.forms{flex-direction:column}.form-control-group{width:100%}.label{padding-bottom:10px}.address-type-options{position:relative;right:4px}.action-btn{position:relative;bottom:0;top:19px;right:0}.action-btn button{width:100%!important}.address-type{padding:10px 27px}.address-sec{padding:20px 4px}}button:disabled{background-color:#d3d3d3!important}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AddressComponent, isStandalone: true, selector: "simpo-address", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", isCart: "isCart" }, outputs: { selectedAddress: "selectedAddress" }, providers: [], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section class=\"address-sec\" (click)=\"editSection()\" simpoHover (hovering)=\"showEditTabs($event)\" >\r\n    <div class=\"header\">\r\n        <div class=\"new-address-header\">\r\n            <mat-icon (click)=\"goToProfile()\" *ngIf=\"!isCart\">keyboard_arrow_left</mat-icon>\r\n            <h3>{{isCart ? 'Shipping To' : 'New Address'}}</h3>\r\n        </div>\r\n        <span class=\"add-address\" *ngIf=\"!addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n    </div>\r\n    <ng-container *ngIf=\"addNewAddress\">\r\n        <!-- <p (click)=\"getCurrentLocation()\" class=\"d-flex align-items-center\" style=\"cursor: pointer;\">\r\n            <mat-icon>my_location</mat-icon>\r\n            <span>Take my current location</span>\r\n        </p> -->\r\n        <div class=\"forms d-flex flex-wrap\">\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Name</div>\r\n                <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\" (keydown)=\"validateName($event)\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Mobile</div>\r\n                <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\" (keydown)=\"validateMobile($event)\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n            </div>\r\n            <div class=\"form-control-full-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address</div>\r\n                <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n                    (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n                    (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Locality</div>\r\n                <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\">Landmark</div>\r\n                <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Pincode</div>\r\n                <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">City</div>\r\n                <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">State</div>\r\n                <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address Type</div>\r\n                <div class=\"d-flex\">\r\n                    <ng-container *ngFor=\"let address of addessType\">\r\n                        <span class=\"address-type\" (click)=\"checkAddressType(address)\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"address-list\" *ngIf=\"!addNewAddress\">\r\n        <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n            <div class=\"address\" (click)=\"addressSelected(idx)\" [ngClass]=\"{'selected-address': selectedAddressIdx == idx}\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address?.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"action-btn\" *ngIf=\"addNewAddress\">\r\n        <div class=\"error-message\">\r\n            <span *ngIf=\"address.receiverPhone?.length != 10 && address.receiverPhone?.length\">*Mobile number is invalid</span>\r\n            <span *ngIf=\"!isEmailValid\">*Email is invalid</span>\r\n        </div>\r\n        <button [disabled]=\"\r\n            !address.receiverName || \r\n            !address.receiverPhone ||\r\n            address.receiverPhone?.length != 10 ||\r\n            !isEmailValid || \r\n            !address.addressLine1 || \r\n            !address.localityName || \r\n            !address.zipCode || \r\n            !address.cityName ||\r\n            !address.stateName || \r\n            !address.addressType || isLoading\r\n            \" (click)=\"updateAddress()\">{{isLoading ? 'Loading' : 'Update'}}</button>\r\n    </div>\r\n</section>\r\n\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>", styles: [".address-sec{padding:20px;position:relative}.address-sec .header{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:20px}.new-address-header{display:flex;align-items:center}.mat-icon{cursor:pointer;margin-right:5px}.action-btn{margin-left:auto;bottom:-20px;position:relative;right:0;display:flex;flex-direction:column;align-items:flex-end}.action-btn button{background-color:#0267c1;color:#fff;padding:10px;width:200px!important;border:none;border-radius:5px}.label:after{content:\"*\"}.active-address{background-color:#0267c1!important;color:#fff!important}.forms{gap:10px;justify-content:space-between}.form-control-group,.form-control-full-group{width:48%}:is(.form-control-group,.form-control-full-group) input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.form-control-full-group{width:100%!important}.address-type{width:150px;padding:10px;background-color:#d3d3d35c;color:#000;text-align:center;border-radius:5px;margin:0 5px;cursor:pointer}.address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list{display:flex;flex-direction:column;gap:10px;height:500px;overflow-y:auto}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.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}.add-address{color:#0267c1;cursor:pointer;font-weight:600}.address-active{background-color:#0267c1;color:#fff}.selected-address{border:2px solid #0267C1!important}.error-message{color:tomato;display:flex;flex-direction:column;width:100%}@media only screen and (max-width: 475px){.address-list{height:fit-content;max-height:230px}.forms{flex-direction:column}.form-control-group{width:100%}.label{padding-bottom:10px}.address-type-options{position:relative;right:4px}.action-btn{position:relative;bottom:0;top:19px;right:0}.action-btn button{width:100%!important}.address-type{padding:10px 27px}.address-sec{padding:20px 4px}}button:disabled{background-color:#d3d3d3!important}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddressComponent, decorators: [{
             type: Component,
@@ -4005,7 +4008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         MatBottomSheetModule,
                         DeleteHoverElementComponent,
                         HoverElementsComponent
-                    ], providers: [], template: "<section class=\"address-sec\" (click)=\"editSection()\" simpoHover (hovering)=\"showEditTabs($event)\" >\n    <div class=\"header\">\n        <div class=\"new-address-header\">\n            <mat-icon (click)=\"goToProfile()\" *ngIf=\"!isCart\">keyboard_arrow_left</mat-icon>\n            <h3>{{isCart ? 'Shipping To' : 'New Address'}}</h3>\n        </div>\n        <span class=\"add-address\" *ngIf=\"!addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\n    </div>\n    <ng-container *ngIf=\"addNewAddress\">\n        <!-- <p (click)=\"getCurrentLocation()\" class=\"d-flex align-items-center\" style=\"cursor: pointer;\">\n            <mat-icon>my_location</mat-icon>\n            <span>Take my current location</span>\n        </p> -->\n        <div class=\"forms d-flex flex-wrap\">\n            <div class=\"form-control-group\">\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Name</div>\n                <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\" (keydown)=\"validateName($event)\">\n            </div>\n            <div class=\"form-control-group\">\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Mobile</div>\n                <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\" (keydown)=\"validateMobile($event)\">\n            </div>\n            <div class=\"form-control-group\">\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Email</div>\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\n            </div>\n            <div class=\"form-control-full-group\">\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address</div>\n                <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\n                    (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\n                    (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\n            </div>\n            <div class=\"form-control-group\">\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Locality</div>\n                <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\n            </div>\n            <div class=\"form-control-group\">\n                <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\">Landmark</div>\n                <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\n            </div>\n            <div class=\"form-control-group\">\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Pincode</div>\n                <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\n            </div>\n            <div class=\"form-control-group\">\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">City</div>\n                <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\n            </div>\n            <div class=\"form-control-group\">\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">State</div>\n                <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\n            </div>\n            <div class=\"form-control-group\">\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address Type</div>\n                <div class=\"d-flex\">\n                    <ng-container *ngFor=\"let address of addessType\">\n                        <span class=\"address-type\" (click)=\"checkAddressType(address)\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <div class=\"address-list\" *ngIf=\"!addNewAddress\">\n        <ng-container *ngFor=\"let address of addressList; let idx = index\">\n            <div class=\"address\" (click)=\"addressSelected(idx)\" [ngClass]=\"{'selected-address': selectedAddressIdx == idx}\">\n                <div class=\"address-left\">\n                    <div class=\"top\">\n                        <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\n                        <span class=\"address-type\">{{address?.addressType}}</span>\n                    </div>\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\n                    <div class=\"phone\">\n                        <span>Phone:</span>\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\n                    </div>\n                </div>\n                <div class=\"address-right\"></div>\n            </div>\n        </ng-container>\n    </div>\n    <div class=\"action-btn\" *ngIf=\"addNewAddress\">\n        <div class=\"error-message\">\n            <span *ngIf=\"address.receiverPhone?.length != 10 && address.receiverPhone?.length\">*Mobile number is invalid</span>\n            <span *ngIf=\"!isEmailValid\">*Email is invalid</span>\n        </div>\n        <button [disabled]=\"\n            !address.receiverName || \n            !address.receiverPhone ||\n            address.receiverPhone?.length != 10 ||\n            !isEmailValid || \n            !address.addressLine1 || \n            !address.localityName || \n            !address.zipCode || \n            !address.cityName ||\n            !address.stateName || \n            !address.addressType || isLoading\n            \" (click)=\"updateAddress()\">{{isLoading ? 'Loading' : 'Update'}}</button>\n    </div>\n</section>\n\n\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n</div>\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n</div>", styles: [".address-sec{padding:20px;position:relative}.address-sec .header{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:20px}.new-address-header{display:flex;align-items:center}.mat-icon{cursor:pointer;margin-right:5px}.action-btn{margin-left:auto;bottom:-20px;position:relative;right:0;display:flex;flex-direction:column;align-items:flex-end}.action-btn button{background-color:#0267c1;color:#fff;padding:10px;width:200px!important;border:none;border-radius:5px}.label:after{content:\"*\"}.active-address{background-color:#0267c1!important;color:#fff!important}.forms{gap:10px;justify-content:space-between}.form-control-group,.form-control-full-group{width:48%}:is(.form-control-group,.form-control-full-group) input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.form-control-full-group{width:100%!important}.address-type{width:150px;padding:10px;background-color:#d3d3d35c;color:#000;text-align:center;border-radius:5px;margin:0 5px;cursor:pointer}.address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list{display:flex;flex-direction:column;gap:10px;height:500px;overflow-y:auto}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.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}.add-address{color:#0267c1;cursor:pointer;font-weight:600}.address-active{background-color:#0267c1;color:#fff}.selected-address{border:2px solid #0267C1!important}.error-message{color:tomato;display:flex;flex-direction:column;width:100%}@media only screen and (max-width: 475px){.address-list{height:fit-content;max-height:230px}.forms{flex-direction:column}.form-control-group{width:100%}.label{padding-bottom:10px}.address-type-options{position:relative;right:4px}.action-btn{position:relative;bottom:0;top:19px;right:0}.action-btn button{width:100%!important}.address-type{padding:10px 27px}.address-sec{padding:20px 4px}}button:disabled{background-color:#d3d3d3!important}\n"] }]
+                    ], providers: [], template: "<section class=\"address-sec\" (click)=\"editSection()\" simpoHover (hovering)=\"showEditTabs($event)\" >\r\n    <div class=\"header\">\r\n        <div class=\"new-address-header\">\r\n            <mat-icon (click)=\"goToProfile()\" *ngIf=\"!isCart\">keyboard_arrow_left</mat-icon>\r\n            <h3>{{isCart ? 'Shipping To' : 'New Address'}}</h3>\r\n        </div>\r\n        <span class=\"add-address\" *ngIf=\"!addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n    </div>\r\n    <ng-container *ngIf=\"addNewAddress\">\r\n        <!-- <p (click)=\"getCurrentLocation()\" class=\"d-flex align-items-center\" style=\"cursor: pointer;\">\r\n            <mat-icon>my_location</mat-icon>\r\n            <span>Take my current location</span>\r\n        </p> -->\r\n        <div class=\"forms d-flex flex-wrap\">\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Name</div>\r\n                <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\" (keydown)=\"validateName($event)\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Mobile</div>\r\n                <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\" (keydown)=\"validateMobile($event)\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n            </div>\r\n            <div class=\"form-control-full-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address</div>\r\n                <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n                    (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n                    (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Locality</div>\r\n                <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\">Landmark</div>\r\n                <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Pincode</div>\r\n                <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">City</div>\r\n                <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">State</div>\r\n                <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address Type</div>\r\n                <div class=\"d-flex\">\r\n                    <ng-container *ngFor=\"let address of addessType\">\r\n                        <span class=\"address-type\" (click)=\"checkAddressType(address)\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"address-list\" *ngIf=\"!addNewAddress\">\r\n        <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n            <div class=\"address\" (click)=\"addressSelected(idx)\" [ngClass]=\"{'selected-address': selectedAddressIdx == idx}\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address?.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"action-btn\" *ngIf=\"addNewAddress\">\r\n        <div class=\"error-message\">\r\n            <span *ngIf=\"address.receiverPhone?.length != 10 && address.receiverPhone?.length\">*Mobile number is invalid</span>\r\n            <span *ngIf=\"!isEmailValid\">*Email is invalid</span>\r\n        </div>\r\n        <button [disabled]=\"\r\n            !address.receiverName || \r\n            !address.receiverPhone ||\r\n            address.receiverPhone?.length != 10 ||\r\n            !isEmailValid || \r\n            !address.addressLine1 || \r\n            !address.localityName || \r\n            !address.zipCode || \r\n            !address.cityName ||\r\n            !address.stateName || \r\n            !address.addressType || isLoading\r\n            \" (click)=\"updateAddress()\">{{isLoading ? 'Loading' : 'Update'}}</button>\r\n    </div>\r\n</section>\r\n\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>", styles: [".address-sec{padding:20px;position:relative}.address-sec .header{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:20px}.new-address-header{display:flex;align-items:center}.mat-icon{cursor:pointer;margin-right:5px}.action-btn{margin-left:auto;bottom:-20px;position:relative;right:0;display:flex;flex-direction:column;align-items:flex-end}.action-btn button{background-color:#0267c1;color:#fff;padding:10px;width:200px!important;border:none;border-radius:5px}.label:after{content:\"*\"}.active-address{background-color:#0267c1!important;color:#fff!important}.forms{gap:10px;justify-content:space-between}.form-control-group,.form-control-full-group{width:48%}:is(.form-control-group,.form-control-full-group) input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.form-control-full-group{width:100%!important}.address-type{width:150px;padding:10px;background-color:#d3d3d35c;color:#000;text-align:center;border-radius:5px;margin:0 5px;cursor:pointer}.address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list{display:flex;flex-direction:column;gap:10px;height:500px;overflow-y:auto}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.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}.add-address{color:#0267c1;cursor:pointer;font-weight:600}.address-active{background-color:#0267c1;color:#fff}.selected-address{border:2px solid #0267C1!important}.error-message{color:tomato;display:flex;flex-direction:column;width:100%}@media only screen and (max-width: 475px){.address-list{height:fit-content;max-height:230px}.forms{flex-direction:column}.form-control-group{width:100%}.label{padding-bottom:10px}.address-type-options{position:relative;right:4px}.action-btn{position:relative;bottom:0;top:19px;right:0}.action-btn button{width:100%!important}.address-type{padding:10px 27px}.address-sec{padding:20px 4px}}button:disabled{background-color:#d3d3d3!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: RestService }, { type: i3.MatDialog }, { type: i5.MatBottomSheet }, { type: i2$3.Router }, { type: StorageServiceService }, { type: EventsService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -4154,7 +4157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
         }], ctorParameters: () => [{ type: StorageServiceService }, { type: RestService }] });
 
 class CartComponent extends BaseSection {
-    constructor(_eventService, cartService, router, restService, matDialog, storageService, messageService, bottomSheet, dialogRef) {
+    constructor(_eventService, cartService, router, restService, matDialog, storageService, messageService, bottomSheet, matDialogData, dialogRef) {
         super();
         this._eventService = _eventService;
         this.cartService = cartService;
@@ -4164,6 +4167,7 @@ class CartComponent extends BaseSection {
         this.storageService = storageService;
         this.messageService = messageService;
         this.bottomSheet = bottomSheet;
+        this.matDialogData = matDialogData;
         this.dialogRef = dialogRef;
         this.edit = false;
         this.isLoading = false;
@@ -4522,8 +4526,8 @@ class CartComponent extends BaseSection {
     get currency() {
         return BUSINESS_CONSTANTS.CURRENCY;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$3.Router }, { token: RestService }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i7.MessageService }, { token: i5.MatBottomSheet }, { token: i3.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\n\n  <ng-container *ngIf=\"true\">\n    <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [attr.class]=\"isMobile ? 'py-5' : ''\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" >\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\n        <div class=\"bar\"></div>\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\n        <div class=\"bar\"></div>\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\n      </div>\n      <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n        <ng-container [ngSwitch]=\"currentTab\">\n          <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\n            <div class=\"my-bag\">\n              My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\n            </div>\n            <div class=\"cart-items\">\n              <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n                <div class=\"item-parent d-flex\">\n                  <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\n                  </div>\n                  <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\n                    <div class=\"lh-23\">\n                      <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\n                      <div class=\"price-with-tax\">\n                        <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\n                      </div>\n                      <ng-container *ngIf=\"item.itemVariant\"> \n                        <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\n                          <div class=\"fw-bold\">{{ varient }} : </div>\n                          <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\n                          <div class=\"fw-normal\" style=\"margin-left: 5px;\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\n                        </div>\n                      </ng-container>\n                      <div class=\"item-quantity\">\n                          <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\n                          <span>{{item.quantity}}</span>\n                          <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\n                    <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity)  | number: '1.0-2'}}</div>\n                    <div>\n                      <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\n                    </div>\n                  </div>\n                </div>\n                <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\n              </ng-container>\n            </div>\n          </div>\n          <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\n            <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\n          </div>\n          <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\n        </ng-container>\n        <div class=\"right-panel\">\n          <div class=\"my-bag\">\n            Price Details\n          </div>\n          <div class=\"price-details\">\n            <div class=\"price-parent-block\">\n              <div class=\"price-type\">Total Price</div>\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\n            </div>\n            <div class=\"price-parent-block\">\n              <div class=\"price-type\">Total Tax</div>\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalTax ?? 0) | number: '1.0-2'}}</div>\n            </div>\n            <div class=\"price-parent-block\"\n              *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n              <div class=\"price-type\">Delivery Charge</div>\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\n            </div>\n            <hr>\n            <div class=\"price-parent-block\">\n              <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\n              <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</div>\n            </div>\n\n            <div class=\"button-parent\">\n              <ng-container *ngIf=\"currentTab == 'BAG'\">\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToCheckout()\"  [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\n                <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\n              </ng-container>\n              \n              <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToPayment()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\n              </ng-container>\n              <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\n                <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\n                  [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\n              </div> -->\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\n        <div>\n          <div class=\"cart-image\">\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\n          </div>\n          <div class=\"cart-text\">\n            <ng-container *ngFor=\"let text of data?.content?.inputText\">\n              <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\n            </ng-container>\n            <!-- <div class=\"description d-flex mt-4\">\n              Looks like you have not added anything to your cart. Go ahead & explore top categories.\n            </div> -->\n          </div>\n        </div>\n      </section>\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\n      </div>\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n      </div>\n\n    </section>\n  </ng-container>\n  <ng-container *ngIf=\"false\">\n    <section class=\"cart-window\">\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\n        <div class=\"d-flex align-items-center\">\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\n          <span>Your Cart</span>\n        </div>\n        <div class=\"saving\"></div>\n      </div>\n      <div class=\"offers\">\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\n          <span>Avail Offers / Coupons</span>\n        </div>\n        <mat-icon>keyboard_arrow_right</mat-icon>\n      </div>\n      <div class=\"small-items\">\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\n          <div class=\"small-item\">\n            <div class=\"d-flex\" style=\"gap: 5px;\">\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"small-product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\n              </div>\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\n              <div class=\"small-item-quantity\">\n                <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\n                <span>{{item.quantity}}</span>\n                <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\n              </div>\n              <div class=\"small-item-price\">\n                <div class=\"price-with-tax\">\n                  <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\n                </div>\n                <!-- <div class=\"price-with-tax\">\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\n                </div> -->\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n      <div class=\"fotter-sec\">\n        <div class=\"delivery-add d-flex\">\n          <mat-icon>home</mat-icon>\n          <div class=\"address\">Tetsting</div>\n        </div>\n        <div class=\"payment-btn\">Click to Pay 1260</div>\n      </div>\n    </section>\n  </ng-container>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel{width:100%}.right-panel{width:100%;background:#fff;z-index:1000}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:unset}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$3.Router }, { token: RestService }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i7.MessageService }, { token: i5.MatBottomSheet }, { token: MAT_DIALOG_DATA, optional: true }, { token: i3.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n  <ng-container *ngIf=\"data\">\r\n    <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [attr.class]=\"isMobile ? 'py-5' : ''\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" >\r\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n      </div>\r\n      <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <ng-container [ngSwitch]=\"currentTab\">\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n            <div class=\"my-bag\">\r\n              My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n            </div>\r\n            <div class=\"cart-items\">\r\n              <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n                <div class=\"item-parent d-flex\">\r\n                  <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n                  </div>\r\n                  <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n                    <div class=\"lh-23\">\r\n                      <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n                      <div class=\"price-with-tax\">\r\n                        <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                      </div>\r\n                      <ng-container *ngIf=\"item.itemVariant\"> \r\n                        <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n                          <div class=\"fw-bold\">{{ varient }} : </div>\r\n                          <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n                          <div class=\"fw-normal\" style=\"margin-left: 5px;\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\r\n                        </div>\r\n                      </ng-container>\r\n                      <div class=\"item-quantity\">\r\n                          <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                          <span>{{item.quantity}}</span>\r\n                          <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n                    <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity)  | number: '1.0-2'}}</div>\r\n                    <div>\r\n                      <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n            <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n          </div>\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n        </ng-container>\r\n        <div class=\"right-panel\">\r\n          <div class=\"my-bag\">\r\n            Price Details\r\n          </div>\r\n          <div class=\"price-details\">\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\">Total Price</div>\r\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\">Total Tax</div>\r\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalTax ?? 0) | number: '1.0-2'}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\"\r\n              *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n              <div class=\"price-type\">Delivery Charge</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n            </div>\r\n            <hr>\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n              <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</div>\r\n            </div>\r\n\r\n            <div class=\"button-parent\">\r\n              <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToCheckout()\"  [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n                <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n              </ng-container>\r\n              \r\n              <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToPayment()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n              </ng-container>\r\n              <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n                <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n                  [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n              </div> -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\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'\"   [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n          </div>\r\n          <div class=\"cart-text\">\r\n            <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n              <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n            </ng-container>\r\n            <!-- <div class=\"description d-flex mt-4\">\r\n              Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n      </section>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n      </div>\r\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n      </div>\r\n\r\n    </section>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!data\">\r\n    <section class=\"cart-window\">\r\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n          <span>Your Cart</span>\r\n        </div>\r\n        <div class=\"saving\"></div>\r\n      </div>\r\n      <div class=\"offers\">\r\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n          <span>Avail Offers / Coupons</span>\r\n        </div>\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </div>\r\n      <div class=\"small-items\">\r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n          <div class=\"small-item\">\r\n            <div class=\"d-flex\" style=\"gap: 5px;\">\r\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"small-product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n              </div>\r\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n              <div class=\"small-item-quantity\">\r\n                <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                <span>{{item.quantity}}</span>\r\n                <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n              </div>\r\n              <div class=\"small-item-price\">\r\n                <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                </div>\r\n                <!-- <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"fotter-sec\">\r\n        <div class=\"delivery-add d-flex\">\r\n          <mat-icon>home</mat-icon>\r\n          <div class=\"address\">Tetsting</div>\r\n        </div>\r\n        <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n      </div>\r\n    </section>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel{width:100%}.right-panel{width:100%;background:#fff;z-index:1000}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:unset}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type: 
                 //DIRECTIVE
                 ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: AddressComponent, selector: "simpo-address", inputs: ["responseData", "data", "index", "edit", "delete", "isCart"], outputs: ["selectedAddress"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
@@ -4544,8 +4548,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         HoverDirective,
                         AddressComponent,
                         ToastModule
-                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\n\n  <ng-container *ngIf=\"true\">\n    <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [attr.class]=\"isMobile ? 'py-5' : ''\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" >\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\n        <div class=\"bar\"></div>\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\n        <div class=\"bar\"></div>\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\n      </div>\n      <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n        <ng-container [ngSwitch]=\"currentTab\">\n          <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\n            <div class=\"my-bag\">\n              My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\n            </div>\n            <div class=\"cart-items\">\n              <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n                <div class=\"item-parent d-flex\">\n                  <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\n                  </div>\n                  <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\n                    <div class=\"lh-23\">\n                      <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\n                      <div class=\"price-with-tax\">\n                        <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\n                      </div>\n                      <ng-container *ngIf=\"item.itemVariant\"> \n                        <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\n                          <div class=\"fw-bold\">{{ varient }} : </div>\n                          <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\n                          <div class=\"fw-normal\" style=\"margin-left: 5px;\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\n                        </div>\n                      </ng-container>\n                      <div class=\"item-quantity\">\n                          <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\n                          <span>{{item.quantity}}</span>\n                          <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\n                    <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity)  | number: '1.0-2'}}</div>\n                    <div>\n                      <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\n                    </div>\n                  </div>\n                </div>\n                <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\n              </ng-container>\n            </div>\n          </div>\n          <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\n            <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\n          </div>\n          <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\n        </ng-container>\n        <div class=\"right-panel\">\n          <div class=\"my-bag\">\n            Price Details\n          </div>\n          <div class=\"price-details\">\n            <div class=\"price-parent-block\">\n              <div class=\"price-type\">Total Price</div>\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\n            </div>\n            <div class=\"price-parent-block\">\n              <div class=\"price-type\">Total Tax</div>\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalTax ?? 0) | number: '1.0-2'}}</div>\n            </div>\n            <div class=\"price-parent-block\"\n              *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n              <div class=\"price-type\">Delivery Charge</div>\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\n            </div>\n            <hr>\n            <div class=\"price-parent-block\">\n              <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\n              <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</div>\n            </div>\n\n            <div class=\"button-parent\">\n              <ng-container *ngIf=\"currentTab == 'BAG'\">\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToCheckout()\"  [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\n                <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\n              </ng-container>\n              \n              <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToPayment()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\n              </ng-container>\n              <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\n                <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\n                  [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\n              </div> -->\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\n        <div>\n          <div class=\"cart-image\">\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\n          </div>\n          <div class=\"cart-text\">\n            <ng-container *ngFor=\"let text of data?.content?.inputText\">\n              <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\n            </ng-container>\n            <!-- <div class=\"description d-flex mt-4\">\n              Looks like you have not added anything to your cart. Go ahead & explore top categories.\n            </div> -->\n          </div>\n        </div>\n      </section>\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\n      </div>\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n      </div>\n\n    </section>\n  </ng-container>\n  <ng-container *ngIf=\"false\">\n    <section class=\"cart-window\">\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\n        <div class=\"d-flex align-items-center\">\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\n          <span>Your Cart</span>\n        </div>\n        <div class=\"saving\"></div>\n      </div>\n      <div class=\"offers\">\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\n          <span>Avail Offers / Coupons</span>\n        </div>\n        <mat-icon>keyboard_arrow_right</mat-icon>\n      </div>\n      <div class=\"small-items\">\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\n          <div class=\"small-item\">\n            <div class=\"d-flex\" style=\"gap: 5px;\">\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"small-product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\n              </div>\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\n              <div class=\"small-item-quantity\">\n                <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\n                <span>{{item.quantity}}</span>\n                <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\n              </div>\n              <div class=\"small-item-price\">\n                <div class=\"price-with-tax\">\n                  <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\n                </div>\n                <!-- <div class=\"price-with-tax\">\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\n                </div> -->\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n      <div class=\"fotter-sec\">\n        <div class=\"delivery-add d-flex\">\n          <mat-icon>home</mat-icon>\n          <div class=\"address\">Tetsting</div>\n        </div>\n        <div class=\"payment-btn\">Click to Pay 1260</div>\n      </div>\n    </section>\n  </ng-container>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel{width:100%}.right-panel{width:100%;background:#fff;z-index:1000}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:unset}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}}\n"] }]
-        }], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$3.Router }, { type: RestService }, { type: i3.MatDialog }, { type: StorageServiceService }, { type: i7.MessageService }, { type: i5.MatBottomSheet }, { type: i3.MatDialogRef, decorators: [{
+                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n  <ng-container *ngIf=\"data\">\r\n    <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [attr.class]=\"isMobile ? 'py-5' : ''\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" >\r\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n      </div>\r\n      <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <ng-container [ngSwitch]=\"currentTab\">\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n            <div class=\"my-bag\">\r\n              My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n            </div>\r\n            <div class=\"cart-items\">\r\n              <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n                <div class=\"item-parent d-flex\">\r\n                  <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n                  </div>\r\n                  <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n                    <div class=\"lh-23\">\r\n                      <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n                      <div class=\"price-with-tax\">\r\n                        <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                      </div>\r\n                      <ng-container *ngIf=\"item.itemVariant\"> \r\n                        <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n                          <div class=\"fw-bold\">{{ varient }} : </div>\r\n                          <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n                          <div class=\"fw-normal\" style=\"margin-left: 5px;\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\r\n                        </div>\r\n                      </ng-container>\r\n                      <div class=\"item-quantity\">\r\n                          <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                          <span>{{item.quantity}}</span>\r\n                          <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n                    <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity)  | number: '1.0-2'}}</div>\r\n                    <div>\r\n                      <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n            <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n          </div>\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n        </ng-container>\r\n        <div class=\"right-panel\">\r\n          <div class=\"my-bag\">\r\n            Price Details\r\n          </div>\r\n          <div class=\"price-details\">\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\">Total Price</div>\r\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\">Total Tax</div>\r\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalTax ?? 0) | number: '1.0-2'}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\"\r\n              *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n              <div class=\"price-type\">Delivery Charge</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n            </div>\r\n            <hr>\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n              <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</div>\r\n            </div>\r\n\r\n            <div class=\"button-parent\">\r\n              <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToCheckout()\"  [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n                <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n              </ng-container>\r\n              \r\n              <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToPayment()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n              </ng-container>\r\n              <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n                <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n                  [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n              </div> -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\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'\"   [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n          </div>\r\n          <div class=\"cart-text\">\r\n            <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n              <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n            </ng-container>\r\n            <!-- <div class=\"description d-flex mt-4\">\r\n              Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n      </section>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n      </div>\r\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n      </div>\r\n\r\n    </section>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!data\">\r\n    <section class=\"cart-window\">\r\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n          <span>Your Cart</span>\r\n        </div>\r\n        <div class=\"saving\"></div>\r\n      </div>\r\n      <div class=\"offers\">\r\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n          <span>Avail Offers / Coupons</span>\r\n        </div>\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </div>\r\n      <div class=\"small-items\">\r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n          <div class=\"small-item\">\r\n            <div class=\"d-flex\" style=\"gap: 5px;\">\r\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"small-product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n              </div>\r\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n              <div class=\"small-item-quantity\">\r\n                <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                <span>{{item.quantity}}</span>\r\n                <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n              </div>\r\n              <div class=\"small-item-price\">\r\n                <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                </div>\r\n                <!-- <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"fotter-sec\">\r\n        <div class=\"delivery-add d-flex\">\r\n          <mat-icon>home</mat-icon>\r\n          <div class=\"address\">Tetsting</div>\r\n        </div>\r\n        <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n      </div>\r\n    </section>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel{width:100%}.right-panel{width:100%;background:#fff;z-index:1000}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:unset}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}}\n"] }]
+        }], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$3.Router }, { type: RestService }, { type: i3.MatDialog }, { type: StorageServiceService }, { type: i7.MessageService }, { type: i5.MatBottomSheet }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i3.MatDialogRef, decorators: [{
                     type: Optional
                 }] }], propDecorators: { data: [{
                 type: Input
@@ -4606,8 +4615,8 @@ class NavbarSectionComponent {
         this.router.navigate(['/wishlist']);
     }
     goToCart() {
-        if (true) {
-            this.matDialog.open(CartComponent, { width: '28vw', panelClass: 'sidepanel-class' });
+        if (false) {
+            this.matDialog.open(CartComponent, { width: '28vw', panelClass: 'sidepanel-class', data: { window: true } });
         }
         else {
             this.router.navigate(['/cart']);
@@ -4785,11 +4794,11 @@ class AddNewSectionComponent {
         this._eventService.addNewSectionClick.emit({ index: this.index, position: "ABOVE" });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddNewSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AddNewSectionComponent, isStandalone: true, selector: "simpo-add-new-section", inputs: { index: "index" }, ngImport: i0, template: "<section class=\"main_section\">\n  <div>\n      <div #displayElements></div>\n  </div>\n  <section class=\"add_btn\" (click)=\"addSection()\">\n      <mat-icon>add</mat-icon>\n      <span style=\"margin-left: 5px;\">Add Section</span>\n  </section>\n</section>\n", styles: [".main_section{width:100%;padding:2% 0;overflow-y:scroll}.main_section:hover{border:3px solid #025eb0!important}.add_btn{font-family:lexandReg;font-size:14px;color:#3f3b3b;font-style:normal;font-weight:400;display:flex;justify-content:center;align-items:center;height:150px;width:100%;cursor:pointer;font-size:20px;font-weight:600;color:#09c}.add_btn img{width:2%}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AddNewSectionComponent, isStandalone: true, selector: "simpo-add-new-section", inputs: { index: "index" }, ngImport: i0, template: "<section class=\"main_section\">\r\n  <div>\r\n      <div #displayElements></div>\r\n  </div>\r\n  <section class=\"add_btn\" (click)=\"addSection()\">\r\n      <mat-icon>add</mat-icon>\r\n      <span style=\"margin-left: 5px;\">Add Section</span>\r\n  </section>\r\n</section>\r\n", styles: [".main_section{width:100%;padding:2% 0;overflow-y:scroll}.main_section:hover{border:3px solid #025eb0!important}.add_btn{font-family:lexandReg;font-size:14px;color:#3f3b3b;font-style:normal;font-weight:400;display:flex;justify-content:center;align-items:center;height:150px;width:100%;cursor:pointer;font-size:20px;font-weight:600;color:#09c}.add_btn img{width:2%}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddNewSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-add-new-section', standalone: true, imports: [MatIcon], template: "<section class=\"main_section\">\n  <div>\n      <div #displayElements></div>\n  </div>\n  <section class=\"add_btn\" (click)=\"addSection()\">\n      <mat-icon>add</mat-icon>\n      <span style=\"margin-left: 5px;\">Add Section</span>\n  </section>\n</section>\n", styles: [".main_section{width:100%;padding:2% 0;overflow-y:scroll}.main_section:hover{border:3px solid #025eb0!important}.add_btn{font-family:lexandReg;font-size:14px;color:#3f3b3b;font-style:normal;font-weight:400;display:flex;justify-content:center;align-items:center;height:150px;width:100%;cursor:pointer;font-size:20px;font-weight:600;color:#09c}.add_btn img{width:2%}\n"] }]
+            args: [{ selector: 'simpo-add-new-section', standalone: true, imports: [MatIcon], template: "<section class=\"main_section\">\r\n  <div>\r\n      <div #displayElements></div>\r\n  </div>\r\n  <section class=\"add_btn\" (click)=\"addSection()\">\r\n      <mat-icon>add</mat-icon>\r\n      <span style=\"margin-left: 5px;\">Add Section</span>\r\n  </section>\r\n</section>\r\n", styles: [".main_section{width:100%;padding:2% 0;overflow-y:scroll}.main_section:hover{border:3px solid #025eb0!important}.add_btn{font-family:lexandReg;font-size:14px;color:#3f3b3b;font-style:normal;font-weight:400;display:flex;justify-content:center;align-items:center;height:150px;width:100%;cursor:pointer;font-size:20px;font-weight:600;color:#09c}.add_btn img{width:2%}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { index: [{
                 type: Input
             }] } });
@@ -4904,11 +4913,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
 
 class SkeletonLoaderSectionComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SkeletonLoaderSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SkeletonLoaderSectionComponent, isStandalone: true, selector: "simpo-skeleton-loader-section", inputs: { sectionType: "sectionType" }, ngImport: i0, template: "<div class=\"p-15\" style=\"width: 100%;\">\n  <div class=\"skeleton-parent\"\n    *ngIf=\"sectionType === 'service' || sectionType === 'teammember' || sectionType === 'imagegrid'\">\n    <div class=\"skeleton\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n        width: '100%',\n        height: '40vh',\n        'border-radius': '10px',\n        'position': 'relative',\n        'right': '5px'\n      }\">\n      </ngx-skeleton-loader>\n      <div class=\"second-section-wrapper\">\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '80%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '90%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '60%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n      </div>\n    </div>\n    <div class=\"skeleton\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n        width: '100%',\n        height: '40vh',\n        'border-radius': '10px',\n        'position': 'relative',\n        'right': '5px'\n      }\">\n      </ngx-skeleton-loader>\n      <div class=\"second-section-wrapper\">\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '80%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '90%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '60%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n      </div>\n    </div>\n    <div class=\"skeleton\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n        width: '100%',\n        height: '40vh',\n        'border-radius': '10px',\n        'position': 'relative',\n        'right': '5px'\n      }\">\n      </ngx-skeleton-loader>\n      <div class=\"second-section-wrapper\">\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '80%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '90%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '60%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"banner-skeleton\" *ngIf=\"sectionType === 'banner' || sectionType === 'text_image'\">\n    <div style=\"width: 50%;\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n        width: '90%',\n        height: '400px',\n        'border-radius': '10px'\n      }\">\n      </ngx-skeleton-loader>\n    </div>\n    <div class=\"second-section-wrapper\" style=\"width: 50%;padding-top: 50px;\">\n      <div class=\"wrapper\">\n        <ngx-skeleton-loader [theme]=\"{\n            width: '80%',\n            'border-radius': '0',\n            height: '15px',\n            'margin-bottom': '10px'\n          }\"></ngx-skeleton-loader>\n      </div>\n      <div class=\"wrapper\">\n        <ngx-skeleton-loader [theme]=\"{\n            width: '90%',\n            'border-radius': '0',\n            height: '15px',\n            'margin-bottom': '10px'\n          }\"></ngx-skeleton-loader>\n      </div>\n      <div class=\"wrapper\">\n        <ngx-skeleton-loader [theme]=\"{\n            width: '60%',\n            'border-radius': '0',\n            height: '15px',\n            'margin-bottom': '10px'\n          }\"></ngx-skeleton-loader>\n      </div>\n      <div style=\"margin-top: 50px;\">\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n            width: '130px',\n            height: '45px',\n            'border-radius': '10px'\n          }\">\n        </ngx-skeleton-loader>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"text-skeleton\" *ngIf=\"sectionType === 'text'\">\n    <div class=\"wrapper\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '80%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div class=\"wrapper\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '90%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div class=\"wrapper\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '60%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div style=\"margin-top: 50px;\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n          width: '130px',\n          height: '45px',\n          'border-radius': '10px'\n        }\">\n      </ngx-skeleton-loader>\n    </div>\n  </div>\n\n  <div class=\"testimonial-skeleton\" *ngIf=\"sectionType === 'testimonial'\">\n    <div>\n      <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{ width: '80px', height: '80px' }\">\n      </ngx-skeleton-loader>\n    </div>\n    <div class=\"wrapper\" style=\"margin-top: 20px;\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '80%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div class=\"wrapper\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '90%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div class=\"wrapper\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '60%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div style=\"margin-top: 50px;\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n          width: '130px',\n          height: '45px',\n          'border-radius': '10px'\n        }\">\n      </ngx-skeleton-loader>\n    </div>\n  </div>\n\n  <div class=\"image-skeleton\"\n    *ngIf=\"sectionType === 'imageCarousel' || sectionType === 'image' || sectionType === 'contact us'\">\n    <ngx-skeleton-loader count=\"1\" [theme]=\"{\n      'border-radius': '5px',\n      height: '50vh',\n      width: '100%'\n    }\"></ngx-skeleton-loader>\n  </div>\n</div>\n", styles: [".main-section{position:relative;left:25px}.p-15{padding:15px}.wrapper{width:100%;flex:1}.second-section-wrapper{width:100%;height:auto;flex:1}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border:1px solid #e5e7eb;width:33.33%;border-radius:10px}.banner-skeleton{display:flex;gap:10px}.text-skeleton,.testimonial-skeleton{text-align:center}.image-skeleton{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SkeletonLoaderSectionComponent, isStandalone: true, selector: "simpo-skeleton-loader-section", inputs: { sectionType: "sectionType" }, ngImport: i0, template: "<div class=\"p-15\" style=\"width: 100%;\">\r\n  <div class=\"skeleton-parent\"\r\n    *ngIf=\"sectionType === 'service' || sectionType === 'teammember' || sectionType === 'imagegrid'\">\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '100%',\r\n        height: '40vh',\r\n        'border-radius': '10px',\r\n        'position': 'relative',\r\n        'right': '5px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '100%',\r\n        height: '40vh',\r\n        'border-radius': '10px',\r\n        'position': 'relative',\r\n        'right': '5px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '100%',\r\n        height: '40vh',\r\n        'border-radius': '10px',\r\n        'position': 'relative',\r\n        'right': '5px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"banner-skeleton\" *ngIf=\"sectionType === 'banner' || sectionType === 'text_image'\">\r\n    <div style=\"width: 50%;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '90%',\r\n        height: '400px',\r\n        'border-radius': '10px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"second-section-wrapper\" style=\"width: 50%;padding-top: 50px;\">\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '80%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '90%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '60%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div style=\"margin-top: 50px;\">\r\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n            width: '130px',\r\n            height: '45px',\r\n            'border-radius': '10px'\r\n          }\">\r\n        </ngx-skeleton-loader>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"text-skeleton\" *ngIf=\"sectionType === 'text'\">\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '80%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '90%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '60%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div style=\"margin-top: 50px;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '130px',\r\n          height: '45px',\r\n          'border-radius': '10px'\r\n        }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"testimonial-skeleton\" *ngIf=\"sectionType === 'testimonial'\">\r\n    <div>\r\n      <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{ width: '80px', height: '80px' }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\" style=\"margin-top: 20px;\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '80%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '90%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '60%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div style=\"margin-top: 50px;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '130px',\r\n          height: '45px',\r\n          'border-radius': '10px'\r\n        }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"image-skeleton\"\r\n    *ngIf=\"sectionType === 'imageCarousel' || sectionType === 'image' || sectionType === 'contact us'\">\r\n    <ngx-skeleton-loader count=\"1\" [theme]=\"{\r\n      'border-radius': '5px',\r\n      height: '50vh',\r\n      width: '100%'\r\n    }\"></ngx-skeleton-loader>\r\n  </div>\r\n</div>\r\n", styles: [".main-section{position:relative;left:25px}.p-15{padding:15px}.wrapper{width:100%;flex:1}.second-section-wrapper{width:100%;height:auto;flex:1}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border:1px solid #e5e7eb;width:33.33%;border-radius:10px}.banner-skeleton{display:flex;gap:10px}.text-skeleton,.testimonial-skeleton{text-align:center}.image-skeleton{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SkeletonLoaderSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-skeleton-loader-section', standalone: true, imports: [CommonModule, NgxSkeletonLoaderModule], template: "<div class=\"p-15\" style=\"width: 100%;\">\n  <div class=\"skeleton-parent\"\n    *ngIf=\"sectionType === 'service' || sectionType === 'teammember' || sectionType === 'imagegrid'\">\n    <div class=\"skeleton\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n        width: '100%',\n        height: '40vh',\n        'border-radius': '10px',\n        'position': 'relative',\n        'right': '5px'\n      }\">\n      </ngx-skeleton-loader>\n      <div class=\"second-section-wrapper\">\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '80%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '90%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '60%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n      </div>\n    </div>\n    <div class=\"skeleton\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n        width: '100%',\n        height: '40vh',\n        'border-radius': '10px',\n        'position': 'relative',\n        'right': '5px'\n      }\">\n      </ngx-skeleton-loader>\n      <div class=\"second-section-wrapper\">\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '80%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '90%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '60%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n      </div>\n    </div>\n    <div class=\"skeleton\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n        width: '100%',\n        height: '40vh',\n        'border-radius': '10px',\n        'position': 'relative',\n        'right': '5px'\n      }\">\n      </ngx-skeleton-loader>\n      <div class=\"second-section-wrapper\">\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '80%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '90%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '60%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"banner-skeleton\" *ngIf=\"sectionType === 'banner' || sectionType === 'text_image'\">\n    <div style=\"width: 50%;\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n        width: '90%',\n        height: '400px',\n        'border-radius': '10px'\n      }\">\n      </ngx-skeleton-loader>\n    </div>\n    <div class=\"second-section-wrapper\" style=\"width: 50%;padding-top: 50px;\">\n      <div class=\"wrapper\">\n        <ngx-skeleton-loader [theme]=\"{\n            width: '80%',\n            'border-radius': '0',\n            height: '15px',\n            'margin-bottom': '10px'\n          }\"></ngx-skeleton-loader>\n      </div>\n      <div class=\"wrapper\">\n        <ngx-skeleton-loader [theme]=\"{\n            width: '90%',\n            'border-radius': '0',\n            height: '15px',\n            'margin-bottom': '10px'\n          }\"></ngx-skeleton-loader>\n      </div>\n      <div class=\"wrapper\">\n        <ngx-skeleton-loader [theme]=\"{\n            width: '60%',\n            'border-radius': '0',\n            height: '15px',\n            'margin-bottom': '10px'\n          }\"></ngx-skeleton-loader>\n      </div>\n      <div style=\"margin-top: 50px;\">\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n            width: '130px',\n            height: '45px',\n            'border-radius': '10px'\n          }\">\n        </ngx-skeleton-loader>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"text-skeleton\" *ngIf=\"sectionType === 'text'\">\n    <div class=\"wrapper\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '80%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div class=\"wrapper\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '90%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div class=\"wrapper\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '60%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div style=\"margin-top: 50px;\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n          width: '130px',\n          height: '45px',\n          'border-radius': '10px'\n        }\">\n      </ngx-skeleton-loader>\n    </div>\n  </div>\n\n  <div class=\"testimonial-skeleton\" *ngIf=\"sectionType === 'testimonial'\">\n    <div>\n      <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{ width: '80px', height: '80px' }\">\n      </ngx-skeleton-loader>\n    </div>\n    <div class=\"wrapper\" style=\"margin-top: 20px;\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '80%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div class=\"wrapper\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '90%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div class=\"wrapper\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '60%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div style=\"margin-top: 50px;\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n          width: '130px',\n          height: '45px',\n          'border-radius': '10px'\n        }\">\n      </ngx-skeleton-loader>\n    </div>\n  </div>\n\n  <div class=\"image-skeleton\"\n    *ngIf=\"sectionType === 'imageCarousel' || sectionType === 'image' || sectionType === 'contact us'\">\n    <ngx-skeleton-loader count=\"1\" [theme]=\"{\n      'border-radius': '5px',\n      height: '50vh',\n      width: '100%'\n    }\"></ngx-skeleton-loader>\n  </div>\n</div>\n", styles: [".main-section{position:relative;left:25px}.p-15{padding:15px}.wrapper{width:100%;flex:1}.second-section-wrapper{width:100%;height:auto;flex:1}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border:1px solid #e5e7eb;width:33.33%;border-radius:10px}.banner-skeleton{display:flex;gap:10px}.text-skeleton,.testimonial-skeleton{text-align:center}.image-skeleton{width:100%}\n"] }]
+            args: [{ selector: 'simpo-skeleton-loader-section', standalone: true, imports: [CommonModule, NgxSkeletonLoaderModule], template: "<div class=\"p-15\" style=\"width: 100%;\">\r\n  <div class=\"skeleton-parent\"\r\n    *ngIf=\"sectionType === 'service' || sectionType === 'teammember' || sectionType === 'imagegrid'\">\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '100%',\r\n        height: '40vh',\r\n        'border-radius': '10px',\r\n        'position': 'relative',\r\n        'right': '5px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '100%',\r\n        height: '40vh',\r\n        'border-radius': '10px',\r\n        'position': 'relative',\r\n        'right': '5px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '100%',\r\n        height: '40vh',\r\n        'border-radius': '10px',\r\n        'position': 'relative',\r\n        'right': '5px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"banner-skeleton\" *ngIf=\"sectionType === 'banner' || sectionType === 'text_image'\">\r\n    <div style=\"width: 50%;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '90%',\r\n        height: '400px',\r\n        'border-radius': '10px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"second-section-wrapper\" style=\"width: 50%;padding-top: 50px;\">\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '80%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '90%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '60%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div style=\"margin-top: 50px;\">\r\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n            width: '130px',\r\n            height: '45px',\r\n            'border-radius': '10px'\r\n          }\">\r\n        </ngx-skeleton-loader>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"text-skeleton\" *ngIf=\"sectionType === 'text'\">\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '80%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '90%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '60%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div style=\"margin-top: 50px;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '130px',\r\n          height: '45px',\r\n          'border-radius': '10px'\r\n        }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"testimonial-skeleton\" *ngIf=\"sectionType === 'testimonial'\">\r\n    <div>\r\n      <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{ width: '80px', height: '80px' }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\" style=\"margin-top: 20px;\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '80%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '90%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '60%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div style=\"margin-top: 50px;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '130px',\r\n          height: '45px',\r\n          'border-radius': '10px'\r\n        }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"image-skeleton\"\r\n    *ngIf=\"sectionType === 'imageCarousel' || sectionType === 'image' || sectionType === 'contact us'\">\r\n    <ngx-skeleton-loader count=\"1\" [theme]=\"{\r\n      'border-radius': '5px',\r\n      height: '50vh',\r\n      width: '100%'\r\n    }\"></ngx-skeleton-loader>\r\n  </div>\r\n</div>\r\n", styles: [".main-section{position:relative;left:25px}.p-15{padding:15px}.wrapper{width:100%;flex:1}.second-section-wrapper{width:100%;height:auto;flex:1}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border:1px solid #e5e7eb;width:33.33%;border-radius:10px}.banner-skeleton{display:flex;gap:10px}.text-skeleton,.testimonial-skeleton{text-align:center}.image-skeleton{width:100%}\n"] }]
         }], propDecorators: { sectionType: [{
                 type: Input
             }] } });
@@ -4939,7 +4948,7 @@ class BannerGridSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BannerGridSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BannerGridSectionComponent, isStandalone: true, selector: "simpo-banner-grid-section", inputs: { data: "data", edit: "edit", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar': canMergeNavbar}\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" (click)=\"editSection()\">\n  <div [attr.class]=\"styles?.borderLessImage ? 'px-0 py-0' : 'px-5 py-4'\"  [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n    [simpoBorder]=\"styles?.border\">\n    <div class=\"d-flex justify-content-between gap-5 align-items-center total-section\"[id]=\"data?.id\"\n      [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\n      [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n      [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left', 'px-0 py-0': styles?.borderLessImage }\">\n      <div class=\"image-section\" *ngIf=\"content?.listItem?.data?.length === 3\"  [ngClass]=\"{'image-position' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'align-items-unset': styles?.borderLessImage === true}\">\n        <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" [ngClass]=\"{'images-top' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'mt-0 mb-o ms-0 me-0': styles?.borderLessImage===true}\">\n          <img loading=\"lazy\"  [src]=\"listItems[0]?.image.url\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" class=\"img\" [ngClass]=\"{'image-width-top' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'mt-0 mb-o ms-0 me-0 borderLess-image': styles?.borderLessImage===true}\"\n            [simpoImageDirective]=\"styles?.image\" [alt]=\"listItems[0]?.image.altText\"\n            [class]=\"data?.id+(listItems[0]?.image.id || '')\" [simpoObjectPosition]=\"listItems[0]?.image.position\"\n            loading=\"lazy\">\n        </div>\n        <div [ngClass]=\"{'images' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\n          <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between\" [ngClass]=\"{'mt-0 gap-0': styles?.borderLessImage, 'mt-4': !styles?.borderLessImage}\">\n            <img loading=\"lazy\"  *ngFor=\"let item of listItems.slice(1); let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\" [ngClass]=\"{'image-width' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'borderLess-image me-0 borderless-width': styles?.borderLessImage, 'img-1': !styles?.borderLessImage}\"\n              [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\n              [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\"\n              loading=\"lazy\">\n          </div>\n        </div>\n      </div>\n\n      <div class=\"image-section-2\" *ngIf=\"content?.listItem?.data?.length === 2\" [ngClass]=\"{'image-section-2-borderless': styles?.borderLessImage}\">\n        <div [ngClass]=\"{'image-width-2' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\n          <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between\" [ngClass]=\"{'mt-0 gap-0': styles?.borderLessImage, 'mt-4': !styles?.borderLessImage}\">\n            <img loading=\"lazy\"  *ngFor=\"let item of listItems; let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\"\n              [ngClass]=\"{'images-width-2' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'borderless-width borderLess-image': styles?.borderLessImage, 'img-1': !styles?.borderLessImage}\"\n              [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\n              [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\"\n              loading=\"lazy\">\n          </div>\n        </div>\n      </div>\n\n      <div class=\"image-section-3\" *ngIf=\"content?.listItem?.data?.length === 1\" [ngClass]=\"{'image-width-3' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\n        <div>\n          <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between\"  [ngClass]=\"{'mt-0': styles?.borderLessImage, 'mt-4': !styles?.borderLessImage}\">\n            <img loading=\"lazy\"  *ngFor=\"let item of listItems; let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\"\n              [ngClass]=\"{'images-width-3' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'borderLess-height borderLess-image': styles?.borderLessImage, 'img-1': !styles?.borderLessImage}\"\n              [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\n              [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\" class=\"image-1\"\n              loading=\"lazy\">\n          </div>\n        </div>\n      </div>\n\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\" [id]=\"data?.id\" [ngClass]=\"{'col-lg-12' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'px-5 py-4': styles?.borderLessImage}\"\n        [simpoContentAlignment]=\"styles?.contentAlignment\">\n        <div *ngFor=\"let text of content?.inputText\">\n          <div [innerHTML]=\"text.value | sanitizeHtml\" [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n          </div>\n        </div>\n        <div class=\"button-section d-flex mt-4\" *ngIf=\"!data?.action?.hasOwnProperty('display') || data?.action?.display\"   [ngClass]=\"[\n        styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n        styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n        styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n      ]\">\n          <div *ngFor=\"let button of data?.action?.buttons\">\n            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\n              [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>\n", styles: [".total-container{height:auto;position:relative}.float-none{float:none}.image-section{display:flex;flex-direction:column;align-items:center}.image-section .d-flex{gap:10px}.img{width:100%;height:auto}.align-items-unset{align-items:unset}.borderLess-image{border-radius:0!important}.borderless-width{width:50%;height:auto}.borderLess-height{height:54vh}.img-1{width:48%;height:auto}.image-section-2{display:flex;align-items:center}.image-section-2 .d-flex{gap:10px}.image-section-2-borderless,.image-1{width:100%}.image-position{display:flex;flex-direction:row;width:100%}.image-width{width:100%;margin-right:5px}.images{width:33%}.images-top{width:33%;margin-right:15px}.image-width-top{width:100%;height:100%;margin-top:17px;margin-right:15px}.col-lg-12{width:100%!important}.total-section{min-height:calc(50vh + -0px)!important;height:auto}.image-width-2{width:50%}.images-width-2{width:100%}.image-width-3,.images-width-3{width:100%;height:450px}.button-section{gap:10px}@media only screen and (max-width: 475px){.total-section{height:auto;flex-direction:column}.py-4{padding:1rem!important}.body-large{font-size:16px;line-height:21px}.image-position{overflow-y:scroll}.images-top,.images{width:100%}.image-width,.image-width-top{height:450px;width:300px;margin-right:2px}.image-section-2{display:flex;align-items:center;overflow-y:scroll!important;width:100%}.images-width-2{width:310px;height:450px}.image-width-2{width:100%}}.mergeNavbar{margin-top:-175px;padding-top:175px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BannerGridSectionComponent, isStandalone: true, selector: "simpo-banner-grid-section", inputs: { data: "data", edit: "edit", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar': canMergeNavbar}\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div [attr.class]=\"styles?.borderLessImage ? 'px-0 py-0' : 'px-5 py-4'\"  [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\">\r\n    <div class=\"d-flex justify-content-between gap-5 align-items-center total-section\"[id]=\"data?.id\"\r\n      [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n      [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left', 'px-0 py-0': styles?.borderLessImage }\">\r\n      <div class=\"image-section\" *ngIf=\"content?.listItem?.data?.length === 3\"  [ngClass]=\"{'image-position' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'align-items-unset': styles?.borderLessImage === true}\">\r\n        <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" [ngClass]=\"{'images-top' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'mt-0 mb-o ms-0 me-0': styles?.borderLessImage===true}\">\r\n          <img loading=\"lazy\"  [src]=\"listItems[0]?.image.url\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" class=\"img\" [ngClass]=\"{'image-width-top' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'mt-0 mb-o ms-0 me-0 borderLess-image': styles?.borderLessImage===true}\"\r\n            [simpoImageDirective]=\"styles?.image\" [alt]=\"listItems[0]?.image.altText\"\r\n            [class]=\"data?.id+(listItems[0]?.image.id || '')\" [simpoObjectPosition]=\"listItems[0]?.image.position\"\r\n            loading=\"lazy\">\r\n        </div>\r\n        <div [ngClass]=\"{'images' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n          <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between\" [ngClass]=\"{'mt-0 gap-0': styles?.borderLessImage, 'mt-4': !styles?.borderLessImage}\">\r\n            <img loading=\"lazy\"  *ngFor=\"let item of listItems.slice(1); let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\" [ngClass]=\"{'image-width' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'borderLess-image me-0 borderless-width': styles?.borderLessImage, 'img-1': !styles?.borderLessImage}\"\r\n              [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\r\n              [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\"\r\n              loading=\"lazy\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"image-section-2\" *ngIf=\"content?.listItem?.data?.length === 2\" [ngClass]=\"{'image-section-2-borderless': styles?.borderLessImage}\">\r\n        <div [ngClass]=\"{'image-width-2' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n          <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between\" [ngClass]=\"{'mt-0 gap-0': styles?.borderLessImage, 'mt-4': !styles?.borderLessImage}\">\r\n            <img loading=\"lazy\"  *ngFor=\"let item of listItems; let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\"\r\n              [ngClass]=\"{'images-width-2' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'borderless-width borderLess-image': styles?.borderLessImage, 'img-1': !styles?.borderLessImage}\"\r\n              [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\r\n              [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\"\r\n              loading=\"lazy\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"image-section-3\" *ngIf=\"content?.listItem?.data?.length === 1\" [ngClass]=\"{'image-width-3' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n        <div>\r\n          <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between\"  [ngClass]=\"{'mt-0': styles?.borderLessImage, 'mt-4': !styles?.borderLessImage}\">\r\n            <img loading=\"lazy\"  *ngFor=\"let item of listItems; let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\"\r\n              [ngClass]=\"{'images-width-3' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'borderLess-height borderLess-image': styles?.borderLessImage, 'img-1': !styles?.borderLessImage}\"\r\n              [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\r\n              [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\" class=\"image-1\"\r\n              loading=\"lazy\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\" [id]=\"data?.id\" [ngClass]=\"{'col-lg-12' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'px-5 py-4': styles?.borderLessImage}\"\r\n        [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n        <div *ngFor=\"let text of content?.inputText\">\r\n          <div [innerHTML]=\"text.value | sanitizeHtml\" [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n          </div>\r\n        </div>\r\n        <div class=\"button-section d-flex mt-4\" *ngIf=\"!data?.action?.hasOwnProperty('display') || data?.action?.display\"   [ngClass]=\"[\r\n        styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n        styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n        styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n      ]\">\r\n          <div *ngFor=\"let button of data?.action?.buttons\">\r\n            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n              [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.float-none{float:none}.image-section{display:flex;flex-direction:column;align-items:center}.image-section .d-flex{gap:10px}.img{width:100%;height:auto}.align-items-unset{align-items:unset}.borderLess-image{border-radius:0!important}.borderless-width{width:50%;height:auto}.borderLess-height{height:54vh}.img-1{width:48%;height:auto}.image-section-2{display:flex;align-items:center}.image-section-2 .d-flex{gap:10px}.image-section-2-borderless,.image-1{width:100%}.image-position{display:flex;flex-direction:row;width:100%}.image-width{width:100%;margin-right:5px}.images{width:33%}.images-top{width:33%;margin-right:15px}.image-width-top{width:100%;height:100%;margin-top:17px;margin-right:15px}.col-lg-12{width:100%!important}.total-section{min-height:calc(50vh + -0px)!important;height:auto}.image-width-2{width:50%}.images-width-2{width:100%}.image-width-3,.images-width-3{width:100%;height:450px}.button-section{gap:10px}@media only screen and (max-width: 475px){.total-section{height:auto;flex-direction:column}.py-4{padding:1rem!important}.body-large{font-size:16px;line-height:21px}.image-position{overflow-y:scroll}.images-top,.images{width:100%}.image-width,.image-width-top{height:450px;width:300px;margin-right:2px}.image-section-2{display:flex;align-items:center;overflow-y:scroll!important;width:100%}.images-width-2{width:310px;height:450px}.image-width-2{width:100%}}.mergeNavbar{margin-top:-175px;padding-top:175px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BannerGridSectionComponent, decorators: [{
             type: Component,
@@ -4961,7 +4970,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         ContentFitDirective,
                         SimpoBorderlessDirective,
                         SanitizeHtmlPipe
-                    ], template: "<section [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar': canMergeNavbar}\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" (click)=\"editSection()\">\n  <div [attr.class]=\"styles?.borderLessImage ? 'px-0 py-0' : 'px-5 py-4'\"  [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n    [simpoBorder]=\"styles?.border\">\n    <div class=\"d-flex justify-content-between gap-5 align-items-center total-section\"[id]=\"data?.id\"\n      [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\n      [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n      [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left', 'px-0 py-0': styles?.borderLessImage }\">\n      <div class=\"image-section\" *ngIf=\"content?.listItem?.data?.length === 3\"  [ngClass]=\"{'image-position' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'align-items-unset': styles?.borderLessImage === true}\">\n        <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" [ngClass]=\"{'images-top' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'mt-0 mb-o ms-0 me-0': styles?.borderLessImage===true}\">\n          <img loading=\"lazy\"  [src]=\"listItems[0]?.image.url\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" class=\"img\" [ngClass]=\"{'image-width-top' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'mt-0 mb-o ms-0 me-0 borderLess-image': styles?.borderLessImage===true}\"\n            [simpoImageDirective]=\"styles?.image\" [alt]=\"listItems[0]?.image.altText\"\n            [class]=\"data?.id+(listItems[0]?.image.id || '')\" [simpoObjectPosition]=\"listItems[0]?.image.position\"\n            loading=\"lazy\">\n        </div>\n        <div [ngClass]=\"{'images' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\n          <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between\" [ngClass]=\"{'mt-0 gap-0': styles?.borderLessImage, 'mt-4': !styles?.borderLessImage}\">\n            <img loading=\"lazy\"  *ngFor=\"let item of listItems.slice(1); let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\" [ngClass]=\"{'image-width' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'borderLess-image me-0 borderless-width': styles?.borderLessImage, 'img-1': !styles?.borderLessImage}\"\n              [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\n              [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\"\n              loading=\"lazy\">\n          </div>\n        </div>\n      </div>\n\n      <div class=\"image-section-2\" *ngIf=\"content?.listItem?.data?.length === 2\" [ngClass]=\"{'image-section-2-borderless': styles?.borderLessImage}\">\n        <div [ngClass]=\"{'image-width-2' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\n          <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between\" [ngClass]=\"{'mt-0 gap-0': styles?.borderLessImage, 'mt-4': !styles?.borderLessImage}\">\n            <img loading=\"lazy\"  *ngFor=\"let item of listItems; let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\"\n              [ngClass]=\"{'images-width-2' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'borderless-width borderLess-image': styles?.borderLessImage, 'img-1': !styles?.borderLessImage}\"\n              [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\n              [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\"\n              loading=\"lazy\">\n          </div>\n        </div>\n      </div>\n\n      <div class=\"image-section-3\" *ngIf=\"content?.listItem?.data?.length === 1\" [ngClass]=\"{'image-width-3' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\n        <div>\n          <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between\"  [ngClass]=\"{'mt-0': styles?.borderLessImage, 'mt-4': !styles?.borderLessImage}\">\n            <img loading=\"lazy\"  *ngFor=\"let item of listItems; let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\"\n              [ngClass]=\"{'images-width-3' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'borderLess-height borderLess-image': styles?.borderLessImage, 'img-1': !styles?.borderLessImage}\"\n              [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\n              [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\" class=\"image-1\"\n              loading=\"lazy\">\n          </div>\n        </div>\n      </div>\n\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\" [id]=\"data?.id\" [ngClass]=\"{'col-lg-12' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'px-5 py-4': styles?.borderLessImage}\"\n        [simpoContentAlignment]=\"styles?.contentAlignment\">\n        <div *ngFor=\"let text of content?.inputText\">\n          <div [innerHTML]=\"text.value | sanitizeHtml\" [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n          </div>\n        </div>\n        <div class=\"button-section d-flex mt-4\" *ngIf=\"!data?.action?.hasOwnProperty('display') || data?.action?.display\"   [ngClass]=\"[\n        styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n        styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n        styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n      ]\">\n          <div *ngFor=\"let button of data?.action?.buttons\">\n            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\n              [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>\n", styles: [".total-container{height:auto;position:relative}.float-none{float:none}.image-section{display:flex;flex-direction:column;align-items:center}.image-section .d-flex{gap:10px}.img{width:100%;height:auto}.align-items-unset{align-items:unset}.borderLess-image{border-radius:0!important}.borderless-width{width:50%;height:auto}.borderLess-height{height:54vh}.img-1{width:48%;height:auto}.image-section-2{display:flex;align-items:center}.image-section-2 .d-flex{gap:10px}.image-section-2-borderless,.image-1{width:100%}.image-position{display:flex;flex-direction:row;width:100%}.image-width{width:100%;margin-right:5px}.images{width:33%}.images-top{width:33%;margin-right:15px}.image-width-top{width:100%;height:100%;margin-top:17px;margin-right:15px}.col-lg-12{width:100%!important}.total-section{min-height:calc(50vh + -0px)!important;height:auto}.image-width-2{width:50%}.images-width-2{width:100%}.image-width-3,.images-width-3{width:100%;height:450px}.button-section{gap:10px}@media only screen and (max-width: 475px){.total-section{height:auto;flex-direction:column}.py-4{padding:1rem!important}.body-large{font-size:16px;line-height:21px}.image-position{overflow-y:scroll}.images-top,.images{width:100%}.image-width,.image-width-top{height:450px;width:300px;margin-right:2px}.image-section-2{display:flex;align-items:center;overflow-y:scroll!important;width:100%}.images-width-2{width:310px;height:450px}.image-width-2{width:100%}}.mergeNavbar{margin-top:-175px;padding-top:175px}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar': canMergeNavbar}\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div [attr.class]=\"styles?.borderLessImage ? 'px-0 py-0' : 'px-5 py-4'\"  [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\">\r\n    <div class=\"d-flex justify-content-between gap-5 align-items-center total-section\"[id]=\"data?.id\"\r\n      [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n      [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left', 'px-0 py-0': styles?.borderLessImage }\">\r\n      <div class=\"image-section\" *ngIf=\"content?.listItem?.data?.length === 3\"  [ngClass]=\"{'image-position' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'align-items-unset': styles?.borderLessImage === true}\">\r\n        <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" [ngClass]=\"{'images-top' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'mt-0 mb-o ms-0 me-0': styles?.borderLessImage===true}\">\r\n          <img loading=\"lazy\"  [src]=\"listItems[0]?.image.url\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" class=\"img\" [ngClass]=\"{'image-width-top' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'mt-0 mb-o ms-0 me-0 borderLess-image': styles?.borderLessImage===true}\"\r\n            [simpoImageDirective]=\"styles?.image\" [alt]=\"listItems[0]?.image.altText\"\r\n            [class]=\"data?.id+(listItems[0]?.image.id || '')\" [simpoObjectPosition]=\"listItems[0]?.image.position\"\r\n            loading=\"lazy\">\r\n        </div>\r\n        <div [ngClass]=\"{'images' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n          <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between\" [ngClass]=\"{'mt-0 gap-0': styles?.borderLessImage, 'mt-4': !styles?.borderLessImage}\">\r\n            <img loading=\"lazy\"  *ngFor=\"let item of listItems.slice(1); let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\" [ngClass]=\"{'image-width' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'borderLess-image me-0 borderless-width': styles?.borderLessImage, 'img-1': !styles?.borderLessImage}\"\r\n              [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\r\n              [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\"\r\n              loading=\"lazy\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"image-section-2\" *ngIf=\"content?.listItem?.data?.length === 2\" [ngClass]=\"{'image-section-2-borderless': styles?.borderLessImage}\">\r\n        <div [ngClass]=\"{'image-width-2' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n          <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between\" [ngClass]=\"{'mt-0 gap-0': styles?.borderLessImage, 'mt-4': !styles?.borderLessImage}\">\r\n            <img loading=\"lazy\"  *ngFor=\"let item of listItems; let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\"\r\n              [ngClass]=\"{'images-width-2' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'borderless-width borderLess-image': styles?.borderLessImage, 'img-1': !styles?.borderLessImage}\"\r\n              [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\r\n              [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\"\r\n              loading=\"lazy\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"image-section-3\" *ngIf=\"content?.listItem?.data?.length === 1\" [ngClass]=\"{'image-width-3' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n        <div>\r\n          <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between\"  [ngClass]=\"{'mt-0': styles?.borderLessImage, 'mt-4': !styles?.borderLessImage}\">\r\n            <img loading=\"lazy\"  *ngFor=\"let item of listItems; let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\"\r\n              [ngClass]=\"{'images-width-3' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'borderLess-height borderLess-image': styles?.borderLessImage, 'img-1': !styles?.borderLessImage}\"\r\n              [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\r\n              [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\" class=\"image-1\"\r\n              loading=\"lazy\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\" [id]=\"data?.id\" [ngClass]=\"{'col-lg-12' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom', 'px-5 py-4': styles?.borderLessImage}\"\r\n        [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n        <div *ngFor=\"let text of content?.inputText\">\r\n          <div [innerHTML]=\"text.value | sanitizeHtml\" [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n          </div>\r\n        </div>\r\n        <div class=\"button-section d-flex mt-4\" *ngIf=\"!data?.action?.hasOwnProperty('display') || data?.action?.display\"   [ngClass]=\"[\r\n        styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n        styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n        styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n      ]\">\r\n          <div *ngFor=\"let button of data?.action?.buttons\">\r\n            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n              [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.float-none{float:none}.image-section{display:flex;flex-direction:column;align-items:center}.image-section .d-flex{gap:10px}.img{width:100%;height:auto}.align-items-unset{align-items:unset}.borderLess-image{border-radius:0!important}.borderless-width{width:50%;height:auto}.borderLess-height{height:54vh}.img-1{width:48%;height:auto}.image-section-2{display:flex;align-items:center}.image-section-2 .d-flex{gap:10px}.image-section-2-borderless,.image-1{width:100%}.image-position{display:flex;flex-direction:row;width:100%}.image-width{width:100%;margin-right:5px}.images{width:33%}.images-top{width:33%;margin-right:15px}.image-width-top{width:100%;height:100%;margin-top:17px;margin-right:15px}.col-lg-12{width:100%!important}.total-section{min-height:calc(50vh + -0px)!important;height:auto}.image-width-2{width:50%}.images-width-2{width:100%}.image-width-3,.images-width-3{width:100%;height:450px}.button-section{gap:10px}@media only screen and (max-width: 475px){.total-section{height:auto;flex-direction:column}.py-4{padding:1rem!important}.body-large{font-size:16px;line-height:21px}.image-position{overflow-y:scroll}.images-top,.images{width:100%}.image-width,.image-width-top{height:450px;width:300px;margin-right:2px}.image-section-2{display:flex;align-items:center;overflow-y:scroll!important;width:100%}.images-width-2{width:310px;height:450px}.image-width-2{width:100%}}.mergeNavbar{margin-top:-175px;padding-top:175px}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], edit: [{
@@ -4989,7 +4998,7 @@ class ChooseUsSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ChooseUsSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ChooseUsSectionComponent, isStandalone: true, selector: "simpo-choose-us-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "\n<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\n  <div class=\"col-xxl-8 px-5 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" >\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n    [simpoAnimation]=\"styles?.animation\">\n      <div class=\"d-flex flex-column\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\n        <div class=\"d-flex flex-column gap-15\" [id]=\"data?.id\"  [simpoContentAlignment]=\"styles?.contentAlignment\">\n          <div *ngFor=\"let item of content?.inputText\">\n            <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large heading' : 'body-large description'\">\n              {{item.value}}\n            </div>\n          </div>\n        </div>\n\n        <div class=\"card-section d-flex\" [ngClass]=\"{'position-left': styles?.positionLayout?.value === 'left',\n          'position-right': styles?.positionLayout?.value === 'right', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-end': styles?.layout?.align === 'right'}\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n          <div class=\"cards\" *ngFor=\"let cards of content?.listItem?.data\">\n            <div class=\"individual-cards\" [simpoCorner]=\"styles?.corners\">\n              <div class=\"heading-large lh-2 mb-3\"\n                [innerHtml]=\"cards.inputText[0].value | sanitizeHtml\">\n                <div class=\"body-large\"\n                  [innerHtml]=\"cards.inputText[1].value | sanitizeHtml\">\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"showEditors\" [ngClass]=\"{'hover_effect': edit}\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</div>\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.individual-cards{background-color:#fff;color:#000;border-radius:1rem;display:flex;justify-content:center;align-items:center;text-align:center;height:20vh}.card-section{gap:22px;margin-top:5rem;flex-wrap:wrap;width:100%}.cards{width:16%}.position-left,.position-right{width:50%;flex-wrap:wrap;margin-top:1rem!important}:is(.position-left,.position-right) .cards{width:43%}.gap-15{gap:15px}@media only screen and (max-width: 475px){.card-section{flex-direction:column}.cards{width:92%}.position-left,.position-right{width:100%;margin-top:5rem!important}:is(.position-left,.position-right) .cards{width:92%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "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: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ChooseUsSectionComponent, isStandalone: true, selector: "simpo-choose-us-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "\r\n<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div class=\"col-xxl-8 px-5 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" >\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n    [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"d-flex flex-column\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\r\n        <div class=\"d-flex flex-column gap-15\" [id]=\"data?.id\"  [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n          <div *ngFor=\"let item of content?.inputText\">\r\n            <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large heading' : 'body-large description'\">\r\n              {{item.value}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"card-section d-flex\" [ngClass]=\"{'position-left': styles?.positionLayout?.value === 'left',\r\n          'position-right': styles?.positionLayout?.value === 'right', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-end': styles?.layout?.align === 'right'}\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n          <div class=\"cards\" *ngFor=\"let cards of content?.listItem?.data\">\r\n            <div class=\"individual-cards\" [simpoCorner]=\"styles?.corners\">\r\n              <div class=\"heading-large lh-2 mb-3\"\r\n                [innerHtml]=\"cards.inputText[0].value | sanitizeHtml\">\r\n                <div class=\"body-large\"\r\n                  [innerHtml]=\"cards.inputText[1].value | sanitizeHtml\">\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"showEditors\" [ngClass]=\"{'hover_effect': edit}\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.individual-cards{background-color:#fff;color:#000;border-radius:1rem;display:flex;justify-content:center;align-items:center;text-align:center;height:20vh}.card-section{gap:22px;margin-top:5rem;flex-wrap:wrap;width:100%}.cards{width:16%}.position-left,.position-right{width:50%;flex-wrap:wrap;margin-top:1rem!important}:is(.position-left,.position-right) .cards{width:43%}.gap-15{gap:15px}@media only screen and (max-width: 475px){.card-section{flex-direction:column}.cards{width:92%}.position-left,.position-right{width:100%;margin-top:5rem!important}:is(.position-left,.position-right) .cards{width:92%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "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: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ChooseUsSectionComponent, decorators: [{
             type: Component,
@@ -5007,7 +5016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         CornerDirective,
                         simpoConetenAlignmentDirective,
                         SanitizeHtmlPipe
-                    ], template: "\n<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\n  <div class=\"col-xxl-8 px-5 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" >\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n    [simpoAnimation]=\"styles?.animation\">\n      <div class=\"d-flex flex-column\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\n        <div class=\"d-flex flex-column gap-15\" [id]=\"data?.id\"  [simpoContentAlignment]=\"styles?.contentAlignment\">\n          <div *ngFor=\"let item of content?.inputText\">\n            <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large heading' : 'body-large description'\">\n              {{item.value}}\n            </div>\n          </div>\n        </div>\n\n        <div class=\"card-section d-flex\" [ngClass]=\"{'position-left': styles?.positionLayout?.value === 'left',\n          'position-right': styles?.positionLayout?.value === 'right', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-end': styles?.layout?.align === 'right'}\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n          <div class=\"cards\" *ngFor=\"let cards of content?.listItem?.data\">\n            <div class=\"individual-cards\" [simpoCorner]=\"styles?.corners\">\n              <div class=\"heading-large lh-2 mb-3\"\n                [innerHtml]=\"cards.inputText[0].value | sanitizeHtml\">\n                <div class=\"body-large\"\n                  [innerHtml]=\"cards.inputText[1].value | sanitizeHtml\">\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"showEditors\" [ngClass]=\"{'hover_effect': edit}\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</div>\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.individual-cards{background-color:#fff;color:#000;border-radius:1rem;display:flex;justify-content:center;align-items:center;text-align:center;height:20vh}.card-section{gap:22px;margin-top:5rem;flex-wrap:wrap;width:100%}.cards{width:16%}.position-left,.position-right{width:50%;flex-wrap:wrap;margin-top:1rem!important}:is(.position-left,.position-right) .cards{width:43%}.gap-15{gap:15px}@media only screen and (max-width: 475px){.card-section{flex-direction:column}.cards{width:92%}.position-left,.position-right{width:100%;margin-top:5rem!important}:is(.position-left,.position-right) .cards{width:92%}}\n"] }]
+                    ], template: "\r\n<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div class=\"col-xxl-8 px-5 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" >\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n    [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"d-flex flex-column\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\r\n        <div class=\"d-flex flex-column gap-15\" [id]=\"data?.id\"  [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n          <div *ngFor=\"let item of content?.inputText\">\r\n            <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large heading' : 'body-large description'\">\r\n              {{item.value}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"card-section d-flex\" [ngClass]=\"{'position-left': styles?.positionLayout?.value === 'left',\r\n          'position-right': styles?.positionLayout?.value === 'right', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-end': styles?.layout?.align === 'right'}\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n          <div class=\"cards\" *ngFor=\"let cards of content?.listItem?.data\">\r\n            <div class=\"individual-cards\" [simpoCorner]=\"styles?.corners\">\r\n              <div class=\"heading-large lh-2 mb-3\"\r\n                [innerHtml]=\"cards.inputText[0].value | sanitizeHtml\">\r\n                <div class=\"body-large\"\r\n                  [innerHtml]=\"cards.inputText[1].value | sanitizeHtml\">\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"showEditors\" [ngClass]=\"{'hover_effect': edit}\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.individual-cards{background-color:#fff;color:#000;border-radius:1rem;display:flex;justify-content:center;align-items:center;text-align:center;height:20vh}.card-section{gap:22px;margin-top:5rem;flex-wrap:wrap;width:100%}.cards{width:16%}.position-left,.position-right{width:50%;flex-wrap:wrap;margin-top:1rem!important}:is(.position-left,.position-right) .cards{width:43%}.gap-15{gap:15px}@media only screen and (max-width: 475px){.card-section{flex-direction:column}.cards{width:92%}.position-left,.position-right{width:100%;margin-top:5rem!important}:is(.position-left,.position-right) .cards{width:92%}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -5048,7 +5057,7 @@ class PricingSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PricingSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PricingSectionComponent, isStandalone: true, selector: "simpo-pricing-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\n        </div>\n\n        <div class=\"pricing-options d-flex\">\n          <div class=\"individual-options\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\n            [ngClass]=\"{'highlighted-option': options.highlight.highlighted === true,\n              'individual-options-3': content?.listItem?.data?.length === 3,\n              'individual-options-2': content?.listItem?.data?.length === 2,\n              'individual-options-1': content?.listItem?.data?.length === 1\n            }\">\n            <img loading=\"lazy\"  class=\"image\" *ngIf=\"content?.display?.showImage === true\"\n            [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\n            [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" width=\"92%\" loading=\"lazy\">\n            <div class=\"highlight-label\" *ngIf=\"options.highlight.highlighted === true\" [ngStyle]=\"{'background-color': getTextColor()}\" [simpoColor]=\"getTextColor()\">\n              {{options.highlight.label}}\n            </div>\n            <div class=\"heading-small\">{{options.inputText[0].value}}</div>\n            <div class=\"heading-large price\">{{options.inputText[2].value}}</div>\n            <div class=\"body-desc\">{{options.inputText[3].value}}</div>\n\n            <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\n              <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{options?.button?.label}}</button>\n            </div>\n            <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">{{options.inputText[1].value}}</div>\n            <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\n              <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\n                <mat-icon>check</mat-icon> {{content.content}}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;height:auto;justify-content:center;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;border-radius:25px;margin-top:20px;margin-right:auto;margin-left:17px;font-size:15px}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PricingSectionComponent, isStandalone: true, selector: "simpo-pricing-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n        </div>\r\n\r\n        <div class=\"pricing-options d-flex\">\r\n          <div class=\"individual-options\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\r\n            [ngClass]=\"{'highlighted-option': options.highlight.highlighted === true,\r\n              'individual-options-3': content?.listItem?.data?.length === 3,\r\n              'individual-options-2': content?.listItem?.data?.length === 2,\r\n              'individual-options-1': content?.listItem?.data?.length === 1\r\n            }\">\r\n            <img loading=\"lazy\"  class=\"image\" *ngIf=\"content?.display?.showImage === true\"\r\n            [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n            [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" width=\"92%\" loading=\"lazy\">\r\n            <div class=\"highlight-label\" *ngIf=\"options.highlight.highlighted === true\" [ngStyle]=\"{'background-color': getTextColor()}\" [simpoColor]=\"getTextColor()\">\r\n              {{options.highlight.label}}\r\n            </div>\r\n            <div class=\"heading-small\">{{options.inputText[0].value}}</div>\r\n            <div class=\"heading-large price\">{{options.inputText[2].value}}</div>\r\n            <div class=\"body-desc\">{{options.inputText[3].value}}</div>\r\n\r\n            <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\r\n              <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{options?.button?.label}}</button>\r\n            </div>\r\n            <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">{{options.inputText[1].value}}</div>\r\n            <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n              <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n                <mat-icon>check</mat-icon> {{content.content}}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;height:auto;justify-content:center;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;border-radius:25px;margin-top:20px;margin-right:auto;margin-left:17px;font-size:15px}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PricingSectionComponent, decorators: [{
             type: Component,
@@ -5070,7 +5079,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         MatIcon, ColorDirective,
                         ContentTitleDirective,
                         SanitizeHtmlPipe
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\n        </div>\n\n        <div class=\"pricing-options d-flex\">\n          <div class=\"individual-options\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\n            [ngClass]=\"{'highlighted-option': options.highlight.highlighted === true,\n              'individual-options-3': content?.listItem?.data?.length === 3,\n              'individual-options-2': content?.listItem?.data?.length === 2,\n              'individual-options-1': content?.listItem?.data?.length === 1\n            }\">\n            <img loading=\"lazy\"  class=\"image\" *ngIf=\"content?.display?.showImage === true\"\n            [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\n            [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" width=\"92%\" loading=\"lazy\">\n            <div class=\"highlight-label\" *ngIf=\"options.highlight.highlighted === true\" [ngStyle]=\"{'background-color': getTextColor()}\" [simpoColor]=\"getTextColor()\">\n              {{options.highlight.label}}\n            </div>\n            <div class=\"heading-small\">{{options.inputText[0].value}}</div>\n            <div class=\"heading-large price\">{{options.inputText[2].value}}</div>\n            <div class=\"body-desc\">{{options.inputText[3].value}}</div>\n\n            <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\n              <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{options?.button?.label}}</button>\n            </div>\n            <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">{{options.inputText[1].value}}</div>\n            <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\n              <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\n                <mat-icon>check</mat-icon> {{content.content}}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;height:auto;justify-content:center;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;border-radius:25px;margin-top:20px;margin-right:auto;margin-left:17px;font-size:15px}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n        </div>\r\n\r\n        <div class=\"pricing-options d-flex\">\r\n          <div class=\"individual-options\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\r\n            [ngClass]=\"{'highlighted-option': options.highlight.highlighted === true,\r\n              'individual-options-3': content?.listItem?.data?.length === 3,\r\n              'individual-options-2': content?.listItem?.data?.length === 2,\r\n              'individual-options-1': content?.listItem?.data?.length === 1\r\n            }\">\r\n            <img loading=\"lazy\"  class=\"image\" *ngIf=\"content?.display?.showImage === true\"\r\n            [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n            [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" width=\"92%\" loading=\"lazy\">\r\n            <div class=\"highlight-label\" *ngIf=\"options.highlight.highlighted === true\" [ngStyle]=\"{'background-color': getTextColor()}\" [simpoColor]=\"getTextColor()\">\r\n              {{options.highlight.label}}\r\n            </div>\r\n            <div class=\"heading-small\">{{options.inputText[0].value}}</div>\r\n            <div class=\"heading-large price\">{{options.inputText[2].value}}</div>\r\n            <div class=\"body-desc\">{{options.inputText[3].value}}</div>\r\n\r\n            <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\r\n              <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{options?.button?.label}}</button>\r\n            </div>\r\n            <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">{{options.inputText[1].value}}</div>\r\n            <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n              <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n                <mat-icon>check</mat-icon> {{content.content}}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;height:auto;justify-content:center;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;border-radius:25px;margin-top:20px;margin-right:auto;margin-left:17px;font-size:15px}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -5200,7 +5209,7 @@ class LocationSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: LocationSectionComponent, deps: [{ token: i0.NgZone }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: LocationSectionComponent, isStandalone: true, selector: "simpo-location-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\n    <div class=\"row g-5\" [id]=\"data?.id\"\n      [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\n      <div class=\"col-10 col-sm-8 col-lg-6 display-flex justify-center\">\n        <div class=\"map\" [simpoCorner]=\"styles?.corners\" id=\"map\"></div>\n      </div>\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\">\n        <div *ngFor=\"let item of content?.inputText\">\n          <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\n          <div class=\"body-large\" [innerHTML]=\"content?.address?.name\"></div>\n        </div>\n        <div *ngFor=\"let item of content?.listItem?.data\">\n          <div *ngFor=\"let input of item?.inputText;let i = index\">\n            <div [innerHTML]=\"input.value | sanitizeHtml\" [ngClass]=\"i == 0  ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".map{width:90%;height:400px}.display-flex{display:flex}.bg-map{width:100%;height:100%}html,body,.map-container{height:100%;margin:0;padding:0}.justify-center{justify-content:center}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.background-map{display:block!important;position:relative;padding-top:0!important;padding-bottom:0!important}.data{position:absolute;top:10%;left:3%;padding:20px}agm-map{height:calc(100vh + -0px)}@media screen and (max-width: 475px){.map{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: LocationSectionComponent, isStandalone: true, selector: "simpo-location-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\"\r\n      [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\r\n      <div class=\"col-10 col-sm-8 col-lg-6 display-flex justify-center\">\r\n        <div class=\"map\" [simpoCorner]=\"styles?.corners\" id=\"map\"></div>\r\n      </div>\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n          <div class=\"body-large\" [innerHTML]=\"content?.address?.name\"></div>\r\n        </div>\r\n        <div *ngFor=\"let item of content?.listItem?.data\">\r\n          <div *ngFor=\"let input of item?.inputText;let i = index\">\r\n            <div [innerHTML]=\"input.value | sanitizeHtml\" [ngClass]=\"i == 0  ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".map{width:90%;height:400px}.display-flex{display:flex}.bg-map{width:100%;height:100%}html,body,.map-container{height:100%;margin:0;padding:0}.justify-center{justify-content:center}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.background-map{display:block!important;position:relative;padding-top:0!important;padding-bottom:0!important}.data{position:absolute;top:10%;left:3%;padding:20px}agm-map{height:calc(100vh + -0px)}@media screen and (max-width: 475px){.map{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
 }
@@ -5221,7 +5230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         OverlayDirective,
                         PositionLayoutDirectiveDirective,
                         SanitizeHtmlPipe
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\n    <div class=\"row g-5\" [id]=\"data?.id\"\n      [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\n      <div class=\"col-10 col-sm-8 col-lg-6 display-flex justify-center\">\n        <div class=\"map\" [simpoCorner]=\"styles?.corners\" id=\"map\"></div>\n      </div>\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\">\n        <div *ngFor=\"let item of content?.inputText\">\n          <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\n          <div class=\"body-large\" [innerHTML]=\"content?.address?.name\"></div>\n        </div>\n        <div *ngFor=\"let item of content?.listItem?.data\">\n          <div *ngFor=\"let input of item?.inputText;let i = index\">\n            <div [innerHTML]=\"input.value | sanitizeHtml\" [ngClass]=\"i == 0  ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".map{width:90%;height:400px}.display-flex{display:flex}.bg-map{width:100%;height:100%}html,body,.map-container{height:100%;margin:0;padding:0}.justify-center{justify-content:center}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.background-map{display:block!important;position:relative;padding-top:0!important;padding-bottom:0!important}.data{position:absolute;top:10%;left:3%;padding:20px}agm-map{height:calc(100vh + -0px)}@media screen and (max-width: 475px){.map{width:100%}}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\"\r\n      [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\r\n      <div class=\"col-10 col-sm-8 col-lg-6 display-flex justify-center\">\r\n        <div class=\"map\" [simpoCorner]=\"styles?.corners\" id=\"map\"></div>\r\n      </div>\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n          <div class=\"body-large\" [innerHTML]=\"content?.address?.name\"></div>\r\n        </div>\r\n        <div *ngFor=\"let item of content?.listItem?.data\">\r\n          <div *ngFor=\"let input of item?.inputText;let i = index\">\r\n            <div [innerHTML]=\"input.value | sanitizeHtml\" [ngClass]=\"i == 0  ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".map{width:90%;height:400px}.display-flex{display:flex}.bg-map{width:100%;height:100%}html,body,.map-container{height:100%;margin:0;padding:0}.justify-center{justify-content:center}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.background-map{display:block!important;position:relative;padding-top:0!important;padding-bottom:0!important}.data{position:absolute;top:10%;left:3%;padding:20px}agm-map{height:calc(100vh + -0px)}@media screen and (max-width: 475px){.map{width:100%}}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -5248,7 +5257,7 @@ class HeaderTextComponent extends BaseSection {
         // this.styles.layout.bannerImageDisplay = this.content.image.showImage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: HeaderTextComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: HeaderTextComponent, isStandalone: true, selector: "simpo-header-text", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n    class=\"total-container\">\n    <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n        [simpoBorder]=\"styles?.border\">\n        <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n            [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n            [ngClass]=\"{ 'align-items-center': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\n            <div class=\"col px-5\" [id]=\"data?.id\">\n                <div *ngFor=\"let item of content?.inputText\">\n                    <div *ngIf=\"item.label === 'Tagline' || item.label === 'Heading'\" [innerHTML]=\"item.value | sanitizeHtml\"\n                        [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\n                </div>\n            </div>\n            <div class=\"col px-5\" [id]=\"data?.id\">\n                <div *ngFor=\"let item of content?.inputText\">\n                    <div *ngIf=\"item.label === 'Subtext'\" [innerHTML]=\"item.value | sanitizeHtml\" class=\"body-large\">\n                    </div>\n                </div>\n\n\n                <div *ngIf=\"data?.action && data?.action?.display\" class=\"d-flex gap-2 d-md-flex mt-15\" [ngClass]=\"[\n                styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n                styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n                styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n              ]\">\n                    <div *ngFor=\"let button of data?.action?.buttons\">\n                        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n                            [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\n                            [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n        </div>\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n        </div>\n    </div>\n</div>\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}.gap-15{gap:15px}.btn-primary{border:none}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.flex-column{flex-direction:column!important}.d-flex{justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: HeaderTextComponent, isStandalone: true, selector: "simpo-header-text", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\">\r\n    <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n        [simpoBorder]=\"styles?.border\">\r\n        <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n            [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n            [ngClass]=\"{ 'align-items-center': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n            <div class=\"col px-5\" [id]=\"data?.id\">\r\n                <div *ngFor=\"let item of content?.inputText\">\r\n                    <div *ngIf=\"item.label === 'Tagline' || item.label === 'Heading'\" [innerHTML]=\"item.value | sanitizeHtml\"\r\n                        [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"col px-5\" [id]=\"data?.id\">\r\n                <div *ngFor=\"let item of content?.inputText\">\r\n                    <div *ngIf=\"item.label === 'Subtext'\" [innerHTML]=\"item.value | sanitizeHtml\" class=\"body-large\">\r\n                    </div>\r\n                </div>\r\n\r\n\r\n                <div *ngIf=\"data?.action && data?.action?.display\" class=\"d-flex gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n                styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n                styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n                styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n              ]\">\r\n                    <div *ngFor=\"let button of data?.action?.buttons\">\r\n                        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                            [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n                            [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}.gap-15{gap:15px}.btn-primary{border:none}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.flex-column{flex-direction:column!important}.d-flex{justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: HeaderTextComponent, decorators: [{
             type: Component,
@@ -5276,7 +5285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         TextBackgroundDirectiveDirective,
                         ObjectPositionDirective,
                         SanitizeHtmlPipe
-                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n    class=\"total-container\">\n    <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n        [simpoBorder]=\"styles?.border\">\n        <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n            [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n            [ngClass]=\"{ 'align-items-center': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\n            <div class=\"col px-5\" [id]=\"data?.id\">\n                <div *ngFor=\"let item of content?.inputText\">\n                    <div *ngIf=\"item.label === 'Tagline' || item.label === 'Heading'\" [innerHTML]=\"item.value | sanitizeHtml\"\n                        [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\n                </div>\n            </div>\n            <div class=\"col px-5\" [id]=\"data?.id\">\n                <div *ngFor=\"let item of content?.inputText\">\n                    <div *ngIf=\"item.label === 'Subtext'\" [innerHTML]=\"item.value | sanitizeHtml\" class=\"body-large\">\n                    </div>\n                </div>\n\n\n                <div *ngIf=\"data?.action && data?.action?.display\" class=\"d-flex gap-2 d-md-flex mt-15\" [ngClass]=\"[\n                styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n                styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n                styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n              ]\">\n                    <div *ngFor=\"let button of data?.action?.buttons\">\n                        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n                            [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\n                            [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n        </div>\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n        </div>\n    </div>\n</div>\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}.gap-15{gap:15px}.btn-primary{border:none}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.flex-column{flex-direction:column!important}.d-flex{justify-content:center}}\n"] }]
+                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\">\r\n    <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n        [simpoBorder]=\"styles?.border\">\r\n        <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n            [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n            [ngClass]=\"{ 'align-items-center': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n            <div class=\"col px-5\" [id]=\"data?.id\">\r\n                <div *ngFor=\"let item of content?.inputText\">\r\n                    <div *ngIf=\"item.label === 'Tagline' || item.label === 'Heading'\" [innerHTML]=\"item.value | sanitizeHtml\"\r\n                        [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"col px-5\" [id]=\"data?.id\">\r\n                <div *ngFor=\"let item of content?.inputText\">\r\n                    <div *ngIf=\"item.label === 'Subtext'\" [innerHTML]=\"item.value | sanitizeHtml\" class=\"body-large\">\r\n                    </div>\r\n                </div>\r\n\r\n\r\n                <div *ngIf=\"data?.action && data?.action?.display\" class=\"d-flex gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n                styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n                styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n                styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n              ]\">\r\n                    <div *ngFor=\"let button of data?.action?.buttons\">\r\n                        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                            [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n                            [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}.gap-15{gap:15px}.btn-primary{border:none}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.flex-column{flex-direction:column!important}.d-flex{justify-content:center}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -5321,7 +5330,7 @@ class RecentBlogPostSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RecentBlogPostSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: RecentBlogPostSectionComponent, isStandalone: true, selector: "simpo-recent-blog-post-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", responseData: "responseData" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" (click)=\"editSection()\">\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [ngStyle]=\"{'width' : (responseData.length || 0) == 0 ? '100%' : ''}\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\n        </div>\n        <div class=\"row\">\n          <div (click)=\"getBlogById(content.id)\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n            class=\"individual-cards\"\n            *ngFor=\"let content of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\">\n            <div class=\"image\">\n              <img loading=\"lazy\"  [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\n                [simpoCorner]=\"style?.corners\" class=\"d-block mx-lg-auto img-fluid h-100\" alt=\"\" *ngIf=\"content.img\"\n                loading=\"lazy\">\n              <img loading=\"lazy\"  [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\n                src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\n                alt=\"\" *ngIf=\"!content.img\"\n                loading=\"lazy\">\n            </div>\n            <div class=\"heading-medium title mt-4\">\n              {{content.postTitle}}\n            </div>\n            <div class=\"body-large adate mt-3\">\n              {{content.createdTimeStamp | date:'EEEE, MMM, d, y'}}\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"responseData?.length == 0\" class=\"row\">\n          <div class=\"no-blog-post\">\n            <mat-icon>info</mat-icon>This section won't be visible because you have no published blog posts.\n          </div>\n          <div class=\"skeleton\"  [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\n            <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n              width: '100%',\n              height: '40vh',\n              'border-radius': '10px',\n              'position': 'relative',\n              'right': '5px'\n            }\">\n            </ngx-skeleton-loader>\n            <div class=\"second-section-wrapper\">\n              <div class=\"wrapper\">\n                <ngx-skeleton-loader [theme]=\"{\n                width: '100%',\n                'border-radius': '0',\n                height: '15px',\n                'margin-bottom': '10px'\n              }\"></ngx-skeleton-loader>\n              </div>\n              <div class=\"wrapper\">\n                <ngx-skeleton-loader [theme]=\"{\n                  width: '90%',\n                  'border-radius': '0',\n                  height: '15px',\n                  'margin-bottom': '10px',\n                  'display' : 'flex'\n                }\"></ngx-skeleton-loader>\n              </div>\n              <div class=\"wrapper\">\n                <ngx-skeleton-loader [theme]=\"{\n                  width: '60%',\n                  'border-radius': '0',\n                  height: '15px',\n                  'margin-bottom': '10px',\n                  'display' : 'flex'\n                }\"></ngx-skeleton-loader>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"button-section mt-3rem\">\n          <button class=\"button\" (click)=\"openBlogList()\" simpoButtonDirective [id]=\"data?.id+(buttonData?.id || '')\"\n            [buttonStyle]=\"buttonData?.styles\"\n            [color]=\"data?.styles?.background?.accentColor\">{{buttonData?.content?.label}}</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.individual-cards{padding-bottom:30px}.individual-cards img{width:100%;height:37vh}.title{font-weight:500}.mt-3rem{margin-top:3rem}@media only screen and (max-width: 475px){.cards{flex-direction:column}.individual-cards{width:100%}.title{font-size:26px}}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border-radius:10px}.second-section-wrapper{width:100%;height:auto;flex:1}.wrapper{width:100%;flex:1}.no-blog-post{color:#5185ad;text-align:left;display:flex;align-items:center;gap:15px;height:55px;background:#f6fbff;font-size:16px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { 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: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: RecentBlogPostSectionComponent, isStandalone: true, selector: "simpo-recent-blog-post-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", responseData: "responseData" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [ngStyle]=\"{'width' : (responseData.length || 0) == 0 ? '100%' : ''}\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n        </div>\r\n        <div class=\"row\">\r\n          <div (click)=\"getBlogById(content.id)\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n            class=\"individual-cards\"\r\n            *ngFor=\"let content of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\">\r\n            <div class=\"image\">\r\n              <img loading=\"lazy\"  [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n                [simpoCorner]=\"style?.corners\" class=\"d-block mx-lg-auto img-fluid h-100\" alt=\"\" *ngIf=\"content.img\"\r\n                loading=\"lazy\">\r\n              <img loading=\"lazy\"  [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n                src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n                alt=\"\" *ngIf=\"!content.img\"\r\n                loading=\"lazy\">\r\n            </div>\r\n            <div class=\"heading-medium title mt-4\">\r\n              {{content.postTitle}}\r\n            </div>\r\n            <div class=\"body-large adate mt-3\">\r\n              {{content.createdTimeStamp | date:'EEEE, MMM, d, y'}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"responseData?.length == 0\" class=\"row\">\r\n          <div class=\"no-blog-post\">\r\n            <mat-icon>info</mat-icon>This section won't be visible because you have no published blog posts.\r\n          </div>\r\n          <div class=\"skeleton\"  [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n            <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n              width: '100%',\r\n              height: '40vh',\r\n              'border-radius': '10px',\r\n              'position': 'relative',\r\n              'right': '5px'\r\n            }\">\r\n            </ngx-skeleton-loader>\r\n            <div class=\"second-section-wrapper\">\r\n              <div class=\"wrapper\">\r\n                <ngx-skeleton-loader [theme]=\"{\r\n                width: '100%',\r\n                'border-radius': '0',\r\n                height: '15px',\r\n                'margin-bottom': '10px'\r\n              }\"></ngx-skeleton-loader>\r\n              </div>\r\n              <div class=\"wrapper\">\r\n                <ngx-skeleton-loader [theme]=\"{\r\n                  width: '90%',\r\n                  'border-radius': '0',\r\n                  height: '15px',\r\n                  'margin-bottom': '10px',\r\n                  'display' : 'flex'\r\n                }\"></ngx-skeleton-loader>\r\n              </div>\r\n              <div class=\"wrapper\">\r\n                <ngx-skeleton-loader [theme]=\"{\r\n                  width: '60%',\r\n                  'border-radius': '0',\r\n                  height: '15px',\r\n                  'margin-bottom': '10px',\r\n                  'display' : 'flex'\r\n                }\"></ngx-skeleton-loader>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"button-section mt-3rem\">\r\n          <button class=\"button\" (click)=\"openBlogList()\" simpoButtonDirective [id]=\"data?.id+(buttonData?.id || '')\"\r\n            [buttonStyle]=\"buttonData?.styles\"\r\n            [color]=\"data?.styles?.background?.accentColor\">{{buttonData?.content?.label}}</button>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.individual-cards{padding-bottom:30px}.individual-cards img{width:100%;height:37vh}.title{font-weight:500}.mt-3rem{margin-top:3rem}@media only screen and (max-width: 475px){.cards{flex-direction:column}.individual-cards{width:100%}.title{font-size:26px}}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border-radius:10px}.second-section-wrapper{width:100%;height:auto;flex:1}.wrapper{width:100%;flex:1}.no-blog-post{color:#5185ad;text-align:left;display:flex;align-items:center;gap:15px;height:55px;background:#f6fbff;font-size:16px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { 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: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RecentBlogPostSectionComponent, decorators: [{
             type: Component,
@@ -5345,7 +5354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         NgxSkeletonLoaderModule,
                         MatIcon,
                         SanitizeHtmlPipe
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" (click)=\"editSection()\">\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [ngStyle]=\"{'width' : (responseData.length || 0) == 0 ? '100%' : ''}\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\n        </div>\n        <div class=\"row\">\n          <div (click)=\"getBlogById(content.id)\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n            class=\"individual-cards\"\n            *ngFor=\"let content of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\">\n            <div class=\"image\">\n              <img loading=\"lazy\"  [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\n                [simpoCorner]=\"style?.corners\" class=\"d-block mx-lg-auto img-fluid h-100\" alt=\"\" *ngIf=\"content.img\"\n                loading=\"lazy\">\n              <img loading=\"lazy\"  [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\n                src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\n                alt=\"\" *ngIf=\"!content.img\"\n                loading=\"lazy\">\n            </div>\n            <div class=\"heading-medium title mt-4\">\n              {{content.postTitle}}\n            </div>\n            <div class=\"body-large adate mt-3\">\n              {{content.createdTimeStamp | date:'EEEE, MMM, d, y'}}\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"responseData?.length == 0\" class=\"row\">\n          <div class=\"no-blog-post\">\n            <mat-icon>info</mat-icon>This section won't be visible because you have no published blog posts.\n          </div>\n          <div class=\"skeleton\"  [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\n            <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n              width: '100%',\n              height: '40vh',\n              'border-radius': '10px',\n              'position': 'relative',\n              'right': '5px'\n            }\">\n            </ngx-skeleton-loader>\n            <div class=\"second-section-wrapper\">\n              <div class=\"wrapper\">\n                <ngx-skeleton-loader [theme]=\"{\n                width: '100%',\n                'border-radius': '0',\n                height: '15px',\n                'margin-bottom': '10px'\n              }\"></ngx-skeleton-loader>\n              </div>\n              <div class=\"wrapper\">\n                <ngx-skeleton-loader [theme]=\"{\n                  width: '90%',\n                  'border-radius': '0',\n                  height: '15px',\n                  'margin-bottom': '10px',\n                  'display' : 'flex'\n                }\"></ngx-skeleton-loader>\n              </div>\n              <div class=\"wrapper\">\n                <ngx-skeleton-loader [theme]=\"{\n                  width: '60%',\n                  'border-radius': '0',\n                  height: '15px',\n                  'margin-bottom': '10px',\n                  'display' : 'flex'\n                }\"></ngx-skeleton-loader>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"button-section mt-3rem\">\n          <button class=\"button\" (click)=\"openBlogList()\" simpoButtonDirective [id]=\"data?.id+(buttonData?.id || '')\"\n            [buttonStyle]=\"buttonData?.styles\"\n            [color]=\"data?.styles?.background?.accentColor\">{{buttonData?.content?.label}}</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.individual-cards{padding-bottom:30px}.individual-cards img{width:100%;height:37vh}.title{font-weight:500}.mt-3rem{margin-top:3rem}@media only screen and (max-width: 475px){.cards{flex-direction:column}.individual-cards{width:100%}.title{font-size:26px}}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border-radius:10px}.second-section-wrapper{width:100%;height:auto;flex:1}.wrapper{width:100%;flex:1}.no-blog-post{color:#5185ad;text-align:left;display:flex;align-items:center;gap:15px;height:55px;background:#f6fbff;font-size:16px;font-weight:600}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [ngStyle]=\"{'width' : (responseData.length || 0) == 0 ? '100%' : ''}\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n        </div>\r\n        <div class=\"row\">\r\n          <div (click)=\"getBlogById(content.id)\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n            class=\"individual-cards\"\r\n            *ngFor=\"let content of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\">\r\n            <div class=\"image\">\r\n              <img loading=\"lazy\"  [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n                [simpoCorner]=\"style?.corners\" class=\"d-block mx-lg-auto img-fluid h-100\" alt=\"\" *ngIf=\"content.img\"\r\n                loading=\"lazy\">\r\n              <img loading=\"lazy\"  [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n                src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n                alt=\"\" *ngIf=\"!content.img\"\r\n                loading=\"lazy\">\r\n            </div>\r\n            <div class=\"heading-medium title mt-4\">\r\n              {{content.postTitle}}\r\n            </div>\r\n            <div class=\"body-large adate mt-3\">\r\n              {{content.createdTimeStamp | date:'EEEE, MMM, d, y'}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"responseData?.length == 0\" class=\"row\">\r\n          <div class=\"no-blog-post\">\r\n            <mat-icon>info</mat-icon>This section won't be visible because you have no published blog posts.\r\n          </div>\r\n          <div class=\"skeleton\"  [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n            <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n              width: '100%',\r\n              height: '40vh',\r\n              'border-radius': '10px',\r\n              'position': 'relative',\r\n              'right': '5px'\r\n            }\">\r\n            </ngx-skeleton-loader>\r\n            <div class=\"second-section-wrapper\">\r\n              <div class=\"wrapper\">\r\n                <ngx-skeleton-loader [theme]=\"{\r\n                width: '100%',\r\n                'border-radius': '0',\r\n                height: '15px',\r\n                'margin-bottom': '10px'\r\n              }\"></ngx-skeleton-loader>\r\n              </div>\r\n              <div class=\"wrapper\">\r\n                <ngx-skeleton-loader [theme]=\"{\r\n                  width: '90%',\r\n                  'border-radius': '0',\r\n                  height: '15px',\r\n                  'margin-bottom': '10px',\r\n                  'display' : 'flex'\r\n                }\"></ngx-skeleton-loader>\r\n              </div>\r\n              <div class=\"wrapper\">\r\n                <ngx-skeleton-loader [theme]=\"{\r\n                  width: '60%',\r\n                  'border-radius': '0',\r\n                  height: '15px',\r\n                  'margin-bottom': '10px',\r\n                  'display' : 'flex'\r\n                }\"></ngx-skeleton-loader>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"button-section mt-3rem\">\r\n          <button class=\"button\" (click)=\"openBlogList()\" simpoButtonDirective [id]=\"data?.id+(buttonData?.id || '')\"\r\n            [buttonStyle]=\"buttonData?.styles\"\r\n            [color]=\"data?.styles?.background?.accentColor\">{{buttonData?.content?.label}}</button>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.individual-cards{padding-bottom:30px}.individual-cards img{width:100%;height:37vh}.title{font-weight:500}.mt-3rem{margin-top:3rem}@media only screen and (max-width: 475px){.cards{flex-direction:column}.individual-cards{width:100%}.title{font-size:26px}}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border-radius:10px}.second-section-wrapper{width:100%;height:auto;flex:1}.wrapper{width:100%;flex:1}.no-blog-post{color:#5185ad;text-align:left;display:flex;align-items:center;gap:15px;height:55px;background:#f6fbff;font-size:16px;font-weight:600}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -5384,7 +5393,7 @@ class BlogListComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BlogListComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BlogListComponent, isStandalone: true, selector: "simpo-blog-list", inputs: { responseData: "responseData", index: "index", edit: "edit", data: "data" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\n  (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" (click)=\"editSection()\">\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\n    <div class=\"container-fluid\">\n      <div class=\"row\">\n        <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\" (click)=\"getBlogById(content.id)\">\n          <div class=\"cards\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\n            <img loading=\"lazy\"  [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\n              alt=\"\" *ngIf=\"content.img\"\n              loading=\"lazy\">\n            <img loading=\"lazy\"  [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\n            src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\" alt=\"\" *ngIf=\"!content.img\"\n            loading=\"lazy\">\n            <div class=\"p-30\">\n              <div class=\"heading-medium title mt-4\" *ngIf=\"blogContent?.display?.showHeading\">\n                {{content.postTitle}}\n              </div>\n              <ng-container>\n                <div class=\"body-large mt-4\" *ngIf=\"blogContent?.display?.showContent\">\n                  {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\n                  content.postSummary }}\n                </div>\n              </ng-container>\n\n              <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\n                <div>\n                  <mat-icon>person</mat-icon> &nbsp;&nbsp;<span class=\"body-large\">{{content?.author?.name | titlecase}}</span>\n                </div>\n                <div class=\"calendar_today\">\n                  <mat-icon>calendar_today</mat-icon> &nbsp;&nbsp; <span class=\"body-large\">{{content.createdTimeStamp |\n                    date:'EEEE, MMM, d, y'}}</span>\n                </div>\n              </div>\n              <div class=\"button heading-large\" (click)=\"getBlogById(content.id)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\n                Read More <mat-icon>arrow_right_alt</mat-icon>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n</section>\n<ng-template #elseBlock>\n  <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\n</ng-template>\n", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:30px 15px 0}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:15px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:interReg;font-weight:500}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BlogListComponent, isStandalone: true, selector: "simpo-blog-list", inputs: { responseData: "responseData", index: "index", edit: "edit", data: "data" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" (click)=\"editSection()\">\r\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"row\">\r\n        <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\" (click)=\"getBlogById(content.id)\">\r\n          <div class=\"cards\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n            <img loading=\"lazy\"  [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n              alt=\"\" *ngIf=\"content.img\"\r\n              loading=\"lazy\">\r\n            <img loading=\"lazy\"  [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n            src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\" alt=\"\" *ngIf=\"!content.img\"\r\n            loading=\"lazy\">\r\n            <div class=\"p-30\">\r\n              <div class=\"heading-medium title mt-4\" *ngIf=\"blogContent?.display?.showHeading\">\r\n                {{content.postTitle}}\r\n              </div>\r\n              <ng-container>\r\n                <div class=\"body-large mt-4\" *ngIf=\"blogContent?.display?.showContent\">\r\n                  {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n                  content.postSummary }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n                <div>\r\n                  <mat-icon>person</mat-icon> &nbsp;&nbsp;<span class=\"body-large\">{{content?.author?.name | titlecase}}</span>\r\n                </div>\r\n                <div class=\"calendar_today\">\r\n                  <mat-icon>calendar_today</mat-icon> &nbsp;&nbsp; <span class=\"body-large\">{{content.createdTimeStamp |\r\n                    date:'EEEE, MMM, d, y'}}</span>\r\n                </div>\r\n              </div>\r\n              <div class=\"button heading-large\" (click)=\"getBlogById(content.id)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n                Read More <mat-icon>arrow_right_alt</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  <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</section>\r\n<ng-template #elseBlock>\r\n  <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>\r\n", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:30px 15px 0}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:15px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:interReg;font-weight:500}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BlogListComponent, decorators: [{
             type: Component,
@@ -5401,7 +5410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         HoverDirective,
                         HoverElementsComponent,
                         MatIcon
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\n  (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" (click)=\"editSection()\">\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\n    <div class=\"container-fluid\">\n      <div class=\"row\">\n        <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\" (click)=\"getBlogById(content.id)\">\n          <div class=\"cards\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\n            <img loading=\"lazy\"  [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\n              alt=\"\" *ngIf=\"content.img\"\n              loading=\"lazy\">\n            <img loading=\"lazy\"  [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\n            src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\" alt=\"\" *ngIf=\"!content.img\"\n            loading=\"lazy\">\n            <div class=\"p-30\">\n              <div class=\"heading-medium title mt-4\" *ngIf=\"blogContent?.display?.showHeading\">\n                {{content.postTitle}}\n              </div>\n              <ng-container>\n                <div class=\"body-large mt-4\" *ngIf=\"blogContent?.display?.showContent\">\n                  {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\n                  content.postSummary }}\n                </div>\n              </ng-container>\n\n              <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\n                <div>\n                  <mat-icon>person</mat-icon> &nbsp;&nbsp;<span class=\"body-large\">{{content?.author?.name | titlecase}}</span>\n                </div>\n                <div class=\"calendar_today\">\n                  <mat-icon>calendar_today</mat-icon> &nbsp;&nbsp; <span class=\"body-large\">{{content.createdTimeStamp |\n                    date:'EEEE, MMM, d, y'}}</span>\n                </div>\n              </div>\n              <div class=\"button heading-large\" (click)=\"getBlogById(content.id)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\n                Read More <mat-icon>arrow_right_alt</mat-icon>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n</section>\n<ng-template #elseBlock>\n  <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\n</ng-template>\n", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:30px 15px 0}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:15px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:interReg;font-weight:500}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" (click)=\"editSection()\">\r\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"row\">\r\n        <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\" (click)=\"getBlogById(content.id)\">\r\n          <div class=\"cards\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n            <img loading=\"lazy\"  [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n              alt=\"\" *ngIf=\"content.img\"\r\n              loading=\"lazy\">\r\n            <img loading=\"lazy\"  [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n            src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\" alt=\"\" *ngIf=\"!content.img\"\r\n            loading=\"lazy\">\r\n            <div class=\"p-30\">\r\n              <div class=\"heading-medium title mt-4\" *ngIf=\"blogContent?.display?.showHeading\">\r\n                {{content.postTitle}}\r\n              </div>\r\n              <ng-container>\r\n                <div class=\"body-large mt-4\" *ngIf=\"blogContent?.display?.showContent\">\r\n                  {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n                  content.postSummary }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n                <div>\r\n                  <mat-icon>person</mat-icon> &nbsp;&nbsp;<span class=\"body-large\">{{content?.author?.name | titlecase}}</span>\r\n                </div>\r\n                <div class=\"calendar_today\">\r\n                  <mat-icon>calendar_today</mat-icon> &nbsp;&nbsp; <span class=\"body-large\">{{content.createdTimeStamp |\r\n                    date:'EEEE, MMM, d, y'}}</span>\r\n                </div>\r\n              </div>\r\n              <div class=\"button heading-large\" (click)=\"getBlogById(content.id)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n                Read More <mat-icon>arrow_right_alt</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  <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</section>\r\n<ng-template #elseBlock>\r\n  <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>\r\n", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:30px 15px 0}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:15px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:interReg;font-weight:500}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { responseData: [{
                 type: Input
             }], index: [{
@@ -5422,11 +5431,11 @@ class ViewBlogComponent {
         // this._eventService.toggleEditorEvent.emit(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ViewBlogComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ViewBlogComponent, isStandalone: true, selector: "simpo-view-blog", inputs: { responseData: "responseData" }, ngImport: i0, template: "<section class=\"main-section\">\n  <div class=\"blog-details\">\n    <h1 class=\"blog-title\">{{responseData.postTitle}}</h1>\n    <div style=\"margin-top: 20px;\">\n      <ng-container *ngFor=\"let item of responseData?.blocks\">\n        <div *ngIf=\"item.type=='header'\">\n          <h1 *ngIf=\"item.data.level==1\" [innerHTML]=\"item.data.text\"></h1>\n          <h2 *ngIf=\"item.data.level==2\" [innerHTML]=\"item.data.text\"></h2>\n          <h3 *ngIf=\"item.data.level==3\" [innerHTML]=\"item.data.text\"></h3>\n          <h4 *ngIf=\"item.data.level==4\" [innerHTML]=\"item.data.text\"></h4>\n          <h5 *ngIf=\"item.data.level==5\" [innerHTML]=\"item.data.text\"></h5>\n          <h6 *ngIf=\"item.data.level==6\" [innerHTML]=\"item.data.text\"></h6>\n        </div>\n        <div *ngIf=\"item.type=='paragraph'\">\n          <p class=\"inner-text\" [innerHTML]=\"item.data.text\"></p>\n        </div>\n        <div *ngIf=\"item.type=='list'\">\n          <div *ngIf=\"item.type=='list'\">\n            <div *ngIf=\"item.data.style=='ordered'\">\n              <ol>\n                <ng-container *ngFor=\"let list of item.data.items\">\n                  <li>{{ list }}</li>\n                </ng-container>\n              </ol>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"item.type=='delimiter'\" class=\"ce-delimiter\">\n        </div>\n        <div *ngIf=\"item.type=='image'\" class=\"image-container\">\n          <img loading=\"lazy\"  [src]=\"item.data.file.url\" alt=\"\" loading=\"lazy\">\n        </div>\n        <div *ngIf=\"item.type=='table'\">\n\n          <table>\n            <ng-container *ngFor=\"let data of item.data.content\">\n              <tr>\n                <ng-container *ngFor=\"let item of data\">\n                  <td>{{ item }}</td>\n                </ng-container>\n              </tr>\n            </ng-container>\n          </table>\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</section>\n", styles: [".main-section{padding:5%;background-color:#fff}.blog-details{width:60%;margin:0 auto;font-family:jakartaMedium}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}table{border-collapse:collapse;width:100%}th,td{border:1px solid black;text-align:center}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:10px 0}.image-container img{width:100%;height:350px}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}@media only screen and (max-width :500px){.blog-details{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ViewBlogComponent, isStandalone: true, selector: "simpo-view-blog", inputs: { responseData: "responseData" }, ngImport: i0, template: "<section class=\"main-section\">\r\n  <div class=\"blog-details\">\r\n    <h1 class=\"blog-title\">{{responseData.postTitle}}</h1>\r\n    <div style=\"margin-top: 20px;\">\r\n      <ng-container *ngFor=\"let item of responseData?.blocks\">\r\n        <div *ngIf=\"item.type=='header'\">\r\n          <h1 *ngIf=\"item.data.level==1\" [innerHTML]=\"item.data.text\"></h1>\r\n          <h2 *ngIf=\"item.data.level==2\" [innerHTML]=\"item.data.text\"></h2>\r\n          <h3 *ngIf=\"item.data.level==3\" [innerHTML]=\"item.data.text\"></h3>\r\n          <h4 *ngIf=\"item.data.level==4\" [innerHTML]=\"item.data.text\"></h4>\r\n          <h5 *ngIf=\"item.data.level==5\" [innerHTML]=\"item.data.text\"></h5>\r\n          <h6 *ngIf=\"item.data.level==6\" [innerHTML]=\"item.data.text\"></h6>\r\n        </div>\r\n        <div *ngIf=\"item.type=='paragraph'\">\r\n          <p class=\"inner-text\" [innerHTML]=\"item.data.text\"></p>\r\n        </div>\r\n        <div *ngIf=\"item.type=='list'\">\r\n          <div *ngIf=\"item.type=='list'\">\r\n            <div *ngIf=\"item.data.style=='ordered'\">\r\n              <ol>\r\n                <ng-container *ngFor=\"let list of item.data.items\">\r\n                  <li>{{ list }}</li>\r\n                </ng-container>\r\n              </ol>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"item.type=='delimiter'\" class=\"ce-delimiter\">\r\n        </div>\r\n        <div *ngIf=\"item.type=='image'\" class=\"image-container\">\r\n          <img loading=\"lazy\"  [src]=\"item.data.file.url\" alt=\"\" loading=\"lazy\">\r\n        </div>\r\n        <div *ngIf=\"item.type=='table'\">\r\n\r\n          <table>\r\n            <ng-container *ngFor=\"let data of item.data.content\">\r\n              <tr>\r\n                <ng-container *ngFor=\"let item of data\">\r\n                  <td>{{ item }}</td>\r\n                </ng-container>\r\n              </tr>\r\n            </ng-container>\r\n          </table>\r\n\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [".main-section{padding:5%;background-color:#fff}.blog-details{width:60%;margin:0 auto;font-family:jakartaMedium}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}table{border-collapse:collapse;width:100%}th,td{border:1px solid black;text-align:center}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:10px 0}.image-container img{width:100%;height:350px}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}@media only screen and (max-width :500px){.blog-details{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ViewBlogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-view-blog', standalone: true, imports: [CommonModule], template: "<section class=\"main-section\">\n  <div class=\"blog-details\">\n    <h1 class=\"blog-title\">{{responseData.postTitle}}</h1>\n    <div style=\"margin-top: 20px;\">\n      <ng-container *ngFor=\"let item of responseData?.blocks\">\n        <div *ngIf=\"item.type=='header'\">\n          <h1 *ngIf=\"item.data.level==1\" [innerHTML]=\"item.data.text\"></h1>\n          <h2 *ngIf=\"item.data.level==2\" [innerHTML]=\"item.data.text\"></h2>\n          <h3 *ngIf=\"item.data.level==3\" [innerHTML]=\"item.data.text\"></h3>\n          <h4 *ngIf=\"item.data.level==4\" [innerHTML]=\"item.data.text\"></h4>\n          <h5 *ngIf=\"item.data.level==5\" [innerHTML]=\"item.data.text\"></h5>\n          <h6 *ngIf=\"item.data.level==6\" [innerHTML]=\"item.data.text\"></h6>\n        </div>\n        <div *ngIf=\"item.type=='paragraph'\">\n          <p class=\"inner-text\" [innerHTML]=\"item.data.text\"></p>\n        </div>\n        <div *ngIf=\"item.type=='list'\">\n          <div *ngIf=\"item.type=='list'\">\n            <div *ngIf=\"item.data.style=='ordered'\">\n              <ol>\n                <ng-container *ngFor=\"let list of item.data.items\">\n                  <li>{{ list }}</li>\n                </ng-container>\n              </ol>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"item.type=='delimiter'\" class=\"ce-delimiter\">\n        </div>\n        <div *ngIf=\"item.type=='image'\" class=\"image-container\">\n          <img loading=\"lazy\"  [src]=\"item.data.file.url\" alt=\"\" loading=\"lazy\">\n        </div>\n        <div *ngIf=\"item.type=='table'\">\n\n          <table>\n            <ng-container *ngFor=\"let data of item.data.content\">\n              <tr>\n                <ng-container *ngFor=\"let item of data\">\n                  <td>{{ item }}</td>\n                </ng-container>\n              </tr>\n            </ng-container>\n          </table>\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</section>\n", styles: [".main-section{padding:5%;background-color:#fff}.blog-details{width:60%;margin:0 auto;font-family:jakartaMedium}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}table{border-collapse:collapse;width:100%}th,td{border:1px solid black;text-align:center}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:10px 0}.image-container img{width:100%;height:350px}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}@media only screen and (max-width :500px){.blog-details{width:100%}}\n"] }]
+            args: [{ selector: 'simpo-view-blog', standalone: true, imports: [CommonModule], template: "<section class=\"main-section\">\r\n  <div class=\"blog-details\">\r\n    <h1 class=\"blog-title\">{{responseData.postTitle}}</h1>\r\n    <div style=\"margin-top: 20px;\">\r\n      <ng-container *ngFor=\"let item of responseData?.blocks\">\r\n        <div *ngIf=\"item.type=='header'\">\r\n          <h1 *ngIf=\"item.data.level==1\" [innerHTML]=\"item.data.text\"></h1>\r\n          <h2 *ngIf=\"item.data.level==2\" [innerHTML]=\"item.data.text\"></h2>\r\n          <h3 *ngIf=\"item.data.level==3\" [innerHTML]=\"item.data.text\"></h3>\r\n          <h4 *ngIf=\"item.data.level==4\" [innerHTML]=\"item.data.text\"></h4>\r\n          <h5 *ngIf=\"item.data.level==5\" [innerHTML]=\"item.data.text\"></h5>\r\n          <h6 *ngIf=\"item.data.level==6\" [innerHTML]=\"item.data.text\"></h6>\r\n        </div>\r\n        <div *ngIf=\"item.type=='paragraph'\">\r\n          <p class=\"inner-text\" [innerHTML]=\"item.data.text\"></p>\r\n        </div>\r\n        <div *ngIf=\"item.type=='list'\">\r\n          <div *ngIf=\"item.type=='list'\">\r\n            <div *ngIf=\"item.data.style=='ordered'\">\r\n              <ol>\r\n                <ng-container *ngFor=\"let list of item.data.items\">\r\n                  <li>{{ list }}</li>\r\n                </ng-container>\r\n              </ol>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"item.type=='delimiter'\" class=\"ce-delimiter\">\r\n        </div>\r\n        <div *ngIf=\"item.type=='image'\" class=\"image-container\">\r\n          <img loading=\"lazy\"  [src]=\"item.data.file.url\" alt=\"\" loading=\"lazy\">\r\n        </div>\r\n        <div *ngIf=\"item.type=='table'\">\r\n\r\n          <table>\r\n            <ng-container *ngFor=\"let data of item.data.content\">\r\n              <tr>\r\n                <ng-container *ngFor=\"let item of data\">\r\n                  <td>{{ item }}</td>\r\n                </ng-container>\r\n              </tr>\r\n            </ng-container>\r\n          </table>\r\n\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [".main-section{padding:5%;background-color:#fff}.blog-details{width:60%;margin:0 auto;font-family:jakartaMedium}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}table{border-collapse:collapse;width:100%}th,td{border:1px solid black;text-align:center}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:10px 0}.image-container img{width:100%;height:350px}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}@media only screen and (max-width :500px){.blog-details{width:100%}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { responseData: [{
                 type: Input
             }] } });
@@ -5465,7 +5474,7 @@ class ProcessSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProcessSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProcessSectionComponent, isStandalone: true, selector: "simpo-process-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" (click)=\"editSection()\">\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n    [simpoBorder]=\"styles?.border\">\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\n      [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n      [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\n\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\" [simpoContainerAlignment]=\"stylesLayout\"\n        [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\n        <div *ngFor=\"let item of content?.inputText\">\n          <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\n            [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [id]=\"data?.id\"\n            [simpoColor]=\"styles?.background?.color\"></div>\n        </div>\n        <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\n          <div class=\"card_wrapper\">\n            <div class=\"container_card visible\">\n              <div class=\"card-section\">\n                <div class=\"first-part-card\"\n                  [ngClass]=\"item.inputText[0].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n                  {{ item.inputText[0].value }}\n                </div>\n                 <div class=\"second-part-card \" *ngIf=\"item.image.url && (deviceWidth >= 475)\">\n                  <img loading=\"lazy\"  [src]=\"item.image.url\" [alt]=\"item.image.altText\" />\n                </div>\n                <div class=\"third-part-card\">\n                  <div class=\"text-element heading-medium\" [innerHtml]=\"item.inputText[1].value | sanitizeHtml\">\n                  </div>\n                  <div class=\"text-element\" [innerHtml]=\"item.inputText[2].value | sanitizeHtml\"\n                    [ngClass]=\"item.inputText[2].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n                  </div>\n\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </div>\n      <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\n        <img loading=\"lazy\"  [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\n          [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</div>\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.container_card .card-section{display:flex;align-items:center;justify-content:center;gap:30px;padding:20px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.container_card .card-section{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:10px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}}.text-element{inline-size:100%;overflow-wrap:break-word}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content;text-align:left}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:40px;height:40px;border-radius:50%;border:1px solid rgba(116,33,252,.1);padding:10px;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.second-part-card img{width:100%;height:100%;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProcessSectionComponent, isStandalone: true, selector: "simpo-process-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n      [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\" [simpoContainerAlignment]=\"stylesLayout\"\r\n        [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n            [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [id]=\"data?.id\"\r\n            [simpoColor]=\"styles?.background?.color\"></div>\r\n        </div>\r\n        <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n          <div class=\"card_wrapper\">\r\n            <div class=\"container_card visible\">\r\n              <div class=\"card-section\">\r\n                <div class=\"first-part-card\"\r\n                  [ngClass]=\"item.inputText[0].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                  {{ item.inputText[0].value }}\r\n                </div>\r\n                 <div class=\"second-part-card \" *ngIf=\"item.image.url && (deviceWidth >= 475)\">\r\n                  <img loading=\"lazy\"  [src]=\"item.image.url\" [alt]=\"item.image.altText\" />\r\n                </div>\r\n                <div class=\"third-part-card\">\r\n                  <div class=\"text-element heading-medium\" [innerHtml]=\"item.inputText[1].value | sanitizeHtml\">\r\n                  </div>\r\n                  <div class=\"text-element\" [innerHtml]=\"item.inputText[2].value | sanitizeHtml\"\r\n                    [ngClass]=\"item.inputText[2].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                  </div>\r\n\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n        <img loading=\"lazy\"  [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n          [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.container_card .card-section{display:flex;align-items:center;justify-content:center;gap:30px;padding:20px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.container_card .card-section{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:10px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}}.text-element{inline-size:100%;overflow-wrap:break-word}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content;text-align:left}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:40px;height:40px;border-radius:50%;border:1px solid rgba(116,33,252,.1);padding:10px;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.second-part-card img{width:100%;height:100%;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProcessSectionComponent, decorators: [{
             type: Component,
@@ -5494,7 +5503,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         ObjectPositionDirective,
                         ColorDirective,
                         SanitizeHtmlPipe,
-                        TextSizeDirective], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" (click)=\"editSection()\">\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n    [simpoBorder]=\"styles?.border\">\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\n      [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n      [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\n\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\" [simpoContainerAlignment]=\"stylesLayout\"\n        [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\n        <div *ngFor=\"let item of content?.inputText\">\n          <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\n            [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [id]=\"data?.id\"\n            [simpoColor]=\"styles?.background?.color\"></div>\n        </div>\n        <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\n          <div class=\"card_wrapper\">\n            <div class=\"container_card visible\">\n              <div class=\"card-section\">\n                <div class=\"first-part-card\"\n                  [ngClass]=\"item.inputText[0].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n                  {{ item.inputText[0].value }}\n                </div>\n                 <div class=\"second-part-card \" *ngIf=\"item.image.url && (deviceWidth >= 475)\">\n                  <img loading=\"lazy\"  [src]=\"item.image.url\" [alt]=\"item.image.altText\" />\n                </div>\n                <div class=\"third-part-card\">\n                  <div class=\"text-element heading-medium\" [innerHtml]=\"item.inputText[1].value | sanitizeHtml\">\n                  </div>\n                  <div class=\"text-element\" [innerHtml]=\"item.inputText[2].value | sanitizeHtml\"\n                    [ngClass]=\"item.inputText[2].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n                  </div>\n\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </div>\n      <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\n        <img loading=\"lazy\"  [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\n          [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</div>\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.container_card .card-section{display:flex;align-items:center;justify-content:center;gap:30px;padding:20px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.container_card .card-section{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:10px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}}.text-element{inline-size:100%;overflow-wrap:break-word}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content;text-align:left}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:40px;height:40px;border-radius:50%;border:1px solid rgba(116,33,252,.1);padding:10px;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.second-part-card img{width:100%;height:100%;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}\n"] }]
+                        TextSizeDirective], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n      [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\" [simpoContainerAlignment]=\"stylesLayout\"\r\n        [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n            [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [id]=\"data?.id\"\r\n            [simpoColor]=\"styles?.background?.color\"></div>\r\n        </div>\r\n        <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n          <div class=\"card_wrapper\">\r\n            <div class=\"container_card visible\">\r\n              <div class=\"card-section\">\r\n                <div class=\"first-part-card\"\r\n                  [ngClass]=\"item.inputText[0].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                  {{ item.inputText[0].value }}\r\n                </div>\r\n                 <div class=\"second-part-card \" *ngIf=\"item.image.url && (deviceWidth >= 475)\">\r\n                  <img loading=\"lazy\"  [src]=\"item.image.url\" [alt]=\"item.image.altText\" />\r\n                </div>\r\n                <div class=\"third-part-card\">\r\n                  <div class=\"text-element heading-medium\" [innerHtml]=\"item.inputText[1].value | sanitizeHtml\">\r\n                  </div>\r\n                  <div class=\"text-element\" [innerHtml]=\"item.inputText[2].value | sanitizeHtml\"\r\n                    [ngClass]=\"item.inputText[2].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                  </div>\r\n\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n        <img loading=\"lazy\"  [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n          [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.container_card .card-section{display:flex;align-items:center;justify-content:center;gap:30px;padding:20px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.container_card .card-section{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:10px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}}.text-element{inline-size:100%;overflow-wrap:break-word}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content;text-align:left}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:40px;height:40px;border-radius:50%;border:1px solid rgba(116,33,252,.1);padding:10px;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.second-part-card img{width:100%;height:100%;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -5534,7 +5543,7 @@ class ProcessModernComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProcessModernComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProcessModernComponent, isStandalone: true, selector: "simpo-process-modern", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" (click)=\"editSection()\">\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n    [simpoBorder]=\"styles?.border\">\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\n      <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\n        <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n          <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n            <div *ngFor=\"let text of data?.content?.inputText\">\n              <div class=\"heading-large lh-2 mb-3\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\n            </div>\n          </div>\n          <!-- starting -->\n          <div *ngFor=\"let item of content?.listItem?.data ;let i = index\" class=\"single_card\">\n            <div class=\"rowFlexContainer\" [ngClass]=\"{'flex-row-reverse': i % 2 === 1}\">\n              <div class=\"imageContainer\" [ngClass]=\"{'no-image': item.image.url===''}\">\n                <img loading=\"lazy\"  class=\"section_image\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\n                  [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                  loading=\"lazy\">\n              </div>\n              <div class=\"content\" [ngClass]=\"{'no-image-content': item.image.url===''}\">\n                <div class=\"numberStyle\">\n                  {{ i + 1}}\n                </div>\n                <div class=\"contentHeading\">\n                  {{ item.inputText[0].value }}\n                </div>\n                <div class=\"contentDescription\">\n                  {{ item.inputText[1].value }}\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- ending -->\n        </div>\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</div>\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;width:80%!important;margin:3% auto auto;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px;font-weight:600}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.no-image{display:none}.no-image-content{width:40%!important;margin-left:auto;margin-right:auto}.no-image-content .contentDescription{width:100%!important}@media only screen and (max-width: 475px){.rowFlexContainer{flex-direction:column!important;width:100%!important;height:auto!important}.imageContainer{width:100%!important;height:auto!important}.section_image{width:100%;height:auto;object-fit:cover;border-radius:10px}.content{width:100%!important;margin-top:15px;margin-right:0}.numberStyle{margin-bottom:15px;width:50px;height:50px}.contentDescription{width:100%!important}.row{margin-left:.2px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProcessModernComponent, isStandalone: true, selector: "simpo-process-modern", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n      <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n        <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n          <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n            <div *ngFor=\"let text of data?.content?.inputText\">\r\n              <div class=\"heading-large lh-2 mb-3\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n            </div>\r\n          </div>\r\n          <!-- starting -->\r\n          <div *ngFor=\"let item of content?.listItem?.data ;let i = index\" class=\"single_card\">\r\n            <div class=\"rowFlexContainer\" [ngClass]=\"{'flex-row-reverse': i % 2 === 1}\">\r\n              <div class=\"imageContainer\" [ngClass]=\"{'no-image': item.image.url===''}\">\r\n                <img loading=\"lazy\"  class=\"section_image\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\r\n                  [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n                  loading=\"lazy\">\r\n              </div>\r\n              <div class=\"content\" [ngClass]=\"{'no-image-content': item.image.url===''}\">\r\n                <div class=\"numberStyle\">\r\n                  {{ i + 1}}\r\n                </div>\r\n                <div class=\"contentHeading\">\r\n                  {{ item.inputText[0].value }}\r\n                </div>\r\n                <div class=\"contentDescription\">\r\n                  {{ item.inputText[1].value }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <!-- ending -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;width:80%!important;margin:3% auto auto;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px;font-weight:600}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.no-image{display:none}.no-image-content{width:40%!important;margin-left:auto;margin-right:auto}.no-image-content .contentDescription{width:100%!important}@media only screen and (max-width: 475px){.rowFlexContainer{flex-direction:column!important;width:100%!important;height:auto!important}.imageContainer{width:100%!important;height:auto!important}.section_image{width:100%;height:auto;object-fit:cover;border-radius:10px}.content{width:100%!important;margin-top:15px;margin-right:0}.numberStyle{margin-bottom:15px;width:50px;height:50px}.contentDescription{width:100%!important}.row{margin-left:.2px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProcessModernComponent, decorators: [{
             type: Component,
@@ -5566,7 +5575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         ColorDirective,
                         TextSizeDirective,
                         SanitizeHtmlPipe
-                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" (click)=\"editSection()\">\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n    [simpoBorder]=\"styles?.border\">\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\n      <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\n        <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n          <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n            <div *ngFor=\"let text of data?.content?.inputText\">\n              <div class=\"heading-large lh-2 mb-3\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\n            </div>\n          </div>\n          <!-- starting -->\n          <div *ngFor=\"let item of content?.listItem?.data ;let i = index\" class=\"single_card\">\n            <div class=\"rowFlexContainer\" [ngClass]=\"{'flex-row-reverse': i % 2 === 1}\">\n              <div class=\"imageContainer\" [ngClass]=\"{'no-image': item.image.url===''}\">\n                <img loading=\"lazy\"  class=\"section_image\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\n                  [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                  loading=\"lazy\">\n              </div>\n              <div class=\"content\" [ngClass]=\"{'no-image-content': item.image.url===''}\">\n                <div class=\"numberStyle\">\n                  {{ i + 1}}\n                </div>\n                <div class=\"contentHeading\">\n                  {{ item.inputText[0].value }}\n                </div>\n                <div class=\"contentDescription\">\n                  {{ item.inputText[1].value }}\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- ending -->\n        </div>\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</div>\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;width:80%!important;margin:3% auto auto;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px;font-weight:600}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.no-image{display:none}.no-image-content{width:40%!important;margin-left:auto;margin-right:auto}.no-image-content .contentDescription{width:100%!important}@media only screen and (max-width: 475px){.rowFlexContainer{flex-direction:column!important;width:100%!important;height:auto!important}.imageContainer{width:100%!important;height:auto!important}.section_image{width:100%;height:auto;object-fit:cover;border-radius:10px}.content{width:100%!important;margin-top:15px;margin-right:0}.numberStyle{margin-bottom:15px;width:50px;height:50px}.contentDescription{width:100%!important}.row{margin-left:.2px}}\n"] }]
+                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n      <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n        <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n          <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n            <div *ngFor=\"let text of data?.content?.inputText\">\r\n              <div class=\"heading-large lh-2 mb-3\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n            </div>\r\n          </div>\r\n          <!-- starting -->\r\n          <div *ngFor=\"let item of content?.listItem?.data ;let i = index\" class=\"single_card\">\r\n            <div class=\"rowFlexContainer\" [ngClass]=\"{'flex-row-reverse': i % 2 === 1}\">\r\n              <div class=\"imageContainer\" [ngClass]=\"{'no-image': item.image.url===''}\">\r\n                <img loading=\"lazy\"  class=\"section_image\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\r\n                  [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n                  loading=\"lazy\">\r\n              </div>\r\n              <div class=\"content\" [ngClass]=\"{'no-image-content': item.image.url===''}\">\r\n                <div class=\"numberStyle\">\r\n                  {{ i + 1}}\r\n                </div>\r\n                <div class=\"contentHeading\">\r\n                  {{ item.inputText[0].value }}\r\n                </div>\r\n                <div class=\"contentDescription\">\r\n                  {{ item.inputText[1].value }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <!-- ending -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;width:80%!important;margin:3% auto auto;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px;font-weight:600}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.no-image{display:none}.no-image-content{width:40%!important;margin-left:auto;margin-right:auto}.no-image-content .contentDescription{width:100%!important}@media only screen and (max-width: 475px){.rowFlexContainer{flex-direction:column!important;width:100%!important;height:auto!important}.imageContainer{width:100%!important;height:auto!important}.section_image{width:100%;height:auto;object-fit:cover;border-radius:10px}.content{width:100%!important;margin-top:15px;margin-right:0}.numberStyle{margin-bottom:15px;width:50px;height:50px}.contentDescription{width:100%!important}.row{margin-left:.2px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -5608,7 +5617,7 @@ class FeaturesSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturesSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturesSectionComponent, isStandalone: true, selector: "simpo-features-section", inputs: { data: "data", edit: "edit", delete: "delete", index: "index" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" [simpoBorder]=\"styles?.border\" (click)=\"editSection()\">\n  <div  #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\n    <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n      <div class=\"row\" *ngIf=\"screenWidth > 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-medium mb-1\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\n        </div>\n        <div class=\" box d-flex justify-content-between mt-5 mb-5\">\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" (click)=\"changetab(index)\">\n              {{ tab.inputText[0].value }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"row-container\" *ngIf=\"screenWidth <= 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-medium mb-1\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\n        </div>\n        <div class=\" box d-flex justify-content-between mt-5 mb-5\">\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" (click)=\"changetab(index)\">\n              {{ tab.inputText[0].value }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"content d-flex g-15 mt-5\">\n        <div class=\"image\">\n          <img loading=\"lazy\"  [src]=\"currentData?.image?.url\" alt=\"\"\n          [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"currentData?.image?.position\"\n          [simpoCorner]=\"styles?.corners\"\n          class=\"d-block mx-lg-auto img-fluid h-100\"\n          loading=\"lazy\">\n        </div>\n        <div class=\"content-heading heading-large\"  [id]=\"data?.id\">\n          {{currentData?.inputText?.[1]?.value}}\n          <div class=\"content-description body-large mt-5\">\n            {{currentData?.inputText?.[2]?.value}}\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem}.image{width:40%;flex:1}.image img{width:100%}.content-heading{width:60%;text-align:start}.content-description{width:100%;text-align:start}.active{font-weight:700;letter-spacing:.8px;border-bottom:2px solid white;padding-bottom:20px}.tab{letter-spacing:.8px;border-bottom:2px solid;padding-bottom:20px;cursor:pointer}@media only screen and (max-width: 768px){.content{flex-direction:column;padding:0 2rem;width:100%;gap:2rem}.image{order:-1;width:100%}.image img,.content-heading{width:100%}.box{overflow-x:scroll;gap:10%;margin:auto!important;padding:10px;width:85%!important}.row-container{width:100%!important}.tab{letter-spacing:.5px;border-bottom:1px solid;padding-bottom:10px;cursor:pointer}.image{width:100%}}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturesSectionComponent, isStandalone: true, selector: "simpo-features-section", inputs: { data: "data", edit: "edit", delete: "delete", index: "index" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [simpoBorder]=\"styles?.border\" (click)=\"editSection()\">\r\n  <div  #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n    <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"row\" *ngIf=\"screenWidth > 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-medium mb-1\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n        </div>\r\n        <div class=\" box d-flex justify-content-between mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" (click)=\"changetab(index)\">\r\n              {{ tab.inputText[0].value }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"row-container\" *ngIf=\"screenWidth <= 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-medium mb-1\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n        </div>\r\n        <div class=\" box d-flex justify-content-between mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" (click)=\"changetab(index)\">\r\n              {{ tab.inputText[0].value }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"content d-flex g-15 mt-5\">\r\n        <div class=\"image\">\r\n          <img loading=\"lazy\"  [src]=\"currentData?.image?.url\" alt=\"\"\r\n          [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"currentData?.image?.position\"\r\n          [simpoCorner]=\"styles?.corners\"\r\n          class=\"d-block mx-lg-auto img-fluid h-100\"\r\n          loading=\"lazy\">\r\n        </div>\r\n        <div class=\"content-heading heading-large\"  [id]=\"data?.id\">\r\n          {{currentData?.inputText?.[1]?.value}}\r\n          <div class=\"content-description body-large mt-5\">\r\n            {{currentData?.inputText?.[2]?.value}}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem}.image{width:40%;flex:1}.image img{width:100%}.content-heading{width:60%;text-align:start}.content-description{width:100%;text-align:start}.active{font-weight:700;letter-spacing:.8px;border-bottom:2px solid white;padding-bottom:20px}.tab{letter-spacing:.8px;border-bottom:2px solid;padding-bottom:20px;cursor:pointer}@media only screen and (max-width: 768px){.content{flex-direction:column;padding:0 2rem;width:100%;gap:2rem}.image{order:-1;width:100%}.image img,.content-heading{width:100%}.box{overflow-x:scroll;gap:10%;margin:auto!important;padding:10px;width:85%!important}.row-container{width:100%!important}.tab{letter-spacing:.5px;border-bottom:1px solid;padding-bottom:10px;cursor:pointer}.image{width:100%}}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturesSectionComponent, decorators: [{
             type: Component,
@@ -5627,7 +5636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         ObjectPositionDirective,
                         CornerDirective,
                         SanitizeHtmlPipe
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" [simpoBorder]=\"styles?.border\" (click)=\"editSection()\">\n  <div  #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\n    <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n      <div class=\"row\" *ngIf=\"screenWidth > 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-medium mb-1\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\n        </div>\n        <div class=\" box d-flex justify-content-between mt-5 mb-5\">\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" (click)=\"changetab(index)\">\n              {{ tab.inputText[0].value }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"row-container\" *ngIf=\"screenWidth <= 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-medium mb-1\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\n        </div>\n        <div class=\" box d-flex justify-content-between mt-5 mb-5\">\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" (click)=\"changetab(index)\">\n              {{ tab.inputText[0].value }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"content d-flex g-15 mt-5\">\n        <div class=\"image\">\n          <img loading=\"lazy\"  [src]=\"currentData?.image?.url\" alt=\"\"\n          [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"currentData?.image?.position\"\n          [simpoCorner]=\"styles?.corners\"\n          class=\"d-block mx-lg-auto img-fluid h-100\"\n          loading=\"lazy\">\n        </div>\n        <div class=\"content-heading heading-large\"  [id]=\"data?.id\">\n          {{currentData?.inputText?.[1]?.value}}\n          <div class=\"content-description body-large mt-5\">\n            {{currentData?.inputText?.[2]?.value}}\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem}.image{width:40%;flex:1}.image img{width:100%}.content-heading{width:60%;text-align:start}.content-description{width:100%;text-align:start}.active{font-weight:700;letter-spacing:.8px;border-bottom:2px solid white;padding-bottom:20px}.tab{letter-spacing:.8px;border-bottom:2px solid;padding-bottom:20px;cursor:pointer}@media only screen and (max-width: 768px){.content{flex-direction:column;padding:0 2rem;width:100%;gap:2rem}.image{order:-1;width:100%}.image img,.content-heading{width:100%}.box{overflow-x:scroll;gap:10%;margin:auto!important;padding:10px;width:85%!important}.row-container{width:100%!important}.tab{letter-spacing:.5px;border-bottom:1px solid;padding-bottom:10px;cursor:pointer}.image{width:100%}}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [simpoBorder]=\"styles?.border\" (click)=\"editSection()\">\r\n  <div  #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n    <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"row\" *ngIf=\"screenWidth > 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-medium mb-1\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n        </div>\r\n        <div class=\" box d-flex justify-content-between mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" (click)=\"changetab(index)\">\r\n              {{ tab.inputText[0].value }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"row-container\" *ngIf=\"screenWidth <= 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-medium mb-1\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n        </div>\r\n        <div class=\" box d-flex justify-content-between mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" (click)=\"changetab(index)\">\r\n              {{ tab.inputText[0].value }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"content d-flex g-15 mt-5\">\r\n        <div class=\"image\">\r\n          <img loading=\"lazy\"  [src]=\"currentData?.image?.url\" alt=\"\"\r\n          [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"currentData?.image?.position\"\r\n          [simpoCorner]=\"styles?.corners\"\r\n          class=\"d-block mx-lg-auto img-fluid h-100\"\r\n          loading=\"lazy\">\r\n        </div>\r\n        <div class=\"content-heading heading-large\"  [id]=\"data?.id\">\r\n          {{currentData?.inputText?.[1]?.value}}\r\n          <div class=\"content-description body-large mt-5\">\r\n            {{currentData?.inputText?.[2]?.value}}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem}.image{width:40%;flex:1}.image img{width:100%}.content-heading{width:60%;text-align:start}.content-description{width:100%;text-align:start}.active{font-weight:700;letter-spacing:.8px;border-bottom:2px solid white;padding-bottom:20px}.tab{letter-spacing:.8px;border-bottom:2px solid;padding-bottom:20px;cursor:pointer}@media only screen and (max-width: 768px){.content{flex-direction:column;padding:0 2rem;width:100%;gap:2rem}.image{order:-1;width:100%}.image img,.content-heading{width:100%}.box{overflow-x:scroll;gap:10%;margin:auto!important;padding:10px;width:85%!important}.row-container{width:100%!important}.tab{letter-spacing:.5px;border-bottom:1px solid;padding-bottom:10px;cursor:pointer}.image{width:100%}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], edit: [{
@@ -5659,7 +5668,7 @@ class TestimonialFullwidthComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: TestimonialFullwidthComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TestimonialFullwidthComponent, isStandalone: true, selector: "simpo-testimonial-fullwidth", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n    class=\"total-container\" (click)=\"editSection()\">\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n            <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n\n                <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-ride=\"carousel\" data-interval=\"2000\">\n                    <ol class=\"carousel-indicators\">\n                        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\n                            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\n                    </ol>\n                    <div class=\"carousel-inner\">\n                        <div class=\"single_card carousel-item\"\n                            *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\n                            <!-- this is testimonial cards start-->\n\n                            <div class=\"main-section\">\n                                <div class=\"left\">\n                                    <div class=\"heading\">\n                                        <div class=\"text-element\"\n                                            [ngClass]=\"item.inputText[0].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n                                            {{ item.inputText[0].value }}\n                                        </div>\n                                    </div>\n                                    <div class=\"subtext\">\n                                        <div class=\"text-element\" [innerHtml]=\"item.inputText[1].value | sanitizeHtml\"\n                                            [ngClass]=\"item.inputText[1].label === 'Subtext' ? 'body-large' : 'heading-large lh-2 mb-3'\">\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"right\">\n                                    <img loading=\"lazy\"  [src]=\"item.image.url\" [alt]=\"item.image.altText\" class=\"person-img\"\n                                        [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\n                                        [simpoCorner]=\"style?.corners\">\n                                    <div class=\"person-details\">\n                                        <div>\n                                            <div class=\"person-name\"\n                                                [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\">\n                                                {{ item.inputText[2].value }}\n                                            </div>\n                                            <div class=\"person-type\"\n                                                [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\">\n                                                {{ item.inputText[3].value }}\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <!-- this is testimonial cards start-->\n                    </div>\n                    <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\n                        data-bs-slide=\"prev\">\n                        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Previous</span>\n                    </a>\n                    <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\n                        data-bs-slide=\"next\">\n                        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Next</span>\n                    </a>\n                </div>\n\n\n            </div>\n        </div>\n    </div>\n\n\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</div>\n", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:center;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}.right{width:28%;position:relative}.person-img{width:100%;height:250px;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.left{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.right{width:100%;display:flex;flex-direction:column}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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.1.4", type: TestimonialFullwidthComponent, isStandalone: true, selector: "simpo-testimonial-fullwidth", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" (click)=\"editSection()\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\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-ride=\"carousel\" data-interval=\"2000\">\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\">\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\">\r\n                                <div class=\"left\">\r\n                                    <div class=\"heading\">\r\n                                        <div class=\"text-element\"\r\n                                            [ngClass]=\"item.inputText[0].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                                            {{ item.inputText[0].value }}\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"subtext\">\r\n                                        <div class=\"text-element\" [innerHtml]=\"item.inputText[1].value | sanitizeHtml\"\r\n                                            [ngClass]=\"item.inputText[1].label === 'Subtext' ? 'body-large' : 'heading-large lh-2 mb-3'\">\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"right\">\r\n                                    <img loading=\"lazy\"  [src]=\"item.image.url\" [alt]=\"item.image.altText\" class=\"person-img\"\r\n                                        [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n                                        [simpoCorner]=\"style?.corners\">\r\n                                    <div class=\"person-details\">\r\n                                        <div>\r\n                                            <div class=\"person-name\"\r\n                                                [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\">\r\n                                                {{ item.inputText[2].value }}\r\n                                            </div>\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                                                {{ item.inputText[3].value }}\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\">\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\">\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\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>\r\n", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:center;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}.right{width:28%;position:relative}.person-img{width:100%;height:250px;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.left{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.right{width:100%;display:flex;flex-direction:column}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: 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: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
 }
@@ -5689,7 +5698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         TextBackgroundDirectiveDirective,
                         ContentTitleDirective,
                         SanitizeHtmlPipe
-                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n    class=\"total-container\" (click)=\"editSection()\">\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n            <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n\n                <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-ride=\"carousel\" data-interval=\"2000\">\n                    <ol class=\"carousel-indicators\">\n                        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\n                            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\n                    </ol>\n                    <div class=\"carousel-inner\">\n                        <div class=\"single_card carousel-item\"\n                            *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\n                            <!-- this is testimonial cards start-->\n\n                            <div class=\"main-section\">\n                                <div class=\"left\">\n                                    <div class=\"heading\">\n                                        <div class=\"text-element\"\n                                            [ngClass]=\"item.inputText[0].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n                                            {{ item.inputText[0].value }}\n                                        </div>\n                                    </div>\n                                    <div class=\"subtext\">\n                                        <div class=\"text-element\" [innerHtml]=\"item.inputText[1].value | sanitizeHtml\"\n                                            [ngClass]=\"item.inputText[1].label === 'Subtext' ? 'body-large' : 'heading-large lh-2 mb-3'\">\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"right\">\n                                    <img loading=\"lazy\"  [src]=\"item.image.url\" [alt]=\"item.image.altText\" class=\"person-img\"\n                                        [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\n                                        [simpoCorner]=\"style?.corners\">\n                                    <div class=\"person-details\">\n                                        <div>\n                                            <div class=\"person-name\"\n                                                [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\">\n                                                {{ item.inputText[2].value }}\n                                            </div>\n                                            <div class=\"person-type\"\n                                                [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\">\n                                                {{ item.inputText[3].value }}\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <!-- this is testimonial cards start-->\n                    </div>\n                    <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\n                        data-bs-slide=\"prev\">\n                        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Previous</span>\n                    </a>\n                    <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\n                        data-bs-slide=\"next\">\n                        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Next</span>\n                    </a>\n                </div>\n\n\n            </div>\n        </div>\n    </div>\n\n\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</div>\n", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:center;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}.right{width:28%;position:relative}.person-img{width:100%;height:250px;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.left{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.right{width:100%;display:flex;flex-direction:column}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"] }]
+                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" (click)=\"editSection()\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\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-ride=\"carousel\" data-interval=\"2000\">\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\">\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\">\r\n                                <div class=\"left\">\r\n                                    <div class=\"heading\">\r\n                                        <div class=\"text-element\"\r\n                                            [ngClass]=\"item.inputText[0].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                                            {{ item.inputText[0].value }}\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"subtext\">\r\n                                        <div class=\"text-element\" [innerHtml]=\"item.inputText[1].value | sanitizeHtml\"\r\n                                            [ngClass]=\"item.inputText[1].label === 'Subtext' ? 'body-large' : 'heading-large lh-2 mb-3'\">\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"right\">\r\n                                    <img loading=\"lazy\"  [src]=\"item.image.url\" [alt]=\"item.image.altText\" class=\"person-img\"\r\n                                        [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n                                        [simpoCorner]=\"style?.corners\">\r\n                                    <div class=\"person-details\">\r\n                                        <div>\r\n                                            <div class=\"person-name\"\r\n                                                [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\">\r\n                                                {{ item.inputText[2].value }}\r\n                                            </div>\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                                                {{ item.inputText[3].value }}\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\">\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\">\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\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>\r\n", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:center;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}.right{width:28%;position:relative}.person-img{width:100%;height:250px;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.left{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.right{width:100%;display:flex;flex-direction:column}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -5761,11 +5770,11 @@ class LogoShowcaseComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: LogoShowcaseComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: LogoShowcaseComponent, isStandalone: true, selector: "simpo-logo-showcase", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"styles?.showCaseType==='Grid'\" (click)=\"editSection()\">\n  <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n      class=\"total-container\">\n      <div class=\"col-xxl-8 px-4 py-5 w-100 \" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n          [simpoBorder]=\"styles?.border\">\n          <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n              [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n              *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\n              [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\n\n              <div class=\"col-5 gridimg w-full\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\n                  <div *ngFor=\"let item of content?.inputText\">\n                      <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\n                          [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n                      </div>\n                  </div>\n                  <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\n                      <div *ngFor=\"let button of data?.action?.buttons\">\n                          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n                              [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\n                              [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\n                      </div>\n                  </div>\n              </div>\n              <div class=\"col-7 d-flex flex-wrap flex-1 w-full\">\n                  <div class=\"slider flex overflow-hidden w-full\">\n                      <div class=\"slider-track\"\n                          [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n                          <div class=\"slides\"\n                              [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n                              *ngFor=\"let item of content?.listItem?.data;let i = index\">\n                              <img loading=\"lazy\"  [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\n                                  [alt]=\"item?.image?.altText\">\n                          </div>\n                      </div>\n                  </div>\n                  <!-- </div> -->\n              </div>\n          </div>\n          <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n              [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\n              <div class=\" px-5\" [id]=\"data?.id\"\n                  [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n                  <div *ngFor=\"let item of content?.inputText\">\n\n                      <div [innerHTML]=\"item.value\" class=\"text-element\"\n                          [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n                      </div>\n                  </div>\n              </div>\n              <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\n                  <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\n                  <div class=\"slider flex overflow-hidden w-full\">\n                      <div class=\"slider-track w-full\"\n                          [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n                          <div class=\"slides\"\n                              [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n                              *ngFor=\"let item of content?.listItem?.data;let i = index\">\n                              <img loading=\"lazy\"  [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\n                                  [alt]=\"item?.image?.altText\">\n                          </div>\n                      </div>\n                  </div>\n                  <!-- </div> -->\n              </div>\n\n\n\n          </div>\n      </div>\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n          <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n      </div>\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n          <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n      </div>\n  </div>\n</div>\n\n<div *ngIf=\"styles?.showCaseType==='Carousal'\" (click)=\"editSection()\">\n  <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n      class=\"total-container\">\n\n      <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n          [simpoBorder]=\"styles?.border\">\n          <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n              [simpoLayout]=\"styles?.layout\">\n              <div class=\"mainsec px-5\" [id]=\"data?.id\"\n                  [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n                  <div *ngFor=\"let item of content?.inputText\">\n\n                      <div [innerHTML]=\"item.value\" class=\"text-element\"\n                          [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n                      </div>\n                  </div>\n                  <div *ngIf=\"data?.action && data?.action?.display\" class=\"d-flex gap-2 d-md-flex mt-15\" [ngClass]=\"[\n                          styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n                          styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n                          styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n                      ]\">\n                      <div *ngFor=\"let button of data?.action?.buttons\">\n                          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n                              [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\n                              [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\n                      </div>\n                  </div>\n\n                  <div [ngClass]=\"{\n                      'fullwidth flex-1 inline-edit  ': styles?.fullWidth,\n                      'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\n                    }\">\n                      <div class=\"masking\">\n\n                          <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\n                              [style.animationDirection]=\"animationDirection\">\n                              <div class=\"slider-track2\"\n                                  [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n                                  <div class=\"slides2\"\n                                      [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n                                      *ngFor=\"let item of content?.listItem?.data;let i = index\">\n                                      <img loading=\"lazy\"  [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\n                                          [alt]=\"item?.image?.altText\">\n                                  </div>\n                                  <div class=\"slides\"\n                                      [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n                                      *ngFor=\"let item of content?.listItem?.data;let i = index\">\n                                      <img loading=\"lazy\"  [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\n                                          [alt]=\"item?.image?.altText\">\n                                  </div>\n                                  <div class=\"slides\" [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'\n                              }\" *ngFor=\"let item of content?.listItem?.data;let i = index\">\n                                      <img loading=\"lazy\"  [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\n                                          [alt]=\"item?.image?.altText\">\n                                  </div>\n                              </div>\n                          </div>\n                      </div>\n                  </div>\n\n\n              </div>\n          </div>\n      </div>\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n          <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n      </div>\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n          <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n      </div>\n  </div>\n</div>\n", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{padding-left:15rem;padding-right:15rem;overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:8rem;display:flex;position:relative;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides2.logotype-basic{flex-shrink:0;width:auto;height:5rem;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-50%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft 5s linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;height:5rem;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity));justify-content:center;flex-grow:1;flex-shrink:0;width:auto;height:8rem;display:flex;position:relative}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (min-width: 375px) and (max-width: 500px){.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}\n"], dependencies: [{ kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: LogoShowcaseComponent, isStandalone: true, selector: "simpo-logo-showcase", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"styles?.showCaseType==='Grid'\" (click)=\"editSection()\">\r\n  <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n      class=\"total-container\">\r\n      <div class=\"col-xxl-8 px-4 py-5 w-100 \" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n          [simpoBorder]=\"styles?.border\">\r\n          <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n              [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n              *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n              [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n              <div class=\"col-5 gridimg w-full\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n                      <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n                          [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                      </div>\r\n                  </div>\r\n                  <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n                      <div *ngFor=\"let button of data?.action?.buttons\">\r\n                          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                              [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n                              [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n              <div class=\"col-7 d-flex flex-wrap flex-1 w-full\">\r\n                  <div class=\"slider flex overflow-hidden w-full\">\r\n                      <div class=\"slider-track\"\r\n                          [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n                          <div class=\"slides\"\r\n                              [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n                              *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                              <img loading=\"lazy\"  [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n                                  [alt]=\"item?.image?.altText\">\r\n                          </div>\r\n                      </div>\r\n                  </div>\r\n                  <!-- </div> -->\r\n              </div>\r\n          </div>\r\n          <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n              [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n              <div class=\" px-5\" [id]=\"data?.id\"\r\n                  [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n\r\n                      <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n                          [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n              <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n                  <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n                  <div class=\"slider flex overflow-hidden w-full\">\r\n                      <div class=\"slider-track w-full\"\r\n                          [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n                          <div class=\"slides\"\r\n                              [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n                              *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                              <img loading=\"lazy\"  [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n                                  [alt]=\"item?.image?.altText\">\r\n                          </div>\r\n                      </div>\r\n                  </div>\r\n                  <!-- </div> -->\r\n              </div>\r\n\r\n\r\n\r\n          </div>\r\n      </div>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n          <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n          <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n      </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\" (click)=\"editSection()\">\r\n  <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n      class=\"total-container\">\r\n\r\n      <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n          [simpoBorder]=\"styles?.border\">\r\n          <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n              [simpoLayout]=\"styles?.layout\">\r\n              <div class=\"mainsec px-5\" [id]=\"data?.id\"\r\n                  [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n\r\n                      <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n                          [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                      </div>\r\n                  </div>\r\n                  <div *ngIf=\"data?.action && data?.action?.display\" class=\"d-flex gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n                          styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n                          styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n                          styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n                      ]\">\r\n                      <div *ngFor=\"let button of data?.action?.buttons\">\r\n                          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                              [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n                              [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                      </div>\r\n                  </div>\r\n\r\n                  <div [ngClass]=\"{\r\n                      'fullwidth flex-1 inline-edit  ': styles?.fullWidth,\r\n                      'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n                    }\">\r\n                      <div class=\"masking\">\r\n\r\n                          <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n                              [style.animationDirection]=\"animationDirection\">\r\n                              <div class=\"slider-track2\"\r\n                                  [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n                                  <div class=\"slides2\"\r\n                                      [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n                                      *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                      <img loading=\"lazy\"  [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n                                          [alt]=\"item?.image?.altText\">\r\n                                  </div>\r\n                                  <div class=\"slides\"\r\n                                      [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n                                      *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                      <img loading=\"lazy\"  [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n                                          [alt]=\"item?.image?.altText\">\r\n                                  </div>\r\n                                  <div class=\"slides\" [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'\r\n                              }\" *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                      <img loading=\"lazy\"  [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n                                          [alt]=\"item?.image?.altText\">\r\n                                  </div>\r\n                              </div>\r\n                          </div>\r\n                      </div>\r\n                  </div>\r\n\r\n\r\n              </div>\r\n          </div>\r\n      </div>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n          <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n          <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n      </div>\r\n  </div>\r\n</div>\r\n", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{padding-left:15rem;padding-right:15rem;overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:8rem;display:flex;position:relative;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides2.logotype-basic{flex-shrink:0;width:auto;height:5rem;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-50%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft 5s linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;height:5rem;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity));justify-content:center;flex-grow:1;flex-shrink:0;width:auto;height:8rem;display:flex;position:relative}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (min-width: 375px) and (max-width: 500px){.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}\n"], dependencies: [{ kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: LogoShowcaseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-logo-showcase', standalone: true, imports: [SimpoButtonComponent, SimpoElementsModule, SanitizeHtmlPipe, SimpoComponentModule, CommonModule, MatGridListModule, AnimationDirective, BackgroundDirective, ContentFitDirective, BorderDirective, BannerContentFitDirective, ButtonDirectiveDirective, ColumnDirectiveDirective, ContainerFitDirective, CornerDirective, simpoConetenAlignmentDirective, SimpoFooterLayoutDirective, HoverDirective, ImageDirectiveDirective, OverlayDirective, PositionLayoutDirectiveDirective, TextBackgroundDirectiveDirective, ObjectPositionDirective], template: "<div *ngIf=\"styles?.showCaseType==='Grid'\" (click)=\"editSection()\">\n  <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n      class=\"total-container\">\n      <div class=\"col-xxl-8 px-4 py-5 w-100 \" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n          [simpoBorder]=\"styles?.border\">\n          <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n              [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n              *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\n              [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\n\n              <div class=\"col-5 gridimg w-full\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\n                  <div *ngFor=\"let item of content?.inputText\">\n                      <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\n                          [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n                      </div>\n                  </div>\n                  <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\n                      <div *ngFor=\"let button of data?.action?.buttons\">\n                          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n                              [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\n                              [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\n                      </div>\n                  </div>\n              </div>\n              <div class=\"col-7 d-flex flex-wrap flex-1 w-full\">\n                  <div class=\"slider flex overflow-hidden w-full\">\n                      <div class=\"slider-track\"\n                          [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n                          <div class=\"slides\"\n                              [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n                              *ngFor=\"let item of content?.listItem?.data;let i = index\">\n                              <img loading=\"lazy\"  [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\n                                  [alt]=\"item?.image?.altText\">\n                          </div>\n                      </div>\n                  </div>\n                  <!-- </div> -->\n              </div>\n          </div>\n          <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n              [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\n              <div class=\" px-5\" [id]=\"data?.id\"\n                  [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n                  <div *ngFor=\"let item of content?.inputText\">\n\n                      <div [innerHTML]=\"item.value\" class=\"text-element\"\n                          [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n                      </div>\n                  </div>\n              </div>\n              <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\n                  <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\n                  <div class=\"slider flex overflow-hidden w-full\">\n                      <div class=\"slider-track w-full\"\n                          [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n                          <div class=\"slides\"\n                              [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n                              *ngFor=\"let item of content?.listItem?.data;let i = index\">\n                              <img loading=\"lazy\"  [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\n                                  [alt]=\"item?.image?.altText\">\n                          </div>\n                      </div>\n                  </div>\n                  <!-- </div> -->\n              </div>\n\n\n\n          </div>\n      </div>\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n          <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n      </div>\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n          <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n      </div>\n  </div>\n</div>\n\n<div *ngIf=\"styles?.showCaseType==='Carousal'\" (click)=\"editSection()\">\n  <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n      class=\"total-container\">\n\n      <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n          [simpoBorder]=\"styles?.border\">\n          <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n              [simpoLayout]=\"styles?.layout\">\n              <div class=\"mainsec px-5\" [id]=\"data?.id\"\n                  [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n                  <div *ngFor=\"let item of content?.inputText\">\n\n                      <div [innerHTML]=\"item.value\" class=\"text-element\"\n                          [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n                      </div>\n                  </div>\n                  <div *ngIf=\"data?.action && data?.action?.display\" class=\"d-flex gap-2 d-md-flex mt-15\" [ngClass]=\"[\n                          styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n                          styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n                          styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n                      ]\">\n                      <div *ngFor=\"let button of data?.action?.buttons\">\n                          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n                              [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\n                              [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\n                      </div>\n                  </div>\n\n                  <div [ngClass]=\"{\n                      'fullwidth flex-1 inline-edit  ': styles?.fullWidth,\n                      'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\n                    }\">\n                      <div class=\"masking\">\n\n                          <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\n                              [style.animationDirection]=\"animationDirection\">\n                              <div class=\"slider-track2\"\n                                  [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n                                  <div class=\"slides2\"\n                                      [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n                                      *ngFor=\"let item of content?.listItem?.data;let i = index\">\n                                      <img loading=\"lazy\"  [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\n                                          [alt]=\"item?.image?.altText\">\n                                  </div>\n                                  <div class=\"slides\"\n                                      [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n                                      *ngFor=\"let item of content?.listItem?.data;let i = index\">\n                                      <img loading=\"lazy\"  [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\n                                          [alt]=\"item?.image?.altText\">\n                                  </div>\n                                  <div class=\"slides\" [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'\n                              }\" *ngFor=\"let item of content?.listItem?.data;let i = index\">\n                                      <img loading=\"lazy\"  [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\n                                          [alt]=\"item?.image?.altText\">\n                                  </div>\n                              </div>\n                          </div>\n                      </div>\n                  </div>\n\n\n              </div>\n          </div>\n      </div>\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n          <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n      </div>\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n          <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n      </div>\n  </div>\n</div>\n", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{padding-left:15rem;padding-right:15rem;overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:8rem;display:flex;position:relative;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides2.logotype-basic{flex-shrink:0;width:auto;height:5rem;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-50%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft 5s linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;height:5rem;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity));justify-content:center;flex-grow:1;flex-shrink:0;width:auto;height:8rem;display:flex;position:relative}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (min-width: 375px) and (max-width: 500px){.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}\n"] }]
+            args: [{ selector: 'simpo-logo-showcase', standalone: true, imports: [SimpoButtonComponent, SimpoElementsModule, SanitizeHtmlPipe, SimpoComponentModule, CommonModule, MatGridListModule, AnimationDirective, BackgroundDirective, ContentFitDirective, BorderDirective, BannerContentFitDirective, ButtonDirectiveDirective, ColumnDirectiveDirective, ContainerFitDirective, CornerDirective, simpoConetenAlignmentDirective, SimpoFooterLayoutDirective, HoverDirective, ImageDirectiveDirective, OverlayDirective, PositionLayoutDirectiveDirective, TextBackgroundDirectiveDirective, ObjectPositionDirective], template: "<div *ngIf=\"styles?.showCaseType==='Grid'\" (click)=\"editSection()\">\r\n  <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n      class=\"total-container\">\r\n      <div class=\"col-xxl-8 px-4 py-5 w-100 \" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n          [simpoBorder]=\"styles?.border\">\r\n          <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n              [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n              *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n              [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n              <div class=\"col-5 gridimg w-full\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n                      <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n                          [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                      </div>\r\n                  </div>\r\n                  <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n                      <div *ngFor=\"let button of data?.action?.buttons\">\r\n                          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                              [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n                              [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n              <div class=\"col-7 d-flex flex-wrap flex-1 w-full\">\r\n                  <div class=\"slider flex overflow-hidden w-full\">\r\n                      <div class=\"slider-track\"\r\n                          [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n                          <div class=\"slides\"\r\n                              [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n                              *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                              <img loading=\"lazy\"  [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n                                  [alt]=\"item?.image?.altText\">\r\n                          </div>\r\n                      </div>\r\n                  </div>\r\n                  <!-- </div> -->\r\n              </div>\r\n          </div>\r\n          <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n              [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n              <div class=\" px-5\" [id]=\"data?.id\"\r\n                  [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n\r\n                      <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n                          [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n              <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n                  <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n                  <div class=\"slider flex overflow-hidden w-full\">\r\n                      <div class=\"slider-track w-full\"\r\n                          [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n                          <div class=\"slides\"\r\n                              [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n                              *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                              <img loading=\"lazy\"  [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n                                  [alt]=\"item?.image?.altText\">\r\n                          </div>\r\n                      </div>\r\n                  </div>\r\n                  <!-- </div> -->\r\n              </div>\r\n\r\n\r\n\r\n          </div>\r\n      </div>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n          <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n          <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n      </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\" (click)=\"editSection()\">\r\n  <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n      class=\"total-container\">\r\n\r\n      <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n          [simpoBorder]=\"styles?.border\">\r\n          <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n              [simpoLayout]=\"styles?.layout\">\r\n              <div class=\"mainsec px-5\" [id]=\"data?.id\"\r\n                  [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n\r\n                      <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n                          [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                      </div>\r\n                  </div>\r\n                  <div *ngIf=\"data?.action && data?.action?.display\" class=\"d-flex gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n                          styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n                          styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n                          styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n                      ]\">\r\n                      <div *ngFor=\"let button of data?.action?.buttons\">\r\n                          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                              [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n                              [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                      </div>\r\n                  </div>\r\n\r\n                  <div [ngClass]=\"{\r\n                      'fullwidth flex-1 inline-edit  ': styles?.fullWidth,\r\n                      'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n                    }\">\r\n                      <div class=\"masking\">\r\n\r\n                          <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n                              [style.animationDirection]=\"animationDirection\">\r\n                              <div class=\"slider-track2\"\r\n                                  [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n                                  <div class=\"slides2\"\r\n                                      [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n                                      *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                      <img loading=\"lazy\"  [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n                                          [alt]=\"item?.image?.altText\">\r\n                                  </div>\r\n                                  <div class=\"slides\"\r\n                                      [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n                                      *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                      <img loading=\"lazy\"  [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n                                          [alt]=\"item?.image?.altText\">\r\n                                  </div>\r\n                                  <div class=\"slides\" [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'\r\n                              }\" *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                      <img loading=\"lazy\"  [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n                                          [alt]=\"item?.image?.altText\">\r\n                                  </div>\r\n                              </div>\r\n                          </div>\r\n                      </div>\r\n                  </div>\r\n\r\n\r\n              </div>\r\n          </div>\r\n      </div>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n          <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n          <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n      </div>\r\n  </div>\r\n</div>\r\n", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{padding-left:15rem;padding-right:15rem;overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:8rem;display:flex;position:relative;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides2.logotype-basic{flex-shrink:0;width:auto;height:5rem;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-50%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft 5s linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;height:5rem;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity));justify-content:center;flex-grow:1;flex-shrink:0;width:auto;height:8rem;display:flex;position:relative}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (min-width: 375px) and (max-width: 500px){.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -5876,7 +5885,7 @@ class BannerCarouselComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BannerCarouselComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BannerCarouselComponent, isStandalone: true, selector: "simpo-banner-carousel", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" (click)=\"editSection()\">\n  <div class=\"flex relative fix-safari-flickering\" [ngStyle]=\"{\n       'min-height': styles?.layout?.fit === 'content' ? 'calc(134px)' :\n                     styles?.layout?.fit === 'screen' ? 'calc(134px+ 100vh)' : '',\n       'padding-top': '0px',\n       'padding-bottom': '0px'\n     }\">\n    <div class=\"flex break-word w-full items-center\">\n\n      <div id=\"carouselExampleInterval\" class=\"carousel slide carousel-fade \" data-ride=\"carousel\" data-interval=\"2000\">\n        <ol class=\"carousel-indicators\">\n          <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\n            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\n        </ol>\n        <div class=\"carousel-inner\">\n          <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carousel-item \"\n            [ngClass]=\"{'active': i === currentIndex}\">\n            <img loading=\"lazy\"  [src]=\"item.image.url\" [simpoBlurContent]=\"getBlurValue\" class=\"imgclass w-100\"\n              alt=\"item.image.alt || 'Carousel image'\">\n            <div class=\"overlay\" [style.opacity]=\"getBackgroundOpacity\"\n              [style.backgroundColor]=\"styles?.background?.color ?? '#fff'\"></div>\n          </div>\n          <div class=\"col-xxl-8 px-5  mx-auto relative pb-20 pt-20 w-100 opacity-100 position-relative\"\n            style=\"z-index: 1;\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n            [simpoBorder]=\"styles?.border\">\n\n            <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n              [simpoLayout]=\"styles?.layout\"\n              [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n              <div class=\"col-lg-6 w-full max-w-2xl items-start cursor-pointer d-flex flex-column \"\n                [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\">\n                <div *ngFor=\"let item of content?.inputText\">\n                  <div [innerHTML]=\"item.value\" class=\"text-element\"\n                    [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-4' : 'body-large'\">\n                  </div>\n                </div>\n\n                <div *ngIf=\"data?.action && data?.action?.display\" class=\"customclass w-full\" [ngClass]=\"[\n                                                styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n                                                styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n                                                styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n                                            ]\">\n                  <div *ngFor=\"let button of data?.action?.buttons\" class=\"btn-container \">\n                    <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n                      [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\n                      [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</div>\n", styles: [".total-container{height:auto;position:relative}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e;border-radius:50%}.carousel-indicators .active{width:20px;height:10px;background-color:#fff;margin:1px;border-radius:0}.carousel-inner{height:80vh;position:relative;width:100%}.overlay{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}.carousel-item{position:relative;width:100%;height:100%}.carousel-item img{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.75;object-fit:cover}.carousel-indicators{bottom:0!important}.carousel-indicators .circle{width:10px;height:10px;border-radius:50%;background-color:gray}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}.heading-large{margin-left:0%!important}@media (min-width: 860px){.md\\:flex-row{flex-direction:row}}@media (min-width: 860px){.md\\:w-max{width:max-content}}@media (min-width: 860px){.md\\:inline-flex{display:inline-flex}}.btn-container{display:flex;justify-content:center;width:auto}.btn{padding:1rem 1.5rem}.customclass{display:inline-flex;flex-direction:row;gap:1rem;width:100%;margin-top:2rem}@media (max-width: 800px){.customclass{flex-direction:column;align-items:center}.btn-container{width:100%}.btn{width:100%;padding:1rem}}.pb-20{padding-bottom:50px}.pt-20{padding-top:50px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: SimpoBlurContentDirective, selector: "[simpoBlurContent]", inputs: ["simpoBlurContent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BannerCarouselComponent, isStandalone: true, selector: "simpo-banner-carousel", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div class=\"flex relative fix-safari-flickering\" [ngStyle]=\"{\r\n       'min-height': styles?.layout?.fit === 'content' ? 'calc(134px)' :\r\n                     styles?.layout?.fit === 'screen' ? 'calc(134px+ 100vh)' : '',\r\n       'padding-top': '0px',\r\n       'padding-bottom': '0px'\r\n     }\">\r\n    <div class=\"flex break-word w-full items-center\">\r\n\r\n      <div id=\"carouselExampleInterval\" class=\"carousel slide carousel-fade \" data-ride=\"carousel\" data-interval=\"2000\">\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\">\r\n          <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carousel-item \"\r\n            [ngClass]=\"{'active': i === currentIndex}\">\r\n            <img loading=\"lazy\"  [src]=\"item.image.url\" [simpoBlurContent]=\"getBlurValue\" class=\"imgclass w-100\"\r\n              alt=\"item.image.alt || 'Carousel image'\">\r\n            <div class=\"overlay\" [style.opacity]=\"getBackgroundOpacity\"\r\n              [style.backgroundColor]=\"styles?.background?.color ?? '#fff'\"></div>\r\n          </div>\r\n          <div class=\"col-xxl-8 px-5  mx-auto relative pb-20 pt-20 w-100 opacity-100 position-relative\"\r\n            style=\"z-index: 1;\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n            [simpoBorder]=\"styles?.border\">\r\n\r\n            <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n              [simpoLayout]=\"styles?.layout\"\r\n              [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n              <div class=\"col-lg-6 w-full max-w-2xl items-start cursor-pointer d-flex flex-column \"\r\n                [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\">\r\n                <div *ngFor=\"let item of content?.inputText\">\r\n                  <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n                    [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n                  </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"data?.action && data?.action?.display\" class=\"customclass w-full\" [ngClass]=\"[\r\n                                                styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n                                                styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n                                                styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n                                            ]\">\r\n                  <div *ngFor=\"let button of data?.action?.buttons\" class=\"btn-container \">\r\n                    <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                      [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n                      [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".total-container{height:auto;position:relative}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e;border-radius:50%}.carousel-indicators .active{width:20px;height:10px;background-color:#fff;margin:1px;border-radius:0}.carousel-inner{height:80vh;position:relative;width:100%}.overlay{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}.carousel-item{position:relative;width:100%;height:100%}.carousel-item img{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.75;object-fit:cover}.carousel-indicators{bottom:0!important}.carousel-indicators .circle{width:10px;height:10px;border-radius:50%;background-color:gray}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}.heading-large{margin-left:0%!important}@media (min-width: 860px){.md\\:flex-row{flex-direction:row}}@media (min-width: 860px){.md\\:w-max{width:max-content}}@media (min-width: 860px){.md\\:inline-flex{display:inline-flex}}.btn-container{display:flex;justify-content:center;width:auto}.btn{padding:1rem 1.5rem}.customclass{display:inline-flex;flex-direction:row;gap:1rem;width:100%;margin-top:2rem}@media (max-width: 800px){.customclass{flex-direction:column;align-items:center}.btn-container{width:100%}.btn{width:100%;padding:1rem}}.pb-20{padding-bottom:50px}.pt-20{padding-top:50px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: SimpoBlurContentDirective, selector: "[simpoBlurContent]", inputs: ["simpoBlurContent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BannerCarouselComponent, decorators: [{
             type: Component,
@@ -5907,7 +5916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         ColorDirective,
                         SimpoContainerAligment,
                         SimpoBlurContentDirective
-                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" (click)=\"editSection()\">\n  <div class=\"flex relative fix-safari-flickering\" [ngStyle]=\"{\n       'min-height': styles?.layout?.fit === 'content' ? 'calc(134px)' :\n                     styles?.layout?.fit === 'screen' ? 'calc(134px+ 100vh)' : '',\n       'padding-top': '0px',\n       'padding-bottom': '0px'\n     }\">\n    <div class=\"flex break-word w-full items-center\">\n\n      <div id=\"carouselExampleInterval\" class=\"carousel slide carousel-fade \" data-ride=\"carousel\" data-interval=\"2000\">\n        <ol class=\"carousel-indicators\">\n          <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\n            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\n        </ol>\n        <div class=\"carousel-inner\">\n          <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carousel-item \"\n            [ngClass]=\"{'active': i === currentIndex}\">\n            <img loading=\"lazy\"  [src]=\"item.image.url\" [simpoBlurContent]=\"getBlurValue\" class=\"imgclass w-100\"\n              alt=\"item.image.alt || 'Carousel image'\">\n            <div class=\"overlay\" [style.opacity]=\"getBackgroundOpacity\"\n              [style.backgroundColor]=\"styles?.background?.color ?? '#fff'\"></div>\n          </div>\n          <div class=\"col-xxl-8 px-5  mx-auto relative pb-20 pt-20 w-100 opacity-100 position-relative\"\n            style=\"z-index: 1;\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n            [simpoBorder]=\"styles?.border\">\n\n            <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n              [simpoLayout]=\"styles?.layout\"\n              [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n              <div class=\"col-lg-6 w-full max-w-2xl items-start cursor-pointer d-flex flex-column \"\n                [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\">\n                <div *ngFor=\"let item of content?.inputText\">\n                  <div [innerHTML]=\"item.value\" class=\"text-element\"\n                    [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-4' : 'body-large'\">\n                  </div>\n                </div>\n\n                <div *ngIf=\"data?.action && data?.action?.display\" class=\"customclass w-full\" [ngClass]=\"[\n                                                styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n                                                styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n                                                styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n                                            ]\">\n                  <div *ngFor=\"let button of data?.action?.buttons\" class=\"btn-container \">\n                    <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n                      [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\n                      [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</div>\n", styles: [".total-container{height:auto;position:relative}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e;border-radius:50%}.carousel-indicators .active{width:20px;height:10px;background-color:#fff;margin:1px;border-radius:0}.carousel-inner{height:80vh;position:relative;width:100%}.overlay{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}.carousel-item{position:relative;width:100%;height:100%}.carousel-item img{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.75;object-fit:cover}.carousel-indicators{bottom:0!important}.carousel-indicators .circle{width:10px;height:10px;border-radius:50%;background-color:gray}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}.heading-large{margin-left:0%!important}@media (min-width: 860px){.md\\:flex-row{flex-direction:row}}@media (min-width: 860px){.md\\:w-max{width:max-content}}@media (min-width: 860px){.md\\:inline-flex{display:inline-flex}}.btn-container{display:flex;justify-content:center;width:auto}.btn{padding:1rem 1.5rem}.customclass{display:inline-flex;flex-direction:row;gap:1rem;width:100%;margin-top:2rem}@media (max-width: 800px){.customclass{flex-direction:column;align-items:center}.btn-container{width:100%}.btn{width:100%;padding:1rem}}.pb-20{padding-bottom:50px}.pt-20{padding-top:50px}\n"] }]
+                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div class=\"flex relative fix-safari-flickering\" [ngStyle]=\"{\r\n       'min-height': styles?.layout?.fit === 'content' ? 'calc(134px)' :\r\n                     styles?.layout?.fit === 'screen' ? 'calc(134px+ 100vh)' : '',\r\n       'padding-top': '0px',\r\n       'padding-bottom': '0px'\r\n     }\">\r\n    <div class=\"flex break-word w-full items-center\">\r\n\r\n      <div id=\"carouselExampleInterval\" class=\"carousel slide carousel-fade \" data-ride=\"carousel\" data-interval=\"2000\">\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\">\r\n          <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carousel-item \"\r\n            [ngClass]=\"{'active': i === currentIndex}\">\r\n            <img loading=\"lazy\"  [src]=\"item.image.url\" [simpoBlurContent]=\"getBlurValue\" class=\"imgclass w-100\"\r\n              alt=\"item.image.alt || 'Carousel image'\">\r\n            <div class=\"overlay\" [style.opacity]=\"getBackgroundOpacity\"\r\n              [style.backgroundColor]=\"styles?.background?.color ?? '#fff'\"></div>\r\n          </div>\r\n          <div class=\"col-xxl-8 px-5  mx-auto relative pb-20 pt-20 w-100 opacity-100 position-relative\"\r\n            style=\"z-index: 1;\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n            [simpoBorder]=\"styles?.border\">\r\n\r\n            <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n              [simpoLayout]=\"styles?.layout\"\r\n              [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n              <div class=\"col-lg-6 w-full max-w-2xl items-start cursor-pointer d-flex flex-column \"\r\n                [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\">\r\n                <div *ngFor=\"let item of content?.inputText\">\r\n                  <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n                    [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n                  </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"data?.action && data?.action?.display\" class=\"customclass w-full\" [ngClass]=\"[\r\n                                                styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n                                                styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n                                                styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n                                            ]\">\r\n                  <div *ngFor=\"let button of data?.action?.buttons\" class=\"btn-container \">\r\n                    <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                      [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n                      [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".total-container{height:auto;position:relative}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e;border-radius:50%}.carousel-indicators .active{width:20px;height:10px;background-color:#fff;margin:1px;border-radius:0}.carousel-inner{height:80vh;position:relative;width:100%}.overlay{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}.carousel-item{position:relative;width:100%;height:100%}.carousel-item img{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.75;object-fit:cover}.carousel-indicators{bottom:0!important}.carousel-indicators .circle{width:10px;height:10px;border-radius:50%;background-color:gray}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}.heading-large{margin-left:0%!important}@media (min-width: 860px){.md\\:flex-row{flex-direction:row}}@media (min-width: 860px){.md\\:w-max{width:max-content}}@media (min-width: 860px){.md\\:inline-flex{display:inline-flex}}.btn-container{display:flex;justify-content:center;width:auto}.btn{padding:1rem 1.5rem}.customclass{display:inline-flex;flex-direction:row;gap:1rem;width:100%;margin-top:2rem}@media (max-width: 800px){.customclass{flex-direction:column;align-items:center}.btn-container{width:100%}.btn{width:100%;padding:1rem}}.pb-20{padding-bottom:50px}.pt-20{padding-top:50px}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -6220,7 +6229,7 @@ class SmallProductListingComponent {
         return BUSINESS_CONSTANTS.CURRENCY;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SmallProductListingComponent, deps: [{ token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SmallProductListingComponent, isStandalone: true, selector: "simpo-small-product-listing", inputs: { product: "product", data: "data" }, ngImport: i0, template: "<div class=\"product\" [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\">\n  <div class=\"prod-img\">\n    <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\">\n    <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\" [simpoColor]=\"data?.styles?.background?.color\"\n      *ngIf=\"getPercentage(product) > '0'\">{{getPercentage(product)}}% off</div>\n  </div>\n  <div class=\"p-2 h-40\">\n    <span class=\"trim-text color\">{{product.name}}</span>\n    <div class=\"bottom\">\n      <span class=\"m-1\">\n        <span class=\"discount-price color\"><span [innerHTML]=\"currency\"></span> {{product.price.discountedPrice}}</span>\n        <span class=\"strike-through\"><span [innerHTML]=\"currency\"></span> {{product.price.sellingPrice}}</span>\n      </span>\n      <div class=\"add-to-cart\"\n        [style.borderColor]=\"data.styles?.background?.accentColor\"\n        [ngClass]=\"{'justify-content-between p-0 d-flex': product.quantity, 'justify-content-center': !product.quantity}\">\n        <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\n          <ng-container *ngIf=\"!product.quantity\">\n            <span (click)=\"addItemToCart(product, 'ADD')\"  [style.color]=\"data.styles?.background?.accentColor\">Add to Cart</span>\n          </ng-container>\n          <ng-container *ngIf=\"product.quantity\">\n            <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'SUBSTRACT')\" [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\" [style.color]=\"data.styles?.background?.accentColor\">-</span>\n            <span class=\"quantity\"  [style.color]=\"data.styles?.background?.accentColor\">{{product.quantity}}</span>\n            <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'ADD')\" [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\" [style.color]=\"data.styles?.background?.accentColor\">+</span>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!product?.itemInventory?.openingStock\">\n          <span class=\"d-flex align-items-center justify-content-center w-100\">\n            <mat-icon>notification_important</mat-icon>\n            <span class=\"ml-2\">Notify</span>\n          </span>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- <ng-template #loadingScreen>\n  <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n          width: '100%',\n          height: '100%',\n          'border-radius': '10px',\n          'position': 'relative',\n          'right': '5px'\n        }\" />\n</ng-template> -->\n", styles: [".product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-right:10px;margin-bottom:10px;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;height:350px;background-color:#fff}.product .prod-img{position:relative;height:55%;width:100%;overflow:hidden;border:1.8px solid;border-radius:10px;border-color:#e5e7eb}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid transparent;border-radius:5px;padding:5px;text-align:center;align-items:center}.add-to-cart .quantity-btn{padding:5px}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}.h-40{height:45%;position:relative}.bottom{position:absolute;bottom:10px;width:93%;display:flex;flex-direction:column}.discount-price{font-weight:600;font-size:14px}.color{color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SmallProductListingComponent, isStandalone: true, selector: "simpo-small-product-listing", inputs: { product: "product", data: "data", isScrollable: "isScrollable" }, ngImport: i0, template: "<div class=\"product\" [ngClass]=\"{'width' : isScrollable}\" [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\">\r\n  <div class=\"prod-img\">\r\n    <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\">\r\n    <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\" [simpoColor]=\"data?.styles?.background?.color\"\r\n      *ngIf=\"getPercentage(product) > '0'\">{{getPercentage(product)}}% off</div>\r\n  </div>\r\n  <div class=\"p-2 h-40\">\r\n    <span class=\"trim-text color\">{{product.name}}</span>\r\n    <div class=\"bottom\">\r\n      <span class=\"m-1\">\r\n        <span class=\"discount-price color\"><span [innerHTML]=\"currency\"></span> {{product.price.discountedPrice}}</span>\r\n        <span class=\"strike-through\"><span [innerHTML]=\"currency\"></span> {{product.price.sellingPrice}}</span>\r\n      </span>\r\n      <div class=\"add-to-cart\"\r\n        [style.borderColor]=\"data.styles?.background?.accentColor\"\r\n        [ngClass]=\"{'justify-content-between p-0 d-flex': product.quantity, 'justify-content-center': !product.quantity}\">\r\n        <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n          <ng-container *ngIf=\"!product.quantity\">\r\n            <span (click)=\"addItemToCart(product, 'ADD')\"  [style.color]=\"data.styles?.background?.accentColor\">Add to Cart</span>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"product.quantity\">\r\n            <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'SUBSTRACT')\" [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\" [style.color]=\"data.styles?.background?.accentColor\">-</span>\r\n            <span class=\"quantity\"  [style.color]=\"data.styles?.background?.accentColor\">{{product.quantity}}</span>\r\n            <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'ADD')\" [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\" [style.color]=\"data.styles?.background?.accentColor\">+</span>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!product?.itemInventory?.openingStock\">\r\n          <span class=\"d-flex align-items-center justify-content-center w-100\">\r\n            <mat-icon>notification_important</mat-icon>\r\n            <span class=\"ml-2\">Notify</span>\r\n          </span>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- <ng-template #loadingScreen>\r\n  <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '100%',\r\n          height: '100%',\r\n          'border-radius': '10px',\r\n          'position': 'relative',\r\n          'right': '5px'\r\n        }\" />\r\n</ng-template> -->\r\n", styles: [".product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-bottom:10px;border-radius:10px;overflow:hidden;height:350px;background-color:#fff}.product .prod-img{position:relative;height:55%;width:100%;overflow:hidden;border:1.8px solid;border-radius:10px;border-color:#e5e7eb}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.width{margin-right:10px;min-width:195px;max-width:195px}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid transparent;border-radius:5px;padding:5px;text-align:center;align-items:center}.add-to-cart .quantity-btn{padding:5px}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}.h-40{height:45%;position:relative}.bottom{position:absolute;bottom:10px;width:93%;display:flex;flex-direction:column}.discount-price{font-weight:600;font-size:14px}.color{color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SmallProductListingComponent, decorators: [{
             type: Component,
@@ -6228,11 +6237,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         CommonModule,
                         MatIcon,
                         ColorDirective
-                    ], template: "<div class=\"product\" [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\">\n  <div class=\"prod-img\">\n    <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\">\n    <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\" [simpoColor]=\"data?.styles?.background?.color\"\n      *ngIf=\"getPercentage(product) > '0'\">{{getPercentage(product)}}% off</div>\n  </div>\n  <div class=\"p-2 h-40\">\n    <span class=\"trim-text color\">{{product.name}}</span>\n    <div class=\"bottom\">\n      <span class=\"m-1\">\n        <span class=\"discount-price color\"><span [innerHTML]=\"currency\"></span> {{product.price.discountedPrice}}</span>\n        <span class=\"strike-through\"><span [innerHTML]=\"currency\"></span> {{product.price.sellingPrice}}</span>\n      </span>\n      <div class=\"add-to-cart\"\n        [style.borderColor]=\"data.styles?.background?.accentColor\"\n        [ngClass]=\"{'justify-content-between p-0 d-flex': product.quantity, 'justify-content-center': !product.quantity}\">\n        <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\n          <ng-container *ngIf=\"!product.quantity\">\n            <span (click)=\"addItemToCart(product, 'ADD')\"  [style.color]=\"data.styles?.background?.accentColor\">Add to Cart</span>\n          </ng-container>\n          <ng-container *ngIf=\"product.quantity\">\n            <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'SUBSTRACT')\" [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\" [style.color]=\"data.styles?.background?.accentColor\">-</span>\n            <span class=\"quantity\"  [style.color]=\"data.styles?.background?.accentColor\">{{product.quantity}}</span>\n            <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'ADD')\" [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\" [style.color]=\"data.styles?.background?.accentColor\">+</span>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!product?.itemInventory?.openingStock\">\n          <span class=\"d-flex align-items-center justify-content-center w-100\">\n            <mat-icon>notification_important</mat-icon>\n            <span class=\"ml-2\">Notify</span>\n          </span>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- <ng-template #loadingScreen>\n  <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n          width: '100%',\n          height: '100%',\n          'border-radius': '10px',\n          'position': 'relative',\n          'right': '5px'\n        }\" />\n</ng-template> -->\n", styles: [".product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-right:10px;margin-bottom:10px;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;height:350px;background-color:#fff}.product .prod-img{position:relative;height:55%;width:100%;overflow:hidden;border:1.8px solid;border-radius:10px;border-color:#e5e7eb}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid transparent;border-radius:5px;padding:5px;text-align:center;align-items:center}.add-to-cart .quantity-btn{padding:5px}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}.h-40{height:45%;position:relative}.bottom{position:absolute;bottom:10px;width:93%;display:flex;flex-direction:column}.discount-price{font-weight:600;font-size:14px}.color{color:#000}\n"] }]
+                    ], template: "<div class=\"product\" [ngClass]=\"{'width' : isScrollable}\" [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\">\r\n  <div class=\"prod-img\">\r\n    <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\">\r\n    <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\" [simpoColor]=\"data?.styles?.background?.color\"\r\n      *ngIf=\"getPercentage(product) > '0'\">{{getPercentage(product)}}% off</div>\r\n  </div>\r\n  <div class=\"p-2 h-40\">\r\n    <span class=\"trim-text color\">{{product.name}}</span>\r\n    <div class=\"bottom\">\r\n      <span class=\"m-1\">\r\n        <span class=\"discount-price color\"><span [innerHTML]=\"currency\"></span> {{product.price.discountedPrice}}</span>\r\n        <span class=\"strike-through\"><span [innerHTML]=\"currency\"></span> {{product.price.sellingPrice}}</span>\r\n      </span>\r\n      <div class=\"add-to-cart\"\r\n        [style.borderColor]=\"data.styles?.background?.accentColor\"\r\n        [ngClass]=\"{'justify-content-between p-0 d-flex': product.quantity, 'justify-content-center': !product.quantity}\">\r\n        <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n          <ng-container *ngIf=\"!product.quantity\">\r\n            <span (click)=\"addItemToCart(product, 'ADD')\"  [style.color]=\"data.styles?.background?.accentColor\">Add to Cart</span>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"product.quantity\">\r\n            <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'SUBSTRACT')\" [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\" [style.color]=\"data.styles?.background?.accentColor\">-</span>\r\n            <span class=\"quantity\"  [style.color]=\"data.styles?.background?.accentColor\">{{product.quantity}}</span>\r\n            <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'ADD')\" [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\" [style.color]=\"data.styles?.background?.accentColor\">+</span>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!product?.itemInventory?.openingStock\">\r\n          <span class=\"d-flex align-items-center justify-content-center w-100\">\r\n            <mat-icon>notification_important</mat-icon>\r\n            <span class=\"ml-2\">Notify</span>\r\n          </span>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- <ng-template #loadingScreen>\r\n  <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '100%',\r\n          height: '100%',\r\n          'border-radius': '10px',\r\n          'position': 'relative',\r\n          'right': '5px'\r\n        }\" />\r\n</ng-template> -->\r\n", styles: [".product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-bottom:10px;border-radius:10px;overflow:hidden;height:350px;background-color:#fff}.product .prod-img{position:relative;height:55%;width:100%;overflow:hidden;border:1.8px solid;border-radius:10px;border-color:#e5e7eb}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.width{margin-right:10px;min-width:195px;max-width:195px}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid transparent;border-radius:5px;padding:5px;text-align:center;align-items:center}.add-to-cart .quantity-btn{padding:5px}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}.h-40{height:45%;position:relative}.bottom{position:absolute;bottom:10px;width:93%;display:flex;flex-direction:column}.discount-price{font-weight:600;font-size:14px}.color{color:#000}\n"] }]
         }], ctorParameters: () => [{ type: CartService }], propDecorators: { product: [{
                 type: Input
             }], data: [{
                 type: Input
+            }], isScrollable: [{
+                type: Input
             }] } });
 
 class SpacingHorizontalDirective {
@@ -6334,6 +6345,10 @@ class FeaturedProductsComponent extends BaseSection {
         if (this._eventSubscriber)
             this._eventSubscriber?.unsubscribe();
     }
+    applyProductWidth() {
+        return this.styles?.theme === this.theme.Theme1 ||
+            (this.screenWidth < 475 && this.styles?.theme == this.theme.Theme2 && this.styles?.direction != 'ROW');
+    }
     getProductWidth() {
         return this.screenWidth > 475 ? (this.screenWidth < 1025 ? '25%' : 'calc(' + ((100 / (this.styles?.elementInRow || 4))) + '%)') : (this.styles?.mobileColumn === 1 ? '100%' : '50%');
     }
@@ -6524,9 +6539,9 @@ class FeaturedProductsComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$3.Router }, { token: CartService }, { token: i5.MatBottomSheet }, { token: StorageServiceService }, { token: i7.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", edit: "edit", delete: "delete" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\n<ng-container *ngIf=\"!isLoading\">\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [simpoBackground]=\"styles?.background\" (click)=\"editSection()\">\n    <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\n      [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\">\n      <div *ngFor=\"let item of content?.inputText\">\n        <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n        </div>\n      </div>\n      <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\n        class=\"span-img mt-15\">\n      <ng-container *ngIf=\"!filterLoading\">\n        <div class=\"product-parent\" *ngIf=\"responseData && responseData?.length\"\n          [simpoWrapContainer]=\"styles?.direction\">\n          <div\n            *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\n            class=\"product\" [style.padding.px]=\"styles?.theme == theme.Theme2 ? '3' : ''\" [style.minWidth]=\"styles?.theme == theme.Theme1 ? getProductWidth() : ''\" [style.maxWidth]=\"styles?.theme == theme.Theme1 ? getProductWidth() : ''\">\n           <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\n            <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\n           </ng-container>\n           <ng-container *ngIf=\"styles?.theme == theme.Theme2\">\n            <simpo-small-product-listing [product]=\"product\" [data]=\"data\"></simpo-small-product-listing>\n           </ng-container>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ng-template #VarientList let-product=\"data\">\n  <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\n    <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\n      <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n        [src]=\"varient.variantImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n        alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\n        [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\n        (click)=\"selectVarient(product, varient)\">\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #FavouriteTags let-product=\"data\">\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n    (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n    (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\n</ng-template>\n\n<ng-template #AddToCart let-product=\"data\">\n  <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\n    <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\n      [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\n      (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\n    <div class=\"quantity\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\n      <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\n      <span>{{product.quantity}}</span>\n      <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\n    </div>\n    <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n  </div>\n</ng-template>\n\n<ng-template #ProductPricing let-product=\"data\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <div class=\"price body-large d-flex\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\n      <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\n        <span [innerHTML]='currency'></span>\n        {{product.price.value}}\n      </div> -->\n      <div class=\"discounted-price\">\n        <span [innerHTML]='currency | sanitizeHtml'></span>\n        {{product.price.discountedPrice}}\n      </div>\n    </div>\n    <ng-container *ngIf=\"!product.itemVariant?.length\">\n      <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\n  <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative\" [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : '230' ) : ''\">\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n      [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\n      class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\n      (mouseleave)=\"product.prviewIdx = 0\">\n  </div>\n  <div class=\"mt-15 w-100\">\n    <div class=\"product-name heading-large text-left trim-text w-100\" [id]=\"data?.id\"\n      [simpoColor]=\"styles?.background?.color\">\n      {{product.name }}</div>\n    <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\n  </div>\n</ng-template>\n\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:space-between}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.product-img{height:100%}.default-image img{height:250px}.out-of-stock{font-size:12px!important}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { 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: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", edit: "edit", delete: "delete" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [simpoBackground]=\"styles?.background\" (click)=\"editSection()\">\r\n    <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n      [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      <ng-container *ngIf=\"!filterLoading\">\r\n        <div class=\"product-parent\" *ngIf=\"responseData && responseData?.length\"\r\n          [simpoWrapContainer]=\"styles?.direction\">\r\n          <div\r\n            *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n            class=\"product\" [style.padding.px]=\"styles?.theme == theme.Theme2 ? '3' : ''\" [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\" [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\r\n           <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n            <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n           </ng-container>\r\n           <div *ngIf=\"styles?.theme == theme.Theme2\">\r\n            <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n           </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\r\n  <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n    <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n      <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n        [src]=\"varient.variantImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n        alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n        [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n        (click)=\"selectVarient(product, varient)\">\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n    (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n    (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n  <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n    <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n      [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\r\n      (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n    <div class=\"quantity\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n      <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n      <span>{{product.quantity}}</span>\r\n      <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n    </div>\r\n    <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n  <div class=\"d-flex justify-content-between align-items-center\">\r\n    <div class=\"price body-large d-flex\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n      <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n        <span [innerHTML]='currency'></span>\r\n        {{product.price.value}}\r\n      </div> -->\r\n      <div class=\"discounted-price\">\r\n        <span [innerHTML]='currency | sanitizeHtml'></span>\r\n        {{product.price.discountedPrice}}\r\n      </div>\r\n    </div>\r\n    <ng-container *ngIf=\"!product.itemVariant?.length\">\r\n      <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n  <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative\" [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : '230' ) : ''\">\r\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n      [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\r\n      class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\r\n      (mouseleave)=\"product.prviewIdx = 0\">\r\n  </div>\r\n  <div class=\"mt-15 w-100\">\r\n    <div class=\"product-name heading-large text-left trim-text w-100\" [id]=\"data?.id\"\r\n      [simpoColor]=\"styles?.background?.color\">\r\n      {{product.name }}</div>\r\n    <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:space-between}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.product-img{height:100%}.default-image img{height:250px}.out-of-stock{font-size:12px!important}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { 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: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
                 //directive
-                SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }, { kind: "directive", type: SimpoWrapComntainer, selector: "[simpoWrapContainer]", inputs: ["simpoWrapContainer"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data"] }] }); }
+                SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }, { kind: "directive", type: SimpoWrapComntainer, selector: "[simpoWrapContainer]", inputs: ["simpoWrapContainer"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedProductsComponent, decorators: [{
             type: Component,
@@ -6552,7 +6567,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         ToastModule,
                         SanitizeHtmlPipe,
                         SmallProductListingComponent
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\n<ng-container *ngIf=\"!isLoading\">\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [simpoBackground]=\"styles?.background\" (click)=\"editSection()\">\n    <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\n      [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\">\n      <div *ngFor=\"let item of content?.inputText\">\n        <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n        </div>\n      </div>\n      <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\n        class=\"span-img mt-15\">\n      <ng-container *ngIf=\"!filterLoading\">\n        <div class=\"product-parent\" *ngIf=\"responseData && responseData?.length\"\n          [simpoWrapContainer]=\"styles?.direction\">\n          <div\n            *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\n            class=\"product\" [style.padding.px]=\"styles?.theme == theme.Theme2 ? '3' : ''\" [style.minWidth]=\"styles?.theme == theme.Theme1 ? getProductWidth() : ''\" [style.maxWidth]=\"styles?.theme == theme.Theme1 ? getProductWidth() : ''\">\n           <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\n            <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\n           </ng-container>\n           <ng-container *ngIf=\"styles?.theme == theme.Theme2\">\n            <simpo-small-product-listing [product]=\"product\" [data]=\"data\"></simpo-small-product-listing>\n           </ng-container>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ng-template #VarientList let-product=\"data\">\n  <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\n    <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\n      <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n        [src]=\"varient.variantImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n        alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\n        [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\n        (click)=\"selectVarient(product, varient)\">\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #FavouriteTags let-product=\"data\">\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n    (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n    (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\n</ng-template>\n\n<ng-template #AddToCart let-product=\"data\">\n  <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\n    <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\n      [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\n      (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\n    <div class=\"quantity\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\n      <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\n      <span>{{product.quantity}}</span>\n      <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\n    </div>\n    <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n  </div>\n</ng-template>\n\n<ng-template #ProductPricing let-product=\"data\">\n  <div class=\"d-flex justify-content-between align-items-center\">\n    <div class=\"price body-large d-flex\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\n      <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\n        <span [innerHTML]='currency'></span>\n        {{product.price.value}}\n      </div> -->\n      <div class=\"discounted-price\">\n        <span [innerHTML]='currency | sanitizeHtml'></span>\n        {{product.price.discountedPrice}}\n      </div>\n    </div>\n    <ng-container *ngIf=\"!product.itemVariant?.length\">\n      <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\n  <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative\" [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : '230' ) : ''\">\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n      [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\n      class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\n      (mouseleave)=\"product.prviewIdx = 0\">\n  </div>\n  <div class=\"mt-15 w-100\">\n    <div class=\"product-name heading-large text-left trim-text w-100\" [id]=\"data?.id\"\n      [simpoColor]=\"styles?.background?.color\">\n      {{product.name }}</div>\n    <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\n  </div>\n</ng-template>\n\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:space-between}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.product-img{height:100%}.default-image img{height:250px}.out-of-stock{font-size:12px!important}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"] }]
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [simpoBackground]=\"styles?.background\" (click)=\"editSection()\">\r\n    <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n      [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      <ng-container *ngIf=\"!filterLoading\">\r\n        <div class=\"product-parent\" *ngIf=\"responseData && responseData?.length\"\r\n          [simpoWrapContainer]=\"styles?.direction\">\r\n          <div\r\n            *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n            class=\"product\" [style.padding.px]=\"styles?.theme == theme.Theme2 ? '3' : ''\" [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\" [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\r\n           <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n            <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n           </ng-container>\r\n           <div *ngIf=\"styles?.theme == theme.Theme2\">\r\n            <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n           </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\r\n  <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n    <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n      <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n        [src]=\"varient.variantImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n        alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n        [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n        (click)=\"selectVarient(product, varient)\">\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n    (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n    (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n  <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n    <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n      [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\r\n      (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n    <div class=\"quantity\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n      <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n      <span>{{product.quantity}}</span>\r\n      <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n    </div>\r\n    <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n  <div class=\"d-flex justify-content-between align-items-center\">\r\n    <div class=\"price body-large d-flex\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n      <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n        <span [innerHTML]='currency'></span>\r\n        {{product.price.value}}\r\n      </div> -->\r\n      <div class=\"discounted-price\">\r\n        <span [innerHTML]='currency | sanitizeHtml'></span>\r\n        {{product.price.discountedPrice}}\r\n      </div>\r\n    </div>\r\n    <ng-container *ngIf=\"!product.itemVariant?.length\">\r\n      <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n  <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative\" [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : '230' ) : ''\">\r\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n      [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\r\n      class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\r\n      (mouseleave)=\"product.prviewIdx = 0\">\r\n  </div>\r\n  <div class=\"mt-15 w-100\">\r\n    <div class=\"product-name heading-large text-left trim-text w-100\" [id]=\"data?.id\"\r\n      [simpoColor]=\"styles?.background?.color\">\r\n      {{product.name }}</div>\r\n    <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:space-between}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.product-img{height:100%}.default-image img{height:250px}.out-of-stock{font-size:12px!important}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -6626,7 +6641,7 @@ class FeaturedCategoryComponent extends BaseSection {
         return window.innerWidth <= 475;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedCategoryComponent, deps: [{ token: PLATFORM_ID }, { token: i2$3.Router }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedCategoryComponent, isStandalone: true, selector: "simpo-featured-category", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\n    [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\n    <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n      [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\">\n      <div *ngFor=\"let item of content?.inputText\">\n        <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n        </div>\n      </div>\n      <!-- <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\n        class=\"span-img mt-15\"> -->\n      <div class=\"category-parent\"  [ngClass]=\"{'flex-wrap': styles?.direction == 'ROW'}\">\n        <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" (click)=\"redirectToListPage(data)\">\n          <img [style.borderRadius.px]=\"styles?.border?.radius\" [style.height.px]=\"styles?.containerHeight\" [style.width.px]=\"styles?.containerWidth\" loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"category-image\">\n          <div class=\"category-name body-large\" *ngIf=\"content?.display?.showHeading\">{{data.categoryName}}</div>\n        </div>\n      </div>\n    </div>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;width:100%;margin-top:25px;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{height:230px;width:230px;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { 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: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedCategoryComponent, isStandalone: true, selector: "simpo-featured-category", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n    [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n    <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n      [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <!-- <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\"> -->\r\n      <div class=\"category-parent\"  [ngClass]=\"{'flex-wrap': styles?.direction == 'ROW'}\">\r\n        <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" (click)=\"redirectToListPage(data)\">\r\n          <img [style.borderRadius.px]=\"styles?.border?.radius\" [style.height.px]=\"styles?.containerHeight\" [style.width.px]=\"styles?.containerWidth\" loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"category-image\">\r\n          <div class=\"category-name body-large\" *ngIf=\"content?.display?.showHeading\">{{data.categoryName}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;width:100%;margin-top:25px;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{height:230px;width:230px;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { 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: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
 }
@@ -6647,7 +6662,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         TextBackgroundDirectiveDirective,
                         ColorDirective,
                         SanitizeHtmlPipe
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\n    [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\n    <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n      [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\">\n      <div *ngFor=\"let item of content?.inputText\">\n        <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n        </div>\n      </div>\n      <!-- <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\n        class=\"span-img mt-15\"> -->\n      <div class=\"category-parent\"  [ngClass]=\"{'flex-wrap': styles?.direction == 'ROW'}\">\n        <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" (click)=\"redirectToListPage(data)\">\n          <img [style.borderRadius.px]=\"styles?.border?.radius\" [style.height.px]=\"styles?.containerHeight\" [style.width.px]=\"styles?.containerWidth\" loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"category-image\">\n          <div class=\"category-name body-large\" *ngIf=\"content?.display?.showHeading\">{{data.categoryName}}</div>\n        </div>\n      </div>\n    </div>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;width:100%;margin-top:25px;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{height:230px;width:230px;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n    [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n    <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n      [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <!-- <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\"> -->\r\n      <div class=\"category-parent\"  [ngClass]=\"{'flex-wrap': styles?.direction == 'ROW'}\">\r\n        <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" (click)=\"redirectToListPage(data)\">\r\n          <img [style.borderRadius.px]=\"styles?.border?.radius\" [style.height.px]=\"styles?.containerHeight\" [style.width.px]=\"styles?.containerWidth\" loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"category-image\">\r\n          <div class=\"category-name body-large\" *ngIf=\"content?.display?.showHeading\">{{data.categoryName}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;width:100%;margin-top:25px;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{height:230px;width:230px;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -7007,7 +7022,7 @@ class ProductDescComponent extends BaseSection {
         return window.innerWidth <= 475;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i7.MessageService }, { token: i1.Meta }, { token: i1.Title }, { token: i5.MatBottomSheet }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\n    simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n      <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\n        <span>{{ responseData?.name | titlecase }}</span>\n      </div>\n      <div class=\"row\" style=\"min-height: 95vh;\">\n        <div class=\"col-lg-6 col-12 h-100\">\n          <div class=\"prod-img-block\">\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n          </div>\n        </div>\n        <div class=\"col-lg-6 col-12 h-100 product-detail\">\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n          <ng-container *ngIf=\"!isMobile\">\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngFor=\"let varient of varients | keyvalue\">\n            <div>\n              <div class=\"varient-key\">{{varient.key}}</div>\n              <div class=\"d-flex\" style=\"gap: 5px;\">\n                \n                <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\n                <div *ngFor=\"let varientValue of varient.value\"\n                class=\"varient-tag\"\n                  [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n                  [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n                  (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\n              </div>\n            </div>\n          </ng-container>\n\n          <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\n          <div class=\"product-sku\">\n            <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\n            <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\"\n                (click)=\"goToFilter(cat.refName)\"\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\n                titlecase}} <ng-container\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\n              </a></div>\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\n              </span></div>\n          </div>\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container>\n          <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container> -->\n        </div>\n      </div>\n      <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\n        <div class=\"tab-group\">\n          <div class=\"tab\">Description</div>\n        </div>\n        <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.descriptor\"\n          [innerHTML]=\"responseData?.descriptor?.name\"></div>\n      </div>\n    </section>\n    <ng-container *ngIf=\"relatedProductData?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n\n<div class=\"mobile-footer\">\n  <div class=\"icons\">\n    <div (click)=\"goToCart()\">\n      <mat-icon>shopping_cart</mat-icon>\n    </div>\n    <div>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n      <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\n    </div>\n  </div>\n  <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\n    <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\n  </div>\n  <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n    [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\n    *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n</div>\n\n<ng-template #ReviewSection>\n  <div class=\"review-sec\">\n    <div class=\"title\">Customer Review</div>\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n    <span>Be the first to write a review</span>\n    <button class=\"mt-3\"  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n    [color]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add Review' : 'Cancel Review'}}</button>\n    <ng-container *ngIf=\"showReview\">\n      <hr />\n      <div class=\"user-review\">\n        <div class=\"title\">Write a review</div>\n        <span class=\"secondary-text\">RATING</span>\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n        <div>\n          <span class=\"secondary-text\">Review Title</span>\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n        </div>\n        <div>\n          <span class=\"secondary-text\">Review</span>\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n        </div>\n        <div class=\"review-action-btn\">\n          <button  [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n          <button  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n          [color]=\"data?.styles?.background?.accentColor\" (click)=\"addProductReview()\">Submit review</button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n<ng-template #SocialIcons>\n  <div class=\"d-flex\">\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n          <div style=\"position: relative;margin-right: 10px;\">\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n  <div class=\"button-parent\">\n    <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\n      <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\n    </div>\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\n      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n        [color]=\"data?.styles?.background?.accentColor\"\n        (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n    </div>\n    <div class=\"favourite\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n  </div>\n</ng-template>\n<ng-template #ProductDesc>\n  <div class=\"heading-large trim-text\">{{responseData?.name}}</div>\n  <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\n    <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n      *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span>\n      {{responseData?.price?.value}}</div>\n    <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\n      {{responseData?.price?.discountedPrice}}</div>\n    <div class=\"tax-text\">(excluding all taxes)</div>\n  </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n  <ng-container *ngIf=\"!varientLoading\">\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\n      <ng-container *ngFor=\"let img of itemImages\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n      </ng-container>\n    </div>\n    <div class=\"item-img\">\n      <ng-container *ngIf=\"currentImg\">\n        <ng-container *ngIf=\"!isMobile\">\n          <lib-ngx-image-zoom [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\" [magnification]=\"2\"\n            [lensHeight]=\"100\" [lensWidth]=\"100\" style=\"height: 100%; width: 100%;\"></lib-ngx-image-zoom>\n        </ng-container>\n        <ng-container *ngIf=\"isMobile\">\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!currentImg\">\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\n      </ng-container>\n    </div>\n    <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\n      <ng-container *ngFor=\"let img of itemImages\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\n      </ng-container>\n    </div>\n  </ng-container>\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n      width: '100%',\n      height: '100%',\n      'border-radius': '10px',\n      'position': 'relative',\n      'right': '5px'\n    }\">\n    </ngx-skeleton-loader>\n  </div>\n</ng-template>\n\n\n\n\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h5 class=\"modal-title\">Right-to-Left Modal</h5>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n      </div>\n      <div class=\"modal-body\">\n        This content is aligned from right to left.\n      </div>\n      <div class=\"modal-footer\">\n        <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\n        <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\n      </div>\n    </div>\n  </div>\n</div> -->", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;height:100%;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:100%;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px;width:155px;justify-content:space-between;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px;width:40%!important;color:#fff!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%!important;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:25%!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.mobile-footer{display:none}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;border:none!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{height:25%;width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: i14.NgxImageZoomComponent, selector: "lib-ngx-image-zoom", inputs: ["thumbImage", "fullImage", "zoomMode", "magnification", "minZoomRatio", "maxZoomRatio", "scrollStepSize", "enableLens", "lensWidth", "lensHeight", "circularLens", "enableScrollZoom", "altText", "titleText"], outputs: ["zoomScroll", "zoomPosition", "imagesLoaded"] }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "edit", "delete"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i15.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n    simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div>\r\n      <div class=\"row\" style=\"min-height: 95vh;\">\r\n        <div class=\"col-lg-6 col-12 h-100\">\r\n          <div class=\"prod-img-block\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-12 h-100 product-detail\">\r\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n            <div>\r\n              <div class=\"varient-key\">{{varient.key}}</div>\r\n              <div class=\"d-flex\" style=\"gap: 5px;\">\r\n                \r\n                <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\r\n                <div *ngFor=\"let varientValue of varient.value\"\r\n                class=\"varient-tag\"\r\n                  [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n                  [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n          <div class=\"product-sku\">\r\n            <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\r\n            <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\"\r\n                (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n              </a></div>\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\r\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container> -->\r\n        </div>\r\n      </div>\r\n      <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\r\n        <div class=\"tab-group\">\r\n          <div class=\"tab\">Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n      <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\r\n    </div>\r\n  </div>\r\n  <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\r\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n    <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n  </div>\r\n  <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n    *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\"  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [color]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button  [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n          [color]=\"data?.styles?.background?.accentColor\" (click)=\"addProductReview()\">Submit review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n  <div class=\"d-flex\">\r\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n      <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n    </div>\r\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n        [color]=\"data?.styles?.background?.accentColor\"\r\n        (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"favourite\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #ProductDesc>\r\n  <div class=\"heading-large trim-text\">{{responseData?.name}}</div>\r\n  <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n    <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n      *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.value}}</div>\r\n    <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.discountedPrice}}</div>\r\n    <div class=\"tax-text\">(excluding all taxes)</div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading\">\r\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <lib-ngx-image-zoom [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\" [magnification]=\"2\"\r\n            [lensHeight]=\"100\" [lensWidth]=\"100\" style=\"height: 100%; width: 100%;\"></lib-ngx-image-zoom>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px',\r\n      'position': 'relative',\r\n      'right': '5px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        This content is aligned from right to left.\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n        <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div> -->", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;height:100%;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:100%;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px;width:155px;justify-content:space-between;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px;width:40%!important;color:#fff!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%!important;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:25%!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.mobile-footer{display:none}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;border:none!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{height:25%;width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: i14.NgxImageZoomComponent, selector: "lib-ngx-image-zoom", inputs: ["thumbImage", "fullImage", "zoomMode", "magnification", "minZoomRatio", "maxZoomRatio", "scrollStepSize", "enableLens", "lensWidth", "lensHeight", "circularLens", "enableScrollZoom", "altText", "titleText"], outputs: ["zoomScroll", "zoomPosition", "imagesLoaded"] }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "edit", "delete"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i15.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, decorators: [{
             type: Component,
@@ -7030,7 +7045,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         SociaIconsComponent,
                         RatingModule,
                         ToastModule
-                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\n    simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n      <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\n        <span>{{ responseData?.name | titlecase }}</span>\n      </div>\n      <div class=\"row\" style=\"min-height: 95vh;\">\n        <div class=\"col-lg-6 col-12 h-100\">\n          <div class=\"prod-img-block\">\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n          </div>\n        </div>\n        <div class=\"col-lg-6 col-12 h-100 product-detail\">\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n          <ng-container *ngIf=\"!isMobile\">\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngFor=\"let varient of varients | keyvalue\">\n            <div>\n              <div class=\"varient-key\">{{varient.key}}</div>\n              <div class=\"d-flex\" style=\"gap: 5px;\">\n                \n                <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\n                <div *ngFor=\"let varientValue of varient.value\"\n                class=\"varient-tag\"\n                  [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n                  [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n                  (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\n              </div>\n            </div>\n          </ng-container>\n\n          <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\n          <div class=\"product-sku\">\n            <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\n            <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\"\n                (click)=\"goToFilter(cat.refName)\"\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\n                titlecase}} <ng-container\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\n              </a></div>\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\n              </span></div>\n          </div>\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container>\n          <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container> -->\n        </div>\n      </div>\n      <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\n        <div class=\"tab-group\">\n          <div class=\"tab\">Description</div>\n        </div>\n        <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.descriptor\"\n          [innerHTML]=\"responseData?.descriptor?.name\"></div>\n      </div>\n    </section>\n    <ng-container *ngIf=\"relatedProductData?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n\n<div class=\"mobile-footer\">\n  <div class=\"icons\">\n    <div (click)=\"goToCart()\">\n      <mat-icon>shopping_cart</mat-icon>\n    </div>\n    <div>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n      <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\n    </div>\n  </div>\n  <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\n    <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\n  </div>\n  <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n    [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\n    *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n</div>\n\n<ng-template #ReviewSection>\n  <div class=\"review-sec\">\n    <div class=\"title\">Customer Review</div>\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n    <span>Be the first to write a review</span>\n    <button class=\"mt-3\"  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n    [color]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add Review' : 'Cancel Review'}}</button>\n    <ng-container *ngIf=\"showReview\">\n      <hr />\n      <div class=\"user-review\">\n        <div class=\"title\">Write a review</div>\n        <span class=\"secondary-text\">RATING</span>\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n        <div>\n          <span class=\"secondary-text\">Review Title</span>\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n        </div>\n        <div>\n          <span class=\"secondary-text\">Review</span>\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n        </div>\n        <div class=\"review-action-btn\">\n          <button  [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n          <button  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n          [color]=\"data?.styles?.background?.accentColor\" (click)=\"addProductReview()\">Submit review</button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n<ng-template #SocialIcons>\n  <div class=\"d-flex\">\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n          <div style=\"position: relative;margin-right: 10px;\">\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n  <div class=\"button-parent\">\n    <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\n      <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\n    </div>\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\n      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n        [color]=\"data?.styles?.background?.accentColor\"\n        (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n    </div>\n    <div class=\"favourite\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n  </div>\n</ng-template>\n<ng-template #ProductDesc>\n  <div class=\"heading-large trim-text\">{{responseData?.name}}</div>\n  <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\n    <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n      *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span>\n      {{responseData?.price?.value}}</div>\n    <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\n      {{responseData?.price?.discountedPrice}}</div>\n    <div class=\"tax-text\">(excluding all taxes)</div>\n  </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n  <ng-container *ngIf=\"!varientLoading\">\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\n      <ng-container *ngFor=\"let img of itemImages\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n      </ng-container>\n    </div>\n    <div class=\"item-img\">\n      <ng-container *ngIf=\"currentImg\">\n        <ng-container *ngIf=\"!isMobile\">\n          <lib-ngx-image-zoom [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\" [magnification]=\"2\"\n            [lensHeight]=\"100\" [lensWidth]=\"100\" style=\"height: 100%; width: 100%;\"></lib-ngx-image-zoom>\n        </ng-container>\n        <ng-container *ngIf=\"isMobile\">\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!currentImg\">\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\n      </ng-container>\n    </div>\n    <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\n      <ng-container *ngFor=\"let img of itemImages\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\n      </ng-container>\n    </div>\n  </ng-container>\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n      width: '100%',\n      height: '100%',\n      'border-radius': '10px',\n      'position': 'relative',\n      'right': '5px'\n    }\">\n    </ngx-skeleton-loader>\n  </div>\n</ng-template>\n\n\n\n\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h5 class=\"modal-title\">Right-to-Left Modal</h5>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n      </div>\n      <div class=\"modal-body\">\n        This content is aligned from right to left.\n      </div>\n      <div class=\"modal-footer\">\n        <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\n        <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\n      </div>\n    </div>\n  </div>\n</div> -->", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;height:100%;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:100%;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px;width:155px;justify-content:space-between;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px;width:40%!important;color:#fff!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%!important;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:25%!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.mobile-footer{display:none}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;border:none!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{height:25%;width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}\n"] }]
+                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n    simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div>\r\n      <div class=\"row\" style=\"min-height: 95vh;\">\r\n        <div class=\"col-lg-6 col-12 h-100\">\r\n          <div class=\"prod-img-block\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-12 h-100 product-detail\">\r\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n            <div>\r\n              <div class=\"varient-key\">{{varient.key}}</div>\r\n              <div class=\"d-flex\" style=\"gap: 5px;\">\r\n                \r\n                <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\r\n                <div *ngFor=\"let varientValue of varient.value\"\r\n                class=\"varient-tag\"\r\n                  [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n                  [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n          <div class=\"product-sku\">\r\n            <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\r\n            <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\"\r\n                (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n              </a></div>\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\r\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container> -->\r\n        </div>\r\n      </div>\r\n      <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\r\n        <div class=\"tab-group\">\r\n          <div class=\"tab\">Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n      <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\r\n    </div>\r\n  </div>\r\n  <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\r\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n    <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n  </div>\r\n  <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n    *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\"  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [color]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button  [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n          [color]=\"data?.styles?.background?.accentColor\" (click)=\"addProductReview()\">Submit review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n  <div class=\"d-flex\">\r\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n      <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n    </div>\r\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n        [color]=\"data?.styles?.background?.accentColor\"\r\n        (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"favourite\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #ProductDesc>\r\n  <div class=\"heading-large trim-text\">{{responseData?.name}}</div>\r\n  <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n    <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n      *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.value}}</div>\r\n    <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.discountedPrice}}</div>\r\n    <div class=\"tax-text\">(excluding all taxes)</div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading\">\r\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <lib-ngx-image-zoom [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\" [magnification]=\"2\"\r\n            [lensHeight]=\"100\" [lensWidth]=\"100\" style=\"height: 100%; width: 100%;\"></lib-ngx-image-zoom>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px',\r\n      'position': 'relative',\r\n      'right': '5px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        This content is aligned from right to left.\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n        <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div> -->", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;height:100%;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:100%;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px;width:155px;justify-content:space-between;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px;width:40%!important;color:#fff!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%!important;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:25%!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.mobile-footer{display:none}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;border:none!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{height:25%;width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -7073,13 +7088,13 @@ class PagninationComponent {
         // this.router.navigate(['/list'], { queryParams: {pageNo: this.currentPage} });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PagninationComponent, deps: [{ token: i2$3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PagninationComponent, isStandalone: true, selector: "simpo-pagnination", inputs: { totalPages: "totalPages", currentPage: "currentPage" }, outputs: { paginationChange: "paginationChange" }, ngImport: i0, template: "<section class=\"d-flex w-100 justify-content-center main-section\">\n    <div class=\"pagniation-btn\" (click)=\"goToPrev()\" [style.visibility]=\"currentPage == 1 ? 'hidden' : 'visible'\">Prev</div>\n    <ng-container *ngFor=\"let _ of [].constructor(totalPages); let idx = index\">\n        <span class=\"pagniation-btn\" [ngClass]=\"{'selected-page': (idx +1) == currentPage}\" (click)=\"goToSelection(idx)\">{{idx +1}}</span>\n    </ng-container>\n    <!-- <div *ngIf=\"totalPages > 6\" class=\"d-flex align-items-center\">\n        <span class=\"pagniation-btn fs-2\">...</span>\n        <span class=\"pagniation-btn\">{{totalPages}}</span>\n    </div> -->\n    <div class=\"pagniation-btn\" (click)=\"goToNext()\" [style.visibility]=\"currentPage == totalPages ? 'hidden' : 'visible'\">Next</div>\n</section>\n", styles: [".pagniation-btn{font-size:14px;padding:5px;border-radius:2px;width:45px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000}.selected-page{background-color:#000;color:#fff}@media only screen and (max-width: 475px){.main-section{position:relative;right:22px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PagninationComponent, isStandalone: true, selector: "simpo-pagnination", inputs: { totalPages: "totalPages", currentPage: "currentPage" }, outputs: { paginationChange: "paginationChange" }, ngImport: i0, template: "<section class=\"d-flex w-100 justify-content-center main-section\">\r\n    <div class=\"pagniation-btn\" (click)=\"goToPrev()\" [style.visibility]=\"currentPage == 1 ? 'hidden' : 'visible'\">Prev</div>\r\n    <ng-container *ngFor=\"let _ of [].constructor(totalPages); let idx = index\">\r\n        <span class=\"pagniation-btn\" [ngClass]=\"{'selected-page': (idx +1) == currentPage}\" (click)=\"goToSelection(idx)\">{{idx +1}}</span>\r\n    </ng-container>\r\n    <!-- <div *ngIf=\"totalPages > 6\" class=\"d-flex align-items-center\">\r\n        <span class=\"pagniation-btn fs-2\">...</span>\r\n        <span class=\"pagniation-btn\">{{totalPages}}</span>\r\n    </div> -->\r\n    <div class=\"pagniation-btn\" (click)=\"goToNext()\" [style.visibility]=\"currentPage == totalPages ? 'hidden' : 'visible'\">Next</div>\r\n</section>\r\n", styles: [".pagniation-btn{font-size:14px;padding:5px;border-radius:2px;width:45px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000}.selected-page{background-color:#000;color:#fff}@media only screen and (max-width: 475px){.main-section{position:relative;right:22px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PagninationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'simpo-pagnination', standalone: true, imports: [
                         CommonModule
-                    ], template: "<section class=\"d-flex w-100 justify-content-center main-section\">\n    <div class=\"pagniation-btn\" (click)=\"goToPrev()\" [style.visibility]=\"currentPage == 1 ? 'hidden' : 'visible'\">Prev</div>\n    <ng-container *ngFor=\"let _ of [].constructor(totalPages); let idx = index\">\n        <span class=\"pagniation-btn\" [ngClass]=\"{'selected-page': (idx +1) == currentPage}\" (click)=\"goToSelection(idx)\">{{idx +1}}</span>\n    </ng-container>\n    <!-- <div *ngIf=\"totalPages > 6\" class=\"d-flex align-items-center\">\n        <span class=\"pagniation-btn fs-2\">...</span>\n        <span class=\"pagniation-btn\">{{totalPages}}</span>\n    </div> -->\n    <div class=\"pagniation-btn\" (click)=\"goToNext()\" [style.visibility]=\"currentPage == totalPages ? 'hidden' : 'visible'\">Next</div>\n</section>\n", styles: [".pagniation-btn{font-size:14px;padding:5px;border-radius:2px;width:45px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000}.selected-page{background-color:#000;color:#fff}@media only screen and (max-width: 475px){.main-section{position:relative;right:22px}}\n"] }]
+                    ], template: "<section class=\"d-flex w-100 justify-content-center main-section\">\r\n    <div class=\"pagniation-btn\" (click)=\"goToPrev()\" [style.visibility]=\"currentPage == 1 ? 'hidden' : 'visible'\">Prev</div>\r\n    <ng-container *ngFor=\"let _ of [].constructor(totalPages); let idx = index\">\r\n        <span class=\"pagniation-btn\" [ngClass]=\"{'selected-page': (idx +1) == currentPage}\" (click)=\"goToSelection(idx)\">{{idx +1}}</span>\r\n    </ng-container>\r\n    <!-- <div *ngIf=\"totalPages > 6\" class=\"d-flex align-items-center\">\r\n        <span class=\"pagniation-btn fs-2\">...</span>\r\n        <span class=\"pagniation-btn\">{{totalPages}}</span>\r\n    </div> -->\r\n    <div class=\"pagniation-btn\" (click)=\"goToNext()\" [style.visibility]=\"currentPage == totalPages ? 'hidden' : 'visible'\">Next</div>\r\n</section>\r\n", styles: [".pagniation-btn{font-size:14px;padding:5px;border-radius:2px;width:45px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000}.selected-page{background-color:#000;color:#fff}@media only screen and (max-width: 475px){.main-section{position:relative;right:22px}}\n"] }]
         }], ctorParameters: () => [{ type: i2$3.Router }], propDecorators: { totalPages: [{
                 type: Input
             }], currentPage: [{
@@ -7242,6 +7257,10 @@ class ProductListComponent extends BaseSection {
         // sorting should add
         this.navigateFilter(this.sortBy ?? "lowestPrice");
     }
+    applyProductWidth() {
+        return this.styles?.theme === this.theme.Theme1 ||
+            (this.screenWidth < 475 && this.styles?.theme == this.theme.Theme2);
+    }
     getProductWidth() {
         return this.screenWidth > 475 ? (this.screenWidth < 1025 ? '25%' : 'calc(' + ((100 / (this.styles?.elementInRow || 4))) + '%)') : (this.styles?.mobileColumn === 1 ? '100%' : '50%');
     }
@@ -7471,9 +7490,9 @@ class ProductListComponent extends BaseSection {
         return Math.min(this.totalCount, (((this.pageNo - 1) * this.size + 1) + this.size));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: StorageServiceService }, { token: i5.MatBottomSheet }, { token: i3.MatDialog }, { token: CartService }, { token: i7.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\n\n<div class=\"input-group\" *ngIf=\"isMobile\">\n  <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\n</div>\n\n<ng-container *ngIf=\"!isLoading\">\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\">\n\n    <!-- <div *ngIf=\"isMobile\" class=\"back-to-home\" cdkDrag (click)=\"goToCart()\">\n      <mat-icon>home</mat-icon>\n    </div> -->\n\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n        <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n    </div>\n\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\n        <div class=\"filter body-large\" [style.color]=\"styles?.background?.accentColor\">\n          Filters\n        </div>\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\n          Clear all\n        </div>\n      </div>\n      <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;margin-left: 10px;\">\n      <div class=\"fs-6 fw-normal\" [style.color]=\"styles?.background?.accentColor\">Showing {{(pageNo -1)*size}}-{{minSize}} of {{ totalCount }} Results</div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 10px;\" [style.color]=\"styles?.background?.accentColor\">\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\n          <select (change)=\"applyFilter($event, 'SORT')\">\n              <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n    <div class=\"d-flex w-100 onlyMobile\" style=\"gap: 5px; overflow-x: auto;\" [style.color]=\"styles?.background?.accentColor\">\n      <ng-container *ngFor=\"let filter of filterList\">\n        <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.color\" [style.backgroundColor]=\"styles?.background?.accentColor\">\n          <span>{{filter.name}}</span>\n          <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"d-flex justify-content-between\">\n      <div class=\"filter-side onlyDesktop\">\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\n      </div>\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\n        <ng-container *ngIf=\"!filterLoading\">\n            <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\n              <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"styles?.theme == theme.Theme1 ? getProductWidth() : ''\" style=\"cursor: pointer;\">\n                <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\n                  <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product}\"></ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"styles?.theme == theme.Theme2\">\n                  <simpo-small-product-listing [product]=\"product\" [data]=\"data\"></simpo-small-product-listing>\n                </ng-container>\n              </div>\n              <simpo-pagnination style=\"width: 100%; margin-top: 30px;\" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\n            </div>\n\n            <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\n              <div>\n                <div class=\"cart-image\">\n                  <img loading=\"lazy\" style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\n                </div>\n                <div class=\"cart-text\">\n                  <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles?.background?.accentColor\">\n                    Product list is empty\n                  </div>\n                  <div class=\"description d-flex justify-content-center mt-4\" [style.color]=\"styles?.background?.accentColor\">\n                    Looks like no item is present with filter. Go ahead & explore top categories.\n                  </div>\n                </div>\n              </div>\n            </section>\n        </ng-container>\n        <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n          width: '100%',\n          height: '100%',\n          'border-radius': '10px',\n          'position': 'relative',\n          'right': '5px'\n        }\" />\n      </div>\n\n      <div class=\"bottom-filter\"[style.color]=\"styles?.background?.accentColor\">\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\n          <mat-icon>sort</mat-icon>\n          <span>Sort by</span>\n        </div>\n        <div class=\"divider\"></div>\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\n          <mat-icon>filter_list</mat-icon>\n          <span>Filter</span>\n        </div>\n      </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n<ng-template #FavouriteTags let-product=\"data\">\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\n</ng-template>\n\n<ng-template #FilterSection>\n  <section>\n    <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\n      <ng-container *ngFor=\"let filter of filterList\">\n        <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.color\" [style.backgroundColor]=\"styles?.background?.accentColor\">\n          <span>{{filter.name}}</span>\n          <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\n        Shop by categories\n      </div>\n      <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\" [style.color]=\"styles?.background?.accentColor\">\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\n        <div class=\"trim-text\">{{category.option | uppercase}}</div>\n      </div>\n    </div>\n    <div class=\"categories-section\" *ngIf=\"collections?.length\" [style.color]=\"styles?.background?.accentColor\">\n      <div class=\"categories heading-small\">\n        Shop by collections\n      </div>\n      <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\n        <div class=\"trim-text\">{{collection.option | uppercase}}</div>\n      </div>\n    </div>\n\n    <div class=\"price-section\">\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\n        Shop by price\n      </div>\n      <div>\n        <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 87%;\">\n          <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\n          <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\n        </mat-slider>\n      </div>\n      <div class=\"price-button-section\">\n        <div class=\"button-section\">\n          <button (click)=\"applyFilter()\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\">Filter</button>\n        </div>\n        <div class=\"price-range\">\n          Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\n        </div>\n      </div>\n    </div>\n  </section>\n</ng-template>\n<ng-template #CategoryFilterSection>\n  <section>\n    <ng-container *ngFor=\"let category of categories\">\n      <div class=\"category\">\n        <img [src]=\"category.imgUrl\">\n        <span>{{ category.option }}</span>\n      </div>\n    </ng-container>\n  </section>\n</ng-template>\n\n<ng-template #SortingSection>\n  <section style=\"padding: 10px\">\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\n      <span>Sort by</span>\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n    </div>\n    <mat-radio-group class=\"d-flex flex-column\">\n        <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\n    </mat-radio-group>\n  </section>\n</ng-template>\n\n<ng-template #ProductDesc let-product=\"data\">\n  <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\n    <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n  </div>\n  <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"product?.itemImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"product-img\">\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n  </div>\n  <div class=\"mt-2 w-100\">\n    <div class=\"product-name heading-large w-100 text-left trim-text\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\n    <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\n      <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"varient.variantImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\n      </ng-container>\n    </div>\n    <div class=\"d-flex align-item-center justify-content-between\">\n      <div class=\"price body-large text-left d-flex align-items-center\">\n        <div class=\"discounted-price\"[style.color]=\"styles?.background?.accentColor\">\n          <span [innerHTML]='currency'></span>\n          {{product.price.discountedPrice}}\n        </div>\n      </div>\n      <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\n        <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\n          [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\n        <div class=\"quantity\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\">\n          <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\n          <span>{{product.quantity}}</span>\n          <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\n        </div>\n        <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:40vh;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left!important;width:220px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:100%;height:40vh}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:19%;position:sticky;top:0;height:fit-content}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{padding:8px 15px;border-radius:3px;margin:3px 0;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%;margin-left:10px}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:30px;width:30px;border-radius:50%;cursor:pointer;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:10px!important}.product{padding:5px!important;margin-top:10px!important}.out-of-stock{font-size:12px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:10000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:220px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group{position:relative;width:95%;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i14$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i14$1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"], outputs: ["paginationChange"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\">\r\n  <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\">\r\n\r\n    <!-- <div *ngIf=\"isMobile\" class=\"back-to-home\" cdkDrag (click)=\"goToCart()\">\r\n      <mat-icon>home</mat-icon>\r\n    </div> -->\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n        <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n        <div class=\"filter body-large\" [style.color]=\"styles?.background?.accentColor\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n          Clear all\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;margin-left: 10px;\">\r\n      <div class=\"fs-6 fw-normal\" [style.color]=\"styles?.background?.accentColor\">Showing {{(pageNo -1)*size}}-{{minSize}} of {{ totalCount }} Results</div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 10px;\" [style.color]=\"styles?.background?.accentColor\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select (change)=\"applyFilter($event, 'SORT')\">\r\n              <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex w-100 onlyMobile\" style=\"gap: 5px; overflow-x: auto;\" [style.color]=\"styles?.background?.accentColor\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.color\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex justify-content-between\">\r\n      <div class=\"filter-side onlyDesktop\">\r\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n      </div>\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n        <ng-container *ngIf=\"!filterLoading\">\r\n            <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n              <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor: pointer;\">\r\n                <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n                  <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product}\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"styles?.theme == theme.Theme2\">\r\n                  <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"></simpo-small-product-listing>\r\n                </ng-container>\r\n              </div>\r\n              <simpo-pagnination style=\"width: 100%; margin-top: 30px;\" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\r\n            </div>\r\n\r\n            <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n              <div>\r\n                <div class=\"cart-image\">\r\n                  <img loading=\"lazy\" style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                  <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles?.background?.accentColor\">\r\n                    Product list is empty\r\n                  </div>\r\n                  <div class=\"description d-flex justify-content-center mt-4\" [style.color]=\"styles?.background?.accentColor\">\r\n                    Looks like no item is present with filter. Go ahead & explore top categories.\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </section>\r\n        </ng-container>\r\n        <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '100%',\r\n          height: '100%',\r\n          'border-radius': '10px',\r\n          'position': 'relative',\r\n          'right': '5px'\r\n        }\" />\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\"[style.color]=\"styles?.background?.accentColor\">\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n          <mat-icon>sort</mat-icon>\r\n          <span>Sort by</span>\r\n        </div>\r\n        <div class=\"divider\"></div>\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n          <mat-icon>filter_list</mat-icon>\r\n          <span>Filter</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.color\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        Shop by categories\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\" [style.color]=\"styles?.background?.accentColor\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n        <div class=\"trim-text\">{{category.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\" [style.color]=\"styles?.background?.accentColor\">\r\n      <div class=\"categories heading-small\">\r\n        Shop by collections\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n        <div class=\"trim-text\">{{collection.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"price-section\">\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        Shop by price\r\n      </div>\r\n      <div>\r\n        <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 87%;\">\r\n          <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n          <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n        </mat-slider>\r\n      </div>\r\n      <div class=\"price-button-section\">\r\n        <div class=\"button-section\">\r\n          <button (click)=\"applyFilter()\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\">Filter</button>\r\n        </div>\r\n        <div class=\"price-range\">\r\n          Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n<ng-template #CategoryFilterSection>\r\n  <section>\r\n    <ng-container *ngFor=\"let category of categories\">\r\n      <div class=\"category\">\r\n        <img [src]=\"category.imgUrl\">\r\n        <span>{{ category.option }}</span>\r\n      </div>\r\n    </ng-container>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n  <section style=\"padding: 10px\">\r\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n      <span>Sort by</span>\r\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n    </div>\r\n    <mat-radio-group class=\"d-flex flex-column\">\r\n        <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n    </mat-radio-group>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\">\r\n  <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n    <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n  </div>\r\n  <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"product?.itemImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"product-img\">\r\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n  </div>\r\n  <div class=\"mt-2 w-100\">\r\n    <div class=\"product-name heading-large w-100 text-left trim-text\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n    <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n      <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"varient.variantImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex align-item-center justify-content-between\">\r\n      <div class=\"price body-large text-left d-flex align-items-center\">\r\n        <div class=\"discounted-price\"[style.color]=\"styles?.background?.accentColor\">\r\n          <span [innerHTML]='currency'></span>\r\n          {{product.price.discountedPrice}}\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n        <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n          [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n        <div class=\"quantity\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\">\r\n          <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n          <span>{{product.quantity}}</span>\r\n          <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n        </div>\r\n        <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:40vh;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left!important;width:220px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:100%;height:40vh}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:19%;position:sticky;top:0;height:fit-content}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{padding:8px 15px;border-radius:3px;margin:3px 0;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%;margin-left:10px}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:30px;width:30px;border-radius:50%;cursor:pointer;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:10px!important}.product{padding:5px!important;margin-top:10px!important}.out-of-stock{font-size:12px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:10000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:220px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group{position:relative;width:95%;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i14$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i14$1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"], outputs: ["paginationChange"] }, { kind: "directive", type: 
                 //directive
-                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i15$1.SpeedDial, selector: "p-speedDial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i16.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i16.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: FormateAmount, name: "formateAmount" }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data"] }] }); }
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i15$1.SpeedDial, selector: "p-speedDial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i16.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i16.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: FormateAmount, name: "formateAmount" }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductListComponent, decorators: [{
             type: Component,
@@ -7498,7 +7517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         FormateAmount,
                         ToastModule,
                         SmallProductListingComponent
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\n\n<div class=\"input-group\" *ngIf=\"isMobile\">\n  <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\n</div>\n\n<ng-container *ngIf=\"!isLoading\">\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\">\n\n    <!-- <div *ngIf=\"isMobile\" class=\"back-to-home\" cdkDrag (click)=\"goToCart()\">\n      <mat-icon>home</mat-icon>\n    </div> -->\n\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n        <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n    </div>\n\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\n        <div class=\"filter body-large\" [style.color]=\"styles?.background?.accentColor\">\n          Filters\n        </div>\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\n          Clear all\n        </div>\n      </div>\n      <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;margin-left: 10px;\">\n      <div class=\"fs-6 fw-normal\" [style.color]=\"styles?.background?.accentColor\">Showing {{(pageNo -1)*size}}-{{minSize}} of {{ totalCount }} Results</div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 10px;\" [style.color]=\"styles?.background?.accentColor\">\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\n          <select (change)=\"applyFilter($event, 'SORT')\">\n              <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n    <div class=\"d-flex w-100 onlyMobile\" style=\"gap: 5px; overflow-x: auto;\" [style.color]=\"styles?.background?.accentColor\">\n      <ng-container *ngFor=\"let filter of filterList\">\n        <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.color\" [style.backgroundColor]=\"styles?.background?.accentColor\">\n          <span>{{filter.name}}</span>\n          <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"d-flex justify-content-between\">\n      <div class=\"filter-side onlyDesktop\">\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\n      </div>\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\n        <ng-container *ngIf=\"!filterLoading\">\n            <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\n              <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"styles?.theme == theme.Theme1 ? getProductWidth() : ''\" style=\"cursor: pointer;\">\n                <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\n                  <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product}\"></ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"styles?.theme == theme.Theme2\">\n                  <simpo-small-product-listing [product]=\"product\" [data]=\"data\"></simpo-small-product-listing>\n                </ng-container>\n              </div>\n              <simpo-pagnination style=\"width: 100%; margin-top: 30px;\" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\n            </div>\n\n            <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\n              <div>\n                <div class=\"cart-image\">\n                  <img loading=\"lazy\" style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\n                </div>\n                <div class=\"cart-text\">\n                  <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles?.background?.accentColor\">\n                    Product list is empty\n                  </div>\n                  <div class=\"description d-flex justify-content-center mt-4\" [style.color]=\"styles?.background?.accentColor\">\n                    Looks like no item is present with filter. Go ahead & explore top categories.\n                  </div>\n                </div>\n              </div>\n            </section>\n        </ng-container>\n        <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n          width: '100%',\n          height: '100%',\n          'border-radius': '10px',\n          'position': 'relative',\n          'right': '5px'\n        }\" />\n      </div>\n\n      <div class=\"bottom-filter\"[style.color]=\"styles?.background?.accentColor\">\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\n          <mat-icon>sort</mat-icon>\n          <span>Sort by</span>\n        </div>\n        <div class=\"divider\"></div>\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\n          <mat-icon>filter_list</mat-icon>\n          <span>Filter</span>\n        </div>\n      </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n<ng-template #FavouriteTags let-product=\"data\">\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\n</ng-template>\n\n<ng-template #FilterSection>\n  <section>\n    <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\n      <ng-container *ngFor=\"let filter of filterList\">\n        <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.color\" [style.backgroundColor]=\"styles?.background?.accentColor\">\n          <span>{{filter.name}}</span>\n          <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\n        Shop by categories\n      </div>\n      <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\" [style.color]=\"styles?.background?.accentColor\">\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\n        <div class=\"trim-text\">{{category.option | uppercase}}</div>\n      </div>\n    </div>\n    <div class=\"categories-section\" *ngIf=\"collections?.length\" [style.color]=\"styles?.background?.accentColor\">\n      <div class=\"categories heading-small\">\n        Shop by collections\n      </div>\n      <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\n        <div class=\"trim-text\">{{collection.option | uppercase}}</div>\n      </div>\n    </div>\n\n    <div class=\"price-section\">\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\n        Shop by price\n      </div>\n      <div>\n        <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 87%;\">\n          <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\n          <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\n        </mat-slider>\n      </div>\n      <div class=\"price-button-section\">\n        <div class=\"button-section\">\n          <button (click)=\"applyFilter()\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\">Filter</button>\n        </div>\n        <div class=\"price-range\">\n          Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\n        </div>\n      </div>\n    </div>\n  </section>\n</ng-template>\n<ng-template #CategoryFilterSection>\n  <section>\n    <ng-container *ngFor=\"let category of categories\">\n      <div class=\"category\">\n        <img [src]=\"category.imgUrl\">\n        <span>{{ category.option }}</span>\n      </div>\n    </ng-container>\n  </section>\n</ng-template>\n\n<ng-template #SortingSection>\n  <section style=\"padding: 10px\">\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\n      <span>Sort by</span>\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n    </div>\n    <mat-radio-group class=\"d-flex flex-column\">\n        <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\n    </mat-radio-group>\n  </section>\n</ng-template>\n\n<ng-template #ProductDesc let-product=\"data\">\n  <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\n    <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n  </div>\n  <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"product?.itemImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"product-img\">\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n  </div>\n  <div class=\"mt-2 w-100\">\n    <div class=\"product-name heading-large w-100 text-left trim-text\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\n    <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\n      <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"varient.variantImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\n      </ng-container>\n    </div>\n    <div class=\"d-flex align-item-center justify-content-between\">\n      <div class=\"price body-large text-left d-flex align-items-center\">\n        <div class=\"discounted-price\"[style.color]=\"styles?.background?.accentColor\">\n          <span [innerHTML]='currency'></span>\n          {{product.price.discountedPrice}}\n        </div>\n      </div>\n      <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\n        <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\n          [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\n        <div class=\"quantity\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\">\n          <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\n          <span>{{product.quantity}}</span>\n          <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\n        </div>\n        <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:40vh;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left!important;width:220px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:100%;height:40vh}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:19%;position:sticky;top:0;height:fit-content}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{padding:8px 15px;border-radius:3px;margin:3px 0;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%;margin-left:10px}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:30px;width:30px;border-radius:50%;cursor:pointer;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:10px!important}.product{padding:5px!important;margin-top:10px!important}.out-of-stock{font-size:12px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:10000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:220px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group{position:relative;width:95%;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}\n"] }]
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\">\r\n  <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\">\r\n\r\n    <!-- <div *ngIf=\"isMobile\" class=\"back-to-home\" cdkDrag (click)=\"goToCart()\">\r\n      <mat-icon>home</mat-icon>\r\n    </div> -->\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n        <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n        <div class=\"filter body-large\" [style.color]=\"styles?.background?.accentColor\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n          Clear all\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;margin-left: 10px;\">\r\n      <div class=\"fs-6 fw-normal\" [style.color]=\"styles?.background?.accentColor\">Showing {{(pageNo -1)*size}}-{{minSize}} of {{ totalCount }} Results</div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 10px;\" [style.color]=\"styles?.background?.accentColor\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select (change)=\"applyFilter($event, 'SORT')\">\r\n              <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex w-100 onlyMobile\" style=\"gap: 5px; overflow-x: auto;\" [style.color]=\"styles?.background?.accentColor\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.color\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex justify-content-between\">\r\n      <div class=\"filter-side onlyDesktop\">\r\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n      </div>\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n        <ng-container *ngIf=\"!filterLoading\">\r\n            <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n              <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor: pointer;\">\r\n                <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n                  <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product}\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"styles?.theme == theme.Theme2\">\r\n                  <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"></simpo-small-product-listing>\r\n                </ng-container>\r\n              </div>\r\n              <simpo-pagnination style=\"width: 100%; margin-top: 30px;\" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\r\n            </div>\r\n\r\n            <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n              <div>\r\n                <div class=\"cart-image\">\r\n                  <img loading=\"lazy\" style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                  <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles?.background?.accentColor\">\r\n                    Product list is empty\r\n                  </div>\r\n                  <div class=\"description d-flex justify-content-center mt-4\" [style.color]=\"styles?.background?.accentColor\">\r\n                    Looks like no item is present with filter. Go ahead & explore top categories.\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </section>\r\n        </ng-container>\r\n        <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '100%',\r\n          height: '100%',\r\n          'border-radius': '10px',\r\n          'position': 'relative',\r\n          'right': '5px'\r\n        }\" />\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\"[style.color]=\"styles?.background?.accentColor\">\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n          <mat-icon>sort</mat-icon>\r\n          <span>Sort by</span>\r\n        </div>\r\n        <div class=\"divider\"></div>\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n          <mat-icon>filter_list</mat-icon>\r\n          <span>Filter</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.color\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        Shop by categories\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\" [style.color]=\"styles?.background?.accentColor\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n        <div class=\"trim-text\">{{category.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\" [style.color]=\"styles?.background?.accentColor\">\r\n      <div class=\"categories heading-small\">\r\n        Shop by collections\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n        <div class=\"trim-text\">{{collection.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"price-section\">\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        Shop by price\r\n      </div>\r\n      <div>\r\n        <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 87%;\">\r\n          <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n          <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n        </mat-slider>\r\n      </div>\r\n      <div class=\"price-button-section\">\r\n        <div class=\"button-section\">\r\n          <button (click)=\"applyFilter()\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\">Filter</button>\r\n        </div>\r\n        <div class=\"price-range\">\r\n          Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n<ng-template #CategoryFilterSection>\r\n  <section>\r\n    <ng-container *ngFor=\"let category of categories\">\r\n      <div class=\"category\">\r\n        <img [src]=\"category.imgUrl\">\r\n        <span>{{ category.option }}</span>\r\n      </div>\r\n    </ng-container>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n  <section style=\"padding: 10px\">\r\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n      <span>Sort by</span>\r\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n    </div>\r\n    <mat-radio-group class=\"d-flex flex-column\">\r\n        <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n    </mat-radio-group>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\">\r\n  <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n    <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n  </div>\r\n  <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"product?.itemImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"product-img\">\r\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n  </div>\r\n  <div class=\"mt-2 w-100\">\r\n    <div class=\"product-name heading-large w-100 text-left trim-text\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n    <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n      <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"varient.variantImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex align-item-center justify-content-between\">\r\n      <div class=\"price body-large text-left d-flex align-items-center\">\r\n        <div class=\"discounted-price\"[style.color]=\"styles?.background?.accentColor\">\r\n          <span [innerHTML]='currency'></span>\r\n          {{product.price.discountedPrice}}\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n        <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n          [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n        <div class=\"quantity\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\">\r\n          <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n          <span>{{product.quantity}}</span>\r\n          <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n        </div>\r\n        <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:40vh;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left!important;width:220px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:100%;height:40vh}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:19%;position:sticky;top:0;height:fit-content}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{padding:8px 15px;border-radius:3px;margin:3px 0;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%;margin-left:10px}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:30px;width:30px;border-radius:50%;cursor:pointer;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:10px!important}.product{padding:5px!important;margin-top:10px!important}.out-of-stock{font-size:12px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:10000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:220px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group{position:relative;width:95%;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -7546,7 +7565,7 @@ class CheckoutComponent extends BaseSection {
         return BUSINESS_CONSTANTS.CURRENCY;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CheckoutComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CheckoutComponent, isStandalone: true, selector: "simpo-checkout", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" >\n    <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n      <div class=\"row\">\n        <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\n          <div class=\"shipping-label heading-large\">Shipping To</div>\n          <div class=\"row\">\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Name</label>\n              <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\n                class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Mobile Number</label>\n              <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\n                class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Email</label>\n              <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\n                class=\"input-field\">\n            </div>\n          </div>\n\n          <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\n          <div class=\"row\">\n            <div class=\"col-12 input-parent\">\n              <label for=\"\">Address</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\n                placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Locality/Area</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\n                placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Landmark</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\n                placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Pincode</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\n                class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">City</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\n                placeholder=\"Eg: Hyderabad\" class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">State</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\n                placeholder=\"Eg: Telangana\" class=\"input-field\">\n            </div>\n          </div>\n        </div>\n        <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\n          <div class=\"shipping-label\">Delivery Address</div>\n          <div class=\"delivery-address\">\n            <div style=\"position: absolute;right: 15px;\">\n              <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\n                alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\n            </div>\n            <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\n            <div class=\"user-details\" style=\"margin-top: 5px;\">\n              {{responseData?.userDetails.deliveryAddress?.addressLine1}},\n              {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\n            <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\n              {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\n            <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\n              {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\n            <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\n                style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\n          </div>\n        </div>\n        <div class=\"offset-md-1 col-md-4 col-12 right-section\">\n          <div class=\"shipping-label heading-large lh-normal\">\n            Price Details\n          </div>\n          <div class=\"price-details\">\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\n              <div class=\"price-type\">Total MRP</div>\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.totalNetValue}}</div>\n            </div>\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\n              <div class=\"price-type\">Total Tax</div>\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.totalTax}}</div>\n            </div>\n            <div class=\"price-parent-block\"\n              *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n              <div class=\"price-type\">Delivery Charge</div>\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges}}</div>\n            </div>\n            <hr>\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\n              <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\n              <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{responseData.totalAmount}}</div>\n            </div>\n\n            <div class=\"button-parent\">\n              <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\n                [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n", styles: [".container{margin-top:30px}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media only screen and (max-width : 475px){.right-section{margin-top:15px}label{margin-bottom:6px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CheckoutComponent, isStandalone: true, selector: "simpo-checkout", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" >\r\n    <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"row\">\r\n        <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\r\n          <div class=\"shipping-label heading-large\">Shipping To</div>\r\n          <div class=\"row\">\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Name</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\r\n                class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Mobile Number</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\r\n                class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Email</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\r\n                class=\"input-field\">\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\r\n          <div class=\"row\">\r\n            <div class=\"col-12 input-parent\">\r\n              <label for=\"\">Address</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\r\n                placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Locality/Area</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\r\n                placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Landmark</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\r\n                placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Pincode</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\r\n                class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">City</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\r\n                placeholder=\"Eg: Hyderabad\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">State</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\r\n                placeholder=\"Eg: Telangana\" class=\"input-field\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\r\n          <div class=\"shipping-label\">Delivery Address</div>\r\n          <div class=\"delivery-address\">\r\n            <div style=\"position: absolute;right: 15px;\">\r\n              <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\r\n                alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\r\n            </div>\r\n            <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\r\n            <div class=\"user-details\" style=\"margin-top: 5px;\">\r\n              {{responseData?.userDetails.deliveryAddress?.addressLine1}},\r\n              {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\r\n            <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\r\n              {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\r\n            <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\r\n              {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\r\n            <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\r\n                style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"offset-md-1 col-md-4 col-12 right-section\">\r\n          <div class=\"shipping-label heading-large lh-normal\">\r\n            Price Details\r\n          </div>\r\n          <div class=\"price-details\">\r\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n              <div class=\"price-type\">Total MRP</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.totalNetValue}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n              <div class=\"price-type\">Total Tax</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.totalTax}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\"\r\n              *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n              <div class=\"price-type\">Delivery Charge</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges}}</div>\r\n            </div>\r\n            <hr>\r\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\r\n              <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n              <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{responseData.totalAmount}}</div>\r\n            </div>\r\n\r\n            <div class=\"button-parent\">\r\n              <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n", styles: [".container{margin-top:30px}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media only screen and (max-width : 475px){.right-section{margin-top:15px}label{margin-bottom:6px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
                 //DIRECTIVE
                 ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
 }
@@ -7559,7 +7578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         AnimationDirective,
                         ContentFitDirective,
                         HoverDirective
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" >\n    <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n      <div class=\"row\">\n        <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\n          <div class=\"shipping-label heading-large\">Shipping To</div>\n          <div class=\"row\">\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Name</label>\n              <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\n                class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Mobile Number</label>\n              <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\n                class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Email</label>\n              <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\n                class=\"input-field\">\n            </div>\n          </div>\n\n          <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\n          <div class=\"row\">\n            <div class=\"col-12 input-parent\">\n              <label for=\"\">Address</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\n                placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Locality/Area</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\n                placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Landmark</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\n                placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Pincode</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\n                class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">City</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\n                placeholder=\"Eg: Hyderabad\" class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">State</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\n                placeholder=\"Eg: Telangana\" class=\"input-field\">\n            </div>\n          </div>\n        </div>\n        <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\n          <div class=\"shipping-label\">Delivery Address</div>\n          <div class=\"delivery-address\">\n            <div style=\"position: absolute;right: 15px;\">\n              <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\n                alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\n            </div>\n            <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\n            <div class=\"user-details\" style=\"margin-top: 5px;\">\n              {{responseData?.userDetails.deliveryAddress?.addressLine1}},\n              {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\n            <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\n              {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\n            <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\n              {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\n            <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\n                style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\n          </div>\n        </div>\n        <div class=\"offset-md-1 col-md-4 col-12 right-section\">\n          <div class=\"shipping-label heading-large lh-normal\">\n            Price Details\n          </div>\n          <div class=\"price-details\">\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\n              <div class=\"price-type\">Total MRP</div>\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.totalNetValue}}</div>\n            </div>\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\n              <div class=\"price-type\">Total Tax</div>\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.totalTax}}</div>\n            </div>\n            <div class=\"price-parent-block\"\n              *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n              <div class=\"price-type\">Delivery Charge</div>\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges}}</div>\n            </div>\n            <hr>\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\n              <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\n              <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{responseData.totalAmount}}</div>\n            </div>\n\n            <div class=\"button-parent\">\n              <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\n                [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n", styles: [".container{margin-top:30px}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media only screen and (max-width : 475px){.right-section{margin-top:15px}label{margin-bottom:6px}}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" >\r\n    <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"row\">\r\n        <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\r\n          <div class=\"shipping-label heading-large\">Shipping To</div>\r\n          <div class=\"row\">\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Name</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\r\n                class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Mobile Number</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\r\n                class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Email</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\r\n                class=\"input-field\">\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\r\n          <div class=\"row\">\r\n            <div class=\"col-12 input-parent\">\r\n              <label for=\"\">Address</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\r\n                placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Locality/Area</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\r\n                placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Landmark</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\r\n                placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Pincode</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\r\n                class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">City</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\r\n                placeholder=\"Eg: Hyderabad\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">State</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\r\n                placeholder=\"Eg: Telangana\" class=\"input-field\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\r\n          <div class=\"shipping-label\">Delivery Address</div>\r\n          <div class=\"delivery-address\">\r\n            <div style=\"position: absolute;right: 15px;\">\r\n              <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\r\n                alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\r\n            </div>\r\n            <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\r\n            <div class=\"user-details\" style=\"margin-top: 5px;\">\r\n              {{responseData?.userDetails.deliveryAddress?.addressLine1}},\r\n              {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\r\n            <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\r\n              {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\r\n            <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\r\n              {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\r\n            <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\r\n                style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"offset-md-1 col-md-4 col-12 right-section\">\r\n          <div class=\"shipping-label heading-large lh-normal\">\r\n            Price Details\r\n          </div>\r\n          <div class=\"price-details\">\r\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n              <div class=\"price-type\">Total MRP</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.totalNetValue}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n              <div class=\"price-type\">Total Tax</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.totalTax}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\"\r\n              *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n              <div class=\"price-type\">Delivery Charge</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges}}</div>\r\n            </div>\r\n            <hr>\r\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\r\n              <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n              <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{responseData.totalAmount}}</div>\r\n            </div>\r\n\r\n            <div class=\"button-parent\">\r\n              <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n", styles: [".container{margin-top:30px}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media only screen and (max-width : 475px){.right-section{margin-top:15px}label{margin-bottom:6px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], responseData: [{
@@ -7751,7 +7770,7 @@ class WhislistComponent extends BaseSection {
         return BUSINESS_CONSTANTS.CURRENCY;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: WhislistComponent, deps: [{ token: CartService }, { token: EventsService }, { token: StorageServiceService }, { token: RestService }, { token: i7.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: WhislistComponent, isStandalone: true, selector: "simpo-whislist", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\n<ng-container *ngIf=\"!isLoading\">\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" >\n    <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\"\n      [simpoAnimation]=\"styles?.animation\">\n      <div class=\"left-panel\">\n        <div class=\"my-bag\"[style.color]=\"styles?.background?.accentColor\">\n          My Wishlist&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\n        </div>\n\n        <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\n          <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n            <div class=\"cart-items\">\n              <mat-icon class=\"delete-btn\" (click)=\"deleteFromWhislist(item)\">close</mat-icon>\n              <div class=\"d-flex item-parent\">\n                <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n                  <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\">\n                </div>\n                <div class=\"col-md-6 h-100 item-desc\">\n                  <div class=\"lh-23\">\n                    <div class=\"item-name heading-large\" [style.color]=\"styles?.background?.accentColor\">{{item.itemName}}</div>\n                    <div class=\"price-with-tax\" [style.color]=\"styles?.background?.accentColor\">\n                      <span [innerHTML]='currency'></span> {{item.discountedPrice}}\n                    </div>\n                    <ng-container *ngIf=\"item.itemVariant\"> \n                      <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\n                        <div class=\"fw-bold\"[style.color]=\"styles?.background?.accentColor\">{{ varient }} : </div>\n                        <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\n                        <div class=\"fw-normal\" style=\"margin-left: 5px;\"[style.color]=\"styles?.background?.accentColor\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\n                      </div>\n                    </ng-container>\n                    <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\n                      <div class=\"item-quantity\" *ngIf=\"item.quantity\" [style.color]=\"styles?.background?.accentColor\">\n                        <div class=\"count\">\n                          <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\n                          <span>{{item.quantity}}</span>\n                          <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\n                        </div>\n                      </div>\n                      <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\" [style.color]=\"styles?.background?.accentColor\">Add Quantity\n                      </div>\n                      <div class=\"item-quantity\" (click)=\"moveToCart(item)\" [style.color]=\"styles?.background?.accentColor\">Move to Cart</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\n                  <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span>\n                    {{(item.discountedPrice) * item.quantity}}</div>\n                  <div>\n                    <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\n      <div>\n        <div class=\"cart-image\">\n          <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\n            alt=\"\">\n        </div>\n        <div class=\"cart-text\">\n          <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles.background.accentColor\">\n            Your Whislist is empty\n          </div>\n          <div class=\"description d-flex mt-4\" [style.color]=\"styles.background.accentColor\">\n            Looks like you have not added anything to your Whislist. Go ahead & explore top categories.\n          </div>\n        </div>\n      </div>\n    </section>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.item-desc{margin-left:10px!important}.left-panel{width:100%}.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}.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{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.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:100%;width:110px;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:#df2e2e;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}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.delete-btn{display:none}.count{width:100%;display:flex;justify-content:space-between}@media only screen and (max-width: 475px){.cart-parent{flex-direction:column}.delete-btn{display:flex!important;justify-content:center;align-items:center;padding:5px;background-color:#d3d3d3;border-radius:50%;position:absolute;top:-10px;right:-5px;font-size:18px;color:#000}.total-container{padding-top:5px!important;padding-bottom:5px!important}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items{width:100%;position:relative}.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:73%}.itemPrice{display:none!important}.action-btn{flex-wrap:wrap}.action-btn .item-quantity{width:100%;text-align:center;justify-content:space-around!important}.count{display:flex;gap:20px}}\n"], dependencies: [{ 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: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: WhislistComponent, isStandalone: true, selector: "simpo-whislist", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" >\r\n    <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\"\r\n      [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"left-panel\">\r\n        <div class=\"my-bag\"[style.color]=\"styles?.background?.accentColor\">\r\n          My Wishlist&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n        </div>\r\n\r\n        <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n          <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n            <div class=\"cart-items\">\r\n              <mat-icon class=\"delete-btn\" (click)=\"deleteFromWhislist(item)\">close</mat-icon>\r\n              <div class=\"d-flex item-parent\">\r\n                <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                  <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\">\r\n                </div>\r\n                <div class=\"col-md-6 h-100 item-desc\">\r\n                  <div class=\"lh-23\">\r\n                    <div class=\"item-name heading-large\" [style.color]=\"styles?.background?.accentColor\">{{item.itemName}}</div>\r\n                    <div class=\"price-with-tax\" [style.color]=\"styles?.background?.accentColor\">\r\n                      <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n                    </div>\r\n                    <ng-container *ngIf=\"item.itemVariant\"> \r\n                      <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n                        <div class=\"fw-bold\"[style.color]=\"styles?.background?.accentColor\">{{ varient }} : </div>\r\n                        <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n                        <div class=\"fw-normal\" style=\"margin-left: 5px;\"[style.color]=\"styles?.background?.accentColor\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\r\n                      </div>\r\n                    </ng-container>\r\n                    <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\r\n                      <div class=\"item-quantity\" *ngIf=\"item.quantity\" [style.color]=\"styles?.background?.accentColor\">\r\n                        <div class=\"count\">\r\n                          <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n                          <span>{{item.quantity}}</span>\r\n                          <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n                        </div>\r\n                      </div>\r\n                      <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\" [style.color]=\"styles?.background?.accentColor\">Add Quantity\r\n                      </div>\r\n                      <div class=\"item-quantity\" (click)=\"moveToCart(item)\" [style.color]=\"styles?.background?.accentColor\">Move to Cart</div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\r\n                  <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span>\r\n                    {{(item.discountedPrice) * item.quantity}}</div>\r\n                  <div>\r\n                    <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\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'\"   src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n            alt=\"\">\r\n        </div>\r\n        <div class=\"cart-text\">\r\n          <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles.background.accentColor\">\r\n            Your Whislist is empty\r\n          </div>\r\n          <div class=\"description d-flex mt-4\" [style.color]=\"styles.background.accentColor\">\r\n            Looks like you have not added anything to your Whislist. Go ahead & explore top categories.\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\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: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.item-desc{margin-left:10px!important}.left-panel{width:100%}.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}.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{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.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:100%;width:110px;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:#df2e2e;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}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.delete-btn{display:none}.count{width:100%;display:flex;justify-content:space-between}@media only screen and (max-width: 475px){.cart-parent{flex-direction:column}.delete-btn{display:flex!important;justify-content:center;align-items:center;padding:5px;background-color:#d3d3d3;border-radius:50%;position:absolute;top:-10px;right:-5px;font-size:18px;color:#000}.total-container{padding-top:5px!important;padding-bottom:5px!important}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items{width:100%;position:relative}.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:73%}.itemPrice{display:none!important}.action-btn{flex-wrap:wrap}.action-btn .item-quantity{width:100%;text-align:center;justify-content:space-around!important}.count{display:flex;gap:20px}}\n"], dependencies: [{ 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: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "directive", type: 
                 //DIRECTIVE
                 BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
@@ -7768,7 +7787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         ContentFitDirective,
                         HoverDirective,
                         ToastModule
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\n<ng-container *ngIf=\"!isLoading\">\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" >\n    <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\"\n      [simpoAnimation]=\"styles?.animation\">\n      <div class=\"left-panel\">\n        <div class=\"my-bag\"[style.color]=\"styles?.background?.accentColor\">\n          My Wishlist&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\n        </div>\n\n        <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\n          <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n            <div class=\"cart-items\">\n              <mat-icon class=\"delete-btn\" (click)=\"deleteFromWhislist(item)\">close</mat-icon>\n              <div class=\"d-flex item-parent\">\n                <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n                  <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\">\n                </div>\n                <div class=\"col-md-6 h-100 item-desc\">\n                  <div class=\"lh-23\">\n                    <div class=\"item-name heading-large\" [style.color]=\"styles?.background?.accentColor\">{{item.itemName}}</div>\n                    <div class=\"price-with-tax\" [style.color]=\"styles?.background?.accentColor\">\n                      <span [innerHTML]='currency'></span> {{item.discountedPrice}}\n                    </div>\n                    <ng-container *ngIf=\"item.itemVariant\"> \n                      <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\n                        <div class=\"fw-bold\"[style.color]=\"styles?.background?.accentColor\">{{ varient }} : </div>\n                        <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\n                        <div class=\"fw-normal\" style=\"margin-left: 5px;\"[style.color]=\"styles?.background?.accentColor\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\n                      </div>\n                    </ng-container>\n                    <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\n                      <div class=\"item-quantity\" *ngIf=\"item.quantity\" [style.color]=\"styles?.background?.accentColor\">\n                        <div class=\"count\">\n                          <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\n                          <span>{{item.quantity}}</span>\n                          <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\n                        </div>\n                      </div>\n                      <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\" [style.color]=\"styles?.background?.accentColor\">Add Quantity\n                      </div>\n                      <div class=\"item-quantity\" (click)=\"moveToCart(item)\" [style.color]=\"styles?.background?.accentColor\">Move to Cart</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\n                  <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span>\n                    {{(item.discountedPrice) * item.quantity}}</div>\n                  <div>\n                    <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\n      <div>\n        <div class=\"cart-image\">\n          <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\n            alt=\"\">\n        </div>\n        <div class=\"cart-text\">\n          <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles.background.accentColor\">\n            Your Whislist is empty\n          </div>\n          <div class=\"description d-flex mt-4\" [style.color]=\"styles.background.accentColor\">\n            Looks like you have not added anything to your Whislist. Go ahead & explore top categories.\n          </div>\n        </div>\n      </div>\n    </section>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.item-desc{margin-left:10px!important}.left-panel{width:100%}.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}.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{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.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:100%;width:110px;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:#df2e2e;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}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.delete-btn{display:none}.count{width:100%;display:flex;justify-content:space-between}@media only screen and (max-width: 475px){.cart-parent{flex-direction:column}.delete-btn{display:flex!important;justify-content:center;align-items:center;padding:5px;background-color:#d3d3d3;border-radius:50%;position:absolute;top:-10px;right:-5px;font-size:18px;color:#000}.total-container{padding-top:5px!important;padding-bottom:5px!important}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items{width:100%;position:relative}.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:73%}.itemPrice{display:none!important}.action-btn{flex-wrap:wrap}.action-btn .item-quantity{width:100%;text-align:center;justify-content:space-around!important}.count{display:flex;gap:20px}}\n"] }]
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" >\r\n    <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\"\r\n      [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"left-panel\">\r\n        <div class=\"my-bag\"[style.color]=\"styles?.background?.accentColor\">\r\n          My Wishlist&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n        </div>\r\n\r\n        <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n          <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n            <div class=\"cart-items\">\r\n              <mat-icon class=\"delete-btn\" (click)=\"deleteFromWhislist(item)\">close</mat-icon>\r\n              <div class=\"d-flex item-parent\">\r\n                <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                  <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\">\r\n                </div>\r\n                <div class=\"col-md-6 h-100 item-desc\">\r\n                  <div class=\"lh-23\">\r\n                    <div class=\"item-name heading-large\" [style.color]=\"styles?.background?.accentColor\">{{item.itemName}}</div>\r\n                    <div class=\"price-with-tax\" [style.color]=\"styles?.background?.accentColor\">\r\n                      <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n                    </div>\r\n                    <ng-container *ngIf=\"item.itemVariant\"> \r\n                      <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n                        <div class=\"fw-bold\"[style.color]=\"styles?.background?.accentColor\">{{ varient }} : </div>\r\n                        <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n                        <div class=\"fw-normal\" style=\"margin-left: 5px;\"[style.color]=\"styles?.background?.accentColor\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\r\n                      </div>\r\n                    </ng-container>\r\n                    <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\r\n                      <div class=\"item-quantity\" *ngIf=\"item.quantity\" [style.color]=\"styles?.background?.accentColor\">\r\n                        <div class=\"count\">\r\n                          <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n                          <span>{{item.quantity}}</span>\r\n                          <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n                        </div>\r\n                      </div>\r\n                      <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\" [style.color]=\"styles?.background?.accentColor\">Add Quantity\r\n                      </div>\r\n                      <div class=\"item-quantity\" (click)=\"moveToCart(item)\" [style.color]=\"styles?.background?.accentColor\">Move to Cart</div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\r\n                  <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span>\r\n                    {{(item.discountedPrice) * item.quantity}}</div>\r\n                  <div>\r\n                    <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\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'\"   src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n            alt=\"\">\r\n        </div>\r\n        <div class=\"cart-text\">\r\n          <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles.background.accentColor\">\r\n            Your Whislist is empty\r\n          </div>\r\n          <div class=\"description d-flex mt-4\" [style.color]=\"styles.background.accentColor\">\r\n            Looks like you have not added anything to your Whislist. Go ahead & explore top categories.\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\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: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.item-desc{margin-left:10px!important}.left-panel{width:100%}.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}.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{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.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:100%;width:110px;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:#df2e2e;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}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.delete-btn{display:none}.count{width:100%;display:flex;justify-content:space-between}@media only screen and (max-width: 475px){.cart-parent{flex-direction:column}.delete-btn{display:flex!important;justify-content:center;align-items:center;padding:5px;background-color:#d3d3d3;border-radius:50%;position:absolute;top:-10px;right:-5px;font-size:18px;color:#000}.total-container{padding-top:5px!important;padding-bottom:5px!important}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items{width:100%;position:relative}.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:73%}.itemPrice{display:none!important}.action-btn{flex-wrap:wrap}.action-btn .item-quantity{width:100%;text-align:center;justify-content:space-around!important}.count{display:flex;gap:20px}}\n"] }]
         }], ctorParameters: () => [{ type: CartService }, { type: EventsService }, { type: StorageServiceService }, { type: RestService }, { type: i7.MessageService }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{
@@ -7859,7 +7878,7 @@ class OrderDetailsComponent {
         return this.orderDetailData?.addressDetails?.addressLine1 + ', ' + this.orderDetailData?.addressDetails?.addressLine2 + ', ' + this.orderDetailData?.addressDetails?.localityName + ', ' + this.orderDetailData?.addressDetails?.cityName + ', ' + this.orderDetailData?.addressDetails?.stateName;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderDetailsComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", orderDetailData: "orderDetailData" }, outputs: { goBackEmitter: "goBackEmitter" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n    <section class=\"d-flex justify-content-between main-section\" [style.flexDirection]=\"isMobile ? 'column' : 'row'\" [style.width.vw]=\"isMobile ? '100' : '65'\" style=\"margin: auto;\">\n        <div class=\"left\" [style.width.%]=\"isMobile ? '90' : '70'\">\n            <h1 class=\"fs-3 fw-normal mb-3 d-flex align-items-center onlyDesktop position-relative\" style=\"left: -35px;\">\n                <mat-icon style=\"cursor: pointer;\" (click)=\"goBack()\">keyboard_arrow_left</mat-icon>\n                <span>Order Details</span>\n            </h1>\n            <div class=\"d-flex justify-content-between align-items-end\">\n                <div class=\"d-flex flex-column\">\n                    <span class=\"fs-5\">Order {{ orderDetailData?.orderNum }}</span>\n                    <span class=\"fs-6\">{{ orderDetailData?.createdTimeStamp | date: 'medium' }}, {{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }} items | <span [innerHTML]=\"currency\"></span> {{orderDetailData?.brandOrderDetails?.[0]?.billDetails?.totalGrossValue}}</span>\n                </div>\n                <span class=\"fw-bold fs-5\">{{orderDetailData?.brandOrderDetails?.[0]?.businessName | titlecase}}</span>\n            </div>\n            <ng-container *ngIf=\"!isMobile\">\n                <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\n            </ng-container>\n            <div>\n                <div *ngFor=\"let item of orderDetailData?.brandOrderDetails?.[0]?.orderedItems\" class=\"d-flex mb-2\" style=\"gap: 10px; width: 100%;\">\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"item.imgUrl\" alt=\"\" style=\"height: 85px;width: 85px; border-radius: 5px;\">\n                    <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\n                        <span class=\"fw-bold fs-6\">{{item.itemName}}</span>\n                        <!-- <span class=\"fs-6\">Size: XS</span> -->\n                        <div class=\"d-flex justify-content-between fs-6\">\n                            <span>{{item.quantity}} X  <span [innerHTML]=\"currency\"></span> <span class=\"fw-bold\">{{(item.discountedPrice) | number: '1.0-2'}}</span></span>\n                            <span> <span [innerHTML]=\"currency\"></span> <span class=\"fw-bold\">{{(item.discountedPrice * item.quantity)  | number: '1.0-2'}}</span></span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <ng-container *ngIf=\"isMobile\">\n                <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\n            </ng-container>\n            <div class=\"fs-6\">\n                <div class=\"d-flex justify-content-between my-2\">\n                    <span class=\"fw-normal\">Item Total</span>\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span> {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\n                </div>\n                <div class=\"d-flex justify-content-between my-2\">\n                    <span class=\"fw-normal\">Total Tax</span>\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span> {{orderDetailData?.billDetails?.totalTax | number:'1.0-2'}}</span>\n                </div>\n\n                <div class=\"d-flex justify-content-between my-2\">\n                    <span>Delivery</span>\n                    <span>FREE</span>\n                </div>\n\n                <div class=\"d-flex justify-content-between my-2\">\n                    <span class=\"fw-normal\">Grand Total</span>\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span> {{orderDetailData?.billDetails?.totalGrossValue | number:'1.0-2'}}</span>\n                </div>\n            </div>\n        </div>\n        <div class=\"right\" style=\"width: 28%;\" [style.width.%]=\"isMobile ? '90' : '28'\" [style.background]=\"getCardBGColor\">\n            <h1 class=\"mb-3 fs-5\">User Details</h1>\n            <div class=\"my-2 fs-6\">\n                <span style=\"margin-right: 10px;\" [style.color]=\"getSupportingColor(getCardBGColor)\">Name:</span>\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{orderDetailData?.addressDetails?.receiverName}}</span>\n            </div>\n            <div class=\"my-2 fs-6\">\n                <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Phone:</span>\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{ orderDetailData?.addressDetails?.receiverPhone }}</span>\n            </div>\n            <div class=\"my-2 fs-6\">\n                <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Address:</span>\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{ orderAddress }}</span>\n            </div>\n            <div class=\"my-2 fs-6\">\n                <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Payment:</span>\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">Manual Payment</span>\n            </div>\n            <a href=\"\">Track Order</a>\n        </div>\n    </section>\n</ng-container>\n\n<ng-template #timelineContainer>\n    <hr />\n    <div class=\"timeline\">\n        <p-timeline [value]=\"orderTimiline\">\n            <ng-template pTemplate=\"content\" let-event>\n                <div class=\"d-flex time-line\">\n                    <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon>\n                    <div class=\"d-flex flex-column ml-2\">\n                        <span class=\"fw-normal fs-6\">{{ event.name?.replaceAll(\"_\", \" \") }}</span>\n                        <div class=\"fs-6 \">{{event.desc?.replaceAll(\"_\", \" \")}}</div>\n                        <div class=\"action-btn\">\n                            <button *ngIf=\"canCancelOrder\">Cancel Order</button>\n                        </div>\n                    </div>\n                </div>\n            </ng-template>\n        </p-timeline>\n    </div>\n    <hr />\n</ng-template>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n    width: '100%',\n    height: '40vh',\n    'border-radius': '10px',\n    'position': 'relative',\n    'right': '5px'\n  }\">\n  </ngx-skeleton-loader>\n", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:92%!important;margin-bottom:4px!important;height:auto!important;padding:15px 0!important}.main-section,.left{width:100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i4.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", orderDetailData: "orderDetailData" }, outputs: { goBackEmitter: "goBackEmitter" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n    <section class=\"d-flex justify-content-between main-section\" [style.flexDirection]=\"isMobile ? 'column' : 'row'\" [style.width.vw]=\"isMobile ? '100' : '65'\" style=\"margin: auto;\">\r\n        <div class=\"left\" [style.width.%]=\"isMobile ? '90' : '70'\">\r\n            <h1 class=\"fs-3 fw-normal mb-3 d-flex align-items-center onlyDesktop position-relative\" style=\"left: -35px;\">\r\n                <mat-icon style=\"cursor: pointer;\" (click)=\"goBack()\">keyboard_arrow_left</mat-icon>\r\n                <span>Order Details</span>\r\n            </h1>\r\n            <div class=\"d-flex justify-content-between align-items-end\">\r\n                <div class=\"d-flex flex-column\">\r\n                    <span class=\"fs-5\">Order {{ orderDetailData?.orderNum }}</span>\r\n                    <span class=\"fs-6\">{{ orderDetailData?.createdTimeStamp | date: 'medium' }}, {{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }} items | <span [innerHTML]=\"currency\"></span> {{orderDetailData?.brandOrderDetails?.[0]?.billDetails?.totalGrossValue}}</span>\r\n                </div>\r\n                <span class=\"fw-bold fs-5\">{{orderDetailData?.brandOrderDetails?.[0]?.businessName | titlecase}}</span>\r\n            </div>\r\n            <ng-container *ngIf=\"!isMobile\">\r\n                <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n            </ng-container>\r\n            <div>\r\n                <div *ngFor=\"let item of orderDetailData?.brandOrderDetails?.[0]?.orderedItems\" class=\"d-flex mb-2\" style=\"gap: 10px; width: 100%;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"item.imgUrl\" alt=\"\" style=\"height: 85px;width: 85px; border-radius: 5px;\">\r\n                    <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n                        <span class=\"fw-bold fs-6\">{{item.itemName}}</span>\r\n                        <!-- <span class=\"fs-6\">Size: XS</span> -->\r\n                        <div class=\"d-flex justify-content-between fs-6\">\r\n                            <span>{{item.quantity}} X  <span [innerHTML]=\"currency\"></span> <span class=\"fw-bold\">{{(item.discountedPrice) | number: '1.0-2'}}</span></span>\r\n                            <span> <span [innerHTML]=\"currency\"></span> <span class=\"fw-bold\">{{(item.discountedPrice * item.quantity)  | number: '1.0-2'}}</span></span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf=\"isMobile\">\r\n                <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n            </ng-container>\r\n            <div class=\"fs-6\">\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Item Total</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span> {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Total Tax</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span> {{orderDetailData?.billDetails?.totalTax | number:'1.0-2'}}</span>\r\n                </div>\r\n\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span>Delivery</span>\r\n                    <span>FREE</span>\r\n                </div>\r\n\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Grand Total</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span> {{orderDetailData?.billDetails?.totalGrossValue | number:'1.0-2'}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"right\" style=\"width: 28%;\" [style.width.%]=\"isMobile ? '90' : '28'\" [style.background]=\"getCardBGColor\">\r\n            <h1 class=\"mb-3 fs-5\">User Details</h1>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px;\" [style.color]=\"getSupportingColor(getCardBGColor)\">Name:</span>\r\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{orderDetailData?.addressDetails?.receiverName}}</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Phone:</span>\r\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{ orderDetailData?.addressDetails?.receiverPhone }}</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Address:</span>\r\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{ orderAddress }}</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Payment:</span>\r\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">Manual Payment</span>\r\n            </div>\r\n            <a href=\"\">Track Order</a>\r\n        </div>\r\n    </section>\r\n</ng-container>\r\n\r\n<ng-template #timelineContainer>\r\n    <hr />\r\n    <div class=\"timeline\">\r\n        <p-timeline [value]=\"orderTimiline\">\r\n            <ng-template pTemplate=\"content\" let-event>\r\n                <div class=\"d-flex time-line\">\r\n                    <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon>\r\n                    <div class=\"d-flex flex-column ml-2\">\r\n                        <span class=\"fw-normal fs-6\">{{ event.name?.replaceAll(\"_\", \" \") }}</span>\r\n                        <div class=\"fs-6 \">{{event.desc?.replaceAll(\"_\", \" \")}}</div>\r\n                        <div class=\"action-btn\">\r\n                            <button *ngIf=\"canCancelOrder\">Cancel Order</button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n        </p-timeline>\r\n    </div>\r\n    <hr />\r\n</ng-template>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n  </ngx-skeleton-loader>\r\n", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:92%!important;margin-bottom:4px!important;height:auto!important;padding:15px 0!important}.main-section,.left{width:100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i4.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderDetailsComponent, decorators: [{
             type: Component,
@@ -7868,7 +7887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         SimpoComponentModule,
                         TimelineModule,
                         MatIcon
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\n    <section class=\"d-flex justify-content-between main-section\" [style.flexDirection]=\"isMobile ? 'column' : 'row'\" [style.width.vw]=\"isMobile ? '100' : '65'\" style=\"margin: auto;\">\n        <div class=\"left\" [style.width.%]=\"isMobile ? '90' : '70'\">\n            <h1 class=\"fs-3 fw-normal mb-3 d-flex align-items-center onlyDesktop position-relative\" style=\"left: -35px;\">\n                <mat-icon style=\"cursor: pointer;\" (click)=\"goBack()\">keyboard_arrow_left</mat-icon>\n                <span>Order Details</span>\n            </h1>\n            <div class=\"d-flex justify-content-between align-items-end\">\n                <div class=\"d-flex flex-column\">\n                    <span class=\"fs-5\">Order {{ orderDetailData?.orderNum }}</span>\n                    <span class=\"fs-6\">{{ orderDetailData?.createdTimeStamp | date: 'medium' }}, {{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }} items | <span [innerHTML]=\"currency\"></span> {{orderDetailData?.brandOrderDetails?.[0]?.billDetails?.totalGrossValue}}</span>\n                </div>\n                <span class=\"fw-bold fs-5\">{{orderDetailData?.brandOrderDetails?.[0]?.businessName | titlecase}}</span>\n            </div>\n            <ng-container *ngIf=\"!isMobile\">\n                <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\n            </ng-container>\n            <div>\n                <div *ngFor=\"let item of orderDetailData?.brandOrderDetails?.[0]?.orderedItems\" class=\"d-flex mb-2\" style=\"gap: 10px; width: 100%;\">\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"item.imgUrl\" alt=\"\" style=\"height: 85px;width: 85px; border-radius: 5px;\">\n                    <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\n                        <span class=\"fw-bold fs-6\">{{item.itemName}}</span>\n                        <!-- <span class=\"fs-6\">Size: XS</span> -->\n                        <div class=\"d-flex justify-content-between fs-6\">\n                            <span>{{item.quantity}} X  <span [innerHTML]=\"currency\"></span> <span class=\"fw-bold\">{{(item.discountedPrice) | number: '1.0-2'}}</span></span>\n                            <span> <span [innerHTML]=\"currency\"></span> <span class=\"fw-bold\">{{(item.discountedPrice * item.quantity)  | number: '1.0-2'}}</span></span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <ng-container *ngIf=\"isMobile\">\n                <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\n            </ng-container>\n            <div class=\"fs-6\">\n                <div class=\"d-flex justify-content-between my-2\">\n                    <span class=\"fw-normal\">Item Total</span>\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span> {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\n                </div>\n                <div class=\"d-flex justify-content-between my-2\">\n                    <span class=\"fw-normal\">Total Tax</span>\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span> {{orderDetailData?.billDetails?.totalTax | number:'1.0-2'}}</span>\n                </div>\n\n                <div class=\"d-flex justify-content-between my-2\">\n                    <span>Delivery</span>\n                    <span>FREE</span>\n                </div>\n\n                <div class=\"d-flex justify-content-between my-2\">\n                    <span class=\"fw-normal\">Grand Total</span>\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span> {{orderDetailData?.billDetails?.totalGrossValue | number:'1.0-2'}}</span>\n                </div>\n            </div>\n        </div>\n        <div class=\"right\" style=\"width: 28%;\" [style.width.%]=\"isMobile ? '90' : '28'\" [style.background]=\"getCardBGColor\">\n            <h1 class=\"mb-3 fs-5\">User Details</h1>\n            <div class=\"my-2 fs-6\">\n                <span style=\"margin-right: 10px;\" [style.color]=\"getSupportingColor(getCardBGColor)\">Name:</span>\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{orderDetailData?.addressDetails?.receiverName}}</span>\n            </div>\n            <div class=\"my-2 fs-6\">\n                <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Phone:</span>\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{ orderDetailData?.addressDetails?.receiverPhone }}</span>\n            </div>\n            <div class=\"my-2 fs-6\">\n                <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Address:</span>\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{ orderAddress }}</span>\n            </div>\n            <div class=\"my-2 fs-6\">\n                <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Payment:</span>\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">Manual Payment</span>\n            </div>\n            <a href=\"\">Track Order</a>\n        </div>\n    </section>\n</ng-container>\n\n<ng-template #timelineContainer>\n    <hr />\n    <div class=\"timeline\">\n        <p-timeline [value]=\"orderTimiline\">\n            <ng-template pTemplate=\"content\" let-event>\n                <div class=\"d-flex time-line\">\n                    <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon>\n                    <div class=\"d-flex flex-column ml-2\">\n                        <span class=\"fw-normal fs-6\">{{ event.name?.replaceAll(\"_\", \" \") }}</span>\n                        <div class=\"fs-6 \">{{event.desc?.replaceAll(\"_\", \" \")}}</div>\n                        <div class=\"action-btn\">\n                            <button *ngIf=\"canCancelOrder\">Cancel Order</button>\n                        </div>\n                    </div>\n                </div>\n            </ng-template>\n        </p-timeline>\n    </div>\n    <hr />\n</ng-template>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n    width: '100%',\n    height: '40vh',\n    'border-radius': '10px',\n    'position': 'relative',\n    'right': '5px'\n  }\">\n  </ngx-skeleton-loader>\n", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:92%!important;margin-bottom:4px!important;height:auto!important;padding:15px 0!important}.main-section,.left{width:100%!important}}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n    <section class=\"d-flex justify-content-between main-section\" [style.flexDirection]=\"isMobile ? 'column' : 'row'\" [style.width.vw]=\"isMobile ? '100' : '65'\" style=\"margin: auto;\">\r\n        <div class=\"left\" [style.width.%]=\"isMobile ? '90' : '70'\">\r\n            <h1 class=\"fs-3 fw-normal mb-3 d-flex align-items-center onlyDesktop position-relative\" style=\"left: -35px;\">\r\n                <mat-icon style=\"cursor: pointer;\" (click)=\"goBack()\">keyboard_arrow_left</mat-icon>\r\n                <span>Order Details</span>\r\n            </h1>\r\n            <div class=\"d-flex justify-content-between align-items-end\">\r\n                <div class=\"d-flex flex-column\">\r\n                    <span class=\"fs-5\">Order {{ orderDetailData?.orderNum }}</span>\r\n                    <span class=\"fs-6\">{{ orderDetailData?.createdTimeStamp | date: 'medium' }}, {{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }} items | <span [innerHTML]=\"currency\"></span> {{orderDetailData?.brandOrderDetails?.[0]?.billDetails?.totalGrossValue}}</span>\r\n                </div>\r\n                <span class=\"fw-bold fs-5\">{{orderDetailData?.brandOrderDetails?.[0]?.businessName | titlecase}}</span>\r\n            </div>\r\n            <ng-container *ngIf=\"!isMobile\">\r\n                <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n            </ng-container>\r\n            <div>\r\n                <div *ngFor=\"let item of orderDetailData?.brandOrderDetails?.[0]?.orderedItems\" class=\"d-flex mb-2\" style=\"gap: 10px; width: 100%;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"item.imgUrl\" alt=\"\" style=\"height: 85px;width: 85px; border-radius: 5px;\">\r\n                    <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n                        <span class=\"fw-bold fs-6\">{{item.itemName}}</span>\r\n                        <!-- <span class=\"fs-6\">Size: XS</span> -->\r\n                        <div class=\"d-flex justify-content-between fs-6\">\r\n                            <span>{{item.quantity}} X  <span [innerHTML]=\"currency\"></span> <span class=\"fw-bold\">{{(item.discountedPrice) | number: '1.0-2'}}</span></span>\r\n                            <span> <span [innerHTML]=\"currency\"></span> <span class=\"fw-bold\">{{(item.discountedPrice * item.quantity)  | number: '1.0-2'}}</span></span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf=\"isMobile\">\r\n                <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n            </ng-container>\r\n            <div class=\"fs-6\">\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Item Total</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span> {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Total Tax</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span> {{orderDetailData?.billDetails?.totalTax | number:'1.0-2'}}</span>\r\n                </div>\r\n\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span>Delivery</span>\r\n                    <span>FREE</span>\r\n                </div>\r\n\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Grand Total</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span> {{orderDetailData?.billDetails?.totalGrossValue | number:'1.0-2'}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"right\" style=\"width: 28%;\" [style.width.%]=\"isMobile ? '90' : '28'\" [style.background]=\"getCardBGColor\">\r\n            <h1 class=\"mb-3 fs-5\">User Details</h1>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px;\" [style.color]=\"getSupportingColor(getCardBGColor)\">Name:</span>\r\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{orderDetailData?.addressDetails?.receiverName}}</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Phone:</span>\r\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{ orderDetailData?.addressDetails?.receiverPhone }}</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Address:</span>\r\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{ orderAddress }}</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Payment:</span>\r\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">Manual Payment</span>\r\n            </div>\r\n            <a href=\"\">Track Order</a>\r\n        </div>\r\n    </section>\r\n</ng-container>\r\n\r\n<ng-template #timelineContainer>\r\n    <hr />\r\n    <div class=\"timeline\">\r\n        <p-timeline [value]=\"orderTimiline\">\r\n            <ng-template pTemplate=\"content\" let-event>\r\n                <div class=\"d-flex time-line\">\r\n                    <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon>\r\n                    <div class=\"d-flex flex-column ml-2\">\r\n                        <span class=\"fw-normal fs-6\">{{ event.name?.replaceAll(\"_\", \" \") }}</span>\r\n                        <div class=\"fs-6 \">{{event.desc?.replaceAll(\"_\", \" \")}}</div>\r\n                        <div class=\"action-btn\">\r\n                            <button *ngIf=\"canCancelOrder\">Cancel Order</button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n        </p-timeline>\r\n    </div>\r\n    <hr />\r\n</ng-template>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n  </ngx-skeleton-loader>\r\n", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:92%!important;margin-bottom:4px!important;height:auto!important;padding:15px 0!important}.main-section,.left{width:100%!important}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{
@@ -8188,7 +8207,7 @@ class UserProfileComponent extends BaseSection {
         return BUSINESS_CONSTANTS.CURRENCY;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$3.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: CartService }, { token: i3.MatDialog }, { token: i5.MatBottomSheet }, { token: i2$2.CookieService }, { token: i7.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\n\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100\" style=\"margin: auto; overflow-y: auto;\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\" [style.color]=\"styles?.background?.accentColor\" [style.backgroundColor]=\"styles?.background?.color ?? 'white'\" [style.height.vh]=\"isMobile ? '100':'90'\" [style.zIndex]=\"isMobile ? '100000' : ''\" [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" >\n    <ng-container *ngIf=\"!isMobile\">\n        <div class=\"p-3 profile-box\" style=\"width: 25%; border-radius: 10px; height: fit-content;\" [style.order]=\"styles?.swap ? '1' : '0'\">\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"  [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\n                <div>\n                    <h4 class=\"font-weight-bold\" [style.color]=\"styles?.background?.accentColor\">{{getUserDetails?.contact?.name}}</h4>\n                    <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"getUserDetails?.contact?.mobile?.length\">\n                        <mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span> \n                        <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('MOBILE')\">edit</mat-icon> -->\n                    </h6>\n                    <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"getUserDetails?.contact?.email?.length\">\n                        <mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span> \n                        <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('EMAIL')\">edit</mat-icon> -->\n                    </h6>\n                </div>\n            </div>\n            <div class=\"tabs\">\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\n                    <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\n                        <!-- <mat-icon [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.icon}}</mat-icon> -->\n                        <img [src]=\"tab.image | genderIcon\" alt=\"\" style=\"height: 20px;\" [style.color]=\"styles?.background?.accentColor\">\n                        <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{tab.value}}</div>\n                    </div>\n                </ng-container>\n                <div class=\"d-flex\" style=\"gap: 5px;\">\n                    <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\n                    <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\n                </div>\n            </div>\n        </div>\n        <div class=\"orders-sec\" [simpoBorder]=\"styles?.border\" [style.order]=\"styles?.swap ? '0' : '1'\" [simpoBackground]=\"styles?.background\">\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\n                <ng-container *ngSwitchCase=\"'Orders'\">\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Address'\">\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Account Details'\">\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Logout'\">\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\n                </ng-container>\n            </ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"isMobile\">\n        <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\n            </div>\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\n                <ng-container *ngSwitchCase=\"''\">\n                    <section class=\"top-sec\">\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\n                        <div class=\"d-flex flex-column align-items-center\">\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\n                            <h6 class=\"d-flex align-items-center font-weight-normal\" *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\n                        </div>\n                    </section>\n                    <section class=\"list-sec\">\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\" [style.color]=\"styles?.background?.accentColor\">\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{tab.value}}</div>\n                            </div>\n                            \n                        </ng-container>\n                    </section>\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>    \n                    </div>\n                </ng-container>\n                \n                <ng-container *ngSwitchCase=\"'Orders'\">\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Address'\">\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Account Details'\">\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Logout'\">\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\n                </ng-container>\n                \n            </ng-container>\n        </div>\n    </ng-container>\n</section>\n\n<ng-template #OrderSection>\n    <h1 class=\"onlyDesktop\">My Orders</h1>\n    <div class=\"d-flex my-3 orderlist onlyDesktop\">\n        <ng-container *ngFor=\"let tab of tabs\">\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\n        </ng-container>\n    </div>\n    <div class=\"order-list\">\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\n            </div>\n        </ng-container>\n        <ng-template #showEmptyScreen>\n            <section class=\"empty-cart m-auto\">\n                <div>\n                  <div class=\"cart-image\">\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\n                  </div>\n                  <div class=\"cart-text\">\n                    <ng-container *ngFor=\"let text of content?.inputText\">\n                        <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\n                    </ng-container>\n                  </div>\n                </div>\n            </section>\n        </ng-template>\n    </div>\n</ng-template>\n<ng-template #OrderDetails>\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\" (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\n</ng-template>\n<ng-template #AddressSection>\n    <div class=\"d-flex justify-content-between mb-2\">\n        <h1 class=\"title-text\">My Address</h1>\n        <button class=\"address-btn\" (click)=\"addNewAddress()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n    </div>\n    <div class=\"address-list\">\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\n                <div class=\"address\" [style.width]=\"getProductWidth\">\n                    <div class=\"address-left\">\n                        <div class=\"top\">\n                            <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\n                            <span class=\"address-type\">{{address.addressType}}</span>\n                        </div>\n                        <div class=\"address-det\">{{address.addressLine1}}</div>\n                        <div class=\"phone\">\n                            <span>Phone:</span>\n                            <span class=\"address-phone\">{{address.receiverPhone}}</span>\n                        </div>\n                    </div>\n                    <div class=\"address-right\">\n                        <mat-icon (click)=\"editAddress(idx)\">edit</mat-icon>\n                        <mat-icon (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\n                    </div>\n                </div>\n            </ng-container>\n        </ng-container>\n        <ng-template #showEmptyAddress>\n            <section class=\"empty-cart m-auto\">\n                <div>\n                  <div class=\"cart-image\">\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\n                  </div>\n                  <div class=\"cart-text\">\n                    <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery</div>\n                    <!-- </ng-container> -->\n                  </div>\n                </div>\n            </section>\n        </ng-template>\n    </div>\n</ng-template>\n<ng-template #AccountsSection>\n    <h1 class=\"onlyDesktop\">My Accounts</h1>\n</ng-template>\n<ng-template #LogoutSection>\n    <h1 class=\"onlyDesktop\">Logout</h1>\n</ng-template>\n<ng-template #OrderCard let-order=\"data\">\n    <div (click)=\"goToOrderDetails(order)\" class=\"cursor-pointer\">\n        <div class=\"top\">\n            <span class=\"font-weight-normal\">{{order.orderNum}}</span>\n            <mat-icon>arrow_forward_ios</mat-icon>\n        </div>\n        <div class=\"middle my-2\">\n            <span>{{order.createdTimeStamp | date: 'medium'}}</span>\n            <span class=\"font-weight-bold\">{{order?.brandOrderDetails?.[0]?.brandName | titlecase}}</span>\n        </div>\n        <hr />\n        <div class=\"bottom\">\n            <span class=\"font-weight-normal\">Amount: <span> <span [innerHTML]=\"currency\"></span> {{ order.billDetails.totalGrossValue }}</span></span>\n            <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">{{ order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | uppercase }}</span>\n        </div>\n    </div>\n</ng-template>\n<ng-template #WishlistDetails>\n    <h1 class=\"onlyDesktop\">My Wishlist</h1>\n    <div class=\"wishlist-list\">\n        <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\n                <div class=\"cart-items\">\n                    <div class=\"d-flex item-parent\">\n                    <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\n                    </div>\n                    <div class=\"col-md-8 h-100 item-desc\">\n                        <div class=\"lh-23\">\n                        <div class=\"item-name heading-large\">{{item.itemName}}</div>\n                        <div class=\"price-with-tax\">\n                            <span [innerHTML]='currency'></span> {{item.discountedPrice}}\n                        </div>\n                        <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\n                            <div class=\"item-quantity\" *ngIf=\"item.quantity\">\n                                <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\n                                <span>{{item.quantity}}</span>\n                                <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\n                            </div>\n                            <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add to Quantity</div>\n                            <div class=\"item-quantity\" (click)=\"moveToCart(item)\">Move to Cart</div>\n                        </div>\n                        </div>\n                    </div>\n                    <div class=\"position-relative d-flex flex-column justify-content-between iemPrice\" style=\"right: 5px\">\n                        <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span> {{(item.discountedPrice) * item.quantity}}</div>\n                        <div>\n                        <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\" *ngIf=\"!isMobile\">delete</mat-icon>\n                        </div>\n                    </div>\n                    </div>\n                </div>\n            </ng-container>\n          </div>\n    </div>\n    <ng-template #showEmptyWishlistScreen>\n        <section class=\"empty-cart m-auto\">\n            <div>\n              <div class=\"cart-image\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\n              </div>\n              <div class=\"cart-text\">\n                <ng-container *ngFor=\"let text of content?.inputText\">\n                    <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\n                </ng-container>\n              </div>\n            </div>\n        </section>\n    </ng-template>\n</ng-template>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n    width: '100%',\n    height: '40vh',\n    'border-radius': '10px',\n    'position': 'relative',\n    'right': '5px'\n  }\">\n</ngx-skeleton-loader>\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\n</div>\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n</div>", styles: [".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;margin-right:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;box-shadow:#0000000d 0 0 0 1px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order{border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:#0000000d 0 0 0 1px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;min-height:40vh;max-height:71vh;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:fit-content}.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;background-color:#0267c1;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{border:1px solid lightgray;box-shadow:#00000029 0 1px 4px}.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}@media screen and (max-width: 475px){.title-text{font-size:24px}.tab-selected div{font-weight:600!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.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: i13$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", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100\" style=\"margin: auto; overflow-y: auto;\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\" [style.color]=\"styles?.background?.accentColor\" [style.backgroundColor]=\"styles?.background?.color ?? 'white'\" [style.height.vh]=\"isMobile ? '100':'90'\" [style.zIndex]=\"isMobile ? '100000' : ''\" [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" >\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-3 profile-box\" style=\"width: 25%; border-radius: 10px; height: fit-content;\" [style.order]=\"styles?.swap ? '1' : '0'\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"  [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n                <div>\r\n                    <h4 class=\"font-weight-bold\" [style.color]=\"styles?.background?.accentColor\">{{getUserDetails?.contact?.name}}</h4>\r\n                    <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"getUserDetails?.contact?.mobile?.length\">\r\n                        <mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span> \r\n                        <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('MOBILE')\">edit</mat-icon> -->\r\n                    </h6>\r\n                    <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"getUserDetails?.contact?.email?.length\">\r\n                        <mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span> \r\n                        <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('EMAIL')\">edit</mat-icon> -->\r\n                    </h6>\r\n                </div>\r\n            </div>\r\n            <div class=\"tabs\">\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;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n                        <!-- <mat-icon [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.icon}}</mat-icon> -->\r\n                        <img [src]=\"tab.image | genderIcon\" alt=\"\" style=\"height: 20px;\" [style.color]=\"styles?.background?.accentColor\">\r\n                        <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{tab.value}}</div>\r\n                    </div>\r\n                </ng-container>\r\n                <div class=\"d-flex\" style=\"gap: 5px;\">\r\n                    <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                    <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"orders-sec\" [simpoBorder]=\"styles?.border\" [style.order]=\"styles?.swap ? '0' : '1'\" [simpoBackground]=\"styles?.background\">\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>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (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'\" [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\" 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\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\" *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></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;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\" [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{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\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>    \r\n                    </div>\r\n                </ng-container>\r\n                \r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                \r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 class=\"onlyDesktop\">My Orders</h1>\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)\">{{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'\"   [src]=\"content?.image?.url\" [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\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</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\" (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        <h1 class=\"title-text\">My Address</h1>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\">{{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=\"address\" [style.width]=\"getProductWidth\">\r\n                    <div class=\"address-left\">\r\n                        <div class=\"top\">\r\n                            <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\r\n                            <span class=\"address-type\">{{address.addressType}}</span>\r\n                        </div>\r\n                        <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                        <div class=\"phone\">\r\n                            <span>Phone:</span>\r\n                            <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"address-right\">\r\n                        <mat-icon (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                        <mat-icon (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\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'\"   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</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    <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"cursor-pointer\">\r\n        <div class=\"top\">\r\n            <span class=\"font-weight-normal\">{{order.orderNum}}</span>\r\n            <mat-icon>arrow_forward_ios</mat-icon>\r\n        </div>\r\n        <div class=\"middle my-2\">\r\n            <span>{{order.createdTimeStamp | date: 'medium'}}</span>\r\n            <span class=\"font-weight-bold\">{{order?.brandOrderDetails?.[0]?.brandName | titlecase}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"bottom\">\r\n            <span class=\"font-weight-normal\">Amount: <span> <span [innerHTML]=\"currency\"></span> {{ order.billDetails.totalGrossValue }}</span></span>\r\n            <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">{{ order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | uppercase }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #WishlistDetails>\r\n    <h1 class=\"onlyDesktop\">My Wishlist</h1>\r\n    <div class=\"wishlist-list\">\r\n        <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"cart-items\">\r\n                    <div class=\"d-flex item-parent\">\r\n                    <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n                    </div>\r\n                    <div class=\"col-md-8 h-100 item-desc\">\r\n                        <div class=\"lh-23\">\r\n                        <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                        <div class=\"price-with-tax\">\r\n                            <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n                        </div>\r\n                        <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\r\n                            <div class=\"item-quantity\" *ngIf=\"item.quantity\">\r\n                                <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n                                <span>{{item.quantity}}</span>\r\n                                <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n                            </div>\r\n                            <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add to Quantity</div>\r\n                            <div class=\"item-quantity\" (click)=\"moveToCart(item)\">Move to Cart</div>\r\n                        </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"position-relative d-flex flex-column justify-content-between iemPrice\" style=\"right: 5px\">\r\n                        <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span> {{(item.discountedPrice) * item.quantity}}</div>\r\n                        <div>\r\n                        <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\" *ngIf=\"!isMobile\">delete</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\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'\"   [src]=\"content?.image?.url\" [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\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</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<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [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>", styles: [".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;margin-right:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;box-shadow:#0000000d 0 0 0 1px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order{border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:#0000000d 0 0 0 1px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;min-height:40vh;max-height:71vh;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:fit-content}.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;background-color:#0267c1;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{border:1px solid lightgray;box-shadow:#00000029 0 1px 4px}.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}@media screen and (max-width: 475px){.title-text{font-size:24px}.tab-selected div{font-weight:600!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.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: i13$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", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserProfileComponent, decorators: [{
             type: Component,
@@ -8209,7 +8228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         MatBottomSheetModule,
                         ToastModule,
                         GenderIcon
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\n\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100\" style=\"margin: auto; overflow-y: auto;\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\" [style.color]=\"styles?.background?.accentColor\" [style.backgroundColor]=\"styles?.background?.color ?? 'white'\" [style.height.vh]=\"isMobile ? '100':'90'\" [style.zIndex]=\"isMobile ? '100000' : ''\" [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" >\n    <ng-container *ngIf=\"!isMobile\">\n        <div class=\"p-3 profile-box\" style=\"width: 25%; border-radius: 10px; height: fit-content;\" [style.order]=\"styles?.swap ? '1' : '0'\">\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"  [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\n                <div>\n                    <h4 class=\"font-weight-bold\" [style.color]=\"styles?.background?.accentColor\">{{getUserDetails?.contact?.name}}</h4>\n                    <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"getUserDetails?.contact?.mobile?.length\">\n                        <mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span> \n                        <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('MOBILE')\">edit</mat-icon> -->\n                    </h6>\n                    <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"getUserDetails?.contact?.email?.length\">\n                        <mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span> \n                        <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('EMAIL')\">edit</mat-icon> -->\n                    </h6>\n                </div>\n            </div>\n            <div class=\"tabs\">\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\n                    <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\n                        <!-- <mat-icon [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.icon}}</mat-icon> -->\n                        <img [src]=\"tab.image | genderIcon\" alt=\"\" style=\"height: 20px;\" [style.color]=\"styles?.background?.accentColor\">\n                        <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{tab.value}}</div>\n                    </div>\n                </ng-container>\n                <div class=\"d-flex\" style=\"gap: 5px;\">\n                    <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\n                    <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\n                </div>\n            </div>\n        </div>\n        <div class=\"orders-sec\" [simpoBorder]=\"styles?.border\" [style.order]=\"styles?.swap ? '0' : '1'\" [simpoBackground]=\"styles?.background\">\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\n                <ng-container *ngSwitchCase=\"'Orders'\">\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Address'\">\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Account Details'\">\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Logout'\">\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\n                </ng-container>\n            </ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"isMobile\">\n        <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\n            </div>\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\n                <ng-container *ngSwitchCase=\"''\">\n                    <section class=\"top-sec\">\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\n                        <div class=\"d-flex flex-column align-items-center\">\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\n                            <h6 class=\"d-flex align-items-center font-weight-normal\" *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\n                        </div>\n                    </section>\n                    <section class=\"list-sec\">\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\" [style.color]=\"styles?.background?.accentColor\">\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{tab.value}}</div>\n                            </div>\n                            \n                        </ng-container>\n                    </section>\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>    \n                    </div>\n                </ng-container>\n                \n                <ng-container *ngSwitchCase=\"'Orders'\">\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Address'\">\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Account Details'\">\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Logout'\">\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\n                </ng-container>\n                \n            </ng-container>\n        </div>\n    </ng-container>\n</section>\n\n<ng-template #OrderSection>\n    <h1 class=\"onlyDesktop\">My Orders</h1>\n    <div class=\"d-flex my-3 orderlist onlyDesktop\">\n        <ng-container *ngFor=\"let tab of tabs\">\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\n        </ng-container>\n    </div>\n    <div class=\"order-list\">\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\n            </div>\n        </ng-container>\n        <ng-template #showEmptyScreen>\n            <section class=\"empty-cart m-auto\">\n                <div>\n                  <div class=\"cart-image\">\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\n                  </div>\n                  <div class=\"cart-text\">\n                    <ng-container *ngFor=\"let text of content?.inputText\">\n                        <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\n                    </ng-container>\n                  </div>\n                </div>\n            </section>\n        </ng-template>\n    </div>\n</ng-template>\n<ng-template #OrderDetails>\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\" (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\n</ng-template>\n<ng-template #AddressSection>\n    <div class=\"d-flex justify-content-between mb-2\">\n        <h1 class=\"title-text\">My Address</h1>\n        <button class=\"address-btn\" (click)=\"addNewAddress()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n    </div>\n    <div class=\"address-list\">\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\n                <div class=\"address\" [style.width]=\"getProductWidth\">\n                    <div class=\"address-left\">\n                        <div class=\"top\">\n                            <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\n                            <span class=\"address-type\">{{address.addressType}}</span>\n                        </div>\n                        <div class=\"address-det\">{{address.addressLine1}}</div>\n                        <div class=\"phone\">\n                            <span>Phone:</span>\n                            <span class=\"address-phone\">{{address.receiverPhone}}</span>\n                        </div>\n                    </div>\n                    <div class=\"address-right\">\n                        <mat-icon (click)=\"editAddress(idx)\">edit</mat-icon>\n                        <mat-icon (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\n                    </div>\n                </div>\n            </ng-container>\n        </ng-container>\n        <ng-template #showEmptyAddress>\n            <section class=\"empty-cart m-auto\">\n                <div>\n                  <div class=\"cart-image\">\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\n                  </div>\n                  <div class=\"cart-text\">\n                    <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery</div>\n                    <!-- </ng-container> -->\n                  </div>\n                </div>\n            </section>\n        </ng-template>\n    </div>\n</ng-template>\n<ng-template #AccountsSection>\n    <h1 class=\"onlyDesktop\">My Accounts</h1>\n</ng-template>\n<ng-template #LogoutSection>\n    <h1 class=\"onlyDesktop\">Logout</h1>\n</ng-template>\n<ng-template #OrderCard let-order=\"data\">\n    <div (click)=\"goToOrderDetails(order)\" class=\"cursor-pointer\">\n        <div class=\"top\">\n            <span class=\"font-weight-normal\">{{order.orderNum}}</span>\n            <mat-icon>arrow_forward_ios</mat-icon>\n        </div>\n        <div class=\"middle my-2\">\n            <span>{{order.createdTimeStamp | date: 'medium'}}</span>\n            <span class=\"font-weight-bold\">{{order?.brandOrderDetails?.[0]?.brandName | titlecase}}</span>\n        </div>\n        <hr />\n        <div class=\"bottom\">\n            <span class=\"font-weight-normal\">Amount: <span> <span [innerHTML]=\"currency\"></span> {{ order.billDetails.totalGrossValue }}</span></span>\n            <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">{{ order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | uppercase }}</span>\n        </div>\n    </div>\n</ng-template>\n<ng-template #WishlistDetails>\n    <h1 class=\"onlyDesktop\">My Wishlist</h1>\n    <div class=\"wishlist-list\">\n        <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\n                <div class=\"cart-items\">\n                    <div class=\"d-flex item-parent\">\n                    <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\n                    </div>\n                    <div class=\"col-md-8 h-100 item-desc\">\n                        <div class=\"lh-23\">\n                        <div class=\"item-name heading-large\">{{item.itemName}}</div>\n                        <div class=\"price-with-tax\">\n                            <span [innerHTML]='currency'></span> {{item.discountedPrice}}\n                        </div>\n                        <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\n                            <div class=\"item-quantity\" *ngIf=\"item.quantity\">\n                                <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\n                                <span>{{item.quantity}}</span>\n                                <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\n                            </div>\n                            <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add to Quantity</div>\n                            <div class=\"item-quantity\" (click)=\"moveToCart(item)\">Move to Cart</div>\n                        </div>\n                        </div>\n                    </div>\n                    <div class=\"position-relative d-flex flex-column justify-content-between iemPrice\" style=\"right: 5px\">\n                        <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span> {{(item.discountedPrice) * item.quantity}}</div>\n                        <div>\n                        <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\" *ngIf=\"!isMobile\">delete</mat-icon>\n                        </div>\n                    </div>\n                    </div>\n                </div>\n            </ng-container>\n          </div>\n    </div>\n    <ng-template #showEmptyWishlistScreen>\n        <section class=\"empty-cart m-auto\">\n            <div>\n              <div class=\"cart-image\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\n              </div>\n              <div class=\"cart-text\">\n                <ng-container *ngFor=\"let text of content?.inputText\">\n                    <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\n                </ng-container>\n              </div>\n            </div>\n        </section>\n    </ng-template>\n</ng-template>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n    width: '100%',\n    height: '40vh',\n    'border-radius': '10px',\n    'position': 'relative',\n    'right': '5px'\n  }\">\n</ngx-skeleton-loader>\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\n</div>\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n</div>", styles: [".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;margin-right:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;box-shadow:#0000000d 0 0 0 1px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order{border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:#0000000d 0 0 0 1px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;min-height:40vh;max-height:71vh;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:fit-content}.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;background-color:#0267c1;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{border:1px solid lightgray;box-shadow:#00000029 0 1px 4px}.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}@media screen and (max-width: 475px){.title-text{font-size:24px}.tab-selected div{font-weight:600!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;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}\n"] }]
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100\" style=\"margin: auto; overflow-y: auto;\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\" [style.color]=\"styles?.background?.accentColor\" [style.backgroundColor]=\"styles?.background?.color ?? 'white'\" [style.height.vh]=\"isMobile ? '100':'90'\" [style.zIndex]=\"isMobile ? '100000' : ''\" [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" >\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-3 profile-box\" style=\"width: 25%; border-radius: 10px; height: fit-content;\" [style.order]=\"styles?.swap ? '1' : '0'\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"  [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n                <div>\r\n                    <h4 class=\"font-weight-bold\" [style.color]=\"styles?.background?.accentColor\">{{getUserDetails?.contact?.name}}</h4>\r\n                    <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"getUserDetails?.contact?.mobile?.length\">\r\n                        <mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span> \r\n                        <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('MOBILE')\">edit</mat-icon> -->\r\n                    </h6>\r\n                    <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"getUserDetails?.contact?.email?.length\">\r\n                        <mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span> \r\n                        <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('EMAIL')\">edit</mat-icon> -->\r\n                    </h6>\r\n                </div>\r\n            </div>\r\n            <div class=\"tabs\">\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;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n                        <!-- <mat-icon [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.icon}}</mat-icon> -->\r\n                        <img [src]=\"tab.image | genderIcon\" alt=\"\" style=\"height: 20px;\" [style.color]=\"styles?.background?.accentColor\">\r\n                        <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{tab.value}}</div>\r\n                    </div>\r\n                </ng-container>\r\n                <div class=\"d-flex\" style=\"gap: 5px;\">\r\n                    <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                    <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"orders-sec\" [simpoBorder]=\"styles?.border\" [style.order]=\"styles?.swap ? '0' : '1'\" [simpoBackground]=\"styles?.background\">\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>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (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'\" [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\" 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\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\" *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></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;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\" [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{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\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>    \r\n                    </div>\r\n                </ng-container>\r\n                \r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                \r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 class=\"onlyDesktop\">My Orders</h1>\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)\">{{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'\"   [src]=\"content?.image?.url\" [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\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</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\" (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        <h1 class=\"title-text\">My Address</h1>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\">{{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=\"address\" [style.width]=\"getProductWidth\">\r\n                    <div class=\"address-left\">\r\n                        <div class=\"top\">\r\n                            <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\r\n                            <span class=\"address-type\">{{address.addressType}}</span>\r\n                        </div>\r\n                        <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                        <div class=\"phone\">\r\n                            <span>Phone:</span>\r\n                            <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"address-right\">\r\n                        <mat-icon (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                        <mat-icon (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\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'\"   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</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    <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"cursor-pointer\">\r\n        <div class=\"top\">\r\n            <span class=\"font-weight-normal\">{{order.orderNum}}</span>\r\n            <mat-icon>arrow_forward_ios</mat-icon>\r\n        </div>\r\n        <div class=\"middle my-2\">\r\n            <span>{{order.createdTimeStamp | date: 'medium'}}</span>\r\n            <span class=\"font-weight-bold\">{{order?.brandOrderDetails?.[0]?.brandName | titlecase}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"bottom\">\r\n            <span class=\"font-weight-normal\">Amount: <span> <span [innerHTML]=\"currency\"></span> {{ order.billDetails.totalGrossValue }}</span></span>\r\n            <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">{{ order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | uppercase }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #WishlistDetails>\r\n    <h1 class=\"onlyDesktop\">My Wishlist</h1>\r\n    <div class=\"wishlist-list\">\r\n        <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"cart-items\">\r\n                    <div class=\"d-flex item-parent\">\r\n                    <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n                    </div>\r\n                    <div class=\"col-md-8 h-100 item-desc\">\r\n                        <div class=\"lh-23\">\r\n                        <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                        <div class=\"price-with-tax\">\r\n                            <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n                        </div>\r\n                        <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\r\n                            <div class=\"item-quantity\" *ngIf=\"item.quantity\">\r\n                                <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n                                <span>{{item.quantity}}</span>\r\n                                <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n                            </div>\r\n                            <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add to Quantity</div>\r\n                            <div class=\"item-quantity\" (click)=\"moveToCart(item)\">Move to Cart</div>\r\n                        </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"position-relative d-flex flex-column justify-content-between iemPrice\" style=\"right: 5px\">\r\n                        <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span> {{(item.discountedPrice) * item.quantity}}</div>\r\n                        <div>\r\n                        <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\" *ngIf=\"!isMobile\">delete</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\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'\"   [src]=\"content?.image?.url\" [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\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</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<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [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>", styles: [".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;margin-right:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;box-shadow:#0000000d 0 0 0 1px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order{border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:#0000000d 0 0 0 1px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;min-height:40vh;max-height:71vh;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:fit-content}.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;background-color:#0267c1;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{border:1px solid lightgray;box-shadow:#00000029 0 1px 4px}.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}@media screen and (max-width: 475px){.title-text{font-size:24px}.tab-selected div{font-weight:600!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;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}\n"] }]
         }], ctorParameters: () => [{ type: i2$3.Router }, { type: EventsService }, { type: RestService }, { type: StorageServiceService }, { type: CartService }, { type: i3.MatDialog }, { type: i5.MatBottomSheet }, { type: i2$2.CookieService }, { type: i7.MessageService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -8305,7 +8324,7 @@ class VerifyComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: VerifyComponent, deps: [{ token: RestService }, { token: i2$3.Router }, { token: StorageServiceService }, { token: i7.MessageService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: VerifyComponent, isStandalone: true, selector: "simpo-verify-payment", inputs: { data: "data", responseData: "responseData", edit: "edit", index: "index", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\n<section class=\"d-flex flex-column align-items-center justify-content-center\" style=\"height: 100vh;\" [simpoBackground]=\"styles?.background\" (click)=\"editSection()\" simpoHover (hovering)=\"showEditTabs($event)\">\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\n    <span class=\"font-bold\">{{loadingText}}</span>\n</section>\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n</div>", styles: ["span{color:#000;font-weight:600;font-size:larger}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: VerifyComponent, isStandalone: true, selector: "simpo-verify-payment", inputs: { data: "data", responseData: "responseData", edit: "edit", index: "index", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<section class=\"d-flex flex-column align-items-center justify-content-center\" style=\"height: 100vh;\" [simpoBackground]=\"styles?.background\" (click)=\"editSection()\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\r\n    <span class=\"font-bold\">{{loadingText}}</span>\r\n</section>\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [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>", styles: ["span{color:#000;font-weight:600;font-size:larger}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: VerifyComponent, decorators: [{
             type: Component,
@@ -8316,7 +8335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         CommonModule,
                         HoverElementsComponent,
                         DeleteHoverElementComponent
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\n<section class=\"d-flex flex-column align-items-center justify-content-center\" style=\"height: 100vh;\" [simpoBackground]=\"styles?.background\" (click)=\"editSection()\" simpoHover (hovering)=\"showEditTabs($event)\">\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\n    <span class=\"font-bold\">{{loadingText}}</span>\n</section>\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n</div>", styles: ["span{color:#000;font-weight:600;font-size:larger}\n"] }]
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<section class=\"d-flex flex-column align-items-center justify-content-center\" style=\"height: 100vh;\" [simpoBackground]=\"styles?.background\" (click)=\"editSection()\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\r\n    <span class=\"font-bold\">{{loadingText}}</span>\r\n</section>\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [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>", styles: ["span{color:#000;font-weight:600;font-size:larger}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: i2$3.Router }, { type: StorageServiceService }, { type: i7.MessageService }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], responseData: [{
@@ -8435,7 +8454,7 @@ class ProductCategoryListComponent extends BaseSection {
         return BUSINESS_CONSTANTS.CURRENCY;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductCategoryListComponent, deps: [{ token: RestService }, { token: CartService }, { token: i2$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductCategoryListComponent, isStandalone: true, selector: "simpo-product-category-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"d-flex\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"getSpacingLayout\">\n    <div class=\"filter-panel\">\n        <ng-container *ngFor=\"let category of categories\">\n            <div class=\"category\" [style.backgroundColor]=\"(category.categoryId == selectedCategory?.categoryId) ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\" [style.borderColor]=\"(category.categoryId == selectedCategory?.categoryId) ? styles?.background?.accentColor : ''\"\n                (click)=\"selectCategory(category)\">\n                <div class=\"product-img\">\n                    <img [src]=\"category.imgUrl?.[0]\" alt=\"\">\n                </div>\n                <span style=\"color: white;\">{{ category.categoryName }}</span>\n            </div>\n        </ng-container>\n    </div>\n    <div class=\"product-list-container\" [simpoBackground]=\"styles?.background\">\n        <h2 [simpoContentTitleSpace]=\"headingSpace\">Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\n\n        <section class=\"d-flex product-list\">\n            <ng-container *ngFor=\"let product of productList\">\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\"></simpo-small-product-listing>\n            </ng-container>\n        </section>\n    </div>\n</section>\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n</div>\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n</div>", styles: [".filter-panel{border-right:2px solid rgba(211,211,211,.297);width:18%}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.product-img{height:45px;width:45px;padding:5px;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:0 20px;width:80%}.product-list{overflow:auto;flex-wrap:wrap;height:90vh;border-radius:0 10px 10px/0px 10px 10px}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { 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: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductCategoryListComponent, isStandalone: true, selector: "simpo-product-category-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"d-flex\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"getSpacingLayout\">\r\n    <div class=\"filter-panel\">\r\n        <ng-container *ngFor=\"let category of categories\">\r\n            <div class=\"category\" [style.backgroundColor]=\"(category.categoryId == selectedCategory?.categoryId) ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\" [style.borderColor]=\"(category.categoryId == selectedCategory?.categoryId) ? styles?.background?.accentColor : ''\"\r\n                (click)=\"selectCategory(category)\">\r\n                <div class=\"product-img\">\r\n                    <img [src]=\"category.imgUrl?.[0]\" alt=\"\">\r\n                </div>\r\n                <span style=\"color: white;\">{{ category.categoryName }}</span>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"product-list-container\" [simpoBackground]=\"styles?.background\">\r\n        <h2 [simpoContentTitleSpace]=\"headingSpace\">Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\r\n\r\n        <section class=\"d-flex product-list\">\r\n            <ng-container *ngFor=\"let product of productList\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\"></simpo-small-product-listing>\r\n            </ng-container>\r\n        </section>\r\n    </div>\r\n</section>\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", styles: [".filter-panel{border-right:2px solid rgba(211,211,211,.297);width:18%}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.product-img{height:45px;width:45px;padding:5px;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:0 20px;width:80%}.product-list{overflow:auto;flex-wrap:wrap;height:90vh;border-radius:0 10px 10px/0px 10px 10px}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { 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: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductCategoryListComponent, decorators: [{
             type: Component,
@@ -8452,7 +8471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         SanitizeHtmlPipe,
                         SmallProductListingComponent,
                         ContentTitleDirective
-                    ], template: "<section class=\"d-flex\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"getSpacingLayout\">\n    <div class=\"filter-panel\">\n        <ng-container *ngFor=\"let category of categories\">\n            <div class=\"category\" [style.backgroundColor]=\"(category.categoryId == selectedCategory?.categoryId) ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\" [style.borderColor]=\"(category.categoryId == selectedCategory?.categoryId) ? styles?.background?.accentColor : ''\"\n                (click)=\"selectCategory(category)\">\n                <div class=\"product-img\">\n                    <img [src]=\"category.imgUrl?.[0]\" alt=\"\">\n                </div>\n                <span style=\"color: white;\">{{ category.categoryName }}</span>\n            </div>\n        </ng-container>\n    </div>\n    <div class=\"product-list-container\" [simpoBackground]=\"styles?.background\">\n        <h2 [simpoContentTitleSpace]=\"headingSpace\">Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\n\n        <section class=\"d-flex product-list\">\n            <ng-container *ngFor=\"let product of productList\">\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\"></simpo-small-product-listing>\n            </ng-container>\n        </section>\n    </div>\n</section>\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n</div>\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n</div>", styles: [".filter-panel{border-right:2px solid rgba(211,211,211,.297);width:18%}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.product-img{height:45px;width:45px;padding:5px;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:0 20px;width:80%}.product-list{overflow:auto;flex-wrap:wrap;height:90vh;border-radius:0 10px 10px/0px 10px 10px}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!important}}\n"] }]
+                    ], template: "<section class=\"d-flex\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"getSpacingLayout\">\r\n    <div class=\"filter-panel\">\r\n        <ng-container *ngFor=\"let category of categories\">\r\n            <div class=\"category\" [style.backgroundColor]=\"(category.categoryId == selectedCategory?.categoryId) ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\" [style.borderColor]=\"(category.categoryId == selectedCategory?.categoryId) ? styles?.background?.accentColor : ''\"\r\n                (click)=\"selectCategory(category)\">\r\n                <div class=\"product-img\">\r\n                    <img [src]=\"category.imgUrl?.[0]\" alt=\"\">\r\n                </div>\r\n                <span style=\"color: white;\">{{ category.categoryName }}</span>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"product-list-container\" [simpoBackground]=\"styles?.background\">\r\n        <h2 [simpoContentTitleSpace]=\"headingSpace\">Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\r\n\r\n        <section class=\"d-flex product-list\">\r\n            <ng-container *ngFor=\"let product of productList\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\"></simpo-small-product-listing>\r\n            </ng-container>\r\n        </section>\r\n    </div>\r\n</section>\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", styles: [".filter-panel{border-right:2px solid rgba(211,211,211,.297);width:18%}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.product-img{height:45px;width:45px;padding:5px;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:0 20px;width:80%}.product-list{overflow:auto;flex-wrap:wrap;height:90vh;border-radius:0 10px 10px/0px 10px 10px}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!important}}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: CartService }, { type: i2$3.ActivatedRoute }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{
@@ -8614,7 +8633,7 @@ class CategoryProductComponent extends BaseSection {
         return { ...this.styles?.layout };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CategoryProductComponent, deps: [{ token: RestService }, { token: CartService }, { token: EventsService }, { token: i2$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CategoryProductComponent, isStandalone: true, selector: "simpo-category-product", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\n  <section class=\"container-fluid d-block\" [id]=\"data?.id\"\n    [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"getSpacingLayout\">\n    <div *ngFor=\"let item of data?.content?.inputText\">\n      <div [innerHTML]=\"item.value | sanitizeHtml\"\n        [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n      </div>\n    </div>\n    <section class=\"m-auto position-relative w-100\">\n      <section class=\"d-flex\">\n        <ng-container *ngFor=\"let category of categoryList; let idx = index\">\n          <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\"\n            [style.backgroundColor]=\"selectCategoryId === category.categoryId ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\"\n            [style.borderColor]=\"selectCategoryId == category.categoryId ? styles?.background?.accentColor :  ''\"\n            (click)=\"selectCategory(category.categoryId)\">\n            <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\n            <span class=\"trim-text\" style=\"font-size: .8125rem; text-align: center !important;\"\n              [style.color]=\"selectCategoryId === category.categoryId ? (styles?.background?.accentColor) : ''\">{{\n              category.categoryName | titlecase }}</span>\n          </div>\n        </ng-container>\n      </section>\n      <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow\">\n        <mat-icon>keyboard_arrow_left</mat-icon>\n      </div>\n      <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow\">\n        <mat-icon>keyboard_arrow_right</mat-icon>\n      </div>\n      <section class=\"product-list position-relative\" #container *ngIf=\"dataList.length\"\n        [style.backgroundColor]=\"styles?.background?.accentColor\">\n        <section class=\"d-flex overflow-scroll\" id=\"productScrollBar\">\n          <ng-container *ngFor=\"let product of dataList\">\n            <simpo-small-product-listing [product]=\"product\" [data]=\"data\"></simpo-small-product-listing>\n          </ng-container>\n        </section>\n      </section>\n    </section>\n  </section>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n<ng-template #loadingTemplate>\n  <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n        width: '100%',\n        height: '40vh',\n        'border-radius': '10px',\n        'position': 'relative',\n        'right': '5px'\n    }\">\n  </ngx-skeleton-loader>\n</ng-template>\n", styles: [".total-container{height:auto;position:relative}.d-block{display:block!important}.category-tag{padding:15px 10px;height:120px;width:80px;border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;border-top:8px solid transparent}.product-list{padding:40px 20px}.overflow-scroll{overflow-x:auto}div[class*=arrow]{background-color:#fff;padding:5px;border-radius:50%;position:absolute;top:50%;display:flex;align-items:center;justify-content:center;z-index:10000001;cursor:pointer}.left-arrow{left:10px}.right-arrow{right:10px}#productScrollBar{scroll-behavior:smooth}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CategoryProductComponent, isStandalone: true, selector: "simpo-category-product", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n  <section class=\"container-fluid d-block\" [id]=\"data?.id\"\r\n    [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"getSpacingLayout\">\r\n    <div *ngFor=\"let item of data?.content?.inputText\">\r\n      <div [innerHTML]=\"item.value | sanitizeHtml\"\r\n        [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n      </div>\r\n    </div>\r\n    <section class=\"m-auto position-relative w-100\">\r\n      <section class=\"d-flex\">\r\n        <ng-container *ngFor=\"let category of categoryList; let idx = index\">\r\n          <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\"\r\n            [style.backgroundColor]=\"selectCategoryId === category.categoryId ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\"\r\n            [style.borderColor]=\"selectCategoryId == category.categoryId ? styles?.background?.accentColor :  ''\"\r\n            (click)=\"selectCategory(category.categoryId)\">\r\n            <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\r\n            <span class=\"trim-text\" style=\"font-size: .8125rem; text-align: center !important;\"\r\n              [style.color]=\"selectCategoryId === category.categoryId ? (styles?.background?.accentColor) : ''\">{{\r\n              category.categoryName | titlecase }}</span>\r\n          </div>\r\n        </ng-container>\r\n      </section>\r\n      <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow\">\r\n        <mat-icon>keyboard_arrow_left</mat-icon>\r\n      </div>\r\n      <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow\">\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </div>\r\n      <section class=\"product-list position-relative\" #container *ngIf=\"dataList.length\"\r\n        [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n        <section class=\"d-flex overflow-scroll\" id=\"productScrollBar\">\r\n          <ng-container *ngFor=\"let product of dataList\">\r\n            <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\"></simpo-small-product-listing>\r\n          </ng-container>\r\n        </section>\r\n      </section>\r\n    </section>\r\n  </section>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n<ng-template #loadingTemplate>\r\n  <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '100%',\r\n        height: '40vh',\r\n        'border-radius': '10px',\r\n        'position': 'relative',\r\n        'right': '5px'\r\n    }\">\r\n  </ngx-skeleton-loader>\r\n</ng-template>\r\n", styles: [".total-container{height:auto;position:relative}.d-block{display:block!important}.category-tag{padding:15px 10px;height:120px;width:80px;border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;border-top:8px solid transparent}.product-list{padding:40px 20px}.overflow-scroll{overflow-x:auto}div[class*=arrow]{background-color:#fff;padding:5px;border-radius:50%;position:absolute;top:50%;display:flex;align-items:center;justify-content:center;z-index:10000001;cursor:pointer}.left-arrow{left:10px}.right-arrow{right:10px}#productScrollBar{scroll-behavior:smooth}@media screen and (max-width: 475px){.padding-1{padding-left:1rem;padding-right:1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CategoryProductComponent, decorators: [{
             type: Component,
@@ -8630,7 +8649,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         SimpoComponentModule,
                         SanitizeHtmlPipe,
                         SpacingHorizontalDirective
-                    ], template: "<section class=\"total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\n  <section class=\"container-fluid d-block\" [id]=\"data?.id\"\n    [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"getSpacingLayout\">\n    <div *ngFor=\"let item of data?.content?.inputText\">\n      <div [innerHTML]=\"item.value | sanitizeHtml\"\n        [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n      </div>\n    </div>\n    <section class=\"m-auto position-relative w-100\">\n      <section class=\"d-flex\">\n        <ng-container *ngFor=\"let category of categoryList; let idx = index\">\n          <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\"\n            [style.backgroundColor]=\"selectCategoryId === category.categoryId ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\"\n            [style.borderColor]=\"selectCategoryId == category.categoryId ? styles?.background?.accentColor :  ''\"\n            (click)=\"selectCategory(category.categoryId)\">\n            <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\n            <span class=\"trim-text\" style=\"font-size: .8125rem; text-align: center !important;\"\n              [style.color]=\"selectCategoryId === category.categoryId ? (styles?.background?.accentColor) : ''\">{{\n              category.categoryName | titlecase }}</span>\n          </div>\n        </ng-container>\n      </section>\n      <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow\">\n        <mat-icon>keyboard_arrow_left</mat-icon>\n      </div>\n      <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow\">\n        <mat-icon>keyboard_arrow_right</mat-icon>\n      </div>\n      <section class=\"product-list position-relative\" #container *ngIf=\"dataList.length\"\n        [style.backgroundColor]=\"styles?.background?.accentColor\">\n        <section class=\"d-flex overflow-scroll\" id=\"productScrollBar\">\n          <ng-container *ngFor=\"let product of dataList\">\n            <simpo-small-product-listing [product]=\"product\" [data]=\"data\"></simpo-small-product-listing>\n          </ng-container>\n        </section>\n      </section>\n    </section>\n  </section>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n<ng-template #loadingTemplate>\n  <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n        width: '100%',\n        height: '40vh',\n        'border-radius': '10px',\n        'position': 'relative',\n        'right': '5px'\n    }\">\n  </ngx-skeleton-loader>\n</ng-template>\n", styles: [".total-container{height:auto;position:relative}.d-block{display:block!important}.category-tag{padding:15px 10px;height:120px;width:80px;border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;border-top:8px solid transparent}.product-list{padding:40px 20px}.overflow-scroll{overflow-x:auto}div[class*=arrow]{background-color:#fff;padding:5px;border-radius:50%;position:absolute;top:50%;display:flex;align-items:center;justify-content:center;z-index:10000001;cursor:pointer}.left-arrow{left:10px}.right-arrow{right:10px}#productScrollBar{scroll-behavior:smooth}\n"] }]
+                    ], template: "<section class=\"total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n  <section class=\"container-fluid d-block\" [id]=\"data?.id\"\r\n    [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"getSpacingLayout\">\r\n    <div *ngFor=\"let item of data?.content?.inputText\">\r\n      <div [innerHTML]=\"item.value | sanitizeHtml\"\r\n        [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n      </div>\r\n    </div>\r\n    <section class=\"m-auto position-relative w-100\">\r\n      <section class=\"d-flex\">\r\n        <ng-container *ngFor=\"let category of categoryList; let idx = index\">\r\n          <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\"\r\n            [style.backgroundColor]=\"selectCategoryId === category.categoryId ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\"\r\n            [style.borderColor]=\"selectCategoryId == category.categoryId ? styles?.background?.accentColor :  ''\"\r\n            (click)=\"selectCategory(category.categoryId)\">\r\n            <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\r\n            <span class=\"trim-text\" style=\"font-size: .8125rem; text-align: center !important;\"\r\n              [style.color]=\"selectCategoryId === category.categoryId ? (styles?.background?.accentColor) : ''\">{{\r\n              category.categoryName | titlecase }}</span>\r\n          </div>\r\n        </ng-container>\r\n      </section>\r\n      <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow\">\r\n        <mat-icon>keyboard_arrow_left</mat-icon>\r\n      </div>\r\n      <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow\">\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </div>\r\n      <section class=\"product-list position-relative\" #container *ngIf=\"dataList.length\"\r\n        [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n        <section class=\"d-flex overflow-scroll\" id=\"productScrollBar\">\r\n          <ng-container *ngFor=\"let product of dataList\">\r\n            <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\"></simpo-small-product-listing>\r\n          </ng-container>\r\n        </section>\r\n      </section>\r\n    </section>\r\n  </section>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n<ng-template #loadingTemplate>\r\n  <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '100%',\r\n        height: '40vh',\r\n        'border-radius': '10px',\r\n        'position': 'relative',\r\n        'right': '5px'\r\n    }\">\r\n  </ngx-skeleton-loader>\r\n</ng-template>\r\n", styles: [".total-container{height:auto;position:relative}.d-block{display:block!important}.category-tag{padding:15px 10px;height:120px;width:80px;border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;border-top:8px solid transparent}.product-list{padding:40px 20px}.overflow-scroll{overflow-x:auto}div[class*=arrow]{background-color:#fff;padding:5px;border-radius:50%;position:absolute;top:50%;display:flex;align-items:center;justify-content:center;z-index:10000001;cursor:pointer}.left-arrow{left:10px}.right-arrow{right:10px}#productScrollBar{scroll-behavior:smooth}@media screen and (max-width: 475px){.padding-1{padding-left:1rem;padding-right:1rem}}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: CartService }, { type: EventsService }, { type: i2$3.ActivatedRoute }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -8697,7 +8716,7 @@ class FeaturedCollectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedCollectionComponent, deps: [{ token: i2$3.Router }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedCollectionComponent, isStandalone: true, selector: "simpo-featured-collection", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\n    [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\n    <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n      [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\">\n      <div *ngFor=\"let item of content?.inputText\">\n        <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n        </div>\n      </div>\n      <!-- <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\n        class=\"span-img mt-15\"> -->\n      <div class=\"category-parent\"  [ngClass]=\"{'flex-wrap': styles?.direction == 'ROW'}\">\n        <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" (click)=\"redirectToListPage(data)\">\n          <img [style.borderRadius.px]=\"styles?.border?.radius\" [style.height.px]=\"styles?.containerHeight\" [style.width.px]=\"styles?.containerWidth\" loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"category-image\">\n          <div class=\"category-name body-large\" *ngIf=\"content?.display?.showHeading\">{{data.categoryName}}</div>\n        </div>\n      </div>\n    </div>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;width:100%;margin-top:25px;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{height:230px;width:230px;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { 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: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedCollectionComponent, isStandalone: true, selector: "simpo-featured-collection", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n    [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n    <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n      [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <!-- <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\"> -->\r\n      <div class=\"category-parent\"  [ngClass]=\"{'flex-wrap': styles?.direction == 'ROW'}\">\r\n        <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" (click)=\"redirectToListPage(data)\">\r\n          <img [style.borderRadius.px]=\"styles?.border?.radius\" [style.height.px]=\"styles?.containerHeight\" [style.width.px]=\"styles?.containerWidth\" loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"category-image\">\r\n          <div class=\"category-name body-large\" *ngIf=\"content?.display?.showHeading\">{{data.categoryName}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;width:100%;margin-top:25px;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{height:230px;width:230px;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { 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: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
 }
@@ -8720,7 +8739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         TextBackgroundDirectiveDirective,
                         ColorDirective,
                         SanitizeHtmlPipe
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\n    [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\n    <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n      [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\">\n      <div *ngFor=\"let item of content?.inputText\">\n        <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n        </div>\n      </div>\n      <!-- <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\n        class=\"span-img mt-15\"> -->\n      <div class=\"category-parent\"  [ngClass]=\"{'flex-wrap': styles?.direction == 'ROW'}\">\n        <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" (click)=\"redirectToListPage(data)\">\n          <img [style.borderRadius.px]=\"styles?.border?.radius\" [style.height.px]=\"styles?.containerHeight\" [style.width.px]=\"styles?.containerWidth\" loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"category-image\">\n          <div class=\"category-name body-large\" *ngIf=\"content?.display?.showHeading\">{{data.categoryName}}</div>\n        </div>\n      </div>\n    </div>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;width:100%;margin-top:25px;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{height:230px;width:230px;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n    [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n    <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n      [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <!-- <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\"> -->\r\n      <div class=\"category-parent\"  [ngClass]=\"{'flex-wrap': styles?.direction == 'ROW'}\">\r\n        <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" (click)=\"redirectToListPage(data)\">\r\n          <img [style.borderRadius.px]=\"styles?.border?.radius\" [style.height.px]=\"styles?.containerHeight\" [style.width.px]=\"styles?.containerWidth\" loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"category-image\">\r\n          <div class=\"category-name body-large\" *ngIf=\"content?.display?.showHeading\">{{data.categoryName}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;width:100%;margin-top:25px;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{height:230px;width:230px;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
         }], ctorParameters: () => [{ type: i2$3.Router }, { type: RestService }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], responseData: [{