simpo-component-library 2.0.69 → 2.0.91

package/fesm2022/simpo-component-library.mjs

@@ -78,11 +78,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>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.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' ? 'content-side' : 'body-large'\"></div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.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>\r\n" }]
+            args: [{ selector: 'simpo-text-element', standalone: true, imports: [CommonModule], template: "<div [innerHTML]=\"textData\" style=\"text-wrap: balance;\" [ngClass]=\"textLabel === 'Heading' ? 'content-side' : 'body-large'\"></div>\r\n" }]
         }], propDecorators: { textData: [{
                 type: Input
             }], textLabel: [{
@@ -1332,11 +1332,11 @@ class SvgDividerComponent {
         this.svgType = svgData[this.dividerType || DeviderType.TILT];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SvgDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SvgDividerComponent, isStandalone: true, selector: "simpo-svg-divider", inputs: { dividerType: "dividerType", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"custom-shape-divider-bottom\" [style.transform]=\"svgType.rotate ? 'rotate(180deg)' : ''\">\r\n  <svg [attr.fill]=\"color\" [style.transform]=\"svgType.rotateY ? 'rotateY(180deg)' : ''\" data-name=\"Layer 1\"\r\n    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1200 120\" preserveAspectRatio=\"none\">\r\n    <path [attr.d]=\"svgType.svg\" class=\"shape-fill\"></path>\r\n  </svg>\r\n</div>\r\n", styles: [".custom-shape-divider-bottom{position:absolute;bottom:0;left:0;width:100%;overflow:hidden;line-height:0}.custom-shape-divider-bottom svg{position:relative;display:block;width:calc(100% + 1.3px);height:56px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SvgDividerComponent, isStandalone: true, selector: "simpo-svg-divider", inputs: { dividerType: "dividerType", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"custom-shape-divider-bottom\" [style.transform]=\"svgType.rotate ? 'rotate(180deg)' : ''\">\r\n  <svg [attr.fill]=\"color\" [style.transform]=\"svgType.rotateY ? 'rotateY(180deg)' : ''\" data-name=\"Layer 1\"\r\n    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1200 120\" preserveAspectRatio=\"none\">\r\n    <path [attr.d]=\"svgType.svg\" class=\"shape-fill\"></path>\r\n  </svg>\r\n</div>\r\n", styles: [".custom-shape-divider-bottom{position:absolute;bottom:0;left:0;width:100%;overflow:hidden;line-height:0}.custom-shape-divider-bottom svg{position:relative;display:block;width:calc(100% + 1.3px);height:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SvgDividerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-svg-divider', standalone: true, imports: [CommonModule], template: "<div class=\"custom-shape-divider-bottom\" [style.transform]=\"svgType.rotate ? 'rotate(180deg)' : ''\">\r\n  <svg [attr.fill]=\"color\" [style.transform]=\"svgType.rotateY ? 'rotateY(180deg)' : ''\" data-name=\"Layer 1\"\r\n    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1200 120\" preserveAspectRatio=\"none\">\r\n    <path [attr.d]=\"svgType.svg\" class=\"shape-fill\"></path>\r\n  </svg>\r\n</div>\r\n", styles: [".custom-shape-divider-bottom{position:absolute;bottom:0;left:0;width:100%;overflow:hidden;line-height:0}.custom-shape-divider-bottom svg{position:relative;display:block;width:calc(100% + 1.3px);height:56px}\n"] }]
+            args: [{ selector: 'simpo-svg-divider', standalone: true, imports: [CommonModule], template: "<div class=\"custom-shape-divider-bottom\" [style.transform]=\"svgType.rotate ? 'rotate(180deg)' : ''\">\r\n  <svg [attr.fill]=\"color\" [style.transform]=\"svgType.rotateY ? 'rotateY(180deg)' : ''\" data-name=\"Layer 1\"\r\n    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1200 120\" preserveAspectRatio=\"none\">\r\n    <path [attr.d]=\"svgType.svg\" class=\"shape-fill\"></path>\r\n  </svg>\r\n</div>\r\n", styles: [".custom-shape-divider-bottom{position:absolute;bottom:0;left:0;width:100%;overflow:hidden;line-height:0}.custom-shape-divider-bottom svg{position:relative;display:block;width:calc(100% + 1.3px);height:48px}\n"] }]
         }], propDecorators: { dividerType: [{
                 type: Input
             }], color: [{
@@ -2102,7 +2102,7 @@ class TextSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: TextSectionComponent, deps: [{ token: i5.MatDialog }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TextSectionComponent, isStandalone: true, selector: "simpo-text-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"main-section\" [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"body-section\">\r\n        <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n          <div *ngFor=\"let item of content?.inputText\">\r\n            <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element>\r\n          </div>\r\n          <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\"\r\n          [ngClass]=\"[\r\n            styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n            styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n            styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n          ]\">\r\n            <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n              <app-button-element  [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\" [color]=\"styles?.background?.accentColor\" [sectionId]=\"data?.id\"></app-button-element>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n ", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: TextElementComponent, selector: "simpo-text-element", inputs: ["textData", "textLabel"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TextSectionComponent, isStandalone: true, selector: "simpo-text-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"main-section\" [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"body-section\">\r\n        <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n          <div *ngFor=\"let item of content?.inputText\">\r\n            <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element>\r\n          </div>\r\n          <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\"\r\n          [ngClass]=\"[\r\n            styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n            styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n            styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n          ]\">\r\n            <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n              <app-button-element  [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\" [color]=\"styles?.background?.accentColor\" [sectionId]=\"data?.id\"></app-button-element>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n ", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: TextElementComponent, selector: "simpo-text-element", inputs: ["textData", "textLabel"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatDialogModule }, { 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: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
 }
@@ -2132,7 +2132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         OverlayDirective,
                         PositionLayoutDirectiveDirective,
                         TextBackgroundDirectiveDirective
-                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"main-section\" [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"body-section\">\r\n        <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n          <div *ngFor=\"let item of content?.inputText\">\r\n            <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element>\r\n          </div>\r\n          <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\"\r\n          [ngClass]=\"[\r\n            styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n            styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n            styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n          ]\">\r\n            <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n              <app-button-element  [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\" [color]=\"styles?.background?.accentColor\" [sectionId]=\"data?.id\"></app-button-element>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n ", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center}}\n"] }]
+                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"main-section\" [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"body-section\">\r\n        <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n          <div *ngFor=\"let item of content?.inputText\">\r\n            <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element>\r\n          </div>\r\n          <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\"\r\n          [ngClass]=\"[\r\n            styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n            styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n            styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n          ]\">\r\n            <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n              <app-button-element  [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\" [color]=\"styles?.background?.accentColor\" [sectionId]=\"data?.id\"></app-button-element>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n ", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}\n"] }]
         }], ctorParameters: () => [{ type: i5.MatDialog }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -2537,7 +2537,7 @@ class FaqSectionComponent extends BaseSection {
         }
     }
     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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\"\r\n  class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div class=\"col-xxl-8 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n    [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n    <div *ngIf=\"!content?.image?.showImage || screenWidth <= 475\">\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          <div style=\"display: flex;align-items: center;justify-content: space-between;\">\r\n            <p class=\"heading-medium  position-relative\" data-toggle=\"collapse\" [simpoContainerAlignment]=\"stylesLayout\">\r\n              <span style=\"display: block;\">{{itemData.inputText[0].value}}</span>\r\n            </p>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\" [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\">keyboard_arrow_down</mat-icon>\r\n          </div>\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 && screenWidth > 475\" class=\"row g-5\" [id]=\"data?.id\"\r\n      [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15 content-side \"\r\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-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:relative; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: relative; 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\"\r\n          [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".mb-2{margin-bottom:2.5rem!important}.data{gap:1rem;padding-top:.5rem;padding-bottom:.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer;width:100%}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}@media only screen and (max-width: 475px){.row{display:flex;flex-direction:column-reverse}.col-10{width:100%!important}}.float-end{position:absolute;top:0}@media only screen and (min-width: 500px){.heading-medium{font-size:20px}}@media screen and (max-width: 500px){.heading-medium{font-size:16px}.desc{font-size:14px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: HeadingElementComponent, selector: "simpo-heading-element", inputs: ["data"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\"\r\n  class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div class=\"col-xxl-8 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n    [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n    <div *ngIf=\"!content?.image?.showImage || screenWidth <= 475\">\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          <div style=\"display: flex;align-items: center;justify-content: space-between;\">\r\n            <p class=\"heading-medium  position-relative content-side\" data-toggle=\"collapse\" [simpoContainerAlignment]=\"stylesLayout\">\r\n              <span style=\"display: block;\" [innerHTML]=\"itemData.inputText[0].value\"></span>\r\n            </p>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\" [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\">keyboard_arrow_down</mat-icon>\r\n          </div>\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 && screenWidth > 475\" class=\"row g-5\" [id]=\"data?.id\"\r\n      [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15 content-side \"\r\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-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 content-side\" data-toggle=\"collapse\">\r\n            <span [innerHTML]=\"itemData.inputText[0].value\"></span>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\"style=\"position:relative; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: relative; 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\"\r\n          [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".mb-2{margin-bottom:2.5rem!important}.data{gap:1rem;padding-top:.5rem;padding-bottom:.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer;width:100%}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}@media only screen and (max-width: 475px){.row{display:flex;flex-direction:column-reverse}.col-10{width:100%!important}}.float-end{position:absolute;top:0}@media only screen and (min-width: 500px){.heading-medium{font-size:20px}}@media screen and (max-width: 500px){.heading-medium{font-size:16px}.desc{font-size:14px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: HeadingElementComponent, selector: "simpo-heading-element", inputs: ["data"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "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"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }] }); }
 }
@@ -2572,7 +2572,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         SanitizeHtmlPipe,
                         SpacingHorizontalDirective,
                         SvgDividerComponent
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\"\r\n  class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div class=\"col-xxl-8 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n    [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n    <div *ngIf=\"!content?.image?.showImage || screenWidth <= 475\">\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          <div style=\"display: flex;align-items: center;justify-content: space-between;\">\r\n            <p class=\"heading-medium  position-relative\" data-toggle=\"collapse\" [simpoContainerAlignment]=\"stylesLayout\">\r\n              <span style=\"display: block;\">{{itemData.inputText[0].value}}</span>\r\n            </p>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\" [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\">keyboard_arrow_down</mat-icon>\r\n          </div>\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 && screenWidth > 475\" class=\"row g-5\" [id]=\"data?.id\"\r\n      [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15 content-side \"\r\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-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:relative; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: relative; 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\"\r\n          [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".mb-2{margin-bottom:2.5rem!important}.data{gap:1rem;padding-top:.5rem;padding-bottom:.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer;width:100%}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}@media only screen and (max-width: 475px){.row{display:flex;flex-direction:column-reverse}.col-10{width:100%!important}}.float-end{position:absolute;top:0}@media only screen and (min-width: 500px){.heading-medium{font-size:20px}}@media screen and (max-width: 500px){.heading-medium{font-size:16px}.desc{font-size:14px}}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\"\r\n  class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div class=\"col-xxl-8 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n    [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n    <div *ngIf=\"!content?.image?.showImage || screenWidth <= 475\">\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          <div style=\"display: flex;align-items: center;justify-content: space-between;\">\r\n            <p class=\"heading-medium  position-relative content-side\" data-toggle=\"collapse\" [simpoContainerAlignment]=\"stylesLayout\">\r\n              <span style=\"display: block;\" [innerHTML]=\"itemData.inputText[0].value\"></span>\r\n            </p>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\" [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\">keyboard_arrow_down</mat-icon>\r\n          </div>\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 && screenWidth > 475\" class=\"row g-5\" [id]=\"data?.id\"\r\n      [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15 content-side \"\r\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-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 content-side\" data-toggle=\"collapse\">\r\n            <span [innerHTML]=\"itemData.inputText[0].value\"></span>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\"style=\"position:relative; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: relative; 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\"\r\n          [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".mb-2{margin-bottom:2.5rem!important}.data{gap:1rem;padding-top:.5rem;padding-bottom:.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer;width:100%}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}@media only screen and (max-width: 475px){.row{display:flex;flex-direction:column-reverse}.col-10{width:100%!important}}.float-end{position:absolute;top:0}@media only screen and (min-width: 500px){.heading-medium{font-size:20px}}@media screen and (max-width: 500px){.heading-medium{font-size:16px}.desc{font-size:14px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -2706,7 +2706,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", customClass: "customClass", nextComponentColor: "nextComponentColor", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\nclass=\"total-container\" [attr.style]=\"customClass\">\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\" *ngIf=\"data?.content?.inputText?.length\" [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\" *ngIf=\"text.value?.length\"></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 blur\" 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 blur\" 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  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".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}.blur{filter:blur(5px)}@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: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "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", customClass: "customClass", nextComponentColor: "nextComponentColor", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\nclass=\"total-container\" [attr.style]=\"customClass\">\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\" *ngIf=\"data?.content?.inputText?.length\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" >\r\n      <div *ngFor=\"let text of data?.content?.inputText\">\r\n        <div class=\"heading-large content-side\" [ngClass]=\"{'mb-0': text.value === '' && style?.fullWidth}\" [simpoContentTitleSpace]=\"headingSpace\"  [innerHTML]=\"text.value\" *ngIf=\"text.value?.length\"></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 blur\" 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 blur\" 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  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".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}.blur{filter:blur(5px)}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0;margin-bottom:10%}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "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"] }] }); }
 }
@@ -2736,7 +2736,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)\"\r\nclass=\"total-container\" [attr.style]=\"customClass\">\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\" *ngIf=\"data?.content?.inputText?.length\" [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\" *ngIf=\"text.value?.length\"></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 blur\" 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 blur\" 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  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".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}.blur{filter:blur(5px)}@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\" [attr.style]=\"customClass\">\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\" *ngIf=\"data?.content?.inputText?.length\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" >\r\n      <div *ngFor=\"let text of data?.content?.inputText\">\r\n        <div class=\"heading-large content-side\" [ngClass]=\"{'mb-0': text.value === '' && style?.fullWidth}\" [simpoContentTitleSpace]=\"headingSpace\"  [innerHTML]=\"text.value\" *ngIf=\"text.value?.length\"></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 blur\" 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 blur\" 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  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".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}.blur{filter:blur(5px)}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0;margin-bottom:10%}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -2777,7 +2777,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", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\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  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{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: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "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", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\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 content-side\"  [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  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{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: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "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"] }] }); }
 }
@@ -2809,7 +2809,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\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\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  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{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\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\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 content-side\"  [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  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{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: [{
@@ -2873,7 +2873,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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar':canMergeNavbar}\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"main-section\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"img-text-card\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n                <!-- <div *ngFor=\"let text of data?.content?.inputText\">\r\n                    <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n                </div> -->\r\n\r\n                <div class=\"image-section w-100\">\r\n                    <img loading=\"lazy\" [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n                        [src]=\"content?.image?.url\" [ngStyle]=\"{'opacity': (canMergeNavbar ? '0' : getBackgroundOpacity)}\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\r\n                        [id]=\"data?.id\"\r\n                        loading=\"lazy\" />\r\n                            \r\n                </div>\r\n                <div *ngIf=\"style?.showText\" class=\"col-lg-9 d-flex flex-column content-side\" class=\"text-mobile\" style=\"position: absolute;\" [simpoPositionLayoutDirective]=\"style?.positionLayout\" [simpoContentAlignment]=\"style?.contentAlignment\" [id]=\"data?.id\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n                    <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></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\" [sectionId]=\"data?.id\" [buttonId]=\"button.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div> \r\n              \r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isMerged]=\"style?.merge ?? false\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.img-text-card{display:flex;align-items:center;justify-content:center}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.mergeNavbar{margin-top:-175px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.image-section img{object-fit:cover}.text-content-card{justify-content:center;align-items:center}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media only screen and (max-width: 475px){.h-80{height:15rem;border-radius:1rem}.main-section{min-height:auto!important}.text-image{position:absolute;height:14rem}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
+    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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar':canMergeNavbar}\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"main-section\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"img-text-card\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n                <!-- <div *ngFor=\"let text of data?.content?.inputText\">\r\n                    <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n                </div> -->\r\n\r\n                <div class=\"image-section w-100\">\r\n                    <img loading=\"lazy\" [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n                        [src]=\"content?.image?.url\" [ngStyle]=\"{'opacity': (canMergeNavbar ? '0' : getBackgroundOpacity)}\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\r\n                        [id]=\"data?.id\"\r\n                        loading=\"lazy\" />\r\n                            \r\n                </div>\r\n                <div *ngIf=\"style?.showText\" class=\"col-lg-9 d-flex flex-column content-side\" class=\"text-mobile\" style=\"position: absolute;\" [simpoPositionLayoutDirective]=\"style?.positionLayout\" [simpoContentAlignment]=\"style?.contentAlignment\" [id]=\"data?.id\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n                    <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></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\" [sectionId]=\"data?.id\" [buttonId]=\"button.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div> \r\n              \r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isMerged]=\"style?.merge ?? false\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.img-text-card{display:flex;align-items:center;justify-content:center}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.mergeNavbar{margin-top:-175px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.image-section img{object-fit:cover}.text-content-card{justify-content:center;align-items:center}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media only screen and (max-width: 475px){.h-80{height:15rem;border-radius:1rem;margin-bottom:10%}.main-section{min-height:auto!important}.text-image{position:absolute;height:14rem}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
 }
@@ -2903,7 +2903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         PositionLayoutDirectiveDirective,
                         TextBackgroundDirectiveDirective,
                         ObjectPositionDirective
-                    ], template: "<section [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar':canMergeNavbar}\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"main-section\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"img-text-card\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n                <!-- <div *ngFor=\"let text of data?.content?.inputText\">\r\n                    <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n                </div> -->\r\n\r\n                <div class=\"image-section w-100\">\r\n                    <img loading=\"lazy\" [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n                        [src]=\"content?.image?.url\" [ngStyle]=\"{'opacity': (canMergeNavbar ? '0' : getBackgroundOpacity)}\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\r\n                        [id]=\"data?.id\"\r\n                        loading=\"lazy\" />\r\n                            \r\n                </div>\r\n                <div *ngIf=\"style?.showText\" class=\"col-lg-9 d-flex flex-column content-side\" class=\"text-mobile\" style=\"position: absolute;\" [simpoPositionLayoutDirective]=\"style?.positionLayout\" [simpoContentAlignment]=\"style?.contentAlignment\" [id]=\"data?.id\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n                    <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></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\" [sectionId]=\"data?.id\" [buttonId]=\"button.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div> \r\n              \r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isMerged]=\"style?.merge ?? false\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.img-text-card{display:flex;align-items:center;justify-content:center}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.mergeNavbar{margin-top:-175px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.image-section img{object-fit:cover}.text-content-card{justify-content:center;align-items:center}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media only screen and (max-width: 475px){.h-80{height:15rem;border-radius:1rem}.main-section{min-height:auto!important}.text-image{position:absolute;height:14rem}}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar':canMergeNavbar}\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"main-section\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"img-text-card\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n                <!-- <div *ngFor=\"let text of data?.content?.inputText\">\r\n                    <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n                </div> -->\r\n\r\n                <div class=\"image-section w-100\">\r\n                    <img loading=\"lazy\" [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n                        [src]=\"content?.image?.url\" [ngStyle]=\"{'opacity': (canMergeNavbar ? '0' : getBackgroundOpacity)}\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\r\n                        [id]=\"data?.id\"\r\n                        loading=\"lazy\" />\r\n                            \r\n                </div>\r\n                <div *ngIf=\"style?.showText\" class=\"col-lg-9 d-flex flex-column content-side\" class=\"text-mobile\" style=\"position: absolute;\" [simpoPositionLayoutDirective]=\"style?.positionLayout\" [simpoContentAlignment]=\"style?.contentAlignment\" [id]=\"data?.id\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n                    <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></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\" [sectionId]=\"data?.id\" [buttonId]=\"button.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div> \r\n              \r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isMerged]=\"style?.merge ?? false\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.img-text-card{display:flex;align-items:center;justify-content:center}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.mergeNavbar{margin-top:-175px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.image-section img{object-fit:cover}.text-content-card{justify-content:center;align-items:center}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media only screen and (max-width: 475px){.h-80{height:15rem;border-radius:1rem;margin-bottom:10%}.main-section{min-height:auto!important}.text-image{position:absolute;height:14rem}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -2946,7 +2946,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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\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  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{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: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
+    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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\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 content-side\" [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  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{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: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //directive
                 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" }] }); }
 }
@@ -2976,7 +2976,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\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\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  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{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\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\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 content-side\" [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  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{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: [{
@@ -3018,7 +3018,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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\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  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{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: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
+    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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\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 content-side\" [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  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{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: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: 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" }] }); }
 }
@@ -3048,7 +3048,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)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\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  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{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\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\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 content-side\" [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  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{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: [{
@@ -3255,7 +3255,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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, 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\" [attr.style]=\"customClass\">\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  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".total-container{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: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
+    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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, 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\" [attr.style]=\"customClass\">\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 content-side\" [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  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".total-container{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: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //directive
                 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"] }] }); }
 }
@@ -3285,7 +3285,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)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\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  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".total-container{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\" [attr.style]=\"customClass\">\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 content-side\" [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  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".total-container{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: [{
@@ -5915,7 +5915,7 @@ class PricingSectionComponent extends BaseSection {
         console.log('function called');
     }
     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", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\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\" (click)=\"redirectTo()\">{{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  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".hover_effect{position: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%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "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" }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }] }); }
+    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", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\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 content-side\" [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 content-side\" [innerHTML]=\"options.inputText[0].value | sanitizeHtml \"></div>\r\n            <div class=\"heading-large price content-side\" [innerHTML]=\"options.inputText[2].value | sanitizeHtml \"></div>\r\n            <div class=\"body-desc content-side\" [innerHTML]=\"options.inputText[3].value | sanitizeHtml \"></div>\r\n\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\" (click)=\"redirectTo()\">{{options?.button?.label}}</button>\r\n            </div>\r\n            <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\" [innerHtml] = \"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  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".hover_effect{position: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%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "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" }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PricingSectionComponent, decorators: [{
             type: Component,
@@ -5937,7 +5937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         MatIcon, ColorDirective,
                         ContentTitleDirective,
                         SanitizeHtmlPipe, SvgDividerComponent
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\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\" (click)=\"redirectTo()\">{{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  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".hover_effect{position: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%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;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\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\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 content-side\" [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 content-side\" [innerHTML]=\"options.inputText[0].value | sanitizeHtml \"></div>\r\n            <div class=\"heading-large price content-side\" [innerHTML]=\"options.inputText[2].value | sanitizeHtml \"></div>\r\n            <div class=\"body-desc content-side\" [innerHTML]=\"options.inputText[3].value | sanitizeHtml \"></div>\r\n\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\" (click)=\"redirectTo()\">{{options?.button?.label}}</button>\r\n            </div>\r\n            <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\" [innerHtml] = \"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  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".hover_effect{position: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%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;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: [{
@@ -6073,7 +6073,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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [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 content-side\">\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  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</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: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [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 content-side\">\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 content-side\" [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  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</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: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "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" }] }); }
 }
@@ -6094,7 +6094,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\" [attr.style]=\"customClass\">\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 content-side\">\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  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</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"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [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 content-side\">\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 content-side\" [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  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</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: [{
@@ -6204,7 +6204,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", customClass: "customClass", nextComponentColor: "nextComponentColor", responseData: "responseData" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\"  [attr.style]=\"customClass\">\r\n  <div [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.newPostTitle)\" [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\" *ngIf=\"this.data?.action && this.data?.action?.display\">\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  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem;display:block!important}.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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.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.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" }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }] }); }
+    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", customClass: "customClass", nextComponentColor: "nextComponentColor", responseData: "responseData" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\"  [attr.style]=\"customClass\">\r\n  <div [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 content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n        </div>\r\n        <div class=\"row\">\r\n          <div (click)=\"getBlogById(content.newPostTitle)\" [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\" *ngIf=\"this.data?.action && this.data?.action?.display\">\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  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem;display:block!important}.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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.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.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" }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RecentBlogPostSectionComponent, decorators: [{
             type: Component,
@@ -6228,7 +6228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         NgxSkeletonLoaderModule,
                         MatIcon,
                         SanitizeHtmlPipe, SvgDividerComponent
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\"  [attr.style]=\"customClass\">\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.newPostTitle)\" [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\" *ngIf=\"this.data?.action && this.data?.action?.display\">\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  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem;display:block!important}.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\"  [attr.style]=\"customClass\">\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 content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n        </div>\r\n        <div class=\"row\">\r\n          <div (click)=\"getBlogById(content.newPostTitle)\" [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\" *ngIf=\"this.data?.action && this.data?.action?.display\">\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  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem;display:block!important}.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: [{
@@ -6435,7 +6435,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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div class=\"col-xxl-8 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  \r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;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: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div class=\"col-xxl-8 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 content-side\" [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 content-side\" [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 content-side\">\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 content-side\" [innerHTML]=\" item.inputText[0].value | sanitizeHtml\">\r\n                </div>\r\n                <div class=\"contentDescription content-side\" [innerHTML]=\" item.inputText[1].value | sanitizeHtml\">\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  \r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;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: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "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,
@@ -6467,7 +6467,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)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\">\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  \r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;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\" [attr.style]=\"customClass\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n      <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n        <div class=\"container-fluid d-flex flex-column content-side\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n          <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n            <div *ngFor=\"let text of data?.content?.inputText\">\r\n              <div class=\"heading-large lh-2 mb-3 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n            </div>\r\n          </div>\r\n          <!-- starting -->\r\n          <div *ngFor=\"let item of content?.listItem?.data ;let i = index\" class=\"single_card content-side\">\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 content-side\" [innerHTML]=\" item.inputText[0].value | sanitizeHtml\">\r\n                </div>\r\n                <div class=\"contentDescription content-side\" [innerHTML]=\" item.inputText[1].value | sanitizeHtml\">\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  \r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;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: [{
@@ -6515,7 +6515,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", customClass: "customClass", delete: "delete", index: "index", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [simpoBorder]=\"styles?.border\"  [attr.style]=\"customClass\">\r\n  <div  #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\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 justify-center d-flex g-25 mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\r\n              {{ tab.inputText[0].value }}\r\n            </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 g-25 mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\r\n              {{ tab.inputText[0].value }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"content d-flex g-15 mt-5\" *ngIf=\"currentData?.image?.url\">\r\n        <div class=\"image\">\r\n          <img loading=\"lazy\"  [src]=\"currentData?.image?.url\" alt=\"\" [id]=\"data?.id\"\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\">\r\n          <div class=\"heading-large\" [innerHtml]=\"currentData?.inputText?.[1]?.value\" [id]=\"data?.id\">\r\n          </div>\r\n          <div class=\"content-description body-large mt-1\" [innerHtml]=\"currentData?.inputText?.[2]?.value\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"content justify-center d-flex g-15 mt-5\" *ngIf=\"!currentData?.image?.url\">\r\n        <div class=\"content-heading text-center\">\r\n          <div class=\"heading-large\" [innerHtml]=\"currentData?.inputText?.[1]?.value\" [id]=\"data?.id\">\r\n          </div>\r\n          <div class=\"content-description body-large mt-1 text-center\" [innerHtml]=\"currentData?.inputText?.[2]?.value\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".hover_effect{position: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;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%}}@media screen and (max-width: 475px){.content{padding:0}}.g-25{gap:55px}.mt-1{margin-top:1rem}.justify-center{justify-content:center}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }] }); }
+    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", customClass: "customClass", delete: "delete", index: "index", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [simpoBorder]=\"styles?.border\"  [attr.style]=\"customClass\">\r\n  <div  #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n    <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"row\" *ngIf=\"screenWidth > 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n        </div>\r\n        <div class=\" box justify-center d-flex g-25 mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\r\n              {{ tab.inputText[0].value }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"row-container\" *ngIf=\"screenWidth <= 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n        </div>\r\n        <div class=\" box d-flex g-25 mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\r\n              {{ tab.inputText[0].value }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"content d-flex g-15 mt-5\" *ngIf=\"currentData?.image?.url\">\r\n        <div class=\"image\">\r\n          <img loading=\"lazy\"  [src]=\"currentData?.image?.url\" alt=\"\" [id]=\"data?.id\"\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\">\r\n          <div class=\"heading-large content-side\" [innerHtml]=\"currentData?.inputText?.[1]?.value\" [id]=\"data?.id\">\r\n          </div>\r\n          <div class=\"content-description body-large mt-1 content-side\" [innerHtml]=\"currentData?.inputText?.[2]?.value\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"content justify-center d-flex g-15 mt-5\" *ngIf=\"!currentData?.image?.url\">\r\n        <div class=\"content-heading text-center\">\r\n          <div class=\"heading-large content-side\" [innerHtml]=\"currentData?.inputText?.[1]?.value\" [id]=\"data?.id\">\r\n          </div>\r\n          <div class=\"content-description body-large mt-1 text-center\" [innerHtml]=\"currentData?.inputText?.[2]?.value\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem;margin-bottom:4%}.image{width:40%;flex:1}.image img{width:100%}.content-heading{width:60%;text-align:start}.content-description{width:100%;text-align:start}.active{font-weight:700;letter-spacing:.8px;border-bottom:2px solid;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%}}@media screen and (max-width: 475px){.content{padding:0;margin-bottom:30px}}.g-25{gap:55px}.mt-1{margin-top:1rem}.justify-center{justify-content:center}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturesSectionComponent, decorators: [{
             type: Component,
@@ -6534,7 +6534,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         ObjectPositionDirective,
                         CornerDirective,
                         SanitizeHtmlPipe, SvgDividerComponent
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [simpoBorder]=\"styles?.border\"  [attr.style]=\"customClass\">\r\n  <div  #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\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 justify-center d-flex g-25 mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\r\n              {{ tab.inputText[0].value }}\r\n            </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 g-25 mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\r\n              {{ tab.inputText[0].value }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"content d-flex g-15 mt-5\" *ngIf=\"currentData?.image?.url\">\r\n        <div class=\"image\">\r\n          <img loading=\"lazy\"  [src]=\"currentData?.image?.url\" alt=\"\" [id]=\"data?.id\"\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\">\r\n          <div class=\"heading-large\" [innerHtml]=\"currentData?.inputText?.[1]?.value\" [id]=\"data?.id\">\r\n          </div>\r\n          <div class=\"content-description body-large mt-1\" [innerHtml]=\"currentData?.inputText?.[2]?.value\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"content justify-center d-flex g-15 mt-5\" *ngIf=\"!currentData?.image?.url\">\r\n        <div class=\"content-heading text-center\">\r\n          <div class=\"heading-large\" [innerHtml]=\"currentData?.inputText?.[1]?.value\" [id]=\"data?.id\">\r\n          </div>\r\n          <div class=\"content-description body-large mt-1 text-center\" [innerHtml]=\"currentData?.inputText?.[2]?.value\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".hover_effect{position: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;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%}}@media screen and (max-width: 475px){.content{padding:0}}.g-25{gap:55px}.mt-1{margin-top:1rem}.justify-center{justify-content:center}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [simpoBorder]=\"styles?.border\"  [attr.style]=\"customClass\">\r\n  <div  #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n    <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"row\" *ngIf=\"screenWidth > 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n        </div>\r\n        <div class=\" box justify-center d-flex g-25 mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\r\n              {{ tab.inputText[0].value }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"row-container\" *ngIf=\"screenWidth <= 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n        </div>\r\n        <div class=\" box d-flex g-25 mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\r\n              {{ tab.inputText[0].value }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"content d-flex g-15 mt-5\" *ngIf=\"currentData?.image?.url\">\r\n        <div class=\"image\">\r\n          <img loading=\"lazy\"  [src]=\"currentData?.image?.url\" alt=\"\" [id]=\"data?.id\"\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\">\r\n          <div class=\"heading-large content-side\" [innerHtml]=\"currentData?.inputText?.[1]?.value\" [id]=\"data?.id\">\r\n          </div>\r\n          <div class=\"content-description body-large mt-1 content-side\" [innerHtml]=\"currentData?.inputText?.[2]?.value\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"content justify-center d-flex g-15 mt-5\" *ngIf=\"!currentData?.image?.url\">\r\n        <div class=\"content-heading text-center\">\r\n          <div class=\"heading-large content-side\" [innerHtml]=\"currentData?.inputText?.[1]?.value\" [id]=\"data?.id\">\r\n          </div>\r\n          <div class=\"content-description body-large mt-1 text-center\" [innerHtml]=\"currentData?.inputText?.[2]?.value\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem;margin-bottom:4%}.image{width:40%;flex:1}.image img{width:100%}.content-heading{width:60%;text-align:start}.content-description{width:100%;text-align:start}.active{font-weight:700;letter-spacing:.8px;border-bottom:2px solid;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%}}@media screen and (max-width: 475px){.content{padding:0;margin-bottom:30px}}.g-25{gap:55px}.mt-1{margin-top:1rem}.justify-center{justify-content:center}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], edit: [{
@@ -6572,7 +6572,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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\" data-bs-interval=\"10000\">\r\n                    <ol class=\"carousel-indicators\">\r\n                        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n                            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n                    </ol>\r\n                    <div class=\"carousel-inner\">\r\n                        <div class=\"single_card carousel-item\"\r\n                            *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n                            <!-- this is testimonial cards start-->\r\n\r\n                            <div class=\"main-section row\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"style?.positionLayout\">\r\n                                <div class=\"left\">\r\n                                    <div class=\"heading content-side\">\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                                    <div class=\"testimonial-img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\">\r\n                                      <img loading=\"lazy\"  [src]=\"item.image.url\" [alt]=\"item.image.altText\" class=\"person-img\"\r\n                                        [id]=\"data?.id\"\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                        </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  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>\r\n", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.left{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.right{width:100%;display:flex;flex-direction:column}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\" data-bs-interval=\"10000\">\r\n                    <ol class=\"carousel-indicators\">\r\n                        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n                            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n                    </ol>\r\n                    <div class=\"carousel-inner content-side\">\r\n                        <div class=\"single_card carousel-item\"\r\n                            *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n                            <!-- this is testimonial cards start-->\r\n\r\n                            <div class=\"main-section row\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"style?.positionLayout\">\r\n                                <div class=\"left\">\r\n                                    <div class=\"heading\">\r\n                                        <div class=\"text-element\"\r\n                                            [ngClass]=\"item.inputText[0].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [innerHtml]=\"item.inputText[0].value | sanitizeHtml\">\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"subtext\">\r\n                                        <div class=\"text-element content-side\" [innerHtml]=\"item.inputText[1].value | sanitizeHtml\"\r\n                                            [ngClass]=\"item.inputText[1].label === 'Subtext' ? 'body-large' : 'heading-large lh-2 mb-3'\">\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"right\">\r\n                                    <div class=\"testimonial-img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\">\r\n                                      <img loading=\"lazy\"  [src]=\"item.image.url\" [alt]=\"item.image.altText\" class=\"person-img\"\r\n                                        [id]=\"data?.id\"\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 '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n                                        \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                                                  [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n                                                \r\n                                              </div>\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  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>\r\n", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.left{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.right{width:100%;display:flex;flex-direction:column}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
 }
@@ -6602,7 +6602,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)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\" data-bs-interval=\"10000\">\r\n                    <ol class=\"carousel-indicators\">\r\n                        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n                            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n                    </ol>\r\n                    <div class=\"carousel-inner\">\r\n                        <div class=\"single_card carousel-item\"\r\n                            *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n                            <!-- this is testimonial cards start-->\r\n\r\n                            <div class=\"main-section row\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"style?.positionLayout\">\r\n                                <div class=\"left\">\r\n                                    <div class=\"heading content-side\">\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                                    <div class=\"testimonial-img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\">\r\n                                      <img loading=\"lazy\"  [src]=\"item.image.url\" [alt]=\"item.image.altText\" class=\"person-img\"\r\n                                        [id]=\"data?.id\"\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                        </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  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>\r\n", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.left{width:100%;display:flex;flex-direction:column}}@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\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\" data-bs-interval=\"10000\">\r\n                    <ol class=\"carousel-indicators\">\r\n                        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n                            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n                    </ol>\r\n                    <div class=\"carousel-inner content-side\">\r\n                        <div class=\"single_card carousel-item\"\r\n                            *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n                            <!-- this is testimonial cards start-->\r\n\r\n                            <div class=\"main-section row\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"style?.positionLayout\">\r\n                                <div class=\"left\">\r\n                                    <div class=\"heading\">\r\n                                        <div class=\"text-element\"\r\n                                            [ngClass]=\"item.inputText[0].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [innerHtml]=\"item.inputText[0].value | sanitizeHtml\">\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"subtext\">\r\n                                        <div class=\"text-element content-side\" [innerHtml]=\"item.inputText[1].value | sanitizeHtml\"\r\n                                            [ngClass]=\"item.inputText[1].label === 'Subtext' ? 'body-large' : 'heading-large lh-2 mb-3'\">\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"right\">\r\n                                    <div class=\"testimonial-img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\">\r\n                                      <img loading=\"lazy\"  [src]=\"item.image.url\" [alt]=\"item.image.altText\" class=\"person-img\"\r\n                                        [id]=\"data?.id\"\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 '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n                                        \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                                                  [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n                                                \r\n                                              </div>\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  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>\r\n", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.left{width:100%;display:flex;flex-direction:column}}@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: [{
@@ -6671,11 +6671,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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\r\n    <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n        class=\"total-container\" [attr.style]=\"customClass\">\r\n        <div class=\"col-xxl-8 px-4 py-5 w-100 \" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" #mainContainer\r\n            [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n            <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n                [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n                *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n                [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n              <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\" [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 mt-20\">\r\n                      <div *ngFor=\"let button of data?.action?.buttons\">\r\n                          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                              [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\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\"\r\n              [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n              <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n                  [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n\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=\"button-display mt-20\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n                    <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n                    <div class=\"slider flex overflow-hidden w-full\">\r\n                        <div class=\"slider-track w-full\"\r\n                            [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'\">\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 content-side\" [id]=\"data?.id\"\r\n                  [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n\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=\"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        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{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-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}\n"], dependencies: [{ kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { 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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }] }); }
+    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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\r\n    <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n        class=\"total-container\" [attr.style]=\"customClass\">\r\n        <div class=\"col-xxl-8 px-4 py-5 w-100 \" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" #mainContainer\r\n            [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n            <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n                [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n                *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n                [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n              <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\" [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 mt-20\">\r\n                      <div *ngFor=\"let button of data?.action?.buttons\">\r\n                          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                              [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\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\"\r\n              [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n              <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n                  [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n\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=\"button-display mt-20\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n                    <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n                    <div class=\"slider flex overflow-hidden w-full\">\r\n                        <div class=\"slider-track w-full\"\r\n                            [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        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n    <div [id]=\"data?.id\" [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 content-side\" [id]=\"data?.id\"\r\n                  [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n\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=\"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        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{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-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}\n"], dependencies: [{ kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { 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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }] }); }
 }
 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'\">\r\n    <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n        class=\"total-container\" [attr.style]=\"customClass\">\r\n        <div class=\"col-xxl-8 px-4 py-5 w-100 \" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" #mainContainer\r\n            [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n            <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n                [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n                *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n                [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n              <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\" [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 mt-20\">\r\n                      <div *ngFor=\"let button of data?.action?.buttons\">\r\n                          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                              [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\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\"\r\n              [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n              <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n                  [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n\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=\"button-display mt-20\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n                    <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n                    <div class=\"slider flex overflow-hidden w-full\">\r\n                        <div class=\"slider-track w-full\"\r\n                            [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'\">\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 content-side\" [id]=\"data?.id\"\r\n                  [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n\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=\"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        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{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-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}\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'\">\r\n    <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n        class=\"total-container\" [attr.style]=\"customClass\">\r\n        <div class=\"col-xxl-8 px-4 py-5 w-100 \" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" #mainContainer\r\n            [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n            <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n                [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n                *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n                [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n              <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\" [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 mt-20\">\r\n                      <div *ngFor=\"let button of data?.action?.buttons\">\r\n                          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                              [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\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\"\r\n              [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n              <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n                  [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n\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=\"button-display mt-20\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n                    <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n                    <div class=\"slider flex overflow-hidden w-full\">\r\n                        <div class=\"slider-track w-full\"\r\n                            [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        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n    <div [id]=\"data?.id\" [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 content-side\" [id]=\"data?.id\"\r\n                  [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n\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=\"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        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{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-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -7648,7 +7648,7 @@ class TestimonialVideoComponent extends BaseSection {
         this._eventService.buttonRedirection.emit({ data: content.button });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: TestimonialVideoComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TestimonialVideoComponent, isStandalone: true, selector: "simpo-testimonial-video", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [simpoBackground]=\"style?.background\" [id]=\"data?.id\" class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\">\r\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\" >\r\n    <div [simpoContentTitleSpace]=\"headingSpace\" [id]=\"data?.id\" class=\"container-fluid\" [simpoLayout]=\"style?.layout\">\r\n      <div *ngFor=\"let text of content?.inputText\">\r\n        <p [innerHtml]=\"text.value | sanitizeHtml\"\r\n          [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></p>\r\n      </div>\r\n    </div>\r\n\r\n    <div id=\"carouselExampleCaptions\" class=\"carousel slide\">\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 activeCarousel\">\r\n              <div class=\"d-flex align-center h-60 left-video\">\r\n                <video loading=\"lazy\" muted playsinline [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n                  <source [src]=\"getPrevImage(i)?.url\" type=\"video/mp4\">\r\n                  <source [src]=\"getPrevImage(i)?.url\" type=\"video/ogg\">\r\n                </video>\r\n              </div>\r\n              <div class=\"middle-video\">\r\n                <div class=\"position-relative\">\r\n                  <video  autoplay muted playsinline [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" class=\"h-60\" loop (timeupdate)=\"onVideoEnd(videoPlayer)\" #videoPlayer>\r\n                    <source [src]=\"img.videoLink.url\" type=\"video/mp4\">\r\n                    <source [src]=\"img.videoLink.url\" type=\"video/ogg\">\r\n                  </video>\r\n                  <button [style.background]=\"style?.background?.accentColor\" [simpoColor]=\"style?.background?.accentColor\" [id]=\"data?.id\" (click)=\"redirectTo(img)\"  class=\"button\"><mat-icon> call_made</mat-icon></button>\r\n                </div>\r\n                <div class=\"quote\">\r\n                  <p class=\"heading-medium\">{{ img.inputText[0].value }}</p>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex align-center h-60 right-video\">\r\n                <video  muted playsinline [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n                  <source [src]=\"getNextImage(i)?.url\" type=\"video/mp4\">\r\n                  <source [src]=\"getNextImage(i)?.url\" type=\"video/ogg\">\r\n                </video>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- <div *ngFor=\"let quote of img?.inputText\">\r\n              <p [innerHtml]=\"quote.value | sanitizeHtml\" class=\"heading-medium\"></p>\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\" id=\"nextBtn\" 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  </div>\r\n  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      [isMerged]=\"false\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".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%}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.blur{filter:blur(5px)}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}.activeCarousel{gap:15px}.align-center{align-items:center}.left-video video{width:153%;height:90%;object-fit:cover;transform:translate(-35%);opacity:.5}.right-video video{width:135%;height:90%;object-fit:cover;opacity:.5}.middle-video{width:80%}.middle-video video{height:60vh}.container-fluid{display:block!important}.total-container{position:relative;height:auto}.h-60{height:60vh}.quote{margin-top:45px;text-align:center;display:flex;justify-content:center}.quote p{width:80%;font-size:18px;line-height:normal}.button{position:absolute;right:5%;bottom:10%;display:flex;align-items:center;height:60px;width:60px!important;justify-content:center;border-radius:100%;border:none}.position-relative{position:relative}@media screen and (max-width : 924px){.middle-video{width:100%}}@media screen and (max-width : 764px){.middle-video video{height:auto;width:98vw}.middle-video div{display:flex;justify-content:center}.activeCarousel{gap:0px}.left-video,.right-video{display:none!important}.quote p{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TestimonialVideoComponent, isStandalone: true, selector: "simpo-testimonial-video", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [simpoBackground]=\"style?.background\" [id]=\"data?.id\" class=\"total-container\"  simpoHover\r\n  (hovering)=\"showEditTabs($event)\">\r\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\" >\r\n    <div class = \"content-side\" [simpoContentTitleSpace]=\"headingSpace\" [id]=\"data?.id\" class=\"container-fluid\" [simpoLayout]=\"style?.layout\">\r\n      <div *ngFor=\"let text of content?.inputText\">\r\n        <p class = \"content-side\"[innerHtml]=\"text.value | sanitizeHtml\"\r\n          [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></p>\r\n      </div>\r\n    </div>\r\n\r\n    <div id=\"carouselExampleCaptions\" class=\"carousel slide\">\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 activeCarousel\">\r\n              <div class=\"d-flex align-center h-60 left-video\">\r\n                <video loading=\"lazy\" muted playsinline [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n                  <source [src]=\"getPrevImage(i)?.url\" type=\"video/mp4\">\r\n                  <source [src]=\"getPrevImage(i)?.url\" type=\"video/ogg\">\r\n                </video>\r\n              </div>\r\n              <div class=\"middle-video\">\r\n                <div class=\"position-relative\">\r\n                  <video  autoplay muted playsinline [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" class=\"h-60\" loop (timeupdate)=\"onVideoEnd(videoPlayer)\" #videoPlayer>\r\n                    <source [src]=\"img.videoLink.url\" type=\"video/mp4\">\r\n                    <source [src]=\"img.videoLink.url\" type=\"video/ogg\">\r\n                  </video>\r\n                  <button [style.background]=\"style?.background?.accentColor\" [simpoColor]=\"style?.background?.accentColor\" [id]=\"data?.id\" (click)=\"redirectTo(img)\"  class=\"button\"><mat-icon> call_made</mat-icon></button>\r\n                </div>\r\n                <div class=\"quote content-side\">\r\n                  <p class=\"heading-medium\"[innerHtml]=\"img.inputText[0].value | sanitizeHtml\"></p>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex align-center h-60 right-video\">\r\n                <video  muted playsinline [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n                  <source [src]=\"getNextImage(i)?.url\" type=\"video/mp4\">\r\n                  <source [src]=\"getNextImage(i)?.url\" type=\"video/ogg\">\r\n                </video>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- <div *ngFor=\"let quote of img?.inputText\">\r\n              <p [innerHtml]=\"quote.value | sanitizeHtml\" class=\"heading-medium\"></p>\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\" id=\"nextBtn\" 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  </div>\r\n  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      [isMerged]=\"false\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".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%}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.blur{filter:blur(5px)}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}.activeCarousel{gap:15px}.align-center{align-items:center}.left-video video{width:153%;height:90%;object-fit:cover;transform:translate(-35%);opacity:.5}.right-video video{width:135%;height:90%;object-fit:cover;opacity:.5}.middle-video{width:80%;margin-bottom:5%}.middle-video video{height:60vh}.container-fluid{display:block!important}.total-container{position:relative;height:auto}.h-60{height:60vh}.quote{margin-top:45px;text-align:center;display:flex;justify-content:center}.quote p{width:80%;font-size:18px;line-height:normal}.button{position:absolute;right:5%;bottom:10%;display:flex;align-items:center;height:60px;width:60px!important;justify-content:center;border-radius:100%;border:none}.position-relative{position:relative}@media screen and (max-width : 475px){.middle-video{margin-bottom:9%}}@media screen and (max-width : 924px){.middle-video{width:100%}}@media screen and (max-width : 764px){.middle-video video{height:auto;width:98vw}.middle-video div{display:flex;justify-content:center}.activeCarousel{gap:0px}.left-video,.right-video{display:none!important}.quote p{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "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: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
 }
@@ -7672,7 +7672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         SanitizeHtmlPipe,
                         MatIcon,
                         ColorDirective
-                    ], template: "<section [simpoBackground]=\"style?.background\" [id]=\"data?.id\" class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\">\r\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\" >\r\n    <div [simpoContentTitleSpace]=\"headingSpace\" [id]=\"data?.id\" class=\"container-fluid\" [simpoLayout]=\"style?.layout\">\r\n      <div *ngFor=\"let text of content?.inputText\">\r\n        <p [innerHtml]=\"text.value | sanitizeHtml\"\r\n          [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></p>\r\n      </div>\r\n    </div>\r\n\r\n    <div id=\"carouselExampleCaptions\" class=\"carousel slide\">\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 activeCarousel\">\r\n              <div class=\"d-flex align-center h-60 left-video\">\r\n                <video loading=\"lazy\" muted playsinline [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n                  <source [src]=\"getPrevImage(i)?.url\" type=\"video/mp4\">\r\n                  <source [src]=\"getPrevImage(i)?.url\" type=\"video/ogg\">\r\n                </video>\r\n              </div>\r\n              <div class=\"middle-video\">\r\n                <div class=\"position-relative\">\r\n                  <video  autoplay muted playsinline [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" class=\"h-60\" loop (timeupdate)=\"onVideoEnd(videoPlayer)\" #videoPlayer>\r\n                    <source [src]=\"img.videoLink.url\" type=\"video/mp4\">\r\n                    <source [src]=\"img.videoLink.url\" type=\"video/ogg\">\r\n                  </video>\r\n                  <button [style.background]=\"style?.background?.accentColor\" [simpoColor]=\"style?.background?.accentColor\" [id]=\"data?.id\" (click)=\"redirectTo(img)\"  class=\"button\"><mat-icon> call_made</mat-icon></button>\r\n                </div>\r\n                <div class=\"quote\">\r\n                  <p class=\"heading-medium\">{{ img.inputText[0].value }}</p>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex align-center h-60 right-video\">\r\n                <video  muted playsinline [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n                  <source [src]=\"getNextImage(i)?.url\" type=\"video/mp4\">\r\n                  <source [src]=\"getNextImage(i)?.url\" type=\"video/ogg\">\r\n                </video>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- <div *ngFor=\"let quote of img?.inputText\">\r\n              <p [innerHtml]=\"quote.value | sanitizeHtml\" class=\"heading-medium\"></p>\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\" id=\"nextBtn\" 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  </div>\r\n  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      [isMerged]=\"false\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".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%}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.blur{filter:blur(5px)}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}.activeCarousel{gap:15px}.align-center{align-items:center}.left-video video{width:153%;height:90%;object-fit:cover;transform:translate(-35%);opacity:.5}.right-video video{width:135%;height:90%;object-fit:cover;opacity:.5}.middle-video{width:80%}.middle-video video{height:60vh}.container-fluid{display:block!important}.total-container{position:relative;height:auto}.h-60{height:60vh}.quote{margin-top:45px;text-align:center;display:flex;justify-content:center}.quote p{width:80%;font-size:18px;line-height:normal}.button{position:absolute;right:5%;bottom:10%;display:flex;align-items:center;height:60px;width:60px!important;justify-content:center;border-radius:100%;border:none}.position-relative{position:relative}@media screen and (max-width : 924px){.middle-video{width:100%}}@media screen and (max-width : 764px){.middle-video video{height:auto;width:98vw}.middle-video div{display:flex;justify-content:center}.activeCarousel{gap:0px}.left-video,.right-video{display:none!important}.quote p{width:95%}}\n"] }]
+                    ], template: "<section [simpoBackground]=\"style?.background\" [id]=\"data?.id\" class=\"total-container\"  simpoHover\r\n  (hovering)=\"showEditTabs($event)\">\r\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\" >\r\n    <div class = \"content-side\" [simpoContentTitleSpace]=\"headingSpace\" [id]=\"data?.id\" class=\"container-fluid\" [simpoLayout]=\"style?.layout\">\r\n      <div *ngFor=\"let text of content?.inputText\">\r\n        <p class = \"content-side\"[innerHtml]=\"text.value | sanitizeHtml\"\r\n          [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></p>\r\n      </div>\r\n    </div>\r\n\r\n    <div id=\"carouselExampleCaptions\" class=\"carousel slide\">\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 activeCarousel\">\r\n              <div class=\"d-flex align-center h-60 left-video\">\r\n                <video loading=\"lazy\" muted playsinline [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n                  <source [src]=\"getPrevImage(i)?.url\" type=\"video/mp4\">\r\n                  <source [src]=\"getPrevImage(i)?.url\" type=\"video/ogg\">\r\n                </video>\r\n              </div>\r\n              <div class=\"middle-video\">\r\n                <div class=\"position-relative\">\r\n                  <video  autoplay muted playsinline [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" class=\"h-60\" loop (timeupdate)=\"onVideoEnd(videoPlayer)\" #videoPlayer>\r\n                    <source [src]=\"img.videoLink.url\" type=\"video/mp4\">\r\n                    <source [src]=\"img.videoLink.url\" type=\"video/ogg\">\r\n                  </video>\r\n                  <button [style.background]=\"style?.background?.accentColor\" [simpoColor]=\"style?.background?.accentColor\" [id]=\"data?.id\" (click)=\"redirectTo(img)\"  class=\"button\"><mat-icon> call_made</mat-icon></button>\r\n                </div>\r\n                <div class=\"quote content-side\">\r\n                  <p class=\"heading-medium\"[innerHtml]=\"img.inputText[0].value | sanitizeHtml\"></p>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex align-center h-60 right-video\">\r\n                <video  muted playsinline [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n                  <source [src]=\"getNextImage(i)?.url\" type=\"video/mp4\">\r\n                  <source [src]=\"getNextImage(i)?.url\" type=\"video/ogg\">\r\n                </video>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- <div *ngFor=\"let quote of img?.inputText\">\r\n              <p [innerHtml]=\"quote.value | sanitizeHtml\" class=\"heading-medium\"></p>\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\" id=\"nextBtn\" 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  </div>\r\n  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      [isMerged]=\"false\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".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%}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.blur{filter:blur(5px)}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}.activeCarousel{gap:15px}.align-center{align-items:center}.left-video video{width:153%;height:90%;object-fit:cover;transform:translate(-35%);opacity:.5}.right-video video{width:135%;height:90%;object-fit:cover;opacity:.5}.middle-video{width:80%;margin-bottom:5%}.middle-video video{height:60vh}.container-fluid{display:block!important}.total-container{position:relative;height:auto}.h-60{height:60vh}.quote{margin-top:45px;text-align:center;display:flex;justify-content:center}.quote p{width:80%;font-size:18px;line-height:normal}.button{position:absolute;right:5%;bottom:10%;display:flex;align-items:center;height:60px;width:60px!important;justify-content:center;border-radius:100%;border:none}.position-relative{position:relative}@media screen and (max-width : 475px){.middle-video{margin-bottom:9%}}@media screen and (max-width : 924px){.middle-video{width:100%}}@media screen and (max-width : 764px){.middle-video video{height:auto;width:98vw}.middle-video div{display:flex;justify-content:center}.activeCarousel{gap:0px}.left-video,.right-video{display:none!important}.quote p{width:95%}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { videoPlayer: [{
                 type: ViewChild,
                 args: ['videoPlayer', { static: false }]
@@ -8374,7 +8374,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$2.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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, 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)\"  [attr.style]=\"customClass\">\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      <div>\r\n        <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      </div>\r\n      <div class=\"category-parent\"  [ngClass]=\"{'flex-wrap': getDirection == 'ROW'}\" [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\r\n        [style.justifyContent]=\"styles?.layout?.align\">\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 ?? 1) / (isMobile ? 2 : 1)\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" 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    \r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</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:fit-content!important;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{padding:2%;display:flex;width:100%;max-width:100%;margin-top:25px;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s}.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:8px;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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.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.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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, 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)\"  [attr.style]=\"customClass\">\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  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <div>\r\n        <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      </div>\r\n      <div class=\"category-parent\"  [ngClass]=\"{'flex-wrap': getDirection == 'ROW'}\" [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\r\n        [style.justifyContent]=\"styles?.layout?.align\">\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 ?? 1) / (isMobile ? 2 : 1)\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" 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    \r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</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:fit-content!important;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{padding:2%;display:flex;width:100%;max-width:100%;margin-top:25px;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s}.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:8px;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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.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.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: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }] }); }
 }
@@ -8396,7 +8396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         ColorDirective,
                         SanitizeHtmlPipe,
                         SvgDividerComponent
-                    ], 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)\"  [attr.style]=\"customClass\">\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      <div>\r\n        <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      </div>\r\n      <div class=\"category-parent\"  [ngClass]=\"{'flex-wrap': getDirection == 'ROW'}\" [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\r\n        [style.justifyContent]=\"styles?.layout?.align\">\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 ?? 1) / (isMobile ? 2 : 1)\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" 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    \r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</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:fit-content!important;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{padding:2%;display:flex;width:100%;max-width:100%;margin-top:25px;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s}.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:8px;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)\"  [attr.style]=\"customClass\">\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  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <div>\r\n        <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      </div>\r\n      <div class=\"category-parent\"  [ngClass]=\"{'flex-wrap': getDirection == 'ROW'}\" [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\r\n        [style.justifyContent]=\"styles?.layout?.align\">\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 ?? 1) / (isMobile ? 2 : 1)\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" 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    \r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</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:fit-content!important;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{padding:2%;display:flex;width:100%;max-width:100%;margin-top:25px;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s}.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:8px;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]
@@ -11071,7 +11071,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$2.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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, 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)\"  [attr.style]=\"customClass\">\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      <div>\r\n        <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      </div>\r\n      <div class=\"category-parent\"  [ngClass]=\"{'flex-wrap': getDirection == 'ROW'}\" [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\r\n        [style.justifyContent]=\"styles?.layout?.align\">\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 ?? 1) / (isMobile ? 2 : 1)\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" 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    \r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</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:fit-content!important;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{padding:2%;display:flex;width:100%;max-width:100%;margin-top:25px;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s}.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:8px;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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.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.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", customClass: "customClass", nextComponentColor: "nextComponentColor" }, 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)\"  [attr.style]=\"customClass\">\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  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <div>\r\n        <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      </div>\r\n      <div class=\"category-parent\"  [ngClass]=\"{'flex-wrap': getDirection == 'ROW'}\" [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\r\n        [style.justifyContent]=\"styles?.layout?.align\">\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 ?? 1) / (isMobile ? 2 : 1)\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" 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    \r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</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:fit-content!important;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{padding:2%;display:flex;width:100%;max-width:100%;margin-top:25px;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s}.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:8px;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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.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.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: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { 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" }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }] }); }
 }
@@ -11094,7 +11094,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         TextBackgroundDirectiveDirective,
                         ColorDirective,
                         SanitizeHtmlPipe, SvgDividerComponent
-                    ], 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)\"  [attr.style]=\"customClass\">\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      <div>\r\n        <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      </div>\r\n      <div class=\"category-parent\"  [ngClass]=\"{'flex-wrap': getDirection == 'ROW'}\" [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\r\n        [style.justifyContent]=\"styles?.layout?.align\">\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 ?? 1) / (isMobile ? 2 : 1)\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" 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    \r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</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:fit-content!important;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{padding:2%;display:flex;width:100%;max-width:100%;margin-top:25px;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s}.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:8px;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)\"  [attr.style]=\"customClass\">\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  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <div>\r\n        <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      </div>\r\n      <div class=\"category-parent\"  [ngClass]=\"{'flex-wrap': getDirection == 'ROW'}\" [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\r\n        [style.justifyContent]=\"styles?.layout?.align\">\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 ?? 1) / (isMobile ? 2 : 1)\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" 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    \r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</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:fit-content!important;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{padding:2%;display:flex;width:100%;max-width:100%;margin-top:25px;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s}.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:8px;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$2.Router }, { type: RestService }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], responseData: [{