npm - simpo-component-library - Versions diffs - 1.1.4 → 1.1.6 - Mend

simpo-component-library 1.1.4 → 1.1.6

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

Files changed (20) hide show

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

@@ -1823,7 +1823,7 @@ class TextSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextSectionComponent, deps: [{ token: i2$2.MatDialog }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TextSectionComponent, isStandalone: true, selector: "simpo-text-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\"  [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"main-section\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"body-section\">\r\n        <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n          <simpo-heading-element [data]=\"content?.headingText\"></simpo-heading-element>\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  <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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: TextElementComponent, selector: "simpo-text-element", inputs: ["textData", "textLabel"] }, { kind: "component", type: HeadingElementComponent, selector: "simpo-heading-element", inputs: ["data"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], 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: "17.2.3", type: TextSectionComponent, isStandalone: true, selector: "simpo-text-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\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          <simpo-heading-element [data]=\"content?.headingText\"></simpo-heading-element>\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  <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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: TextElementComponent, selector: "simpo-text-element", inputs: ["textData", "textLabel"] }, { kind: "component", type: HeadingElementComponent, selector: "simpo-heading-element", inputs: ["data"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], 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"] }] }); }
 }
@@ -1853,7 +1853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         OverlayDirective,
                         PositionLayoutDirectiveDirective,
                         TextBackgroundDirectiveDirective
-                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\"  [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"main-section\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"body-section\">\r\n        <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n          <simpo-heading-element [data]=\"content?.headingText\"></simpo-heading-element>\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  <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\" (click)=\"editSection()\">\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          <simpo-heading-element [data]=\"content?.headingText\"></simpo-heading-element>\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  <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"] }]
         }], ctorParameters: () => [{ type: i2$2.MatDialog }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -1990,6 +1990,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 args: ['simpoBorderless']
             }] } });
+class SimpoHoverBorderDirective {
+    onMouseEnter() {
+        this.el.nativeElement.style.setProperty("outline", "2px solid blue");
+        this.el.nativeElement.style.setProperty("border-radius", "5px");
+    }
+    onMouseLeave() {
+        this.el.nativeElement.style.setProperty("outline", "2px solid transparent");
+    }
+    constructor(el) {
+        this.el = el;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SimpoHoverBorderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: SimpoHoverBorderDirective, isStandalone: true, selector: "[simpoHoverBorderDirective]", inputs: { simpoHoverBorderDirective: "simpoHoverBorderDirective" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SimpoHoverBorderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[simpoHoverBorderDirective]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { simpoHoverBorderDirective: [{
+                type: Input
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
 class BannerSectionComponent extends BaseSection {
     constructor(_eventService) {
         super();
@@ -2040,6 +2070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         SimpoComponentModule,
                         MatGridListModule,
                         SimpoButtonComponent,
+                        SimpoHoverBorderDirective,
                         //directive
                         SimpoBorderlessDirective,
                         SimpoContainerAligment,
@@ -2612,7 +2643,7 @@ class TestimonialSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TestimonialSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n\r\n        <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-ride=\"carousel\" data-interval=\"1000\">\r\n          <ol class=\"carousel-indicators\">\r\n            <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n              data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n          </ol>\r\n          <div class=\"carousel-inner\">\r\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n              [class.active]=\"i === 0\">\r\n              <div style=\"width: 90%; margin: auto;\">\r\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n                [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n                  <img [src]=\"testimonial.image.url\" class=\"mb-1\" loading=\"lazy\" [simpoContainerLayout]=\"getLayout\">\r\n                  <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\r\n                  <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"prev\">\r\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Previous</span>\r\n          </a>\r\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"next\">\r\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Next</span>\r\n          </a>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], 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: "17.2.3", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\"\r\n          [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n\r\n        <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-ride=\"carousel\" data-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=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n          </ol>\r\n          <div class=\"carousel-inner\">\r\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n              [class.active]=\"i === 0\">\r\n              <div style=\"width: 90%; margin: auto;\">\r\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n                [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n                  <img [src]=\"testimonial.image.url\" class=\"mb-1\" loading=\"lazy\" [simpoContainerLayout]=\"getLayout\">\r\n                  <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\r\n                  <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"prev\">\r\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Previous</span>\r\n          </a>\r\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"next\">\r\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Next</span>\r\n          </a>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContainerFitDirective, selector: "[simpoContainerLayout]", inputs: ["simpoContainerLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }] }); }
 }
@@ -2643,7 +2674,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         TextBackgroundDirectiveDirective,
                         ColorDirective,
                         ContentTitleDirective
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n\r\n        <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-ride=\"carousel\" data-interval=\"1000\">\r\n          <ol class=\"carousel-indicators\">\r\n            <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n              data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n          </ol>\r\n          <div class=\"carousel-inner\">\r\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n              [class.active]=\"i === 0\">\r\n              <div style=\"width: 90%; margin: auto;\">\r\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n                [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n                  <img [src]=\"testimonial.image.url\" class=\"mb-1\" loading=\"lazy\" [simpoContainerLayout]=\"getLayout\">\r\n                  <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\r\n                  <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"prev\">\r\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Previous</span>\r\n          </a>\r\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"next\">\r\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Next</span>\r\n          </a>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\"\r\n          [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n\r\n        <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-ride=\"carousel\" data-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=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n          </ol>\r\n          <div class=\"carousel-inner\">\r\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n              [class.active]=\"i === 0\">\r\n              <div style=\"width: 90%; margin: auto;\">\r\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n                [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n                  <img [src]=\"testimonial.image.url\" class=\"mb-1\" loading=\"lazy\" [simpoContainerLayout]=\"getLayout\">\r\n                  <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\r\n                  <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"prev\">\r\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Previous</span>\r\n          </a>\r\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"next\">\r\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Next</span>\r\n          </a>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -2934,7 +2965,7 @@ class NavbarSectionComponent {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"w-50 left-logo-text\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n          <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n            <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n            loading=\"lazy\">\r\n          </div>\r\n          <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n            <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n          *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n          loading=\"lazy\">\r\n        </div>\r\n      </div>\r\n      <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n        <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n          aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n          <hr>\r\n          <hr>\r\n          <hr>\r\n        </button>\r\n      </div>\r\n      <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n        <div class=\"navbar-nav align-items-center\">\r\n          <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n            <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n              <ng-container *ngIf=\"item.showHeader\">\r\n                <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n                [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"d-flex\">\r\n            <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n              [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n              <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                  <div style=\"position: relative;margin-right: 10px;\">\r\n                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex\">\r\n            <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n              <div *ngFor=\"let button of action?.buttons\">\r\n                <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n                <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                  [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth < 768\">\r\n        <div class=\"inner-height p-4\">\r\n          <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n            <div class=\"d-flex flex-column w-100\">\r\n              <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"title-row\">\r\n                  <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n                    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n                      <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                      loading=\"lazy\">\r\n                    </div>\r\n                    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"d-flex gap-3 align-items-center\"\r\n                    *ngIf=\"content?.logo?.isImage\">\r\n                    <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                    loading=\"lazy\">\r\n                  </div>\r\n\r\n                </div>\r\n                <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                  <mat-icon>close</mat-icon>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                <div class=\"d-flex flex-column gap-4 w-100\">\r\n                  <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                    <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-column\">\r\n              <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                  [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                  <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                    <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                      <div style=\"position: relative;margin-right: 10px;\">\r\n                        <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                      </div>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex mt-4\">\r\n                <div *ngIf=\"action?.display\" class=\"button-display\">\r\n                  <div *ngFor=\"let button of action?.buttons\">\r\n                    <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                      [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;color:#fff;height:calc(100vh + -0px);z-index:101}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"w-50 left-logo-text\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n          <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n            <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n            loading=\"lazy\">\r\n          </div>\r\n          <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n            <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n          *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n          loading=\"lazy\">\r\n        </div>\r\n      </div>\r\n      <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n        <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n          aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n          <hr>\r\n          <hr>\r\n          <hr>\r\n        </button>\r\n      </div>\r\n      <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n        <div class=\"navbar-nav align-items-center\">\r\n          <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n            <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n              <ng-container *ngIf=\"item.showHeader\">\r\n                <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n                [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"d-flex\">\r\n            <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n              [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n              <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                  <div style=\"position: relative;margin-right: 10px;\">\r\n                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex\">\r\n            <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n              <div *ngFor=\"let button of action?.buttons\">\r\n                <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n                <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                  [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth < 768\">\r\n        <div class=\"inner-height p-4\">\r\n          <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n            <div class=\"d-flex flex-column w-100\">\r\n              <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"title-row\">\r\n                  <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n                    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n                      <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                      loading=\"lazy\">\r\n                    </div>\r\n                    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"d-flex gap-3 align-items-center\"\r\n                    *ngIf=\"content?.logo?.isImage\">\r\n                    <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                    loading=\"lazy\">\r\n                  </div>\r\n\r\n                </div>\r\n                <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                  <mat-icon>close</mat-icon>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                <div class=\"d-flex flex-column gap-4 w-100\">\r\n                  <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                    <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-column\">\r\n              <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                  [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                  <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                    <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                      <div style=\"position: relative;margin-right: 10px;\">\r\n                        <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                      </div>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex mt-4\">\r\n                <div *ngIf=\"action?.display\" class=\"button-display\">\r\n                  <div *ngFor=\"let button of action?.buttons\">\r\n                    <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                      [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </nav>\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>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;color:#fff;height:calc(100vh + -0px);z-index:101}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavbarSectionComponent, decorators: [{
             type: Component,
@@ -2957,7 +2988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         SimpoStickyDirective,
                         PositionLayoutDirectiveDirective,
                         TextBackgroundDirectiveDirective,
-                        ColorDirective], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"w-50 left-logo-text\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n          <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n            <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n            loading=\"lazy\">\r\n          </div>\r\n          <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n            <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n          *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n          loading=\"lazy\">\r\n        </div>\r\n      </div>\r\n      <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n        <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n          aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n          <hr>\r\n          <hr>\r\n          <hr>\r\n        </button>\r\n      </div>\r\n      <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n        <div class=\"navbar-nav align-items-center\">\r\n          <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n            <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n              <ng-container *ngIf=\"item.showHeader\">\r\n                <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n                [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"d-flex\">\r\n            <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n              [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n              <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                  <div style=\"position: relative;margin-right: 10px;\">\r\n                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex\">\r\n            <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n              <div *ngFor=\"let button of action?.buttons\">\r\n                <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n                <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                  [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth < 768\">\r\n        <div class=\"inner-height p-4\">\r\n          <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n            <div class=\"d-flex flex-column w-100\">\r\n              <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"title-row\">\r\n                  <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n                    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n                      <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                      loading=\"lazy\">\r\n                    </div>\r\n                    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"d-flex gap-3 align-items-center\"\r\n                    *ngIf=\"content?.logo?.isImage\">\r\n                    <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                    loading=\"lazy\">\r\n                  </div>\r\n\r\n                </div>\r\n                <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                  <mat-icon>close</mat-icon>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                <div class=\"d-flex flex-column gap-4 w-100\">\r\n                  <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                    <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-column\">\r\n              <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                  [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                  <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                    <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                      <div style=\"position: relative;margin-right: 10px;\">\r\n                        <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                      </div>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex mt-4\">\r\n                <div *ngIf=\"action?.display\" class=\"button-display\">\r\n                  <div *ngFor=\"let button of action?.buttons\">\r\n                    <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                      [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;color:#fff;height:calc(100vh + -0px);z-index:101}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}\n"] }]
+                        ColorDirective], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"w-50 left-logo-text\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n          <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n            <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n            loading=\"lazy\">\r\n          </div>\r\n          <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n            <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n          *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n          loading=\"lazy\">\r\n        </div>\r\n      </div>\r\n      <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n        <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n          aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n          <hr>\r\n          <hr>\r\n          <hr>\r\n        </button>\r\n      </div>\r\n      <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n        <div class=\"navbar-nav align-items-center\">\r\n          <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n            <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n              <ng-container *ngIf=\"item.showHeader\">\r\n                <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n                [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"d-flex\">\r\n            <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n              [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n              <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                  <div style=\"position: relative;margin-right: 10px;\">\r\n                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex\">\r\n            <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n              <div *ngFor=\"let button of action?.buttons\">\r\n                <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n                <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                  [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth < 768\">\r\n        <div class=\"inner-height p-4\">\r\n          <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n            <div class=\"d-flex flex-column w-100\">\r\n              <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"title-row\">\r\n                  <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n                    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n                      <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                      loading=\"lazy\">\r\n                    </div>\r\n                    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"d-flex gap-3 align-items-center\"\r\n                    *ngIf=\"content?.logo?.isImage\">\r\n                    <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                    loading=\"lazy\">\r\n                  </div>\r\n\r\n                </div>\r\n                <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                  <mat-icon>close</mat-icon>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                <div class=\"d-flex flex-column gap-4 w-100\">\r\n                  <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                    <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-column\">\r\n              <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                  [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                  <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                    <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                      <div style=\"position: relative;margin-right: 10px;\">\r\n                        <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                      </div>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex mt-4\">\r\n                <div *ngIf=\"action?.display\" class=\"button-display\">\r\n                  <div *ngFor=\"let button of action?.buttons\">\r\n                    <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                      [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </nav>\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>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;color:#fff;height:calc(100vh + -0px);z-index:101}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], nextComponent: [{
@@ -3049,7 +3080,7 @@ class ContactUsComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ContactUsComponent, deps: [{ token: EventsService }, { token: PLATFORM_ID }, { token: i2$4.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ContactUsComponent, isStandalone: true, selector: "simpo-contact-us", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "screenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" (click)=\"editSection()\">\r\n    <div *ngIf=\"content?.image?.showImage === false\" 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 class=\"col-12 d-flex justify-content-evenly\" style=\"gap: 3rem;\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n            [ngClass]=\"{'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n              <div class=\"d-flex flex-column col-5 pt-5\">\r\n                <simpo-heading-element [data]=\"content?.headingText\"></simpo-heading-element>\r\n                <div  *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n                    [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" >\r\n                </div>\r\n              </div>\r\n                <div class=\"col-5 d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n                    <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n                        <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n                    </ng-container>\r\n                    <div class=\"w-100\">\r\n                      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button>\r\n                    </div>\r\n                    <!-- <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"content?.image?.showImage === true\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n      [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n      <div class=\"g-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n        [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n        [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n        <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n          <img [src]=\"content?.image?.url\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n            [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n            class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\"\r\n            loading=\"lazy\" />\r\n        </div>\r\n        <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\" [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\">\r\n          <div class=\"d-flex flex-column\">\r\n            <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n              [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n            <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n              <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\"\r\n                [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n            </ng-container>\r\n            <div class=\"w-100\">\r\n              <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button\r\n                }}</button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>\r\n", styles: [".send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column-reverse}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: HeadingElementComponent, selector: "simpo-heading-element", inputs: ["data"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: InputFieldsComponent, selector: "simpo-input-fields", inputs: ["feild", "opacity", "bgColor", "sectionId"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type:
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ContactUsComponent, isStandalone: true, selector: "simpo-contact-us", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "screenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" (click)=\"editSection()\">\r\n    <div *ngIf=\"content?.image?.showImage === false\" 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 class=\"col-12 d-flex justify-content-evenly\" style=\"gap: 3rem;\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n            [ngClass]=\"{'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n              <div class=\"d-flex flex-column col-5 pt-5\">\r\n                <div  *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n                    [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" >\r\n                </div>\r\n              </div>\r\n                <div class=\"col-5 d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n                    <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n                        <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n                    </ng-container>\r\n                    <div class=\"w-100\">\r\n                      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button>\r\n                    </div>\r\n                    <!-- <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"content?.image?.showImage === true\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n      [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n      <div class=\"g-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n        [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n        [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n        <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n          <img [src]=\"content?.image?.url\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n            [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n            class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\"\r\n            loading=\"lazy\" />\r\n        </div>\r\n        <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\" [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\">\r\n          <div class=\"d-flex flex-column\">\r\n            <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n              [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n            <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n              <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\"\r\n                [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n            </ng-container>\r\n            <div class=\"w-100\">\r\n              <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button\r\n                }}</button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>\r\n", styles: [".send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column-reverse}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: InputFieldsComponent, selector: "simpo-input-fields", inputs: ["feild", "opacity", "bgColor", "sectionId"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type:
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
 }
@@ -3080,7 +3111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         TextBackgroundDirectiveDirective,
                         ObjectPositionDirective,
                         ButtonDirectiveDirective
-                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" (click)=\"editSection()\">\r\n    <div *ngIf=\"content?.image?.showImage === false\" 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 class=\"col-12 d-flex justify-content-evenly\" style=\"gap: 3rem;\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n            [ngClass]=\"{'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n              <div class=\"d-flex flex-column col-5 pt-5\">\r\n                <simpo-heading-element [data]=\"content?.headingText\"></simpo-heading-element>\r\n                <div  *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n                    [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" >\r\n                </div>\r\n              </div>\r\n                <div class=\"col-5 d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n                    <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n                        <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n                    </ng-container>\r\n                    <div class=\"w-100\">\r\n                      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button>\r\n                    </div>\r\n                    <!-- <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"content?.image?.showImage === true\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n      [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n      <div class=\"g-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n        [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n        [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n        <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n          <img [src]=\"content?.image?.url\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n            [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n            class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\"\r\n            loading=\"lazy\" />\r\n        </div>\r\n        <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\" [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\">\r\n          <div class=\"d-flex flex-column\">\r\n            <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n              [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n            <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n              <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\"\r\n                [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n            </ng-container>\r\n            <div class=\"w-100\">\r\n              <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button\r\n                }}</button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>\r\n", styles: [".send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column-reverse}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}\n"] }]
+                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" (click)=\"editSection()\">\r\n    <div *ngIf=\"content?.image?.showImage === false\" 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 class=\"col-12 d-flex justify-content-evenly\" style=\"gap: 3rem;\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n            [ngClass]=\"{'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n              <div class=\"d-flex flex-column col-5 pt-5\">\r\n                <div  *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n                    [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" >\r\n                </div>\r\n              </div>\r\n                <div class=\"col-5 d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n                    <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n                        <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n                    </ng-container>\r\n                    <div class=\"w-100\">\r\n                      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button>\r\n                    </div>\r\n                    <!-- <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"content?.image?.showImage === true\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n      [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n      <div class=\"g-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n        [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n        [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n        <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n          <img [src]=\"content?.image?.url\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n            [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n            class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\"\r\n            loading=\"lazy\" />\r\n        </div>\r\n        <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\" [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\">\r\n          <div class=\"d-flex flex-column\">\r\n            <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n              [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n            <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n              <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\"\r\n                [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n            </ng-container>\r\n            <div class=\"w-100\">\r\n              <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button\r\n                }}</button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>\r\n", styles: [".send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column-reverse}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -3569,7 +3600,7 @@ class BlogListComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BlogListComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: BlogListComponent, isStandalone: true, selector: "simpo-blog-list", inputs: { responseData: "responseData", index: "index", edit: "edit", data: "data" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" (click)=\"editSection()\">\r\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"row\">\r\n        <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\">\r\n          <div class=\"cards\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n            <img [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n              alt=\"\" *ngIf=\"content.img\"\r\n              loading=\"lazy\">\r\n            <img [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n            src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\" alt=\"\" *ngIf=\"!content.img\"\r\n            loading=\"lazy\">\r\n            <div class=\"p-30\">\r\n              <div class=\"heading-medium title mt-4\" *ngIf=\"blogContent?.display?.showHeading\">\r\n                {{content.postTitle}}\r\n              </div>\r\n              <ng-container>\r\n                <div class=\"body-large mt-4\" *ngIf=\"blogContent?.display?.showContent\">\r\n                  {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n                  content.postSummary }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n                <div>\r\n                  <mat-icon>person</mat-icon> &nbsp;&nbsp;<span class=\"body-large\">{{content?.author?.name}}</span>\r\n                </div>\r\n                <div class=\"calendar_today\">\r\n                  <mat-icon>calendar_today</mat-icon> &nbsp;&nbsp; <span class=\"body-large\">{{content.createdTimeStamp |\r\n                    date:'EEEE, MMM, d, y'}}</span>\r\n                </div>\r\n              </div>\r\n              <div class=\"button heading-large\" (click)=\"getBlogById(content.id)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n                Read More <mat-icon>arrow_right_alt</mat-icon>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</section>\r\n<ng-template #elseBlock>\r\n  <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>\r\n", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:30px 15px 0}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:18px;display:flex;align-items:center;gap:10px;cursor:pointer}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: BlogListComponent, isStandalone: true, selector: "simpo-blog-list", inputs: { responseData: "responseData", index: "index", edit: "edit", data: "data" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" (click)=\"editSection()\">\r\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"row\">\r\n        <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\">\r\n          <div class=\"cards\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n            <img [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n              alt=\"\" *ngIf=\"content.img\"\r\n              loading=\"lazy\">\r\n            <img [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n            src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\" alt=\"\" *ngIf=\"!content.img\"\r\n            loading=\"lazy\">\r\n            <div class=\"p-30\">\r\n              <div class=\"heading-medium title mt-4\" *ngIf=\"blogContent?.display?.showHeading\">\r\n                {{content.postTitle}}\r\n              </div>\r\n              <ng-container>\r\n                <div class=\"body-large mt-4\" *ngIf=\"blogContent?.display?.showContent\">\r\n                  {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n                  content.postSummary }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n                <div>\r\n                  <mat-icon>person</mat-icon> &nbsp;&nbsp;<span class=\"body-large\">{{content?.author?.name}}</span>\r\n                </div>\r\n                <div class=\"calendar_today\">\r\n                  <mat-icon>calendar_today</mat-icon> &nbsp;&nbsp; <span class=\"body-large\">{{content.createdTimeStamp |\r\n                    date:'EEEE, MMM, d, y'}}</span>\r\n                </div>\r\n              </div>\r\n              <div class=\"button heading-large\" (click)=\"getBlogById(content.id)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n                Read More <mat-icon>arrow_right_alt</mat-icon>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</section>\r\n<ng-template #elseBlock>\r\n  <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>\r\n", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:30px 15px 0}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:18px;display:flex;align-items:center;gap:10px;cursor:pointer}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BlogListComponent, decorators: [{
             type: Component,
@@ -3586,7 +3617,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         HoverDirective,
                         HoverElementsComponent,
                         MatIcon
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" (click)=\"editSection()\">\r\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"row\">\r\n        <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\">\r\n          <div class=\"cards\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n            <img [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n              alt=\"\" *ngIf=\"content.img\"\r\n              loading=\"lazy\">\r\n            <img [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n            src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\" alt=\"\" *ngIf=\"!content.img\"\r\n            loading=\"lazy\">\r\n            <div class=\"p-30\">\r\n              <div class=\"heading-medium title mt-4\" *ngIf=\"blogContent?.display?.showHeading\">\r\n                {{content.postTitle}}\r\n              </div>\r\n              <ng-container>\r\n                <div class=\"body-large mt-4\" *ngIf=\"blogContent?.display?.showContent\">\r\n                  {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n                  content.postSummary }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n                <div>\r\n                  <mat-icon>person</mat-icon> &nbsp;&nbsp;<span class=\"body-large\">{{content?.author?.name}}</span>\r\n                </div>\r\n                <div class=\"calendar_today\">\r\n                  <mat-icon>calendar_today</mat-icon> &nbsp;&nbsp; <span class=\"body-large\">{{content.createdTimeStamp |\r\n                    date:'EEEE, MMM, d, y'}}</span>\r\n                </div>\r\n              </div>\r\n              <div class=\"button heading-large\" (click)=\"getBlogById(content.id)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n                Read More <mat-icon>arrow_right_alt</mat-icon>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</section>\r\n<ng-template #elseBlock>\r\n  <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>\r\n", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:30px 15px 0}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:18px;display:flex;align-items:center;gap:10px;cursor:pointer}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" (click)=\"editSection()\">\r\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"row\">\r\n        <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\">\r\n          <div class=\"cards\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n            <img [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n              alt=\"\" *ngIf=\"content.img\"\r\n              loading=\"lazy\">\r\n            <img [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n            src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\" alt=\"\" *ngIf=\"!content.img\"\r\n            loading=\"lazy\">\r\n            <div class=\"p-30\">\r\n              <div class=\"heading-medium title mt-4\" *ngIf=\"blogContent?.display?.showHeading\">\r\n                {{content.postTitle}}\r\n              </div>\r\n              <ng-container>\r\n                <div class=\"body-large mt-4\" *ngIf=\"blogContent?.display?.showContent\">\r\n                  {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n                  content.postSummary }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n                <div>\r\n                  <mat-icon>person</mat-icon> &nbsp;&nbsp;<span class=\"body-large\">{{content?.author?.name}}</span>\r\n                </div>\r\n                <div class=\"calendar_today\">\r\n                  <mat-icon>calendar_today</mat-icon> &nbsp;&nbsp; <span class=\"body-large\">{{content.createdTimeStamp |\r\n                    date:'EEEE, MMM, d, y'}}</span>\r\n                </div>\r\n              </div>\r\n              <div class=\"button heading-large\" (click)=\"getBlogById(content.id)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n                Read More <mat-icon>arrow_right_alt</mat-icon>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</section>\r\n<ng-template #elseBlock>\r\n  <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>\r\n", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:30px 15px 0}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:18px;display:flex;align-items:center;gap:10px;cursor:pointer}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { responseData: [{
                 type: Input
             }], index: [{
@@ -3718,7 +3749,7 @@ class ProcessModernComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProcessModernComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ProcessModernComponent, isStandalone: true, selector: "simpo-process-modern", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n      <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n        <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n          <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n            <div *ngFor=\"let text of data?.content?.inputText\">\r\n              <div class=\"heading-large lh-2 mb-3\" [innerHTML]=\"text.value\"></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\">\r\n                <img 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\">\r\n                <div class=\"numberStyle\">\r\n                  {{ i }}\r\n                </div>\r\n                <div class=\"contentHeading\">\r\n                  {{ item.inputText[0].value }}\r\n                </div>\r\n                <div class=\"contentDescription\">\r\n                  {{ item.inputText[1].value }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <!-- ending -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;width:80%!important;margin:3% auto auto;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px;font-weight:600}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}@media only screen and (max-width: 475px){.rowFlexContainer{flex-direction:column!important;width:100%!important;height:auto!important}.imageContainer{width:100%!important;height:auto!important}.section_image{width:100%;height:auto;object-fit:cover;border-radius:10px}.content{width:100%!important;margin-top:15px;margin-right:0}.numberStyle{margin-bottom:15px;width:50px;height:50px}.contentDescription{width:100%!important}.row{margin-left:.2px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ProcessModernComponent, isStandalone: true, selector: "simpo-process-modern", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n      <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n        <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n          <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n            <div *ngFor=\"let text of data?.content?.inputText\">\r\n              <div class=\"heading-large lh-2 mb-3\" [innerHTML]=\"text.value\"></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 class=\"section_image\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\r\n                  [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n                  loading=\"lazy\">\r\n              </div>\r\n              <div class=\"content\" [ngClass]=\"{'no-image-content': item.image.url===''}\">\r\n                <div class=\"numberStyle\">\r\n                  {{ i + 1}}\r\n                </div>\r\n                <div class=\"contentHeading\">\r\n                  {{ item.inputText[0].value }}\r\n                </div>\r\n                <div class=\"contentDescription\">\r\n                  {{ item.inputText[1].value }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <!-- ending -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;width:80%!important;margin:3% auto auto;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px;font-weight:600}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.no-image{display:none}.no-image-content{width:40%!important;margin-left:auto;margin-right:auto}.no-image-content .contentDescription{width:100%!important}@media only screen and (max-width: 475px){.rowFlexContainer{flex-direction:column!important;width:100%!important;height:auto!important}.imageContainer{width:100%!important;height:auto!important}.section_image{width:100%;height:auto;object-fit:cover;border-radius:10px}.content{width:100%!important;margin-top:15px;margin-right:0}.numberStyle{margin-bottom:15px;width:50px;height:50px}.contentDescription{width:100%!important}.row{margin-left:.2px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProcessModernComponent, decorators: [{
             type: Component,
@@ -3749,7 +3780,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         ObjectPositionDirective,
                         ColorDirective,
                         TextSizeDirective
-                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n      <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\"></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\">\r\n                <img 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\">\r\n                <div class=\"numberStyle\">\r\n                  {{ i }}\r\n                </div>\r\n                <div class=\"contentHeading\">\r\n                  {{ item.inputText[0].value }}\r\n                </div>\r\n                <div class=\"contentDescription\">\r\n                  {{ item.inputText[1].value }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <!-- ending -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;width:80%!important;margin:3% auto auto;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px;font-weight:600}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}@media only screen and (max-width: 475px){.rowFlexContainer{flex-direction:column!important;width:100%!important;height:auto!important}.imageContainer{width:100%!important;height:auto!important}.section_image{width:100%;height:auto;object-fit:cover;border-radius:10px}.content{width:100%!important;margin-top:15px;margin-right:0}.numberStyle{margin-bottom:15px;width:50px;height:50px}.contentDescription{width:100%!important}.row{margin-left:.2px}}\n"] }]
+                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n      <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n        <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n          <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n            <div *ngFor=\"let text of data?.content?.inputText\">\r\n              <div class=\"heading-large lh-2 mb-3\" [innerHTML]=\"text.value\"></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 class=\"section_image\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\r\n                  [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n                  loading=\"lazy\">\r\n              </div>\r\n              <div class=\"content\" [ngClass]=\"{'no-image-content': item.image.url===''}\">\r\n                <div class=\"numberStyle\">\r\n                  {{ i + 1}}\r\n                </div>\r\n                <div class=\"contentHeading\">\r\n                  {{ item.inputText[0].value }}\r\n                </div>\r\n                <div class=\"contentDescription\">\r\n                  {{ item.inputText[1].value }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <!-- ending -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;width:80%!important;margin:3% auto auto;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px;font-weight:600}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.no-image{display:none}.no-image-content{width:40%!important;margin-left:auto;margin-right:auto}.no-image-content .contentDescription{width:100%!important}@media only screen and (max-width: 475px){.rowFlexContainer{flex-direction:column!important;width:100%!important;height:auto!important}.imageContainer{width:100%!important;height:auto!important}.section_image{width:100%;height:auto;object-fit:cover;border-radius:10px}.content{width:100%!important;margin-top:15px;margin-right:0}.numberStyle{margin-bottom:15px;width:50px;height:50px}.contentDescription{width:100%!important}.row{margin-left:.2px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{